/* ══════════════════════════════════════════════════════════════════════════
   SocialStack homepage v3: immersive HUD layout over the persistent SI World.
   Mobile-first. Shared tokens + HUD primitives live at the top (documented in
   v2/NOTES.md for the grounded-half fragments). Transplanted blocks (organism,
   chat, cookie, pricing, founder, FAQ) keep their own markup/JS byte-identical;
   they are restyled here through CSS only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#04050a; --c:#00d4ff; --g:#00ff88; --p:#7b2ff7; --r:#ff4d6d; --tx:#e8f2ff; --mu:#4a6080;
  --tx2:#9db4cc; --tx3:#7489a6; --p2:#b66dff;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --line-c:rgba(0,212,255,.28); --line-bright:rgba(0,212,255,.28);
  --glass:rgba(9,13,22,.58); --glass-strong:rgba(8,11,18,.78); --glass-solid:rgba(8,11,18,.9);
  --blur:0px;
  --grad:linear-gradient(135deg,#00d4ff,#7b2ff7);
  --grad-text:linear-gradient(100deg,#00d4ff 10%,#b66dff 90%);
  --f-display:'Syne',sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-head:var(--f-display); --font-body:var(--f-body); --font-mono:var(--f-mono);
  --r-sm:10px; --r-md:18px; --r-lg:26px; --r-xl:32px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:20px; --wrap:1320px; --hud-h:60px; --nav-h:60px;
  --cookie-h:0px;
}
@media(min-width:768px){:root{--gutter:32px;--hud-h:68px;--nav-h:68px;}}
@media(min-width:1024px){:root{--gutter:48px;--hud-h:76px;--nav-h:76px;--blur:18px;}}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;background:var(--bg);}
body{
  background:var(--bg);color:var(--tx);font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
  text-rendering:optimizeLegibility;
}
@media(min-width:1024px){body{font-size:17px;}}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;}
h1,h2,h3{font-family:var(--f-display);font-weight:800;}
::selection{background:rgba(0,212,255,.3);color:#fff;}
section[id],div[id="faq"],#pricing{scroll-margin-top:var(--hud-h);}
section.ch[id]{scroll-margin-top:0;}
.skip-link{position:fixed;top:-100px;left:16px;z-index:10001;background:var(--c);color:#04050a;padding:12px 22px;border-radius:10px;font-weight:700;font-size:14px;transition:top .2s;}
.skip-link:focus{top:16px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px;}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:6px;}

/* ── HUD PRIMITIVES (shared) ───────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.hud-label{font-family:var(--f-mono);font-size:11px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);font-weight:400;}
.hud-label--c{color:var(--c);}
.hud-idx{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--c);font-variant-numeric:tabular-nums;white-space:nowrap;}
.eyebrow{font-family:var(--f-mono);font-size:11px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:var(--c);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 18px;}
.eyebrow__idx{color:var(--tx2);letter-spacing:.08em;padding-right:12px;border-right:1px solid var(--line-2);}
.eyebrow--center{justify-content:center;}
.hud-rule{display:block;height:1px;flex:1;background:linear-gradient(90deg,var(--line-2),rgba(255,255,255,.04));transform-origin:0 50%;}
.io .hud-rule[data-reveal]:not(.is-in){transform:scaleX(0);}
.xh{position:absolute;width:9px;height:9px;pointer-events:none;
  background:linear-gradient(currentColor,currentColor) 50% 0/1px 100% no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat;color:rgba(232,242,255,.5);}
.xh--c{color:var(--c);}
.ticks{position:relative;}
.ticks::after{content:'';position:absolute;inset:-1px;pointer-events:none;--tk:rgba(0,212,255,.55);--tl:9px;
  background:
    linear-gradient(var(--tk),var(--tk)) 0 0/var(--tl) 1px, linear-gradient(var(--tk),var(--tk)) 0 0/1px var(--tl),
    linear-gradient(var(--tk),var(--tk)) 100% 0/var(--tl) 1px, linear-gradient(var(--tk),var(--tk)) 100% 0/1px var(--tl),
    linear-gradient(var(--tk),var(--tk)) 0 100%/var(--tl) 1px, linear-gradient(var(--tk),var(--tk)) 0 100%/1px var(--tl),
    linear-gradient(var(--tk),var(--tk)) 100% 100%/var(--tl) 1px, linear-gradient(var(--tk),var(--tk)) 100% 100%/1px var(--tl);
  background-repeat:no-repeat;}
.glass{background-color:var(--glass-solid);border:1px solid var(--line);border-radius:var(--r-lg);}
@media(min-width:1024px){.glass{background-color:var(--glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));}}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;line-height:1.3;letter-spacing:.04em;padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--tx2);}
.chip--c{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.26);color:var(--c);}
.chip--warn{background:rgba(182,109,255,.1);border-color:rgba(182,109,255,.36);color:#d4b0ff;}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:4px;border:1px solid var(--line-2);color:var(--tx);background:rgba(4,5,10,.6);}
.status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--tx2);flex:none;}
.status--meta{border-color:rgba(182,109,255,.45);color:#dcc2ff;}
.status--meta::before{background:var(--p2);box-shadow:0 0 8px var(--p2);}
.status--soon{border-color:rgba(0,212,255,.35);color:#bdefff;}
.status--soon::before{background:var(--c);box-shadow:0 0 8px var(--c);}
.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tags li,.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px 5px 8px;border-radius:3px;border:1px solid rgba(0,212,255,.3);color:#bff3ff;background:rgba(0,212,255,.05);}
.tags li::before,.tag::before{content:'';width:4px;height:4px;background:var(--c);flex:none;}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--tx2);white-space:nowrap;}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--g);box-shadow:0 0 8px var(--g);flex:none;}
.pill--test i{background:var(--c);box-shadow:0 0 8px var(--c);}
.pill.is-approved{color:var(--g);border-color:rgba(0,255,136,.35);}
.grad-text,.gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.caption{font-size:13px;line-height:1.55;color:var(--tx3);}
.caption a{color:var(--c);}
.caption--center{text-align:center;}

/* Buttons (also used by the transplanted pricing markup) */
.btn-primary,.btn-secondary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;
  border-radius:var(--r-pill);font-family:var(--f-body);font-weight:600;font-size:15.5px;line-height:1.1;white-space:nowrap;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s,border-color .3s,color .3s;overflow:hidden;isolation:isolate;
}
.btn-primary{background:var(--grad);color:#04050a;font-weight:700;box-shadow:0 14px 40px -14px rgba(0,212,255,.7),inset 0 1px 0 rgba(255,255,255,.35);}
.btn-primary::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s var(--ease);}
.btn-primary:hover::after{transform:translateX(110%);}
.btn-primary:hover{box-shadow:0 18px 50px -12px rgba(0,212,255,.85),inset 0 1px 0 rgba(255,255,255,.35);}
.btn-secondary{background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--tx);}
.btn-secondary:hover{border-color:var(--line-c);background:rgba(0,212,255,.07);}
.btn__arr{display:inline-block;transition:transform .45s var(--ease);}
a:hover .btn__arr{transform:translateX(3px);}
.btn-secondary:hover .btn__arr{transform:translateY(2px);}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* Reveal system (the page's IntersectionObserver adds .is-in; .io is set once it runs) */
[data-reveal]{transition:opacity .9s var(--ease) var(--d,0ms),transform 1.05s var(--ease) var(--d,0ms);}
.io [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,26px,0);}

/* ── STAGE: world canvas + fallbacks + atmosphere ──────────────────────── */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);overflow:hidden;}
#world{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s var(--ease);}
.world-ready #world{opacity:1;}
#aurora{position:absolute;inset:0;transition:opacity 1.6s var(--ease);}
#aurora i{position:absolute;border-radius:50%;will-change:transform;}
#aurora i:nth-child(1){width:120vmax;height:120vmax;left:30%;top:-55vmax;background:radial-gradient(closest-side,rgba(0,190,255,.2),transparent);}
#aurora i:nth-child(2){width:110vmax;height:110vmax;left:-50vmax;top:35%;background:radial-gradient(closest-side,rgba(123,47,247,.22),transparent);}
#aurora i:nth-child(3){width:70vmax;height:70vmax;left:45%;top:55%;background:radial-gradient(closest-side,rgba(0,255,136,.08),transparent);}
.world-ready #aurora{opacity:0;}
@media(prefers-reduced-motion:no-preference){
  .no-world #aurora i:nth-child(1){animation:auroraA 26s ease-in-out infinite alternate;}
  .no-world #aurora i:nth-child(2){animation:auroraB 32s ease-in-out infinite alternate;}
}
@keyframes auroraA{to{transform:translate3d(-12vmax,8vmax,0);}}
@keyframes auroraB{to{transform:translate3d(10vmax,-10vmax,0);}}
#veil{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 50% 45%,rgba(4,5,10,.62),rgba(4,5,10,.9));will-change:opacity;}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(4,5,10,.62) 100%);}
#grain{display:none;}
@media(min-width:1024px){
  #grain{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
}
.mode-spline #stage{display:none;}
main{position:relative;z-index:2;}

/* ── HUD: top bar ──────────────────────────────────────────────────────── */
.hud-top{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--hud-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gutter);}
.hud-top::before{content:'';position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(4,5,10,.92) 0%,rgba(4,5,10,.6) 60%,rgba(4,5,10,0));opacity:0;transition:opacity .5s var(--ease);}
.hud-top.is-scrolled::before{opacity:1;}
.hud-top__rule{position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);opacity:0;transition:opacity .5s;}
.hud-top.is-scrolled .hud-top__rule{opacity:1;}
#nav-progress{position:absolute;left:0;top:0;height:1px;width:100%;background:linear-gradient(90deg,var(--c),var(--p2));transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 8px rgba(0,212,255,.6);}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:-.01em;min-height:44px;color:var(--tx);}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.brand__mark{width:24px;height:24px;flex:none;overflow:visible;filter:drop-shadow(0 0 7px rgba(0,212,255,.55));}
.brand__word{transition:opacity .4s;}
.tabs{display:none;}
.hud-top__end{display:flex;align-items:center;gap:6px;}
.hud-login{display:none;}
.hud-cta{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:var(--r-pill);background:var(--grad);color:#04050a;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 24px -10px rgba(0,212,255,.8);transition:transform .4s var(--ease);}
.hud-cta::before{content:'';position:absolute;inset:-4px;}
.hud-cta:hover{transform:translateY(-1px);}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:0 6px;color:var(--tx);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
.menu-btn__label{display:inline;}
.menu-btn__icon{position:relative;width:22px;height:10px;display:block;}
.menu-btn__icon i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .45s var(--ease),width .45s var(--ease);}
.menu-btn__icon i:first-child{top:0;}
.menu-btn__icon i:last-child{bottom:0;left:6px;}
.menu-btn:hover .menu-btn__icon i:last-child{left:0;}
@media(max-width:439px){.hud-top{gap:6px;padding:0 14px;}.brand{font-size:15px;gap:7px;}.brand__mark{width:21px;height:21px;}.hud-cta{padding:0 10px;font-size:10px;letter-spacing:.08em;}.hud-top__end{gap:2px;}.menu-btn{gap:7px;padding:0 2px;font-size:10.5px;letter-spacing:.12em;}.menu-btn__icon{width:18px;}}
@media(max-width:359px){.hud-cta{display:none;}}
@media(min-width:768px){.hud-cta{padding:0 18px;}}
@media(min-width:1024px){
  .hud-login{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);transition:color .3s;}
  .hud-login:hover{color:var(--tx);}
  .hud-top__end{gap:10px;}
}
@media(min-width:1280px){
  .tabs{display:flex;align-items:center;gap:clamp(14px,1.6vw,30px);position:absolute;left:50%;transform:translateX(-50%);}
  .tabs a{position:relative;display:inline-flex;align-items:flex-start;gap:5px;padding:14px 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx2);transition:color .3s;white-space:nowrap;}
  .tabs__i{font-size:8.5px;letter-spacing:.06em;color:var(--c);opacity:.75;transform:translateY(-3px);}
  .tabs a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);}
  .tabs a:hover,.tabs a.is-active{color:var(--tx);}
  .tabs a.is-active::after,.tabs a:hover::after{transform:scaleX(1);}
}

/* ── HUD: frame marks, ruler, bottom bar ───────────────────────────────── */
.hud-frame{position:fixed;inset:0;z-index:65;pointer-events:none;}
.reg{position:absolute;width:10px;height:10px;border:0 solid rgba(232,242,255,.4);}
.reg--tl{top:8px;left:8px;border-top-width:1px;border-left-width:1px;}
.reg--tr{top:8px;right:8px;border-top-width:1px;border-right-width:1px;}
.reg--bl{bottom:8px;left:8px;border-bottom-width:1px;border-left-width:1px;}
.reg--br{bottom:8px;right:8px;border-bottom-width:1px;border-right-width:1px;}
.hud-ruler{display:none;}
.hud-bottom{display:none;}
@media(min-width:1024px){
  .reg{width:14px;height:14px;}
  .reg--tl,.reg--tr{top:12px;}.reg--bl,.reg--br{bottom:12px;}.reg--tl,.reg--bl{left:12px;}.reg--tr,.reg--br{right:12px;}
  .hud-ruler{display:block;position:absolute;right:20px;top:50%;height:34vh;width:7px;transform:translateY(-50%);
    background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)) 100% 0/1px 100% no-repeat,
      repeating-linear-gradient(180deg,rgba(255,255,255,.32) 0 1px,transparent 1px calc(100%/8));}
  .hud-ruler::after{content:'';position:absolute;right:0;bottom:-1px;width:7px;height:1px;background:rgba(255,255,255,.32);}
  .hud-ruler__mark{position:absolute;right:-2px;top:0;width:11px;height:2px;background:var(--c);box-shadow:0 0 10px var(--c);transform:translateY(0);}
  .hud-bottom::before{content:'';position:fixed;left:0;right:0;bottom:0;height:120px;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(4,5,10,.94) 18%,rgba(4,5,10,0));}
  .hud-bottom{display:flex;position:fixed;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:65;align-items:center;justify-content:space-between;pointer-events:none;}
  .hud-chapter{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);}
  .hud-chapter__num{color:var(--c);font-variant-numeric:tabular-nums;}
  .hud-chapter__tot{color:var(--tx3);}
  .hud-chapter__dash{display:inline-block;width:26px;height:1px;background:var(--line-2);}
  .hud-scroll{display:flex;align-items:center;gap:12px;margin-right:78px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);transition:opacity .6s;}
  .hud-scroll i{position:relative;width:1px;height:34px;background:var(--line-2);overflow:hidden;}
  .hud-scroll i::after{content:'';position:absolute;left:0;top:0;width:1px;height:12px;background:var(--c);animation:scrollCue 1.8s var(--ease-io) infinite;}
  .hud-scroll.is-off{opacity:0;}
}
@keyframes scrollCue{0%{transform:translateY(-14px);}100%{transform:translateY(36px);}}

/* ── HERO RETICLE (tracks the world core's anchor) ─────────────────────── */
.hero-reticle{position:fixed;left:0;top:0;z-index:1;width:var(--rs,240px);height:var(--rs,240px);pointer-events:none;
  transform:translate3d(calc(var(--rx,50vw) - 50%),calc(var(--ry,30vh) - 50%),0);opacity:var(--ro,0);transition:opacity .5s var(--ease);}
.hero-reticle__ring{width:100%;height:100%;overflow:visible;}
.hero-reticle__ring circle,.hero-reticle__ring path{fill:none;vector-effect:non-scaling-stroke;}
.rt-a{stroke:rgba(0,212,255,.34);stroke-width:1;}
.rt-b{stroke:rgba(232,242,255,.22);stroke-width:1;stroke-dasharray:2 7;transform-origin:50% 50%;transform-box:fill-box;}
.rt-t{stroke:rgba(0,212,255,.7);stroke-width:1;}
.hero-reticle__tag{position:absolute;left:50%;top:-26px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2);white-space:nowrap;}
.hero-reticle__tag i{width:22px;height:1px;background:var(--line-c);}
.hero-reticle__tag::after{content:'';width:22px;height:1px;background:var(--line-c);}
@media(prefers-reduced-motion:no-preference){.rt-b{animation:spinSlow 40s linear infinite;}}
@keyframes spinSlow{to{transform:rotate(360deg);}}
.mode-spline .hero-reticle,.no-world .hero-reticle,.world-ready:not(.world-stub) .hero-reticle{display:none;} /* the real world draws its own reticle + labels */

/* ── MENU (full-screen overlay with a light sweep) ─────────────────────── */
.menu{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;padding:0 var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));
  background:rgba(4,5,10,.975);visibility:hidden;opacity:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .45s var(--ease),visibility 0s linear .45s;}
.menu.open{visibility:visible;opacity:1;transition:opacity .35s var(--ease),visibility 0s;}
.menu__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/calc(100%/6) 100%,
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/100% 96px;}
.menu__sweep{position:absolute;top:-30%;bottom:-30%;left:-80%;width:80%;pointer-events:none;transform:translate3d(0,0,0) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.1) 35%,rgba(232,242,255,.2) 50%,rgba(123,47,247,.12) 65%,transparent);}
.menu.open .menu__sweep{animation:menuSweep 1.2s var(--ease-io) .02s both;}
@keyframes menuSweep{from{transform:translate3d(0,0,0) skewX(-18deg);}to{transform:translate3d(260%,0,0) skewX(-18deg);}}
.menu__head{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--hud-h);flex:none;}
.menu__close{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;justify-content:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx);}
.menu__close svg{width:20px;height:20px;}
.menu__close span{display:none;}
@media(min-width:768px){.menu__close span{display:inline;}}
.menu__links{position:relative;display:flex;flex-direction:column;margin:auto 0;padding:28px 0 20px;}
.menu__links a{position:relative;display:flex;align-items:baseline;gap:14px;padding:8px 0 10px;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:800;font-size:clamp(30px,9vw,56px);line-height:1.02;letter-spacing:-.035em;color:var(--tx);
  opacity:0;transform:translate3d(0,36px,0);transition:opacity .3s,transform .4s var(--ease);}
.menu.open .menu__links a{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(.14s + var(--i)*.055s),transform .9s var(--ease) calc(.14s + var(--i)*.055s);}
.menu__i{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--c);transform:translateY(-.6em);flex:none;min-width:22px;}
.menu__t{transition:color .35s,transform .5s var(--ease);display:inline-block;}
.menu__links a:hover .menu__t{transform:translateX(10px);background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.menu__foot{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0 16px;opacity:0;transition:opacity .4s;}
.menu.open .menu__foot{opacity:1;transition:opacity .7s .5s;}
.menu__login{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-weight:600;font-size:15px;}
.menu__cta{flex:1;max-width:320px;}
.menu__meta{position:relative;color:var(--tx3);font-size:10.5px;}
.menu__links a{max-width:100%;}
@media(min-width:1024px){.menu__links a{font-size:clamp(52px,5.8vw,88px);}.menu__links{padding-left:8vw;}.menu__foot,.menu__meta{padding-left:8vw;}}

/* (custom cursor + preloader: provided by the motion layer, v2/parts/motion) */

/* ══════════════════════════════════════════════════════════════════════════
   CHAPTERS
   ══════════════════════════════════════════════════════════════════════════ */
.ch{position:relative;min-height:100vh;min-height:100svh;padding:calc(var(--hud-h) + 40px) 0 72px;display:flex;flex-direction:column;justify-content:center;}
.ch__head{position:relative;margin-bottom:36px;}
.ch__head--center{text-align:center;display:flex;flex-direction:column;align-items:center;}
.ch__title{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,8.6vw,46px);line-height:1;letter-spacing:-.035em;margin:0 0 18px;max-width:17ch;text-wrap:balance;}
.ch__head--center .ch__title{margin-left:auto;margin-right:auto;}
.ch__sub{font-size:16.5px;line-height:1.6;color:var(--tx2);max-width:36em;}
.ch__head--center .ch__sub{margin:0 auto;}
@media(max-width:767px){.ch__title--sm{font-size:clamp(27px,7.8vw,40px);}}
@media(min-width:768px){.ch__title{font-size:clamp(44px,6.4vw,64px);}}
@media(min-width:1024px){
  .ch{padding:calc(var(--hud-h) + 56px) 0 96px;}
  .ch__title{font-size:clamp(50px,4.9vw,80px);}
  .ch__title--sm{font-size:clamp(40px,3.7vw,60px);}
  .ch__sub{font-size:18px;}
  .ch__head{margin-bottom:48px;}
}
/* soft scrims so copy always reads over the world */
.ch__head::before,.hero__copy::before{content:'';position:absolute;z-index:-1;inset:-40px -60px;pointer-events:none;background:radial-gradient(closest-side,rgba(4,5,10,.66),rgba(4,5,10,0));}

/* ── 01 HERO: brand-first landing (COPY_V2 "ADDED ... brand-first landing") ── */
.hero{padding:var(--hud-h) 0 calc(18px + env(safe-area-inset-bottom,0px));justify-content:flex-start;}
.hero__wrap{position:relative;display:flex;flex-direction:column;align-items:center;}
.hero__stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;
  min-height:calc(100vh - var(--hud-h) - 6px);min-height:calc(100svh - var(--hud-h) - 6px);padding:6px 0 26px;}
.hero__stack::before{content:'';position:absolute;z-index:-1;left:50%;top:64%;width:min(1180px,140%);height:66%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,5,10,.8),rgba(4,5,10,.45) 60%,rgba(4,5,10,0));}
.hero__brand{display:flex;flex-direction:column;align-items:center;font-weight:inherit;}
.wordmark{display:flex;flex-direction:column;align-items:center;gap:16px;}
.wordmark__logo{width:clamp(46px,12.5vw,62px);height:auto;overflow:visible;filter:drop-shadow(0 0 16px rgba(0,212,255,.6));}
.wordmark__logo path{fill:none;stroke:url(#ssg);stroke-width:2.6;stroke-linecap:round;}
.wordmark__logo path:nth-child(2){stroke-opacity:.58;}
.wordmark__logo path:nth-child(3){stroke-opacity:.24;}
.wordmark__text{display:block;font-family:var(--f-display);font-weight:800;font-size:15.4vw;line-height:.86;letter-spacing:-.035em;color:#f4f8ff;
  text-shadow:0 2px 34px rgba(4,5,10,.6);transform-origin:50% 50%;will-change:transform;}
.wm-a,.wm-b{display:block;}
.hero__desc{display:block;margin-top:20px;font-family:var(--f-body);font-weight:500;font-size:clamp(17px,4.9vw,20px);line-height:1.42;letter-spacing:-.01em;color:var(--tx);max-width:21em;}
.hero__ctas{margin-top:26px;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:440px;}
.btn--xl{min-height:58px;font-size:16px;}
.hero__ctas .btn-primary{width:100%;}
@media(prefers-reduced-motion:no-preference){
  .wordmark__logo path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s var(--ease) .05s forwards;}
  .wordmark__logo path:nth-child(2){animation-delay:.17s;}.wordmark__logo path:nth-child(3){animation-delay:.29s;}
}
@keyframes draw{to{stroke-dashoffset:0;}}
/* brandIn/fadeUp removed: the motion layer now owns these reveals via data-mx-dock/-reveal (parts/motion/SPLICE.md #7) */

/* ── Wordmark-forming gate (lead addition, mid-splice): the intro's 3D particles form the "SocialStack"
   letters over the HTML wordmark; #mxWordform starts at 0 and fades in (600ms) on the world's 'formed'
   signal, or a 3.5s JS failsafe (see main.js), so it is never permanently invisible. Every fallback -- no
   WebGL, reduced motion, ?organism=spline -- shows it immediately, with no fade, no flash. Kept in the DOM
   throughout (opacity only, never display:none) for SEO/a11y. */
.mx-wordform{opacity:0;transition:opacity .6s var(--ease);}
html.rm .mx-wordform,html.no-world .mx-wordform,html.mode-spline .mx-wordform,.mx-wordform.is-formed{opacity:1;transition:none;}
@media(prefers-reduced-motion:reduce){.mx-wordform{opacity:1;transition:none;}}

@media(min-width:768px){
  .wordmark__text{font-size:clamp(64px,8.6vw,178px);line-height:.92;}
  .wm-a,.wm-b{display:inline;}
  .hero__desc{font-size:clamp(20px,2.6vw,26px);max-width:none;}
  .hero__ctas{flex-direction:row;justify-content:center;max-width:none;width:auto;}
  .hero__ctas .btn-primary{width:auto;}
}
@media(min-width:1024px){
  .hero__wrap{min-height:calc(100vh - var(--hud-h) - 18px);min-height:calc(100svh - var(--hud-h) - 18px);justify-content:center;padding-bottom:78px;}
  .hero__stack{min-height:0;padding:0;}
  .wordmark{gap:22px;}
  .wordmark__logo{width:clamp(56px,4.4vw,78px);}
  .hero__desc{margin-top:24px;font-size:clamp(20px,1.7vw,30px);}
  .hero__ctas{margin-top:34px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSPLANT RESTYLES + LEGACY GROUNDED HALF (v2 first pass, kept so sections
   8-14 keep rendering until the parallel grounded fragments are spliced in)
   ══════════════════════════════════════════════════════════════════════════ */
/* chat launcher (CSS-only restyle; the markup/JS are byte-identical transplants) */
.chat-bubble{font-size:0!important;width:54px;height:54px;border:1px solid rgba(255,255,255,.18);transition:transform .45s var(--ease),bottom .5s var(--ease),opacity .4s;}
.chat-bubble::before{content:'';width:22px;height:22px;background:#04050a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat;}
.chat-unread{font-size:0;}
@media(max-width:1023px){
  .chat-bubble{left:calc(12px + env(safe-area-inset-left,0px));right:auto;width:56px;height:56px;bottom:calc(12px + var(--cookie-h) + env(safe-area-inset-bottom,0px));}
  .hero-in .chat-bubble:not(:hover){opacity:0;pointer-events:none;transform:translateY(20px);}
  .chat-win{right:10px;left:10px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));height:min(480px,70vh);}
}
/* cookie banner (behaviour transplanted; this is its styling) */
#cookie-banner{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:9500;display:none;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
  padding:12px 12px 12px 16px;border-radius:14px;background:rgba(7,10,17,.98);border:1px solid var(--line-2);box-shadow:0 20px 60px -10px rgba(0,0,0,.9);font-size:13.5px;line-height:1.4;color:var(--tx2);}
.cookie-btns{display:flex;gap:8px;}
.ck-btn{min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;color:var(--tx);font-family:var(--f-body);font-weight:600;font-size:13px;cursor:pointer;transition:border-color .3s,background .3s;}
.ck-btn:hover{border-color:var(--line-c);}
.ck-btn.acc{background:var(--tx);color:#04050a;border-color:var(--tx);}
@media(max-width:1023px){
  #cookie-banner{padding:10px 10px 10px 14px;gap:8px 10px;font-size:12.5px;flex-wrap:nowrap;transition:transform .5s var(--ease);}
  #cookie-banner>span{flex:1 1 auto;min-width:0;}
  .ck-btn{padding:0 14px;}
  .hero-in #cookie-banner{transform:translate3d(0,calc(100% + 40px),0);}
}
@media(min-width:1024px){#cookie-banner{left:50%;right:auto;bottom:22px;transform:translateX(-50%);width:min(560px,calc(100vw - 360px));}}

/* shared utility still used inside the transplanted pricing / founder / FAQ markup (styled further by grounded.css) */
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter);}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *:not(#spline-organism):not(#spline-wrapper),*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;}
  [data-reveal],.reveal{opacity:1!important;transform:none!important;}
  .hero-reticle{transition:none;}
}

/* Syne's "~" reads like a minus at display sizes: the tilde uses Inter */
.tilde{font-family:var(--f-body);font-weight:300;display:inline-block;margin-right:.02em;transform:translateY(-.04em);}

/* ── SISound toggle (world/parts/sound/NOTES.md): page-owned button + hook, HUD top bar next to #hamburger ── */
.si-sound-btn{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;position:relative;background:rgba(255,255,255,.06);
  border:1px solid rgba(92,225,255,.35);color:#5ce1ff;cursor:pointer;padding:0;flex:0 0 auto}
.si-sound-btn:hover{background:rgba(255,255,255,.1)}
.si-sound-btn--on{color:#4dffa6;border-color:rgba(77,255,166,.5)}
.si-sound-bars{display:inline-flex;gap:2px;position:absolute;bottom:6px;left:50%;transform:translateX(-50%)}
.si-sound-bars i{display:block;width:2px;height:4px;background:currentColor;border-radius:1px;
  animation:si-bar .9s ease-in-out infinite}
.si-sound-bars i:nth-child(2){animation-delay:.15s}
.si-sound-bars i:nth-child(3){animation-delay:.3s}
@keyframes si-bar{0%,100%{height:3px}50%{height:9px}}

/* ══════════════════════════════════════════════════════════════════════════
   V4 JOURNEY (BRIEF_LAYOUT_V4.md): seven section cards mounted on SI's spine + their overlays.
   Default = a clean vertical list (no WebGL, reduced motion, ?organism=spline, no JS). html.sx-3d (head boot script:
   WebGL + motion + world mode) AND html.sx-js (main.js is running) = the cards ride a fixed layer, each placed by
   main.js from SIWorld.frame (matrix3d with the projection folded in, so no CSS perspective); #how is then only the
   scroll track. .sx-js also turns the panels into the overlay dialog; without it (no JS, or main.js failed) the panels
   read inline, so the content is never lost.
   ══════════════════════════════════════════════════════════════════════════ */
.sx{position:relative;padding:calc(var(--hud-h) + 44px) 0 88px;}
section.sx[id]{scroll-margin-top:0;}
.sx__head{position:relative;z-index:1;text-align:center;margin-bottom:30px;}
.sx__head::before{content:'';position:absolute;z-index:-1;inset:-34px 0 -20px;pointer-events:none;background:radial-gradient(closest-side,rgba(4,5,10,.78),rgba(4,5,10,0));}
.sx__head .eyebrow{justify-content:center;}
.sx__title{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,9.6vw,68px);line-height:1;letter-spacing:-.035em;}
.sx__title span{display:inline-block;}
.sx__title-b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sx-list{position:relative;display:flex;flex-direction:column;gap:14px;width:100%;max-width:600px;margin:0 auto;padding:0 var(--gutter);}
.sx-item{position:relative;}
.sx-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:20px 22px 10px;border-radius:16px;
  background:linear-gradient(155deg,rgba(15,23,37,.95),rgba(6,9,16,.92));border:1px solid rgba(0,212,255,.22);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .35s var(--ease);}
.sx-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;--tk:rgba(0,212,255,.7);--tl:10px;
  background:linear-gradient(var(--tk),var(--tk)) 0 0/var(--tl) 1px,linear-gradient(var(--tk),var(--tk)) 0 0/1px var(--tl),
    linear-gradient(var(--tk),var(--tk)) 100% 100%/var(--tl) 1px,linear-gradient(var(--tk),var(--tk)) 100% 100%/1px var(--tl);background-repeat:no-repeat;}
.sx-card__n{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--c);}
.sx-card__n b{font-weight:500;}
.sx-card__n i{flex:1;height:1px;background:linear-gradient(90deg,rgba(0,212,255,.45),rgba(0,212,255,0));}
.sx-card__t{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1.02;letter-spacing:-.03em;color:#f4f8ff;}
.sx-card__l{font-size:15px;line-height:1.5;color:var(--tx2);}
.sx-card__go{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);}
.sx-card__go::after{content:'';position:absolute;inset:0;border-radius:16px;}   /* the whole card is the tap target */
.sx-card__go i{position:relative;flex:none;width:20px;height:20px;border:1px solid rgba(0,212,255,.5);border-radius:50%;transition:transform .45s var(--ease),background-color .3s;}
.sx-card__go i::before,.sx-card__go i::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:1px;background:currentColor;transform:translate(-50%,-50%);}
.sx-card__go i::after{transform:translate(-50%,-50%) rotate(90deg);}
.sx-card__go:focus-visible{outline:none;}
.sx-card__go:focus-visible::after{outline:2px solid var(--c);outline-offset:4px;}
.sx-click{display:none;}
@media(hover:hover) and (pointer:fine){
  .sx-tap{display:none;}.sx-click{display:inline;}
  .sx-card:hover{border-color:rgba(0,212,255,.5);}
  .sx-card:hover .sx-card__go i{transform:rotate(90deg);background-color:rgba(0,212,255,.12);}
}
@media(min-width:1024px){.sx-list{max-width:640px;}.sx-card{padding:24px 26px 12px;}.sx-card__t{font-size:34px;}.sx-card__l{font-size:16px;}}

/* 3D mode: the scroll track + the fixed card layer (main.js writes each card's transform + opacity per world frame) */
.sx-3d.sx-js .sx{height:625vh;padding:0;}
@media(min-width:1024px){.sx-3d.sx-js .sx{height:695vh;}}
.sx-3d.sx-js .sx__head{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sx-3d.sx-js .sx-list{position:fixed;inset:0;z-index:3;display:block;max-width:none;margin:0;padding:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);}
.sx-3d.sx-js.sx-ready .sx-list{opacity:1;}
.sx-3d.sx-js.sx-open .sx-list{opacity:0;transition-duration:.3s;}
.sx-3d.sx-js .sx-item{position:absolute;left:0;top:0;width:min(320px,calc(100vw - 80px));transform-origin:0 0;opacity:0;contain:layout style;}
.sx-3d.sx-js .sx-item--flag{width:min(520px,calc(100vw - 48px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));}
/* no backface-visibility:hidden: the world's matrices fold in a projection whose z axis points away from the viewer, so
   Chrome's back-face test can reject a card that faces front; turned-away cards are already at opacity 0 (facing). */
.sx-3d.sx-js .sx-item.is-live{pointer-events:auto;}
.sx-3d.sx-js .sx-card{min-height:196px;}
.sx-3d.sx-js .sx-card--flag{min-height:236px;}
@media(min-width:600px) and (max-width:1023px){.sx-3d.sx-js .sx-item--flag{width:420px;}}
@media(min-width:1024px){.sx-3d.sx-js .sx-item{width:380px;}.sx-3d.sx-js .sx-card{min-height:214px;}
  .sx-3d.sx-js .sx-item--flag{width:475px;}.sx-3d.sx-js .sx-card--flag{min-height:276px;}}

/* ── the overlays: without JS the panels read inline as normal sections ── */
.sx-ov{position:relative;}
.sx-ov__scrim,.sx-ov__x{display:none;}
html:not(.sx-js) .sx-panel{padding:56px var(--gutter) 0;max-width:760px;margin:0 auto;}
html:not(.sx-js) .sx-panel__media{display:none;}
.sx-js .sx-ov{position:fixed;inset:0;height:100vh;height:100dvh;z-index:9700;display:none;touch-action:none;}
.sx-js .sx-ov.is-open{display:flex;align-items:stretch;justify-content:center;}
.sx-js .sx-ov__scrim{display:block;position:absolute;inset:0;background:rgba(3,4,8,.8);}
.sx-js .sx-ov__sheet{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;transform-origin:0 0;
  background:linear-gradient(172deg,#0c1422,#05070d 58%);box-shadow:0 40px 120px -30px rgba(0,0,0,.9);overscroll-behavior:none;}
.sx-js .sx-ov__x{display:flex;position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));width:48px;height:48px;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(8,12,20,.82);border:1px solid var(--line-2);color:var(--tx);transition:border-color .3s,background-color .3s;}
.sx-ov__x i{position:absolute;width:18px;height:1.5px;background:currentColor;transform:rotate(45deg);}
.sx-ov__x i+i{transform:rotate(-45deg);}
.sx-ov__x:hover{border-color:var(--line-c);background:rgba(0,212,255,.1);}
.sx-js .sx-ov__scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.sx-js .sx-panel{display:none;padding:calc(12px + env(safe-area-inset-top,0px)) max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px));}
.sx-js .sx-panel.is-on{display:block;}
html.sx-open{overflow:hidden;scrollbar-gutter:stable;}

.sx-panel__media{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:50px;}
.sx-media{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;}
.sx-media__frame{position:relative;width:min(62vw,calc(52svh * 9 / 16),300px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 28%,rgba(0,212,255,.12),rgba(123,47,247,.07) 46%,#070b13 76%);border:1px solid var(--line-2);
  box-shadow:0 34px 90px -36px rgba(0,212,255,.35),inset 0 0 0 1px rgba(255,255,255,.03);}
.sx-media__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#070b13;}
.sx-media__cap{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;line-height:1.5;color:var(--tx3);text-align:center;}
.sx-media.is-pending .sx-media__frame::after{content:'';position:absolute;left:0;right:0;top:0;height:30%;
  background:linear-gradient(180deg,rgba(0,212,255,0),rgba(0,212,255,.14),rgba(0,212,255,0));animation:sxScan 3.4s var(--ease-io) infinite;}
@keyframes sxScan{from{transform:translateY(-100%);}to{transform:translateY(340%);}}
.sx-panel__media--2{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;}
.sx-panel__media--2 .sx-media__frame{width:min(42vw,calc(44svh * 9 / 16),250px);}
.sx-panel__media--2 .sx-media__cap{flex-basis:100%;}
.sx-panel__text{max-width:600px;margin:0 auto;padding-top:26px;}
.sx-panel--grid .sx-panel__text{padding-top:52px;max-width:none;}
.sx-panel__eye{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);}
.sx-panel__eye b{font-weight:500;padding-right:10px;border-right:1px solid var(--line-2);color:var(--tx2);}
.sx-panel__t{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,10.4vw,60px);line-height:1;letter-spacing:-.035em;color:#f4f8ff;outline:none;}
.sx-panel__lead{margin-top:14px;font-size:18px;line-height:1.5;color:var(--tx2);max-width:34em;}
.sx-panel__status{margin-top:16px;}
.sx-pts{display:flex;flex-direction:column;gap:13px;margin:24px 0 6px;}
.sx-pts li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--tx);}
.sx-pts li::before{content:'';position:absolute;left:0;top:.74em;width:12px;height:2px;background:var(--c);box-shadow:0 0 8px rgba(0,212,255,.8);}
.sx-pts .status{margin-left:6px;vertical-align:2px;}
.sx-panel__cta{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:18px calc(-1 * var(--gutter)) 0;
  padding:18px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,#05070d 64%,rgba(5,7,13,0));}
.sx-panel__go{flex:1 1 220px;min-height:54px;}
.sx-panel__price{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--tx);text-decoration:underline;text-decoration-color:var(--line-c);text-underline-offset:5px;}
.sx-panel__price:hover{color:var(--c);}
.sx-feat{display:grid;grid-template-columns:1fr;gap:10px;margin:26px 0 8px;}
.sx-feat li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);}
.sx-feat__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--c);}
.sx-feat h3{font-family:var(--f-display);font-weight:800;font-size:18px;line-height:1.15;letter-spacing:-.02em;color:#f4f8ff;}
.sx-feat p{font-size:14px;line-height:1.5;color:var(--tx2);}
.sx-feat .status{align-self:flex-start;margin-top:4px;}
.sx-panel__foot{padding-top:8px;}
.sx-panel__foot .caption{margin-top:6px;}
@media(min-width:560px){.sx-feat{grid-template-columns:1fr 1fr;}}
@media(min-width:768px){
  .sx-js .sx-ov.is-open{align-items:center;padding:24px;}
  .sx-js .sx-ov__sheet{width:min(680px,100%);height:auto;max-height:min(920px,100%);border-radius:24px;border:1px solid var(--line-2);}
  .sx-js .sx-ov__x{top:14px;right:14px;}
  .sx-js .sx-panel{padding:0 36px;}
  .sx-panel__cta{margin:18px -36px 0;padding:18px 36px 22px;}
}
@media(min-width:1024px){   /* the sheet sits right; the left of the screen stays for the world's focused hero object */
  .sx-js .sx-ov.is-open{justify-content:flex-end;padding:calc(var(--hud-h) + 6px) 40px 30px;}
  .sx-js .sx-ov__scrim{background:linear-gradient(90deg,rgba(3,4,8,.2),rgba(3,4,8,.46) 36%,rgba(3,4,8,.88) 62%);}
  .sx-js .sx-ov__sheet{width:min(960px,max(64vw,720px));height:auto;max-height:min(780px,100%);border-radius:26px;}
  .sx-js .sx-ov__x{top:16px;right:16px;}
  .sx-feat{grid-template-columns:repeat(3,1fr);gap:12px;}
}
@media(min-width:1200px){  /* wide enough for the clip beside the text */
  .sx-js .sx-panel{padding:44px 48px 0;}
  .sx-js .sx-panel.is-on{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:44px;align-items:start;}
  .sx-js .sx-panel--grid.is-on{display:block;}
  .sx-panel__media{position:sticky;top:0;padding:0 0 30px;}
  .sx-media__frame{width:clamp(220px,21vw,330px);}
  .sx-panel__media--2{max-width:calc(2 * clamp(150px,12vw,184px) + 12px);}
  .sx-panel__media--2 .sx-media__frame{width:clamp(150px,12vw,184px);}
  .sx-panel__text{padding-top:6px;max-width:none;}
  .sx-panel--grid .sx-panel__text{padding-top:0;}
  .sx-panel__t{font-size:clamp(44px,3.8vw,60px);}
  .sx-panel__cta{margin:18px -48px 0 0;padding:20px 48px 26px 0;}
  .sx-panel--grid .sx-panel__cta{margin:18px -48px 0;padding:20px 48px 26px;}
}
@media(min-width:1200px) and (max-height:760px){.sx-media__frame{width:clamp(200px,19vw,280px);}}

/* ── HUD declutter (LAYOUT V4: at most 2 HUD micro-labels): the desktop bottom bar keeps the chapter + scroll cue ── */
.mx-hud-bot .mx-status{display:none;}
.mx-hud-bot .mx-sound{display:none!important;}   /* the SISound toggle (#siSoundToggle, top bar) is the one sound control */

/* Founder 2026-09-28: no "S" mark in the hero; the particle-formed "SocialStack" wordmark IS the brand moment.
   visibility (not display) keeps its box, so the motion layer's dock measurements still work. The top-bar logo stays. */
#heroLogo{visibility:hidden}

/* ══════════════════════════════════════════════════════════════════════════
   V5 (founder review of Preview 2): Log in pill, the SI flagship card, the 3D gradient wordmark, mobile polish.
   Motion-layer elements are restyled here with extra specificity (motion.css loads after this file).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HUD top bar: safe-area insets (landscape notch, standalone status bar) ── */
html .mx-hud-top{height:calc(var(--mx-hh) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  padding-left:max(var(--mx-g),env(safe-area-inset-left,0px));padding-right:max(var(--mx-g),env(safe-area-inset-right,0px));}
@media(max-width:413px){html .mx-hud-top{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));}}
@media(max-width:359px){html .mx-hud-top{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));}}
html .mx-menu{padding-left:max(var(--mx-g),env(safe-area-inset-left,0px));padding-right:max(var(--mx-g),env(safe-area-inset-right,0px));}
html .mx-menu__head{height:calc(var(--mx-hh) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);}

/* ── Log in: a clear pill with a user icon on every width (it was hidden below 1024 px) ── */
.mx-hud-top .mx-login{display:inline-flex;align-items:center;gap:7px;position:relative;min-height:36px;padding:0 14px 0 11px;border-radius:999px;
  border:1px solid rgba(0,212,255,.6);background:rgba(0,212,255,.12);color:#f4f8ff;font-weight:500;letter-spacing:.08em;white-space:nowrap;
  box-shadow:0 0 0 3px rgba(0,212,255,.07),0 0 18px -3px rgba(0,212,255,.6);transition:border-color .3s,background-color .3s,box-shadow .3s;}
.mx-hud-top .mx-login::before{content:'';position:absolute;inset:-5px -3px;}   /* >= 44 px target */
.mx-hud-top .mx-login:hover{border-color:rgba(0,212,255,.95);background:rgba(0,212,255,.2);box-shadow:0 0 0 3px rgba(0,212,255,.1),0 0 24px -2px rgba(0,212,255,.75);}
.mx-hud-top .mx-login:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.mx-login__i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}
@media(max-width:413px){.mx-hud-top .mx-login{gap:5px;padding:0 10px 0 8px;font-size:9.5px;letter-spacing:.05em;}.mx-login__i{width:12px;height:12px;}}
@media(max-width:359px){.mx-hud-top .mx-login{gap:4px;padding:0 8px 0 7px;font-size:9px;letter-spacing:.04em;}}
@media(min-width:414px) and (max-width:767px){.mx-hud-top .mx-login{font-size:10px;padding:0 12px 0 10px;}}
@media(min-width:768px){.mx-hud-top .mx-login{font-size:11px;padding:0 16px 0 13px;}}
@media(min-width:1024px){.mx-hud-top .mx-login{min-height:40px;}}
/* phones: the brand keeps its mark only (the word stays in place, invisible, as the motion layer's dock target) */
@media(max-width:519px){
  .mx-hud-top .mx-brand{min-width:44px;}
  .mx-hud-top .mx-brand__word{position:absolute;left:100%;opacity:0!important;pointer-events:none;}
}
/* phones + tablets: the sound toggle moves to the section-indicator row under the bar (small icon, 44 px target) */
@media(max-width:767px){
  .mx-hud-top #siSoundToggle{position:absolute;top:calc(100% - 3px);right:max(var(--mx-g),env(safe-area-inset-right,0px));width:30px;height:30px;
    transition:opacity .45s,visibility .45s;}
  .mx-hud-top #siSoundToggle::after{content:'';position:absolute;inset:-7px;}
  html:not(.mx-scrolled) .mx-hud-top #siSoundToggle{opacity:0;visibility:hidden;}
}
@media(max-width:413px){.mx-hud-top #siSoundToggle{right:max(14px,env(safe-area-inset-right,0px));}}

/* ── inputs never trigger iOS focus zoom (>= 16 px), bottom-right chat on desktop respects insets ── */
html .chat-inp,html #chat-inp{font-size:16px;}
@media(min-width:1024px){html .chat-bubble{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));}}

/* ── the SI flagship card: larger, an eyebrow, an animated gradient ring in the wordmark palette ── */
.sx-card--flag{background:linear-gradient(155deg,#101c2e,#070b13 70%);border-color:transparent;padding:22px 24px 12px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 64px -24px rgba(0,212,255,.45);}
.sx-card--flag::before{display:none;}
.sx-item--flag{isolation:isolate;}   /* the ring (z-index -1) stays behind the card, not behind the page */
.sx-flag-ring{position:absolute;inset:-1.5px;z-index:-1;border-radius:17.5px;overflow:hidden;pointer-events:none;}
.sx-flag-ring b{position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg,#00d4ff,#2ad4c5,#8b6cff,#4dffa6,#00d4ff);animation:sxRing 8s linear infinite;}
@keyframes sxRing{to{transform:rotate(1turn);}}
.sx-card__eye{font-family:var(--f-mono);font-size:10.5px;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:#bff3ff;margin:-2px 0 -3px;}
.sx-card--flag .sx-card__t{font-size:36px;background:linear-gradient(100deg,#f4f8ff 40%,#bff3ff 70%,#d9cfff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sx-card--flag .sx-card__l{font-size:16.5px;color:var(--tx);}
@media(min-width:1024px){.sx-card--flag{padding:28px 30px 14px;}.sx-card--flag .sx-card__t{font-size:46px;}.sx-card--flag .sx-card__l{font-size:19px;}}
.rm .sx-flag-ring b{animation:none;}

/* ── the hero wordmark: a gradient fill (the static look for reduced motion / no JS) ... ── */
.mx-wordform{display:block;position:relative;text-shadow:none;background:linear-gradient(100deg,#00d4ff 0%,#2ad4c5 30%,#8b6cff 64%,#4dffa6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.wordmark__text{text-shadow:none;}
.mx-wordform:not(.wm3-on){filter:drop-shadow(0 0 22px rgba(0,212,255,.28));}
/* ... and, with JS + motion, per-letter 3D stacks (main.js "WORDMARK 3D"); the real text stays, transparent */
.mx-wordform.wm3-on{background:none;}
.wm3{position:absolute;inset:0;pointer-events:none;perspective:900px;user-select:none;-webkit-user-select:none;}
.wl{position:absolute;display:block;transform-style:preserve-3d;will-change:transform;}
.wl>i{position:absolute;left:0;top:0;width:100%;height:100%;display:block;font-style:normal;white-space:pre;line-height:var(--lh);letter-spacing:0;text-align:left;}
.wl>i::before{content:attr(data-l);}
.wl-f,.wl-g,.wl-s{background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.wl-f,.wl-g{background-size:var(--ww) var(--wh);background-position:var(--gx) var(--gy);}
.wl-f{background-image:linear-gradient(100deg,#00d4ff 0%,#2ad4c5 30%,#8b6cff 64%,#4dffa6 100%);}
.wl-g{background-image:linear-gradient(100deg,#8b6cff 0%,#4dffa6 34%,#00d4ff 67%,#2ad4c5 100%);opacity:0;
  animation:wmShift 11s ease-in-out infinite;animation-delay:calc(var(--i) * -.42s);}
.wl-s{background-image:linear-gradient(105deg,rgba(255,255,255,0) 22%,rgba(255,255,255,.95) 50%,rgba(210,250,255,0) 78%);background-size:100% 100%;
  opacity:0;animation:wmShine 6.5s linear infinite;animation-delay:calc(1.6s + var(--i) * .065s);}
.wl-b{transform:translateZ(-18px);color:#0a2230;-webkit-text-fill-color:#0a2230;
  text-shadow:1px 1px 0 #0c2b3d,2px 2px 0 #0e2f47,3px 3px 0 #112c52,4px 4px 0 #14265a,5px 5px 0 #171f5e,6px 6px 0 #1a1a5c,0 0 34px rgba(0,212,255,.34);}
@keyframes wmShift{0%,100%{opacity:0;}50%{opacity:1;}}
@keyframes wmShine{0%,100%{opacity:0;}4%{opacity:.8;}11%{opacity:0;}}
.wm3-off .wl-g,.wm3-off .wl-s{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.wm3{display:none;}.mx-wordform.wm3-on{background:linear-gradient(100deg,#00d4ff 0%,#2ad4c5 30%,#8b6cff 64%,#4dffa6 100%);-webkit-background-clip:text;background-clip:text;}}
/* ── tap targets >= 44 px in the transplanted chat widget (restyle only; its markup/JS stay byte-identical) ── */
html .chat-close-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin:-8px -10px -8px 0;}
html .qr-btn{min-height:44px;padding:10px 14px;}
html .chat-inp{min-height:44px;}
html .chat-send{min-width:44px;min-height:44px;}

/* ── phones/tablets: the scrim under the HUD also covers its chapter row, so landing text scrolling up no longer
   shows through "C0 · SocialStack" (fade ends 12 px below the row = inside the card safe box's own fade band) ── */
@media(max-width:1023px){html .mx-hud-top::before{inset:0 0 -34px;background:linear-gradient(rgba(4,5,10,.96),rgba(4,5,10,.92) calc(100% - 12px),rgba(4,5,10,0));}}

/* ── V6: the sticky bottom CTA dock is gone (founder: the free-Reels CTA is in enough places). The chat launcher keeps
   its bottom-left corner on phones/tablets; these restate its intended phone geometry with enough specificity to beat
   the transplanted chat block (inline, later in the cascade), which had been pinning it to bottom:24px/right:24px and
   the window to 340 px wide, ignoring the safe-area insets and the cookie banner. ── */
@media(max-width:1023px){
  html .chat-bubble{left:calc(12px + env(safe-area-inset-left,0px));right:auto;bottom:calc(12px + var(--cookie-h) + env(safe-area-inset-bottom,0px));}
  html .chat-win{left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));width:auto;
    bottom:calc(84px + var(--cookie-h) + env(safe-area-inset-bottom,0px));height:min(480px,70vh);height:min(480px,70dvh);}
  /* the page ends with the giant footer line; keep its last row clear of the launcher in the corner */
  html .gh-foot-giant{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));}
}
/* reduced motion: the motion layer marks the wordmark 'docked' from the start (no dock animation), which hid the hero
   wordmark on phones while the top bar shows only the mark there (V5) - keep the hero wordmark visible instead */
@media(max-width:1023px){html.rm.mx-docked [data-mx-dock]{opacity:1;scale:none;}}