/* ============================================================
   CartEasy — landing page
   Brand: deep royal blue gradient · lime #9BDB26 · logo teal #0AC9BA
   Type:  Plus Jakarta Sans (display) · Inter Tight (text)
   ============================================================ */

:root{
  /* brand blues, sampled from the CartEasy key visuals */
  --blue-hi:    #3B70E7;
  --blue-500:   #2B62DE;
  --blue-600:   #1C4CB7;
  --blue-700:   #12449B;
  --blue-800:   #0C327C;
  --navy:       #0B1A46;
  --navy-deep:  #070F30;
  --logo-navy:  #0F0649;

  --lime:       #9BDB26;
  --lime-hi:    #B2F03F;
  --lime-ink:   #4C7A05;
  --teal:       #0AC9BA;

  /* on-dark text */
  --w:          #FFFFFF;
  --w-72:       rgba(255,255,255,.72);
  --w-58:       rgba(255,255,255,.58);
  --w-42:       rgba(255,255,255,.42);
  --line:       rgba(255,255,255,.14);
  --line-2:     rgba(255,255,255,.08);
  --glass:      rgba(255,255,255,.055);
  --glass-hi:   rgba(255,255,255,.09);

  /* light UI surfaces (the product mock-ups) */
  --card:       #FFFFFF;
  --card-2:     #F2F6FD;
  --card-3:     #E6EDFA;
  --ink:        #0B1330;
  --ink-2:      #4A5578;
  --ink-3:      #8B93AE;
  --ink-line:   rgba(11,19,48,.12);

  --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --text:    "Inter Tight", system-ui, -apple-system, sans-serif;

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --r: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--navy); }
body{
  margin:0;
  color:var(--w);
  font-family:var(--text);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:linear-gradient(180deg,
    #17479F 0%,
    #123C8E 8%,
    #0E3178 20%,
    #0C2A66 34%,
    #0B2358 50%,
    #0A1D4B 66%,
    #091743 82%,
    #08123A 100%);
}
img,svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.05; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
.sprite{ position:absolute; }

::selection{ background:var(--lime); color:var(--navy-deep); }
:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:4px; }

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--lime); color:var(--navy-deep); padding:10px 16px; border-radius:0 0 8px 0; font-weight:600;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
section[id],#top{ scroll-margin-top:88px; }

/* ── brand sparkle ─────────────────────────────────────────── */
.spark{
  position:absolute; fill:#fff; opacity:.55; pointer-events:none; z-index:0;
  filter:drop-shadow(0 0 22px rgba(190,215,255,.65));
  animation:float 9s var(--ease) infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-14px) rotate(8deg) } }
.spark--a{ width:50px; top:15%;  left:50%; opacity:.75; }
.spark--b{ width:26px; top:74%;  left:47%; opacity:.5; animation-delay:-3s; }
.spark--c{ width:84px; bottom:4%; right:2%; opacity:.26; animation-delay:-5s; }
.spark--d{ width:44px; top:16%;  left:8%;  opacity:.5; }
.spark--e{ width:70px; bottom:14%; right:7%; opacity:.32; animation-delay:-4s; }

/* ── type primitives ───────────────────────────────────────── */
.h1{
  font-family:var(--display);
  font-size:clamp(40px, 4.7vw, 64px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:800;
}
.h2{
  font-size:clamp(30px, 3.9vw, 50px);
  line-height:1.08;
  letter-spacing:-.032em;
  font-weight:800;
}
.hl{ color:var(--lime); }
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--w-42); margin-bottom:18px;
}
.lede{
  font-size:clamp(17px,1.35vw,20px);
  color:var(--w-72);
  max-width:52ch;
}
.lede strong{ color:var(--w); font-weight:600; }

.sec-head{ max-width:820px; margin-bottom:clamp(40px,5vw,64px); position:relative; z-index:1; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head__sub{ margin-top:20px; color:var(--w-58); max-width:56ch; font-size:17px; }
.sec-head--center .sec-head__sub{ margin-inline:auto; }

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  --bg:transparent; --fg:var(--w); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-family:var(--text); font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:11px 18px; border-radius:999px; text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .25s;
}
.btn--lg{ padding:15px 26px; font-size:16.5px; }
.btn--full{ display:flex; width:100%; }

.btn--lime{ --bg:var(--lime); --fg:#0A2103; --bd:var(--lime); font-weight:700; }
.btn--lime:hover{ --bg:var(--lime-hi); --bd:var(--lime-hi); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(155,219,38,.75); }

.btn--line{ --bd:rgba(255,255,255,.3); --fg:var(--w); }
.btn--line:hover{ --bd:#fff; background:rgba(255,255,255,.1); transform:translateY(-2px); }

.btn--ghost{ --fg:var(--w-72); }
.btn--ghost:hover{ --fg:var(--w); background:rgba(255,255,255,.08); }

/* on white plan cards */
.btn--ink-line{ --bd:var(--ink-line); --fg:var(--ink); }
.btn--ink-line:hover{ --bd:var(--navy); background:var(--navy); --fg:#fff; transform:translateY(-2px); }

.btn__arrow{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ── nav ───────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,25,68,.6);
  backdrop-filter:saturate(1.5) blur(16px);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.is-stuck{ border-bottom-color:var(--line-2); background:rgba(9,21,60,.82); }
.nav__in{ display:flex; align-items:center; gap:28px; height:70px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand__mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:block;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.6);
}
.brand__name{ font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em; }
.brand__by{ font-size:12px; color:var(--w-42); border-left:1px solid var(--line); padding-left:11px; }

.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:15px; color:var(--w-72); text-decoration:none; position:relative; padding:4px 0;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--lime);
  transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--w); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:8px; }

.nav__burger{
  display:none; width:40px; height:40px; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; padding:0; place-items:center;
}
.nav__burger span{ display:block; width:16px; height:1.5px; background:var(--w); margin:3px auto; transition:transform .3s var(--ease); }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(2.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-2px) rotate(-45deg); }
.nav__mobile{
  display:none; flex-direction:column; gap:4px; padding:8px var(--pad) 22px;
  border-top:1px solid var(--line-2); background:rgba(8,18,54,.96);
}
.nav__mobile a{ padding:12px 0; text-decoration:none; font-size:17px; border-bottom:1px solid var(--line-2); color:var(--w-72); }
.nav__mobile .btn{ margin-top:14px; border-bottom:0; justify-content:center; color:#0A2103; }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  padding-top:clamp(56px,7vw,104px); padding-bottom:clamp(40px,5vw,64px);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -20%; height:900px; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 560px at 22% 22%, rgba(105,155,255,.5), transparent 62%),
    radial-gradient(680px 480px at 84% 12%, rgba(43,98,222,.42), transparent 64%);
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(32px,5vw,68px); align-items:center;
}
.hero__copy{ max-width:600px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--line); border-radius:999px; padding:6px 15px 6px 12px;
  background:var(--glass); margin-bottom:26px; color:var(--w-72);
  backdrop-filter:blur(6px);
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 4px rgba(155,219,38,.2);
}
.hero .lede{ margin-top:26px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.eyebrow b{ color:var(--lime); font-weight:600; }

/* ── hero chat simulation ──────────────────────────────────── */
.sim{ position:relative; }
.sim__glow{
  position:absolute; inset:-18% -12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 44% at 30% 20%, rgba(155,219,38,.20), transparent 70%),
    radial-gradient(60% 55% at 75% 85%, rgba(10,201,186,.20), transparent 72%),
    radial-gradient(70% 60% at 50% 50%, rgba(120,165,255,.22), transparent 70%);
  filter:blur(14px);
}
.sim__card{
  position:relative; z-index:1;
  background:var(--card); color:var(--ink);
  border-radius:22px; overflow:hidden;
  box-shadow:
    0 50px 90px -40px rgba(2,8,30,.9),
    0 12px 28px -14px rgba(2,8,30,.5),
    0 0 0 1px rgba(255,255,255,.22);
}
.sim__head{
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:linear-gradient(115deg, var(--logo-navy) 0%, #13307E 60%, #1B4BC0 100%);
  color:#fff;
}
.sim__avatar{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:block; }
.sim__id{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.sim__id b{ font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:-.02em; }
.sim__id i{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.62); display:flex; align-items:center; gap:6px; }
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(10,201,186,.65) } 60%{ box-shadow:0 0 0 6px rgba(10,201,186,0) } }
.sim__win{ margin-left:auto; display:flex; gap:7px; }
.sim__win em{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.24); }

.sim__thread{
  height:330px; overflow:hidden; padding:18px 16px 10px;
  display:flex; flex-direction:column; gap:10px; justify-content:flex-end;
  background:linear-gradient(180deg, #FBFCFF, #fff 40%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 30px);
  mask-image:linear-gradient(180deg, transparent 0, #000 30px);
}
.msg{
  max-width:86%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.45;
  animation:pop .4s var(--ease) both;
}
.msg--bot{ background:var(--card-2); border-bottom-left-radius:6px; align-self:flex-start; }
.msg--user{
  background:linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color:#fff; border-bottom-right-radius:6px; align-self:flex-end;
  box-shadow:0 8px 18px -10px rgba(27,75,192,.9);
}
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.96) } to{ opacity:1; transform:none } }

.typing{
  display:flex; gap:5px; padding:13px 15px; background:var(--card-2);
  border-radius:16px 16px 16px 6px; align-self:flex-start; animation:pop .3s var(--ease) both;
}
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.16s } .typing i:nth-child(3){ animation-delay:.32s }
@keyframes blink{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-4px) } }

/* product results */
.res{ display:flex; gap:8px; align-self:stretch; }
.pcard{
  flex:1; min-width:0; border:1px solid var(--ink-line); border-radius:13px; background:#fff;
  padding:10px 8px 9px; text-align:center;
  box-shadow:0 6px 16px -12px rgba(2,8,30,.7);
  animation:pop .45s var(--ease) both;
}
.pcard:nth-child(2){ animation-delay:.09s } .pcard:nth-child(3){ animation-delay:.18s }
.pcard__img{
  display:grid; place-items:center; height:52px; border-radius:9px;
  background:linear-gradient(160deg, var(--card-2), var(--card-3));
  color:var(--blue-700);
}
.pcard__img svg{ width:28px; height:28px; opacity:.9; }
.pcard b{ display:block; font-size:11.5px; font-weight:700; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcard i{ display:block; font-style:normal; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; margin-top:1px; }
.pcard__add{
  display:block; margin-top:8px; background:var(--navy); color:#fff;
  font-size:11px; font-weight:600; padding:6px 4px; border-radius:7px;
}

/* cart summary */
.ccard{
  align-self:stretch; border:1px solid var(--ink-line); border-radius:14px;
  background:#fff; padding:13px 14px; animation:pop .45s var(--ease) both;
  box-shadow:0 10px 22px -16px rgba(2,8,30,.7);
}
.ccard__row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--ink-2); }
.ccard__row + .ccard__row{ margin-top:7px; }
.ccard__row b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.ccard__off{ color:var(--lime-ink) !important; }
.ccard__rule{ height:1px; background:var(--ink-line); margin:11px 0; }
.ccard__row--total{ font-size:14px; color:var(--ink); font-weight:600; }
.ccard__row--total b{ font-family:var(--display); font-size:17px; font-weight:800; letter-spacing:-.02em; }
.ccard__cta{
  display:block; margin-top:12px; text-align:center; background:var(--navy); color:#fff;
  font-size:13.5px; font-weight:700; padding:11px; border-radius:10px;
}

.sim__composer{ display:flex; align-items:center; gap:9px; padding:12px 14px 9px; border-top:1px solid var(--ink-line); }
.sim__input{
  flex:1; min-width:0; display:flex; align-items:center;
  border:1px solid var(--ink-line); border-radius:999px; padding:9px 16px;
  font-size:13.5px; color:var(--ink-2); min-height:38px; background:var(--card-2);
}
#typed{ white-space:nowrap; overflow:hidden; }
.caret{ width:1.5px; height:15px; background:var(--blue-500); margin-left:2px; animation:caret 1s steps(1) infinite; flex:0 0 1.5px; }
@keyframes caret{ 0%,50%{ opacity:1 } 51%,100%{ opacity:0 } }
.sim__send{
  width:36px; height:36px; border-radius:50%; flex:0 0 36px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--blue-500), var(--navy));
  box-shadow:0 8px 18px -10px rgba(27,75,192,.9);
}
.sim__send svg{ width:15px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sim__foot{ text-align:center; font-size:10px; color:var(--ink-3); padding-bottom:11px; letter-spacing:.03em; }

/* trust bar */
.trustbar{
  margin-top:clamp(48px,6vw,84px); padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  position:relative; z-index:1;
}
.trustbar__label{ font-size:13.5px; color:var(--w-42); }
.trustbar__stats{ display:flex; flex-wrap:wrap; gap:14px 40px; }
.trustbar__stats li{ display:flex; align-items:baseline; gap:8px; }
.trustbar__stats b{
  font-family:var(--display); font-size:22px; font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.trustbar__stats span{ font-size:13.5px; color:var(--w-42); }

/* ── problem ───────────────────────────────────────────────── */
.problem{ padding:clamp(72px,9vw,132px) 0 clamp(60px,7vw,96px); }
.problem__grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,5vw,72px); align-items:start;
}
.figure{
  font-family:var(--display); font-weight:800; color:var(--lime);
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
.problem__src{ margin-top:22px; font-size:13px; color:var(--w-42); }
.problem__list{ border-top:1px solid var(--line); padding-top:4px; }
.problem__list li{
  border-bottom:1px solid var(--line-2); padding:13px 0; font-size:16px; color:var(--w-72);
  display:flex; align-items:center; gap:12px;
}
.problem__list li::before{
  content:""; width:8px; height:8px; flex:0 0 8px; border-radius:50%;
  border:1.5px solid var(--teal); opacity:.7;
}
.problem__answer{
  margin-top:clamp(44px,5vw,72px); border-top:1px solid var(--line); padding-top:30px;
}
.problem__answer p{
  font-family:var(--display); font-weight:600; letter-spacing:-.022em;
  font-size:clamp(20px,2.5vw,30px); line-height:1.3; max-width:30ch; color:var(--w-58);
}
.problem__answer strong{ color:var(--w); font-weight:800; }

/* ── bento ─────────────────────────────────────────────────── */
.what{ padding:clamp(72px,9vw,120px) 0; }
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cell{
  grid-column:span 2;
  border:1px solid var(--line); border-radius:var(--r); background:var(--glass);
  padding:26px 24px 0; display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .3s, background .3s, transform .4s var(--ease);
  backdrop-filter:blur(6px);
}
.cell:hover{ border-color:rgba(255,255,255,.3); background:var(--glass-hi); transform:translateY(-3px); }
.cell--lg{ grid-column:span 2; }
.cell__body h3{
  font-size:clamp(19px,1.6vw,23px); letter-spacing:-.028em; line-height:1.2; margin-bottom:10px;
}
.cell__body p{ font-size:15px; color:var(--w-58); max-width:44ch; }
.cell__ui{ margin-top:auto; padding:24px 0 26px; }

/* white product-UI panel inside a glass cell */
.cell__ui--panel{
  background:var(--card); color:var(--ink); border-radius:13px; padding:14px;
  margin-bottom:24px; box-shadow:0 18px 34px -22px rgba(2,8,30,.8);
}

.mini-bubble{
  display:inline-block; background:var(--card-2); border-radius:12px 12px 12px 4px;
  padding:8px 12px; font-size:13.5px; max-width:92%;
}
.mini-bubble--user{ background:var(--blue-600); color:#fff; border-radius:12px 12px 4px 12px; float:right; clear:both; margin-bottom:10px; }
.cell__ui--lang{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.cell__ui--lang .mini-bubble{ float:none; margin:0; background:rgba(255,255,255,.12); color:var(--w); }
.cell__ui--lang .mini-bubble--user{ align-self:flex-end; background:var(--blue-hi); color:#fff; }
.mini-cards{ display:flex; gap:8px; clear:both; }
.mini-card{
  flex:1; min-width:0; border:1px solid var(--ink-line); border-radius:11px; background:#fff;
  padding:12px 8px; text-align:center;
}
.mini-card svg{ width:30px; height:30px; color:var(--blue-700); opacity:.9; }
.mini-card b{ display:block; font-size:11.5px; font-weight:600; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-card i{ font-style:normal; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

.cart-line{
  display:flex; align-items:center; gap:11px; border:1px solid var(--ink-line);
  border-radius:11px; padding:10px 12px; background:#fff;
}
.cart-line__img{ width:38px; height:38px; border-radius:8px; background:var(--card-2); display:grid; place-items:center; flex:0 0 38px; color:var(--blue-700); }
.cart-line__img svg{ width:22px; }
.cart-line__meta{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.cart-line__meta b{ font-size:13.5px; font-weight:600; }
.cart-line__meta i{ font-style:normal; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.stepper{ margin-left:auto; display:flex; align-items:center; gap:9px; border:1px solid var(--ink-line); border-radius:999px; padding:3px 9px; }
.stepper em{ font-style:normal; color:var(--ink-3); font-size:14px; }
.stepper b{ font-size:12.5px; font-variant-numeric:tabular-nums; }
.cart-total{
  display:flex; justify-content:space-between; align-items:center; padding:11px 2px 0;
  font-size:13px; color:var(--ink-2);
}
.cart-total b{ color:var(--lime-ink); font-variant-numeric:tabular-nums; font-weight:700; }
.cart-cta{
  margin-top:9px; text-align:center; background:var(--navy); color:#fff;
  border-radius:9px; padding:10px; font-size:13.5px; font-weight:600;
}

.order{ background:#fff; border-radius:11px; }
.order__no{ font-size:12.5px; color:var(--ink-3); margin-bottom:14px; font-variant-numeric:tabular-nums; }
.track{ display:flex; align-items:center; }
.track__step{
  flex:1; font-size:10.5px; color:var(--ink-3); text-align:center; position:relative; padding-top:16px;
}
.track__step::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink-line); background:#fff; z-index:1;
}
.track__step::after{
  content:""; position:absolute; top:4px; left:50%; width:100%; height:1.5px; background:var(--ink-line);
}
.track__step:last-child::after{ display:none; }
.track__step.is-done{ color:var(--ink-2); }
.track__step.is-done::before{ background:var(--blue-600); border-color:var(--blue-600); }
.track__step.is-done::after{ background:var(--blue-600); }
.track__step.is-live{ color:var(--lime-ink); font-weight:700; }
.track__step.is-live::before{ background:var(--lime); border-color:var(--lime); box-shadow:0 0 0 4px rgba(155,219,38,.25); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chips li{
  font-size:12.5px; border:1px solid var(--line); border-radius:999px; padding:5px 11px;
  color:var(--w-72); background:rgba(255,255,255,.05);
}
.cell__note{ margin-top:16px; font-size:14px; color:var(--w-58); }
.cell__note b{ font-family:var(--display); font-weight:800; font-size:22px; color:var(--lime); letter-spacing:-.03em; margin-right:5px; }

.cell__ui--swatch{ display:flex; gap:9px; align-items:center; }
.sw{ width:34px; height:34px; border-radius:10px; background:var(--c); box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.sw--more{ background:none; box-shadow:none; border:1px dashed var(--line); display:grid; place-items:center; color:var(--w-42); font-size:15px; }

.handoff{ display:flex; align-items:center; gap:12px; }
.handoff__from,.handoff__to{
  border-radius:999px; padding:7px 15px; font-size:13px; font-weight:600;
}
.handoff__from{ border:1px solid var(--lime); color:var(--lime); }
.handoff__to{ background:var(--teal); color:#062A26; }
.handoff__arrow{ width:26px; flex:0 0 26px; fill:none; stroke:var(--w-42); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.bars{ display:flex; align-items:flex-end; gap:8px; height:104px; }
.bars span{
  flex:1; height:var(--h); background:rgba(255,255,255,.14); border-radius:6px 6px 3px 3px;
  position:relative; display:flex; align-items:flex-end; justify-content:center;
}
.bars span:nth-child(3){ background:var(--lime); }
.bars i{
  position:absolute; bottom:-20px; font-style:normal; font-size:10.5px; color:var(--w-42);
  white-space:nowrap;
}
.bars span:nth-child(3) i{ color:var(--lime); font-weight:600; }
.cell:has(.bars) .cell__ui{ padding-bottom:46px; }

/* ── comparison ────────────────────────────────────────────── */
.vs{ padding:0 0 clamp(72px,9vw,120px); }
.vs__table{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--glass); backdrop-filter:blur(6px);
}
.vs__row{
  display:grid; grid-template-columns:minmax(0,2.1fr) repeat(3, minmax(0,1fr));
  align-items:center; border-top:1px solid var(--line-2);
}
.vs__row:first-child{ border-top:0; }
.vs__what{ padding:16px 22px; font-size:15.5px; color:var(--w-72); }
.vs__col{ padding:16px 12px; text-align:center; font-size:13.5px; }
.vs__col--win{ background:rgba(155,219,38,.08); box-shadow:inset 1px 0 0 rgba(155,219,38,.22), inset -1px 0 0 rgba(155,219,38,.22); }
.vs__row--head{ background:rgba(255,255,255,.05); }
.vs__row--head .vs__col{
  font-family:var(--display); font-weight:700; font-size:14px; color:var(--w-72);
  padding-top:18px; padding-bottom:18px;
}
.vs__row--head .vs__col--win{ color:var(--lime); }
.vs__col i{ font-style:normal; display:inline-block; }
.vs__col .yes{ color:var(--lime); font-weight:700; font-size:15px; }
.vs__col .no{ color:var(--w-42); }
.vs__col .part{ color:var(--w-58); font-size:12.5px; }
.vs__foot{ margin-top:22px; font-size:14.5px; color:var(--w-58); }

/* ── mid-page cta ──────────────────────────────────────────── */
.midcta{ padding:clamp(20px,3vw,40px) 0 clamp(72px,9vw,120px); }
.midcta__in{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,5vw,64px); align-items:center;
  border:1px solid var(--line); border-radius:clamp(16px,2vw,24px);
  background:linear-gradient(120deg, rgba(43,98,222,.28), rgba(255,255,255,.05));
  padding:clamp(32px,4vw,52px);
}
.midcta__copy p{ margin-top:16px; color:var(--w-72); font-size:16.5px; max-width:46ch; }
.midcta__actions{ display:flex; flex-direction:column; gap:10px; }
.midcta__fine{ text-align:center; font-size:13px; color:var(--w-42); margin-top:4px; }

/* ── how ───────────────────────────────────────────────────── */
.how{
  background:linear-gradient(150deg, rgba(9,20,58,.9), rgba(6,13,42,.94));
  border:1px solid var(--line-2);
  padding:clamp(72px,9vw,124px) 0; margin:clamp(20px,3vw,40px) auto;
  border-radius:clamp(16px,2vw,28px);
  width:calc(100% - var(--pad) * 2); max-width:var(--wrap);
  position:relative; overflow:hidden;
}
.how::before{
  content:""; position:absolute; inset:auto 0 -40% 0; height:70%; pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%, rgba(43,98,222,.4), transparent 70%);
}
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px);
  border-top:1px solid var(--line); padding-top:36px; position:relative; z-index:1;
}
.step__no{
  font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.06em;
  color:var(--lime); display:block; margin-bottom:18px; font-variant-numeric:tabular-nums;
}
.step h3{ font-size:clamp(20px,2vw,26px); margin-bottom:12px; letter-spacing:-.028em; }
.step p{ font-size:15.5px; color:var(--w-58); max-width:34ch; }
.how__perf{
  margin-top:clamp(44px,5vw,68px); padding-top:26px; border-top:1px solid var(--line);
  font-size:15px; color:var(--w-58); max-width:70ch; position:relative; z-index:1;
}
.how__perf-tag{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin-right:12px;
  color:var(--teal); vertical-align:middle; font-weight:600;
}

/* ── quotes ────────────────────────────────────────────────── */
.quotes{ padding:clamp(72px,9vw,124px) 0; }
.quote-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.quote{
  margin:0; border:1px solid var(--line); border-radius:var(--r); padding:26px 22px;
  background:var(--glass); display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  transition:transform .4s var(--ease), border-color .3s, background .3s;
}
.quote:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.3); background:var(--glass-hi); }
.quote blockquote{
  margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.022em;
  font-size:clamp(17px,1.5vw,20px); line-height:1.3;
}
.quote figcaption{ font-size:13px; color:var(--w-72); font-weight:600; }
.quote figcaption span{ color:var(--w-42); font-weight:400; }

/* ── pricing ───────────────────────────────────────────────── */
.pricing{ padding:0 0 clamp(72px,9vw,124px); }
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch; }
.plan{
  border-radius:var(--r); background:var(--card); color:var(--ink);
  padding:28px 24px; display:flex; flex-direction:column; position:relative;
  box-shadow:0 24px 50px -34px rgba(2,8,30,.8);
  transition:transform .4s var(--ease);
}
.plan:hover{ transform:translateY(-4px); }
.plan--hero{
  background:linear-gradient(160deg, #143C97, #0B1F55 85%);
  color:var(--w); box-shadow:0 34px 64px -30px rgba(2,8,30,.95), 0 0 0 1px rgba(155,219,38,.4);
}
.plan__flag{
  position:absolute; top:-1px; right:20px; transform:translateY(-50%);
  background:var(--lime); color:#0A2103; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 12px; border-radius:999px;
}
.plan__name{ font-size:17px; letter-spacing:-.02em; font-weight:700; }
.plan__price{
  font-family:var(--display); font-weight:800; font-size:clamp(38px,3.6vw,46px);
  letter-spacing:-.04em; line-height:1; margin-top:16px; font-variant-numeric:tabular-nums;
}
.plan__price .cur{ font-size:.5em; vertical-align:.5em; margin-right:1px; font-weight:700; }
.plan__per{ font-size:13px; color:var(--ink-3); margin-top:6px; }
.plan--hero .plan__per{ color:var(--w-42); }
.plan__for{ font-size:14px; color:var(--ink-2); margin-top:18px; padding-bottom:20px; border-bottom:1px solid var(--ink-line); }
.plan--hero .plan__for{ color:var(--w-72); border-color:var(--line); }
.plan__list{ padding:20px 0 26px; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan__list li{ font-size:14.5px; color:var(--ink-2); padding-left:16px; position:relative; }
.plan__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--lime);
}
.plan__list b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.plan--hero .plan__list li{ color:var(--w-72); }
.plan--hero .plan__list b{ color:var(--w); }
.plan__tag{
  position:absolute; top:-1px; left:24px; transform:translateY(-50%);
  background:var(--card-3); color:var(--blue-700); font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
}
.plan__roi{
  margin-top:14px; font-size:13.5px; line-height:1.45; color:var(--ink-2);
  border-left:2px solid var(--lime); padding-left:11px;
}
.plan__roi b{ color:var(--ink); font-weight:700; }
.plan--hero .plan__roi{ color:var(--w-72); }
.plan--hero .plan__roi b{ color:var(--w); }
.plan__for{ margin-top:16px; }

.guarantee{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:28px; font-size:14px; color:var(--w-72);
}
.guarantee li{ display:flex; align-items:center; gap:9px; }
.guarantee i{
  width:16px; height:16px; flex:0 0 16px; border-radius:50%;
  background:rgba(155,219,38,.16); position:relative;
}
.guarantee i::after{
  content:""; position:absolute; left:5px; top:4px; width:4px; height:7px;
  border:solid var(--lime); border-width:0 1.6px 1.6px 0; transform:rotate(42deg);
}
.plans__foot{ margin-top:22px; text-align:center; font-size:13.5px; color:var(--w-42); max-width:66ch; margin-inline:auto; }

/* ── faq ───────────────────────────────────────────────────── */
.faq{ padding:0 0 clamp(72px,9vw,124px); }
.faq__grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,72px); align-items:start;
}
.faq__head{ position:sticky; top:96px; }
.faq__contact{ margin-top:22px; font-size:15px; color:var(--w-58); }
.faq__contact a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
.faq__list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer; padding:20px 0; display:flex; align-items:center; gap:18px;
  font-family:var(--display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(17px,1.5vw,20px); line-height:1.3;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary span{ flex:1; }
.qa summary i{ position:relative; width:14px; height:14px; flex:0 0 14px; }
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--w); transform:translateY(-50%);
  transition:transform .3s var(--ease), opacity .3s, background .3s;
}
.qa summary i::after{ transform:translateY(-50%) rotate(90deg); }
.qa[open] summary i::after{ transform:translateY(-50%) rotate(0deg); opacity:0; }
.qa[open] summary{ color:var(--lime); }
.qa[open] summary i::before{ background:var(--lime); }
.qa__body{ padding:0 40px 24px 0; animation:fade .35s var(--ease) both; }
.qa__body p{ font-size:16px; color:var(--w-58); max-width:62ch; }
@keyframes fade{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }

/* ── final cta ─────────────────────────────────────────────── */
.cta{
  padding:clamp(76px,10vw,140px) 0;
  position:relative; overflow:hidden;
  border-top:1px solid var(--line-2);
}
.cta::before{
  content:""; position:absolute; inset:auto 0 -30% 0; height:78%; pointer-events:none;
  background:radial-gradient(52% 100% at 50% 100%, rgba(43,98,222,.55), transparent 68%);
}
.cta__in{ position:relative; z-index:1; text-align:center; }
.cta__mark{ width:64px; height:64px; border-radius:16px; margin:0 auto 28px; display:block; box-shadow:0 16px 40px -14px rgba(0,0,0,.8); }
.cta__h{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px,5vw,66px); line-height:1.05; letter-spacing:-.035em;
}
.cta__sub{ margin-top:22px; font-size:clamp(17px,1.5vw,20px); color:var(--w-58); }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:38px; }
.cta__fine{ margin-top:24px; font-size:13.5px; color:var(--w-42); }
.cta__trust{
  margin-top:30px; padding-top:24px; font-size:14px; color:var(--w-58);
  border-top:1px solid var(--line-2); max-width:52ch; margin-inline:auto;
}
.cta__trust b{ color:var(--w); font-weight:600; }

/* ── footer ────────────────────────────────────────────────── */
/* deliberately link-free: the only way off this page should be the App Store */
.foot{ background:var(--navy-deep); }
.foot__in{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px;
  padding-block:26px calc(26px + env(safe-area-inset-bottom));
}
.foot .brand__mark{ width:28px; height:28px; flex-basis:28px; border-radius:8px; }
.foot .brand__name{ font-size:17px; }
.foot__note{ font-size:13.5px; color:var(--w-42); }
.foot__copy{ margin-left:auto; font-size:13px; color:var(--w-42); }

/* ── sticky mobile bar ─────────────────────────────────────── */
.mobar{
  position:fixed; left:50%; translate:-50% 0; bottom:16px; z-index:90;
  max-width:calc(100% - 24px);
  display:flex; align-items:center; gap:14px;
  background:rgba(9,20,58,.92); border:1px solid var(--line); border-radius:999px;
  padding:8px 10px 8px 22px; font-size:13.5px; color:var(--w-72);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.85);
  transform:translateY(180%); transition:transform .45s var(--ease);
}
.mobar.is-in{ transform:translateY(0); }
.mobar__txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobar__txt b{ color:var(--w); font-weight:600; }
.mobar__x{
  background:none; border:0; cursor:pointer; color:var(--w-42); font-size:13px;
  width:26px; height:26px; border-radius:50%; flex:0 0 26px; line-height:1;
  transition:color .2s, background .2s;
}
.mobar__x:hover{ color:var(--w); background:rgba(255,255,255,.1); }

/* ── reveal ────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) var(--d,0s), transform .7s var(--ease) var(--d,0s);
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1080px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .cell,.cell--lg{ grid-column:span 1; }
  .quote-grid{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:repeat(2,1fr); }
  .spark--a,.spark--b{ display:none; }
}

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:grid; }
  .nav__mobile[data-open]{ display:flex; }
  .brand__by{ display:none; }
  .hero__inner{ grid-template-columns:1fr; }
  .sim{ max-width:460px; margin-inline:auto; width:100%; }

  .problem__grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:34px; }
  .faq__grid{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .spark--c{ display:none; }
  .midcta__in{ grid-template-columns:1fr; }
  .vs__row{ grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr)); }
  .vs__what,.vs__col{ padding-inline:12px; }
  .vs__what{ font-size:14.5px; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .bento,.quote-grid,.plans{ grid-template-columns:1fr; }
  .trustbar{ flex-direction:column; align-items:flex-start; }
  .trustbar__stats{ gap:12px 28px; }
  .hero__actions .btn{ flex:1; }
  .cta__actions .btn{ width:100%; }
  .how{ border-radius:14px; }
  .plan--hero{ order:-1; }
  .plan__flag{ right:auto; left:24px; }
  .plan__tag{ left:auto; right:24px; }

  /* comparison table collapses to one labelled card per row */
  .vs__row--head{ display:none; }
  .vs__row{ grid-template-columns:1fr; padding:14px 16px; }
  .vs__what{ padding:0 0 10px; font-weight:600; color:var(--w); font-size:15px; }
  .vs__col{
    display:flex; align-items:center; justify-content:space-between;
    padding:5px 0; text-align:right;
  }
  .vs__col::before{ content:attr(data-m); color:var(--w-42); font-size:12.5px; }
  .vs__col--win{ background:none; box-shadow:none; }
  .vs__col--win::before{ color:var(--lime); }

  .mobar{ left:12px; right:12px; translate:none; max-width:none; padding-left:18px; }
  .guarantee{ justify-content:flex-start; gap:10px 18px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}