/* ==========================================================================
   YouBee.ai Major Landing Pages
   Mobile-first design system. Yellow (NatGeo) on near-black.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --y:#FFCC00;            /* NatGeo yellow */
  --y-lt:#FFE066;
  --y-dk:#E0B000;
  --y-ink:#1A1400;

  --ink:#09090B;
  --ink-2:#101014;
  --ink-3:#17171C;
  --ink-4:#1F1F26;
  --line-d:rgba(255,255,255,.10);
  --line-l:rgba(10,10,14,.10);

  --paper:#FFFFFF;
  --paper-2:#F6F6F8;
  --paper-3:#EDEDF0;

  --tx:#0B0B0E;
  --tx-mut:#64646F;
  --tx-inv:#FAFAFA;
  --tx-inv-mut:#A3A3AE;

  --ok:#1FA971;
  --wa:#25D366;

  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
  --wrap:1180px;
  --gut:20px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --sh-1:0 1px 2px rgba(10,10,14,.06), 0 4px 14px rgba(10,10,14,.06);
  --sh-2:0 10px 34px rgba(10,10,14,.12);
  --sh-y:0 10px 30px rgba(255,204,0,.30);

  --nav-h:72px;
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font);background:var(--paper);color:var(--tx);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lp-locked{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;line-height:1.14;letter-spacing:-.02em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--y);outline-offset:3px;border-radius:4px}
/* Safety net: an inline icon that no rule sizes must never balloon to fill its box. */
svg:not([class]){width:20px;height:20px;flex:none}
::selection{background:var(--y);color:var(--y-ink)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding:60px 0;position:relative}
.sec-tight{padding:44px 0}
@media (min-width:900px){
  .sec{padding:104px 0}
  .sec-tight{padding:72px 0}
  :root{--gut:28px}
}
@media (min-width:980px){
  :root{--nav-h:84px}
}
.dark{background:var(--ink);color:var(--tx-inv)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.soft{background:var(--paper-2)}
.ctr{text-align:center}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Type ---------- */
.h-xl{font-size:clamp(2.05rem,8.2vw,4.4rem);font-weight:800;letter-spacing:-.035em}
.h-lg{font-size:clamp(1.62rem,5.6vw,2.9rem);letter-spacing:-.03em}
.h-md{font-size:clamp(1.22rem,3.6vw,1.6rem)}
.lead{font-size:clamp(1rem,2.9vw,1.16rem);color:var(--tx-mut);line-height:1.62}
.dark .lead{color:var(--tx-inv-mut)}
.mut{color:var(--tx-mut)}
.dark .mut{color:var(--tx-inv-mut)}
.hl{color:var(--y)}
/* yellow marker underline */
.mark{position:relative;white-space:nowrap}
.mark::after{
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.36em;
  background:var(--y);z-index:-1;border-radius:2px;
  transform-origin:left;transition:transform .7s var(--ease) .25s;
}
.js-ready .mark::after{transform:scaleX(0)}
.is-in .mark::after{transform:scaleX(1)}
.dark .mark{color:#0B0B0E}
.dark .mark::after{z-index:-1}

/* Section eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-mut);margin-bottom:14px;
}
.dark .eyebrow{color:var(--y)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--y);border-radius:2px}

.sec-head{max-width:720px;margin-bottom:34px}
.sec-head.ctr{margin-inline:auto}
.sec-head .lead{margin-top:14px}
@media (min-width:900px){.sec-head{margin-bottom:52px}}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--y);--fg:var(--y-ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);
  font-weight:800;font-size:.97rem;letter-spacing:-.01em;line-height:1;
  text-align:center;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:18px;height:18px;flex:none}
.btn::after{ /* sheen */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 48%,transparent 76%);
  transform:translateX(-130%);transition:transform .75s var(--ease);
}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-y)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-lg{padding:18px 30px;font-size:1.04rem}
.btn-block{width:100%}
.btn-ghost{--bg:transparent;--fg:var(--tx);box-shadow:inset 0 0 0 2px var(--line-l)}
.btn-ghost:hover{--bg:var(--paper-3);box-shadow:inset 0 0 0 2px var(--line-l)}
.dark .btn-ghost{--fg:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.dark .btn-ghost:hover{--bg:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}
.btn-wa{--bg:var(--wa);--fg:#05311A}
.btn-wa:hover{box-shadow:0 10px 30px rgba(37,211,102,.34)}
.btn-dark{--bg:var(--ink);--fg:#fff}
.btn-dark:hover{box-shadow:0 10px 30px rgba(9,9,11,.3)}
.btn[disabled]{opacity:.6;pointer-events:none}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:420px){
  .btn-row>.btn{flex:1 1 100%}
}

/* pulse ring on primary hero CTA */
.btn-pulse::before{
  content:"";position:absolute;inset:-4px;border-radius:inherit;z-index:-2;
  border:2px solid var(--y);opacity:0;
  animation:ring 2.8s var(--ease) infinite;
}
@keyframes ring{0%{opacity:.7;transform:scale(.94)}70%{opacity:0;transform:scale(1.14)}100%{opacity:0}}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:var(--r-pill);
  font-size:.8rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  background:var(--paper-3);color:var(--tx);
}
.chip svg{width:15px;height:15px;color:var(--y-dk);flex:none}
.dark .chip{background:rgba(255,255,255,.07);color:#EDEDF2;box-shadow:inset 0 0 0 1px var(--line-d)}
.dark .chip svg{color:var(--y)}
.chip-y{background:var(--y);color:var(--y-ink)}
.dark .chip-y{background:var(--y);color:var(--y-ink);box-shadow:none}
.dark .chip-y svg{color:var(--y-ink)}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 11px;border-radius:var(--r-pill);
  background:rgba(255,204,0,.14);color:var(--y);
  box-shadow:inset 0 0 0 1px rgba(255,204,0,.32);
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--y);flex:none;position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--y);animation:pip 1.9s ease-out infinite}
@keyframes pip{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}

/* ==========================================================================
   NAV
   ========================================================================== */
.scrollbar{position:fixed;top:0;left:0;height:3px;background:var(--y);width:0;z-index:120;transition:width .1s linear}

.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:var(--paper);
  border-bottom:1px solid var(--line-l);
  transition:box-shadow .25s;
}
.nav.is-stuck{box-shadow:0 1px 18px rgba(10,10,14,.11)}
.nav-in{height:100%;display:flex;align-items:center;gap:16px}
.nav-logo{display:flex;align-items:center;flex:none}
.nav-logo img{height:38px;width:auto}
@media (min-width:980px){
  .nav-logo img{height:44px}
}
.nav-links{display:none;margin-left:auto;gap:4px}
@media (min-width:980px){.nav-links{display:flex;align-items:center}}
.nav-links a{
  padding:9px 13px;border-radius:var(--r-pill);font-size:.9rem;font-weight:700;
  color:var(--tx-mut);transition:color .2s, background .2s;
}
.nav-links a:hover{color:var(--tx);background:var(--paper-3)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:9px}
@media (min-width:980px){.nav-cta{margin-left:14px}}
.nav-cta .btn{padding:12px 18px;font-size:.88rem;min-height:44px}
/* WhatsApp is the contact method that actually converts, so it leads. */
.nav-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 15px;min-height:44px;min-width:44px;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:800;color:var(--tx);
  box-shadow:inset 0 0 0 1.5px rgba(37,211,102,.45);
  transition:background .25s, box-shadow .25s, color .25s;
}
.nav-wa svg{width:18px;height:18px;color:var(--wa);transition:transform .3s var(--ease)}
.nav-wa:hover{background:rgba(37,211,102,.1);box-shadow:inset 0 0 0 1.5px var(--wa)}
.nav-wa:hover svg{transform:scale(1.12) rotate(-6deg)}
@media (max-width:560px){.nav-wa span{display:none}.nav-wa{padding:10px 11px}}


/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;background:var(--ink);color:var(--tx-inv);
  padding:48px 0 60px;overflow:hidden;isolation:isolate;
}
@media (min-width:900px){.hero{padding:76px 0 96px}}
/* Flat engineering grid, no gradients, no glow. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
}
/* One solid yellow rule anchoring the hero to the stats band. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--y);z-index:0;
}

.hero-grid{display:grid;gap:34px}
@media (min-width:980px){
  .hero-grid{grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
}
.hero h1{margin:16px 0 0}
.hero .lead{margin-top:18px;max-width:34em}
.hero-actions{margin-top:26px}

/* trust row under CTA */
.hero-trust{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;color:var(--y)}
.hero-trust b{color:#fff}
.hero-trust span{font-size:.86rem;color:var(--tx-inv-mut)}

/* Flat poster composition: solid yellow plate + offset outline. */
.hero-art{
  position:relative;aspect-ratio:1/1;width:100%;
  max-width:300px;margin:8px auto 0;
}
@media (min-width:980px){.hero-art{max-width:400px;margin-top:0}}
/* offset outline, drawn in */
.frame-svg{position:absolute;inset:12% -2% -2% 12%;overflow:visible}
.frame-svg rect{
  fill:none;stroke:rgba(255,255,255,.28);stroke-width:3;
  stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600);
  animation:draw 1.3s var(--ease) .3s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
/* solid yellow plate, glyph knocked out in black */
.art-core{
  position:absolute;inset:0 12% 12% 0;border-radius:4px;
  background:var(--y);display:grid;place-items:center;
}
.art-core .glyph{width:44%;height:44%;color:var(--ink);stroke-width:1.5}
.art-pill{
  position:absolute;display:inline-flex;align-items:center;gap:10px;
  padding:13px 17px;border-radius:12px;
  background:var(--ink-3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 32px rgba(0,0,0,.45);
  font-size:.86rem;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap;
  /* Each pill drifts on its own loop and fades in on load. */
  animation:pillIn .6s var(--ease) backwards, drift 7s var(--ease-io) infinite alternate;
  will-change:transform;
}
.art-pill svg{width:18px;height:18px;color:var(--y);flex:none}
/* The icon gets a slow pulse so the pill reads as live, not static. */
.art-pill svg{animation:pillGlow 3.2s var(--ease-io) infinite}

.art-pill:nth-of-type(1){
  top:-5%;right:-3%;
  animation-delay:.25s, 0s;
}
.art-pill:nth-of-type(2){
  bottom:30%;right:-7%;
  animation-delay:.4s, -2.4s;
}
.art-pill:nth-of-type(3){
  bottom:1%;left:-5%;
  animation-delay:.55s, -4.8s;
}

@media (min-width:980px){
  .art-pill{font-size:.98rem;padding:15px 20px;gap:11px;border-radius:14px}
  .art-pill svg{width:21px;height:21px}
}
/* Keep all three visible on small phones by tucking them in a little. */
@media (max-width:420px){
  .art-pill{font-size:.78rem;padding:11px 13px;gap:8px}
  .art-pill svg{width:16px;height:16px}
  .art-pill:nth-of-type(1){top:-4%;right:0}
  .art-pill:nth-of-type(2){bottom:32%;right:-2%}
  .art-pill:nth-of-type(3){bottom:0;left:-2%}
}

@keyframes pillIn{
  from{opacity:0;transform:translateY(14px) scale(.9)}
  to{opacity:1;transform:none}
}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) rotate(-.6deg)}
  50% {transform:translate3d(3px,-9px,0) rotate(.5deg)}
  100%{transform:translate3d(-2px,-15px,0) rotate(-.3deg)}
}
@keyframes pillGlow{
  0%,100%{opacity:.75;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.14)}
}

/* ==========================================================================
   STATS STRIP
   ========================================================================== */
.strip{background:var(--y);color:var(--y-ink);padding:32px 0;position:relative;overflow:hidden}
.strip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 14px}
@media (min-width:760px){.strip-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.stat{text-align:center}
.stat b{
  display:block;font-size:clamp(2.6rem,11vw,3.6rem);font-weight:800;
  letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;
}
/* Direct child only: the counter <span> lives inside <b> and must inherit. */
.stat > span{
  display:block;margin-top:10px;font-size:.88rem;font-weight:700;
  line-height:1.3;opacity:.78;letter-spacing:-.01em;
}
.stat b span{font-size:inherit;font-weight:inherit;letter-spacing:inherit;opacity:1}
@media (min-width:760px){.stat > span{font-size:.84rem}}

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:1fr}
.g-3{grid-template-columns:1fr}
.g-4{grid-template-columns:1fr}
@media (min-width:600px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:18px}
}

.card{
  position:relative;padding:24px;border-radius:var(--r);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-l);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-2)}
.card h3{font-size:1.06rem;margin-bottom:8px}
.card p{font-size:.92rem;color:var(--tx-mut);line-height:1.6}
.dark .card{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.dark .card p{color:var(--tx-inv-mut)}
.dark .card:hover{box-shadow:inset 0 0 0 1px rgba(255,204,0,.3), 0 20px 46px rgba(0,0,0,.4)}
/* yellow corner accent */
/* ::before, not ::after, so the pointer spotlight can own ::after. */
.card::before{
  content:"";position:absolute;top:0;left:0;width:0;height:3px;background:var(--y);
  z-index:2;transition:width .45s var(--ease);
}
.card:hover::before{width:100%}

.ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--y);color:var(--y-ink);margin-bottom:16px;flex:none;
  transition:transform .4s var(--ease);
}
.ico svg{width:23px;height:23px}
.card:hover .ico{transform:rotate(-7deg) scale(1.07)}
.ico-soft{background:rgba(255,204,0,.16);color:var(--y-dk)}
.dark .ico-soft{background:rgba(255,204,0,.14);color:var(--y)}

/* numbered card */
.num{
  position:absolute;top:18px;right:20px;font-size:2.4rem;font-weight:800;
  color:var(--line-l);letter-spacing:-.05em;line-height:1;pointer-events:none;
}
.dark .num{color:rgba(255,255,255,.08)}

/* ==========================================================================
   CURRICULUM (tabs + projects + weeks)
   ========================================================================== */
.tabs{
  display:inline-flex;padding:5px;gap:4px;border-radius:var(--r-pill);
  background:var(--paper-3);margin-bottom:26px;
}
.dark .tabs{background:rgba(255,255,255,.07)}
.tab{
  padding:11px 20px;border:0;border-radius:var(--r-pill);background:transparent;
  font-weight:800;font-size:.9rem;color:var(--tx-mut);cursor:pointer;
  transition:color .25s, background .25s, box-shadow .25s;white-space:nowrap;
}
.dark .tab{color:var(--tx-inv-mut)}
.tab[aria-selected="true"]{background:var(--y);color:var(--y-ink);box-shadow:0 4px 14px rgba(255,204,0,.35)}
.tabpanel[hidden]{display:none}

/* project tiles */
.proj{
  display:flex;gap:15px;align-items:flex-start;padding:19px;border-radius:var(--r);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-l);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dark .proj{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.proj:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,204,0,.4), var(--sh-2)}
.proj h4{font-size:.99rem;margin-bottom:5px}
.proj p{font-size:.86rem;color:var(--tx-mut);line-height:1.55}
.dark .proj p{color:var(--tx-inv-mut)}
.proj-ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:rgba(255,204,0,.17);color:var(--y-dk);
}
.dark .proj-ico{background:rgba(255,204,0,.14);color:var(--y)}
.proj-ico svg{width:21px;height:21px}
/* game cards w/ thumbnail: the whole card is the tap target */
.proj-img{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line-l);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dark .proj-img{box-shadow:inset 0 0 0 1px var(--line-d)}
.proj-img:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,204,0,.5), var(--sh-2)}
.proj-img:active{transform:translateY(-1px) scale(.995)}
/* Only the media is aspect-locked; the body must never be clipped. */
.proj-media{
  position:relative;display:block;aspect-ratio:16/10;
  overflow:hidden;background:#0C0C10;flex:none;
}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj-img:hover .proj-media img{transform:scale(1.06)}
.proj-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1}
/* The card paints its own dark background (--ink-3) whatever the section tone
   around it, so its text colours belong to the card. They used to be inherited
   from the section, which left the title near-black on dark once the
   curriculum section became a light one. */
.proj-img h4{font-size:.97rem;margin-bottom:5px;color:#fff}
.proj-img p{font-size:.84rem;color:var(--tx-inv-mut);line-height:1.5}
.proj-tag{
  position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--y);color:var(--y-ink);font-size:.68rem;font-weight:800;letter-spacing:.04em;
  z-index:2;
}
/* big centred play affordance over the thumbnail */
.proj-media::after{
  content:"";position:absolute;inset:0;background:rgba(9,9,11,.35);
  opacity:0;transition:opacity .3s var(--ease);
}
.proj-img:hover .proj-media::after{opacity:1}
.proj-note{
  display:block;margin-top:7px;font-size:.73rem;font-weight:700;
  color:var(--tx-inv-mut);letter-spacing:-.01em;
}

/* week accordion */
.weeks{display:grid;gap:9px}
.wk{
  border-radius:var(--r-sm);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-l);overflow:hidden;
  transition:box-shadow .3s;
}
.dark .wk{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.wk.open{box-shadow:inset 0 0 0 1.5px var(--y)}
.wk-btn{
  width:100%;display:flex;align-items:center;gap:13px;
  padding:17px 18px;background:transparent;border:0;cursor:pointer;text-align:left;
}
.wk-n{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--paper-3);color:var(--tx-mut);font-size:.78rem;font-weight:800;
  transition:background .3s, color .3s;
}
.dark .wk-n{background:rgba(255,255,255,.08);color:var(--tx-inv-mut)}
.wk.open .wk-n{background:var(--y);color:var(--y-ink)}
.wk-t{flex:1;font-size:.94rem;font-weight:800;letter-spacing:-.015em}
.wk-c{flex:none;width:19px;height:19px;color:var(--tx-mut);transition:transform .35s var(--ease)}
.wk.open .wk-c{transform:rotate(180deg);color:var(--y-dk)}
.dark .wk.open .wk-c{color:var(--y)}
.wk-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.wk.open .wk-body{grid-template-rows:1fr}
.wk-body>div{overflow:hidden}
.wk-body ul{padding:0 18px 18px 61px;display:grid;gap:9px}
@media (max-width:520px){.wk-body ul{padding-left:20px}}
.wk-body li{position:relative;padding-left:24px;font-size:.89rem;color:var(--tx-mut);line-height:1.5}
.dark .wk-body li{color:var(--tx-inv-mut)}
.wk-body li::before{
  content:"";position:absolute;left:4px;top:.5em;width:7px;height:7px;border-radius:2px;
  background:var(--y);
}

/* ==========================================================================
   MARQUEE (tech stack)
   ========================================================================== */
.marquee{
  position:relative;overflow:hidden;padding:16px 0;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-t{display:flex;width:max-content;animation:slide 32s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
.marquee-t ul{display:flex;align-items:center;gap:12px;padding-right:12px}
.marquee-t li{
  padding:10px 18px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:.86rem;font-weight:800;letter-spacing:-.01em;
  background:rgba(255,255,255,.06);color:#E6E6EC;
  box-shadow:inset 0 0 0 1px var(--line-d);
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ==========================================================================
   PRICING
   ========================================================================== */
.eb-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:15px 18px;border-radius:var(--r);margin-bottom:24px;
  background:linear-gradient(100deg,rgba(255,204,0,.17),rgba(255,204,0,.07));
  box-shadow:inset 0 0 0 1.5px rgba(255,204,0,.42);
  font-size:.9rem;font-weight:600;
}
.eb-bar b{font-weight:800}
.eb-bar > svg{width:21px;height:21px;flex:none;color:var(--y-dk)}
.dark .eb-bar > svg{color:var(--y)}
.eb-bar .chip{background:var(--y);color:var(--y-ink);margin-left:auto}
.eb-bar .chip svg{color:var(--y-ink)}
@media (max-width:620px){.eb-bar .chip{margin-left:0}}

.plans{display:grid;gap:16px;max-width:860px;margin-inline:auto}
@media (min-width:760px){.plans{grid-template-columns:repeat(2,1fr);gap:20px}}
.plan{
  position:relative;padding:28px 24px;border-radius:var(--r-lg);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-1);
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dark .plan{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.plan:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-2)}
.plan-best{box-shadow:inset 0 0 0 2.5px var(--y), 0 18px 46px rgba(255,204,0,.2)}
.dark .plan-best{box-shadow:inset 0 0 0 2.5px var(--y), 0 18px 46px rgba(255,204,0,.14)}
.plan-best:hover{box-shadow:inset 0 0 0 2.5px var(--y), 0 24px 56px rgba(255,204,0,.28)}
/* Sits inside the card: .plan has overflow:hidden for the hover sweep,
   so anything with a negative top would be clipped. */
.plan-flag{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  padding:7px 16px;border-radius:0 0 var(--r-pill) var(--r-pill);
  background:var(--y);color:var(--y-ink);
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  z-index:5;
}
.plan-best{padding-top:46px}
.plan h3{font-size:1.14rem}
.plan-sub{font-size:.87rem;color:var(--tx-mut);margin-top:4px}
.dark .plan-sub{color:var(--tx-inv-mut)}
.price{margin:18px 0 4px;display:flex;align-items:baseline;flex-wrap:wrap;gap:9px}
.price .now{font-size:clamp(2.1rem,8vw,2.9rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.price .per{font-size:.95rem;font-weight:700;color:var(--tx-mut)}
.dark .price .per{color:var(--tx-inv-mut)}
.price .was{font-size:1.1rem;font-weight:700;color:var(--tx-mut);text-decoration:line-through;text-decoration-thickness:2px}
.dark .price .was{color:var(--tx-inv-mut)}
.price .off{
  padding:4px 9px;border-radius:var(--r-pill);background:var(--ok);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.03em;
}
.plan-tot{font-size:.84rem;color:var(--tx-mut);margin-top:2px}
.dark .plan-tot{color:var(--tx-inv-mut)}
.feats{margin:20px 0 24px;display:grid;gap:11px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5}
.feats svg{width:18px;height:18px;color:var(--y-dk);flex:none;margin-top:1px}
.dark .feats svg{color:var(--y)}
.plan .btn{margin-top:auto}
.plan-note{margin-top:12px;font-size:.78rem;color:var(--tx-mut);text-align:center}
.dark .plan-note{color:var(--tx-inv-mut)}

/* guarantee row */
.guards{display:grid;gap:12px;margin-top:28px}
@media (min-width:700px){.guards{grid-template-columns:repeat(3,1fr)}}
.guard{
  display:flex;gap:12px;align-items:flex-start;padding:17px;border-radius:var(--r);
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-l);
}
.dark .guard{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-d)}
.guard svg{width:21px;height:21px;color:var(--y-dk);flex:none;margin-top:2px}
.dark .guard svg{color:var(--y)}
.guard b{display:block;font-size:.92rem;margin-bottom:3px}
.guard p{font-size:.83rem;color:var(--tx-mut);line-height:1.5}
.dark .guard p{color:var(--tx-inv-mut)}

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.cds{display:grid;gap:14px}
@media (min-width:760px){.cds{grid-template-columns:repeat(2,1fr);gap:18px}}
/* Single countdown: one centred column instead of a lonely left half. */
.cds-1{max-width:460px;margin-inline:auto}
@media (min-width:760px){.cds-1{grid-template-columns:1fr}}
.cd{
  padding:22px;border-radius:var(--r-lg);text-align:center;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d);
  position:relative;overflow:hidden;
}
.cd-t{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--y);margin-bottom:16px}
.cd-t svg{width:17px;height:17px}
.cd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.seg{
  padding:13px 4px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line-d);
}
.seg b{
  display:flex;justify-content:center;align-items:flex-end;
  font-family:var(--mono);font-size:clamp(1.3rem,5.4vw,1.85rem);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
/* One .dg per character: a fixed-size window the outgoing digit rolls up out
   of while its replacement rises into place, so only the digits that actually
   changed move and the row never reflows.

   Deliberately transitions, not keyframes. A transition that never gets to run
   (throttled background tab, reduced motion) still leaves the element at its
   resting state, so the digit stays legible. An animation with a fill mode
   would instead freeze the outgoing digit on top of the incoming one. */
.dg{
  position:relative;display:block;width:1ch;height:1em;
  overflow:hidden;font-style:normal;
}
.dg u{
  position:absolute;left:0;right:0;top:0;height:1em;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transform:translateY(0);opacity:1;
  transition:transform .42s var(--ease), opacity .32s linear;
}
.dg u.dg-enter{transform:translateY(105%);opacity:0;transition:none}
.dg u.dg-leave{transform:translateY(-105%);opacity:0}
.seg span{display:block;margin-top:6px;font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-inv-mut)}
.cd-over{font-size:.95rem;font-weight:700;color:var(--y);padding:14px 0}

/* seat meter */
.seats{max-width:520px;margin:26px auto 0;text-align:center}
.meter{height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden;margin:11px 0 9px}
.meter i{
  display:block;height:100%;border-radius:inherit;width:0;
  background:linear-gradient(90deg,var(--y-dk),var(--y));
  width:var(--fill,78%);transition:width 1.4s var(--ease);
}
.js-ready .meter i{width:0}
.js-ready .is-in .meter i{width:var(--fill,78%)}
.seats p{font-size:.84rem;color:var(--tx-inv-mut)}
.seats b{color:var(--y)}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.rating-hero{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;
  padding:22px;border-radius:var(--r-lg);margin-bottom:30px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-1);
}
.dark .rating-hero{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.rating-hero .big{font-size:2.5rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.rating-hero .stars svg{width:19px;height:19px}
.rating-hero small{display:block;font-size:.8rem;color:var(--tx-mut);margin-top:5px}
.dark .rating-hero small{color:var(--tx-inv-mut)}
.rating-bars{flex:1 1 260px;display:grid;gap:7px;min-width:240px}
.rbar{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--tx-mut)}
.dark .rbar{color:var(--tx-inv-mut)}
.rbar b{width:72px;flex:none;font-weight:700}
.rbar i{flex:1;height:7px;border-radius:var(--r-pill);background:var(--paper-3);overflow:hidden;font-style:normal}
.dark .rbar i{background:rgba(255,255,255,.1)}
.rbar i::after{content:"";display:block;height:100%;width:var(--w,90%);background:var(--y);border-radius:inherit;transition:width 1.2s var(--ease)}
.js-ready .rbar i::after{width:0}
.js-ready .is-in .rbar i::after{width:var(--w,90%)}
.rbar em{width:40px;flex:none;text-align:right;font-style:normal;font-weight:800}

.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:13px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--gut) 18px;margin-inline:calc(var(--gut)*-1);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:center}
@media (min-width:700px){.rail{grid-auto-columns:46%}}
@media (min-width:1080px){
  .rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0;margin:0;gap:18px}
}
.quote{
  padding:24px;border-radius:var(--r-lg);display:flex;flex-direction:column;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-l);
}
.dark .quote{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.quote .stars{margin-bottom:13px}
.quote blockquote{margin:0;font-size:.95rem;line-height:1.66;flex:1}
.quote .q-mk{font-size:2.6rem;line-height:.6;color:var(--y);font-weight:800;display:block;margin-bottom:6px}
.quote footer{
  margin-top:17px;padding-top:15px;border-top:1px solid var(--line-l);
  font-size:.79rem;color:var(--tx-mut);display:flex;align-items:center;gap:10px;
}
.dark .quote footer{border-top-color:var(--line-d);color:var(--tx-inv-mut)}
.av{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--y);color:var(--y-ink);font-weight:800;font-size:.85rem;
}
.av svg{width:17px;height:17px}
.rail-hint{text-align:center;font-size:.76rem;color:var(--tx-mut);margin-top:2px}
@media (min-width:1080px){.rail-hint{display:none}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqs{max-width:800px;margin-inline:auto;display:grid;gap:9px}
.faq{
  border-radius:var(--r-sm);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-l);overflow:hidden;
}
.dark .faq{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.faq.open{box-shadow:inset 0 0 0 1.5px var(--y)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:14px;padding:19px 20px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-size:.96rem;font-weight:800;letter-spacing:-.015em;
}
.faq-q svg{width:19px;height:19px;flex:none;margin-left:auto;color:var(--tx-mut);transition:transform .35s var(--ease)}
.faq.open .faq-q svg{transform:rotate(45deg);color:var(--y-dk)}
.dark .faq.open .faq-q svg{color:var(--y)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 20px 20px;font-size:.91rem;color:var(--tx-mut);line-height:1.65}
.dark .faq-a p{color:var(--tx-inv-mut)}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final{position:relative;overflow:hidden;background:var(--y);color:var(--y-ink);text-align:center}
.final::before{
  content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#000 1px,transparent 0);
  background-size:19px 19px;
}
.final h2{color:var(--y-ink) !important;max-width:18em;margin-inline:auto}
.final p{margin:16px auto 0;max-width:34em;font-size:1.03rem;opacity:.78;font-weight:500}
.final .btn-row{justify-content:center;margin-top:28px}
.final .btn-dark::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.3) 48%,transparent 76%)}
.final small{display:block;margin-top:18px;font-size:.82rem;opacity:.68;font-weight:700}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink);color:var(--tx-inv-mut);padding:48px 0 calc(28px + var(--safe-cta,0px))}
.foot-grid{display:grid;gap:30px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot img{height:32px;width:auto;margin-bottom:14px}
.foot h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin-bottom:14px}
.foot p,.foot a{font-size:.89rem;line-height:1.8}
.foot a:hover{color:var(--y)}
.foot ul{display:grid;gap:4px}
.socials{display:flex;gap:9px;margin-top:14px}
.socials a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#fff;transition:background .25s, transform .25s, color .25s;
}
.socials a:hover{background:var(--y);color:var(--y-ink);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}
.foot-base{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.82rem;
}

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(9,9,11,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-d);
  display:flex;align-items:center;gap:9px;
  transform:translateY(130%);transition:transform .45s var(--ease);
}
.sticky.show{transform:translateY(0)}
.sticky-info{flex:1;min-width:0;display:none}
@media (min-width:560px){.sticky-info{display:block}}
.sticky-info b{display:block;font-size:.88rem;color:#fff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-info span{font-size:.75rem;color:var(--y)}
.sticky .btn{flex:1;padding:14px 16px;font-size:.92rem}
.sticky .btn-wa{flex:0 0 auto;padding:14px 17px}
@media (min-width:560px){.sticky .btn{flex:0 0 auto}}
@media (min-width:980px){.sticky{display:none}}
body.has-sticky{--safe-cta:76px}

/* floating desktop whatsapp */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:94;
  width:56px;height:56px;border-radius:50%;display:none;place-items:center;
  background:var(--wa);color:#fff;box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.09) rotate(6deg)}
.wa-float svg{width:28px;height:28px}
@media (min-width:980px){.wa-float{display:grid}}

/* ==========================================================================
   MODAL + MULTI-STEP FORM
   ========================================================================== */
.ov{
  position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(6,6,9,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease), visibility .3s;
  padding:0;
}
.ov.show{opacity:1;visibility:visible}
@media (min-width:700px){.ov{align-items:center;padding:24px}}

.sheet{
  width:100%;max-width:560px;max-height:94vh;max-height:94dvh;
  background:var(--paper);border-radius:var(--r-lg) var(--r-lg) 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(34px) scale(.98);opacity:.6;
  transition:transform .42s var(--ease), opacity .3s var(--ease);
  box-shadow:0 -10px 60px rgba(0,0,0,.4);
}
.ov.show .sheet{transform:none;opacity:1}
@media (min-width:700px){
  .sheet{border-radius:var(--r-lg);max-height:92vh}
}
.sheet-h{
  padding:20px 20px 0;position:relative;flex:none;
}
.sheet-h .grab{
  width:44px;height:4px;border-radius:9px;background:var(--paper-3);
  margin:-8px auto 14px;
}
@media (min-width:700px){.sheet-h .grab{display:none}}
.sheet-h h3{font-size:1.18rem;padding-right:40px}
.sheet-h p{font-size:.86rem;color:var(--tx-mut);margin-top:6px}
.x{
  position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;
  background:var(--paper-3);border:0;cursor:pointer;display:grid;place-items:center;
  color:var(--tx);transition:background .25s, transform .25s;
}
.x:hover{background:var(--paper-3);transform:rotate(90deg)}
.x svg{width:17px;height:17px}

.steps{display:flex;gap:6px;padding:16px 20px 0;flex:none}
.steps i{flex:1;height:4px;border-radius:9px;background:var(--paper-3);overflow:hidden}
.steps i::after{content:"";display:block;height:100%;width:0;background:var(--y);border-radius:inherit;transition:width .45s var(--ease)}
.steps i.done::after{width:100%}
.step-lbl{padding:9px 20px 0;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);flex:none}

.sheet-b{padding:16px 20px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.sheet-f{
  padding:14px 20px calc(16px + env(safe-area-inset-bottom));flex:none;
  border-top:1px solid var(--line-l);background:var(--paper);
  display:flex;gap:10px;align-items:center;
}
.sheet-f .btn{flex:1}
.sheet-f .btn-ghost{flex:0 0 auto;padding:15px 20px}

.fstep[hidden]{display:none}
.fld{margin-bottom:16px}
/* :not(.check) because the acknowledgement is a label too: display:block here
   outranked .check's display:flex and dropped its text below the box. */
.fld>label:not(.check),.fld .lb{display:block;font-size:.85rem;font-weight:800;margin-bottom:7px}
.fld .hint{font-size:.78rem;color:var(--tx-mut);margin-top:6px}
.inp{
  width:100%;padding:14px 15px;border-radius:var(--r-sm);
  background:var(--paper-2);border:1.5px solid var(--line-l);
  font-size:1rem;transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.inp:focus{outline:0;border-color:var(--y);background:var(--paper);box-shadow:0 0 0 4px rgba(255,204,0,.2)}
select.inp{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364646F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;
  padding-right:40px;
}
.phone{display:flex;gap:8px}
.phone select.inp{flex:0 0 118px;font-size:.92rem;padding-left:12px;padding-right:30px;background-position:right 9px center}
.phone input.inp{flex:1;min-width:0}
.inp-err{border-color:#E5484D !important;background:#FEF2F2 !important}
.err-msg{display:none;font-size:.78rem;font-weight:700;color:#D33A3F;margin-top:6px}
.err-msg.show{display:block}

/* radio / choice cards */
.opts{display:grid;gap:9px}
.opts-2{grid-template-columns:repeat(2,1fr)}
.opt{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:15px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--paper-2);border:1.5px solid var(--line-l);
  transition:border-color .22s, background .22s, transform .22s var(--ease);
}
.opt:active{transform:scale(.985)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .tick{
  width:21px;height:21px;border-radius:50%;flex:none;
  border:2px solid var(--line-l);display:grid;place-items:center;
  transition:border-color .22s, background .22s;
}
.opt .tick svg{width:12px;height:12px;color:var(--y-ink);opacity:0;transform:scale(.4);transition:opacity .2s, transform .25s var(--ease)}
.opt:has(input:checked){border-color:var(--y);background:rgba(255,204,0,.1)}
.opt:has(input:checked) .tick{border-color:var(--y);background:var(--y)}
.opt:has(input:checked) .tick svg{opacity:1;transform:scale(1)}
.opt-t{flex:1;min-width:0}
.opt-t b{display:block;font-size:.93rem;font-weight:800}
.opt-t span{display:block;font-size:.8rem;color:var(--tx-mut);margin-top:2px}
.opt-badge{
  flex:none;padding:4px 9px;border-radius:var(--r-pill);background:var(--ok);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.03em;
}
/* fallback for no :has() */
.opt.is-on{border-color:var(--y);background:rgba(255,204,0,.1)}
.opt.is-on .tick{border-color:var(--y);background:var(--y)}
.opt.is-on .tick svg{opacity:1;transform:scale(1)}

.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.88rem;line-height:1.55}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{
  width:22px;height:22px;border-radius:6px;flex:none;margin-top:1px;
  border:2px solid var(--line-l);display:grid;place-items:center;transition:border-color .2s, background .2s;
}
.check .box svg{width:13px;height:13px;color:var(--y-ink);opacity:0;transform:scale(.4);transition:opacity .2s, transform .25s var(--ease)}
.check.is-on .box{border-color:var(--y);background:var(--y)}
.check-err .box{border-color:#E5484D;background:#FEF2F2}
.check.is-on .box svg{opacity:1;transform:scale(1)}

.recap{
  padding:15px 17px;border-radius:var(--r-sm);margin-bottom:18px;
  background:rgba(255,204,0,.11);box-shadow:inset 0 0 0 1.5px rgba(255,204,0,.36);
}
.recap-r{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:4px 0}
.recap-r b{font-weight:800;text-align:right}
.recap-r.tot{border-top:1px dashed rgba(10,10,14,.18);margin-top:7px;padding-top:9px;font-weight:800}

.alert{padding:14px 16px;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;line-height:1.5;margin-bottom:14px}
.alert-err{background:#FEF2F2;color:#B4252A;box-shadow:inset 0 0 0 1.5px #FCA5A5}
.alert-ok{background:#ECFDF5;color:#0A6E4C;box-shadow:inset 0 0 0 1.5px #86EFAC}
.alert-inf{background:rgba(255,204,0,.13);color:#7A5C00;box-shadow:inset 0 0 0 1.5px rgba(255,204,0,.4)}

/* success state */
.done-art{
  width:76px;height:76px;border-radius:50%;margin:8px auto 20px;display:grid;place-items:center;
  background:var(--y);color:var(--y-ink);
  animation:pop .55s var(--ease) both;
}
.done-art svg{width:38px;height:38px}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* trust footer inside form */
.form-trust{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:.76rem;color:var(--tx-mut);margin-top:14px;text-align:center;
}
.form-trust svg{width:14px;height:14px;flex:none}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.js-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .66s var(--ease), transform .66s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}
[data-reveal][data-d="6"]{transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .mark::after{transform:scaleX(1) !important}
  .meter i{width:var(--fill,78%) !important}
  .rbar i::after{width:var(--w,90%) !important}
}

/* play affordance on game project cards */
.proj-play{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin-top:auto;padding:12px 17px;min-height:44px;border-radius:var(--r-pill);
  background:var(--y);color:var(--y-ink);
  font-size:.82rem;font-weight:800;align-self:flex-start;
  transition:box-shadow .25s var(--ease), background .25s;
}
.proj-play svg{width:16px;height:16px;flex:none}

/* Desktop-only games: show the honest label for the device in hand. A coarse
   pointer means no keyboard, so the game will not actually run. */
.proj-play .pp-fine,
.proj-play .pp-coarse{display:inline-flex;align-items:center;gap:7px}
.proj-play .pp-coarse{display:none}
@media (pointer:coarse){
  .proj-play .pp-fine{display:none}
  .proj-play .pp-coarse{display:inline-flex}
  /* Not a call to action on this device, so stop it reading like the others. */
  .proj-deskonly .proj-play{
    background:rgba(255,255,255,.1);color:var(--tx-inv);
    box-shadow:inset 0 0 0 1px var(--line-d);
  }
  .proj-deskonly:hover .proj-play{box-shadow:inset 0 0 0 1px var(--line-d)}
}
.proj-img:hover .proj-play{box-shadow:var(--sh-y)}
.proj-play-wrap{margin-top:13px;display:flex;flex-direction:column}

/* ==========================================================================
   SITE PAGES (home, majors) - nav state, mobile drawer, page hero
   ========================================================================== */
.nav-links a.is-here{color:var(--tx);background:var(--paper-3)}
.nav-btn{padding:12px 18px;font-size:.88rem;min-height:44px}

/* hamburger */
.nav-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 11px;border:0;border-radius:12px;cursor:pointer;
  background:var(--paper-3);flex:none;
}
.nav-burger span{display:block;height:2px;border-radius:2px;background:var(--tx);transition:transform .3s var(--ease), opacity .2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:980px){.nav-burger{display:none}}

.nav-drawer{
  position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:99;
  background:var(--paper);padding:18px var(--gut) calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;display:flex;flex-direction:column;gap:22px;
  animation:drawerIn .3s var(--ease);
}
.nav-drawer[hidden]{display:none}
@keyframes drawerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (min-width:980px){.nav-drawer{display:none !important}}
.nav-drawer nav{display:grid;gap:2px}
.nav-drawer nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 4px;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;
  border-bottom:1px solid var(--line-l);
}
.nav-drawer nav a svg{width:18px;height:18px;color:var(--tx-mut)}
.nav-drawer nav a.is-here{color:var(--y-dk)}
.nav-drawer nav a.is-here svg{color:var(--y-dk)}
.nav-drawer-foot{display:grid;gap:10px;margin-top:auto}

/* page hero for interior pages */
.phero{
  position:relative;background:var(--ink);color:var(--tx-inv);
  padding:52px 0 58px;overflow:hidden;isolation:isolate;text-align:center;
}
@media (min-width:900px){.phero{padding:84px 0 92px}}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--y);z-index:0}
.phero .eyebrow{color:var(--y);justify-content:center}
.phero h1{margin:10px 0 0}
.phero .lead{margin:16px auto 0;max-width:40em;color:var(--tx-inv-mut)}
.phero .btn-row{justify-content:center;margin-top:28px}

/* home hero keeps the yellow-plate motif */
.home-art{position:relative;aspect-ratio:1/1;width:100%;max-width:300px;margin:8px auto 0}
@media (min-width:980px){.home-art{max-width:400px;margin-top:0}}

/* service / major cards reuse .card and .proj-img; this is the link wrapper */
a.card{display:block;color:inherit}
a.card:hover h3{color:var(--y-dk)}
.dark a.card:hover h3{color:var(--y)}

/* short-course chips */
.courses-list{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
/* icon fallback when a major has no uploaded image */
.proj-media-icon{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(0deg,var(--ink-3),var(--ink-3));
}
.proj-media-icon svg{width:34%;height:34%;color:var(--y)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;gap:30px}
@media (min-width:900px){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}}

.contact-list{display:grid;gap:16px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .ico{margin-bottom:0}
.contact-list b{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);margin-bottom:3px}
.contact-list a,.contact-list span:not(.ico){font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.contact-list a:hover{color:var(--y-dk)}
.contact-list small{display:block;font-size:.84rem;color:var(--tx-mut);font-weight:500;margin-top:3px}

.contact-card{
  padding:26px 22px;border-radius:var(--r-lg);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-1);
}
@media (min-width:600px){.contact-card{padding:32px 30px}}
.contact-card .fld{margin-top:18px;margin-bottom:0}
.contact-card textarea.inp{resize:vertical;min-height:120px;line-height:1.6}
.contact-card .btn{margin-top:22px}

/* captcha */
.cap-q{
  display:inline-block;padding:3px 10px;border-radius:8px;
  background:var(--y);color:var(--y-ink);font-weight:800;
  font-family:var(--mono);letter-spacing:.02em;
}
.cap-in{max-width:160px}

/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   MAJOR CARDS (authored, no photography)
   ========================================================================== */
.mgrid{display:grid;gap:16px}
@media (min-width:700px){.mgrid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:1100px){.mgrid{gap:24px}}

.mcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--paper);color:inherit;
  box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-1);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.dark .mcard{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.mcard:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,204,0,.5), var(--sh-2)}
.mcard:active{transform:translateY(-2px)}

.mcard-body{padding:20px 22px 0;flex:1;display:flex;flex-direction:column}
.mcard-body h3{font-size:1.3rem;letter-spacing:-.03em}
.mcard-tag{margin-top:6px;font-size:.93rem;font-weight:800;color:var(--y-dk);letter-spacing:-.015em}
.dark .mcard-tag{color:var(--y)}
.mcard-blurb{margin-top:10px;font-size:.9rem;line-height:1.62;color:var(--tx-mut)}
.dark .mcard-blurb{color:var(--tx-inv-mut)}

.mcard-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.mcard-topics span{
  padding:6px 11px;border-radius:var(--r-pill);background:var(--paper-3);
  font-size:.75rem;font-weight:700;color:var(--tx);white-space:nowrap;
  transition:background .3s, color .3s;
}
.dark .mcard-topics span{background:rgba(255,255,255,.07);color:#E6E6EC}
.mcard:hover .mcard-topics span{background:rgba(255,204,0,.17);color:var(--y-dk)}
.dark .mcard:hover .mcard-topics span{color:var(--y)}

.mcard-foot{
  margin-top:20px;padding:16px 22px;display:flex;align-items:center;gap:12px;
  border-top:1px solid var(--line-l);
}
.dark .mcard-foot{border-top-color:var(--line-d)}
.mcard-out{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:800;color:var(--tx-mut)}
.mcard-out svg{width:16px;height:16px;color:var(--y-dk)}
.dark .mcard-out{color:var(--tx-inv-mut)}
.dark .mcard-out svg{color:var(--y)}
.mcard-go{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:11px 16px;min-height:44px;border-radius:var(--r-pill);
  background:var(--y);color:var(--y-ink);font-size:.82rem;font-weight:800;
  transition:box-shadow .3s var(--ease), gap .3s var(--ease);
}
.mcard-go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.mcard:hover .mcard-go{box-shadow:var(--sh-y)}
.mcard:hover .mcard-go svg{transform:translateX(4px)}

.mcard-price{font-size:.82rem;font-weight:800}
.mcard-price b{font-size:1rem}
.mcard-starts{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  padding:5px 11px;border-radius:var(--r-pill);background:var(--y);color:var(--y-ink);
  font-size:.68rem;font-weight:800;letter-spacing:.05em;white-space:nowrap;z-index:2;
}

/* ==========================================================================
   MOTION LAYER
   Everything here is transform/opacity only, so it composites on the GPU
   and stays smooth on mid-range phones. All of it is disabled under
   prefers-reduced-motion by the guard at the end of this file.
   ========================================================================== */

/* --- reveal directions, on top of the default fade-up --- */
.js-ready [data-reveal="left"] {opacity:0;transform:translate3d(-34px,0,0)}
.js-ready [data-reveal="right"]{opacity:0;transform:translate3d(34px,0,0)}
.js-ready [data-reveal="scale"]{opacity:0;transform:scale(.94)}
.js-ready [data-reveal="blur"] {opacity:0;transform:translate3d(0,18px,0);filter:blur(6px)}
[data-reveal="left"].is-in,
[data-reveal="right"].is-in,
[data-reveal="scale"].is-in{opacity:1;transform:none}
[data-reveal="blur"].is-in{opacity:1;transform:none;filter:none}
[data-reveal="blur"]{transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease)}

/* --- headline reveal, word by word --- */
.w-rev{display:inline-block;overflow:hidden;vertical-align:top}
.w-rev > i{display:inline-block;font-style:inherit;transition:transform .75s var(--ease)}
.js-ready .w-rev > i{transform:translate3d(0,110%,0) rotate(4deg)}
.is-in .w-rev > i,
[data-words].is-in .w-rev > i{transform:none !important}

/* --- grids stagger their own children, no per-item markup needed --- */
.js-ready .stagger > *{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.stagger.is-in > *{opacity:1;transform:none}
.stagger.is-in > *:nth-child(1){transition-delay:.05s}
.stagger.is-in > *:nth-child(2){transition-delay:.13s}
.stagger.is-in > *:nth-child(3){transition-delay:.21s}
.stagger.is-in > *:nth-child(4){transition-delay:.29s}
.stagger.is-in > *:nth-child(5){transition-delay:.37s}
.stagger.is-in > *:nth-child(6){transition-delay:.45s}
.stagger.is-in > *:nth-child(7){transition-delay:.53s}
.stagger.is-in > *:nth-child(8){transition-delay:.61s}

/* --- hero art drifts gently against the scroll --- */
.hero-art,.home-art{will-change:transform}

/* --- section eyebrow rule draws itself in --- */
.js-ready .eyebrow::before{transform:scaleX(0)}
.eyebrow::before{transform-origin:left;transition:transform .6s var(--ease) .1s}
.is-in .eyebrow::before,.eyebrow.is-in::before{transform:scaleX(1)}
.sec-head.is-in .eyebrow::before,.phero .eyebrow::before{transform:scaleX(1)}

/* --- cards lift and their icon reacts --- */
.card{will-change:transform}
.card .ico{transition:transform .45s var(--ease), border-radius .45s var(--ease)}
.card:hover .ico{transform:rotate(-8deg) scale(1.1);border-radius:20px}

/* --- links get a yellow underline that grows --- */
.foot a:not(.socials a),.contact-list a{
  background-image:linear-gradient(var(--y),var(--y));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease), color .25s;
}
.foot a:not(.socials a):hover,.contact-list a:hover{background-size:100% 2px}

/* --- stat numbers pop as they land --- */
.stat b{transition:transform .5s var(--ease)}
.stat.is-in b{animation:statPop .7s var(--ease) both}
@keyframes statPop{
  0%  {transform:scale(.8);opacity:0}
  60% {transform:scale(1.05)}
  100%{transform:scale(1);opacity:1}
}

/* --- buttons get a subtle press and icon nudge --- */
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg:last-child{transform:translateX(4px)}

/* --- the yellow marker underline sweeps rather than snaps --- */
.mark::after{transition:transform .8s var(--ease) .2s}

@media (prefers-reduced-motion:reduce){
  .w-rev > i{transform:none !important}
  .stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
  .stat.is-in b{animation:none !important}
  [data-reveal="blur"]{filter:none !important}
  .hero-art,.home-art{transform:none !important}
}

/* ==========================================================================
   PER-MAJOR CARD VISUALS
   Each major gets its own built graphic instead of stock photography.
   ========================================================================== */
.mviz{
  position:relative;display:block;height:170px;overflow:hidden;
  background:var(--ink);display:grid;place-items:center;
}
.mviz::before{ /* shared flat grid */
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
.mviz::after{ /* yellow rule sweeps on hover */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--y);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.mcard:hover .mviz::after{transform:scaleX(1)}
.mviz-badge{
  position:absolute;top:14px;right:14px;z-index:3;
  padding:6px 12px;border-radius:var(--r-pill);background:var(--y);color:var(--y-ink);
  font-size:.74rem;font-weight:800;letter-spacing:.03em;white-space:nowrap;
}

/* ---------- shared chrome ---------- */
.viz-win,.viz-term{
  position:relative;z-index:2;width:78%;border-radius:10px;overflow:hidden;
  background:#0C0C11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), 0 16px 34px rgba(0,0,0,.5);
  transition:transform .5s var(--ease);
}
.mcard:hover .viz-win,.mcard:hover .viz-term{transform:translateY(-5px) scale(1.03)}
.viz-bar{display:flex;align-items:center;gap:5px;padding:7px 9px;background:rgba(255,255,255,.06)}
.viz-bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.viz-bar i:first-child{background:var(--y)}
.viz-bar u{
  flex:1;height:7px;margin-left:5px;border-radius:4px;background:rgba(255,255,255,.08);
  position:relative;overflow:hidden;text-decoration:none;
}
.viz-bar u::after{
  content:"";position:absolute;inset:0;width:36%;border-radius:4px;background:var(--y);opacity:.75;
  animation:barLoad 3.4s var(--ease-io) infinite;
}
@keyframes barLoad{0%{transform:translateX(-110%)}60%,100%{transform:translateX(300%)}}

/* ---------- WEB: code types, clears, retypes; blocks assemble alongside ---------- */
.viz-stage{display:grid;grid-template-columns:1.35fr 1fr;gap:9px;padding:11px 11px 13px}
.viz-code{position:relative;display:grid;gap:6px;align-content:start}
.viz-code b{
  display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.22);
  width:var(--w);transform:scaleX(0);transform-origin:left;
  animation:codeLoop 7s var(--ease-io) infinite;
  animation-delay:calc(var(--i) * .26s);
}
.viz-code b.y{background:var(--y);opacity:.9}
@keyframes codeLoop{
  0%   {transform:scaleX(0)}
  14%  {transform:scaleX(1)}
  72%  {transform:scaleX(1)}
  82%  {transform:scaleX(0)}
  100% {transform:scaleX(0)}
}
.viz-code s{
  position:absolute;left:0;width:6px;height:6px;background:var(--y);
  animation:caretStep 7s steps(1) infinite;
}
@keyframes caretStep{
  0%{top:0}   14%{top:0}
  16%{top:12px} 30%{top:12px}
  32%{top:24px} 44%{top:24px}
  46%{top:36px} 58%{top:36px}
  60%{top:48px} 72%{top:48px}
  74%{top:60px} 100%{top:60px}
}
.viz-build{display:grid;grid-template-rows:auto auto 1fr;gap:5px}
.viz-build i{
  display:block;border-radius:4px;background:rgba(255,255,255,.14);
  animation:blockIn 7s var(--ease) infinite;animation-delay:calc(var(--i) * .3s + .5s);
}
.viz-build i:nth-child(1){height:13px;background:rgba(255,204,0,.55)}
.viz-build i:nth-child(2){height:9px}
.viz-build i:nth-child(3){height:9px}
.viz-build i:nth-child(4){height:20px}
@keyframes blockIn{
  0%  {opacity:0;transform:translateY(8px) scale(.9)}
  16% {opacity:1;transform:none}
  72% {opacity:1;transform:none}
  82% {opacity:0;transform:translateY(-6px) scale(.95)}
  100%{opacity:0}
}

/* ---------- AI: a model training, landscape by design ---------- */
.viz-ml{
  position:relative;z-index:2;width:82%;display:grid;gap:7px;
  padding:11px 13px 12px;border-radius:10px;
  background:#0C0C11;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13), 0 16px 34px rgba(0,0,0,.5);
  font-family:var(--mono);transition:transform .5s var(--ease);
}
.mcard:hover .viz-ml{transform:translateY(-5px) scale(1.03)}

.ml-head{display:flex;align-items:center;justify-content:space-between;font-size:.56rem;letter-spacing:.06em}
.ml-live{display:inline-flex;align-items:center;gap:6px;color:#4ADE80;font-weight:700;text-transform:uppercase}
.ml-live i{
  width:5px;height:5px;border-radius:50%;background:#4ADE80;
  animation:mlPing 1.6s var(--ease-io) infinite;
}
@keyframes mlPing{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.ml-ep{color:var(--tx-inv-mut);font-weight:700}

/* stepped digit readouts */
.ml-dig{
  display:inline-block;height:1em;overflow:hidden;vertical-align:-.18em;
  color:var(--y);font-weight:800;
}
.ml-dig u{display:block;height:1em;line-height:1em;text-decoration:none}
.ml-dig{animation:digStep 7s steps(1) infinite}
@keyframes digStep{
  0%,16%  {transform:translateY(0)}
  20%,36% {transform:translateY(-1em)}
  40%,56% {transform:translateY(-2em)}
  60%,76% {transform:translateY(-3em)}
  80%,100%{transform:translateY(-4em)}
}

/* chart */
.ml-chart{width:100%;height:58px;color:rgba(255,255,255,.1);overflow:visible}
.ml-val{stroke:rgba(255,255,255,.22);stroke-width:1.4;stroke-dasharray:420;stroke-dashoffset:420;
  animation:mlDraw 7s var(--ease-io) infinite .25s}
.ml-loss{stroke:var(--y);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;
  filter:drop-shadow(0 0 5px rgba(255,204,0,.55));
  animation:mlDraw 7s var(--ease-io) infinite}
@keyframes mlDraw{
  0%  {stroke-dashoffset:420}
  62% {stroke-dashoffset:0}
  86% {stroke-dashoffset:0;opacity:1}
  94% {opacity:0}
  100%{stroke-dashoffset:420;opacity:0}
}
.ml-dot{
  fill:var(--y);filter:drop-shadow(0 0 6px var(--y));
  offset-path:path("M2 6 C 42 22, 70 16, 98 32 S 152 50, 180 50 S 210 56, 218 55");
  animation:mlRide 7s var(--ease-io) infinite;
}
@keyframes mlRide{
  0%  {offset-distance:0%;opacity:0}
  6%  {opacity:1}
  62% {offset-distance:100%;opacity:1}
  86% {offset-distance:100%;opacity:1}
  94% {opacity:0}
  100%{offset-distance:100%;opacity:0}
}

/* metrics row */
.ml-foot{display:flex;align-items:center;gap:14px;font-size:.56rem}
.ml-metric{display:flex;flex-direction:column;gap:1px;flex:none}
.ml-metric small{color:var(--tx-inv-mut);letter-spacing:.08em;text-transform:uppercase;font-size:.5rem}
.ml-dig.acc,.ml-dig.loss{font-size:.78rem}
.ml-dig.loss{color:#fff}
.ml-bar{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.ml-bar i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--y-dk),var(--y));
  animation:mlProg 7s var(--ease-io) infinite;
}
@keyframes mlProg{0%{width:0}62%{width:100%}86%{width:100%;opacity:1}94%{opacity:0}100%{width:0;opacity:0}}

/* ---------- CYBER: session runs, completes, clears, repeats ---------- */
.viz-term{width:82%}
.viz-lines{
  display:grid;gap:3px;padding:8px 11px 6px;
  font-family:var(--mono);font-size:.55rem;line-height:1.35;
}
.viz-lines b{
  display:block;font-weight:600;color:#C9C9D4;white-space:nowrap;
  overflow:hidden;width:0;
  animation:typeLine 9s steps(28,end) infinite;
  animation-delay:calc(var(--i) * .55s + .3s);
}
@keyframes typeLine{
  0%   {width:0;opacity:1}
  7%   {width:100%}
  78%  {width:100%;opacity:1}
  84%  {width:100%;opacity:0}
  100% {width:0;opacity:0}
}
.viz-lines em{font-style:normal;color:var(--y);font-weight:800;margin-right:4px}
.viz-lines .ok{color:#4ADE80}
.viz-lines .bad{color:#FF6B6B}
.viz-lines .cur span{
  display:inline-block;width:5px;height:8px;background:var(--y);vertical-align:-1px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.viz-prog{display:block;height:3px;margin:0 11px 9px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.viz-prog i{
  display:block;height:100%;width:0;border-radius:3px;background:var(--y);
  animation:progRun 9s var(--ease-io) infinite;
}
@keyframes progRun{0%{width:0}70%{width:100%}84%{width:100%;opacity:0}100%{width:0;opacity:0}}

/* ---------- GAME: a shooter that actually plays ---------- */
.viz-game{
  position:relative;z-index:2;width:72%;aspect-ratio:3/2;max-height:132px;
  border-radius:8px;overflow:hidden;background:#07070B;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 16px 34px rgba(0,0,0,.5);
  transition:transform .5s var(--ease);
}
.mcard:hover .viz-game{transform:translateY(-5px) scale(1.04)}
/* starfield */
.viz-game .sky i{
  position:absolute;top:-6px;left:var(--x);width:2px;height:2px;border-radius:50%;
  background:rgba(255,255,255,.5);
  animation:starFall var(--d) linear infinite;animation-delay:calc(var(--i) * -.37s);
}
@keyframes starFall{to{transform:translateY(150px)}}
/* invader fleet shuffles across and steps down */
.viz-game .fleet{
  position:absolute;top:14px;left:12%;width:76%;
  display:grid;grid-template-columns:repeat(5,1fr);gap:7px 9px;
  animation:fleetMove 3.4s var(--ease-io) infinite alternate;
}
@keyframes fleetMove{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
.viz-game .fleet i{
  display:block;height:7px;border-radius:2px;background:var(--y);
  animation:invBob .9s steps(2) infinite;animation-delay:calc(var(--i) * .07s);
}
@keyframes invBob{0%{transform:scaleX(1)}100%{transform:scaleX(.72)}}
/* two invaders get destroyed each cycle */
.viz-game .fleet i:nth-child(3){animation:invBob .9s steps(2) infinite, invHit 4.2s var(--ease) infinite}
.viz-game .fleet i:nth-child(8){animation:invBob .9s steps(2) infinite, invHit 4.2s var(--ease) infinite 2.1s}
@keyframes invHit{
  0%,54% {opacity:1;transform:scale(1)}
  58%    {opacity:1;transform:scale(1.7);background:#fff}
  64%    {opacity:0;transform:scale(.3)}
  92%    {opacity:0}
  100%   {opacity:1;transform:scale(1)}
}
/* player ship tracks back and forth */
.viz-game .ship{
  position:absolute;bottom:8px;left:50%;width:0;height:0;margin-left:-7px;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:11px solid var(--y);
  animation:shipMove 4.2s var(--ease-io) infinite alternate;
}
@keyframes shipMove{from{transform:translateX(-34px)}to{transform:translateX(34px)}}
/* bullets fire from the ship upward */
.viz-game .shots i{
  position:absolute;bottom:18px;left:50%;width:2px;height:8px;margin-left:-1px;
  border-radius:1px;background:#fff;box-shadow:0 0 6px var(--y);
  animation:shipMove 4.2s var(--ease-io) infinite alternate,
            shotUp 1.4s linear infinite;
  animation-delay:0s, calc(var(--i) * .47s);
}
@keyframes shotUp{
  0%  {transform:translateY(0);opacity:0}
  8%  {opacity:1}
  70% {opacity:1}
  100%{transform:translateY(-92px);opacity:0}
}
/* hit flash */
.viz-game .boom{
  position:absolute;top:18px;left:38%;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--y);opacity:0;
  animation:boomRing 4.2s var(--ease) infinite;animation-delay:2.3s;
}
@keyframes boomRing{
  0%  {opacity:.9;transform:scale(.3)}
  18% {opacity:0;transform:scale(2.2)}
  100%{opacity:0}
}


/* ---------- body: less text, tighter ---------- */
.mcard-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-mut);
}
.mcard-kicker svg{width:14px;height:14px;color:var(--y-dk)}
.dark .mcard-kicker{color:var(--tx-inv-mut)}
.dark .mcard-kicker svg{color:var(--y)}
.mcard-body h3{font-size:1.32rem;letter-spacing:-.03em;margin-top:8px}
.mcard-foot{margin-top:18px}

@media (prefers-reduced-motion:reduce){
  /* Everything settles into its finished state instead of looping. */
  .viz-code b{animation:none !important;transform:scaleX(1) !important}
  .viz-build i,.viz-lines b{animation:none !important;opacity:1 !important;transform:none !important;width:100% !important}
  .viz-code s,.viz-bar u::after,.viz-lines .cur span,.viz-prog i,
  .ml-live i,.ml-dig,.ml-val,.ml-loss,.ml-dot,.ml-bar i,
  .viz-game .sky i,.viz-game .fleet,.viz-game .fleet i,
  .viz-game .shots i,.viz-game .ship,.viz-game .boom{animation:none !important}
  .ml-dot,.viz-game .boom{opacity:0 !important}
  .viz-prog i,.ml-bar i{width:100% !important}
  .ml-val,.ml-loss{stroke-dashoffset:0 !important}
  .ml-dig{transform:translateY(-4em) !important}
}

/* ==========================================================================
   MAJORS, COMPACT (homepage): logo + name only
   ========================================================================== */
.mtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:860px){.mtiles{grid-template-columns:repeat(4,1fr);gap:18px}}

.mtile{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:28px 16px 24px;border-radius:var(--r-lg);text-align:center;
  background:var(--paper);color:inherit;
  box-shadow:inset 0 0 0 1px var(--line-l);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dark .mtile{background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d)}
.mtile:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--y), var(--sh-2)}
.mtile:active{transform:translateY(-2px)}

.mtile-ico{
  width:68px;height:68px;border-radius:20px;flex:none;display:grid;place-items:center;
  background:var(--y);color:var(--ink);
  transition:transform .45s var(--ease), border-radius .45s var(--ease);
}
.mtile-ico svg{width:34px;height:34px}
.mtile:hover .mtile-ico{transform:rotate(-8deg) scale(1.08);border-radius:26px}

.mtile-name{font-size:1rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.mtile-go{
  /* Pushed to the bottom so arrows line up even when a name wraps. */
  margin-top:auto;
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--paper-3);opacity:0;transform:translateY(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.dark .mtile-go{background:rgba(255,255,255,.08)}
.mtile-go svg{width:15px;height:15px;color:var(--y-dk)}
.dark .mtile-go svg{color:var(--y)}
.mtile:hover .mtile-go{opacity:1;transform:none}
/* Touch devices never hover, so keep the affordance visible there. */
@media (hover:none){.mtile-go{opacity:1;transform:none}}

/* ==========================================================================
   FX LAYER
   Heavier interaction and sci-fi detail. Pointer-driven effects are gated to
   devices that actually have a pointer, so phones carry none of the cost.
   ========================================================================== */

/* ---------- HUD corner brackets ---------- */
.hud{position:relative}
.hud::before,.hud::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:4;
  border-color:var(--y);border-style:solid;border-width:0;
  opacity:0;transition:opacity .5s var(--ease) .3s;
}
.hud::before{top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.hud::after{bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
.is-in .hud::before,.is-in .hud::after,.hud.is-in::before,.hud.is-in::after{opacity:.85}
.mviz.hud::before,.mviz.hud::after{opacity:.85}

/* ---------- scanline sweep over dark panels ---------- */
.scan{position:relative;overflow:hidden}
.scan::after{
  content:"";position:absolute;left:0;right:0;height:38%;z-index:3;pointer-events:none;
  top:-40%;
  background:linear-gradient(180deg,transparent,rgba(255,204,0,.10) 45%,rgba(255,204,0,.22) 50%,rgba(255,204,0,.10) 55%,transparent);
  animation:scanSweep 5.5s var(--ease-io) infinite;
}
@keyframes scanSweep{
  0%   {transform:translateY(0);opacity:0}
  10%  {opacity:1}
  70%  {opacity:1}
  100% {transform:translateY(380%);opacity:0}
}

/* ---------- edge charge on hover ----------
   A conic border beam was tried here first but the card clips its overflow and
   paints an opaque background, so the ring could never show. This renders
   inside the card, which is why it actually works. */
.charge{position:relative}
.charge::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:6;
  background:linear-gradient(90deg,transparent,var(--y),transparent);
  transform:translateX(-100%);opacity:0;pointer-events:none;
}
.charge:hover::before{opacity:1;animation:chargeSweep 1.1s var(--ease) infinite}
@keyframes chargeSweep{
  0%  {transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.charge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--y);
  transition:box-shadow .4s var(--ease);
}
.charge:hover::after{box-shadow:inset 0 0 0 2px var(--y)}

/* ---------- pointer tilt + spotlight (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  .tilt{
    transform:perspective(900px)
      rotateX(calc(var(--ty,0) * -5deg))
      rotateY(calc(var(--tx,0) * 5deg))
      translateY(var(--lift,0px));
    transition:transform .35s var(--ease);
    transform-style:preserve-3d;
  }
  .tilt:hover{--lift:-6px;transition:transform .12s linear}
  /* sharp-edged highlight, not a soft gradient wash */
  .spot::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,204,0,.14),transparent 60%);
    opacity:0;transition:opacity .3s var(--ease);
  }
  .spot:hover::after{opacity:1}
  .mag{transition:transform .25s var(--ease)}
}

/* ---------- scroll beam, replacing the flat progress bar ---------- */
.scrollbar{
  box-shadow:0 0 14px rgba(255,204,0,.8),0 0 4px rgba(255,204,0,1);
  height:3px;
}
.scrollbar::after{
  content:"";position:absolute;right:0;top:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--y);box-shadow:0 0 14px 3px rgba(255,204,0,.75);
}

/* ---------- page wipe on load ---------- */
.wipe{
  position:fixed;inset:0;z-index:300;background:var(--y);pointer-events:none;
  transform-origin:top;animation:wipeOut .7s var(--ease) .05s forwards;
}
@keyframes wipeOut{
  0%  {transform:scaleY(1)}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- grid intersections twinkle on dark sections ---------- */
.twinkle::before{animation:gridPulse 7s var(--ease-io) infinite}
@keyframes gridPulse{0%,100%{opacity:.35}50%{opacity:.7}}

/* ---------- text decode ---------- */

@media (prefers-reduced-motion:reduce){
  .scan::after,.twinkle::before{animation:none !important;opacity:0 !important}
  .charge::before{animation:none !important;opacity:0 !important}
  .wipe{display:none !important}
  .tilt{transform:none !important}
  .spot::after{display:none !important}
  .scrollbar::after{box-shadow:none}
}

/* ==========================================================================
   SITE-WIDE MOTION TOP-UP
   ========================================================================== */

/* --- yellow stats band gets a slow shimmer sweep --- */
.strip{position:relative;overflow:hidden}
.strip::after{
  content:"";position:absolute;top:0;bottom:0;width:34%;left:-40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:bandShine 6.5s var(--ease-io) infinite;
}
@keyframes bandShine{0%{left:-40%}55%,100%{left:120%}}

/* --- hero yellow plate: scanning line + breathing glyph --- */
/* NB: do not set position here. .art-core is absolutely positioned above and
   relies on its insets for sizing; overriding that collapses it to content. */
.art-core{overflow:hidden}
.art-core::after{
  content:"";position:absolute;left:0;right:0;height:26%;top:-30%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.14) 50%,transparent);
  animation:plateScan 4.6s var(--ease-io) infinite;
}
@keyframes plateScan{0%{top:-30%}70%,100%{top:115%}}
.art-core .glyph{animation:glyphBreathe 4s var(--ease-io) infinite}
@keyframes glyphBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* --- the drawn frame keeps a slow pulse after it lands --- */
.frame-svg rect{animation:draw 1.3s var(--ease) .3s forwards, framePulse 5s var(--ease-io) 1.8s infinite}
@keyframes framePulse{0%,100%{opacity:.28}50%{opacity:.7}}

/* --- compact major tiles: floating icon, sweep on hover --- */
.mtile-ico{animation:tileFloat 5s var(--ease-io) infinite}
.mtile:nth-child(2) .mtile-ico{animation-delay:-1.2s}
.mtile:nth-child(3) .mtile-ico{animation-delay:-2.4s}
.mtile:nth-child(4) .mtile-ico{animation-delay:-3.6s}
@keyframes tileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mtile{overflow:hidden}
.mtile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,204,0,.22) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.mtile:hover::after{transform:translateX(120%)}

/* --- pricing plans get the same edge charge as the major cards --- */
.plan{position:relative;overflow:hidden}
.plan::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--y),transparent);
  transform:translateX(-100%);opacity:0;pointer-events:none;
}
.plan:hover::after{opacity:1;animation:chargeSweep 1.2s var(--ease) infinite}

/* --- countdown digits flip as they land --- */

/* --- footer social icons orbit slightly on hover --- */
.socials a svg{transition:transform .35s var(--ease)}
.socials a:hover svg{transform:rotate(-12deg) scale(1.12)}

/* --- nav logo reacts --- */
.nav-logo img{transition:transform .4s var(--ease)}
.nav-logo:hover img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .strip::after,.art-core::after,.art-core .glyph,.frame-svg rect,
  .mtile-ico,.mtile::after,.plan::after{animation:none !important}
  /* Digits swap instantly; the JS also skips the roll under reduced motion. */
  .dg u{transition:none !important}
  .frame-svg rect{stroke-dashoffset:0 !important;opacity:.5 !important}
}

/* ==========================================================================
   APPLY BAND  (early conversion block, sits under the stats)
   ========================================================================== */
.applyband{
  position:relative;overflow:hidden;padding:30px 0 34px;
  background:var(--paper);border-bottom:1px solid var(--line-l);
}
.applyband-in{
  display:grid;gap:20px;align-items:center;position:relative;z-index:2;
}
@media (min-width:980px){.applyband-in{grid-template-columns:1.25fr auto auto;gap:34px}}
.ab-status{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--y-dk);
}
.ab-status i{
  width:8px;height:8px;border-radius:50%;background:#4ADE80;position:relative;
  box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:livePing 2s var(--ease-io) infinite;
}
@keyframes livePing{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.65)}
  70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.ab-meta{margin-top:8px;font-size:.92rem;color:var(--tx-mut)}
.ab-price{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:16px 22px;border-radius:var(--r);position:relative;
  background:rgba(255,204,0,.1);box-shadow:inset 0 0 0 1.5px rgba(255,204,0,.5);
}
@media (min-width:980px){.ab-price{align-items:center}}
.ab-from{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.ab-num{font-size:2.3rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--tx)}
.ab-or{font-size:.8rem;color:var(--tx-mut);font-weight:700}
.ab-cta{display:grid;gap:10px}
@media (min-width:560px) and (max-width:979px){.ab-cta{grid-template-columns:1fr 1fr}.ab-cta small{grid-column:1/-1}}
.ab-cta small{font-size:.75rem;color:var(--tx-mut);text-align:center}
.ab-rail{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden}
.ab-rail i{
  position:absolute;top:0;left:-30%;width:30%;height:100%;background:var(--y);
  box-shadow:0 0 14px var(--y);animation:railRun 4s var(--ease-io) infinite;
}
@keyframes railRun{0%{left:-30%}60%,100%{left:110%}}

/* ==========================================================================
   REVIEWS  (score ring, bars, streaming quotes)
   ========================================================================== */
.verdict{
  display:grid;gap:26px;align-items:center;margin-bottom:34px;
  padding:28px 22px;border-radius:var(--r-lg);
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d);
}
@media (min-width:900px){.verdict{grid-template-columns:auto 1.2fr auto;gap:40px;padding:34px 36px}}

.gauge{position:relative;width:150px;height:150px;margin-inline:auto}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:9;stroke-linecap:round}
.g-track{stroke:rgba(255,255,255,.09)}
.g-fill{
  stroke:var(--y);stroke-dasharray:327;stroke-dashoffset:327;
  filter:drop-shadow(0 0 7px rgba(255,204,0,.6));
}
.is-in .g-fill{animation:gaugeFill 1.6s var(--ease) .2s forwards}
@keyframes gaugeFill{to{stroke-dashoffset:calc(327 - var(--pct))}}
.g-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.g-mid b{display:block;font-size:2.5rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:#fff}
.g-mid small{display:block;margin-top:3px;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-inv-mut)}
.g-ping{
  position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(255,204,0,.4);
  animation:gaugePing 3s var(--ease-io) infinite;
}
@keyframes gaugePing{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}

.verdict-bars{display:grid;gap:11px;width:100%}
.verdict-bars .rbar{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--tx-inv-mut)}
.verdict-bars .rbar b{width:76px;flex:none;font-weight:700}
.verdict-bars .rbar i{
  flex:1;height:9px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);
  overflow:hidden;font-style:normal;position:relative;
}
.verdict-bars .rbar i::after{
  content:"";position:absolute;inset:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--y-dk),var(--y));
  box-shadow:0 0 12px rgba(255,204,0,.5);
  transition:width 1.3s var(--ease);transition-delay:var(--d,0s);
}
.is-in .verdict-bars .rbar i::after{width:var(--w,90%)}
.verdict-bars .rbar em{
  width:58px;flex:none;text-align:right;font-style:normal;font-weight:800;
  color:#fff;font-size:.78rem;        /* the % sign */
}
.verdict-bars .rbar em span{font-size:1.15rem;letter-spacing:-.02em}  /* the number */

.verdict-kpi{display:grid;gap:16px}
.kpi{text-align:center}
.kpi b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--y)}
/* Direct child only: the counter <span> lives inside <b> and must stay inline. */
.kpi > span{display:block;margin-top:5px;font-size:.78rem;color:var(--tx-inv-mut);max-width:160px;margin-inline:auto}
.kpi b span{display:inline;font-size:inherit;color:inherit;margin:0}

/* streaming quote rail */
.qstream{
  position:relative;overflow:hidden;padding:4px 0;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.qstream-t{display:flex;width:max-content;animation:qRun 46s linear infinite}
.qstream:hover .qstream-t{animation-play-state:paused}
.qstream-t ul{display:flex;gap:16px;padding-right:16px}
@keyframes qRun{to{transform:translateX(-50%)}}
.qcard{
  width:300px;flex:none;display:flex;flex-direction:column;
  padding:20px;border-radius:var(--r);
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
@media (min-width:700px){.qcard{width:340px}}
.qcard:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,204,0,.45)}
.qcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.qcard .stars svg{width:15px;height:15px;color:var(--y)}
.qcard-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#4ADE80;
}
.qcard-tag i{width:6px;height:6px;border-radius:50%;background:#4ADE80;animation:livePing 2.4s var(--ease-io) infinite}
.qcard blockquote{margin:0;font-size:.9rem;line-height:1.62;color:#E4E4EC;flex:1}
.qcard footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-d);font-size:.74rem;color:var(--tx-inv-mut)}

/* ==========================================================================
   WHY  (wired spine of nodes)
   ========================================================================== */
.spine{position:relative;display:grid;gap:14px}
@media (min-width:980px){.spine{grid-template-columns:repeat(4,1fr);gap:20px}}
.spine-line{display:none}
@media (min-width:980px){
  .spine-line{
    display:block;position:absolute;top:52px;left:8%;right:8%;height:2px;
    background:repeating-linear-gradient(90deg,rgba(255,204,0,.35) 0 7px,transparent 7px 15px);
  }
  .spine-line i{
    position:absolute;top:-2px;left:0;width:48px;height:6px;border-radius:3px;
    background:var(--y);box-shadow:0 0 14px var(--y);
    animation:spineRun 5s var(--ease-io) infinite;
  }
  @keyframes spineRun{0%{left:-8%}60%,100%{left:104%}}
}
.node{
  position:relative;padding:26px 22px 24px;border-radius:var(--r);overflow:hidden;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-d);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.node:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,204,0,.5)}
.node-dot{
  position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--y);box-shadow:0 0 12px var(--y);
  display:none;
}
@media (min-width:980px){.node-dot{display:block}}
.node-idx{
  position:absolute;top:16px;right:20px;font-size:2.4rem;font-weight:800;
  letter-spacing:-.06em;color:rgba(255,255,255,.07);line-height:1;
}
.node-ico{
  position:relative;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,204,0,.14);color:var(--y);margin-bottom:16px;
  transition:transform .45s var(--ease), background .35s;
}
.node-ico svg{width:26px;height:26px;position:relative;z-index:2}
.node:hover .node-ico{transform:rotate(-8deg) scale(1.08);background:var(--y);color:var(--ink)}
.node-ring{
  position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,204,0,.5);
  animation:nodeRing 3s var(--ease-io) infinite;
}
@keyframes nodeRing{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:0;transform:scale(1.35)}}
.node h3{font-size:1.04rem;margin-bottom:9px;color:#fff}
.node p{font-size:.89rem;line-height:1.6;color:var(--tx-inv-mut)}
.node-sweep{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,204,0,.14) 50%,transparent 58%);
  transform:translateX(-120%);transition:transform .8s var(--ease);
}
.node:hover .node-sweep{transform:translateX(120%)}

/* ==========================================================================
   AUDIENCE  (persona cards with a match meter)
   ========================================================================== */
.personas{display:grid;gap:16px}
@media (min-width:900px){.personas{grid-template-columns:repeat(3,1fr);gap:20px}}
.persona{
  position:relative;padding:26px 24px 24px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-l), var(--sh-1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.persona:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--y), var(--sh-2)}
.persona-scan{
  position:absolute;left:0;right:0;height:34%;top:-36%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,204,0,.16),transparent);
}
.persona:hover .persona-scan{animation:personaScan 1.4s var(--ease-io)}
@keyframes personaScan{to{top:110%}}
.persona-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.persona-ico{
  width:56px;height:56px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--y);color:var(--ink);
  transition:transform .45s var(--ease), border-radius .45s var(--ease);
}
.persona-ico svg{width:27px;height:27px}
.persona:hover .persona-ico{transform:rotate(-8deg) scale(1.08);border-radius:22px}
.persona-tag{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 12px;border-radius:var(--r-pill);background:var(--paper-3);
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-mut);
}
.persona-tag svg{width:14px;height:14px;color:var(--y-dk)}
.persona h3{font-size:1.12rem;margin-bottom:9px}
.persona p{font-size:.9rem;line-height:1.62;color:var(--tx-mut)}
.persona-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.8rem;font-weight:800;color:var(--y-dk);
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.persona-go svg{width:16px;height:16px}
.persona:hover .persona-go{opacity:1;transform:none}
@media (hover:none){.persona-go{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .ab-status i,.ab-rail i,.g-ping,.qstream-t,.qcard-tag i,
  .spine-line i,.node-ring,.node-sweep,.persona-scan{animation:none !important}
  .is-in .g-fill{animation:none !important;stroke-dashoffset:calc(327 - var(--pct)) !important}
  .verdict-bars .rbar i::after{transition:none !important}
}