/* ============================================================================
   BITTY BOX AGENTS — landing deck
   neon retro-futuristic / black + cyan + gold
   Layout: vertical scroll-snap slide deck (AMP-stories style)
   ========================================================================= */

:root{
  --ink:#000814;
  --navy:#001233;
  --navy-2:#01173f;
  --cyan:#0ff;
  --cyan-2:#7dfcff;
  --cyan-dim:rgba(0,255,255,.55);
  --cyan-ghost:rgba(0,255,255,.12);
  --gold:#f5c542;
  --gold-dim:rgba(245,197,66,.55);
  --text:#d7f2ff;
  --muted:#7ea6c2;
  --edge:rgba(0,255,255,.20);
  --rail-top:62px;
  --rail-bot:56px;
  --pad:clamp(16px,4vw,44px);
  --font-display:"Orbitron","Arial Black",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --font-body:"Lato",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--ink);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body{
  overflow:hidden;height:100dvh;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- backdrop */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(1200px 700px at 50% -10%, #01214d 0%, transparent 60%),
  radial-gradient(900px 600px at 85% 110%, #0a2b52 0%, transparent 62%),
  linear-gradient(180deg,#000814 0%,#000a1c 45%,#00102c 100%)}
.bg canvas{position:absolute;inset:0;width:100%;height:100%}
.bg .grid{
  position:absolute;left:-25%;right:-25%;bottom:-12%;height:62%;
  background-image:
    linear-gradient(rgba(0,255,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,255,.14) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(420px) rotateX(72deg) translateZ(0);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top,#000 0%,transparent 88%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 88%);
  opacity:.22;
  pointer-events:none}
.bg .scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,255,255,.02) 0 1px,transparent 1px 3px);opacity:.35;pointer-events:none}
.bg .glowline{position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  filter:blur(1px);opacity:.3;will-change:transform;animation:sweep 20s linear infinite}
@keyframes sweep{0%{transform:translateY(-10px);opacity:0}15%{opacity:.35}85%{opacity:.35}100%{transform:translateY(105vh);opacity:0}}
.bg .vign{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 52%,rgba(0,0,0,.78) 100%)}
#fx{position:fixed;inset:0;z-index:60;pointer-events:none}

/* ---------------------------------------------------------------- the rails */
.toprail{
  position:fixed;top:0;left:0;right:0;height:var(--rail-top);z-index:50;
  display:flex;align-items:center;gap:14px;padding:0 var(--pad);
  background:linear-gradient(180deg,rgba(0,8,20,.94),rgba(0,8,20,.55) 70%,transparent);
  border-bottom:1px solid var(--edge);backdrop-filter:blur(12px)}
.toprail .brand{display:flex;align-items:center;gap:12px;min-width:0;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.toprail .brand:hover{transform:translateY(-1px)}
.toprail .brand img, .toprail .brand .brand-logo{
  width:36px;height:36px;border-radius:8px;object-fit:contain;flex:none;
  box-shadow:0 0 16px rgba(0,255,255,.55),0 0 30px rgba(0,255,255,.2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .3s ease;
  animation:brandFloat 4s ease-in-out infinite alternate}
.toprail .brand:hover img, .toprail .brand:hover .brand-logo{
  transform:scale(1.15) rotate(4deg);box-shadow:0 0 24px rgba(0,255,255,.9),0 0 40px rgba(245,197,66,.45);
  filter:drop-shadow(0 0 8px rgba(0,255,255,.8))}
@keyframes brandFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-2px) scale(1.05)}}
.toprail .brand b{
  font-family:var(--font-display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(90deg,#fff 0%,var(--cyan) 35%,var(--gold) 65%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 16px rgba(0,255,255,.5);white-space:nowrap;
  animation:brandTextShine 6s linear infinite}
@keyframes brandTextShine{0%{background-position:0% center}100%{background-position:200% center}}
.toprail .brand small{display:block;font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.toprail .spacer{flex:1}
.toprail nav{display:flex;align-items:center;gap:8px}
.tlink{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:7px 10px;border-radius:8px;border:1px solid transparent;transition:.22s;white-space:nowrap;overflow:hidden}
.tlink::after{content:"";position:absolute;bottom:2px;left:50%;width:0;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:width .25s ease,left .25s ease}
.tlink:hover::after{width:70%;left:15%}
.tlink:hover{color:var(--cyan);border-color:var(--edge);background:var(--cyan-ghost);text-shadow:0 0 10px rgba(0,255,255,.6)}
.tlink.cta{position:relative;color:var(--ink);background:linear-gradient(135deg,var(--cyan),#08b6d6);border-color:transparent;font-weight:700;
  box-shadow:0 0 18px rgba(0,255,255,.4);overflow:hidden}
.tlink.cta::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-25deg);animation:btnShine 4s ease-in-out infinite}
.tlink.cta:hover{color:var(--ink);filter:brightness(1.12);box-shadow:0 0 26px rgba(0,255,255,.7)}

.botrail{
  position:fixed;bottom:0;left:0;right:0;height:var(--rail-bot);z-index:50;
  display:flex;align-items:center;gap:14px;padding:0 var(--pad);
  background:linear-gradient(0deg,rgba(0,8,20,.94),rgba(0,8,20,.5) 70%,transparent);
  border-top:1px solid var(--edge);backdrop-filter:blur(12px)}
.botrail .meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.botrail .bar{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.botrail .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));
  box-shadow:0 0 12px rgba(0,255,255,.8);transition:width .4s cubic-bezier(.4,0,.2,1)}
.botrail .hint{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.botrail .hint b{color:var(--gold)}

/* ------------------------------------------------------------------- deck */
.deck{position:relative;z-index:10;height:100dvh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.slide{position:relative;min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--rail-top) + 22px) var(--pad) calc(var(--rail-bot) + 22px);
  overflow:hidden}
.slide-inner{width:100%;max-width:1180px;margin:0 auto}

/* reveal-on-enter */
[data-anim]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.slide.is-live [data-anim]{opacity:1;transform:none}
.slide.is-live [data-anim="1"]{transition-delay:.05s}
.slide.is-live [data-anim="2"]{transition-delay:.14s}
.slide.is-live [data-anim="3"]{transition-delay:.23s}
.slide.is-live [data-anim="4"]{transition-delay:.32s}
.slide.is-live [data-anim="5"]{transition-delay:.41s}
.slide.is-live [data-anim="6"]{transition-delay:.50s}

/* ------------------------------------------------------------- typography */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  border:1px solid var(--edge);background:rgba(0,255,255,.06);border-radius:99px;padding:6px 13px;
  text-shadow:0 0 10px rgba(0,255,255,.6);transition:border-color .3s,box-shadow .3s}
.eyebrow:hover{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,255,255,.35)}
.eyebrow .dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.eyebrow .dot::before,.eyebrow .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--cyan);animation:radarPulse 2.4s cubic-bezier(.2,.8,.2,1) infinite}
.eyebrow .dot::after{animation-delay:1.2s}
@keyframes radarPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.8);opacity:0}}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.06;letter-spacing:-.01em}
h1{font-size:clamp(30px,6.4vw,68px);font-weight:900;color:#fff;text-shadow:0 0 26px rgba(0,255,255,.35),0 0 70px rgba(0,255,255,.14)}
h2{font-size:clamp(24px,4.4vw,44px);font-weight:800;color:#fff;text-shadow:0 0 22px rgba(0,255,255,.28)}
h3{font-size:clamp(15px,1.7vw,19px);font-weight:700;color:#fff}
.neon{
  background:linear-gradient(100deg,var(--cyan) 0%,var(--cyan-2) 25%,#fff 50%,var(--gold) 75%,var(--cyan) 100%);
  background-size:250% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(0,255,255,.65));
  animation:neonFlow 6s linear infinite}
@keyframes neonFlow{0%{background-position:0% center}100%{background-position:250% center}}
.sub{font-size:clamp(13px,1.55vw,17px);line-height:1.62;color:var(--muted);max-width:64ch}
.mono{font-family:var(--font-mono)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(18px,3vh,34px)}
.sec-head .rule{height:2px;width:120px;background:linear-gradient(90deg,var(--cyan),var(--gold),transparent);box-shadow:0 0 12px var(--cyan-dim);animation:rulePulse 4s ease-in-out infinite alternate}
@keyframes rulePulse{0%{width:100px;opacity:.7}100%{width:160px;opacity:1}}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 22px;border-radius:12px;border:1px solid var(--edge);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .24s,filter .24s,background .24s;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn:active{transform:translateY(0) scale(.96)}
.btn::after{content:"";position:absolute;top:-50%;left:-80%;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(25deg);pointer-events:none;animation:btnSheen 5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes btnSheen{0%,70%{left:-80%}100%{left:160%}}
.btn-primary{color:var(--ink);background:linear-gradient(135deg,var(--cyan),#06a9c9);border-color:transparent;
  box-shadow:0 0 22px rgba(0,255,255,.42),0 8px 30px rgba(0,255,255,.14)}
.btn-primary:hover{box-shadow:0 0 36px rgba(0,255,255,.78),0 10px 34px rgba(0,255,255,.3);filter:brightness(1.1)}
.btn-ghost{color:var(--cyan);background:rgba(0,255,255,.05);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(0,255,255,.14);box-shadow:0 0 24px rgba(0,255,255,.35);border-color:var(--cyan-dim)}
.btn-gold{color:var(--ink);background:linear-gradient(135deg,var(--gold),#d9a520);border-color:transparent;
  box-shadow:0 0 22px rgba(245,197,66,.35)}
.btn-gold:hover{box-shadow:0 0 34px rgba(245,197,66,.7),0 10px 34px rgba(245,197,66,.25);filter:brightness(1.08)}
.btn-group{display:flex;flex-wrap:wrap;gap:12px}

/* ============================== RING (circular progress motif) ============= */
.ring{
  --size:300px; --p:72; --thick:14px; --tick:2.6deg;
  position:relative;width:var(--size);height:var(--size);border-radius:50%;flex:none;
  background:
    conic-gradient(from -90deg, var(--cyan) 0 calc(var(--p)*1%), var(--navy) calc(var(--p)*1%) 100%);
  box-shadow:0 0 40px rgba(0,255,255,.28),inset 0 0 40px rgba(0,255,255,.14);
  transition:background .9s cubic-bezier(.3,0,.2,1);
  display:grid;place-items:center}
/* inner cut-out -> makes it a ring */
.ring::before{content:"";position:absolute;inset:var(--thick);border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #001337 0%, var(--ink) 72%);
  box-shadow:inset 0 0 30px rgba(0,255,255,.18)}
/* segmented ticks, outer band only */
.ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from -90deg, var(--ink) 0 var(--tick), transparent var(--tick) 12deg);
  mask:radial-gradient(circle, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick)) calc(50% - 1px), transparent calc(50% - 1px));
  -webkit-mask:radial-gradient(circle, transparent calc(50% - var(--thick)), #000 calc(50% - var(--thick)) calc(50% - 1px), transparent calc(50% - 1px));
  opacity:.95}
.ring .center{position:relative;z-index:4;text-align:center;font-family:var(--font-display);
  color:var(--cyan);text-shadow:0 0 22px rgba(0,255,255,.85)}
.ring .center b{display:block;font-size:calc(var(--size) * .245);line-height:.92;font-weight:900}
.ring .center span{display:block;font-family:var(--font-mono);font-size:calc(var(--size) * .058);
  letter-spacing:.24em;opacity:.92;margin-top:6px}

/* hero ring center for logo */
.ring-hero .center.hero-logo-center{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;position:relative;z-index:6;pointer-events:auto}

/* electrified logo elements */
.hero-electric-canvas{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:130%;height:130%;pointer-events:none;z-index:7}
.electric-corona{
  position:absolute;inset:-8%;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(0,255,255,.32) 0%,rgba(0,140,255,.16) 48%,transparent 72%);
  filter:blur(18px);
  animation:electricCoronaPulse 2.4s ease-in-out infinite alternate, electricCoronaFlicker .12s steps(2,start) infinite}
.electric-shockwave{
  position:absolute;inset:-2px;border-radius:50%;pointer-events:none;z-index:3;
  border:1.5px dashed rgba(0,255,255,.7);
  box-shadow:0 0 28px rgba(0,255,255,.48),inset 0 0 22px rgba(0,255,255,.32);
  animation:electricRingSpin 12s linear infinite, electricShockwaveSurge 3s ease-in-out infinite alternate}

.hero-logo-img{
  width:clamp(220px,42vw,390px);height:clamp(220px,42vw,390px);
  max-width:90%;max-height:90%;object-fit:contain;
  position:relative;z-index:5;
  filter:
    drop-shadow(0 0 16px rgba(0,255,255,.95))
    drop-shadow(0 0 38px rgba(0,210,255,.75))
    drop-shadow(0 0 70px rgba(0,110,255,.5))
    drop-shadow(0 0 110px rgba(245,197,66,.3));
  animation:heroLogoLevitate 6s ease-in-out infinite, electricHum 2.8s ease-in-out infinite;
  transform-origin:center center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s ease;
  user-select:none;cursor:pointer}
.hero-logo-img:hover{
  transform:scale(1.06) rotate(1.5deg);
  filter:
    drop-shadow(0 0 28px rgba(255,255,255,1))
    drop-shadow(0 0 52px rgba(0,255,255,1))
    drop-shadow(0 0 90px rgba(0,180,255,.92))
    drop-shadow(0 0 135px rgba(245,197,66,.75))
    brightness(1.15)}
.hero-logo-img:active{
  transform:scale(1.02);
  filter:
    drop-shadow(0 0 40px rgba(255,255,255,1))
    drop-shadow(0 0 75px rgba(0,255,255,1))
    drop-shadow(0 0 125px rgba(0,120,255,1))
    brightness(1.35)}

@keyframes heroLogoLevitate{
  0%,100%{transform:translateY(0px) rotate(0deg)}
  25%{transform:translateY(-8px) rotate(1deg)}
  50%{transform:translateY(-2px) rotate(-0.5deg)}
  75%{transform:translateY(-10px) rotate(-1deg)}
}

@keyframes electricHum{
  0%,100%{
    transform:translateY(0) rotate(0deg);
    filter:drop-shadow(0 0 16px rgba(0,255,255,.92)) drop-shadow(0 0 38px rgba(0,210,255,.7)) drop-shadow(0 0 70px rgba(0,110,255,.45)) drop-shadow(0 0 100px rgba(245,197,66,.25));
  }
  3%{
    transform:translate(-1.2px, 1px) rotate(-0.3deg);
    filter:drop-shadow(0 0 28px rgba(255,255,255,.98)) drop-shadow(0 0 54px rgba(0,255,255,.95)) drop-shadow(0 0 90px rgba(0,180,255,.75)) drop-shadow(0 0 120px rgba(245,197,66,.45)) brightness(1.2);
  }
  6%{
    transform:translate(1px, -0.8px) rotate(0.2deg);
  }
  9%{
    transform:translate(0, 0) rotate(0deg);
  }
  38%{
    transform:translate(0.8px, 0.6px) rotate(-0.2deg);
    filter:drop-shadow(0 0 22px rgba(0,255,255,.88)) drop-shadow(0 0 44px rgba(0,210,255,.68));
  }
  40%{
    transform:translate(-1.4px, -0.8px) rotate(0.4deg) scale(1.012);
    filter:drop-shadow(0 0 36px rgba(255,255,255,1)) drop-shadow(0 0 65px rgba(0,255,255,1)) drop-shadow(0 0 95px rgba(0,140,255,.85)) drop-shadow(0 0 130px rgba(245,197,66,.55)) brightness(1.22);
  }
  43%{
    transform:translate(0, 0) scale(1);
  }
  75%{
    transform:translate(0, 0);
  }
  76%{
    transform:translate(-0.8px, 0.8px) rotate(-0.3deg);
    filter:drop-shadow(0 0 30px rgba(255,255,255,.95)) drop-shadow(0 0 58px rgba(0,255,255,.92)) brightness(1.15);
  }
  78%{
    transform:translate(0, 0);
  }
}

@keyframes electricCoronaPulse{
  0%{transform:scale(0.96);opacity:0.65}
  100%{transform:scale(1.04);opacity:1}
}

@keyframes electricCoronaFlicker{
  0%{opacity:0.75}
  100%{opacity:0.95}
}

@keyframes electricRingSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

@keyframes electricShockwaveSurge{
  0%{box-shadow:0 0 20px rgba(0,255,255,.35),inset 0 0 16px rgba(0,255,255,.2);border-color:rgba(0,255,255,.45)}
  100%{box-shadow:0 0 38px rgba(0,255,255,.75),inset 0 0 28px rgba(0,255,255,.5);border-color:rgba(0,255,255,.9)}
}

/* orbiting rings for hero / pricing depth */
.orbit{position:absolute;left:50%;border-radius:50%;transform:translateX(-50%);pointer-events:none}
.ring-hero .o1{width:118%;height:118%;top:-9%;border:2px solid rgba(0,255,255,.16);
  border-top-color:var(--cyan);border-left-color:rgba(0,255,255,.5);animation:spin 9s linear infinite}
.ring-hero .o1::after{content:"";position:absolute;top:-4px;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 14px var(--cyan),0 0 22px #fff}
.ring-hero .o2{width:142%;height:142%;top:-21%;border:1px dashed rgba(245,197,66,.28);animation:spin 22s linear infinite reverse}
.ring-hero .o2::after{content:"";position:absolute;bottom:-4px;left:50%;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 12px var(--gold),0 0 20px #fff}
.ring-hero .o3{width:170%;height:170%;top:-35%;border:1px solid rgba(0,255,255,.09);animation:spin 40s linear infinite}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.ring-hero{--size:clamp(260px,46vw,450px);--thick:clamp(12px,1.8vw,20px)}
.ring-hero .halo{position:absolute;inset:-28%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,255,255,.4),transparent 30%,rgba(245,197,66,.25) 55%,transparent 80%,rgba(0,255,255,.4));
  filter:blur(18px);animation:spin 24s linear infinite;opacity:.32;z-index:-1;will-change:transform}

/* mini ring inside cards */
.ring-mini{--size:58px;--thick:5px;--p:60}
.ring-mini::before{inset:5px}
.ring-mini .center b{font-size:14px}
.ring-mini .center span{display:none}

/* =============================== SLIDE 1 — HERO ========================== */
.hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(20px,4vw,54px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);align-items:flex-start}
.hero h1{max-width:15ch}
.hero .sub{max-width:52ch}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.stat{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--edge);border-radius:99px;padding:7px 13px;background:rgba(0,20,45,.5);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.stat:hover{transform:translateY(-2px) scale(1.04);border-color:var(--cyan);box-shadow:0 0 16px rgba(0,255,255,.35)}
.stat b{color:var(--cyan);text-shadow:0 0 10px rgba(0,255,255,.6)}
.hero-ringwrap{display:grid;place-items:center;position:relative;min-height:min(56vh,460px)}
.device-caption{margin-top:16px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;text-align:center}
.device-caption b{color:var(--gold)}

/* ============================ SLIDE 2 — AGENT STACK ====================== */
.stack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:stretch}
.stack .col{position:relative;padding:clamp(16px,2.2vw,26px);border-radius:16px;
  border:1px solid var(--edge);background:linear-gradient(180deg,rgba(0,25,55,.62),rgba(0,10,26,.62));
  margin:0 clamp(4px,1vw,10px);transition:.3s;overflow:hidden}
.stack .col::before{content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;
  background:linear-gradient(160deg,var(--cyan-dim),transparent 42%,var(--gold-dim));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:.3s}
.stack .col:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(0,255,255,.18)}
.stack .col:hover::before{opacity:1}
.stack .col .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:radial-gradient(circle at 30% 25%,rgba(0,255,255,.3),rgba(0,255,255,.04));
  border:1px solid var(--edge);color:var(--cyan);font-family:var(--font-display);font-size:17px;font-weight:900;
  text-shadow:0 0 14px rgba(0,255,255,.8)}
.stack .col .role{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px}
.stack .col p{font-size:13px;line-height:1.6;color:var(--muted);margin:8px 0 0}
/* rotating separators between the columns */
.stack .sep{position:absolute;top:8%;bottom:8%;width:1px;left:0;
  background:linear-gradient(180deg,transparent,var(--cyan-dim),transparent);opacity:.5}
.stack .sep::after{content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px var(--gold);animation:rail 3.4s ease-in-out infinite}
@keyframes rail{0%,100%{top:0}50%{top:calc(100% - 5px)}}

/* ========================== SLIDE 3 — LIBRARY ============================ */
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.lib-card{position:relative;display:flex;gap:14px;align-items:center;
  padding:clamp(12px,1.5vw,18px);border-radius:14px;border:1px solid var(--edge);
  background:linear-gradient(150deg,rgba(0,28,60,.6),rgba(0,8,20,.66));
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;overflow:hidden;
  transform:perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))}
.lib-card::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(220px 90px at var(--mx, 12%) var(--my, 0%),rgba(0,255,255,.22),transparent 70%);transition:opacity .3s}
.lib-card:hover{transform:perspective(800px) translateY(-5px) scale(1.02);border-color:var(--cyan);box-shadow:0 18px 48px rgba(0,255,255,.24)}
.lib-card h3{font-size:14.5px}
.lib-card .tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;margin-top:5px;display:block}
.lib-card p{font-size:11.5px;line-height:1.5;color:var(--muted);margin:7px 0 0}

/* ========================== SLIDE 4 — AGENTS ============================ */
.rail-wrap{position:relative;overflow:hidden;margin:0 calc(var(--pad) * -1);padding:6px 0 14px;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rail{display:flex;gap:16px;width:max-content;animation:marquee 46s linear infinite}
.rail-wrap:hover .rail,.rail-wrap:focus-within .rail{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.agent{width:min(78vw,290px);flex:none;position:relative;border-radius:18px;padding:18px;
  border:1px solid var(--edge);background:linear-gradient(170deg,rgba(0,30,64,.74),rgba(0,7,18,.82));
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;overflow:hidden;
  transform:perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))}
.agent::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--gold),transparent);opacity:.75}
.agent:hover{transform:perspective(800px) translateY(-8px) scale(1.025);border-color:var(--cyan);box-shadow:0 24px 58px rgba(0,255,255,.26)}
.agent .top{display:flex;align-items:center;gap:14px}
.agent .who{min-width:0;flex:1}
.agent .who-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.agent-live-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  color:var(--cyan);background:rgba(0,255,255,.1);border:1px solid rgba(0,255,255,.25);border-radius:99px;padding:2px 7px}
.live-dot{width:5px;height:5px;border-radius:50%;background:#00ff88;box-shadow:0 0 8px #00ff88;animation:radarPing 1.8s ease-in-out infinite}
@keyframes radarPing{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.agent .who b{display:block;font-family:var(--font-display);font-size:19px;color:#fff;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(0,255,255,.45)}
.agent .who i{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;color:var(--gold);
  text-transform:uppercase;display:block;margin-top:4px}
.agent dl{margin:15px 0 0;display:grid;gap:8px}
.agent dt{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.agent dd{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--text)}
.agent .btn{width:100%;margin-top:16px;padding:11px 16px;font-size:11px}
.agent .lvl{position:relative;flex:none}

/* ======================== SLIDE 5 — HOW IT WORKS ======================== */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,30px)}
.steps .spine{position:absolute;left:0;right:0;top:34px;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan-dim) 12%,var(--gold-dim) 88%,transparent);opacity:.7;overflow:hidden}
.steps .spine::after{
  content:"";position:absolute;top:-2px;bottom:-2px;width:120px;
  background:linear-gradient(90deg,transparent,var(--cyan),#fff,var(--gold),transparent);
  box-shadow:0 0 16px var(--cyan),0 0 24px var(--gold);
  animation:spineEnergy 3.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes spineEnergy{0%{left:-120px;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}
.step{position:relative;padding-top:0}
.step .node{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;position:relative;
  margin:0 auto clamp(14px,2.4vh,24px);background:radial-gradient(circle at 34% 30%,rgba(0,255,255,.34),rgba(0,8,20,.9));
  border:1px solid var(--cyan-dim);font-family:var(--font-display);font-size:23px;font-weight:900;color:var(--cyan);
  box-shadow:0 0 30px rgba(0,255,255,.35);animation:bob 4.4s ease-in-out infinite;transition:transform .3s,box-shadow .3s}
.step:hover .node{transform:translateY(-4px) scale(1.08);box-shadow:0 0 45px rgba(0,255,255,.6)}
.step:nth-child(3) .node{animation-delay:.35s}
.step:nth-child(4) .node{animation-delay:.7s}
@keyframes bob{50%{transform:translateY(-11px)}}
.step .node::after{content:"";position:absolute;inset:-11px;border-radius:50%;
  border:1px dashed rgba(0,255,255,.3);animation:spin 18s linear infinite}
.step .card{border-radius:16px;padding:clamp(14px,1.8vw,22px);border:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(0,26,56,.6),rgba(0,8,20,.7));text-align:center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.step .card:hover{transform:translateY(-5px) scale(1.02);border-color:var(--cyan);box-shadow:0 20px 48px rgba(0,255,255,.22)}
.step .card h3{margin-bottom:8px}
.step .card p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}
.step .layer{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);display:block;margin-top:11px}

/* ========================== SLIDE 6 — PRICING =========================== */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);align-items:stretch}
.tier{position:relative;border-radius:20px;padding:clamp(18px,2.2vw,28px);
  border:1px solid var(--edge);background:linear-gradient(180deg,rgba(0,24,52,.72),rgba(0,6,16,.84));
  display:flex;flex-direction:column;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .32s;overflow:hidden}
.tier .bgring{position:absolute;right:-30%;bottom:-38%;width:250px;height:250px;opacity:.3;pointer-events:none}
.tier:hover{transform:translateY(-8px) scale(1.02);border-color:var(--cyan-dim);box-shadow:0 28px 70px rgba(0,255,255,.24)}
.tier.featured{border-color:var(--gold);box-shadow:0 0 0 1px rgba(245,197,66,.45),0 22px 70px rgba(245,197,66,.22),0 0 30px rgba(0,255,255,.15);
  animation:featuredPulse 4s ease-in-out infinite alternate}
@keyframes featuredPulse{
  0%{box-shadow:0 0 0 1px rgba(245,197,66,.45),0 20px 60px rgba(245,197,66,.18),0 0 20px rgba(0,255,255,.1)}
  100%{box-shadow:0 0 0 1.5px rgba(245,197,66,.75),0 28px 80px rgba(245,197,66,.3),0 0 35px rgba(0,255,255,.28)}
}
.tier .flag{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:linear-gradient(135deg,var(--gold),#ffe17d);border-radius:99px;padding:4px 10px;font-weight:700;
  box-shadow:0 0 16px rgba(245,197,66,.6);animation:flagGlow 2.5s ease-in-out infinite alternate}
@keyframes flagGlow{0%{transform:scale(1)}100%{transform:scale(1.05);box-shadow:0 0 22px rgba(245,197,66,.85)}}
.tier h3{font-family:var(--font-display);font-size:19px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.tier .price{font-family:var(--font-display);font-size:clamp(34px,4.6vw,52px);font-weight:900;color:var(--cyan);
  margin:12px 0 2px;text-shadow:0 0 26px rgba(0,255,255,.55)}
.tier .price small{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.1em}
.tier .blurb{font-size:12.5px;line-height:1.55;color:var(--muted);margin:8px 0 14px}
.tier ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;flex:1}
.tier li{position:relative;padding-left:22px;font-size:12.5px;line-height:1.5;color:var(--text)}
.tier li::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,var(--cyan),rgba(0,255,255,.1));box-shadow:0 0 10px var(--cyan-dim)}
.tier.featured li::before{background:radial-gradient(circle,var(--gold),rgba(245,197,66,.1));box-shadow:0 0 10px var(--gold-dim)}
.tier .btn{width:100%}

/* =========================== SLIDE 6 — VIP CLOSER =========================== */
.closer{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.5vh,16px)}
.closer .big{font-family:var(--font-display);font-size:clamp(22px,4.2vw,44px);font-weight:900;color:#fff;
  text-shadow:0 0 26px rgba(0,255,255,.35);max-width:24ch;line-height:1.15;margin:0}
.closer .big .vip-brand-name{display:block;letter-spacing:.06em}
.closer .big .vip-tier-name{display:block;margin-top:clamp(4px,0.8vh,8px);white-space:nowrap}
.closer .ringwrap{position:relative;display:grid;place-items:center}
.closer .ring-hero{--size:clamp(170px, 24vh, 250px);--thick:clamp(9px, 1.3vw, 15px)}

.closer-logo-center{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;position:relative;z-index:6;pointer-events:auto}

.vip-logo-aura{
  position:absolute;inset:-12%;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(245,197,66,.2) 0%,rgba(0,255,255,.16) 45%,transparent 72%);
  filter:blur(14px);animation:vipAuraPulse 4s ease-in-out infinite alternate}
@keyframes vipAuraPulse{
  0%{transform:scale(0.94);opacity:0.5}
  100%{transform:scale(1.06);opacity:0.95}}

.vip-logo-img{
  width:clamp(88px, 13.5vh, 140px);height:clamp(88px, 13.5vh, 140px);
  max-width:76%;max-height:76%;object-fit:contain;
  position:relative;z-index:4;user-select:none;transform-origin:center center;
  filter:drop-shadow(0 0 12px rgba(0,255,255,.65)) drop-shadow(0 0 22px rgba(245,197,66,.4));
  animation:vipLogoFloat 5.5s ease-in-out infinite alternate, vipGlowBreathe 3.5s ease-in-out infinite alternate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease;cursor:pointer}
.vip-logo-img:hover{
  transform:translateY(-4px) scale(1.06);
  filter:drop-shadow(0 0 18px rgba(0,255,255,.9)) drop-shadow(0 0 32px rgba(245,197,66,.7)) brightness(1.1)}
@keyframes vipLogoFloat{
  0%{transform:translateY(0px)}
  100%{transform:translateY(-5px)}}
@keyframes vipGlowBreathe{
  0%{filter:drop-shadow(0 0 10px rgba(0,255,255,.5)) drop-shadow(0 0 18px rgba(245,197,66,.3))}
  100%{filter:drop-shadow(0 0 16px rgba(0,255,255,.85)) drop-shadow(0 0 28px rgba(245,197,66,.6))}}

.vip-copy-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:640px}
.vip-copy-wrap .sub{margin:0 auto;max-width:58ch;font-size:clamp(12px, 1.35vw, 15px);line-height:1.55}

.vip-waitlist-form{
  width:100%;max-width:480px;margin:2px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.vip-input-wrap{
  position:relative;display:flex;align-items:center;width:100%;
  background:rgba(0,18,48,.82);border:1px solid var(--edge);border-radius:14px;
  padding:4px 5px 4px 14px;backdrop-filter:blur(8px);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease}
.vip-input-wrap:focus-within{
  border-color:var(--cyan);
  box-shadow:0 0 22px rgba(0,255,255,.32), inset 0 0 10px rgba(0,255,255,.1);
  background:rgba(0,26,68,.92)}
.vip-mail-icon{flex:none;color:var(--cyan-dim);margin-right:10px;transition:color .25s ease}
.vip-input-wrap:focus-within .vip-mail-icon{color:var(--cyan)}
.vip-input{
  flex:1;background:transparent;border:none;outline:none;color:#fff;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;
  padding:10px 8px 10px 0;min-width:0}
.vip-input::placeholder{color:var(--muted);opacity:.75}
.vip-submit-btn{
  flex:none;padding:10px 18px;font-size:11px;letter-spacing:.1em;
  border-radius:10px;white-space:nowrap;cursor:pointer;
  box-shadow:0 0 16px rgba(0,255,255,.35)}
.vip-submit-btn:hover{box-shadow:0 0 24px rgba(0,255,255,.65)}
.vip-perks-note{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:var(--muted);margin:1px 0 0;opacity:.85}
.vip-form-msg{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;
  min-height:16px;transition:all .3s ease}
.vip-form-msg.success{color:var(--gold);text-shadow:0 0 12px rgba(245,197,66,.65)}
.vip-form-msg.error{color:#ff5c77;text-shadow:0 0 12px rgba(255,92,119,.5)}

.footlinks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:2px}
.footlinks a{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--edge);border-radius:99px;padding:5px 12px;transition:.25s}
.footlinks a:hover{color:var(--cyan);border-color:var(--cyan-dim);background:var(--cyan-ghost)}
.copyright{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:rgba(126,166,194,.6);text-transform:uppercase;margin:0}

/* ---------------------------------------------------------------- dots nav */
.dots{position:fixed;right:clamp(8px,1.6vw,20px);top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:11px}
.dots button{width:11px;height:11px;border-radius:50%;border:1px solid var(--cyan-dim);position:relative;transition:.28s}
.dots button::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cyan);opacity:0;transition:.28s}
.dots button[aria-current="true"]{border-color:var(--gold);box-shadow:0 0 14px var(--gold-dim);transform:scale(1.25)}
.dots button[aria-current="true"]::after{opacity:1;background:var(--gold)}
.dots button:hover{transform:scale(1.2)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;text-align:left;gap:22px}
  .hero-ringwrap{min-height:auto;order:-1}
  .stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stack .sep{display:none}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps .spine{display:none}
  .tiers{grid-template-columns:1fr;gap:14px}
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--rail-top:56px;--rail-bot:50px}
  .toprail nav .tlink:not(.cta){display:none}
  .lib-grid{grid-template-columns:1fr}
  .stack{grid-template-columns:1fr}
  .dots{display:none}
  .botrail .hint{display:none}
  h1{font-size:clamp(28px,9vw,40px)}
  .slide{padding-top:calc(var(--rail-top) + 16px)}
}
@media (max-height:560px){.dots{display:none}}

/* ----------------------------------------------------------- a11y / motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .deck{scroll-behavior:auto}
  [data-anim]{opacity:1;transform:none}
  #fx,.bg .grid,.bg .glowline{display:none}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}