:root{--bg:#050505;--ink:#ECECEF;--gold:#E8B04B;--gold2:#FFE7A8;--mut:#a9a9b3;--card:#0e0e12;--line:#23232b;--neon1:#7c5cff;--neon2:#22e3c4;--neon3:#ff4fa3;--spring:cubic-bezier(.34,1.56,.64,1);--out:cubic-bezier(.22,1,.36,1);--nav-h:64px}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit}img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--gold);color:#000;padding:8px 12px;z-index:99}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{line-height:1.05;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(28px,5vw,46px);margin-bottom:12px}
.eyebrow{color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin:0 0 10px}
h2.eyebrow{line-height:inherit}
.lead{color:var(--mut);max-width:60ch;font-size:clamp(16px,2.2vw,19px)}
#contact .lead a{display:inline-flex;align-items:center;min-height:44px}   /* tap target >=44px */
.hero .lead{color:#c8c8d0;margin-top:clamp(26px,3.4vw,40px)}
section{padding:72px 0}
.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;background:linear-gradient(rgba(5,5,5,.82),rgba(5,5,5,0));transition:translate .4s var(--out),border-color .3s}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(10px);background:rgba(5,5,5,.72);opacity:0;transition:opacity .3s}
.nav.stuck{border-color:var(--line)}.nav.stuck::before{opacity:1}
.nav .brand{transform-origin:0 50%;transition:scale .3s var(--out)}.nav.stuck .brand{scale:.88}
.nav .wrap{display:flex;align-items:center;gap:14px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.08em;text-decoration:none;font-size:15px}
.brand img{width:36px;height:36px;object-fit:contain}
.nav nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;text-decoration:none;color:var(--mut);border-radius:8px;font-size:14px}
.nav nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--gold);scale:0 1;transition:scale .35s var(--out)}
.nav nav a.on{color:var(--ink)}.nav nav a.on::after{scale:1 1}.nav nav a.btn::after{display:none}
.nav nav a:hover{color:var(--ink)}
.nav nav a.btn{color:#1a1200}
@media(max-width:700px){html{scroll-padding-top:40px}.nav.hide{translate:0 -101%}}
@media(max-width:560px){.nav nav a:not(.btn){display:none}}
.btn{position:relative;display:inline-block;font-family:inherit;background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,#c08a36);color:#1a1200;font-weight:800;padding:14px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-size:16px;transition:transform .25s var(--spring)}
.btn:hover{transform:translateY(-3px) scale(1.04)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--gold);pointer-events:none;animation:ring 2.2s ease-out infinite}
.btn.pulse:focus-visible::after{display:none}
.btn.ghost{background:rgba(5,5,5,.9);color:var(--ink);border:2px solid #6b6b7c}
.btn.sm{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;font-size:14px}
@keyframes ring{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.06,1.14)}}
.hero{position:relative;padding:40px 0 30px;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center}
.hero .wrap{display:grid;gap:24px;align-items:center;grid-template-columns:1.1fr .9fr}
@media(max-width:820px){.hero{padding-bottom:36px}.hero .wrap{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.cta{justify-content:center}}
.hero h1{font-size:clamp(44px,9vw,92px);font-weight:900}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--gold2),var(--gold),#ff9d4b);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.stage{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto;will-change:transform;animation:emb 1.3s var(--out) .3s both}
.stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(232,176,75,.28),transparent 68%);filter:blur(8px);animation:glow 5s ease-in-out infinite}
.logo-svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));overflow:visible;animation:float 7s ease-in-out 1.6s infinite}
.chunk{animation:breakaway 7s cubic-bezier(.45,0,.2,1) infinite}
@keyframes breakaway{0%,14%{transform:translate(0,0) rotate(0)}
 34%{transform:translate(120px,-110px) rotate(9deg)}
 50%{transform:translate(105px,-140px) rotate(-6deg)}
 66%{transform:translate(120px,-110px) rotate(7deg)}
 88%{transform:translate(-8px,6px) rotate(-1deg)}
 94%,100%{transform:translate(0,0) rotate(0)}}
@keyframes glow{50%{transform:scale(1.12);opacity:.7}}
.spark{position:absolute;border-radius:2px;background:var(--gold);opacity:.9;animation:drift 6s ease-in-out infinite alternate}
.spark:nth-child(1){width:14px;height:14px;top:6%;right:10%;transform:rotate(30deg)}
.spark:nth-child(2){width:9px;height:9px;top:20%;right:2%;animation-delay:-2s;background:var(--gold2)}
.spark:nth-child(3){width:11px;height:11px;bottom:12%;left:4%;animation-delay:-4s;background:var(--neon2)}
@keyframes drift{to{transform:translate(-14px,-22px) rotate(140deg)}}
.marq-wrap{overflow:clip}
#eligibility:empty{display:none}
.marq{border-block:1px solid var(--line);background:rgba(14,14,18,.7);overflow:hidden;padding:14px 0;transform:rotate(-1.2deg);margin:10px -10px}
.marq-track{display:flex;gap:34px;width:max-content;animation:marq 30s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq span{font-weight:900;font-size:clamp(20px,3.4vw,32px);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.marq span:nth-child(3n+1){color:var(--gold);-webkit-text-stroke:0}
.marq span::after{content:"\25C6";margin-left:34px;color:var(--neon2);-webkit-text-stroke:0;font-size:.6em;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}
.grid{display:grid;gap:18px;margin-top:30px}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{--rc:var(--h,var(--hl,var(--gold)));background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative;overflow:hidden;isolation:isolate;transition:translate .45s var(--spring),scale .45s var(--spring)}


.card h3,.card h4{font-size:22px;margin:10px 0 6px}.card p{color:var(--mut);margin:0}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 10%,rgba(255,231,168,.16),transparent 55%),linear-gradient(160deg,rgba(38,34,48,.92),rgba(10,10,16,.94));border:1px solid rgba(232,176,75,.5);box-shadow:inset 0 1px 0 rgba(255,240,196,.35),inset 0 -8px 14px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.5);backdrop-filter:blur(6px)}.ico svg{width:31px;height:31px;filter:drop-shadow(0 0 5px rgba(232,176,75,.35))}
.grp{margin-top:44px}
/* sub-section anchors have no 72px section padding of their own: clear the 65px sticky nav */
.grp,.status{scroll-margin-top:48px}
.gh{display:flex;align-items:center;gap:12px;font-size:clamp(22px,3.4vw,30px)}
.gsub{color:var(--mut);margin:6px 0 0}
.badge{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.1em;padding:4px 10px;border-radius:999px;color:#03161a;white-space:nowrap}
/* Derived from the card's own --h (each title's real brand accent, set inline per
   .gcard in home/index.html) rather than a hardcoded teal: the badge used to be a
   fixed teal gradient regardless of the card under it, which clashed outright once
   a card's --h was a different hue (e.g. Polarush's hot-pink --h, itself a bug — see
   the --h fix on the .gcard rows). Falls back to the original teal for the ONE
   b-live badge that isn't inside a --h-bearing .gcard (the "Live now" section
   heading) so that spot is pixel-identical to before. */
.b-live{background:linear-gradient(135deg,color-mix(in srgb,var(--h,#28e0c8) 55%,#fff),var(--h,#28e0c8))}
.b-soon{background:linear-gradient(135deg,var(--gold2),var(--gold))}
.b-wip{background:#2a2a35;color:var(--mut);border:1px solid #3a3a46}
.gcard{display:flex;flex-direction:column;padding:18px;border-top:3px solid var(--hl,var(--h,var(--gold)))}
.gcard h4{margin:10px 0 4px;display:flex;align-items:center;gap:10px;min-height:40px}
.emb{flex:none;width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.5)}
#g-live .emb{width:48px;height:48px;border-radius:12px}.gcard .bl{min-height:3.1em}
.gart{aspect-ratio:16/9;border-radius:14px;margin-bottom:14px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--h) 22%,#0a0a10),#07070b 75%);overflow:hidden;padding:12px}
.gart img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.badge{align-self:flex-start}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid #34343f;color:var(--ink);background:#15151b}
.more{margin:14px 0 0;padding:0 12px;background:#0b0b0f;border-radius:12px}
.more summary{padding:12px 0;font-size:14px;min-height:44px;align-items:center}
.more dl{margin:0 0 12px}.more dt{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:10px}
.more dd{margin:2px 0 0;color:var(--mut);font-size:14px}
.more[open]{border:1px solid var(--h,var(--gold))}
/* fan-out reveal: only when JS marks the group .ready; content is visible at rest otherwise */
.js .fan.ready .gcard{translate:calc(var(--k,0)*100%) 0;scale:0;opacity:0;transform-origin:50% 50%}
.js .fan.ready.in .gcard{translate:0 0;scale:1;opacity:1;transition:translate .8s var(--out),scale .8s var(--out),opacity .5s ease;transition-delay:calc(var(--i,0)*.06s)}
.js .fan.ready.in.done .gcard{transition:translate .45s var(--spring),scale .45s var(--spring);transition-delay:0s}
.js .fan.ready .chips span{opacity:0;transform:translateY(20px) scale(.8)}
.js .fan.ready.in .chips span{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.33,1,.68,1);transition-delay:calc(.45s + var(--i,0)*.06s + var(--j,0)*.05s)}
/* keyboard focus must never land on an unrevealed (scale:0 / faded) card */
.js .rv:focus-within,.js .card.rv:focus-within{opacity:1;transform:none;translate:0 0;scale:1}
.js .fan.ready .gcard:focus-within{opacity:1;translate:0 0;scale:1}

.pill{display:flex;gap:14px;align-items:flex-start}
.pill .ico{flex:none}
.pill h3{font-size:19px}.pill p{color:var(--mut);margin:4px 0 0}
details{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:10px;padding:0 18px}
summary{cursor:pointer;padding:16px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid #6b6b7c;color:var(--gold);font-size:20px;line-height:1;transition:transform .35s var(--spring)}
summary:hover::after{transform:rotate(90deg) scale(1.12);border-color:var(--gold);background:rgba(232,176,75,.12)}
details[open] summary::after{transform:rotate(45deg);border-color:var(--gold);background:rgba(232,176,75,.12)}details[open] summary:hover::after{transform:rotate(45deg) scale(1.12)}
details p{margin:0 0 16px;color:var(--mut)}
button{font:inherit}
footer{border-top:1px solid var(--line);padding:30px 0 50px;color:var(--mut);font-size:14px}
footer .fb{display:inline-flex;align-items:center;gap:10px}footer .fb img{width:24px;height:24px}
footer .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.calm-btn{background:none;border:1px solid #6b6b7c;color:var(--mut);border-radius:999px;padding:0 16px;min-height:44px;cursor:pointer;font-size:14px}.calm-btn[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}
.js .rv{opacity:0;transform:translateY(36px) scale(.96);transition:opacity .6s ease,transform .8s var(--spring);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .card.rv{transform:none;translate:0 36px;scale:.96}
.js .card.rv.in{translate:0 0;scale:1;transition:opacity .6s ease var(--d,0s),translate .8s var(--spring) var(--d,0s),scale .8s var(--spring) var(--d,0s)}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js .rv,.js .card.rv,.js .fan.ready .gcard,.js .fan.ready .chips span{opacity:1;transform:none;translate:none;scale:1}.marq{transform:none}.marq-track{flex-wrap:wrap;width:auto;justify-content:center;gap:12px 24px}
}
/* footer "Pause motion" (html.calm, set by landing.js) = the same reduced-motion rules */
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.calm.js .rv,.calm.js .card.rv,.calm.js .fan.ready .gcard,.calm.js .fan.ready .chips span{opacity:1;transform:none;translate:none;scale:1}.calm .marq{transform:none}.calm .marq-track{flex-wrap:wrap;width:auto;justify-content:center;gap:12px 24px}

@media(max-width:820px){.stage{max-width:min(440px,38svh)}}
.gart img{border-radius:12px}
.fan{align-items:start}
/* Live is the only sellable tier, so its cards are the largest: 2-up at full width; Coming soon = one Live-width card; In development = compact 4-up (2x2 below 1000px) */
#g-live .fan,#g-wip .fan{grid-template-columns:repeat(2,minmax(0,1fr))}
.ocard{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;background:transparent;border:2px dashed #6b6b7c}.ocard h4{margin:0}
@media(min-width:1000px){#g-wip .fan{grid-template-columns:repeat(4,minmax(0,1fr))}}
#g-live .gcard h4{font-size:26px;min-height:48px}
#g-live .gcard .bl,#g-soon .gcard .bl{min-height:0}
body{-webkit-user-select:none;user-select:none}a[href^="mailto:"]{-webkit-user-select:text;user-select:text}

/* key-art card: the painted art fills .gart, the title logo sits in its dark left 40% */
.gart.key{position:relative;isolation:isolate;background:#0e0e12;padding:0}
.gart.key::before{content:"";position:absolute;inset:0;z-index:-1;background:center/cover no-repeat;scale:1.06;transform:translate3d(var(--ax,0px),var(--ay,0px),0);transition:scale 1.4s var(--out)}
.gart.key>*{translate:calc(var(--ax,0px)*-1.5) calc(var(--ay,0px)*-1.5)}
.gart.k-abyss-hunter::before{background-image:url(/assets/landing/card-abyss-hunter-1200.webp?v=20260930d);background-size:88% auto;background-position:right center}
.gart.k-polarush::before{background-image:url(/assets/landing/card-polarush-1200.webp?v=20260930d)}
.gart.k-neon-maze::before{background-image:url(/assets/landing/card-neon-maze-1200.webp?v=20260930d)}
.gart.k-block-storm::before{background-image:url(/assets/landing/card-block-storm-1200.webp?v=20261003c)}
.gart.k-dragon-reef::before{background-image:url(/assets/landing/card-dragon-reef-1200.webp?v=20261003b)}
.gart.k-territory-claim::before{background-image:url(/assets/landing/card-territory-claim-1200.webp?v=20260930d)}
.gart.k-starfall-siege::before{background-image:url(/assets/landing/card-starfall-siege-1200.webp?v=20260930d)}
.gart.k-tilt-royale::before{background-image:url(/assets/landing/card-tilt-royale-1200.webp?v=20260930d)}
/* subject sits in the right 60% of these plates: crop the empty left instead of showing a dead third */
.gart.k-block-storm::before{background-size:128% auto;background-position:100% 55%}
.gart.k-abyss-hunter{background:#030303}
.gart.k-block-storm::before,.gart.k-territory-claim::before{-webkit-mask-image:linear-gradient(to right,transparent,#000 15%),linear-gradient(to top,transparent,#000 15%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 15%),linear-gradient(to top,transparent,#000 15%);mask-composite:intersect}
/* category tiles: painted art fills the card, a bottom scrim carries icon/title/copy */
#cats .g4{grid-template-columns:repeat(3,1fr)}
.cat{min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;background:#0e0e12}
.cat::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--art) 70% 30%/cover no-repeat;scale:1.08;transform:translate3d(var(--ax,0px),var(--ay,0px),0);transition:scale 1.4s var(--out)}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,8,.92) 0,rgba(5,5,8,.74) 30%,rgba(5,5,8,0) 62%)}
.cat.k-old{--art:url(/assets/landing/cat-old-school-1200.webp?v=20260930d);--hl:#e8b04b}
.cat.k-new{--art:url(/assets/landing/cat-new-school-1200.webp?v=20260930d);--hl:#c46bff}
.cat.k-live{--art:url(/assets/landing/cat-live-contests-1200.webp?v=20260930f);--hl:#22e3c4}
.cat p{color:#d4d4dc}
/* light-row wall is bright and dense: scrim over the text band only */
.cat.k-live::after{background:linear-gradient(to top,rgba(5,5,8,.94) 0,rgba(5,5,8,.84) 30%,rgba(5,5,8,0) 60%)}

@media(max-width:700px){#cats .g4{grid-template-columns:1fr}.cat{min-height:280px}}
@media(max-width:480px){.cat.k-new{background:#000}.cat.k-new::before{background-size:auto 86%;background-position:75% -22px;-webkit-mask-image:radial-gradient(ellipse 40% 50% at 66% 34%,#000 60%,transparent);mask-image:radial-gradient(ellipse 40% 50% at 66% 34%,#000 60%,transparent)}.cat.k-new::after{background:radial-gradient(120% 75% at 0 100%,rgba(5,5,8,.94),rgba(5,5,8,0) 72%),linear-gradient(to top,rgba(5,5,8,.92) 0,rgba(5,5,8,.74) 30%,rgba(5,5,8,0) 62%)}}
/* emissive mid layer: black = transparent under screen blend */
.sky{position:absolute;top:0;left:0;right:0;height:max(100svh,720px);z-index:-1;pointer-events:none;overflow:hidden;background:#050505;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.sky i{position:absolute;inset:-4%;will-change:transform;animation:skyin 2.2s var(--out) both}
.sky .far{background:url(/assets/landing/hero-far-1920.webp?v=20260930h) 70% 40%/cover no-repeat}
.sky .mid{background:url(/assets/landing/hero-lines-1920.svg?v=20260930h) 70% 40%/cover no-repeat;mix-blend-mode:screen;animation-delay:.15s}
@media(orientation:portrait){.sky .far{background-image:url(/assets/landing/hero-far-1080x1920.webp?v=20260930h);background-position:50% 100%}.sky .mid{background-image:url(/assets/landing/hero-lines-1080x1920.svg?v=20260930h);background-position:50% 100%}}

/* section glows: soft screen-blended light behind a section, lower third only */
#cats,#why,#operators,#contact{position:relative;isolation:isolate}
#cats::before,#why::before,#operators::before,#contact::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;background:var(--dn),var(--gl) no-repeat 50% 100%/100% 60%;-webkit-mask-image:linear-gradient(to bottom,transparent 40%,#000 65%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent 40%,#000 65%,#000 85%,transparent)}
/* glow = CSS radial gradient (was section-glow-a/b.webp) + a tiled feTurbulence dither layer so the long falloff does not band */
#cats,#why,#operators,#contact{--dn: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='.8' 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 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px}
#cats,#operators{--gl:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(108,76,220,.95),rgba(58,40,140,.5) 35%,transparent 75%)}
#why,#contact{--gl:radial-gradient(ellipse 45% 100% at 50% 100%,rgba(32,200,170,.95),rgba(16,110,96,.45) 35%,transparent 75%)}

/* ===== motion layer: transform/opacity only; JS drives pointer state, CSS owns the easing ===== */
@keyframes rise{from{opacity:0;translate:0 28px}}
@keyframes wrise{from{transform:translateY(112%) rotate(5deg)}}
@keyframes emb{from{opacity:0;scale:.8;translate:0 40px}}
@keyframes skyin{from{opacity:0;scale:1.1}}
@keyframes float{50%{translate:0 -12px}}
@keyframes wheel{0%{opacity:0;translate:0 0}30%{opacity:1}100%{opacity:0;translate:0 12px}}
@keyframes cuein{from{opacity:0}}
@keyframes sheen{from{translate:-40px 30%}to{translate:110vw 30%}}
@keyframes livering{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
.hx{animation:rise .9s var(--out) calc(.1s + var(--hi,0)*.14s) both}
.hero h1.sp{animation:none}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.02em .04em .3em;margin:-.02em -.04em -.3em}
.hero h1 .w>i{display:inline-block;font-style:normal;padding:0 .04em .24em;margin:0 -.04em -.24em;transform-origin:0 100%;animation:wrise 1s var(--out) calc(.22s + var(--wi,0)*.11s) both}
.hero h1.sp em{background:none}
.hero h1.sp em .w>i{background:linear-gradient(100deg,var(--gold2),var(--gold),#ff9d4b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.off *,.hero.off *::before,.hero.off *::after{animation-play-state:paused!important}
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:30;pointer-events:none;background:linear-gradient(90deg,var(--neon1),var(--neon2),var(--gold));transform:scaleX(0);transform-origin:0 50%}
.cue{position:absolute;left:50%;bottom:14px;translate:-50% 0;display:none;flex-direction:column;align-items:center;gap:8px;color:var(--mut);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:opacity .4s;animation:cuein 1s ease 1.8s backwards}
.cue i{position:relative;width:20px;height:32px;border:1.5px solid #4a4a58;border-radius:12px}
.cue i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:wheel 1.8s var(--out) infinite}
.cue.gone{opacity:0;pointer-events:none}
@media(min-width:821px) and (min-height:720px){.cue{display:flex}}
/* eyebrow rule draws in with the reveal */
.eyebrow.rv::before{content:"";display:inline-block;width:28px;height:2px;margin:0 10px 3px 0;vertical-align:middle;background:var(--gold);transform-origin:0 50%;scale:0 1;transition:scale .8s var(--out) .25s}
.eyebrow.rv.in::before{scale:1 1}
/* cards: JS injects .gl (specular glare) + .bd (hue ring) and drives --ax/--ay + transform while the pointer is over a card */
.card .gl,.card .bd{position:absolute;pointer-events:none}
.card .gl{left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 62%);opacity:0;transition:opacity .35s;z-index:1;will-change:transform}
.card .bd{inset:0;border-radius:inherit;border:2px solid var(--rc);box-shadow:inset 0 0 40px -8px var(--rc);opacity:0;transition:opacity .3s;z-index:2}
.card.hot .gl{opacity:1}
.card.hot .bd,.card:focus-within .bd{opacity:1}
.card.hot::before,.card.hot .gart.key::before{scale:1.14}
@media(hover:hover) and (pointer:fine){
 .card.hot{translate:0 -8px;scale:1.02}
 .js .fan.ready.in .gcard.hot{translate:0 -8px;scale:1.02}
 .js .card.rv.in.hot{translate:0 -8px;scale:1.02;transition:translate .45s var(--spring),scale .45s var(--spring)}
}
@media(hover:none),(pointer:coarse){.card.hot .gl{animation:sheen 1.4s var(--out) both}}
/* status timeline: counts come from the cards themselves */
.status{padding:36px 0 48px}
.tl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 0;padding:0;list-style:none}
.tl::before,.tl::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;border-radius:2px}
.tl::before{background:var(--line)}
.tl::after{background:linear-gradient(90deg,#28e0c8,#e8b04b 55%,#5a5a68);transform-origin:0 50%;scale:0 1;transition:scale 1.5s var(--out) .2s}
.tl.in::after{scale:1 1}
.tl li{position:relative;padding-top:36px}
.tl a{display:block;text-decoration:none;color:var(--mut)}
.tl .dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:3px solid var(--tc,#5a5a68);z-index:1}
.tl .s-live{--tc:#28e0c8}.tl .s-soon{--tc:#e8b04b}
.tl .s-live .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #28e0c8;animation:livering 2.4s ease-out infinite}
.tl b{display:inline-block;font-size:clamp(34px,5vw,52px);line-height:1;color:var(--ink);margin-right:10px;transform-origin:0 100%;transition:transform .4s var(--spring)}
.tl .lb{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--mut)}
.tl .s-live .lb{color:#28e0c8}.tl .s-soon .lb{color:#e8b04b}
.tl small{display:block;margin-top:6px;font-size:14px;color:var(--mut)}
.tl a:hover b{transform:scale(1.12)}
@media(max-width:640px){
 .tl{grid-template-columns:1fr;gap:0}
 .tl::before,.tl::after{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
 .tl::after{background:linear-gradient(180deg,#28e0c8,#e8b04b 55%,#5a5a68);transform-origin:50% 0;scale:1 0}
 .tl.in::after{scale:1 1}
 .tl li{padding:0 0 26px 42px}.tl li:last-child{padding-bottom:0}
 .tl .dot{top:6px}
}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:24px 48px;align-items:start}
@media(max-width:820px){.faq{grid-template-columns:1fr}}
details p a{color:var(--gold)}
.why{grid-template-columns:1fr}
@media(min-width:560px){.why{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.why{grid-template-columns:repeat(4,1fr)}}
/* details/FAQ: native height ease where ::details-content is supported (user-initiated, 0.4s) */
details{interpolate-size:allow-keywords}
@supports selector(::details-content){
 details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .4s var(--out),opacity .3s ease,content-visibility .4s allow-discrete}
 details[open]::details-content{block-size:auto;opacity:1}
}
/* phones: the title rows become a snap-scroll showcase with pager dots */
.dots{display:none}
@media(max-width:640px){
 .grid.fan{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-20px;padding:12px 20px;scroll-padding-inline:20px}
 .grid.fan::-webkit-scrollbar{display:none}
 .grid.fan>.gcard,.grid.fan>.ocard{flex:0 0 min(84%,340px);scroll-snap-align:start}
 /* snap-scroll rows have no fan-out: a translated card widens the scroll area and a focused card lands off-screen */
 .js .fan.ready .gcard{translate:none;scale:1;opacity:1}
 .js .fan.ready .chips span{opacity:1;transform:none}
 .dots{display:flex;justify-content:center;gap:8px}
 .dots i{width:8px;height:8px;border-radius:50%;background:#3a3a46;transition:transform .3s var(--spring),background-color .2s}
 .dots i.on{background:var(--gold);transform:scale(1.35)}
}
@media(prefers-reduced-motion:reduce){
 .eyebrow.rv::before,.tl::after{scale:1 1}
 .nav{translate:none!important}
}
.calm .eyebrow.rv::before,.calm .tl::after{scale:1 1}
.calm .nav{translate:none!important}
/* operators: 3 steps + keep/run panels (reuses .card/.ico/.cta) */
.ops3,.ops2{grid-template-columns:1fr}
@media(min-width:700px){.ops3{grid-template-columns:repeat(3,1fr)}.ops2{grid-template-columns:repeat(2,1fr)}}
.ico b{font-size:22px;line-height:1;color:var(--gold2)}
#operators .gh{margin-top:34px}
#operators .card ul{margin:10px 0 0;padding-left:1.2em;color:var(--mut)}
#operators .card li{margin:6px 0}
#operators .cta{margin-top:30px;justify-content:flex-start}