/* ════════════════════════════════════════════════════════════
   D10 LEAKS: MERIDIAN cinematic experience
   External stylesheet (CSP-compliant: no inline styles)
   ════════════════════════════════════════════════════════════ */
:root{
  --void:#050508;
  --panel:rgba(16,17,22,.55);
  --silver:#e9eaef;
  --muted:#84858f;
  --line:rgba(233,234,239,.12);
  --ice:#ff1428;
  --indigo:#ff1428;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html,body{background:var(--void);color:var(--silver);overflow-x:hidden;overflow-anchor:none}
body{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
::selection{background:var(--ice);color:#fff}
canvas{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* unified keyboard focus ring (a11y): only shows for keyboard users */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* ---------- scroll spacer (native scroll drives everything) ---------- */
#spacer{height:1500vh;pointer-events:none}

/* ---------- fixed webgl stage ---------- */
#stage{position:fixed;inset:0;z-index:0}

/* ---------- fixed world translated with the smoothed scroll ---------- */
#world{position:fixed;inset:0;z-index:2;will-change:transform;pointer-events:none}
section{position:absolute;left:0;width:100%;height:100vh;padding:0 clamp(20px,6vw,96px);display:flex;flex-direction:column;justify-content:center}
section .inner{pointer-events:auto;max-width:1280px;width:100%;margin:0 auto;position:relative}
/* readability scrim: dims the 3D behind the copy */
section .inner::before{content:"";position:absolute;inset:-56px;background:radial-gradient(ellipse at center,rgba(5,5,8,.66),rgba(5,5,8,.3) 55%,transparent 76%);border-radius:40px;z-index:0;pointer-events:none}
section .inner>*{position:relative;z-index:1}
/* s2 (Why) is pinned for 2 extra viewports, so everything after shifts +200vh */
#s0{top:0}#s1{top:100vh}#s2{top:200vh}#s3{top:500vh}#s4{top:600vh}
#s5{top:700vh}#s6{top:800vh}#s7{top:900vh}#s8{top:1000vh}#s9{top:1100vh}#s10{top:1200vh}#s11{top:1300vh}#s12{top:1400vh}

/* ---------- type ---------- */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--ice);display:flex;align-items:center;gap:14px;margin-bottom:28px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--ice);opacity:.7}
.eyebrow-center{justify-content:center}
.eyebrow-right{justify-content:flex-end}
h1,h2{font-family:'Unbounded',sans-serif;font-weight:200;line-height:1.04;letter-spacing:-.01em;text-shadow:0 4px 28px rgba(0,0,0,.92),0 1px 3px rgba(0,0,0,.7)}
h1{font-size:clamp(44px,9.5vw,128px)}
h2{font-size:clamp(34px,6vw,84px)}
.lede{color:#b9bbc6;font-size:clamp(15px,1.4vw,19px);line-height:1.7;max-width:46ch;margin-top:26px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.lede-right{margin-left:auto}
.lede-center{margin-left:auto;margin-right:auto}
.mega{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(52px,12vw,170px);line-height:.96;letter-spacing:-.02em;text-transform:uppercase;filter:drop-shadow(0 0 30px rgba(255,20,40,.3))}
.thin{font-weight:200}
.accent{color:var(--ice)}
.inner-center{text-align:center}
.inner-right{text-align:right;margin-right:0}

/* line-reveal mechanics */
.rl{display:block;overflow:hidden}
.rl>span{display:block;transform:translateY(115%);will-change:transform}
[data-fade]{opacity:0;transform:translateY(26px);will-change:transform,opacity}

/* ---------- chrome / glass UI ---------- */
.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px}

/* ---------- nav ---------- */
#nav{position:fixed;z-index:12;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px clamp(14px,4vw,48px);pointer-events:none}
#nav>*{pointer-events:auto}
/* Fixed at 14px/.34em with white-space:nowrap, the wordmark measured 178px
   and refused to shrink, so at 320px it pushed #navRight (and with it the
   hamburger) 20px off the right edge: the menu was unreachable. The legal
   pages already scale their logo this way; the homepage never got it. The
   clamps are inert at 636px and above, so desktop is byte-identical. */
.wordmark{font-family:'Unbounded',sans-serif;font-weight:500;font-size:clamp(11px,2.2vw,14px);letter-spacing:clamp(.14em,.9vw,.34em);color:var(--silver);text-decoration:none;display:flex;align-items:center;gap:clamp(7px,2vw,10px);min-width:0}
.wordmark i{font-style:normal;color:var(--ice)}
.nav-logo-img{width:clamp(24px,5.5vw,30px);height:clamp(24px,5.5vw,30px);flex:0 0 auto;object-fit:contain;border-radius:6px}
#navLinks{display:flex;gap:clamp(14px,2.4vw,34px)}
.nav-link{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);transition:color .35s;padding:8px 2px}
.nav-link:hover{color:var(--ice)}
/* Packs is an <a> because it leaves the page, unlike the data-goto buttons.
   Anchors bring their own underline and inline layout, so normalise them. */
a.nav-link--page{text-decoration:none;display:inline-block;line-height:normal}
a.nav-link--page:hover{color:var(--ice)}
/* The FX section is right-aligned, so its CTA follows the column. */
#s3 .fx-browse{margin-top:26px}
#navRight{display:flex;gap:12px;align-items:center}

/* sound toggle */
/* ---- audio control: EQ-bars instant mute + RADIO dropdown menu ---- */
#audio-ctrl{position:relative;display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:2px}
#sound-toggle{display:flex;align-items:center;padding:9px 11px 9px 13px;border-radius:999px;color:var(--muted);transition:color .35s,background .35s}
#sound-toggle:hover{color:var(--silver);background:rgba(255,255,255,.05)}
#sound-toggle.active{color:var(--ice)}
#audio-ctrl.is-muted #sound-toggle{color:var(--muted)}
#audio-menu-btn{display:flex;align-items:center;justify-content:center;padding:9px 11px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);transition:color .35s,background .35s}
#audio-menu-btn:hover{color:var(--silver);background:rgba(255,255,255,.05)}
#audio-menu-btn[aria-expanded="true"]{color:var(--ice)}
.ac-caret{width:12px;height:12px;transition:transform .35s var(--ease)}
#audio-menu-btn[aria-expanded="true"] .ac-caret{transform:rotate(180deg)}
/* dropdown panel */
#audio-menu{position:absolute;top:calc(100% + 12px);right:0;width:min(252px,calc(100vw - 24px));background:rgba(11,12,16,.82);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 16px 44px rgba(0,0,0,.6);padding:16px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;z-index:14}
#audio-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.am-head{display:flex;flex-direction:column;padding-bottom:13px}
.am-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:var(--ice);display:flex;align-items:center;gap:8px}
.am-eyebrow::before{content:"";width:18px;height:1px;background:var(--ice);opacity:.7}
.am-title{font-size:14px;font-weight:500;color:var(--silver);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:9px}
.am-artist{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.am-prog{height:3px;border-radius:2px;background:rgba(233,234,239,.1);overflow:hidden;margin-bottom:14px}
#mpFill{height:100%;width:0%;background:var(--ice);box-shadow:0 0 8px rgba(255,20,40,.7)}
.am-row{display:flex;flex-direction:column;gap:7px}
.am-btn{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--silver);background:rgba(255,255,255,.05);border:1px solid var(--line);transition:border-color .3s,background .3s,color .3s;width:100%;text-align:left}
.am-btn svg{width:15px;height:15px;flex-shrink:0;color:var(--ice)}
.am-btn:hover{border-color:rgba(255,20,40,.5);background:rgba(255,20,40,.12);color:#fff}
.am-btn--primary{background:rgba(255,20,40,.14);border-color:rgba(255,20,40,.4)}
#mp-icon-play{display:none}

/* player.js toggles these icons' display, so keep them out of the visual flow */
.sr-icon{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:12px}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--silver);transition:transform .35s var(--ease),opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile menu */
/* The overlay used to be justify-content:center with overflow visible. With
   twelve links on a landscape phone that put up to six of them at negative
   offsets, off the top of the screen, with no way to scroll to them: a
   centred flex column that overflows is unreachable in both directions.
   safe center keeps it centred while it fits and falls back to flex-start
   once it does not, so overflow scrolls normally. overscroll-behavior
   stops that scroll chaining into the page behind it. */
#mmenu{position:fixed;inset:0;z-index:11;background:rgba(5,5,8,.92);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:78px 20px 34px;gap:8px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
#mmenu.open{opacity:1;visibility:visible}
#mmenu .nav-link{font-size:14px;padding:14px}
.mmenu-discord{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ice);text-decoration:none;margin-top:22px;border:1px solid rgba(255,20,40,.4);padding:14px 28px;border-radius:999px}

/* magnetic button */
.magnet{position:relative;display:inline-flex;align-items:center;gap:14px;padding:18px 34px;border-radius:999px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.34em;text-transform:uppercase;overflow:hidden;transition:border-color .4s,color .4s;will-change:transform;color:inherit;text-decoration:none}
.magnet .fill{position:absolute;inset:0;background:var(--ice);border-radius:999px;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.magnet span{position:relative;z-index:1;transition:color .35s}
.magnet:hover{border-color:var(--ice)}
.magnet:hover .fill{transform:scaleY(1)}
.magnet:hover span{color:#fff}
.magnet:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
.magnet--small{padding:12px 22px}
.hero-ctas{margin-top:44px}
.founders-cta{margin-top:40px}
#s7 .magnet{margin-top:44px}

/* ---------- HUD altimeter ---------- */
#hud{position:fixed;z-index:10;right:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,40px);display:flex;align-items:center;gap:16px;pointer-events:none}
#hudReadout{text-align:right;font-family:'IBM Plex Mono',monospace}
#hudSection{font-size:10px;letter-spacing:.34em;color:var(--ice);text-transform:uppercase}
#hudLabel{font-size:9px;letter-spacing:.3em;color:var(--muted);margin-top:5px;text-transform:uppercase}
#dial{width:74px;height:74px;position:relative}
#dial svg{width:100%;height:100%;transform:rotate(-90deg)}
#dialArc{filter:drop-shadow(0 0 6px rgba(255,20,40,.8))}
#dialPct{position:absolute;inset:0;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--silver)}

/* scroll cue */
@keyframes drop{to{top:130%}}

/* ---------- loader / enter gate ---------- */
#enter-screen{position:fixed;inset:0;z-index:50;background:var(--void);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;transition:opacity 1s var(--ease),visibility 1s}
#enter-screen.done,#enter-screen.hidden{opacity:0;visibility:hidden}
#loaderGun{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
#loadScrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 54% at 50% 50%,rgba(5,5,8,.78),rgba(5,5,8,.4) 58%,transparent 100%)}
#loadContent{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px}
/* ── loader logo: metallic plate with crimson underglow + light sweep ── */
.load-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:-6px;isolation:isolate}
.load-underglow{position:absolute;left:50%;bottom:-26%;width:140%;height:62%;transform:translateX(-50%);pointer-events:none;z-index:-1;background:radial-gradient(ellipse at center,rgba(255,20,40,.92),rgba(255,20,40,.3) 46%,transparent 72%);filter:blur(11px);animation:loadUnder 2.4s ease-in-out infinite}
.load-plate{position:relative;display:inline-block;line-height:0;border-radius:14px;overflow:hidden;filter:drop-shadow(0 0 18px rgba(255,20,40,.45));animation:loadPulse 2.4s ease-in-out infinite}
.load-logo{width:clamp(62px,9vw,92px);height:auto;border-radius:14px;display:block}
.load-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.92) 50%,transparent 62%);background-size:280% 100%;background-repeat:no-repeat;background-position:160% 0;mix-blend-mode:screen;animation:loadShine 3.6s ease-in-out infinite}
@keyframes loadShine{0%{background-position:160% 0}40%{background-position:-60% 0}100%{background-position:-60% 0}}
@keyframes loadUnder{0%,100%{opacity:.5;transform:translateX(-50%) scaleX(.9)}50%{opacity:1;transform:translateX(-50%) scaleX(1.12)}}
@keyframes loadPulse{0%,100%{filter:drop-shadow(0 0 15px rgba(255,20,40,.4))}50%{filter:drop-shadow(0 0 34px rgba(255,20,40,.8))}}
#loadLogo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:clamp(72px,12vw,110px);height:auto;border-radius:14px;filter:drop-shadow(0 0 26px rgba(255,20,40,.35));opacity:0;pointer-events:none}
#enter-screen.fallback #loaderGun{display:none}
#enter-screen.fallback #loadLogo{opacity:1}
#loadMark{font-family:'Unbounded',sans-serif;font-weight:200;font-size:clamp(26px,5vw,44px);letter-spacing:.42em;text-indent:.42em}
#loadMark i{font-style:normal;color:var(--ice)}
#loadBar{width:min(320px,60vw);height:1px;background:var(--line);position:relative}
#loadFill{position:absolute;inset:0;background:var(--ice);transform-origin:left;transform:scaleX(0);box-shadow:0 0 18px var(--ice)}
#loadMeta{display:flex;justify-content:space-between;width:min(320px,60vw);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted)}
#loadPct{color:var(--silver)}
#enterBtn{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s,background .4s,box-shadow .4s,visibility .7s;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.34em;text-transform:uppercase;padding:18px 44px;border-radius:999px;color:var(--silver);background:rgba(11,12,16,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 26px rgba(0,0,0,.5)}
#enterBtn.ready{opacity:1;visibility:visible;transform:translateY(0)}
#enterBtn:hover{background:rgba(255,20,40,.16);border-color:rgba(255,20,40,.6);color:#fff;box-shadow:0 0 30px rgba(255,20,40,.32)}
#loadHint{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;opacity:0;transition:opacity .7s var(--ease) .15s}
#enter-screen .show-hint #loadHint,#enterBtn.ready~#loadHint{opacity:1}

/* flash transition veil */
#veil{position:fixed;inset:0;z-index:4;background:var(--void);opacity:0;pointer-events:none}

/* grain */
/* inset was -100%, which makes this fixed overlay three times the viewport
   in each direction: nine times the area, permanently composited, with an
   infinite animation on top. On a 390x844 phone at DPR 3 that is a
   3510x7596 backing store, roughly 100MB of GPU memory for a grain layer.
   The keyframes below shift it by at most 5% of its own size, so the
   overhang only has to satisfy X >= 5/(1 - 0.1), i.e. 5.56%. At -10% the
   edge still never comes into view and the layer drops to 1.44x the
   viewport: 84% fewer pixels for an identical picture. */
#grain{position:fixed;inset:-10%;z-index:9;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(4%,4%)}}

/* ---------- section specifics ---------- */
#s0 .sub{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.5em;color:var(--muted);margin-top:34px;text-transform:uppercase}

/* as seen on: clean "featured on" logo strip (muted, brighten on hover) */
.aso-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,5vw,64px);max-width:920px;margin:42px auto 0}
.aso-brand{display:flex;align-items:center;justify-content:center;color:#6f717b;min-width:44px;min-height:44px;padding:4px 6px;transition:color .35s,transform .4s var(--ease)}
.aso-brand:hover{color:#e9eaef;transform:translateY(-3px)}
.aso-brand svg{width:clamp(28px,2.9vw,36px);height:clamp(28px,2.9vw,36px)}
/* Logos only. The names are still here for screen readers and for anyone
   with images off — hidden rather than deleted, because a row of six
   unlabelled marks is meaningless to a non-visual reader. */
.aso-brand span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:600px){
  .aso-strip{gap:22px 32px}
}
.ticker-wrap{overflow:hidden;margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;white-space:nowrap;animation:tick 32s linear infinite;width:max-content}
.ticker-item{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);padding-right:18px}
.ticker-item span{color:var(--ice)}
@keyframes tick{to{transform:translateX(-50%)}}

/* specs: white glass key cards */
.specRow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:48px}
.spec{position:relative;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;color:#b4b6c2;line-height:1.9;text-transform:uppercase;background:rgba(11,12,16,.66);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:24px 22px 22px;backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 10px 36px rgba(0,0,0,.5);transition:transform .5s var(--ease),border-color .4s,background .4s}
.spec:hover{transform:translateY(-6px);border-color:rgba(255,20,40,.55);background:rgba(15,16,21,.72)}
.spec::after{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,var(--ice),transparent);opacity:.8}
.spec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.spec-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--ice);background:rgba(255,20,40,.12);border:1px solid rgba(255,20,40,.35);box-shadow:0 0 18px rgba(255,20,40,.15);transition:background .4s,box-shadow .4s,transform .5s var(--ease)}
.spec-ico svg{width:18px;height:18px}
.spec:hover .spec-ico{background:rgba(255,20,40,.22);box-shadow:0 0 26px rgba(255,20,40,.35);transform:scale(1.08)}
.spec-num{font-size:9px;letter-spacing:.34em;color:var(--ice)}
.spec b{display:block;color:#fff;font-weight:400;font-size:13px;letter-spacing:.22em;margin-bottom:8px}

/* why (pinned scrollytelling): one step at a time, D10 logo rides the rail */
.why-h2{font-size:clamp(30px,5vw,68px)}
.why-flow{display:flex;align-items:stretch;gap:clamp(14px,1.8vw,24px);margin-top:clamp(26px,4vh,46px);max-width:600px}
.why-stage{position:relative;flex:1;min-height:clamp(160px,24vh,230px);background:rgba(22,23,32,.58);border:1px solid rgba(255,255,255,.2);border-radius:18px;backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.why-step{position:absolute;inset:0;display:flex;align-items:center;gap:clamp(16px,2vw,24px);padding:clamp(22px,3vw,32px);opacity:0;will-change:opacity,transform}
.why-rail{position:relative;width:2px;flex-shrink:0;border-radius:2px;background:rgba(255,255,255,.12)}
.why-rail-fill{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,var(--ice),rgba(255,20,40,.3));box-shadow:0 0 10px rgba(255,20,40,.5)}
.why-pin{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:clamp(30px,3.2vw,40px);height:clamp(30px,3.2vw,40px);border-radius:50%;background:rgba(11,12,16,.96);border:1px solid rgba(255,20,40,.7);box-shadow:0 0 16px rgba(255,20,40,.55);display:grid;place-items:center}
.why-pin img{width:64%;height:64%;object-fit:contain}
.why-step .spec-ico{width:clamp(48px,5vw,60px);height:clamp(48px,5vw,60px);border-radius:15px;flex-shrink:0}
.why-step .spec-ico svg{width:46%;height:46%}
.why-num{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.34em;color:var(--ice);margin-bottom:10px}
.why-step h3{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(22px,3vw,36px);color:#fff;line-height:1.1}
.why-step p{color:#b9bbc6;font-size:clamp(14px,1.5vw,18px);line-height:1.7;margin-top:12px;max-width:42ch}

/* cinematic FX: auto-rotating card deck (3s) with arrow controls */
#fxDeck{display:grid;margin-top:34px}
.fx-card{grid-area:1/1;justify-self:end;width:min(560px,100%);text-align:left;opacity:0;transform:translateX(60px);transition:opacity .65s var(--ease),transform .65s var(--ease);pointer-events:none;border-radius:18px;overflow:hidden;background:rgba(11,12,16,.68);border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 36px rgba(0,0,0,.5);backdrop-filter:blur(28px) saturate(130%);-webkit-backdrop-filter:blur(28px) saturate(130%)}
.fx-card p{color:#cfd1da}
/* image banner: cinematic crimson grade so bright shots blend into the card */
.fx-media{position:relative;height:clamp(150px,20vw,196px);overflow:hidden;background:#0b0c10}
/* <picture> wraps the FX images so a phone can be sent a 700px WebP
   instead of the 1320px original. It is an inline box in between, so it
   is taken out of the box tree and the existing .fx-media img rules keep
   applying unchanged. */
.fx-media picture{display:contents}
.fx-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(72%) contrast(112%) brightness(.78)}
/* red soft-light grade: pushes the whole frame toward the site's crimson */
.fx-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(165deg,rgba(255,20,40,.14),rgba(120,8,18,.4) 75%,rgba(60,4,9,.55));mix-blend-mode:soft-light}
/* dark fade into the card + corner vignette */
.fx-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(11,12,16,.18) 0%,rgba(11,12,16,.04) 42%,rgba(11,12,16,.86) 88%,rgba(11,12,16,1) 100%),radial-gradient(130% 100% at 50% 38%,transparent 52%,rgba(5,5,8,.6) 130%)}
.fx-media.no-img{display:none}
/* PC-opti before/after: gentler grade so the FPS contrast stays legible */
.fx-media--opti img{filter:saturate(.95) contrast(1.05) brightness(.9)}
.fx-media--opti::before{background:linear-gradient(165deg,rgba(255,20,40,.08),rgba(120,8,18,.22) 80%);opacity:.7}
.fx-body{padding:clamp(20px,2.6vw,30px) clamp(24px,3vw,38px) clamp(24px,3vw,36px)}
.fx-media+.fx-body{padding-top:clamp(14px,1.6vw,18px)}
.fx-card.active{opacity:1;transform:none;pointer-events:auto}
.fx-card.leave{opacity:0;transform:translateX(-60px)}
.fx-nav{display:flex;gap:10px;margin-top:16px;width:min(560px,100%);margin-left:auto}
.fx-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--muted);display:grid;place-items:center;transition:color .3s,border-color .3s,background .3s}
.fx-arrow:hover{color:#fff;border-color:rgba(255,20,40,.5);background:rgba(255,20,40,.25)}
/* A phone has no hover, so on touch the arrow gave no feedback at all and the
   tap read as "nothing happened". :active fires on touch; the scale makes the
   press visible even if the card behind is mid-transition. */
.fx-arrow:active{color:#fff;border-color:rgba(255,20,40,.7);background:rgba(255,20,40,.45);transform:scale(.9)}
.fx-arrow:focus-visible{outline:none;color:#fff;border-color:rgba(255,20,40,.8);box-shadow:0 0 0 3px rgba(255,20,40,.25)}
.fx-arrow{transition:color .3s,border-color .3s,background .3s,transform .15s}
.fx-arrow svg{width:14px;height:14px}
.fx-idx{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.34em;color:var(--ice)}
.fx-card h3{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(18px,2vw,26px);margin-top:10px}
.fx-card p{color:#b9bbc6;font-size:14px;line-height:1.75;margin-top:12px}
.lede-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.lede-tags .tag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--ice);border:1px solid rgba(255,20,40,.4);padding:7px 12px;border-radius:999px;text-transform:uppercase}

/* tiers: full-width glass rows, slide in from alternating sides */
#cards{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);margin-top:54px}
.tier{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);background:rgba(11,12,16,.66);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 10px 36px rgba(0,0,0,.5);will-change:transform,opacity;opacity:0;transition:border-color .4s,background .4s}
.tier:hover{border-color:rgba(255,20,40,.55);background:rgba(15,16,21,.72)}
.tier .spec-ico{flex-shrink:0;width:46px;height:46px;border-radius:13px}
.tier .spec-ico svg{width:21px;height:21px}
.tier-info{flex:1;min-width:0}
.tier .idx{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.34em;color:var(--ice)}
.tier h3{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(17px,1.8vw,24px);margin-top:6px}
.tier p{color:#b9bbc6;font-size:13.5px;line-height:1.65;margin-top:8px}
.tier .tag{flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--ice);border:1px solid rgba(255,20,40,.4);padding:8px 14px;border-radius:999px;text-transform:uppercase;white-space:nowrap}

/* legacy card styles (kept for safety) */
.cards-legacy{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:54px;perspective:1200px}
.card{position:relative;border-radius:20px;padding:28px 24px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;transition:border-color .4s;will-change:transform;cursor:pointer}
.card:hover{border-color:rgba(255,20,40,.5)}
.card .glow{position:absolute;inset:0;border-radius:20px;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,20,40,.16),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover .glow{opacity:1}
.card .idx{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--muted)}
.card h3{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(20px,2vw,28px);margin-top:10px;transform:translateZ(34px)}
.card p{color:#b9bbc6;font-size:14px;line-height:1.7;margin-top:14px;transform:translateZ(20px)}
.card .tag{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--ice);border:1px solid rgba(255,20,40,.4);padding:7px 12px;border-radius:999px;margin-top:22px;text-transform:uppercase;transform:translateZ(26px)}

/* stats */
#stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:54px}
.stat{background:rgba(8,9,12,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:clamp(24px,3vw,44px) clamp(18px,2vw,34px)}
.stat .num{font-family:'Unbounded',sans-serif;font-weight:200;font-size:clamp(34px,4.5vw,64px);color:var(--silver);display:flex;align-items:baseline;gap:4px}
.stat .num em{font-style:normal;color:var(--ice);font-size:.5em}
.stat .cap{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--muted);margin-top:14px;text-transform:uppercase}

/* ---------- reviews marquee ---------- */
.rev-marquee{margin-top:54px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rev-track{display:flex;gap:22px;width:max-content;animation:revscroll 55s linear infinite}
.rev-marquee:hover .rev-track{animation-play-state:paused}
@keyframes revscroll{to{transform:translateX(-50%)}}
.rev-card{flex:0 0 clamp(260px,28vw,340px);padding:24px 22px;border-radius:18px}
.rev-top{display:flex;align-items:center;gap:12px}
.rev-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,rgba(255,20,40,.8),rgba(122,10,20,.9));display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#fff;flex-shrink:0}
.rev-name{font-weight:500;font-size:14px}
.rev-role{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.rev-stars{color:var(--ice);font-size:13px;letter-spacing:.25em;margin-top:14px}
.rev-text{color:#b9bbc6;font-size:13px;line-height:1.7;margin-top:10px}
.rev-badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--ice);border:1px solid rgba(255,20,40,.35);padding:6px 11px;border-radius:999px;margin-top:16px}

/* ---------- recruiting / join the squad ---------- */
#recruitGrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px);margin-top:46px;text-align:left}
.recruit-card{padding:clamp(24px,3vw,36px);border-radius:18px;background:rgba(11,12,16,.66);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 10px 36px rgba(0,0,0,.5);transition:transform .5s var(--ease),border-color .4s,background .4s}
.recruit-card:hover{transform:translateY(-6px);border-color:rgba(255,20,40,.55);background:rgba(15,16,21,.72)}
.recruit-card .spec-ico{width:48px;height:48px;border-radius:13px;margin-bottom:20px}
.recruit-card .spec-ico svg{width:22px;height:22px}
.recruit-card h3{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(20px,2vw,27px)}
.recruit-card p{color:#b9bbc6;font-size:14px;line-height:1.7;margin-top:13px}
.recruit-card .tag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--ice);border:1px solid rgba(255,20,40,.4);padding:8px 13px;border-radius:999px;text-transform:uppercase;margin-top:20px}
/* ---------- in the spotlight (news) ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:34px}
.news-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:center;padding:18px;border-radius:18px;background:rgba(11,12,16,.66);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:0 10px 36px rgba(0,0,0,.5);text-decoration:none;color:inherit;transition:transform .5s var(--ease),border-color .4s,background .4s}
.news-card:hover{transform:translateY(-6px);border-color:rgba(255,20,40,.55);background:rgba(15,16,21,.72)}
.news-thumb{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#0b0c10}
.news-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.news-card:hover .news-thumb img{transform:scale(1.05)}
.news-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,20,40,.92);box-shadow:0 6px 24px rgba(0,0,0,.55);transition:transform .4s var(--ease)}
.news-play svg{width:20px;height:20px;color:#fff;margin-left:3px}
.news-card:hover .news-play{transform:scale(1.12)}
.news-time{position:absolute;right:9px;bottom:9px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.78);padding:3px 7px;border-radius:5px}
.news-body{display:flex;flex-direction:column}
.news-tag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ice)}
.news-title{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(17px,1.6vw,22px);line-height:1.35;margin-top:12px}
.news-desc{color:#b9bbc6;font-size:13.5px;line-height:1.7;margin-top:12px}
.news-meta{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice);margin-top:18px}

#s10 .magnet{margin-top:40px}
#s11 .magnet{margin-top:40px}

/* ---------- founders ---------- */
#foundersGrid{display:flex;justify-content:center;gap:clamp(20px,4vw,48px);margin-top:54px;flex-wrap:wrap}
.founder-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px clamp(26px,4vw,54px);border-radius:20px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .4s}
.founder-card.visible{opacity:1;transform:translateY(0)}
.founder-card:hover{border-color:rgba(255,20,40,.5)}
.founder-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,20,40,.5);box-shadow:0 0 26px rgba(255,20,40,.25)}
.founder-avatar-ph{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,rgba(255,20,40,.8),rgba(122,10,20,.9));display:grid;place-items:center;font-family:'Unbounded',sans-serif;font-size:28px;color:#fff}
.founder-name{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.founder-role{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice);opacity:.85;margin-top:-8px;text-align:center}
.founder-rule{width:26px;height:1px;background:var(--ice);opacity:.7}

/* ── founders slider controls ──
   Only ever shown on phones (the phone block flips .fd-nav to flex). On
   desktop the row shows all three at once, so controls would be noise. */
.fd-nav{display:none;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.fd-arrow{width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;
  transition:color .3s,border-color .3s,background .3s}
.fd-arrow:active{color:#fff;border-color:rgba(255,20,40,.5);background:rgba(255,20,40,.25)}
.fd-arrow svg{width:13px;height:13px}
.fd-dots{display:flex;align-items:center;gap:7px}
/* Generous tap target around a small dot: the dot is 6px, the button is 20. */
.fd-dot{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.fd-dot::after{content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(233,234,239,.28);transition:background .3s,transform .3s}
.fd-dot[aria-selected="true"]::after{background:var(--ice);transform:scale(1.35)}

/* footer meta */
#footerMeta{position:absolute;bottom:30px;left:0;width:100%;z-index:6;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,6vw,96px);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;pointer-events:auto}
#s12 .inner-center{padding-bottom:250px}
/* ── HOME FOOTER ────────────────────────────────────────────────────────────
   The last section is a fixed 100vh panel, so this has to earn its height:
   link columns plus a copyright line, no brand blurb, because the headline
   and Join button directly above already do that job. Below 760px it falls
   back to the old single-line strip, since three columns plus a CTA does not
   fit in a phone viewport without squashing both. */
#homeFoot{position:absolute;bottom:26px;left:0;width:100%;z-index:6;padding:0 clamp(20px,6vw,96px);pointer-events:auto}
.hf-cols{display:flex;gap:clamp(28px,6vw,90px);justify-content:center;flex-wrap:wrap}
.hf-col h3{font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:11px}
.hf-col ul{list-style:none;display:grid;gap:2px}
/* 16px tall was under the 24px minimum touch target. The padding comes out
   of the list gap above, so the rhythm is nearly unchanged. */
.hf-col a{font-family:'Space Grotesk',sans-serif;font-size:.82rem;color:var(--muted);text-decoration:none;display:inline-block;padding:4px 0;transition:color .35s}
.hf-col a:hover{color:var(--ice)}
.hf-bar{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hf-sep{opacity:.45}

/* Star field behind the home footer. Same rules as the sub-page one: painted
   dust plus transform/opacity-only streaks, nothing that costs a frame. */
.hf-sky{position:absolute;inset:-44vh 0 -40px;z-index:-1;pointer-events:none;opacity:0;background-image:linear-gradient(to bottom,rgba(5,5,8,0) 0%,rgba(5,5,8,.5) 14%,rgba(5,5,8,.85) 26%,rgba(5,5,8,.96) 36%,#050508 44%)}

/* ── twinkle ─────────────────────────────────────────────────────────────
   The dust used to be a background-image, which is free to paint but cannot
   animate one dot at a time: the whole layer would have to blink at once.
   Each star is its own element now so they fade independently.
   Only opacity animates, so this stays on the compositor and never repaints,
   and the sizes and timings are all different or they pulse in unison and
   read as a strobe rather than a sky. */
.hf-dust .ft-star{position:absolute;border-radius:50%;background:#fff;opacity:var(--dim,.2);
  animation-name:ftTwinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:opacity}
@keyframes ftTwinkle{
  0%,100%{opacity:var(--dim,.2)}
  50%{opacity:1}
}
.hf-dust .ft-star:nth-child(1){left:37.7%;top:55.6%;width:2.9px;height:2.9px;animation-duration:5.1s;animation-delay:2.8s;--dim:0.22}
.hf-dust .ft-star:nth-child(2){left:66.6%;top:12.5%;width:2.9px;height:2.9px;animation-duration:5.4s;animation-delay:4.8s;--dim:0.26}
.hf-dust .ft-star:nth-child(3){left:39.9%;top:41.5%;width:1.7px;height:1.7px;animation-duration:4.9s;animation-delay:0.3s;--dim:0.11}
.hf-dust .ft-star:nth-child(4){left:22.6%;top:21.6%;width:2.1px;height:2.1px;animation-duration:2.8s;animation-delay:0.0s;--dim:0.13}
.hf-dust .ft-star:nth-child(5){left:12.5%;top:38.5%;width:1.6px;height:1.6px;animation-duration:5.7s;animation-delay:3.4s;--dim:0.13}
.hf-dust .ft-star:nth-child(6){left:26.7%;top:37.2%;width:2.1px;height:2.1px;animation-duration:3.0s;animation-delay:4.7s;--dim:0.3}
.hf-dust .ft-star:nth-child(7){left:46.8%;top:48.6%;width:1.7px;height:1.7px;animation-duration:3.0s;animation-delay:1.9s;--dim:0.15}
.hf-dust .ft-star:nth-child(8){left:80.9%;top:21.6%;width:1.6px;height:1.6px;animation-duration:6.0s;animation-delay:2.9s;--dim:0.13}
.hf-dust .ft-star:nth-child(9){left:54.1%;top:10.3%;width:2.3px;height:2.3px;animation-duration:6.1s;animation-delay:4.7s;--dim:0.24}
.hf-dust .ft-star:nth-child(10){left:27.5%;top:38.8%;width:1.8px;height:1.8px;animation-duration:5.4s;animation-delay:2.9s;--dim:0.26}
.hf-dust .ft-star:nth-child(11){left:34.0%;top:26.7%;width:2.7px;height:2.7px;animation-duration:6.1s;animation-delay:4.7s;--dim:0.26}
.hf-dust .ft-star:nth-child(12){left:79.9%;top:70.1%;width:1.9px;height:1.9px;animation-duration:4.5s;animation-delay:2.0s;--dim:0.11}
.hf-dust .ft-star:nth-child(13){left:5.6%;top:31.5%;width:2.0px;height:2.0px;animation-duration:5.1s;animation-delay:5.3s;--dim:0.19}
.hf-dust .ft-star:nth-child(14){left:91.1%;top:91.0%;width:2.9px;height:2.9px;animation-duration:3.9s;animation-delay:1.2s;--dim:0.15}

.hf-dust,.hf-streaks{position:absolute;inset:0;pointer-events:none}
.hf-sky .ft-shoot{position:absolute;top:-14%;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);opacity:0;animation:ftShoot 7s linear infinite}
.hf-sky .ft-shoot::before{content:'';position:absolute;right:1px;top:50%;width:70px;height:1.5px;background:linear-gradient(to left,rgba(255,255,255,.8),rgba(255,255,255,0));transform-origin:100% 50%;transform:rotate(45deg)}
.hf-sky .ft-shoot:nth-child(1){left:16%;animation-delay:.6s;animation-duration:7s}
.hf-sky .ft-shoot:nth-child(2){left:44%;animation-delay:2.4s;animation-duration:8.5s}
.hf-sky .ft-shoot:nth-child(3){left:69%;animation-delay:4.1s;animation-duration:6.8s}
.hf-sky .ft-shoot:nth-child(4){left:88%;animation-delay:5.9s;animation-duration:9s}

@keyframes ftShoot{
  0%{transform:translate3d(0,0,0);opacity:0}
  3%{opacity:1}
  20%{opacity:0}
  100%{transform:translate3d(300px,300px,0);opacity:0}
}
/* Reduced motion stills them; it must never delete them. */
/* Deliberately keeps moving under reduced motion, at the site owner's request.
   Safe-ish as decoration goes: a few 3px dots drifting inside the footer, no
   parallax, no full-page movement, nothing that follows the scroll. */

@media (max-width:760px){
  .hf-cols{gap:22px}
  .hf-col h3{font-size:.62rem;margin-bottom:8px}
  .hf-col ul{gap:1px}
  .hf-col a{font-size:.76rem}
  .hf-bar{margin-top:14px;padding-top:11px;font-size:8px;letter-spacing:.2em}
  #homeFoot{bottom:16px}
}
.foot-links{display:flex;gap:26px;pointer-events:auto}
.foot-links a{position:relative;z-index:1}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .35s}
.foot-links a:hover{color:var(--ice)}

/* ---------- music player ---------- */
#music-player{position:fixed;z-index:13;left:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,34px);width:min(300px,calc(100vw - 28px));background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:16px;overflow:hidden;display:none;flex-direction:column;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
#music-player.visible{opacity:1;transform:translateY(0)}
.mp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px}
.mp-info{display:flex;align-items:center;gap:11px;min-width:0}
.mp-eq{display:flex;gap:2.5px;align-items:flex-end;height:14px;flex-shrink:0}
.mp-bar{width:2.5px;background:var(--ice);border-radius:1px;animation:eq 1s ease-in-out infinite}
.mp-bar:nth-child(2){animation-delay:.15s}
.mp-bar:nth-child(3){animation-delay:.3s}
.mp-bar:nth-child(4){animation-delay:.45s}
#music-player.paused .mp-bar{animation-play-state:paused;height:4px}
.mp-meta{display:flex;flex-direction:column;min-width:0}
.mp-title{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-artist{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-btns{display:flex;gap:4px;flex-shrink:0}
.mp-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:color .3s,background .3s}
.mp-btn:hover{color:#fff;background:rgba(255,20,40,.25)}
.mp-btn svg{width:13px;height:13px}
#mp-icon-play{display:none}
.mp-prog{height:2px;background:rgba(233,234,239,.08)}
.mp-prog-fill{height:100%;width:0%;background:var(--ice);box-shadow:0 0 8px rgba(255,20,40,.7)}

#mp-reopen{position:fixed;z-index:13;left:clamp(14px,3vw,34px);bottom:clamp(14px,3vw,34px);width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;color:var(--muted);opacity:0;visibility:hidden;transform:scale(.8);transition:all .45s var(--ease)}
#mp-reopen.visible{opacity:1;visibility:visible;transform:scale(1)}
#mp-reopen:hover{color:var(--ice);border-color:rgba(255,20,40,.5)}
#mp-reopen svg{width:18px;height:18px}

/* now-playing toast */
#now-playing-toast{position:fixed;z-index:13;left:50%;bottom:88px;transform:translateY(8px);translate:-50% 0;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:999px;padding:11px 22px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--silver);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s;max-width:min(80vw,440px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- boost popup ---------- */
.boost-popup{position:fixed;z-index:13;top:84px;right:clamp(14px,3vw,34px);display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid rgba(255,20,40,.4);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:16px;padding:13px 16px;opacity:0;visibility:hidden;transform:translateX(24px);transition:all .55s var(--ease);max-width:320px}
.boost-popup.bp-visible{opacity:1;visibility:visible;transform:translateX(0)}
.bp-boost-icon{width:30px;height:30px;border-radius:50%;background:rgba(255,20,40,.18);display:grid;place-items:center;color:var(--ice);flex-shrink:0}
.bp-boost-icon svg{width:15px;height:15px}
.bp-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,20,40,.5)}
.bp-text{display:flex;flex-direction:column;min-width:0}
.bp-name{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-msg{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.bp-close{color:var(--muted);font-size:11px;padding:6px;flex-shrink:0;transition:color .3s}
.bp-close:hover{color:#fff}

/* ---------- easter egg ---------- */
#easter-egg{position:fixed;inset:0;z-index:60;background:rgba(5,5,8,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;pointer-events:none}
#easter-egg.active{opacity:1;visibility:visible}
.egg-inner{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(30px,7vw,72px);text-align:center;line-height:1.15;color:var(--ice);text-shadow:0 0 44px rgba(255,20,40,.8);letter-spacing:.06em;animation:eggpulse 1.2s ease-in-out infinite}
.egg-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.5em;color:var(--muted);text-transform:uppercase}
@keyframes eggpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  #cards{grid-template-columns:repeat(2,1fr)}
  .specRow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  #recruitGrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  #navLinks{display:none}
  .hamburger{display:flex}
  .magnet--small{display:none}
  #stats{grid-template-columns:repeat(2,1fr)}
  .inner-right{text-align:left}
  .eyebrow-right{justify-content:flex-start}
  .lede-right{margin-left:0}
  .fx-card{justify-self:start}
  .fx-nav{margin-left:0}
  .specRow{grid-template-columns:1fr;gap:12px}
  .spec{padding:18px 18px 16px}
  #hud{right:14px;bottom:14px}
  #dial{width:58px;height:58px}
  #footerMeta{flex-direction:column;gap:12px;bottom:18px}
  #music-player{bottom:78px}
  #mp-reopen{bottom:78px}
}
/* phones: compact horizontal tier cards so all four + heading fit one viewport */
@media (max-width:640px){
  /* stack the news card so the thumbnail stays readable on a phone */
  .news-grid{margin-top:16px;gap:14px}
  .news-card{grid-template-columns:1fr;gap:14px;padding:12px}
  .news-title{font-size:15px;margin-top:9px}
  .news-desc{font-size:12px;line-height:1.55;margin-top:8px}
  .news-meta{margin-top:12px}
  .news-play{width:44px;height:44px}
  .news-play svg{width:16px;height:16px}
  #cards{margin-top:22px;gap:10px}
  .tier{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:14px}
  .tier .spec-ico{width:38px;height:38px;border-radius:11px}
  .tier .spec-ico svg{width:18px;height:18px}
  .tier-info{flex:1;min-width:0}
  .tier .idx{font-size:8.5px;letter-spacing:.28em}
  .tier h3{font-size:15px;margin-top:2px}
  .tier p{font-size:11.5px;line-height:1.4;margin-top:4px}
  .tier .tag{font-size:8px;padding:6px 9px;letter-spacing:.18em}
  /* general spacing trims so each section's content fits one viewport */
  .eyebrow{margin-bottom:14px}
  .lede{margin-top:14px;line-height:1.45;font-size:13px}
  /* recruiting: compact cards so heading + lede + 2 cards + CTA fit */
  #recruitGrid{margin-top:16px;gap:10px}
  .recruit-card{padding:13px 14px}
  .recruit-card .spec-ico{width:38px;height:38px;margin-bottom:8px}
  .recruit-card .spec-ico svg{width:18px;height:18px}
  .recruit-card h3{font-size:16px}
  .recruit-card p{font-size:12px;line-height:1.4;margin-top:6px}
  .recruit-card .tag{margin-top:10px;font-size:8px;padding:6px 10px}
  #s10 .magnet{margin-top:14px}
  #s3 .fx-browse{margin-top:16px;padding:14px 24px;font-size:10px;letter-spacing:.26em}
  /* smaller headings on phones so they stop wrapping into neighbouring content */
  h2{font-size:clamp(27px,7vw,34px);line-height:1.08}
  /* team: compact founder cards + trim bottom gap so heading+cards+CTA fit */
  /* Three across in a real grid, not wrapped flex: the role line made the cards
     wide enough to wrap onto a second row, which looked broken. Equal columns
     keep them on one line and the section inside its 100vh. */
  .founders-cta{margin-top:20px}
  #s12 .inner-center{padding-bottom:210px}
  /* denser glass on phones so background particles don't bleed through text */
  .glass,.founder-card,.tier,.recruit-card,.spec,.fx-card{background:rgba(10,11,15,.9)}
}
/* very short phones (≈iPhone SE / browser chrome): drop the supplementary
   recruiting blurb + tighten so the densest sections still fit one viewport */
@media (max-width:640px) and (max-height:700px){
  #s10 .lede{display:none}
  #s10 #recruitGrid{margin-top:14px}
  .recruit-card{padding:11px 13px}
  #cards{margin-top:16px}
  .tier{padding:10px 13px}
  .tier p{font-size:11px;line-height:1.35}
}
/* marquees stay animated even under OS reduced-motion, owner's choice */
@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
  .load-plate,.load-underglow{animation:none}
  .load-shine{animation:none;opacity:.2}
}

/* ════════════════════════════════════════════════════════════
   Father's Day theme: gold highlights over the royal-blue base
   (blue = primary chrome/glows/buttons, gold = brand + accents)
   ════════════════════════════════════════════════════════════ */
:root{ --gold:#ff1428; }
.accent{ color:var(--gold); text-shadow:0 0 18px rgba(255,20,40,.3); }
.wordmark i, #loadMark i, .num em{ color:var(--gold); }
.wordmark i, #loadMark i{ text-shadow:0 0 14px rgba(255,20,40,.5); }
/* loader logo: warm gold underglow + pulse */
.load-underglow{ background:radial-gradient(ellipse at center,rgba(255,20,40,.92),rgba(255,20,40,.3) 46%,transparent 72%); }
.load-plate{ filter:drop-shadow(0 0 18px rgba(255,20,40,.5)); }
@keyframes loadUnder{0%,100%{opacity:.5;transform:translateX(-50%) scaleX(.9)}50%{opacity:1;transform:translateX(-50%) scaleX(1.12)}}
@keyframes loadPulse{0%,100%{filter:drop-shadow(0 0 15px rgba(255,20,40,.45))}50%{filter:drop-shadow(0 0 34px rgba(255,20,40,.85))}}

/* ════════════════════════════════════════════════════════════
   Father's Day announcement bar: scrolling marquee, pinned top
   ════════════════════════════════════════════════════════════ */
#promo-bar{position:fixed;top:0;left:0;right:0;z-index:14;height:34px;display:flex;align-items:center;overflow:hidden;text-decoration:none;
  background:linear-gradient(90deg,#0a0a0e 0%,#3a0a12 50%,#0a0a0e 100%);
  border-bottom:1px solid rgba(255,20,40,.35);box-shadow:0 2px 16px rgba(0,0,0,.45);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.promo-track{display:flex;white-space:nowrap;will-change:transform;animation:promoscroll 32s linear infinite}
.promo-item{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#c7cad6}
.promo-item b{color:#ff1428;font-weight:600}
.promo-dot{color:#ff1428;margin:0 18px}
@keyframes promoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
#promo-bar:hover .promo-track{animation-play-state:paused}
/* sit the nav just below the bar */
#nav{top:34px}
@media (max-width:640px){
  #promo-bar{height:30px}
  #nav{top:30px}
  .promo-item{font-size:10px;letter-spacing:.18em}
  .promo-dot{margin:0 12px}
}
/* landscape phones are height-starved, so drop the bar and restore nav to top */
@media (orientation:landscape) and (max-height:620px){
  #promo-bar{display:none}
  #nav{top:0}
}

/* ── Featured FiveM server card (s1 "As seen on") ── */
.fs-card{display:inline-flex;align-items:center;gap:15px;margin:32px auto 0;max-width:380px;width:100%;text-align:left;text-decoration:none;position:relative;overflow:hidden;
  background:rgba(11,12,16,.7);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 18px;
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.fs-card:hover{transform:translateY(-4px);border-color:rgba(255,20,40,.6);box-shadow:0 16px 42px rgba(0,0,0,.55),0 0 30px rgba(255,20,40,.22)}
.fs-icon{width:52px;height:52px;border-radius:13px;flex-shrink:0;object-fit:cover;border:1px solid rgba(255,255,255,.14)}
.fs-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fs-label{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ice)}
.fs-name{font-family:'Unbounded',sans-serif;font-weight:400;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-meta{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;color:#9a9ca6}
.fs-meta .fs-mem{color:#e9eaef}
.fs-dot{width:7px;height:7px;border-radius:50%;background:#23c552;box-shadow:0 0 8px rgba(35,197,82,.8);flex-shrink:0}
.fs-join{flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:var(--ice);padding:9px 15px;border-radius:999px;white-space:nowrap;opacity:0;transform:translateX(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:0 0 18px rgba(255,20,40,.45)}
.fs-card:hover .fs-join{opacity:1;transform:translateX(0)}
@media (hover:none){ .fs-join{opacity:1;transform:none} }
@media (max-width:640px){ .fs-card{margin-top:18px;max-width:340px} }
@media (orientation:landscape) and (max-height:620px){ .fs-card{margin-top:14px;padding:10px 14px} .fs-label{display:none} .fs-icon{width:44px;height:44px} }

/* ════════════════════════════════════════════════════════════
   LANDSCAPE PHONES: viewport HEIGHT is the limiting dimension.
   Every section is locked to 100vh at a fixed scroll offset, so
   content must shrink to fit a ~390–430px-tall viewport. Headings
   are keyed to vh (height) instead of vw, spacing is trimmed, and
   tall stacks are re-flowed into rows. Targets landscape phones
   (height ≤540) without touching tablets (≥744 tall) or portrait.
   ════════════════════════════════════════════════════════════ */
@media (orientation:landscape) and (max-height:620px){

  /* particles dimmed + stronger backing so text stays readable */
  #stage{opacity:.5}
  section .inner::before{inset:-30px;background:radial-gradient(ellipse at center,rgba(5,5,8,.88),rgba(5,5,8,.58) 58%,transparent 82%);border-radius:30px}

  /* typography keyed to viewport HEIGHT, not width */
  h1{font-size:clamp(26px,7.4vh,42px);line-height:1.02}
  h2{font-size:clamp(21px,5.8vh,32px);line-height:1.06}
  .mega{font-size:clamp(30px,11vh,54px);line-height:.98}
  .why-h2{font-size:clamp(21px,5.8vh,32px);line-height:1.06}
  .lede{font-size:13px;line-height:1.5;margin-top:10px;max-width:62ch}
  .eyebrow{margin-bottom:8px}
  #s0 .sub{margin-top:12px;letter-spacing:.34em}
  .hero-ctas{margin-top:16px}
  .magnet{padding:11px 22px}

  /* chrome: hide scroll cue, force hamburger, shrink HUD */
  #navLinks{display:none}
  .hamburger{display:flex}
  .magnet--small{display:none}
  #hud{right:12px;bottom:10px;gap:10px}
  #dial{width:48px;height:48px}
  #footerMeta{flex-direction:row;bottom:10px;gap:12px}

  /* s1: brand ticker */
  .ticker-wrap{margin-top:16px;padding:10px 0}

  /* s2, why (pinned scrollytelling): keep rail + stage side-by-side */
  .why-flow{margin-top:14px;max-width:560px}
  .why-stage{min-height:clamp(118px,40vh,150px)}
  .why-step{padding:14px 16px;gap:14px}
  .why-step .spec-ico{width:42px;height:42px;border-radius:12px}
  .why-step h3{font-size:18px;line-height:1.1}
  .why-step p{font-size:12px;line-height:1.45;margin-top:6px;max-width:46ch}
  .why-num{margin-bottom:6px}

  /* s3, cinematic FX: media + body side-by-side so the card stays short */
  #fxDeck{margin-top:14px}
  .fx-card{display:flex;flex-direction:row;align-items:stretch;width:min(640px,100%)}
  .fx-media{width:42%;height:auto;flex-shrink:0}
  .fx-body,.fx-media+.fx-body{flex:1;padding:14px 18px}
  .fx-card h3{font-size:17px;margin-top:4px}
  .fx-card p{font-size:12px;line-height:1.45;margin-top:6px}
  .lede-tags{margin-top:10px;gap:7px}
  .fx-nav{margin-top:10px;width:min(640px,100%)}

  /* s4, tiers: 2×2 grid + compact rows */
  #cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .tier{gap:12px;padding:10px 13px;border-radius:13px}
  .tier .spec-ico{width:36px;height:36px;border-radius:10px}
  .tier .spec-ico svg{width:17px;height:17px}
  .tier h3{font-size:14px;margin-top:2px}
  .tier p{font-size:11px;line-height:1.35;margin-top:3px}
  .tier .tag{font-size:8px;padding:5px 9px;letter-spacing:.16em}

  /* s6, stats: keep 4 across (wide viewport), compact */
  #stats{grid-template-columns:repeat(4,1fr);margin-top:14px}
  .stat{padding:14px}
  .stat .num{font-size:clamp(24px,5.4vh,36px)}
  .stat .cap{margin-top:6px;font-size:9px}

  /* s8: reviews marquee */
  .rev-marquee{margin-top:16px}
  .rev-card{flex-basis:clamp(220px,40vw,280px);padding:16px 18px}
  .rev-text{font-size:12px;line-height:1.5;margin-top:8px}

  /* s10, recruit: 2 cards side-by-side, drop supplementary lede */
  #s10 .lede{display:none}
  #recruitGrid{grid-template-columns:1fr 1fr;margin-top:14px;gap:12px}
  .recruit-card{padding:13px 15px}
  .recruit-card .spec-ico{width:38px;height:38px;margin-bottom:8px}
  .recruit-card h3{font-size:16px}
  .recruit-card p{font-size:12px;line-height:1.4;margin-top:6px}
  .recruit-card .tag{margin-top:10px}
  #s10 .magnet{margin-top:14px}

  /* s11, team: compact founder cards + tighten footer */
  #foundersGrid{margin-top:14px;gap:10px}
  .founder-card{padding:12px 18px;gap:6px}
  .founder-avatar,.founder-avatar-ph{width:46px;height:46px}
  .founder-avatar-ph{font-size:18px}
  .founder-name{font-size:10px;letter-spacing:.18em}
  .founder-role{font-size:8px;letter-spacing:.06em;margin-top:-2px}
  #s11 .magnet,.founders-cta{margin-top:14px}
  #s12 .inner-center{padding-bottom:200px}

  /* denser glass so particles never bleed through text */
  .glass,.founder-card,.tier,.recruit-card,.spec,.fx-card,.why-stage,.stat{background:rgba(10,11,15,.92)}
}

/* ════════════════════════════════════════════════════════════
   PHONES / SMALL TABLETS: cut the composited-layer count.

   backdrop-filter puts every element it touches on its own GPU layer, and each
   layer has to re-sample everything painted behind it. On a 3x-DPR phone that is
   ~12MB per full-width layer; with 40+ of them, 60+ will-change promotions and the
   WebGL particle canvas, iOS Safari blows its per-tab GPU budget and starts
   dropping layer contents — which is why cards, images and headings render blown
   up, unstyled or on top of each other.

   The landscape block above already solved this by making the panels ~92% opaque;
   this does the same for portrait, which it never covered. At that opacity the
   blur behind it is invisible anyway, so removing it costs nothing visually.
   ════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .glass,#audio-ctrl,#audio-menu,#mmenu,.magnet,#enterBtn,.spec,.why-stage,
  .fx-card,.fx-arrow,.tier,.stat,.recruit-card,.news-card,.founder-card,
  #music-player,#mp-reopen,#now-playing-toast,.boost-popup,#easter-egg,.fs-card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  /* Opaque panels, so losing the blur doesn't let particles bleed through. */
  .glass,.founder-card,.tier,.recruit-card,.spec,.fx-card,.why-stage,.stat,
  .news-card,.fs-card,#music-player,#audio-menu,#mmenu{
    background:rgba(10,11,15,.94);
  }

  /* will-change is a permanent layer hint, not a per-animation one — it was
     promoting 60+ elements for the whole session. The reveals still run. */
  [data-fade],.rl>span,.magnet,.tier,.news-thumb img{will-change:auto}
}

.is-hidden { display: none !important; }

/* Hand-off from the tiers section to the pricing page. Centred under the
   card grid so it reads as the conclusion of the section, not a fifth card. */
.tier-cta { margin-top: clamp(24px,3.4vw,40px); display: flex; justify-content: center; }

/* Real Discord avatars. The circle keeps its gradient underneath, so it
   still reads as a filled avatar for the moment the image is loading and
   for anyone whose picture fails and falls back to initials. */
.rev-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.rev-empty{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:26px 2px}

/* ── logo shine ──────────────────────────────────────────────────────────
   The same white sweep the loader runs across the logo, and the same one
   baked into the Discord embed thumbnail, so the mark behaves consistently
   wherever it appears.

   The overlay is masked to logo.png's own alpha. Without that the band would
   show as a rectangle over the transparent corners instead of tracking the
   artwork.

   This animates background-position, which does repaint, unlike the star
   field which is opacity only. That is deliberate: the element is 30x30, so
   the repaint is ~900px and costs nothing measurable, and it is the same
   technique loadShine already uses on the loader. Doing it transform-only
   would need a second wrapper element on every page to separate the moving
   band from the mask, which is not worth it at this size.                */
.wordmark { position: relative; }
.wordmark::after {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 30px; height: 30px; transform: translateY(-50%);
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url(/logo.png) center / contain no-repeat;
          mask: url(/logo.png) center / contain no-repeat;
  mix-blend-mode: screen;
  animation: logoShine 4.5s ease-in-out infinite;
}
/* Sweeps across, then waits, so it reads as an occasional glint rather than
   a constantly moving nav. */
@keyframes logoShine {
  0%   { background-position: 190% 0; }
  35%  { background-position: -90% 0; }
  100% { background-position: -90% 0; }
}

/* ════════════════════════════════════════════════════════════
   SHORT VIEWPORTS: the window's HEIGHT is the constraint

   Every section is locked to 100vh at a fixed scroll offset and its
   content is vertically centred, so a section only looks right while
   its content fits between two pieces of fixed chrome:

     top    the nav (wordmark left, audio + hamburger right)
     bottom the HUD altimeter, in the right-hand corner

   Because the content is centred, the top and bottom gaps are equal,
   so the rule is simply: content height <= viewport - 2 x (the taller
   of those two). At 900px tall that is about 660px.

   Measured before this block existed, three sections broke it:

     s3  Cinematic FX   800px   right-aligned, so its "Browse packs"
                                button landed ON the HUD altimeter
     s4  Tiers          843px   spilled out of its own section
     s10 Recruiting     740px   spilled out of its own section
     s9  Past trends    392px   spilled on short landscape phones

   s3 was the visible one, and the worst, because it is the only
   right-aligned column on the page: it is the only one that can reach
   the corner the HUD lives in.

   There is already a block above for short landscape viewports
   (<=620px tall). This covers everything between that and a full
   desktop window:
   1366x768 laptops, landscape phones wider than 900px, and any window
   that simply is not maximised.
   ════════════════════════════════════════════════════════════ */

/* ── landscape phones wider than 900px ──────────────────────────────
   The right-hand column reflows to the left at max-width:900px, which
   was written for portrait phones. A landscape phone is short but often
   WIDER than 900 (iPhone Pro Max is 932, plenty of Androids clear 1000),
   so it missed that reflow and kept s3 right-aligned, straight into the
   HUD corner. Trigger the same reflow on the shape of the viewport
   rather than on width alone. */
@media (orientation: landscape) and (max-height: 620px) {
  .inner-right { text-align: left; }
  .eyebrow-right { justify-content: flex-start; }
  .lede-right { margin-left: 0; }
  .fx-card { justify-self: start; }
  .fx-nav { margin-left: 0; }

  /* 22px of vertical padding on the nav is a lot of a 430px-tall screen,
     and every section has to clear it. Trimming the bar buys ~24px at the
     top of all thirteen of them. */
  #nav { padding-top: 9px; padding-bottom: 9px; }
  .nav-logo-img { width: 26px; height: 26px; }

  /* The audio pill is the tallest thing in the bar, so it sets how far
     down every section has to start. */
  #sound-toggle { padding: 6px 9px 6px 11px; }
  #audio-menu-btn { padding: 6px 11px 6px 8px; }
  .hamburger { padding: 9px; }

  /* The remaining few pixels each section needed to sit clear of the nav
     and the HUD at 390-460px tall. */
  .magnet { padding: 9px 18px; }
  #s3 .fx-browse, #s10 .magnet, #s11 .magnet, .tier-cta, .founders-cta { margin-top: 10px; }
  .fx-nav { margin-top: 8px; }
  .fx-arrow { width: 28px; height: 28px; }
  .fx-body, .fx-media + .fx-body { padding: 11px 14px; }
  .lede-tags { margin-top: 8px; }

  /* s9 (Past trends) postdates the landscape block above, so it never got
     trimmed with the rest and was the one section still taller than the
     viewport on a short landscape phone. */
  .news-grid { margin-top: 14px; gap: 12px; }
  .news-card { padding: 11px; gap: 14px; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
  .news-title { font-size: 15px; margin-top: 7px; line-height: 1.25; }
  .news-desc { font-size: 11.5px; line-height: 1.45; margin-top: 7px; }
  .news-meta { margin-top: 10px; font-size: 9px; }
  .news-play { width: 40px; height: 40px; }
  .news-play svg { width: 15px; height: 15px; }
}

/* ── short desktop and laptop windows ───────────────────────────────
   min-height 621 keeps this off the compact landscape treatment, which
   has its own block with tighter values; without the guard this one sits
   later in the cascade and quietly undoes them. The two thresholds have
   to meet exactly: a 1024x541 window originally fell between them and
   got the desktop sizing at half the desktop height, which broke every
   section on the page. */
@media (min-width: 901px) and (min-height: 621px) and (max-height: 1040px) {

  /* Headings keyed to height rather than width, the same trick the
     landscape block uses. Two-line headings cost the most here. */
  h2 { font-size: clamp(30px, 5.6vh, 84px); }

  .eyebrow { margin-bottom: 14px; }
  .lede { margin-top: 16px; }

  /* s3 — Cinematic FX.
     The stacked card (image above text) is what made this column 800px
     tall. Side by side it is about 200px, which is the difference
     between clearing the HUD and sitting on top of it. Same treatment
     the landscape-phone block already applies, for the same reason. */
  #fxDeck { margin-top: 18px; }
  .fx-card { display: flex; flex-direction: row; align-items: stretch; width: min(720px, 100%); }
  .fx-media { width: 40%; height: auto; flex-shrink: 0; }
  .fx-body, .fx-media + .fx-body { flex: 1; padding: 18px 22px; }
  .fx-card h3 { font-size: clamp(17px, 2.4vh, 22px); margin-top: 5px; }
  .fx-card p { font-size: 13px; line-height: 1.55; margin-top: 8px; }
  .lede-tags { margin-top: 11px; }
  .fx-nav { margin-top: 12px; width: min(720px, 100%); }
  .fx-arrow { width: 30px; height: 30px; }
  #s3 .fx-browse { margin-top: 14px; }

  /* s4 — Tiers, the tightest section on the page: four stacked cards plus
     a heading and a CTA. Trimming one card pays four times over, which is
     the only way this one clears the nav on a 768px-tall laptop. */
  #cards { margin-top: 20px; gap: 8px; }
  .tier { padding: 11px clamp(18px, 2.6vw, 30px); }
  .tier h3 { font-size: clamp(16px, 2.3vh, 20px); }
  .tier p { font-size: 12.5px; line-height: 1.45; margin-top: 5px; }
  .tier .spec-ico { width: 40px; height: 40px; }
  .tier .spec-ico svg { width: 18px; height: 18px; }
  .tier-cta { margin-top: 16px; }

  /* s10 — Recruiting */
  #recruitGrid { margin-top: 24px; }
  .recruit-card { padding: 20px clamp(20px, 2.6vw, 30px); }
  .recruit-card .spec-ico { margin-bottom: 12px; }
  .recruit-card p { font-size: 13px; line-height: 1.55; margin-top: 9px; }
  .recruit-card .tag { margin-top: 12px; }
  #s10 .magnet { margin-top: 20px; }

  /* s9 — Past trends */
  .news-grid { margin-top: 20px; }
  .news-card { padding: 14px; gap: 18px; }
  .news-desc { font-size: 13px; line-height: 1.55; margin-top: 9px; }
  .news-meta { margin-top: 12px; }
}

/* ── the numbered eyebrow on short viewports ────────────────────────
   Every section opens with a numbered eyebrow ("04 · Cinematic FX"),
   and the HUD altimeter prints the exact same string in the corner of
   the same screen. On a short viewport the centred column reaches up
   into the nav and that eyebrow lands on the wordmark, which is what
   the reported screenshot showed.

   Dropping it there costs nothing (the number is still on screen, in
   the HUD) and buys back ~28px of height in every section, which moves
   the rest of the column further clear of the nav.

   s0 is excluded: its eyebrow is a tagline, not a section number, and
   the HUD has no equivalent for it.

   LANDSCAPE ONLY. The collision this fixes was reported in landscape, but
   height alone was the wrong test: a phone held upright reports ~750px of
   visible viewport once the browser chrome is off a 844px screen, so every
   portrait phone tripped this too and lost the section titles for no reason.
   Upright there is height to spare — the column is narrow and tall and sits
   well clear of the nav. */
@media (max-height: 800px) and (orientation: landscape) {
  #world section:not(#s0) .eyebrow { display: none; }
}

/* ── the smallest landscape phones (<=400px tall) ───────────────────
   Compact and older handsets: about 260px of usable height once the nav
   and the HUD have taken their share. The block above gets 390-460px
   devices clear; these last few need the panels themselves thinner.

   #s12 is the odd one out: it reserves 200px of bottom padding for the
   footer meta, which on a 360px-tall screen is more than half the
   viewport and pushed the heading straight into the nav. */
@media (orientation: landscape) and (max-height: 400px) {
  h2, .why-h2 { font-size: clamp(18px, 5vh, 28px); }

  .magnet { padding: 8px 16px; }
  #s3 .fx-browse, #s10 .magnet, #s11 .magnet,
  .tier-cta, .founders-cta { margin-top: 8px; }

  /* s3 — the tags repeat what the copy already says, and they are the
     one part of the card that can go without losing information. */
  #fxDeck { margin-top: 10px; }
  .lede-tags { display: none; }
  .fx-body, .fx-media + .fx-body { padding: 9px 12px; }
  .fx-nav { margin-top: 6px; }
  .fx-arrow { width: 26px; height: 26px; }

  /* s4 */
  #cards { margin-top: 10px; gap: 8px; }
  .tier { padding: 8px 11px; }
  .tier .spec-ico { width: 32px; height: 32px; }
  .tier .spec-ico svg { width: 15px; height: 15px; }
  .tier p { font-size: 10.5px; line-height: 1.3; margin-top: 2px; }

  /* s10 */
  #recruitGrid { margin-top: 10px; }
  .recruit-card { padding: 10px 12px; }
  .recruit-card .spec-ico { width: 32px; height: 32px; margin-bottom: 6px; }
  .recruit-card p { margin-top: 4px; }
  .recruit-card .tag { margin-top: 7px; }

  /* s12 */
  #s12 .inner-center { padding-bottom: 120px; }
}

/* ── the 621-780px band on a wide screen ────────────────────────────
   A desktop window this short is between the two treatments: too tall
   for the compact landscape rules, too short for the desktop ones. Four
   sections still reached the nav here, each for its own reason:

     s4  four tier cards
     s5  .mega is sized off viewport WIDTH, so on a wide-but-short
         window it renders at 150px while there is no room for it
     s10 heading + lede + two cards + CTA
     s12 reserves 250px of bottom padding, which is 39% of a 640px
         window

   Same lede-drop the landscape block uses on s10: the heading and the
   cards already say it. */
@media (min-width: 901px) and (min-height: 621px) and (max-height: 780px) {
  .mega { font-size: clamp(40px, 9vh, 170px); }

  /* Four stacked tier rows cannot be squeezed enough to fit a 620-660px
     window without the copy going unreadable. Two columns halves the
     stack instead, which is the same reflow the landscape block uses and
     leaves the cards at a normal size. */
  #cards { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; gap: 10px; }
  .tier { padding: 11px clamp(16px, 2.4vw, 26px); }
  .tier .spec-ico { width: 38px; height: 38px; }
  .tier .spec-ico svg { width: 18px; height: 18px; }
  .tier p { font-size: 12px; line-height: 1.4; margin-top: 4px; }
  .tier-cta { margin-top: 14px; }

  #s10 .lede { display: none; }
  #recruitGrid { margin-top: 16px; }
  .recruit-card { padding: 16px 18px; }
  #s10 .magnet { margin-top: 14px; }

  #s12 .inner-center { padding-bottom: 150px; }
}


/* ════════════════════════════════════════════════════════════
   FOUNDERS SLIDER (phones)

   Desktop shows all three people in a centred row. On a phone that row
   squeezed them into 50px avatars and 9px names, so there it becomes one
   card at a time with arrows, dots and a 3s auto-advance.

   The mode is owned by meridian.js, which adds .fd-on, rather than by a
   media query here: the landscape-phone block sits later in this file and
   would re-apply a gap to the track, which throws every slide position
   off by that gap. One switch, one source of truth.
   ════════════════════════════════════════════════════════════ */
#foundersCarousel.fd-on { margin-top: 20px; }

/* A little side room so the card's own shadow is not sliced off by the
   overflow clip, pulled back with a matching negative margin so the card
   still measures exactly 100% of the row. */
.fd-on .fd-viewport { overflow: hidden; padding: 6px; margin: -6px; }

#foundersCarousel.fd-on #foundersGrid {
  display: flex; flex-wrap: nowrap; gap: 0; margin-top: 0;
  /* justify-content MUST be reset. The base #foundersGrid rule centres the
     row, which is right for the three-across desktop layout and catastrophic
     here: three cards at 100% each overflow the track by 660px, and centring
     splits that overflow evenly, sliding the whole run 330px to the left. The
     result was that translateX(0%) showed card 2, translateX(-100%) showed
     card 3, and translateX(-200%) showed a 6px sliver of card 3 and 336px of
     nothing. Since the deck auto-advances every 3s, one state in three was a
     blank box under the heading, which is what a phone actually displayed. */
  justify-content: flex-start;
  transition: transform .5s var(--ease); will-change: transform;
}
.fd-on .founder-card {
  flex: 0 0 100%; max-width: 100%;
  padding: 26px 22px; gap: 12px; border-radius: 18px;
}
.fd-on .founder-avatar, .fd-on .founder-avatar-ph { width: 86px; height: 86px; }
.fd-on .founder-avatar-ph { font-size: 30px; }
.fd-on .founder-name { font-size: 12px; letter-spacing: .26em; text-align: center; line-height: 1.3; }
.fd-on .founder-role { font-size: 10px; letter-spacing: .14em; margin-top: -5px; line-height: 1.4; opacity: .9; }
.fd-on .founder-rule { width: 26px; }
.fd-on .fd-nav { display: flex; }

/* Cards fade in one after another on desktop. In the slider they are side
   by side off-screen, so a stagger would leave slide 3 invisible until it
   is reached: show them together. */
.fd-on .founder-card { opacity: 1; transform: none; }

/* Landscape phones are short, not narrow, and still fit the row. If one is
   also narrow enough to get the slider, keep the card compact. */
@media (orientation: landscape) and (max-height: 620px) {
  .fd-on .founder-card { padding: 14px 18px; gap: 8px; }
  .fd-on .founder-avatar, .fd-on .founder-avatar-ph { width: 54px; height: 54px; }
  .fd-on .founder-avatar-ph { font-size: 20px; }
  .fd-on .fd-nav { margin-top: 10px; }
  .fd-on .fd-arrow { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  #foundersCarousel.fd-on #foundersGrid { transition: none; }
}


/* ── the inline nav needs about 1200px ──────────────────────────────
   Measured at 1024x768: wordmark 178 + links 544 + right cluster 318 =
   1040, plus 82 of padding = 1122 against a 1024 viewport. "Join Discord"
   hung 57px off the right edge and could not be clicked. The links were
   only being folded into the hamburger below 900, which left the whole
   901-1199 band broken: iPad landscape, iPad Pro portrait, and every
   laptop window narrower than 1200.

   The hamburger layout already exists and is tested, so this just starts
   using it where the inline one does not fit. Join Discord stays visible
   here (it only hides at 900, as before), so the CTA is not lost. */
@media (max-width: 1199px) {
  #navLinks { display: none; }
  .hamburger { display: flex; }
}

/* ── 360px and narrower ─────────────────────────────────────────────
   Every section is pinned to 100vh at a fixed scroll offset, so content
   taller than the viewport does not scroll: it runs into the section
   underneath and both become unreadable.

   Measured at 320x568 (iPhone SE and older Androids):
     s3  Cinematic FX  653px against a 568px viewport
     s4  Tiers         732px against a 568px viewport

   At 320px wide every line of body copy wraps roughly twice as often as
   it does at 375, which is where the extra height comes from. The tier
   descriptions are the single biggest contributor: four cards, each
   growing by three or four wrapped lines. They are dropped only at this
   width, leaving the icon, the tier name and its tag, which is still a
   readable list. Above 360px nothing here applies. */
@media (max-width: 360px) {
  h2 { font-size: clamp(22px, 6.6vw, 27px); }
  .eyebrow { margin-bottom: 10px; }

  /* s3 */
  #fxDeck { margin-top: 16px; }
  .fx-media { height: clamp(110px, 30vw, 150px); }
  .fx-body, .fx-media + .fx-body { padding: 11px 13px 13px; }
  .fx-card h3 { font-size: 15px; margin-top: 4px; }
  .fx-card p { font-size: 11.5px; line-height: 1.45; margin-top: 6px; }
  .lede-tags { margin-top: 8px; gap: 6px; }
  .lede-tags .tag { font-size: 7.5px; padding: 5px 8px; letter-spacing: .12em; }
  .fx-nav { margin-top: 10px; }
  #s3 .fx-browse { margin-top: 12px; }

  /* s4 */
  #cards { margin-top: 14px; gap: 8px; }
  .tier { padding: 10px 12px; gap: 10px; }
  .tier .spec-ico { width: 34px; height: 34px; border-radius: 10px; }
  .tier .spec-ico svg { width: 16px; height: 16px; }
  .tier h3 { font-size: 14px; }
  .tier p { display: none; }
  .tier .tag { font-size: 7.5px; padding: 5px 8px; }
  .tier-cta { margin-top: 14px; }

  /* the CTAs themselves, which wrap to two lines at this width */
  .magnet { padding: 11px 18px; font-size: 9.5px; letter-spacing: .18em; }
}


/* ── 568x320 and similar: the last two sections that did not fit ────
   Measured on the landscape probe at 568x320:
     s4  Tiers              388px against a 320px viewport
     s8  Community reviews  335px against a 320px viewport

   Both are inside the landscape block above but were still over. The tier
   descriptions go for the same reason they go at 360px wide: four cards
   each carrying three wrapped lines is the whole overage, and the icon,
   name and tag still read as a list. The marquee cards get tighter type
   and a three-line clamp; the full text of every review is on /reviews. */
@media (orientation: landscape) and (max-height: 400px) {
  .tier p { display: none; }
  .tier { padding: 7px 10px; gap: 9px; }
  .tier h3 { font-size: 13px; }
  #cards { margin-top: 8px; gap: 7px; }

  .rev-marquee { margin-top: 10px; }
  .rev-card { padding: 11px 13px; }
  .rev-avatar { width: 30px; height: 30px; }
  .rev-text {
    font-size: 11px; line-height: 1.4; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rev-name { font-size: 11px; }
}

/* Partners sit in the same strip as the platforms rather than in a band of
   their own. A separate labelled row read as a second, lesser list; these
   belong on the same line. The logos are images where the platforms are inline
   SVG, so they need matching size and the greyed-until-hovered treatment the
   SVGs get from `color` — which an <img> does not inherit. */
.aso-brand img{
  /* Same ramp as the platform glyphs: with the labels gone, every mark in the
     row is carrying its identity alone and they should read at one weight. */
  height:clamp(28px,2.9vw,36px);width:auto;display:block;
  filter:grayscale(1) brightness(1.6);opacity:.72;
  transition:filter .35s var(--ease),opacity .35s var(--ease)
}
.aso-brand:hover img,.aso-brand:focus-visible img{filter:none;opacity:1}
/* Two of the six are links now; they must not pick up underline or link blue.
   No text inside them either, so the tap target comes from padding rather than
   from a label — the marks alone are under 44px wide. */
.aso-brand--link{
  text-decoration:none;color:#6f717b;
  min-width:44px;min-height:44px;justify-content:center;padding:4px 6px
}

/* ── the audio button shows its own state ────────────────────────────────
   The word "AUDIO" is gone from the dropdown; the caret carries it. In its
   place the toggle shows a speaker: with sound waves while the music plays,
   struck through when it is muted. One glance, no reading.

   Driven entirely off #audio-ctrl.is-muted, which the homepage player and the
   sub-page player both already maintain — no JS change, and no second source
   of truth to fall out of step. */
.ac-ico{width:17px;height:17px;display:none;flex:0 0 auto}
.ac-ico--on{display:block}
#audio-ctrl.is-muted .ac-ico--on{display:none}
#audio-ctrl.is-muted .ac-ico--off{display:block}
/* Both states occupy the same width so the nav does not shuffle sideways
   every time somebody mutes. */
#sound-toggle{justify-content:center;min-width:40px}
/* Muted is a state, not an error, but it should read as "off" rather than
   sitting the same grey as the idle button. */
#audio-ctrl.is-muted #sound-toggle{color:#6f717b}