/* Every colour comes from tokens.css, which is measured from brand/. No literals here. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr,120px) + 12px);background:var(--c-bg)}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--f-sans);font-size:var(--l-step0);letter-spacing:-.003em;-webkit-font-smoothing:antialiased;font-weight:430;line-height:1.5;overflow-x:clip}
main{overflow-x:clip}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2{letter-spacing:-.032em;text-wrap:balance;font-weight:680;line-height:1.02}
h3{font-size:var(--l-step2);letter-spacing:-.018em;font-weight:640;line-height:1.18}
p{text-wrap:pretty}
code{font-family:var(--f-mono);font-size:.88em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-sun);outline-offset:3px;border-radius:8px}
.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}
.skip{position:fixed;z-index:50;top:10px;left:10px;padding:12px 18px;border-radius:999px;background:var(--c-white);color:var(--c-ink);font-weight:560;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}
.grad{background:var(--fx-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:40;pointer-events:none}
.progress span{display:block;height:100%;background:var(--fx-gradient);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 14px var(--c-glow)}

/* header: nav + token address slot */
.top{position:sticky;top:0;z-index:30;background:var(--c-nav-solid);color:var(--c-text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 -1px 0 var(--c-line)}
.nav{height:var(--l-nav-h);padding-inline:var(--l-gutter);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;font-size:16px;font-weight:760;letter-spacing:.14em;text-decoration:none;justify-self:start}
.brand svg{width:28px;height:28px;flex:none}
.nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--c-text2)}
.nav-links a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;border-radius:2px;background:var(--fx-gradient);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--m-hover) var(--m-ease)}
.nav-links a:hover{color:var(--c-text)}
.nav-links a:hover::after{transform:scaleX(1)}
.socials{display:flex;gap:4px;justify-self:end}
.social{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--c-text);transition:background-color .2s,transform .2s var(--m-ease)}
.social svg{width:20px;height:20px;fill:currentColor}
a.social:hover{background:var(--c-glass3)}
a.social:active{transform:scale(.94)}
.social.is-inert{color:var(--c-text3);cursor:default}

.ca-bar{border-top:1px solid var(--c-line);padding-inline:var(--l-gutter)}
.ca{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;min-height:56px;padding-block:8px;width:100%;max-width:1380px;margin-inline:auto;text-align:left}
.ca-label{font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--c-text2)}
.ca code{font-size:var(--l-ca-size);color:var(--c-text);overflow-wrap:anywhere;word-break:break-all;line-height:1.25;min-width:0;flex:1 1 280px}
button.ca{background:none;border:0;cursor:pointer;font:inherit}
button.ca:hover code{text-decoration:underline;text-decoration-color:var(--c-coral);text-underline-offset:.2em}
.ca-copy{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line);font-size:13px;font-weight:600;color:var(--c-text);transition:background-color .2s}
button.ca:hover .ca-copy{background:var(--c-glass3)}
.ca-copy.is-done{background:var(--fx-gradient);color:var(--c-ink)}
.ca.is-inert .ca-pending{font-size:var(--l-ca-size);color:var(--c-text3);font-weight:560;letter-spacing:-.01em}

/* shared */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:999px;background:var(--c-white);color:var(--c-ink);font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .2s,transform .2s var(--m-ease),box-shadow .2s}
.button:hover{background:var(--c-white);box-shadow:0 0 0 1px var(--c-line-strong),0 14px 44px -10px var(--c-glow)}
.button:active{transform:scale(.98)}
.button-ghost{background:var(--c-glass2);color:var(--c-text);box-shadow:inset 0 0 0 1px var(--c-line)}
.button-ghost:hover{background:var(--c-glass3);box-shadow:inset 0 0 0 1px var(--c-line-strong),0 14px 44px -14px var(--c-glow-alt)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text2);margin-bottom:22px}
.section{padding:clamp(80px,12vh,128px) var(--l-gutter)}
.section-tint{background:var(--c-bg-raised)}
.wrap{max-width:var(--l-wrap);margin-inline:auto}
.narrow{max-width:820px}
.title{font-size:var(--l-step3);text-align:center}
.subtitle{max-width:44ex;color:var(--c-text2);font-size:var(--l-step1);text-align:center;margin:20px auto 0}
.section .eyebrow.center{text-align:center}

.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--m-hover) var(--m-ease);background:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),var(--c-spot),transparent 70%)}
.spot:hover::before{opacity:1}

/* pill */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 14px;border-radius:999px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line);font-size:13px;font-weight:600;color:var(--c-text)}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c-text3);flex:none}
[data-state="live"] .dot{background:var(--c-sun)}
[data-state="live"] .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--c-coral);animation:ping 1.8s var(--m-ease) infinite}
[data-state="retry"] .dot{background:var(--c-orange);animation:blink 1s steps(2,jump-none) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}
@keyframes blink{50%{opacity:.25}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:max(560px,calc(100svh - 120px));display:grid;place-items:center;padding:clamp(56px,10vh,112px) var(--l-gutter) clamp(72px,10vh,120px);background:var(--c-bg);text-align:center}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--fx-grain);opacity:.45}
.mesh{position:absolute;inset:0;z-index:-3;overflow:hidden}
.mesh i{position:absolute;border-radius:50%;filter:blur(70px);animation:drift var(--m-drift) ease-in-out infinite alternate}
.mesh i:nth-child(1){width:60%;aspect-ratio:1;left:-14%;top:-34%;background:radial-gradient(closest-side,var(--c-mesh-a),transparent)}
.mesh i:nth-child(2){width:54%;aspect-ratio:1;right:-16%;top:6%;background:radial-gradient(closest-side,var(--c-mesh-b),transparent);animation-duration:19s;animation-delay:-5s}
.mesh i:nth-child(3){width:70%;aspect-ratio:1;left:18%;bottom:-56%;background:radial-gradient(closest-side,var(--c-mesh-d),transparent);animation-duration:23s;animation-delay:-9s}
.mesh i:nth-child(4){width:34%;aspect-ratio:1;left:30%;top:-20%;background:radial-gradient(closest-side,var(--c-mesh-c),transparent);animation-duration:27s;animation-delay:-13s}
@keyframes drift{to{transform:translate(8%,-6%) scale(1.14)}}
.pixels{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none;-webkit-mask-image:radial-gradient(70% 90% at 50% 55%,var(--c-bg),transparent);mask-image:radial-gradient(70% 90% at 50% 55%,var(--c-bg),transparent)}
.depth{position:absolute;inset:0;z-index:-1;pointer-events:none}
.d{position:absolute;display:block}
.d1{width:min(46vw,520px);aspect-ratio:1;left:-8%;top:8%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-line)}
.d2{width:min(22vw,240px);aspect-ratio:1;right:9%;top:14%;border-radius:28%;rotate:18deg;background:var(--c-glass);box-shadow:inset 0 0 0 1px var(--c-line)}
.d3{width:min(14vw,150px);aspect-ratio:1;left:14%;bottom:12%;border-radius:50%;background:var(--c-glass2)}
.d4{width:min(60vw,720px);height:1px;right:-6%;bottom:30%;rotate:-14deg;background:linear-gradient(90deg,transparent,var(--c-coral),var(--c-violet),transparent);box-shadow:0 0 22px var(--c-glow)}
.d5{width:min(18vw,200px);aspect-ratio:1;right:16%;bottom:10%;border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-line)}
.hero-copy{display:grid;justify-items:center;gap:22px;max-width:1100px}
.hero h1{font-size:clamp(34px,min(8.4vw,11svh),104px);max-width:11em;text-shadow:0 2px 28px var(--c-shadow-deep)}
.lead{max-width:44ex;color:var(--c-text2);font-size:var(--l-step1);line-height:1.5}
.hero .actions{justify-content:center;margin-top:4px}
.js .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.32em);transition:opacity .7s var(--m-ease),transform .8s var(--m-ease),filter .8s var(--m-ease);transition-delay:calc(var(--i,0) * 70ms + 120ms)}
.js .is-loaded .w{opacity:1;filter:none;transform:none}
.scroll-cue{position:absolute;left:50%;bottom:20px;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;border-radius:50%}
.scroll-cue span{width:1px;height:26px;background:linear-gradient(var(--c-text),transparent);animation:cue 2.2s var(--m-ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* ticker */
.ticker{background:var(--c-bg);color:var(--c-text);border-block:1px solid var(--c-line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--c-bg) 6%,var(--c-bg) 94%,transparent);mask-image:linear-gradient(90deg,transparent,var(--c-bg) 6%,var(--c-bg) 94%,transparent)}
.ticker-track{display:flex;width:max-content;animation:marquee 70s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tk b{font-weight:680;letter-spacing:.02em}
.tk .px{color:var(--c-text2)}
.tk .chg{font-weight:620}
.tk .chg.up{color:var(--c-sun)}
.tk .chg.down{color:var(--c-violet)}
.tk.is-skel .bone{width:120px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* scene */
.scene{position:relative;height:420svh;background:var(--c-bg)}
.scene-stage{position:sticky;top:var(--hdr,120px);max-width:1280px;height:calc(100svh - var(--hdr,120px));margin-inline:auto;padding:24px var(--l-gutter) 32px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,72px);overflow:clip}
.captions{position:relative;min-height:21em}
.caption{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(18px);transition:opacity .6s var(--m-ease),transform .6s var(--m-ease)}
.caption h3{font-size:var(--l-step3);letter-spacing:-.032em;line-height:1.04;font-weight:680;text-wrap:balance}
.caption p{max-width:36ex;color:var(--c-text2);font-size:var(--l-step1);margin-top:18px}
.scene[data-beat="0"] .c-0,.scene[data-beat="1"] .c-1,.scene[data-beat="2"] .c-2,.scene[data-beat="3"] .c-3{opacity:1;transform:none}
.scene-progress{height:2px;margin-top:28px;border-radius:2px;background:var(--fx-gradient);transform:scaleX(var(--p,0));transform-origin:0}
.scene-visual{position:relative;height:min(66svh,520px)}
.scene-visual::before{content:"";position:absolute;inset:6% 2%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--c-glow-soft),transparent);animation:drift var(--m-drift) ease-in-out infinite alternate}
.layer{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity .7s var(--m-ease),transform .7s var(--m-ease)}
.scene[data-beat="0"] .v-0,.scene[data-beat="1"] .v-1,.scene[data-beat="2"] .v-2,.scene[data-beat="3"] .v-3{opacity:1;transform:none}
.layer-label{color:var(--c-text2);font-size:var(--l-step-sm);text-align:center}
.rec{width:min(100%,460px);display:grid;gap:10px;padding:22px;border-radius:20px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line)}
.rec-row{display:grid;grid-template-columns:5em minmax(0,1fr);align-items:center;gap:14px;font-size:14px;color:var(--c-text2)}
.rec-row b{font-weight:560}
.bar{display:block;height:10px;border-radius:999px;background:var(--c-glass3)}
.w40{width:40%}.w60{width:60%}.w90{width:90%}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;font-family:var(--f-mono);font-size:clamp(14px,1.6vw,19px);background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line)}
.chip.is-solid{background:var(--fx-gradient);color:var(--c-ink);box-shadow:0 0 40px -6px var(--c-glow)}
.chip.is-dashed{background:none;box-shadow:none;border:1px dashed var(--c-line-strong)}
.slot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;width:min(100%,460px);padding:16px 20px;border-radius:18px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line);font-weight:600}
.slot em{font-style:normal;font-size:14px;color:var(--c-text2)}
.slot.is-inert{background:none;box-shadow:none;border:1px dashed var(--c-line)}
.slot.is-inert em{color:var(--c-text3)}
.slot.is-live{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;box-shadow:inset 0 0 0 1px var(--c-coral),0 0 34px -10px var(--c-glow)}
.slot.is-live em{padding:4px 12px;border-radius:999px;background:var(--fx-gradient);color:var(--c-ink);font-weight:600}

/* market */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 24px;margin-bottom:28px}
.head h2{font-size:clamp(30px,3.4vw,44px);display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.head .sub{max-width:52ex;color:var(--c-text2);margin-top:10px;font-size:15px}
.count{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line);font-size:15px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line)}
.seg button{min-height:44px;min-width:44px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--c-text2);font-weight:600;font-size:14px;cursor:pointer;transition:background-color .25s var(--m-ease),color .25s}
.seg button:hover{color:var(--c-text)}
.seg button[aria-pressed="true"]{background:var(--c-white);color:var(--c-ink)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.tile{display:grid;gap:8px;padding:18px 20px;border-radius:var(--l-radius-card);background:var(--c-glass);box-shadow:inset 0 0 0 1px var(--c-line);min-width:0}
.tile strong{font-size:clamp(22px,2.4vw,30px);font-weight:680;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text2)}
.statusline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:20px;min-height:34px}
.err{color:var(--c-text2);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.grid>li{display:flex;min-width:0}
.card{position:relative;isolation:isolate;width:100%;display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:var(--l-radius-card);background:radial-gradient(110% 60% at 0 0,var(--c-glow-soft),transparent 60%),linear-gradient(var(--c-glass2),var(--c-glass));transition:transform var(--m-hover) var(--m-ease),box-shadow var(--m-hover) var(--m-ease)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:var(--fx-hairline);opacity:.7;pointer-events:none;-webkit-mask:linear-gradient(var(--c-bg) 0 0) content-box,linear-gradient(var(--c-bg) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--c-bg) 0 0) content-box exclude,linear-gradient(var(--c-bg) 0 0);mask-composite:exclude;transition:opacity var(--m-hover) var(--m-ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--fx-shadow-lift)}
.card:hover::after{opacity:1}
.card.enter{animation:rise .7s var(--m-ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.card-head{display:flex;align-items:center;gap:14px;min-width:0}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--fx-gradient-diag);color:var(--c-ink);font-size:24px;font-weight:760;box-shadow:0 0 0 1px var(--c-line),0 14px 30px -14px var(--c-glow)}
.avatar img{width:100%;height:100%;object-fit:cover}
.card-id{display:grid;gap:2px;min-width:0}
.card-id h3{font-size:19px;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-id p{font-size:13px;color:var(--c-text2)}
.rank{margin-left:auto;font-family:var(--f-mono);font-size:13px;color:var(--c-text3)}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.price{display:grid;gap:4px;min-width:0}
.price strong{font-size:26px;font-weight:680;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.chgpill{padding:3px 10px;border-radius:999px;background:var(--c-glass2);font-size:14px;font-weight:640;font-variant-numeric:tabular-nums;white-space:nowrap}
.chgpill.up{background:var(--fx-gradient);color:var(--c-ink)}
.chgpill.down{background:var(--c-down-fill);box-shadow:inset 0 0 0 1px var(--c-down-line);color:var(--c-lilac)}
.metrics{display:grid;margin:0}
.metrics>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--c-line);font-size:14px}
.metrics dt{color:var(--c-text2)}
.metrics dd{font-variant-numeric:tabular-nums;font-weight:600}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--c-line);padding-top:12px}
.card-foot code{color:var(--c-text2);font-size:12px}
.copy{min-width:44px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line);color:var(--c-text2);font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.copy:hover{background:var(--c-glass3);color:var(--c-text)}
.copy.is-done{background:var(--fx-gradient);color:var(--c-ink)}
.flash{animation:flash .7s var(--m-ease)}
@keyframes flash{from{background-color:var(--c-flash)}}
.skel{min-height:330px;pointer-events:none}
.bone,.skel .avatar{background:linear-gradient(90deg,var(--c-glass2),var(--c-glass3),var(--c-glass2)) 0 0/200% 100%;animation:shimmer var(--m-shimmer) linear infinite;color:transparent;box-shadow:none}
.bone{display:block;height:12px;border-radius:6px;width:100%}
.bone.s{width:80px}.bone.m{width:130px}.bone.h{height:30px;width:70%}
@keyframes shimmer{to{background-position:-200% 0}}

/* register facts */
.facts{display:grid;margin-top:48px}
.fact{display:grid;grid-template-columns:200px minmax(0,1fr);gap:6px 24px;padding:18px 12px;border-top:1px solid var(--c-line);align-items:center}
.fact:last-child{border-bottom:1px solid var(--c-line)}
.fact dt{color:var(--c-text3)}
.fact dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0;font-weight:560}
.fact dd code{overflow-wrap:anywhere;word-break:break-all}
.fact .meta{font-size:13px;color:var(--c-text3);font-weight:430}
.pending{color:var(--c-text3);font-weight:560}
.fact .inline-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-underline-offset:.25em;text-decoration-color:var(--c-coral)}

/* open panel */
.open{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;gap:8px;padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);border-radius:40px;background:radial-gradient(110% 70% at 50% -10%,var(--c-mesh-b),transparent 62%),radial-gradient(80% 60% at 100% 110%,var(--c-mesh-a),transparent 60%),var(--c-bg);text-align:center;box-shadow:var(--fx-shadow-panel)}
.open::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:var(--fx-gradient);box-shadow:0 0 28px 3px var(--c-glow)}
.open::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--fx-grain);opacity:.4}
.open .subtitle{color:var(--c-text2)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(100%,1000px);margin:36px 0 8px;text-align:left}
.steps li{counter-increment:s;display:grid;align-content:start;gap:8px;padding:20px 22px;border-radius:20px;background:var(--c-glass2);box-shadow:inset 0 0 0 1px var(--c-line)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;margin-bottom:4px;border-radius:50%;background:var(--fx-gradient-diag);color:var(--c-ink);font-size:14px;font-weight:700}
.steps strong{font-size:var(--l-step1);font-weight:640}
.steps span{color:var(--c-text2)}

/* faq */
.faq{max-width:820px}
.faq .title{margin-bottom:40px}
.faq details{border-top:1px solid var(--c-line)}
.faq details:last-child{border-bottom:1px solid var(--c-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:22px 0;font-size:var(--l-step1);font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:26px;font-weight:400;line-height:1;color:var(--c-text3)}
.faq details[open] summary::after{content:"−";color:var(--c-coral)}
.faq details p{max-width:62ex;padding-bottom:24px;color:var(--c-text2)}

/* final + footer */
.section-final{position:relative;isolation:isolate;overflow:hidden;background:var(--c-bg)}
.section-final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 50% 45%,var(--c-mesh-b),var(--c-bg) 88%),var(--fx-grain)}
.final{display:grid;justify-items:center;gap:28px;padding-block:clamp(32px,6vh,64px);text-align:center}
.final h2{font-size:var(--l-step4)}
.final .actions{justify-content:center}
.final-mark svg{width:84px;height:84px;filter:drop-shadow(0 0 28px var(--c-glow))}
.footer{padding:36px var(--l-gutter) 48px;background:var(--c-bg);color:var(--c-text2);border-top:1px solid var(--c-line);font-size:var(--l-step-sm)}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px}
.footer .brand{color:var(--c-text)}
.footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
.footer nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:6px;text-decoration:none}
.footer nav a:hover{color:var(--c-text)}

/* reveal: JS springs drive these */
.js [data-reveal],.js .rv{opacity:0;transform:translateY(var(--m-reveal-shift))}
.js [data-reveal].is-in,.js .rv.is-in{opacity:1;transform:none}

@media (width<=860px){
  .nav{grid-template-columns:minmax(0,1fr) auto}
  .nav-links{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr)}
  .scene-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:center;gap:12px}
  .captions{min-height:13.5em}
  .caption h3{font-size:clamp(26px,7vw,36px)}
  .caption p{margin-top:10px;font-size:16px}
  .eyebrow{margin-bottom:12px}
  .scene-visual{height:min(44svh,420px)}
  .fact{grid-template-columns:minmax(0,1fr)}
}
@media (width<=520px){
  .brand span{letter-spacing:.1em}
  .ca-copy{margin-left:auto}
  .head .seg{width:100%}
  .head .seg button{flex:1;padding:0 8px}
  .card{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-reveal],.js .rv{opacity:1;transform:none}
  .js .w{opacity:1;filter:none;transform:none}
  .ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .scene{height:auto}
  .scene-stage{position:static;height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding-block:96px}
  .captions{display:grid;gap:40px;min-height:0}
  .caption,.layer{position:static;opacity:1;transform:none}
  .scene-visual{height:auto;display:grid;gap:48px}
  .scene-progress{display:none}
}
