/* ============================================================
   components.css (UPDATED - FULL WIDTH NAV + NO ROUNDED BUTTONS)
   - Announcement bar stays fixed, hides on scroll
   - Navbar is FULL WIDTH (edge-to-edge), glass on scroll
   - Logo left, menu center, actions right (ClickUp layout)
   - Navbar container NOT rounded
   - Login/Signup buttons NOT pill/rounded
   ============================================================ */


/* =========================
   1) Announcement Bar
========================= */
.announce{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #faf8f9;
  color: #050505;
  height: 36px;
  display: flex;
  align-items: center;
  transition: transform .25s ease, opacity .25s ease;
}
.announce__inner{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.announce__text{opacity: .95 ; font-weight: 500;}
.announce__link{opacity: .9}
.announce__link:hover{opacity: 1; text-decoration: underline}
.announce.is-hidden{transform: translateY(-110%); opacity: 0}


/* =========================
   2) Navbar (FULL WIDTH + Glass on Scroll)
   IMPORTANT:
   - .navWrap is the full-width bar
   - .navInner centers the content to 1180px
   - .nav uses 3-column layout: left | center | right
========================= */
.navWrap{
  position: fixed;
  top: 36px; left: 0; right: 0;
  z-index: 60;
  /* ✅ no rounded, no top jump */
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ✅ content container (centered) */
.navInner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ✅ 3-column navbar row */
.nav{
  height: var(--navH);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  /* ✅ MUST: no rounded */
  border-radius: 0;
  background: transparent;
  border: 0;
}

/* ✅ Glass effect on scroll (still full width) */
.navWrap.is-sticky{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(13,15,18,.10);
  box-shadow: 0 10px 30px rgba(13,15,18,.06);
  top: 0px;
}

/* 3 columns */
.nav__left{justify-self: start; display: flex; align-items: center;}
.nav__center{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================
   NAV — Active Link
========================= */
.nav__link.is-active{
  color: rgb(13,15,18);
  position: relative;
}

/* subtle underline pill */
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.70)
  );
  opacity: .85;
}

/* drawer active */
.drawer__item.is-active{
  background: rgba(13,15,18,.04);
  border-radius: 12px;
  font-weight: 700;
}





/* ==========================
   ✅ FORCE VISIBILITY CLASSES (UPDATED FINAL)
   - Defeats CSS conflicts + inline display:none
   - Uses [hidden] as source of truth
========================== */



/* Any [hidden] element should not show */
[hidden]{ display:none !important; }

/* Buttons */
#navLoginBtn.is-hidden,
#navSignupBtn.is-hidden,
#mNavLoginItem.is-hidden,
#mNavSignupBtn.is-hidden{
  display:none !important;
}

/* ==========================
   DESKTOP PROFILE VISIBILITY (SMART)
   - Show only when JS makes it .is-visible
   - Hide on real mobile (touch) under 980px
========================== */



/* JS turns it on */
#navProfileBtn.is-visible{
  display:inline-flex !important;
  pointer-events:auto;
  visibility:visible;
}



/* ✅ Hide desktop profile ONLY on real mobile devices <= 980px */
@media (max-width: 980px) and (hover: none) and (pointer: coarse){
  #navProfileBtn{
    display:none !important;
  }
}

/* =========================================================
   NAV SESSION UI (CLEAN)
   ✅ Desktop profile on desktop devices
   ✅ Mobile profile only inside drawer
   ✅ NO width-based hide (fixes PC @ 946px issue)
========================================================= */

/* --------------------------
   DESKTOP PROFILE (image + name only)
-------------------------- */


.navProfile{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  line-height:1;
}

.navProfile__avatarWrap{
  width:30px;
  height:30px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 30px;
}

.navProfile__avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.navProfile__onlineDot{ display:none !important; }

.navProfile__name{
  font-size:13px;
  font-weight:700;
  letter-spacing:.18px;
  color: rgb(13,15,18);
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}



/* --------------------------
   MOBILE DRAWER PROFILE
-------------------------- */
.mNavProfile{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(13,15,18,.10);
  background: rgba(255,255,255,.90);
}

.mNavProfile__avatarWrap{
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 34px;
}

.mNavProfile__avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mNavProfile__onlineDot{ display:none !important; }

.mNavProfile__name{
  flex:1;
  font-size:13px;
  font-weight:700;
  color: rgb(13,15,18);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mNavProfile__logout{
  border:1px solid rgba(13,15,18,.10);
  background: rgba(13,15,18,.06);
  color: rgba(13,15,18,.85);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}







/*==========================
       nvabar hide on mobile devices
===========================*/


@media (max-width: 600px){
  .announce{ display:none !important; }
  .navWrap{ top: 0 !important; }
}


/* =========================
   3) Brand / Logo
========================= */
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  width: 34px;
  height: 34px;
  border-radius: 10px; /* logo can be rounded */
  display: grid;
  place-items: center;
  background: rgb(13,15,18);
  color: #fff;
  font-weight: 800;
}
.brand__name{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: -.02em;
}


/* Brand logo styling */
.brand__logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}


/* =========================
   4) Nav Links
========================= */
.nav__link{
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgb(100,100,100);
  white-space: nowrap;
}
.nav__link:hover{color: rgb(13,15,18);}

.nav__link--right{margin-right: 8px;}

/* =========================
   5) Buttons (NOT ROUNDED / NOT PILL)
   ✅ Requested: "rounded nahi"
========================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 8px;          /* ✅ NOT pill */
  padding: 0 14px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid rgba(13,15,18,.12);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform: scale(.98)}
.btn--ghost{background:#f5f5f5}
.btn--solid{
  background: rgb(13,15,18);
  color: #fff;
  border-color: rgb(13,15,18);
}
.btn--lg{
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: 10px;        /* ✅ still NOT pill */
}


/* =========================
   6) Mobile Menu
========================= */
.nav__toggle{
  display: none;
  width: 38px;
  height: 34px;
  border-radius: 8px;          /* ✅ NOT pill */
  border: 1px solid rgba(13,15,18,.12);
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav__toggle span{
  display:block;
  width:16px;height:2px;
  background: rgb(13,15,18);
  border-radius: 2px;
}

/* mobile dropdown drawer */
.navMobile{
  display: none;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(13,15,18,.10);
  backdrop-filter: blur(14px);
}
.navMobile.is-open{display:block}

.navMobile__link{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  font-family:"Inter",sans-serif;
  font-weight:500;
  color: rgb(13,15,18);
}
.navMobile__link:hover{background: rgba(13,15,18,.04);}

/* responsive */
@media (max-width: 980px){
  .nav{grid-template-columns: 1fr 1fr;}  /* left | right */
  .nav__center{display:none;}
  .nav__toggle{display:flex;}
}


/* =========================
   7) Hero + Pills + Chips
========================= */
.pillRow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px; /* pills stay pill (ok) */
  border:1px solid var(--line);
  background:#fff;
}
.pill--muted{background: var(--soft)}
/* Hero Title — smooth zoom + rich purple/blue flow (no blur) */
.hero__title{
  margin: 10px 0 10px;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 66px;
  letter-spacing: -0.04em;
    padding-bottom: 6px;     /* ✅ stops bottom clipping */
  display: inline-block;   /* ✅ better for gradient text */


  /* base */
  background: linear-gradient(90deg,
    rgb(13,15,18) 0%,
    rgb(13,15,18) 62%,
    rgba(59,130,246,0.95) 78%,
    rgba(59,130,246,0.35) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* flow ready */
  background-size: 220% 100%;
  background-position: 0% 50%;

  /* ✅ smooth zoom ready */
  transform: scale(1);
  transform-origin: left center;

  transition:
    background 240ms ease-in-out,
    background-size 700ms ease-in-out,
    background-position 1100ms ease-in-out,
    transform 700ms cubic-bezier(.2,.8,.2,1);
}

.hero__title:hover{
  /* richer purple/blue gradient */
  background: linear-gradient(90deg,
    rgba(59,130,246,1) 0%,
    rgba(124,58,237,1) 30%,
    rgba(236,72,153,1) 55%,
    rgba(59,130,246,1) 78%,
    rgba(14,165,233,1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* multi-color travel */
  background-size: 380% 100%;
  background-position: 100% 50%;


}

/* Mobile size */
@media (max-width: 980px){
  .hero__title{
    font-size: 44px;
    line-height: 50px;
  }
}

.hero__sub{
  margin: 0 0 18px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(100,100,100);
  max-width: 520px;
}
@media (max-width: 980px){
  .hero__title{font-size: 44px; line-height: 50px;}
}

.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.hero__note{font-size:13px;color:rgba(13,15,18,.65)}

.chipHeader{margin-top:18px}
.chipHeader__label{
  font-family: "Sometype Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: .12em;
  color: rgba(13,15,18,.60);
  margin-bottom:10px;
}

/* =========================
   CHIPS WRAPPER
========================= */
.chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   CHIP BASE
========================= */
.chip{
  position: relative;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0 14px;

  background:#fff;
  color: rgb(13,15,18);

  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;

  border-radius: 14px;
  cursor:pointer;

  /* base border (hidden when animated) */
  border:1px dashed rgba(13,15,18,.18);

  transition:
    background-color .25s ease,
    color .25s ease,
    transform .18s ease;
}

.chip:hover{
  transform: translateY(-1px);
}

/* =========================
   MOVING GRADIENT STROKE chips
   (snake / trim-path style)
========================= */
.chip::after{
  content:"";
  position:absolute;
  inset:-2px;                 /* sits on border */
  border-radius: inherit;
  padding:2px;

  /* gradient stroke */
  background: linear-gradient(
    120deg,
    #3b82f6,
    #6366f1,
    #8b5cf6,
    #3b82f6
  );
  background-size: 300% 300%;
  background-position: 0% 50%;

  /* cut inner */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity:0;
  pointer-events:none;
}

/* =========================
   HOVER EFFECT chips
========================= */
.chip:hover::after{
  opacity:1;
  animation: chipStrokeMove 2200ms ease-in-out infinite;
}

/* =========================
   ACTIVE CHIPs effect 
========================= */
.chip.is-active{
  background: rgba(59,130,246,0.10);   /* soft blue bg */
  border-color: transparent;
}

.chip.is-active::after{
  opacity:1;
  animation: chipStrokeMove 2600ms ease-in-out infinite;
}

/* =========================
   TEXT VISIBILITY FIX chips
========================= */
.chip span,
.chip{
  z-index:1;
}

/* =========================
   ULTRA SMOOTH ANIMATION chips 
========================= */
@keyframes chipStrokeMove{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}



/* =========================================================
   MOBILE VISIBILITY CONTROL Chips
   - Chips aur chip header mobile devices par hide honge
   - Desktop / tablet par normal visible rahenge
========================================================= */

@media (max-width: 980px){

  /* Hide chip heading text (e.g. "GET 400% MORE DONE...") */
  .chipHeader{
    display: none !important;
  }

  /* Hide feature chips row on mobile */
  .chips{
    display: none !important;
  }

}


/* =========================
   8) Preview Card
========================= */
.previewCard{
  position:relative;
  border-radius: var(--radius);
  border: 1px solid rgba(13,15,18,.08);
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.previewTop{
  padding: 12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(13,15,18,.08);
}
.previewTop__left{display:flex;align-items:center;gap:10px}
.previewTop__title{font-weight:800}
.dotBadge{width:10px;height:10px;border-radius:999px;background:#22c55e}
.miniPill{
  font-size:12px;
  border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;
}

.previewStage{
  position:relative;
  height: 420px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(13,15,18,.03), rgba(13,15,18,.01));
}
@media (max-width: 980px){
  .previewStage{height: 360px}
}

.previewSlide{
  position:absolute; inset:0;
  opacity:0;
  transform: translateX(40px);
  transition: opacity .28s ease, transform .35s ease;
  padding: 18px;
}
.previewSlide.is-active{
  opacity:1;
  transform: translateX(0);
}

/* Mock blocks */
.mock{
  height:100%;
  border-radius: 16px;
  border: 1px solid rgba(13,15,18,.10);
  background:#fff;
  overflow:hidden;
}
.mock__bar{
  height: 52px;
  border-bottom:1px solid rgba(13,15,18,.08);
  background: rgba(13,15,18,.02);
}
.mock__rows{
  height: calc(100% - 52px);
  background:
    linear-gradient(0deg, transparent 0 26px, rgba(13,15,18,.06) 26px 27px, transparent 27px 54px),
    linear-gradient(90deg, rgba(13,15,18,.02), rgba(13,15,18,.00));
  background-size: 100% 54px, 100% 100%;
}
.mock--orders{outline: 2px solid rgba(34,197,94,.18)}
.mock--booking{outline: 2px solid rgba(59,130,246,.18)}
.mock--tracking{outline: 2px solid rgba(168,85,247,.18)}
.mock--profit{outline: 2px solid rgba(245,158,11,.18)}
.mock--settings{outline: 2px solid rgba(20,184,166,.18)}

/* Floating cards */
.floatCards{
  position:absolute;
  left:14px; right:14px;
  bottom: 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  pointer-events:none;
}
.floatCard{
  font-size:12px;
  background: rgba(255,255,255,.86);
  border:1px solid rgba(13,15,18,.10);
  backdrop-filter: blur(10px);
  padding: 8px 10px;
  border-radius: 999px;
}


/* =========================================================
   Mobile ClickUp-style Drawer
========================================================= */
.navDesktopOnly{display:inline-flex;}


.iconBtn{
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  display: none; /* desktop hidden */
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.hamburger{
  width: 18px;
  height: 2px;
  background: rgb(13,15,18);
  border-radius: 2px;
  position: relative;
  display: inline-block;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;height:2px;
  background: rgb(13,15,18);
  border-radius:2px;
}
.hamburger::before{top:-6px;}
.hamburger::after{top:6px;}

/* overlay */
.drawerOverlay{
  position: fixed;
  inset: 0;
  background: rgba(13,15,18,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 80;
}

/* drawer */
.drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(86vw, 420px);
  background: #fff;
  transform: translateX(-105%);
  transition: transform .25s ease;
  z-index: 90;
  padding: 18px 18px 24px;
  box-shadow: 0 30px 90px rgba(13,15,18,.25);
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.drawer__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.iconBtn--close{
  display:flex;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(13,15,18,.10);
  background:#fff;
  font-size: 18px;
  line-height: 1;
}

.drawer__list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 6px;
}

.drawer__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 14px;
  border-radius: 14px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: rgb(13,15,18);
}
.drawer__item:hover{
  background: rgba(13,15,18,.04);
}
.drawer__item.is-active{
  background: rgba(13,15,18,.06);
}
.drawer__item .arrow{
  font-weight: 500;
  opacity:.7;
}

/* open states */
.navWrap.is-drawer-open + * { } /* no-op */
.drawer.is-open{transform: translateX(0);}
.drawerOverlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* MOBILE RULES */
@media (max-width: 980px){
  .nav__center{display:none;}
  .navDesktopOnly{display:none;}
  .iconBtn{display:flex;}
}

















/* =========================================================
   SECTION 1 — HERO MEDIA (UPDATED FINAL)
   - Full image fill (cover)
   - Left/top alignment priority
   - Right & bottom image fade
   - PERFECT rounded “window border” (ring)
   - Border fades away on right & bottom (matches your request)
========================================================= */

.sec1Media{
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;

  /* ✅ window shape */
  border-radius: 10px;
  background: #fff;
}

/* Responsive */
@media (max-width: 980px){
  .sec1Media{
    height: 380px;
    border-radius: 10px;
    border-width: 0.1px;
  }
}

/* =========================
   IMAGE (full fill)
========================= */
.sec1Img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* ✅ fill */
  object-fit: cover;

  /* ✅ left + top priority */
  object-position: var(--sec1-pos, 0% 0%);

  /* optional tuning */
  transform: scale(var(--sec1-zoom, 1));

  opacity: 0;
  transition: opacity .28s ease, transform .35s ease;
}

.sec1Img.is-active{ opacity: 1; }
.sec1Img.is-exit{ opacity: 0; }

/* =========================
   IMAGE FADE (right + bottom)
========================= */
.sec1Fade{
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* image right fade */
.sec1Fade--right{
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* image bottom fade */
.sec1Fade--bottom{
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* =========================
   WINDOW BORDER (PERFECT ROUNDED RING + fade)
   ✅ Replace old LEFT/TOP strips with this (fixes corner radius)
   HTML REQUIRED inside .sec1Media:
     <span class="sec1Ring" aria-hidden="true"></span>
     <span class="sec1RingMask" aria-hidden="true"></span>
========================= */

/* Full rounded ring (actual border) */
.sec1Ring{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 6;

  /* ✅ crisp window border */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);


   box-shadow: inset 0 0 0 var(--sec1-border) var(--sec1-border-color);

  /* subtle highlight (premium feel) */
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  opacity: .95;
}

/* Mask that dissolves ring on right & bottom (smooth fade) */
.sec1RingMask{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 7;

  /* ✅ matches page background (#fff). change if bg changes */
  background:
    /* right dissolve */
    linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%)
      right / 220px 100% no-repeat,
    /* bottom dissolve */
    linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%)
      bottom / 100% 190px no-repeat;
}
























/* =========================================================
   SECTION 2 — Integrations (Endless marquee + fades)
   - Label left, rail right
   - Dark logos by default, hover strip => colored
   - Infinite loop with no blank gap (JS clones)
========================================================= */

.sec2{
  padding: 26px 20px 46px;
}

.sec2__inner{
  max-width: var(--site-max, 1400px);
  margin: 70px auto;
}

/* Row */
.sec2__strip{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 15%;
  flex-wrap: nowrap;
}

/* Label */
.sec2__label{
  flex: 0 0 auto;
  font-family: "Sometype Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: rgb(131,131,131);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rail */
.sec2__rail{
  position: relative;
  flex: 1 1 auto;
  min-width: 320px;
  overflow: hidden;
}

/* Track (moves) — EXTRA SLOW (premium) */
.sec2__track{
  display:flex;
  width: max-content;
  will-change: transform;

  /* ✅ very slow */
  animation: sec2MarqueeStopGo 140s ease-in-out infinite;
}


/* Logo group (JS duplicates for endless stream) */
.sec2__logos{
  display:flex;
  align-items:center;
  gap: 72px;
  padding: 2px 72px 2px 0;
  width: max-content;
}

/* Pause moving on hover (premium) */
.sec2__rail:hover .sec2__track{
  animation-play-state: paused;
}

/* Default logo look */
.sec2__logos img{
  height: 20px;
  width: auto;
  opacity: .72;
  filter: grayscale(1) saturate(0) brightness(.55) contrast(1.10);
  transition: filter 260ms ease, opacity 260ms ease, transform 260ms ease;
}

/* Hover whole strip => ALL logos colored */
.sec2__strip:hover .sec2__logos img{
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}

/* Fades */
.sec2__fade{
  position:absolute;
  top:0; bottom:0;
  width: 90px;
  pointer-events:none;
  z-index: 2;
}
.sec2__fade--l{
  left:0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.sec2__fade--r{
  right:0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* ✅ Smooth stop-go (no hard pause, no loop pause) */
@keyframes sec2MarqueeStopGo{
  0%    { transform: translateX(0%); }
  10%   { transform: translateX(-0.6%); }     /* tiny drift */

  30%   { transform: translateX(-18%); }
  40%   { transform: translateX(-18.6%); }    /* drift pause */

  60%   { transform: translateX(-36%); }
  70%   { transform: translateX(-36.6%); }    /* drift pause */

  100%  { transform: translateX(-50%); }      /* seamless point */
}

/* Mobile tweaks */
@media (max-width: 980px){
  .sec2__inner{
    margin: 30px auto;
  }

  .sec2__strip{
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }

  .sec2__label{
    flex: 0 0 100%;
    text-align: center;
  }

  .sec2__rail{
    width: 100%;
    min-width: 0;
  }

  .sec2__logos{
    gap: 22px;
    padding-right: 22px;
  }

  .sec2__fade{
    width: 60px;
  }

  .sec2__logos img{
    height: 18px;
  }
}

/* =========================================================
   SECTION 2.4 — Compare (LIGHT / NO BOX STYLE)
   ✅ No cards, no shadows
   ✅ Clean column lines + row separators
   ✅ Center energy line (light)
   ✅ Title gradient on scroll (is-active)
========================================================= */

.sec24C{
  padding: 82px 20px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 50% 0%,
      rgba(59,130,246,0.05) 0%,
      rgba(124,58,237,0.025) 38%,
      rgba(255,255,255,1) 74%
    );
}

.sec24C__inner{ max-width: var(--site-max, 1400px); margin: 0 auto; }

.sec24C__top{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 22px;
}

.sec24C__eyebrow{
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13,15,18,.55);
  margin-bottom: 10px;
}

.sec24C__title{
  margin: 0 0 10px 0;
  font-family: "Plus Jakarta Sans","Inter",sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.03em;
  color: rgb(13,15,18);
}

/* ✅ STATIC gradient on scroll (NO animation) */
.sec24C.is-active .sec24C__title{
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.70)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ✅ remove keyframes (not needed) */
/* @keyframes sec24CTitleFlow{}  <-- delete */


.sec24C__sub{
  margin: 0;
  font-family:"Inter",sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: rgb(100,100,100);
}

/* GRID */
.sec24C__grid{
  display:grid;
  grid-template-columns: 1fr 34px 1fr;
  gap: 22px;
  align-items:start;
}

/* Columns become “table-like” */
.sec24C__col{
  padding: 0;                 /* ✅ no panel padding */
  background: transparent;    /* ✅ no box */
  border: 0;
}

.sec24C__colHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(13,15,18,.10);
  margin-bottom: 6px;
}

.sec24C__cap{
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13,15,18,.62);
}

.sec24C__capSub{
  font-family:"Inter",sans-serif;
  font-size: 13px;
  color: rgba(13,15,18,.55);
  white-space: nowrap;
}

/* lists */
.sec24C__list{ list-style:none; padding:0; margin:0; }

.sec24C__row{
  padding: 14px 0;
  border-bottom: 1px solid rgba(13,15,18,.08);
}
.sec24C__row:last-child{ border-bottom: 0; }

.sec24C__rowH{
  font-family:"Inter",sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: rgb(13,15,18);
  margin-bottom: 4px;
}

.sec24C__rowP{
  font-family:"Inter",sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: rgba(13,15,18,.62);
}

/* ✅ tiny premium hover */
.sec24C__rowH,
.sec24C__rowP{ transition: transform .16s ease, color .16s ease; }

.sec24C__row:hover .sec24C__rowH{ transform: translateX(1px); }
.sec24C__row:hover .sec24C__rowP{ color: rgba(13,15,18,.72); }

/* subtle tint via left border only (lightweight) */
.sec24C__col--manual{ border-left: 2px solid rgba(234,179,8,.28); padding-left: 12px; }
.sec24C__col--mirah{  border-left: 2px solid rgba(59,130,246,.28); padding-left: 12px; }

/* CENTER LINE */
.sec24C__mid{ position: relative; display:flex; justify-content:center; }
.sec24C__midLine{
  width: 2px;
  border-radius: 999px;
  background: rgba(13,15,18,.10);
  position: relative;
  overflow: hidden;
}

/* energy inside line (light) */
.sec24C__midLine::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-30%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(59,130,246,0),
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.70),
    rgba(59,130,246,0)
  );
  opacity: 0;
}
.sec24C.is-active .sec24C__midLine::after{
  opacity: .9;
  animation: sec24CFlow 2.2s ease-in-out infinite;
}
@keyframes sec24CFlow{
  0%{ transform: translateY(0%); }
  100%{ transform: translateY(220%); }
}

/* closing */
.sec24C__closing{
  margin-top: 18px;
  text-align:center;
  font-family:"Inter",sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: rgba(13,15,18,.70);
}

/* responsive */
@media (max-width: 980px){
  .sec24C{ padding: 58px 16px; }
  .sec24C__title{ font-size: 28px; line-height: 34px; }
  .sec24C__grid{ grid-template-columns: 1fr; gap: 14px; }
  .sec24C__mid{ display:none; }
  .sec24C__col--manual,
  .sec24C__col--mirah{ padding-left: 10px; }
}









/* =========================================================
   SECTION 2.5 — Why Mirah (NO BOX / LIGHTWEIGHT)
   ✅ Left: no panel (pure typography)
   ✅ Right: minimal “map” strip (no card)
   ✅ Mirah mention strong
   ✅ Title gradient on scroll (is-active)
========================================================= */

.secWhyS{
  padding: 84px 20px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 520px at 20% 0%,
      rgba(236,72,153,0.05) 0%,
      rgba(255,255,255,0) 60%
    ),
    radial-gradient(900px 520px at 80% 0%,
      rgba(59,130,246,0.06) 0%,
      rgba(255,255,255,0) 60%
    ),
    rgba(255,255,255,1);
}

.secWhyS__inner{ max-width: var(--site-max, 1400px); margin: 0 auto; }

/* top */
.secWhyS__top{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 22px;
}

.secWhyS__eyebrow{
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13,15,18,.55);
  margin-bottom: 10px;
}

.secWhyS__title{
  margin: 0 0 10px 0;
  font-family: "Plus Jakarta Sans","Inter",sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.03em;
  color: rgb(13,15,18);
}

/* ✅ STATIC gradient on scroll (NO animation) */
.secWhyS.is-active .secWhyS__title{
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.70)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ✅ remove keyframes (not needed) */
/* @keyframes secWhySTitleFlow{}  <-- delete */


.secWhyS__sub{
  margin: 0;
  font-family:"Inter",sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: rgb(100,100,100);
}

.secWhyS__note{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(13,15,18,.62);
}

/* grid */
.secWhyS__grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
  align-items:start;
}

/* LEFT = no panel */
.secWhyS__left{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Each stat becomes a clean line group */
.whyStat{
  padding: 14px 0;
  border-bottom: 1px solid rgba(13,15,18,.08);
}
.whyStat:last-of-type{ border-bottom: 0; }

.whyStat__k{
  font-family:"Inter",sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: rgb(13,15,18);
  margin-bottom: 4px;
}

.whyStat__v{
  font-family:"Inter",sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: rgba(13,15,18,.62);
}

/* ✅ Mirah mention strong */
.whyMini{
  margin-top: 12px;
  font-family:"Inter",sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: rgba(13,15,18,.70);
}
.whyMini strong{
  font-weight: 900;
  color: rgba(13,15,18,.92);
}

/* RIGHT = minimal strip, not box */
.secWhyS__right{
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* map becomes a clean “strip” with border-left */
.whyMap{
  position: relative;
  padding-left: 14px;
  border-left: 2px solid rgba(124,58,237,.22);
}

.whyMap__cap{
  font-family: "Sometype Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13,15,18,.58);
  margin-bottom: 6px;
}

.whyMap__sub{
  font-family:"Inter",sans-serif;
  font-size: 13px;
  color: rgba(13,15,18,.62);
}

/* flow pills (lighter) */
.whyMap__flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin: 10px 0 12px;
}

.whyNode{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(13,15,18,.03);
  border: 1px solid rgba(13,15,18,.10);
  font-family:"Inter",sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: rgb(13,15,18);
  white-space: nowrap;
}

.whyNode--accent{
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.22);
}

/* connectors minimal */
.whyArrow{ width: 18px; height: 10px; position: relative; }
.whyArrow::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:2px;
  transform: translateY(-50%);
  background: rgba(13,15,18,.14);
  border-radius: 999px;
}
.whyArrow::after{
  content:"";
  position:absolute;
  right:-1px;
  top:50%;
  width:6px;
  height:6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(13,15,18,.18);
}

.whyMap__foot{
  font-family:"Inter",sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: rgba(13,15,18,.62);
  max-width: 520px;
}

/* remove glow for performance */
.whyMap__glow{ display:none !important; }

/* responsive */
@media (max-width: 980px){
  .secWhyS{ padding: 58px 16px; }
  .secWhyS__title{ font-size: 28px; line-height: 34px; }
  .secWhyS__grid{ grid-template-columns: 1fr; gap: 14px; }
  .whyArrow{ display:none; }
}









/* =========================================================
   SECTION 3 — How it works (Video)
   Premium, centered, clean + light background
========================================================= */

.sec3{
  padding: 80px 20px;
  border-top: 1px solid var(--line);

  /* ✅ light section background */
  background: linear-gradient(
    180deg,
    rgba(13,15,18,0.02) 0%,
    rgba(13,15,18,0.01) 60%,
    rgba(255,255,255,1) 100%
  );
}

.sec3__inner{
  max-width: var(--site-max, 1400px);
  margin: 0 auto;
}

.sec3__top{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 18px;
}

.sec3__title{
  margin: 0 0 8px 0;
  font-family: "Plus Jakarta Sans","Inter",sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.03em;
  color: rgb(13,15,18);
}

.sec3__sub{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgb(100,100,100);
}

/* Video container */
.sec3__videoWrap{
  max-width: 980px;
  margin: 18px auto 0;
}

/* Premium frame */
.sec3__video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;

  border: 1px solid rgba(13,15,18,.10);
  box-shadow: 0 18px 60px rgba(13,15,18,.08);
}

.sec3__video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Mini note */
.sec3__note{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(13,15,18,.62);
}

/* Mobile */
@media (max-width: 980px){
  .sec3{
    padding: 56px 16px;
  }
  .sec3__title{
    font-size: 28px;
    line-height: 34px;
  }
  .sec3__video{
    border-radius: 16px;
  }
}
/* =========================================================
   SECTION 4 — Timeline (FINAL PATCH — FULL COPY/PASTE READY)
   ✅ Dot + energy fill
   ✅ Titles: Done steps gradient stays, Active step animated
   ✅ MediaBox: NO BOX FEEL + blended dissolve (side-aware)
   ✅ Ring border: perfect rounded + dissolves (side-aware like Sec1)
   ✅ Reveal smooth + slower
   ✅ Mobile stacked (text then image)
   ✅ FULL CONTROL: left/right/bottom dissolve widths from variables
========================================================= */

.sec4T{
  padding: 90px 20px;
  border-top: 1px solid var(--line);
  background: #fff;

  /* ✅ page bg for all dissolve */
  --sec4-bg: #fff;

  /* ✅ ring border controls */
  /*--sec4-border: 0.5px;                 /* border width */
 /* --sec4-border-color: rgba(0,0,0,.18);*/

  /* ✅ IMAGE dissolve controls */
  --sec4-fade-side: 120px;            /* left/right dissolve width */
  --sec4-fade-bottom: 120px;          /* bottom dissolve height */

  /* ✅ RING mask dissolve controls */
  --sec4-ring-side: 120px;            /* left/right ring dissolve width */
  --sec4-ring-bottom: 120px;          /* bottom ring dissolve height */
  /* ✅ Mobile dissolve controls */
  --sec4-fade-side-m: 140px;
  --sec4-fade-bottom-m: 140px;
  --sec4-ring-side-m: 140px;
  --sec4-ring-bottom-m: 140px;
}

.sec4T__inner{ max-width: var(--site-max, 1400px); margin: 0 auto; }
.sec4T__top{ text-align:center; max-width:860px; margin:0 auto 28px; }

.sec4T__title{
  margin:0 0 8px 0;
  font-family:"Plus Jakarta Sans","Inter",sans-serif;
  font-weight:700;
  font-size:34px;
  line-height:40px;
  letter-spacing:-0.03em;
  color:rgb(13,15,18);
}
.sec4T__sub{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:16px;
  line-height:26px;
  color:rgb(100,100,100);
}

.sec4T__wrap{ position:relative; }

/* =========================
   Center line + FULL fill
========================= */
.sec4T__center{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:5;
  --fillH: 0px; /* set by JS */
}

.sec4T__line{
  position:absolute; inset:0;
  width:1px;
  background: rgba(13,15,18,.12);
}

.sec4T__center::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  transform: translateX(-50%);
  border-radius: 999px;
  height: var(--fillH);
  background: linear-gradient(
    180deg,
    rgba(59,130,246,.95) 0%,
    rgba(124,58,237,.80) 55%,
    rgba(236,72,153,.55) 100%
  );
  transition: height 120ms linear;
}

/* Dot */
.sec4T__dot{
  position:absolute;
  left:50%;
  width:14px; height:14px;
  border-radius:999px;
  background: rgb(13,15,18);
  transform: translate3d(-50%, 0, 0);
  box-shadow:
    0 12px 30px rgba(13,15,18,.18),
    0 0 0 8px rgba(59,130,246,.08),
    0 0 0 16px rgba(124,58,237,.06);
}

.sec4T__dot::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  border:2px solid rgba(59,130,246,.22);
  opacity:0;
  transform: scale(.88);
  animation: sec4Pulse 2.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes sec4Pulse{
  0%{ transform:scale(.86); opacity:0; }
  35%{ transform:scale(1.02); opacity:.35; }
  70%{ transform:scale(1.18); opacity:0; }
  100%{ transform:scale(1.18); opacity:0; }
}

/* =========================
   Items layout
========================= */
.sec4T__item{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 60px 1fr;
  gap:24px;
  align-items:center;
  padding:34px 0;
}

.sec4T__item.is-left .sec4T__text{ grid-column:1; }
.sec4T__item.is-left .sec4T__media{ grid-column:3; }
.sec4T__item.is-right .sec4T__media{ grid-column:1; }
.sec4T__item.is-right .sec4T__text{ grid-column:3; }

/* Text */
.sec4T__kicker{
  font-family:"Sometype Mono",ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.16em;
  color: rgba(13,15,18,.55);
  margin-bottom:8px;
}

.sec4T__h{
  margin:0 0 8px 0;
  font-family:"Inter",sans-serif;
  font-weight:700;
  font-size:18px;
  line-height:24px;
  color: rgb(13,15,18);
}

.sec4T__p{
  margin:0;
  font-family:"Inter",sans-serif;
  font-size:14px;
  line-height:22px;
  color: rgb(100,100,100);
  max-width:520px;
}

/* =========================================================
   Title gradient (Done = static, Active = animated)
========================================================= */
.sec4T__item.is-done .sec4T__h,
.sec4T__item.is-active .sec4T__h{
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.70),
    rgba(59,130,246,.95)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec4T__item.is-done .sec4T__h{ background-size: 100% 100%; }
.sec4T__item.is-active .sec4T__h{
  background-size: 220% 100%;
  animation: sec4TitleFlow 1.35s ease-in-out infinite;
}
@keyframes sec4TitleFlow{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* =========================================================
   MEDIA BOX — NO BOX FEEL + IMAGE DISSOLVE (CONTROLLED)
   ✅ dissolve RIGHT for media-right, dissolve LEFT for media-left
========================================================= */
.sec4T__mediaBox{
  position:relative;
  height:340px;
  overflow:hidden;
  border-radius:7px;
  background: transparent;
  border:0;
  box-shadow: none;
  isolation: isolate;
}

/* image normal */
.sec4T__mediaBox img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* media RIGHT (article.is-left) => image left/top */
.sec4T__item.is-left .sec4T__mediaBox img{ object-position: 0% 0%; }
/* media LEFT (article.is-right) => image right/top */
.sec4T__item.is-right .sec4T__mediaBox img{ object-position: 100% 0%; }

/* bottom dissolve */
.sec4T__mediaBox::before{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height: var(--sec4-fade-bottom);
  pointer-events:none;
  z-index:2;
  background: linear-gradient(to top, var(--sec4-bg) 0%, rgba(255,255,255,0) 100%);
}

/* side dissolve default RIGHT */
.sec4T__mediaBox::after{
  content:"";
  position:absolute;
  top:0; right:0;
  width: var(--sec4-fade-side);
  height:100%;
  pointer-events:none;
  z-index:2;
  background: linear-gradient(to left, var(--sec4-bg) 0%, rgba(255,255,255,0) 100%);
}

/* flip side dissolve if media is LEFT */
.sec4T__item.is-right .sec4T__mediaBox::after{
  right:auto;
  left:0;
  width: var(--sec4-fade-side);
  background: linear-gradient(to right, var(--sec4-bg) 0%, rgba(255,255,255,0) 100%);
}

/* =========================================================
   WINDOW BORDER RING (Sec1 style) + DISSOLVE (CONTROLLED)
========================================================= */
.sec4Ring{
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:6;

  box-shadow: inset 0 0 0 var(--sec4-border) var(--sec4-border-color);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity:.95;
}

/* default (media RIGHT): ring dissolves RIGHT + BOTTOM */
.sec4RingMask{
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:7;

  background:
    linear-gradient(to left, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
      right / var(--sec4-ring-side) 100% no-repeat,
    linear-gradient(to top, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
      bottom / 100% var(--sec4-ring-bottom) no-repeat;
}

/* media LEFT (article.is-right): ring dissolves LEFT + BOTTOM */
.sec4T__item.is-right .sec4RingMask{
  background:
    linear-gradient(to right, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
      left / var(--sec4-ring-side) 100% no-repeat,
    linear-gradient(to top, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
      bottom / 100% var(--sec4-ring-bottom) no-repeat;
}

/* micro top line */
.sec4T__mediaBox{
  box-shadow: inset 0 1px 0 rgba(13,15,18,0.04);
}

/* =========================
   Stems connector
========================= */
.sec4T__item::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  height:2px;
  width:220px;
  background: rgba(13,15,18,.12);
  pointer-events:none;
  z-index:2;
  transform: translateY(-50%);
}
.sec4T__item.is-left::before{ transform: translate(-100%, -50%); }
.sec4T__item.is-right::before{ transform: translate(0, -50%); }

.sec4T__item::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px; height:10px;
  border-radius:999px;
  background:#fff;
 
  transform: translate(-50%, -50%);
  pointer-events:none;
  z-index:4;
}

/* energy stem when done/active */
.sec4T__item.is-done::before,
.sec4T__item.is-active::before{
  background: linear-gradient(90deg,
    rgba(59,130,246,0),
    rgba(59,130,246,.85),
    rgba(124,58,237,.75),
    rgba(236,72,153,.55)
  );
  border-radius:999px;
}
.sec4T__item.is-left.is-done::before,
.sec4T__item.is-left.is-active::before{
  background: linear-gradient(270deg,
    rgba(59,130,246,0),
    rgba(59,130,246,.85),
    rgba(124,58,237,.75),
    rgba(236,72,153,.55)
  );
}

/* =========================
   Reveal (slow + premium)
========================= */
html.reveal-on .sec4T__item{
  transition: opacity 980ms cubic-bezier(.22,1,.36,1), transform 980ms cubic-bezier(.22,1,.36,1);
}
html.reveal-on .sec4T__mediaBox,
html.reveal-on .sec4T__text{
  transition: opacity 1120ms cubic-bezier(.22,1,.36,1), transform 1120ms cubic-bezier(.22,1,.36,1);
}
html.reveal-on .sec4T__item:not(.is-visible){
  opacity:0;
  transform: translateY(14px);
}
html.reveal-on .sec4T__item.is-left:not(.is-visible) .sec4T__text{ opacity:0; transform: translateX(-46px); }
html.reveal-on .sec4T__item.is-left:not(.is-visible) .sec4T__mediaBox{ opacity:0; transform: translateX(46px); }
html.reveal-on .sec4T__item.is-right:not(.is-visible) .sec4T__mediaBox{ opacity:0; transform: translateX(-46px); }
html.reveal-on .sec4T__item.is-right:not(.is-visible) .sec4T__text{ opacity:0; transform: translateX(46px); }

html.reveal-on .sec4T__item.is-visible{ opacity:1; transform: translateY(0); }
html.reveal-on .sec4T__item.is-visible .sec4T__text,
html.reveal-on .sec4T__item.is-visible .sec4T__mediaBox{ opacity:1; transform: translateX(0); }

/* =========================
   Mobile stacked text then image + mobile dissolve controls
========================= */
@media (max-width: 980px){
  .sec4T{ padding: 60px 16px; }
  .sec4T__title{ font-size:28px; line-height:34px; }
  .sec4T__center{ display:none !important; }

  .sec4T__item{
    grid-template-columns: 1fr !important;
    gap:12px !important;
    padding:20px 0 !important;
  }

  .sec4T__item .sec4T__text{ order:1 !important; }
  .sec4T__item .sec4T__media{ order:2 !important; }

  .sec4T__item.is-left .sec4T__text,
  .sec4T__item.is-left .sec4T__media,
  .sec4T__item.is-right .sec4T__text,
  .sec4T__item.is-right .sec4T__media{ grid-column:auto !important; }

  .sec4T__item::before,
  .sec4T__item::after{ display:none !important; }

  html.reveal-on .sec4T__item,
  html.reveal-on .sec4T__text,
  html.reveal-on .sec4T__mediaBox{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .sec4T__mediaBox{ height:240px; border-radius:14px; }

  .sec4T__mediaBox::after{ width: var(--sec4-fade-side-m); }
  .sec4T__mediaBox::before{ height: var(--sec4-fade-bottom-m); }

  /* default mobile ring mask (media RIGHT) */
  .sec4RingMask{
    background:
      linear-gradient(to left, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
        right / var(--sec4-ring-side-m) 100% no-repeat,
      linear-gradient(to top, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
        bottom / 100% var(--sec4-ring-bottom-m) no-repeat;
  }

  /* media LEFT mobile ring mask */
  .sec4T__item.is-right .sec4RingMask{
    background:
      linear-gradient(to right, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
        left / var(--sec4-ring-side-m) 100% no-repeat,
      linear-gradient(to top, var(--sec4-bg) 0%, rgba(255,255,255,0) 70%)
        bottom / 100% var(--sec4-ring-bottom-m) no-repeat;
  }

  /* Mobile: keep center/top */
  .sec4T__mediaBox img{ object-position: 50% 0%; }
}



/* =========================================================
   STEP 1: ORDERS UI (Complex Dashboard Patch - Final)
========================================================= */

/* --- Base Container (Floating Card - EXTRA WIDE) --- */
.abXUi {
  position: absolute;
  width: 700px; /* ✅ Wider for proper spacing */
  height: 400px; /* ✅ Taller for 8-9 rows */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(13,15,18,0.08);
  box-shadow: 
    0 24px 60px -12px rgba(13,15,18,0.18),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 0;
  overflow: hidden;
  z-index: 5;
  animation: abFloat 7s ease-in-out infinite;
  /* Scale down on small screens managed by JS/Media Queries usually, 
     but here we use transform to fit the container */
  transform: scale(0.85); 
}

/* Floating Animation */
@keyframes abFloat {
  0%, 100% { transform: translateY(0) scale(0.85); }
  50% { transform: translateY(-10px) scale(0.85); }
}

/* --- Layout --- */
.abXUi--table { display: flex; height: 100%; flex-direction: column; background: #fff; }

/* 1. Window Header (Mac Style) */
.abXUi__topNav {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
}

/* Red/Yellow/Green Dots */
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 10px; height: 10px; border-radius: 50%; }
.window-dots span:nth-child(1) { background: #ff5f57; border: 1px solid #e0443e; }
.window-dots span:nth-child(2) { background: #febc2e; border: 1px solid #d89e24; }
.window-dots span:nth-child(3) { background: #28c840; border: 1px solid #1aab29; }

/* Fake Search & Title */
.ui-skel-title { width: 100px; height: 10px; background: #f1f5f9; border-radius: 5px; margin-left: 12px; }
.ui-search { 
  width: 180px; height: 24px; border: 1px solid #e2e8f0; 
  border-radius: 6px; margin-left: auto; background: #f8fafc; 
  display: flex; align-items: center; padding-left: 8px;
}
.ui-search::after { content: "Search..."; font-size: 9px; color: #cbd5e1; }

/* 2. Column Headers */
.abXUi__header {
  height: 34px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: grid;
  /* Grid: Chk | Order | Name | Product | Date | Amt | Status | Action */
  grid-template-columns: 30px 70px 110px 130px 80px 80px 90px 1fr;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
}
.ui-head-txt { 
  font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; 
  color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; 
}

/* 3. Main Body */
.abXUi__main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* 4. Rows */
.abXUi__row {
  display: grid;
  grid-template-columns: 30px 70px 110px 130px 80px 80px 90px 1fr;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f8fafc;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  gap: 10px;
  transition: background 0.15s ease;
}

/* --- Row Elements --- */
.ui-chk { width: 14px; height: 14px; border: 1px solid #cbd5e1; border-radius: 4px; }
.ui-chk.checked { background: #3b82f6; border-color: #3b82f6; position: relative; }
.ui-chk.checked::after { 
  content:""; position:absolute; inset:0; 
  background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>') center/70% no-repeat; 
}

.ui-pill { font-weight: 700; color: #3b82f6; letter-spacing: -0.2px; }
.ui-txt { font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-prod { color: #64748b; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-date { color: #94a3b8; font-size: 10px; font-family: monospace; }
.ui-amt { font-weight: 700; color: #0f172a; font-size: 10px; }

/* Badges (Pill Shape) */
.ui-badge { 
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 99px; 
  text-align: center; display: inline-flex; align-items: center; justify-content: center; width: fit-content;
}
.ui-badge.green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.ui-badge.yellow { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.ui-badge.purple { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.ui-badge.gray { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.ui-badge.red { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Actions */
.ui-actions { display: flex; gap: 6px; opacity: 0.3; }
.ui-act { width: 20px; height: 20px; background: #e2e8f0; border-radius: 4px; }

/* --- 5. Animations --- */

/* Hover Effect Simulation */
.abXUi__row.hover-sim { animation: rowHover 8s infinite; }
@keyframes rowHover {
  0%, 15% { background: transparent; }
  16%, 40% { background: #f1f5f9; } /* Hover */
  41%, 100% { background: transparent; }
}

/* Cursor Movement */
.abXUi__cursor { 
  position: absolute; top: 0; left: 0;
  width: 20px; z-index: 20; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  animation: cursorDance 8s ease-in-out infinite;
}

@keyframes cursorDance {
  0% { transform: translate(700px, 400px); opacity: 0; }
  
  /* Enter & Check Row 2 */
  10% { opacity: 1; transform: translate(600px, 300px); }
  20% { transform: translate(30px, 120px); } /* Move to Checkbox Row 2 */
  22% { transform: translate(30px, 120px) scale(0.9); } /* Click */
  24% { transform: translate(30px, 120px) scale(1); }
  
  /* Move across Row 2 */
  35% { transform: translate(400px, 120px); }
  
  /* Scroll/Move to Row 5 Status */
  50% { transform: translate(580px, 240px); } /* Hover Status Row 5 */
  55% { transform: translate(580px, 240px) scale(0.9); } /* Click */
  60% { transform: translate(580px, 240px) scale(1); }

  /* Exit */
  85% { transform: translate(720px, 200px); opacity: 1; }
  100% { transform: translate(720px, 400px); opacity: 0; }
}

/* Entrance */
.anim-row { opacity: 0; animation: slideUp 0.4s ease forwards; }
.d-1 { animation-delay: 0.05s; }
.d-2 { animation-delay: 0.1s; }
.d-3 { animation-delay: 0.15s; }
.d-4 { animation-delay: 0.2s; }
.d-5 { animation-delay: 0.25s; }
.d-6 { animation-delay: 0.3s; }
.d-7 { animation-delay: 0.35s; }
.d-8 { animation-delay: 0.4s; }

@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }










/* =========================================================
   STEP 2: COURIER UI (Booking Dashboard)
========================================================= */

/* Reuse .abXUi base from Step 1 (Width 700px, Height 400px) */

/* --- Layout: Split View --- */
.abXUi--courier { display: flex; flex-direction: column; background: #f8fafc; }

/* Main Content: Grid 2 Columns */
.abXUi__courierBody {
  flex: 1;
  display: grid;
  grid-template-columns: 1.8fr 1fr; /* List vs Sidebar */
  overflow: hidden;
}

/* --- Left: Courier List --- */
.ui-c-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid #e2e8f0;
  background: #fff;
}

.ui-c-head { font-size: 10px; font-weight: 700; color: #94a3b8; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

.ui-c-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
  position: relative;
}

/* Active State for Courier Item */
.ui-c-item.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.c-logo { width: 32px; height: 32px; background: #f1f5f9; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; color: #64748b; }
.c-info { flex: 1; margin-left: 12px; }
.c-name { font-size: 12px; font-weight: 700; color: #1e293b; display: block; }
.c-meta { font-size: 10px; color: #64748b; }
.c-price { font-size: 12px; font-weight: 700; color: #0f172a; }

/* Radio Circle */
.c-radio { width: 16px; height: 16px; border: 1px solid #cbd5e1; border-radius: 50%; margin-left: 12px; position: relative; }
.ui-c-item.selected .c-radio { border-color: #3b82f6; background: #3b82f6; }
.ui-c-item.selected .c-radio::after { content: ""; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; background: #fff; border-radius: 50%; }

/* --- Right: Sidebar Form --- */
.ui-sidebar { padding: 20px; display: flex; flex-direction: column; gap: 16px; background: #f8fafc; }

.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-label { font-size: 10px; font-weight: 600; color: #64748b; }
.ui-input { 
  height: 36px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; 
  display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 600; color: #334155;
}

/* Typing Animation Cursor */
.type-cursor::after { content: "|"; animation: blink 1s infinite; color: #3b82f6; }

.ui-btn-book {
  margin-top: auto;
  height: 40px;
  background: #0f172a;
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.1s;
}
.ui-btn-book.clicked { transform: scale(0.95); background: #3b82f6; }

/* Success Toast (Hidden Initially) */
.ui-success-toast {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #10b981; color: #fff; padding: 10px 20px; border-radius: 99px;
  font-size: 11px; font-weight: 700; opacity: 0; 
  display: flex; gap: 8px; align-items: center;
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}
.ui-success-toast.show { animation: toastUp 4s ease forwards; }

@keyframes toastUp {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  10%, 90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* --- Step 2 Animations Loop --- */

/* 1. Select Courier Row Animation */
.row-trax { animation: selectTrax 8s infinite; }
@keyframes selectTrax {
  0%, 15% { border-color: #e2e8f0; background: #fff; }
  16%, 100% { border-color: #3b82f6; background: #eff6ff; } /* Selected */
}
.radio-trax { animation: radioFill 8s infinite; }
@keyframes radioFill {
  0%, 15% { background: transparent; border-color: #cbd5e1; }
  16%, 100% { background: #3b82f6; border-color: #3b82f6; }
}

/* 2. Type Weight "0.5" */
.input-weight::before { content: ""; animation: typeWeight 8s infinite; }
@keyframes typeWeight {
  0%, 25% { content: ""; }
  26% { content: "0"; }
  27% { content: "0."; }
  28%, 100% { content: "0.5"; }
}

/* 3. Button Click */
.ui-btn-book { animation: btnPress 8s infinite; }
@keyframes btnPress {
  0%, 45% { transform: scale(1); background: #0f172a; }
  46% { transform: scale(0.95); background: #3b82f6; } /* Click */
  48%, 100% { transform: scale(1); background: #0f172a; } /* Reset visually but toast shows */
}

/* 4. Cursor Movement (Complex) */
.abXUi__cursor2 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorCourier 8s ease-in-out infinite;
}

@keyframes cursorCourier {
  0% { transform: translate(700px, 400px); opacity: 0; }
  
  /* Enter & Select Trax */
  10% { opacity: 1; transform: translate(600px, 300px); }
  15% { transform: translate(250px, 180px); } /* Hover Trax */
  16% { transform: translate(250px, 180px) scale(0.9); } /* Click */
  18% { transform: translate(250px, 180px) scale(1); }

  /* Move to Weight Input */
  22% { transform: translate(550px, 140px); } /* Hover Input */
  25% { transform: translate(550px, 140px); } /* Click Input */

  /* Move to Button */
  40% { transform: translate(550px, 320px); } /* Hover Button */
  45% { transform: translate(550px, 320px) scale(0.9); } /* Click Button */
  48% { transform: translate(550px, 320px) scale(1); }

  /* Exit */
  60% { opacity: 1; }
  70% { transform: translate(720px, 450px); opacity: 0; }
  100% { opacity: 0; }
}

/* 5. Success Toast Trigger */
.ui-success-toast { animation: toastTrigger 8s infinite; }
@keyframes toastTrigger {
  0%, 48% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  50%, 80% { opacity: 1; transform: translateX(-50%) translateY(-20px); } /* Show */
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}










/* =========================================================
   STEP 3: INVENTORY UI (Live Stock Management - Wide)
========================================================= */

/* Base Container - Wider for Data Table */
.abXUi {
  position: absolute;
  width: 820px; /* ✅ Wider to fit all columns */
  height: 420px; /* Taller */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(13,15,18,0.08);
  box-shadow: 
    0 24px 60px -12px rgba(13,15,18,0.18),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 0;
  overflow: hidden;
  z-index: 5;
  animation: abFloat 7s ease-in-out infinite;
  transform: scale(0.75); /* Scaled down to fit container */
  transform-origin: center center;
}

@keyframes abFloat {
  0%, 100% { transform: translateY(0) scale(0.75); }
  50% { transform: translateY(-10px) scale(0.75); }
}

/* --- Layout --- */
.abXUi--inventory { display: flex; flex-direction: column; background: #fff; }

/* 1. Top Bar (Reference Image Style) */
.inv-top {
  height: 44px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  justify-content: space-between;
  background: #fff;
}
.inv-title { font-size: 13px; font-weight: 800; color: #0f172a; }
.inv-controls { display: flex; gap: 10px; align-items: center; }
.inv-search { 
  width: 200px; height: 26px; border: 1px solid #e2e8f0; border-radius: 4px; 
  background: #f8fafc; font-size: 10px; padding-left: 8px; color: #94a3b8; display: flex; align-items: center;
}
.inv-search::after { content: "Search products..."; }
.inv-btn-black { 
  background: #000; color: #fff; font-size: 10px; font-weight: 700; 
  padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}

/* 2. Header Grid */
/* Chk | Product | Orig | Sell | Profit | Qty | Stock Left | Style | Color | Wgt | Cat | Act */
.inv-header {
  height: 32px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: 30px 140px 70px 70px 100px 50px 90px 90px 50px 50px 80px 1fr;
  align-items: center; padding: 0 16px; gap: 8px;
}
.th-txt { font-size: 9px; font-weight: 800; color: #64748b; text-transform: uppercase; }

/* 3. Rows Grid */
.inv-row {
  display: grid;
  grid-template-columns: 30px 140px 70px 70px 100px 50px 90px 90px 50px 50px 80px 1fr;
  align-items: center; padding: 8px 16px; border-bottom: 1px solid #f1f5f9;
  font-family: "Inter", sans-serif; font-size: 10px; gap: 8px;
  transition: background 0.15s;
  background: #fff;
}
.inv-row:hover { background: #f8fafc; }

/* Columns Styling */
.col-chk { width: 12px; height: 12px; border: 1px solid #cbd5e1; border-radius: 3px; }
.col-chk.checked { background: #3b82f6; border-color: #3b82f6; position:relative; }
.col-chk.checked::after { content:""; position:absolute; inset:0; background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>') center/80% no-repeat; }

.col-prod { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1e293b; }
.col-prod img { width: 14px; opacity: 0.8; } /* Platform icon */

.col-price { color: #334155; }

/* Profit Badges */
.badge-profit { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-weight: 700; width: fit-content; font-size: 9px; border: 1px solid transparent; }
.badge-profit.low { background: #fee2e2; color: #ef4444; border-color: #fecaca; }
.badge-profit.fair { background: #eff6ff; color: #3b82f6; border-color: #bfdbfe; }
.badge-profit.good { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.badge-profit.extreme { background: #f3e8ff; color: #7e22ce; border-color: #d8b4fe; }
.badge-profit.high { background: #fef9c3; color: #854d0e; border-color: #fde047; }

/* Stock Left */
.col-stock { display: flex; align-items: center; gap: 6px; }
.st-num { font-weight: 700; font-size: 11px; }
.st-num.red { color: #ef4444; }
.st-num.green { color: #10b981; }
.st-badge { font-size: 8px; padding: 1px 4px; border-radius: 3px; font-weight: 600; text-transform: uppercase; }
.st-badge.low { background: #fee2e2; color: #ef4444; }
.st-badge.in { background: #dcfce7; color: #166534; }

.col-meta { color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Actions */
.col-actions { display: flex; gap: 6px; }
.act-icon { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; cursor: pointer; }
.act-icon.view { color: #3b82f6; background: #eff6ff; }
.act-icon.edit { color: #10b981; background: #ecfdf5; }
.act-icon.del { color: #ef4444; background: #fee2e2; }

/* --- 4. Footer Pagination --- */
.inv-footer {
  margin-top: auto; height: 36px; border-top: 1px solid #e2e8f0; 
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  background: #fff;
}
.pg-show { border: 1px solid #e2e8f0; padding: 2px 6px; border-radius: 4px; font-size: 9px; color: #64748b; }
.pg-nums { display: flex; gap: 4px; }
.pg-btn { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 9px; color: #64748b; }
.pg-btn.active { background: #3b82f6; color: #fff; }

/* --- ANIMATIONS --- */

/* 1. Cursor Loop */
.abXUi__cursor3 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorInvComplex 8s ease-in-out infinite;
}

@keyframes cursorInvComplex {
  0% { transform: translate(700px, 450px); opacity: 0; }
  
  /* Hover Row 3 (Stock Low) */
  10% { opacity: 1; transform: translate(600px, 350px); }
  20% { transform: translate(60px, 190px); } /* Checkbox Row 3 */
  22% { transform: translate(60px, 190px) scale(0.9); } /* Click */
  24% { transform: translate(60px, 190px) scale(1); }

  /* Move to Edit Icon Row 3 */
  35% { transform: translate(780px, 190px); } 
  38% { transform: translate(780px, 190px) scale(0.9); } /* Click Edit */
  40% { transform: translate(780px, 190px) scale(1); }

  /* Exit */
  90% { transform: translate(800px, 450px); opacity: 1; }
  100% { transform: translate(800px, 450px); opacity: 0; }
}

/* 2. Row Highlight & Update */
.row-anim-target { animation: rowUpdate 8s infinite; }
.chk-anim-target { animation: chkUpdate 8s infinite; }

@keyframes chkUpdate {
  0%, 22% { background: transparent; border-color: #cbd5e1; }
  23%, 100% { background: #3b82f6; border-color: #3b82f6; } /* Checked */
}

@keyframes rowUpdate {
  0%, 22% { background: #fff; }
  23%, 40% { background: #eff6ff; } /* Selected highlight */
  41%, 100% { background: #fff; }
}

/* 3. Stock Number Update (Simulated Restock) */
/* Requires changing content via animation or multiple spans opacity */
.stock-anim-num::after { content: "4"; animation: stockChange 8s infinite; }
@keyframes stockChange {
  0%, 39% { content: "4"; color: #ef4444; }
  40%, 100% { content: "50"; color: #10b981; } /* Updated */
}
.stock-anim-badge::after { content: "Low Stock"; animation: badgeChange 8s infinite; }
.stock-anim-badge { animation: badgeBgChange 8s infinite; }
@keyframes badgeChange {
  0%, 39% { content: "Low Stock"; }
  40%, 100% { content: "In Stock"; }
}
@keyframes badgeBgChange {
  0%, 39% { background: #fee2e2; color: #ef4444; }
  40%, 100% { background: #dcfce7; color: #166534; }
}







/* =========================================================
   STEP 4: TRACKING UI (Logistics Dashboard - Map + Timeline)
========================================================= */

/* Reuse .abXUi base (Width 820px, Height 420px from Step 3) */
/* If reusing from Step 3, ensure width/height match, else define here */
.abXUi {
  position: absolute;
  width: 750px; 
  height: 400px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(13,15,18,0.08);
  box-shadow: 
    0 24px 60px -12px rgba(13,15,18,0.18),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 0;
  overflow: hidden;
  z-index: 5;
  animation: abFloat 7s ease-in-out infinite;
  transform: scale(0.85);
  transform-origin: center center;
}

@keyframes abFloat {
  0%, 100% { transform: translateY(0) scale(0.85); }
  50% { transform: translateY(-10px) scale(0.85); }
}

/* --- Layout --- */
.abXUi--tracking { display: flex; flex-direction: column; background: #fff; }

/* 1. Header (Window Style) */
.track-top {
  height: 40px; background: #fff; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; padding: 0 16px; justify-content: space-between;
}
.win-dots { display: flex; gap: 6px; }
.win-dots span { width: 10px; height: 10px; border-radius: 50%; }
.win-dots span:nth-child(1) { background: #ff5f57; }
.win-dots span:nth-child(2) { background: #febc2e; }
.win-dots span:nth-child(3) { background: #28c840; }

.track-id { font-family: monospace; font-weight: 700; color: #3b82f6; background: #eff6ff; padding: 4px 8px; border-radius: 4px; font-size: 11px; }

/* 2. Main Body (Grid) */
.track-body { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; }

/* --- LEFT: Live Map Area --- */
.track-map-area { position: relative; background: #f8fafc; border-right: 1px solid #e2e8f0; overflow: hidden; }

/* Grid Pattern */
.map-grid {
  position: absolute; inset: 0; 
  background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.5;
}

/* Map Elements */
.map-city { 
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 2;
  transform: translate(-50%, -50%);
}
.city-dot { width: 12px; height: 12px; background: #fff; border: 3px solid #94a3b8; border-radius: 50%; }
.city-name { font-size: 10px; font-weight: 700; color: #64748b; background: rgba(255,255,255,0.8); padding: 2px 4px; border-radius: 4px; }

.city-khi { top: 80%; left: 20%; }
.city-lhr { top: 20%; left: 80%; }

/* Moving Truck/Path */
.map-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.path-base { fill: none; stroke: #cbd5e1; stroke-width: 3; stroke-dasharray: 6 6; }
.path-fill { 
  fill: none; stroke: #3b82f6; stroke-width: 3; 
  stroke-dasharray: 1000; stroke-dashoffset: 1000; 
  animation: drawLine 8s linear infinite; 
}

.map-truck {
  position: absolute; width: 32px; height: 32px; background: #0f172a; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; z-index: 3;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
  animation: truckMove 8s linear infinite;
}
.map-truck svg { width: 16px; }

/* Status Popups on Map */
.map-popup {
  position: absolute; top: 20px; left: 20px; background: #fff; padding: 10px; 
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid #e2e8f0; z-index: 4;
}
.mp-title { font-size: 9px; color: #94a3b8; font-weight: 700; text-transform: uppercase; }
.mp-val { font-size: 12px; font-weight: 700; color: #0f172a; }
.mp-live { color: #10b981; font-size: 10px; display: flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 600; }
.mp-dot { width: 6px; height: 6px; background: #10b981; border-radius: 50%; animation: pulseDot 1s infinite; }

/* --- RIGHT: Timeline --- */
.track-timeline { padding: 20px; display: flex; flex-direction: column; gap: 0; overflow: hidden; }

.tl-item { display: flex; gap: 12px; padding-bottom: 24px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-line { position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: #e2e8f0; }
.tl-item:last-child .tl-line { display: none; }

.tl-dot { 
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #cbd5e1; 
  position: relative; z-index: 2; flex-shrink: 0; margin-top: 4px;
}
.tl-dot.active { background: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.15); }
.tl-dot.done { background: #10b981; border-color: #10b981; }

.tl-content { display: flex; flex-direction: column; gap: 2px; }
.tl-head { font-size: 12px; font-weight: 700; color: #334155; }
.tl-time { font-size: 10px; color: #94a3b8; }
.tl-loc { font-size: 10px; color: #64748b; font-weight: 500; }

/* --- ANIMATIONS --- */

@keyframes drawLine {
  0% { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

/* Manually traced curve movement */
@keyframes truckMove {
  0% { top: 80%; left: 20%; transform: translate(-50%, -50%) rotate(-10deg); }
  30% { top: 60%; left: 40%; transform: translate(-50%, -50%) rotate(0deg); }
  60% { top: 40%; left: 60%; transform: translate(-50%, -50%) rotate(-5deg); }
  100% { top: 20%; left: 80%; transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes pulseDot { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* Timeline Reveal */
.anim-tl-1 { animation: fadeIn 0.5s ease forwards 0.2s; opacity: 0; }
.anim-tl-2 { animation: fadeIn 0.5s ease forwards 1s; opacity: 0; }
.anim-tl-3 { animation: fadeIn 0.5s ease forwards 4s; opacity: 0; } /* Late reveal */

@keyframes fadeIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* City Active State */
.city-lhr .city-dot { animation: destActive 8s infinite; }
@keyframes destActive {
  0%, 90% { background: #fff; border-color: #94a3b8; }
  95%, 100% { background: #10b981; border-color: #10b981; } /* Arrived green */
}








/* =========================================================
   STEP 5: EXPENSES UI (Profit & Loss Dashboard)
========================================================= */

/* Reuse .abXUi base (Width 750px, Height 400px) */

.abXUi--expenses { display: flex; flex-direction: column; background: #fff; }

/* 1. Header */
.exp-top {
  height: 44px; border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; padding: 0 16px; justify-content: space-between;
  background: #fff;
}
.exp-date { font-size: 11px; font-weight: 600; color: #64748b; background: #f8fafc; padding: 4px 8px; border-radius: 6px; border: 1px solid #e2e8f0; }

/* 2. Main Grid (List vs Summary) */
.exp-body { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; }

/* --- LEFT: Expense List --- */
.exp-list { padding: 16px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid #f1f5f9; }

.exp-head-row { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; padding: 0 8px; }

.exp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  transition: all 0.2s;
}
.exp-row:hover { border-color: #3b82f6; background: #f8fafc; }

.exp-info { display: flex; align-items: center; gap: 10px; }
.exp-icon { width: 32px; height: 32px; background: #f1f5f9; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.exp-meta h4 { margin: 0; font-size: 12px; font-weight: 600; color: #1e293b; }
.exp-meta p { margin: 0; font-size: 10px; color: #64748b; }

.exp-amt { font-size: 12px; font-weight: 700; color: #0f172a; }
.exp-amt.neg { color: #ef4444; }

/* Animated New Row */
.exp-row.new-entry { 
  animation: slideInExp 8s infinite; 
  opacity: 0; transform: translateX(-20px);
}
@keyframes slideInExp {
  0%, 20% { opacity: 0; transform: translateX(-20px); }
  25%, 90% { opacity: 1; transform: translateX(0); } /* Shows up */
  100% { opacity: 0; transform: translateX(-20px); }
}

/* --- RIGHT: Profit Summary --- */
.exp-summary { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fcfcfc; position: relative; }

/* Circular Chart */
.profit-chart { position: relative; width: 140px; height: 140px; }
.pc-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pc-track { fill: none; stroke: #e2e8f0; stroke-width: 12; }
.pc-fill { 
  fill: none; stroke: #10b981; stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: fillProfit 8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes fillProfit {
  0%, 20% { stroke-dashoffset: 400; }
  30%, 100% { stroke-dashoffset: 120; } /* 70% Filled */
}

/* Center Text */
.pc-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pc-lbl { font-size: 10px; color: #64748b; font-weight: 600; }
.pc-val { font-size: 24px; font-weight: 800; color: #0f172a; }

/* Dynamic Number Change */
.pc-val::after { content: "42%"; animation: numChange 8s infinite; }
@keyframes numChange {
  0%, 24% { content: "48%"; }
  25%, 100% { content: "42%"; color: #10b981; } /* Updates when expense adds */
}

/* Summary Cards */
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-top: 24px; }
.sum-card { background: #fff; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; text-align: center; }
.sum-lbl { font-size: 10px; color: #64748b; margin-bottom: 4px; display: block; }
.sum-num { font-size: 14px; font-weight: 700; color: #0f172a; }

/* --- Cursor Animation --- */
.abXUi__cursor4 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorExp 8s ease-in-out infinite;
}

@keyframes cursorExp {
  0% { transform: translate(700px, 400px); opacity: 0; }
  
  /* Hover over Chart */
  10% { opacity: 1; transform: translate(600px, 150px); }
  20% { transform: translate(600px, 150px) scale(1); }

  /* Move to Export Button (Bottom Right) */
  40% { transform: translate(650px, 350px); }
  45% { transform: translate(650px, 350px) scale(0.9); } /* Click */
  50% { transform: translate(650px, 350px) scale(1); }

  /* Exit */
  80% { transform: translate(720px, 450px); opacity: 1; }
  100% { opacity: 0; }
}

/* Button Pulse */
.btn-export { 
  margin-top: auto; padding: 8px 16px; background: #fff; border: 1px solid #cbd5e1; 
  border-radius: 6px; font-size: 11px; font-weight: 700; color: #334155; 
  display: flex; gap: 6px; align-items: center; cursor: pointer;
}
.btn-export.anim { animation: btnPulse 8s infinite; }
@keyframes btnPulse {
  45% { transform: scale(0.95); background: #f1f5f9; }
  50% { transform: scale(1); background: #fff; }
}













/* =========================================================
   STEP 6: REPORTS UI (Deep Analytics Dashboard)
========================================================= */

/* Reuse .abXUi base (Width 750px, Height 400px) */

.abXUi--reports { display: flex; flex-direction: column; background: #f8fafc; }

/* 1. Header (Date Filter) */
.rep-top {
  height: 48px; background: #fff; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.rep-title { font-size: 13px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.rep-icon { width: 24px; height: 24px; background: #eff6ff; color: #3b82f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.rep-filter { display: flex; gap: 8px; }
.rep-pill { font-size: 10px; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.rep-pill.active { background: #0f172a; color: #fff; }

/* 2. Metrics Row */
.rep-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 20px 0; }
.metric-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.m-lbl { font-size: 10px; color: #64748b; font-weight: 600; text-transform: uppercase; }
.m-val { font-size: 18px; font-weight: 800; color: #0f172a; margin-top: 4px; display: block; }
.m-trend { font-size: 10px; font-weight: 700; margin-left: 6px; }
.m-trend.up { color: #10b981; } .m-trend.down { color: #ef4444; }

/* 3. Main Chart Area */
.rep-chart-area { flex: 1; padding: 20px; display: flex; gap: 20px; overflow: hidden; }

/* Left: Graph */
.main-graph { flex: 2; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; position: relative; display: flex; flex-direction: column; }
.g-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.g-title { font-size: 12px; font-weight: 700; color: #334155; }

.g-canvas { flex: 1; position: relative; border-bottom: 1px solid #f1f5f9; border-left: 1px solid #f1f5f9; }
.g-line-svg { position: absolute; inset: 0; overflow: visible; }
.g-path-bg { fill: url(#gradBlue); opacity: 0.2; }
.g-path-stroke { 
  fill: none; stroke: #3b82f6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: drawGraph 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* Tooltip (Hidden initially) */
.g-tooltip {
  position: absolute; top: 30%; left: 60%; transform: translate(-50%, -120%);
  background: #0f172a; color: #fff; padding: 6px 10px; border-radius: 6px;
  font-size: 10px; font-weight: 700; pointer-events: none; opacity: 0; z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.g-tooltip::after { content:""; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); border-width:4px 4px 0; border-style:solid; border-color:#0f172a transparent transparent; }
.g-dot { width: 8px; height: 8px; background: #fff; border: 2px solid #3b82f6; border-radius: 50%; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); }

/* Right: City Breakdown */
.city-breakdown { flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cb-row { display: flex; flex-direction: column; gap: 4px; }
.cb-info { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: #334155; }
.cb-bar-bg { width: 100%; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.cb-bar-fill { height: 100%; border-radius: 3px; width: 0; } /* Animates width */

/* Colors */
.fill-blue { background: #3b82f6; }
.fill-purp { background: #8b5cf6; }
.fill-pink { background: #ec4899; }

/* --- ANIMATIONS --- */

/* 1. Draw Graph */
@keyframes drawGraph {
  0% { stroke-dashoffset: 1000; }
  40%, 80% { stroke-dashoffset: 0; } /* Draws & Holds */
  100% { stroke-dashoffset: 0; opacity: 0; } /* Fade out to restart */
}

/* 2. City Bars Grow */
.cb-anim-1 { animation: growBar 6s ease-in-out infinite; }
.cb-anim-2 { animation: growBar 6s ease-in-out infinite 0.2s; }
.cb-anim-3 { animation: growBar 6s ease-in-out infinite 0.4s; }

@keyframes growBar {
  0% { width: 0; }
  30%, 80% { width: var(--w); } /* Grows to variable width */
  100% { width: var(--w); opacity: 0; }
}

/* 3. Cursor Interaction */
.abXUi__cursor5 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorReport 6s ease-in-out infinite;
}

@keyframes cursorReport {
  0% { transform: translate(700px, 400px); opacity: 0; }
  
  /* Hover Metric Card */
  10% { opacity: 1; transform: translate(500px, 300px); }
  
  /* Move to Graph Peak */
  30% { transform: translate(450px, 220px); } /* Hover Peak */
  40% { transform: translate(450px, 220px); } /* Hold */

  /* Move to City Bar */
  60% { transform: translate(650px, 250px); }
  
  /* Exit */
  90% { transform: translate(720px, 450px); opacity: 1; }
  100% { opacity: 0; }
}

/* 4. Tooltip Reveal ( synced with Cursor at 30% ) */
.g-tooltip { animation: showTooltip 6s ease-in-out infinite; }
@keyframes showTooltip {
  0%, 29% { opacity: 0; transform: translate(-50%, -110%) scale(0.8); }
  30%, 45% { opacity: 1; transform: translate(-50%, -120%) scale(1); }
  46%, 100% { opacity: 0; transform: translate(-50%, -110%); }
}









/* =========================================================
   STEP 7: SMART ALERTS UI (Notification Center)
========================================================= */

/* Reuse .abXUi base */
.abXUi--alerts { display: flex; background: #fff; overflow: hidden; }

/* --- Left Sidebar (Filters) --- */
.al-sidebar {
  width: 180px; background: #f8fafc; border-right: 1px solid #e2e8f0;
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.al-head { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }

.al-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  color: #64748b; font-size: 12px; font-weight: 600; transition: all 0.2s;
}
.al-nav-item.active { background: #fff; color: #0f172a; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
.al-badge { background: #e2e8f0; color: #64748b; padding: 2px 6px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.al-nav-item.active .al-badge { background: #ef4444; color: #fff; }

/* --- Right Main Feed --- */
.al-feed { flex: 1; padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 12px; position: relative; }

/* Alert Card */
.al-card {
  display: flex; gap: 16px; padding: 16px; border-radius: 12px;
  background: #fff; border: 1px solid #e2e8f0; 
  position: relative; overflow: hidden;
  transition: transform 0.2s;
}
.al-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }

/* Variants */
.al-card.danger { border-left: 4px solid #ef4444; }
.al-card.danger::before { background: #ef4444; }
.al-card.warning { border-left: 4px solid #f59e0b; }
.al-card.warning::before { background: #f59e0b; }
.al-card.resolved { border-left: 4px solid #10b981; opacity: 0.6; filter: grayscale(1); }

/* Card Content */
.al-icon { 
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; 
  font-size: 18px; flex-shrink: 0; 
}
.danger .al-icon { background: #fee2e2; color: #ef4444; }
.warning .al-icon { background: #fef3c7; color: #d97706; }

.al-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.al-title { font-size: 13px; font-weight: 700; color: #0f172a; display: flex; align-items: center; justify-content: space-between; }
.al-time { font-size: 10px; color: #94a3b8; font-weight: 500; }
.al-desc { font-size: 11px; color: #475569; line-height: 1.4; }

/* Action Buttons */
.al-actions { margin-top: 8px; display: flex; gap: 8px; }
.btn-al { 
  padding: 6px 12px; border-radius: 6px; font-size: 10px; font-weight: 700; cursor: pointer; border: 1px solid transparent; 
}
.btn-al.primary { background: #0f172a; color: #fff; }
.btn-al.outline { background: #fff; border-color: #cbd5e1; color: #334155; }

/* --- ANIMATIONS --- */

/* 1. New Alert Pop-In */
.new-alert { animation: alertDrop 8s infinite; }
@keyframes alertDrop {
  0%, 10% { opacity: 0; transform: translateY(-40px) scale(0.9); height: 0; padding: 0; margin: 0; }
  15% { opacity: 1; transform: translateY(0) scale(1); height: auto; padding: 16px; margin-bottom: 12px; }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); } /* Loop reset */
}

/* 2. Urgent Shake */
.shake-it { animation: subtleShake 8s infinite; }
@keyframes subtleShake {
  0%, 15% { transform: translateX(0); }
  16% { transform: translateX(-4px); }
  17% { transform: translateX(4px); }
  18% { transform: translateX(-2px); }
  19% { transform: translateX(2px); }
  20%, 100% { transform: translateX(0); }
}

/* 3. Button Resolve Interaction */
.btn-resolve-anim { animation: btnResolve 8s infinite; }
@keyframes btnResolve {
  0%, 40% { transform: scale(1); background: #0f172a; }
  42% { transform: scale(0.9); background: #3b82f6; } /* Click */
  45%, 100% { transform: scale(1); background: #10b981; content: "Resolved"; } /* Success */
}

/* 4. Cursor Movement */
.abXUi__cursor6 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorAlertPath 8s ease-in-out infinite;
}

@keyframes cursorAlertPath {
  0% { transform: translate(700px, 450px); opacity: 0; }
  
  /* Alert Drops, Cursor Enters */
  15% { opacity: 1; transform: translate(600px, 100px); }
  
  /* Move to "Block Customer" button on first card */
  30% { transform: translate(350px, 120px); } /* Hover */
  35% { transform: translate(350px, 120px); } /* Read */
  
  /* Move to 2nd Card Button */
  40% { transform: translate(280px, 260px); } /* Hover Button */
  42% { transform: translate(280px, 260px) scale(0.9); } /* Click */
  45% { transform: translate(280px, 260px) scale(1); }

  /* Exit */
  80% { transform: translate(20px, 450px); opacity: 1; }
  100% { opacity: 0; }
}













/* =========================================================
   STEP 8: SCANNER UI (Warehouse Barcode System)
========================================================= */

/* Reuse .abXUi base */
.abXUi--scanner { display: flex; flex-direction: column; background: #fff; }

/* 1. Header */
.scan-top {
  height: 44px; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  background: #fff;
}
.scan-mode { font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 6px; }
.scan-dot-live { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; animation: blinkRed 1s infinite; }

@keyframes blinkRed { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.scan-count { font-family: monospace; font-size: 14px; font-weight: 700; color: #0f172a; }

/* 2. Main Body (Split: Viewfinder / List) */
.scan-body { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 16px; background: #f8fafc; }

/* --- Viewfinder Area --- */
.scan-viewfinder {
  flex: 1; background: #0f172a; border-radius: 12px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* Barcode Representation */
.barcode-box {
  width: 200px; height: 100px; background: #fff; padding: 10px; border-radius: 6px;
  display: flex; gap: 4px; justify-content: center; align-items: center;
  opacity: 0.9;
}
.bar { background: #000; height: 100%; border-radius: 2px; }
.b-thin { width: 2px; }
.b-med { width: 4px; }
.b-thick { width: 8px; }

/* Laser Line */
.laser-beam {
  position: absolute; left: 0; right: 0; height: 2px; background: #ef4444;
  box-shadow: 0 0 10px #ef4444, 0 0 5px #ff0000;
  z-index: 10;
  animation: laserScan 2s ease-in-out infinite;
}

@keyframes laserScan {
  0% { top: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* Success Overlay (Flash) */
.scan-flash {
  position: absolute; inset: 0; background: rgba(16, 185, 129, 0.2); 
  display: flex; align-items: center; justify-content: center;
  z-index: 20; opacity: 0;
  animation: successFlash 4s infinite;
}
.flash-msg {
  background: #10b981; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: scale(0.8);
}

@keyframes successFlash {
  0%, 45% { opacity: 0; }
  48% { opacity: 1; } /* Flash */
  55% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

/* --- Recent Scans List --- */
.scan-list {
  height: 120px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
}
.sl-head { font-size: 10px; font-weight: 700; color: #94a3b8; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; text-transform: uppercase; }

.sl-item {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9; font-size: 11px;
}
.sl-code { font-family: monospace; font-weight: 700; color: #3b82f6; background: #eff6ff; padding: 2px 6px; border-radius: 4px; }
.sl-name { font-weight: 600; color: #334155; }
.sl-status { display: flex; align-items: center; gap: 4px; color: #10b981; font-weight: 700; font-size: 9px; }

/* Animated New Item */
.sl-item.new-scan {
  animation: slideDownScan 4s infinite;
  background: #ecfdf5;
}
@keyframes slideDownScan {
  0%, 48% { height: 0; padding: 0; opacity: 0; border: none; }
  50% { height: 40px; padding: 10px 12px; opacity: 1; border-bottom: 1px solid #f1f5f9; }
  90% { background: #fff; } /* Fade to white */
  100% { height: 40px; padding: 10px 12px; opacity: 1; background: #fff; }
}

/* Counter Update */
.scan-count::after { content: "12"; animation: countUp 4s infinite; }
@keyframes countUp {
  0%, 48% { content: "12"; }
  50%, 100% { content: "13"; color: #10b981; }
}

/* Cursor Animation */
.abXUi__cursor7 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 30;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorScan 4s ease-in-out infinite;
}

@keyframes cursorScan {
  0% { transform: translate(700px, 450px); opacity: 0; }
  
  /* Move to Viewfinder */
  20% { opacity: 1; transform: translate(350px, 150px); } 
  
  /* Hold while scanning */
  40% { transform: translate(350px, 150px); }
  
  /* Success! Move away */
  60% { transform: translate(400px, 350px); }

  /* Exit */
  90% { transform: translate(720px, 450px); opacity: 1; }
  100% { opacity: 0; }
}



















/* =========================================================
   STEP 9: MESSENGER UI (Team Chat System)
========================================================= */

/* Reuse .abXUi base (Width 820px from Step 3 for wide view) */
.abXUi {
  /* Ensuring it matches the wide table look */
  position: absolute; width: 800px; height: 450px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(13,15,18,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 0; overflow: hidden; z-index: 5;
  animation: abFloat 7s ease-in-out infinite;
  transform: scale(0.75); transform-origin: center center;
}

.abXUi--messenger { display: flex; background: #fff; height: 100%; }

/* --- LEFT SIDEBAR --- */
.msg-sidebar {
  width: 260px; background: #fff; border-right: 1px solid #f1f5f9;
  display: flex; flex-direction: column;
}

/* Search */
.msg-search-box { padding: 16px; border-bottom: 1px solid #f8fafc; }
.msg-search {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  height: 36px; display: flex; align-items: center; padding: 0 12px; gap: 8px;
  font-size: 12px; color: #94a3b8;
}
.msg-search::after { content: "Search @username..."; }

/* Tabs */
.msg-tabs { display: flex; padding: 12px 16px; gap: 8px; }
.msg-tab { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; color: #64748b; }
.msg-tab.active { background: #0f172a; color: #fff; }

/* Chat List */
.msg-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.msg-item {
  display: flex; gap: 10px; padding: 12px 16px; cursor: pointer;
  border-left: 3px solid transparent; transition: background 0.2s;
}
.msg-item:hover { background: #f8fafc; }
.msg-item.active { background: #eff6ff; border-left-color: #3b82f6; }

.msg-avatar { 
  width: 36px; height: 36px; background: #e2e8f0; border-radius: 50%; 
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; 
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.msg-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.msg-name { font-size: 12px; font-weight: 700; color: #1e293b; display: flex; justify-content: space-between; }
.msg-time { font-size: 10px; color: #94a3b8; font-weight: 400; }
.msg-prev { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* --- RIGHT CHAT AREA --- */
.msg-body { flex: 1; display: flex; flex-direction: column; background: #fcfcfc; }

/* Header */
.msg-header {
  height: 54px; background: #fff; border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; padding: 0 20px; justify-content: space-between;
}
.msg-chat-title h4 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.msg-chat-title p { margin: 0; font-size: 11px; color: #64748b; }

/* Chat Feed */
.msg-feed { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

/* Bubbles */
.bubble-row { display: flex; gap: 10px; align-items: flex-end; max-width: 80%; }
.bubble-row.right { align-self: flex-end; flex-direction: row-reverse; }

.bubble { 
  padding: 10px 14px; border-radius: 12px 12px 12px 2px; 
  background: #fff; border: 1px solid #e2e8f0; 
  font-size: 12px; line-height: 1.5; color: #334155; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.bubble-row.right .bubble { 
  background: #3b82f6; color: #fff; border-color: #3b82f6; 
  border-radius: 12px 12px 2px 12px; 
}

/* System Message */
.sys-msg { 
  align-self: center; background: #f1f5f9; padding: 6px 12px; 
  border-radius: 99px; font-size: 10px; color: #64748b; font-weight: 600; 
}

/* Input Area */
.msg-input-area {
  padding: 16px; background: #fff; border-top: 1px solid #f1f5f9;
  display: flex; gap: 10px; align-items: center;
}
.msg-input {
  flex: 1; height: 40px; border: 1px solid #e2e8f0; border-radius: 20px;
  padding: 0 16px; font-size: 12px; display: flex; align-items: center; color: #94a3b8;
  background: #fcfcfc;
}
.msg-send { 
  width: 40px; height: 40px; background: #3b82f6; border-radius: 50%; 
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform 0.1s;
}

/* --- ANIMATIONS --- */

/* 1. Typing Animation */
.typing-dots span {
  width: 4px; height: 4px; background: #94a3b8; border-radius: 50%;
  display: inline-block; animation: wave 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* 2. Message Pop In */
.anim-pop { animation: msgPop 0.4s ease forwards; opacity: 0; transform: translateY(10px); }
.d-1 { animation-delay: 0.2s; }
.d-2 { animation-delay: 1.5s; } /* Reply comes later */
.d-3 { animation-delay: 3s; }

@keyframes msgPop { to { opacity: 1; transform: translateY(0); } }

/* 3. Typing Text in Input */
.type-text::after { content: "|"; animation: typeSim 4s infinite steps(20); color: #0f172a; }
@keyframes typeSim {
  0% { content: "|"; }
  10% { content: "O|"; }
  20% { content: "Ok|"; }
  30% { content: "Ok, I|"; }
  40% { content: "Ok, I wi|"; }
  50% { content: "Ok, I will c|"; }
  60% { content: "Ok, I will chec|"; }
  70% { content: "Ok, I will check|"; }
  80% { content: "Ok, I will check.|"; }
  90%, 100% { content: ""; } /* Sent */
}

/* 4. Send Button Click */
.msg-send { animation: sendPulse 4s infinite; }
@keyframes sendPulse {
  85% { transform: scale(1); }
  90% { transform: scale(0.9); }
  95% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 5. Cursor Movement */
.abXUi__cursor9 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 30;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorChat 8s ease-in-out infinite;
}

@keyframes cursorChat {
  0% { transform: translate(750px, 400px); opacity: 0; }
  
  /* Select Chat */
  10% { opacity: 1; transform: translate(150px, 150px); }
  
  /* Move to Input */
  30% { transform: translate(400px, 400px); }
  
  /* Click Send */
  85% { transform: translate(750px, 400px); }
  88% { transform: translate(750px, 400px) scale(0.9); }
  
  100% { opacity: 0; }
}










/* =========================================================
   STEP 10: AUTOMATION UI (Visual Workflow Builder)
========================================================= */

/* Reuse .abXUi base (Width 800px, Height 450px) */
.abXUi {
  position: absolute; width: 800px; height: 450px;
  background: #ffffff; border-radius: 12px;
  box-shadow: 
    0 24px 60px -12px rgba(13,15,18,0.18),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 0; overflow: hidden; z-index: 5;
  animation: abFloat 7s ease-in-out infinite;
  transform: scale(0.75); transform-origin: center center;
}

.abXUi--automation { display: flex; background: #f8fafc; height: 100%; }

/* --- LEFT SIDEBAR (Rules List) --- */
.auto-sidebar {
  width: 240px; background: #fff; border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column; z-index: 2;
}

.auto-head {
  padding: 16px; border-bottom: 1px solid #f1f5f9;
  font-size: 12px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 8px;
}

.auto-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.auto-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
  transition: all 0.2s;
}
.auto-item.active { border-color: #3b82f6; background: #eff6ff; }

.auto-info h4 { margin: 0; font-size: 12px; font-weight: 700; color: #1e293b; }
.auto-info p { margin: 2px 0 0; font-size: 10px; color: #64748b; }

/* Toggle Switch */
.auto-toggle {
  width: 32px; height: 18px; background: #cbd5e1; border-radius: 20px;
  position: relative; transition: background 0.3s;
}
.auto-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; background: #fff; border-radius: 50%;
  transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Active Toggle State */
.auto-item.active .auto-toggle { background: #10b981; }
.auto-item.active .auto-toggle::after { transform: translateX(14px); }

/* --- RIGHT CANVAS (Visual Flow) --- */
.auto-canvas {
  flex: 1; position: relative; overflow: hidden;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Flow Nodes */
.flow-node {
  position: absolute; width: 160px; background: #fff;
  border-radius: 8px; padding: 12px;
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1);
  border: 1px solid #e2e8f0; border-top-width: 4px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.flow-node strong { font-size: 11px; color: #0f172a; display: block; }
.flow-node span { font-size: 9px; color: #64748b; display: block; }

/* Node Colors & Positions */
.node-trigger { top: 40px; left: 50%; transform: translateX(-50%); border-top-color: #3b82f6; } /* Blue */
.node-cond { top: 160px; left: 50%; transform: translateX(-50%); border-top-color: #f59e0b; } /* Orange */
.node-action-1 { top: 280px; left: 25%; border-top-color: #10b981; } /* Green */
.node-action-2 { top: 280px; left: 55%; border-top-color: #ec4899; } /* Pink */

/* Connecting Lines (SVG) */
.flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.conn-line { fill: none; stroke: #cbd5e1; stroke-width: 2; }

/* Moving Particles (Data Flow) */
.flow-particle {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #3b82f6; border: 2px solid #fff; box-shadow: 0 0 8px #3b82f6;
  z-index: 3; opacity: 0;
}

/* Animations for Particles */
/* Path 1: Trigger -> Condition */
.fp-1 { animation: flowPath1 4s infinite linear; }
@keyframes flowPath1 {
  0% { top: 80px; left: 50%; opacity: 1; }
  40% { top: 160px; left: 50%; opacity: 1; }
  41%, 100% { top: 160px; left: 50%; opacity: 0; }
}

/* Path 2: Condition -> Action 1 (Left) */
.fp-2 { animation: flowPath2 4s infinite linear 1.6s; } /* Delayed start */
@keyframes flowPath2 {
  0% { top: 210px; left: 50%; opacity: 1; }
  20% { top: 240px; left: 50%; }
  40% { top: 240px; left: 35%; }
  60% { top: 280px; left: 35%; opacity: 1; }
  61%, 100% { top: 280px; left: 35%; opacity: 0; }
}

/* Node Pulse (Active State) */
.node-cond { animation: pulseNode 4s infinite 1.5s; }
.node-action-1 { animation: pulseNode 4s infinite 3.5s; }

@keyframes pulseNode {
  0% { transform: translateX(-50%) scale(1); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1); }
  10% { transform: translateX(-50%) scale(1.05); box-shadow: 0 10px 30px rgba(59,130,246,0.2); }
  20% { transform: translateX(-50%) scale(1); }
}

/* Cursor Interaction */
.abXUi__cursor10 {
  position: absolute; top: 0; left: 0; width: 24px; pointer-events: none; z-index: 30;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
  animation: cursorAuto 8s ease-in-out infinite;
}

@keyframes cursorAuto {
  0% { transform: translate(750px, 400px); opacity: 0; }
  
  /* Move to Sidebar Item 2 */
  15% { opacity: 1; transform: translate(180px, 150px); }
  
  /* Toggle Switch Click */
  25% { transform: translate(200px, 150px); }
  28% { transform: translate(200px, 150px) scale(0.9); }
  30% { transform: translate(200px, 150px) scale(1); }

  /* Move to Node Action 1 */
  50% { transform: translate(300px, 320px); }
  
  /* Exit */
  90% { transform: translate(750px, 400px); opacity: 1; }
  100% { opacity: 0; }
}

/* Sidebar Item Animation (Simulating Click) */
.auto-item-target { animation: toggleOnItem 8s infinite; }
@keyframes toggleOnItem {
  0%, 27% { border-color: #e2e8f0; background: #fff; }
  28%, 100% { border-color: #3b82f6; background: #eff6ff; } /* Becomes Active */
}
.auto-toggle-target { animation: toggleOnSwitch 8s infinite; }
@keyframes toggleOnSwitch {
  0%, 27% { background: #cbd5e1; }
  28%, 100% { background: #10b981; }
}
.auto-toggle-target::after { animation: toggleOnKnob 8s infinite; }
@keyframes toggleOnKnob {
  0%, 27% { transform: translateX(0); }
  28%, 100% { transform: translateX(14px); }
}




/* =========================================================
   MIRAH TIMELINE FINAL CSS
   - Works with your Existing HTML Structure (.sec4T)
   - Handles all 10 Steps UI & Animations
   - Mobile & Desktop Optimized (Unified Size)
========================================================= */

/* --- 1. EXISTING SECTION STRUCTURE FIXES --- */
.sec4T {
  padding: 100px 20px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}

.sec4T__mediaBox {
  position: relative;
  /* Fixed height for all devices to prevent layout shifts */
  height: 400px; 
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

/* --- 2. UNIFIED UI CARD STYLE (Global) --- */
/* Yeh class har UI card par lagegi */
.abXUi {
  position: absolute;
  width: 700px;  /* Fixed Reference Width */
  height: 420px; /* Fixed Reference Height */
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(13,15,18,0.08);
  box-shadow: 
    0 25px 60px -15px rgba(13,15,18,0.2), 
    0 0 0 1px rgba(255,255,255,0.5) inset;
  overflow: hidden;
  z-index: 5;
  left: 50%;
  top: 50%;
  /* Default Transform Origin */
  transform-origin: center center;
}

/* --- 3. RESPONSIVE SCALING (The Magic Part) --- */

/* Desktop (Big Screens) */
@media (min-width: 981px) {
  .abXUi {
    /* Scale down slightly to fit column */
    animation: floatDesktop 7s ease-in-out infinite;
  }
  @keyframes floatDesktop {
    0%   { transform: translate(-50%, -50%) scale(0.7); }
    50%  { transform: translate(-50%, -54%) scale(0.7); }
    100% { transform: translate(-50%, -50%) scale(0.7); }
  }
}

/* Mobile (Small Screens) */
@media (max-width: 980px) {
  .sec4T__item {
    display: flex !important;
    flex-direction: column;
    text-align: center;
    padding: 40px 0;
  }
  .sec4T__side.sec4T__text { order: 1; margin-bottom: 20px; }
  .sec4T__side.sec4T__media { order: 2; width: 100%; }
  
  .sec4T__mediaBox { height: 320px; } /* Thoda chota height mobile ke liye */

  .abXUi {
    /* Scale down significantly to fit mobile screen */
    animation: floatMobile 6s ease-in-out infinite;
  }
  @keyframes floatMobile {
    0%   { transform: translate(-50%, -50%) scale(0.45); }
    50%  { transform: translate(-50%, -55%) scale(0.45); }
    100% { transform: translate(-50%, -50%) scale(0.45); }
  }
  
  /* Hide Center Line on Mobile */
  .sec4T__center { display: none; }
}

/* --- 4. STEP-BY-STEP STYLING (Internal UI) --- */

/* Common UI Elements */

.ui-cursor { 
  position: absolute; width: 24px; height: 24px; z-index: 20; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='white' stroke-width='1'%3E%3Cpath d='M4 2L18 16L12 16L15 22L13 23L10 17L4 23L4 2Z'/%3E%3C/svg%3E");
}

/* Step 1: Table */
.abXUi--table { display: flex; flex-direction: column; }
.ui-head-row, .ui-row { display: grid; grid-template-columns: 80px 140px 100px 100px 1fr; padding: 12px 20px; align-items: center; font-size: 12px; border-bottom: 1px solid #f1f5f9; }
.ui-head-row { font-weight: 700; color: #94a3b8; background: #fff; text-transform: uppercase; font-size: 10px; }
.pill { font-weight: 700; color: #3b82f6; background: #eff6ff; padding: 2px 6px; border-radius: 4px; }
.badg { padding: 4px 8px; border-radius: 99px; font-weight: 700; font-size: 10px; text-transform: uppercase; text-align: center; }
.green { background: #dcfce7; color: #166534; } .yel { background: #fef9c3; color: #854d0e; } .purp { background: #f3e8ff; color: #6b21a8; } .red { background: #fee2e2; color: #991b1b; }
.c-table { animation: cursorTable 8s infinite; }
@keyframes cursorTable { 0% { transform: translate(700px, 450px); } 20% { transform: translate(350px, 150px); } 60% { transform: translate(350px, 220px); } 100% { transform: translate(700px, 450px); } }

/* Step 2: Courier */
.abXUi--courier { display: flex; }
.c-split { display: flex; width: 100%; height: 100%; }
.c-list { width: 50%; border-right: 1px solid #e2e8f0; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.c-form { width: 50%; padding: 20px; background: #f8fafc; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.c-item { display: flex; gap: 12px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; align-items: center; }
.c-item.active { border-color: #3b82f6; background: #eff6ff; }
.c-logo { width: 36px; height: 36px; background: #e2e8f0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10px; color: #64748b; }
.c-rad { width: 18px; height: 18px; background: #3b82f6; border-radius: 50%; margin-left: auto; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; }
.c-in { background: #fff; border: 1px solid #cbd5e1; padding: 10px; border-radius: 6px; font-size: 12px; color: #334155; font-weight: 600; }
.c-btn { background: #0f172a; color: #fff; padding: 12px; text-align: center; border-radius: 6px; font-size: 12px; font-weight: 700; margin-top: 10px; }
.c-courier { animation: cursorCourier 8s infinite; }
@keyframes cursorCourier { 0% { transform: translate(700px, 450px); } 20% { transform: translate(150px, 150px); } 50% { transform: translate(550px, 350px); } 100% { transform: translate(700px, 450px); } }

/* Step 3: Inventory */
.abXUi--inv { display: flex; flex-direction: column; }
.abXUi--inv .ui-head-row, .abXUi--inv .ui-row { grid-template-columns: 180px 140px 100px 1fr; }
.bar { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; width: 100%; }
.fill { height: 100%; background: #3b82f6; border-radius: 4px; }
.act { color: #3b82f6; font-weight: 700; cursor: pointer; text-align: right; }
.inv-target { animation: invHighlight 6s infinite; }
@keyframes invHighlight { 40%, 60% { background: #eff6ff; } }
.anim-restock { width: 15%; background: #ef4444; animation: fillAnim 6s infinite; }
@keyframes fillAnim { 45% { width: 15%; background: #ef4444; } 50%, 100% { width: 90%; background: #10b981; } }
.anim-badge::after { content: "Low"; animation: badgeTxt 6s infinite; }
@keyframes badgeTxt { 45% { content: "Low"; background: #fee2e2; color: #991b1b; } 50%, 100% { content: "Good"; background: #dcfce7; color: #166534; } }
.c-inv { animation: cursorInv 6s infinite; }
@keyframes cursorInv { 0% { transform: translate(700px, 450px); } 40% { transform: translate(600px, 250px); } 45% { transform: translate(600px, 250px) scale(0.9); } 100% { transform: translate(700px, 450px); } }

/* Step 4: Tracking */
.abXUi--track { display: flex; height: 100%; }
.t-map { width: 60%; background: #f8fafc; position: relative; border-right: 1px solid #e2e8f0; overflow: hidden; }
.t-timeline { width: 40%; padding: 30px; display: flex; flex-direction: column; gap: 0; }
.map-grid { position: absolute; inset: 0; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; }
.map-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.anim-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPath 8s linear infinite; }
@keyframes drawPath { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } }
.truck-icon { position: absolute; font-size: 28px; animation: moveTruck 8s linear infinite; offset-path: path("M50 250 Q 200 150 350 50"); }
@keyframes moveTruck { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
.city { position: absolute; font-size: 12px; font-weight: 800; background: #fff; padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.c1 { left: 40px; bottom: 60px; } .c2 { right: 40px; top: 20px; }
.tl-i { padding-left: 24px; position: relative; padding-bottom: 30px; font-size: 13px; color: #64748b; }
.tl-i::before { content:""; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: #e2e8f0; }
.tl-i:last-child::before { display: none; }


/* Step 5: Expenses */
.abXUi--exp { display: flex; align-items: center; justify-content: center; gap: 60px; padding: 40px; }
.e-list { width: 240px; display: flex; flex-direction: column; gap: 16px; }
.e-item { display: flex; justify-content: space-between; font-size: 12px; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; }
.anim-new { opacity: 0; animation: slideIn 6s infinite; }
@keyframes slideIn { 40% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 1; transform: translateX(0); } }
.e-chart { width: 160px; height: 160px; position: relative; }
.donut { transform: rotate(-90deg); } .bg { fill: none; stroke: #f1f5f9; stroke-width: 10; } .fg { fill: none; stroke: #10b981; stroke-width: 10; stroke-dasharray: 250; stroke-dashoffset: 250; animation: fillDonut 6s infinite; }
@keyframes fillDonut { 50% { stroke-dashoffset: 80; } }
.e-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.c-exp { animation: cursorExp 6s infinite; }
@keyframes cursorExp { 0% { transform: translate(600px, 400px); } 50% { transform: translate(300px, 200px); } 100% { transform: translate(600px, 400px); } }

/* Step 6: Reports */
.abXUi--rep { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.r-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; }
.tag { background: #f1f5f9; padding: 4px 8px; border-radius: 4px; font-size: 10px; color: #64748b; }
.r-graph { flex: 1; border: 1px solid #e2e8f0; border-radius: 8px; position: relative; display: flex; align-items: flex-end; padding: 0 20px; overflow: hidden; }
.line { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.r-tip { position: absolute; top: 30%; left: 50%; background: #0f172a; color: #fff; font-size: 10px; padding: 4px 8px; border-radius: 4px; opacity: 0; animation: showTip 6s infinite; }
@keyframes showTip { 40% { opacity: 1; } 60% { opacity: 0; } }
.c-rep { animation: cursorRep 6s infinite; }
@keyframes cursorRep { 40% { transform: translate(350px, 150px); } }

/* Step 7: Alerts */
.abXUi--alert { padding: 20px; background: #f8fafc; }
.a-feed { display: flex; flex-direction: column; gap: 10px; }
.a-card { background: #fff; padding: 12px; border-radius: 8px; border-left: 4px solid #ccc; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; gap: 10px; align-items: center; }
.a-card.red { border-left-color: #ef4444; } .a-card.yel { border-left-color: #f59e0b; } .a-card.blue { border-left-color: #3b82f6; }
.anim-drop { animation: dropIn 6s infinite; opacity: 0; }
@keyframes dropIn { 10% { opacity: 0; transform: translateY(-20px); } 20% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } }
.a-btn { background: #ef4444; color: #fff; border: none; padding: 4px 8px; border-radius: 4px; font-size: 10px; margin-left: auto; cursor: pointer; }
.c-alert { animation: cursorAlert 6s infinite; }
@keyframes cursorAlert { 25% { transform: translate(600px, 100px); } }

/* Step 8: Scanner */
.abXUi--scan { padding: 20px; display: flex; gap: 20px; }
.s-view { width: 50%; background: #0f172a; border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; border: 4px solid #1e293b; }
/* Updated Laser and Barcode visibility */
.laser { 
  position: absolute; width: 100%; height: 3px; background: #ef4444; 
  box-shadow: 0 0 15px #ff0000, 0 0 5px #ff0000; 
  animation: scanLaser 2s infinite linear; 
  z-index: 10;
}
@keyframes scanLaser { 0% { top: 0; } 100% { top: 100%; } }
/* Updated Barcode Pattern to ensure visibility */
.barcode { 
  width: 60%;
  height: 60px;
  /* CSS Generated Barcode Pattern */
  background: repeating-linear-gradient(
    90deg,
    #fff,
    #fff 2px,
    transparent 2px,
    transparent 5px,
    #fff 5px,
    #fff 8px,
    transparent 8px,
    transparent 10px
  );
  opacity: 0.8;
  color: transparent; 
}
.s-flash { position: absolute; inset: 0; background: rgba(16,185,129,0.8); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; opacity: 0; animation: flash 4s infinite; z-index: 15; }
@keyframes flash { 48% { opacity: 0; } 50% { opacity: 1; } 55% { opacity: 0; } }
.s-list { width: 50%; display: flex; flex-direction: column; gap: 8px; }
.s-item { padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; display: flex; justify-content: space-between; font-size: 11px; }
.s-item.new { background: #ecfdf5; animation: newItem 4s infinite; }
@keyframes newItem { 0%, 45% { opacity: 0; height: 0; padding: 0; } 50% { opacity: 1; height: auto; padding: 10px; } }

/* Step 9: Messenger */
.abXUi--msg { display: flex; height: 100%; }
.m-sidebar { width: 200px; border-right: 1px solid #e2e8f0; padding: 20px; background: #f8fafc; }
.m-row { padding: 10px; font-size: 12px; border-radius: 6px; cursor: pointer; }
.m-row.active { background: #fff; font-weight: 700; shadow: 0 1px 2px rgba(0,0,0,0.05); }
.m-chat { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.bubble { padding: 8px 12px; border-radius: 8px; font-size: 12px; max-width: 80%; }
.l { background: #f1f5f9; align-self: flex-start; border-bottom-left-radius: 0; }
.r { background: #3b82f6; color: #fff; align-self: flex-end; border-bottom-right-radius: 0; }
.anim-pop { opacity: 0; animation: msgPop 6s infinite; animation-delay: 1s; }
.anim-type { opacity: 0; animation: msgPop 6s infinite; animation-delay: 3s; }
@keyframes msgPop { 0% { opacity: 0; transform: translateY(10px); } 10% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } }
.c-msg { animation: cursorMsg 6s infinite; }
@keyframes cursorMsg { 80% { transform: translate(600px, 350px); } }

/* Step 10: Automation */
.abXUi--auto { display: flex; align-items: center; justify-content: center; }
.au-nodes { position: relative; width: 100%; height: 100%; }
.node { position: absolute; padding: 8px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 11px; font-weight: 700; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.n1 { top: 40px; left: 50%; transform: translateX(-50%); border-top: 3px solid #3b82f6; }
.n2 { top: 120px; left: 50%; transform: translateX(-50%); border-top: 3px solid #f59e0b; }
.n3 { top: 220px; left: 30%; border-top: 3px solid #10b981; }
.n4 { top: 220px; left: 70%; border-top: 3px solid #ef4444; }
.line { position: absolute; background: #cbd5e1; z-index: -1; }
.v { width: 2px; height: 80px; left: 50%; top: 70px; }
.fork { width: 200px; height: 2px; left: 50%; top: 180px; transform: translateX(-50%); }
.particle { width: 6px; height: 6px; background: #3b82f6; border-radius: 50%; position: absolute; left: 50%; top: 70px; animation: flowData 6s infinite linear; }
@keyframes flowData { 0% { top: 70px; } 30% { top: 180px; } 40% { top: 180px; left: 50%; } 60% { left: 30%; top: 180px; } 80% { top: 220px; opacity: 1; } 100% { opacity: 0; } }
.c-auto { animation: cursorAuto 6s infinite; }
@keyframes cursorAuto { 20% { transform: translate(400px, 120px); } }

/* --- 4. RESPONSIVE MEDIA QUERIES --- */

/* Mobile (Stack & Scale Down) */
@media (max-width: 980px) {
  .sec4T__item { display: flex; flex-direction: column; text-align: center; gap: 30px; opacity: 1; transform: none; }
  .sec4T__side.sec4T__text { order: 1; }
  .sec4T__side.sec4T__media { order: 2; width: 100%; display: flex; justify-content: center; }
  
  /* Scale down the 700px cards to fit mobile */
  .abXUi {
    animation: floatMobile 6s ease-in-out infinite;
  }
  @keyframes floatMobile {
    0%, 100% { transform: translate(-50%, -50%) scale(0.45); }
    50% { transform: translate(-50%, -55%) scale(0.45); }
  }
  
  .sec4T__center { display: none; }
}


/* =========================================================
   SECTION 5 — Categories (PREMIUM + Title Gradient on Scroll)
========================================================= */

.sec5C{
  padding: 86px 20px;
  border-top: 1px solid var(--line);

  /* ✅ subtle premium background */
  background: radial-gradient(900px 420px at 50% 0%,
    rgba(59,130,246,0.06) 0%,
    rgba(124,58,237,0.04) 35%,
    rgba(255,255,255,1) 72%
  );
}

.sec5C__inner{
  max-width: var(--site-max, 1400px);
  margin: 0 auto;
}

.sec5C__top{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 22px;
}

.sec5C__eyebrow{
  font-family: "Sometype Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(13,15,18,.55);
  margin-bottom: 10px;
}

.sec5C__title{
  margin: 0 0 10px 0;
  font-family: "Plus Jakarta Sans","Inter",sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.03em;
  color: rgb(13,15,18);

  /* ✅ smooth transition when becomes active */
  transition: filter 280ms ease;
}

/* ✅ Scroll active: animated gradient */
.sec5C.is-active .sec5C__title{
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.70),
    rgba(59,130,246,.95)
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sec5CTitleFlow 1.35s ease-in-out infinite;
}

@keyframes sec5CTitleFlow{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.sec5C__sub{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: rgb(100,100,100);
}

/* Grid */
.sec5C__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}

/* Card (premium) */
.sec5C__card{
  position: relative;
  border-radius: 16px;
  padding: 16px 14px;

  /* ✅ glassy, minimal, premium */
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(13,15,18,.08);
  box-shadow: 0 18px 60px rgba(13,15,18,.05);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.sec5C__card:hover{
  transform: translateY(-3px);
  border-color: rgba(13,15,18,.14);
  box-shadow: 0 22px 70px rgba(13,15,18,.07);
}

/* subtle top highlight line */
.sec5C__card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg,
    rgba(59,130,246,0),
    rgba(124,58,237,.22),
    rgba(236,72,153,.18),
    rgba(59,130,246,0)
  );
  opacity: .55;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.sec5C__h{
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: rgb(13,15,18);
  margin-bottom: 6px;
}

.sec5C__p{
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: rgb(100,100,100);
}

/* Closing line */
.sec5C__closing{
  margin-top: 18px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: rgba(13,15,18,.70);
}

/* Responsive */
@media (max-width: 1100px){
  .sec5C__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px){
  .sec5C{ padding: 60px 16px; }
  .sec5C__title{ font-size: 28px; line-height: 34px; }
  .sec5C__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .sec5C__grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   SECTION 5 — FIXED (Single-card title wave WITHOUT rectangle)
   Problem: gradient rectangle shows because clip isn't applied
   Fix:
   ✅ Apply background-clip:text + -webkit-text-fill-color:transparent
   ✅ Keep normal color when not hovered
========================================================= */

/* normal title */
.sec5C__h{
  color: rgb(13,15,18);
}

/* hover => wave ONLY on title text */
.sec5C__card:hover .sec5C__h{
  background: linear-gradient(90deg,
    rgba(13,15,18,1) 0%,
    rgba(13,15,18,1) 42%,
    rgba(59,130,246,.95) 56%,
    rgba(124,58,237,.85) 70%,
    rgba(236,72,153,.70) 84%,
    rgba(13,15,18,1) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 50%;

  /* ✅ REAL fix (prevents rectangle) */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Safari/Chrome */
  color: transparent;                   /* fallback */

  animation: sec5CardTitleWave 950ms cubic-bezier(.22,1,.36,1) 1;
}

@keyframes sec5CardTitleWave{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}







/* =========================================================
   SECTION 6 — Trust Layer (NO CARDS, Enterprise Style)
========================================================= */

.sec6{
  padding: 90px 20px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.sec6__inner{
  max-width: 1200px;
  margin: 0 auto;
}

/* top */
.sec6__top{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 34px;
}

.sec6__label{
  font-family: "Sometype Mono", monospace;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(13,15,18,.55);
  margin-bottom: 10px;
}

.sec6__title{
  margin: 0 0 8px;
  font-family: "Plus Jakarta Sans","Inter",sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.03em;
  color: rgb(13,15,18);
}

/* scroll gradient */
.sec6.is-active .sec6__title{
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.75)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec6__sub{
  font-size: 16px;
  line-height: 26px;
  color: rgb(100,100,100);
}

/* === TRUST ROWS === */
.sec6__grid{
  margin-top: 36px;
  border-top: 1px solid rgba(13,15,18,.08);
}

.sec6__card{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(13,15,18,.08);
}

.sec6__h{
  font-weight: 700;
  font-size: 15px;
  color: rgb(13,15,18);
}

.sec6__p{
  font-size: 14px;
  line-height: 22px;
  color: rgb(100,100,100);
}

/* trust bar */
.sec6__bar{
  margin-top: 26px;
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(13,15,18,.65);
}

/* mobile */
@media (max-width: 980px){
  .sec6{
    padding: 64px 16px;
  }
  .sec6__title{
    font-size: 28px;
    line-height: 34px;
  }
  .sec6__card{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}












/* =========================================================
   SECTION 7 — Final CTA (Premium, Calm)
========================================================= */

.sec7{
  padding: 90px 20px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.sec7__inner{
  max-width: 1200px;
  margin: 0 auto;
}

.sec7__card{
  border-radius: 26px;
  border: 1px solid rgba(13,15,18,.10);
  background:
    radial-gradient(600px 220px at 50% 0%,
      rgba(59,130,246,.08),
      rgba(255,255,255,1) 70%
    );
  padding: 40px 28px;
  text-align: center;
}

.sec7__title{
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.03em;
  color: rgb(13,15,18);
}

/* scroll gradient */
.sec7.is-active .sec7__title{
  background: linear-gradient(90deg,
    rgba(59,130,246,.95),
    rgba(124,58,237,.85),
    rgba(236,72,153,.75)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec7__sub{
  margin-top: 8px;
  font-size: 15px;
  line-height: 24px;
  color: rgb(100,100,100);
}

.sec7__cta{
  margin-top: 20px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

.sec7__note{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(13,15,18,.65);
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* mobile */
@media (max-width: 980px){
  .sec7{
    padding: 64px 16px;
  }
  .sec7__title{
    font-size: 26px;
    line-height: 32px;
  }
}




/* =========================================================
   WHATSAPP FLOAT (MINIMAL + PREMIUM TIGHT) — Mirah Tools
   ✅ Floating button bottom-right
   ✅ Click => minimal chat box
   ✅ Header: avatar + green dot + name + online
   ✅ Body: textarea + send button
========================================================= */

.waMini{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

}

/* =========================
   Floating Button
========================= */
.waMini__btn{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(13,15,18,.10);
  background: #11bb4f;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;

  box-shadow: 0 14px 46px rgba(13,15,18,.16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.waMini__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 70px rgba(13,15,18,.18);
}
.waMini__ico{
  width: 22px;
  height: 22px;
  display: block;
}

/* =========================
   Card (Closed/Open)
========================= */
.waMini__card{
  position: absolute;
  right: 0;
  bottom: 60px;

  width: 300px;
  max-width: calc(100vw - 32px);

  border-radius: 12px;
  overflow: hidden;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(13,15,18,.10);
  box-shadow: 0 22px 70px rgba(13,15,18,.16);

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.waMini__card.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================
   Header
========================= */
.waMini__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 10px 10px;
  border-bottom: 1px solid rgba(13,15,18,.08);
  background: rgba(255,255,255,.88);
}

.waMini__profile{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Avatar (letter) */
.waMini__avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgb(13,15,18);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
  overflow: hidden;
}

/* Avatar as image (optional) */
.waMini__avatar--img{
  padding: 0;
}
.waMini__avatar--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.waMini__meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.waMini__nameRow{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.waMini__name{
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: rgb(13,15,18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.waMini__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
  flex: 0 0 auto;
}

.waMini__status{
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  color: rgba(13,15,18,.62);
  white-space: nowrap;
}

.waMini__sub{
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  color: rgba(13,15,18,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button */
.waMini__close{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(13,15,18,.10);
  background: rgba(255,255,255,.75);
  cursor: pointer;
  transition: transform .18s ease;
}
.waMini__close:hover{
  transform: translateY(-1px);
}

/* =========================
   Body
========================= */
.waMini__body{
  padding: 10px;
  display: grid;
  gap: 8px;
}

.waMini__input{
  width: 100%;
  border-radius: 7px;
  border: 1px solid rgba(13,15,18,.10);
  background: rgba(255,255,255,.92);
  padding: 9px 10px;

  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 18px;
  resize: none;
  outline: none;
}
.waMini__input:focus{
  border-color: rgba(13,15,18,.18);
}

/* Send button */
.waMini__send{
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(13,15,18,.10);
  background: #25D366;
  color: #fff;

  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 12.5px;

  cursor: pointer;
  transition: transform .18s ease;
}
.waMini__send:hover{
  transform: translateY(-1px);
}

/* =========================
   Mobile tweaks
========================= */
@media (max-width: 520px){
  .waMini{
    right: 12px;
    bottom: 12px;
  }
  .waMini__btn{
    width: 48px;
    height: 48px;
  }
  .waMini__card{
    width: 292px;
    bottom: 58px;
  }
}







/* =========================================================
   FOOTER — Mirah Tools (FINAL FIX)
   ✅ Desktop: 6 columns grid (no long single column)
   ✅ Mobile: dropdown accordions only
   ✅ Top + Bottom mobile spacing fixed
========================================================= */

.footer{
  padding: 70px 20px 26px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(800px 260px at 50% 0%,
      rgba(59,130,246,.06),
      rgba(255,255,255,1) 70%
    );
}

.footer__inner{
  max-width: var(--site-max, 1400px);
  margin: 0 auto;
}

/* =========================
   TOP (Desktop)
========================= */
.footer__top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(13,15,18,.08);
}

.footer__brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
  text-decoration:none;
}

.footer__logo{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgb(13,15,18);
  color:#fff;
  font-weight:800;
  font-family:"Inter",sans-serif;
  flex:0 0 auto;
}

.footer__brandText{min-width:0; display:flex; flex-direction:column; gap:3px;}
.footer__name{
  font-family:"Inter",sans-serif;
  font-weight:700;
  color: rgb(13,15,18);
  letter-spacing:-0.02em;
}
.footer__tag{
  font-size: 13px;
  color: rgba(13,15,18,.60);
  max-width: 520px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer__cta{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* =========================================================
   ✅ VISIBILITY TOGGLES (IMPORTANT)
   Desktop = footerDesktop ON, footerMobile OFF
   Mobile  = footerDesktop OFF, footerMobile ON
========================================================= */
.footerDesktop{ display:block !important; }
.footerMobile{ display:none !important; }

/* =========================
   ✅ DESKTOP GRID (FORCE 6 COLS)
========================= */
.footer__grid{
  display:grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px;
  padding-top: 24px;
  padding-bottom: 18px;
}

.footer__col{ min-width:0 !important; }

.footer__h{
  font-family:"Inter",sans-serif;
  font-weight:700;
  font-size:13px;
  color: rgb(13,15,18);
  margin: 0 0 10px 0;
}

.footer__link{
  display:block;
  font-size:13px;
  color: rgba(13,15,18,.62);
  padding: 6px 0;
  text-decoration:none;
  transition: color .18s ease, transform .18s ease;
}
.footer__link:hover{
  color: rgba(13,15,18,1);
  transform: translateX(2px);
}

/* =========================
   BOTTOM
========================= */
.footer__bottom{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:14px;
  padding-top:16px;
  border-top:1px solid rgba(13,15,18,.08);
}

.footer__bottomLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color: rgba(13,15,18,.62);
  font-size:13px;
}

.footer__social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Social buttons (works with SVG or text) */
.socBtn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(13,15,18,.10);
  background: rgba(255,255,255,.72);
  color: rgba(13,15,18,.75);
  text-decoration:none;
  font-family:"Inter",sans-serif;
  font-weight:700;
  font-size:12px;
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.socBtn:hover{
  transform: translateY(-2px);
  border-color: rgba(13,15,18,.18);
  color: rgba(13,15,18,1);
}
.socBtn svg{ width:18px; height:18px; fill: currentColor; }

/* =========================================================
   RESPONSIVE
========================================================= */

/* 1100px: 3 columns */
@media (max-width: 1100px){
  .footer__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ✅ Mobile: dropdown footer only */
@media (max-width: 980px){
  .footer{ padding:56px 16px 20px; }

  /* Top stack */
  .footer__top{
    flex-direction: column;
    align-items: stretch;
    gap:14px;
  }

  .footer__tag{
    max-width:100%;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height:18px;
  }

  .footer__cta{
    width:100%;
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
  }
  .footer__cta .btn{ width:100%; justify-content:center; }
  .footer__cta .btn--lg{ height:44px; padding:0 16px; font-size:14px; }

  /* Hide desktop columns */
  .footerDesktop{ display:none !important; }
  .footer__grid{ display:none !important; }

  /* Show mobile dropdown */
  .footerMobile{ display:block !important; padding-top:18px; }

  /* Bottom stack */
  .footer__bottom{
    flex-direction: column;
    align-items: flex-start;
    gap:12px;
  }

  /* Social row clean on mobile */
  .footer__social{
    width:100%;
    justify-content:flex-start;
  }
}

/* extra small */
@media (max-width: 520px){
  .footer__logo{ width:36px; height:36px; }
  .socBtn{ width:36px; height:36px; }
}

/* =========================================================
   MOBILE DROPDOWNS (details/summary)
   (sirf mobile pe visible)
========================================================= */
.footerMobile .footDrop{
  border-top: 1px solid rgba(13,15,18,.08);
  padding: 10px 0;
}
.footerMobile .footDrop:last-child{
  border-bottom: 1px solid rgba(13,15,18,.08);
}

.footerMobile .footDrop__sum{
  list-style:none;
  cursor:pointer;
  font-family:"Inter",sans-serif;
  font-weight:700;
  font-size:13px;
  color: rgb(13,15,18);
  padding: 10px 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.footerMobile .footDrop__sum::-webkit-details-marker{ display:none; }

.footerMobile .footDrop__sum::after{
  content:"▾";
  opacity:.65;
  transform: translateY(-1px);
  transition: transform .18s ease;
}
.footerMobile .footDrop[open] .footDrop__sum::after{
  transform: rotate(180deg);
}

.footerMobile .footDrop__body{
  padding: 4px 0 10px;
}