/* Landing — premium language B (design/directions/k-premium/SPEC.md; owner's pick 13.11). Loaded by index.html only, so every override of
   base.css here touches the landing alone (/app, /pair, /token, /faq keep base + their own sheets).
   NO BLUR anywhere: no backdrop-filter, no filter:blur(); light = gradients, glows = radial gradients, grain = SVG turbulence tiles.
   Everything that moves moves by transform/opacity; every live value sits in a fixed box (CLS 0). */

body[data-page=home]{
  /* colour roles — Slash 350e0391 */
  --bg:#040406; --canvas:#040406; --label:#e2e3e9; --list:#c7c9d1; --body:#acafb9; --muted2:#9194a1; --subtle:#777a88; --faint:#5e616e;
  --ctl-edge:#464853; --rule:#1c1d22; --panel:#121317; --panel-deep:#0b0c0e; --horizon:#2e2a26;
  --gold-a:#ae9357; --gold-light:#fff0cc; --amber:#cd8939; --mint:#97fce3;
  --metal:linear-gradient(103deg,#ae9357,#fff0cc 40%,#ae9357 70%,rgba(189,157,79,.85));
  /* the headline face lives in ONE variable for every display line (H1, H2, final, footer word): --font-display (base.css) = General Sans
     (owner 13.11); the weights and tracking that go with it are here */
  --display-w:300; --display-strong:500; --display-track:-.035em;
  --nav-h:clamp(64px,3.4vw,84px);
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --e-soft:cubic-bezier(.25,.46,.45,.94);
  background:var(--canvas);color:var(--body)
}
html:has(body[data-page=home]){background:#040406}
body[data-page=home] .frame{overflow:clip}
.nw{white-space:nowrap}

/* ---------- inline exchange marks: no tiles, metal-filled glyphs at cap height ---------- */
.im{display:inline-block;vertical-align:baseline;flex:none;overflow:visible}
.im--hl{width:1.02em;height:.73em;margin:0 .2em 0 .06em;transform:translateY(.02em)}
.im--lt{width:.42em;height:.78em;margin:0 .22em 0 .1em;transform:translateY(.04em)}

/* ---------- header: fixed, solid dark backing (no glass blur), hover pills from base ---------- */
body[data-page=home] .nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);background:linear-gradient(rgba(4,4,6,.97),rgba(4,4,6,.9));border-bottom:1px solid rgba(46,48,56,.55)}
body[data-page=home] .main-flow{padding-top:var(--nav-h)}
body[data-page=home] section[id]{scroll-margin-top:var(--nav-h)}

/* ---------- shared: buttons, links, display cases, headings ---------- */
.btn{height:48px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#000;border-radius:6px;font:600 15px/1 var(--sans);letter-spacing:-.02em;white-space:nowrap;transition:background .2s var(--e-soft),transform .4s var(--e-out)}
.btn:hover{background:#d6d8de}.btn:active{transform:scale(.98)}
.lnk{font:500 15px/1.2 var(--sans);color:var(--label);display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.lnk .ar{transition:transform .4s var(--e-out)}.lnk:hover{color:#fff}.lnk:hover .ar{transform:translateX(3px)}
.lnk--u{text-decoration:underline;text-decoration-color:#2e3038;text-underline-offset:4px;font-weight:400;font-size:14px}

/* display case (Slash «Display case» + «Masked rim»): gradient body, a 1 px white rim in overlay blend fading top → bottom, a champagne light on top */
body[data-page=home] .case{position:relative;border-radius:10px;background:linear-gradient(201deg,#121317 13.96%,#0b0c0e);overflow:hidden;isolation:isolate}
body[data-page=home] .case::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.6);mix-blend-mode:overlay;
  -webkit-mask-image:linear-gradient(#fff,rgba(0,0,0,0) 72%);mask-image:linear-gradient(#fff,rgba(0,0,0,0) 72%);pointer-events:none;z-index:3}
.case__light{position:absolute;left:50%;top:-34%;width:120%;height:70%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(255,240,204,.075),rgba(255,240,204,0) 70%);pointer-events:none;z-index:0}
.goldt{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}

/* section frame: no rules between sections — depth instead (each section's light moves at its own rate) */
body[data-page=home] .sec{position:relative;border-top:0;overflow-x:clip;padding:clamp(88px,8vw,150px) var(--px) 0}
body[data-page=home] #live{padding-top:clamp(72px,6vw,112px)}
.sec__light{position:absolute;left:-10%;top:-12%;width:70%;height:90%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 40% 40%,rgba(255,236,204,.045),rgba(255,236,204,0) 70%)}
.sec__light--r{left:auto;right:-14%}
.sec__head{position:relative;z-index:2;max-width:880px}
body[data-page=home] .h2{margin:0;max-width:18ch;font:var(--display-w) clamp(38px,4.6vw,72px)/1.04 var(--font-display);letter-spacing:var(--display-track);color:#fff;text-wrap:balance}
body[data-page=home] .h2 span{color:inherit}
body[data-page=home] .lead{margin-top:clamp(18px,1.6vw,28px);max-width:640px;font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:var(--body);letter-spacing:-.015em}
body[data-page=home] .lead .im--hl{width:1.15em;height:.82em}body[data-page=home] .lead .im--lt{width:.46em;height:.86em}

/* ================================================ 1 · hero ================================================ */
.hero{position:relative;height:calc(100svh - var(--nav-h));min-height:700px;max-height:1040px;overflow:hidden;isolation:isolate}
/* background and stage share one box (≤ 1760 px, centred); its edges fade into the canvas, so wide screens show no seam */
.hero__bg{position:absolute;top:-6%;bottom:0;left:max(0px,calc((100% - 1760px) / 2));right:max(0px,calc((100% - 1760px) / 2));z-index:0;will-change:transform;background:radial-gradient(120% 90% at 78% 70%,#0d0c0b 0%,var(--canvas) 62%)}
/* diagonal light beams: gradients with soft stops = light, not blur (Slash cinematic stage, x.ai a7d91c65 warm cone) */
.beam{position:absolute;top:-35%;height:170%;transform-origin:50% 0;pointer-events:none}
.beam--a{left:58%;width:34%;transform:rotate(24deg);background:linear-gradient(90deg,rgba(255,236,204,0) 0%,rgba(255,236,204,.05) 22%,rgba(255,236,204,.12) 48%,rgba(255,236,204,.05) 74%,rgba(255,236,204,0) 100%)}
.beam--b{left:72%;width:14%;transform:rotate(24deg);background:linear-gradient(90deg,rgba(255,240,214,0),rgba(255,240,214,.1) 50%,rgba(255,240,214,0))}
.beam--c{left:44%;width:9%;transform:rotate(24deg);background:linear-gradient(90deg,rgba(255,240,214,0),rgba(255,240,214,.025) 50%,rgba(255,240,214,0))}
/* the stage is capped at 1760 px and centred, so the object keeps its place next to the 1280 container on any screen */
.hero__stage{position:absolute;top:0;bottom:0;left:max(0px,calc((100% - 1760px) / 2));right:max(0px,calc((100% - 1760px) / 2));z-index:1;will-change:transform}
.hero__canvas,.hero__still{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__still{object-fit:cover;object-position:100% 100%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:2;display:none;pointer-events:none;background:linear-gradient(180deg,rgba(4,4,6,0),rgba(4,4,6,.78) 55%,var(--canvas))}
.hero__vignette{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(4,4,6,0) 62%,rgba(4,4,6,.85) 88%,var(--canvas) 100%),
  linear-gradient(90deg,var(--canvas) 0%,rgba(4,4,6,.82) 22%,rgba(4,4,6,0) 46%),
  linear-gradient(270deg,var(--canvas) 0%,rgba(4,4,6,0) 7%),
  radial-gradient(120% 100% at 70% 55%,rgba(4,4,6,0) 55%,rgba(4,4,6,.9) 100%)}
.hero__vignette::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero__copy{position:relative;z-index:3;padding:clamp(72px,11vh,132px) var(--px) 0;will-change:transform;max-width:calc(1280px + 2 * var(--px));pointer-events:none}
.hero__copy a{pointer-events:auto}
.badge{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 15px 0 13px;border-radius:999px;font-size:14px;color:var(--label);white-space:nowrap;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06)}
.badge b{font-weight:500;color:#fff}
.badge .dot{width:7px;height:7px}
.badge--down{white-space:normal;height:auto;min-height:34px;padding-top:7px;padding-bottom:7px;line-height:1.35;max-width:100%}
.badge--down .dot{background:#7e818c!important;box-shadow:none!important;animation:none!important}
.h1{margin-top:28px;font:var(--display-w) clamp(44px,6.1vw,92px)/1.02 var(--font-display);letter-spacing:var(--display-track);color:#fff;text-wrap:nowrap}
/* a11y S18: the line box sizes itself (= 1.12em at the page's own spacing) and may wrap, so user text spacing never clips or overruns it */
.h1 .ln{display:block;white-space:normal;line-height:1.12em;overflow:clip;overflow-clip-margin:.25em}.h1 .ln .nw{white-space:nowrap}
.h1 .ln>.li{display:block;transform:translate3d(0,110%,0);transition:transform 1.15s var(--e-out);transition-delay:calc(120ms + var(--l,0) * 90ms)}
.hero.in .h1 .ln>.li{transform:none}
.lw{display:inline-flex;align-items:flex-start;gap:.05em;font-weight:var(--display-strong);letter-spacing:-.03em}
/* side word (labels SPEC): tone + weight + raised glyph; colour is never the only cue */
.lw--long{color:var(--long)}.lw--short{color:var(--short)}
.lw .lw__g{width:.34em;height:.34em;margin-top:.2em;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.h1 .rs{display:inline-block;transition:transform .7s var(--e-out)}
.h1 .im--hl{width:1.02em;height:.73em}
/* kinetic slot (Long/Short roll): sized by its own invisible options (widest wins) → fixed width, shared baseline, CLS 0 */
.kw{display:inline-grid;position:relative;overflow:clip;overflow-clip-margin:.08em;vertical-align:baseline}
.kw>*,.kw__s>.lw{grid-area:1/1}
.kw__s{display:grid;visibility:hidden}
.kw__i{white-space:nowrap;transition:transform .7s var(--e-out),opacity .7s var(--e-out)}
.hero .lead{margin-top:40px;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--body);letter-spacing:-.02em;max-width:30ch}
.hero .acts{margin-top:36px;display:flex;align-items:center;gap:28px}
/* A2: the token line under the CTAs — champagne text + the gold mark, 44 px tap height, no box (marketing P0-1: «like the badge») */
.tkl{margin-top:14px}
.tkl a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1.2 var(--sans);color:#e8dcc0;transition:color .2s}
.tkl a:hover{color:#fff0cc}.tkl .ar{transition:transform .4s var(--e-out)}.tkl a:hover .ar{transform:translateX(3px)}
.tkl__i{width:18px;height:18px;flex:none}

/* live overlay on the object: crisp DOM text projected from the 3D anchors */
.ov{position:absolute;inset:0;pointer-events:none;z-index:2}
.ov__gap,.ov__tag{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity .9s var(--e-soft)}
.ov.is-on .ov__gap,.ov.is-on .ov__tag{opacity:1}
.ov.is-empty .ov__gap,.ov.is-empty .ov__tag{opacity:0!important}
.ov__gap{width:440px;margin-left:-220px;text-align:center;margin-top:-106px}
.ov__usd{position:relative;font:500 64px/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums;height:64px}
.ov__usd .u{font-size:.42em;letter-spacing:-.01em}
.ov__usd .n,.ov__usd .u{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.ov__glow{position:absolute;left:50%;top:22px;width:300px;height:110px;margin-left:-150px;background:radial-gradient(50% 50% at 50% 60%,rgba(205,137,57,.32),rgba(205,137,57,.1) 45%,rgba(205,137,57,0) 72%);mix-blend-mode:plus-lighter}
.ov__meta{margin-top:12px;height:26px;display:flex;align-items:stretch;justify-content:center;font-size:15px;color:var(--list);white-space:nowrap}
.ov__meta .sw{display:flex;width:100%;justify-content:center;align-items:center;gap:8px}
.ov__usd .sw{display:block;width:100%}
.ov__meta b{color:#fff;font-weight:500}.ov__meta .coin{--cs:24px}
.dot3{color:var(--faint)}
.ov__tag{width:220px;margin-left:-110px;margin-top:12px;display:flex;justify-content:center;font-size:14px;color:var(--list);white-space:nowrap}
.ov__tag .sw{display:flex;width:100%;justify-content:center;align-items:center;gap:10px}
.ov__tag .sc{flex:none}
.ov__tag .rt{display:inline-flex;align-items:center;gap:2px}
.ov__tag .r{font-variant-numeric:tabular-nums;color:var(--label)}
.ov .im--hl{width:17px;height:12px}.ov .im--lt{width:7px;height:13px}
.sw{transition:transform .6s var(--e-out),opacity .6s var(--e-out)}
.sw.out{transform:translate3d(0,-40%,0);opacity:0}

/* monochrome marquee at the bottom of the first screen (Slash proof rail): slow, linear, edge-masked */
.strip{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-bottom:26px;will-change:transform}
.strip__cap{padding:0 var(--px);font-size:14px;color:var(--subtle);margin-bottom:14px}
.strip__mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.strip__track{display:flex;width:max-content;animation:marq 80s linear infinite}
.strip__track:hover{animation-play-state:paused}
.mq__set{display:flex;gap:56px;padding-right:56px}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
.mq{display:flex;align-items:center;gap:12px;white-space:nowrap;color:var(--muted2);font-size:15px;height:28px}
.mq .coin{--cs:24px;filter:grayscale(1) brightness(1.15) contrast(.9);opacity:.85}
.mq b{color:var(--label);font-weight:500}
.mq__l{display:inline-flex;align-items:center;gap:16px}
.mq .v{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}.mq .v i{font-style:normal}
.sm{fill:#acafb9;flex:none}.sm--hl{width:16px;height:12px}.sm--lt{width:7px;height:13px}
.mq--brand{color:var(--label);font-size:17px;font-weight:500;gap:9px}
.mq--brand img{height:20px;width:auto;opacity:.9}
.sm--big{width:10px;height:19px;fill:#e2e3e9}

/* ================================================ 2 · metric band ================================================ */
.band{position:relative;z-index:5;margin-top:-90px;padding:120px var(--px) 0;background:linear-gradient(180deg,rgba(4,4,6,0),var(--canvas) 90px)}
.band__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:48px;border-top:1px solid var(--rule)}
.stat{position:relative;min-width:0}
.stat__v{position:relative;display:flex;align-items:baseline;height:1.12em;font:500 clamp(40px,4.4vw,68px)/1 var(--sans);letter-spacing:-.035em;color:#fff;white-space:nowrap}
.stat__v .roll{line-height:1}
.stat__v .u{font-size:max(14px,.36em);font-weight:500;letter-spacing:-.01em;margin-left:5px;color:var(--muted2)}
.stat__v .u.goldt{color:transparent}
.stat__v .u--pre{margin:0 10px 0 0}
.stat__glow{position:absolute;left:-24px;top:18px;width:min(240px,110%);height:96px;background:radial-gradient(45% 45% at 35% 60%,rgba(205,137,57,.13),rgba(205,137,57,0) 70%);mix-blend-mode:plus-lighter;pointer-events:none}
.stat__l{margin-top:12px;font-size:15px;line-height:1.35;color:var(--muted2)}
.stat__l .im--hl{width:17px;height:12px;margin:0 3px}.stat__l .im--lt{width:7px;height:13px;margin:0 4px}
.stat{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--e-soft),transform 1s var(--e-out);transition-delay:calc(var(--i,0) * 90ms)}
.band.in .stat{opacity:1;transform:none}
.fresh{margin-top:40px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--subtle);min-height:22px}
.fresh .dot{width:6px;height:6px}
.fresh .dot--off{background:#ef8a7f}

/* ================================================ 3 · the latest alert ================================================ */
.live__grid{position:relative;z-index:2;margin-top:clamp(36px,3.4vw,64px);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:24px;align-items:stretch}
.stage{min-height:clamp(420px,30vw,600px)}
.stage__beam{position:absolute;top:-30%;left:30%;width:30%;height:170%;transform-origin:50% 0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,rgba(255,236,204,0),rgba(255,236,204,.05) 50%,rgba(255,236,204,0));rotate:24deg}
.stage__glow{position:absolute;left:10%;right:10%;top:16%;height:80%;background:radial-gradient(closest-side,rgba(205,137,57,.12),rgba(205,137,57,0));pointer-events:none;z-index:0}
.scaler{position:absolute;left:50%;top:clamp(28px,2.2vw,48px);width:920px;margin-left:-460px;transform:scale(var(--zs,.86));transform-origin:50% 0;perspective:1700px;perspective-origin:50% 0;z-index:1}
.rig{position:relative;transform-style:preserve-3d;transform:rotateX(24deg);transform-origin:50% 0;will-change:transform}
.shot{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;background:linear-gradient(201deg,#15161b 13.96%,#0b0c0e);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 80px 140px rgba(0,0,0,.85);font-size:16px}
.ghost{position:absolute;inset:0;border-radius:14px;border:1px solid rgba(255,240,204,.16);transform:translateZ(-70px) translateY(-26px) scale(.985);pointer-events:none}
.sb{padding:12px 10px;display:flex;flex-direction:column;gap:4px;border-right:1px solid rgba(255,255,255,.06)}
.sb .br{display:flex;align-items:center;gap:10px;font:500 19px/1 var(--sans);color:#fff;margin:4px 6px 18px}.sb .br .mark{width:22px;height:22px}
.sb .si{height:40px;border-radius:8px;padding:0 10px;display:flex;align-items:center;gap:10px;font-size:16px;color:var(--muted);white-space:nowrap}
.sb .si.on{background:rgba(255,255,255,.07);color:#fff}
.sb .si .ic{width:17px;height:17px;flex:none}.sb .si.on .ic{color:var(--champ)}
.pane{border-radius:10px;background:rgba(255,255,255,.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;min-width:0}
.stage .ph{height:56px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.stage .ph .t{font-size:17px;gap:10px}
.stage .ph .r{font-size:15px;color:var(--muted)}.stage .ph .r b{color:#fff;font-weight:500;display:inline-block;min-width:6.5em;text-align:left}
.list{height:380px;overflow:hidden;position:relative}
.list__in{will-change:transform}
.row{height:76px;display:grid;grid-template-columns:minmax(0,1fr) 206px 104px 100px;column-gap:14px;align-items:center;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.05);font-size:17px}
.row>span:nth-child(n+2){text-align:right;justify-content:flex-end}
.row .u{color:var(--text)}.row .n{font-weight:500;color:#fff}
.row.is-new{animation:sheen 2.6s var(--e-soft)}
@keyframes sheen{0%{background:linear-gradient(90deg,rgba(255,240,204,.10),rgba(255,240,204,0))}100%{background:transparent}}
.list__in.is-shift{animation:slide .6s var(--e-out)}@keyframes slide{from{transform:translateY(-76px)}}
.row.ended{opacity:.5}
.mk{display:flex;align-items:center;gap:12px;min-width:0}.mk b{font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .empty{height:380px}
.stage .fade{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(rgba(11,12,14,0),#0b0c0e 85%);z-index:2;pointer-events:none}

.acard{padding:clamp(24px,2vw,36px);display:flex;flex-direction:column;gap:14px}
.acard>*{position:relative;z-index:1}
.acard>.case__light{position:absolute;z-index:0}
.acard__note{font-size:14px;color:var(--muted)}
.acard__h{display:flex;align-items:center;gap:14px;font-size:20px}
.acard__h .coin{--cs:42px}
.acard__h>div{display:flex;flex-direction:column;gap:7px;min-width:0}
.acard__h b{font-weight:500;color:#fff;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:10px;font-size:22px}
.acard__legs{display:flex;align-items:center;gap:18px;white-space:nowrap;font-size:14px;color:var(--list);flex-wrap:wrap;row-gap:8px}
.acard__legs .im--hl{width:17px;height:12px;margin:0 5px 0 5px}.acard__legs .im--lt{width:7px;height:13px;margin:0 5px 0 6px}
.acard__main{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 0 8px}
.acard__main .big{font:500 clamp(44px,3.6vw,60px)/1.05 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums;align-self:flex-start}
.acard__main>span:last-child{font-size:14px;color:var(--muted)}
.amber{position:absolute;left:-30px;top:10px;width:280px;height:110px;background:radial-gradient(45% 45% at 30% 60%,rgba(205,137,57,.16),rgba(205,137,57,0) 72%);mix-blend-mode:plus-lighter;pointer-events:none}
.acard__kv{margin-top:0;border-top:1px solid rgba(255,255,255,.06)}
.acard__kv>div{min-height:50px;border-bottom-color:rgba(255,255,255,.06);font-size:15px;color:var(--list)}
.acard__kv b{white-space:nowrap;font-variant-numeric:tabular-nums}
.vh2{display:inline-flex;align-items:center;gap:2px}.vh2 .im--hl{width:17px;height:12px;margin:0 8px 0 0}.vh2 .im--lt{width:7px;height:13px;margin:0 13px 0 5px}
.acard__t{font-size:14px;color:var(--subtle)}
.acard__links{display:flex;gap:20px;flex-wrap:wrap}
.acard__cta{margin-top:auto;align-self:flex-start}

/* ================================================ 4 · how it works ================================================ */
.how__grid{position:relative;z-index:2;margin-top:clamp(36px,3.4vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.step{display:flex;flex-direction:column;min-width:0}
.mini3d{height:calc(232px * var(--z,1));position:relative;overflow:hidden;background:radial-gradient(110% 90% at 50% 0%,rgba(255,240,204,.06),rgba(255,240,204,0) 62%)}
.mini3d>.st{position:absolute;left:50%;top:0;width:360px;height:232px;margin-left:-180px;transform:scale(var(--z,1));transform-origin:50% 0}
.cap{padding:clamp(20px,1.6vw,32px);flex:1;border-top:1px solid rgba(255,255,255,.05)}
.cap .no{font-size:14px;color:var(--subtle);font-variant-numeric:tabular-nums}
.cap h3{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:6px;font:500 clamp(18px,1.3vw,22px)/1.25 var(--sans);letter-spacing:-.02em;color:#fff}
.cap h3 .hb{margin:0;align-self:center}
.cap p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--body);max-width:46ch}
.cap p .im--hl{width:17px;height:12px;margin:0 4px 0 2px}.cap p .im--lt{width:7px;height:13px;margin:0 4px}
/* miniature cards: small display cases (light from above, no grey border) */
.mc{background:linear-gradient(201deg,#17181d 13.96%,#0d0e11);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.035),0 30px 60px rgba(0,0,0,.6)}
.tk{position:absolute;left:10px;top:40px;width:340px;border-radius:10px;padding:4px 16px;font-size:14px}
.tk .f{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--head)}
.tk .f:last-child{border-bottom:0}
.tk .in{height:32px;min-width:88px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:flex-end;font-weight:500;color:#fff}
.tk .seg{display:flex;padding:2px;border-radius:9999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);gap:2px;position:relative}
.tk .seg span{height:28px;width:34px;border-radius:9999px;display:grid;place-items:center;color:var(--muted);position:relative;z-index:1;transition:color .4s}
.tk .seg i{position:absolute;top:2px;left:2px;width:34px;height:28px;border-radius:9999px;background:#fff;transition:transform .7s var(--e-out)}
.tk .seg span.on{color:#1c1d22;font-weight:500}
.tk{transform:translateY(16px);opacity:0;transition:transform .9s var(--e-out),opacity .9s var(--e-soft)}
.step.in .tk{transform:none;opacity:1}
.nt{position:absolute;left:20px;width:320px;border-radius:10px;padding:12px 14px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:7px;align-items:center;font-size:14px}
.nt>.coin,.nt>.tgi{grid-row:1/3}.nt__l{grid-column:2/4;gap:12px!important}
.nt--back{top:18px;transform:scale(.94);transform-origin:50% 0;opacity:.5}
.nt--front{top:86px;opacity:0;transform:translateY(-24px);transition:transform .8s var(--e-out),opacity .8s var(--e-soft)}
.step.in .nt--front{opacity:1;transform:none}
.nt b{display:block;font-weight:500;font-size:15px;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt small{display:flex;margin-top:4px;font-size:14px;color:var(--dim);white-space:nowrap}
.nt .n{font-weight:500;color:#fff}
.nt .tgi{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}.nt .tgi .ic{width:15px;height:15px}
.nt .coin{--cs:30px}
.nt3{position:absolute;left:20px;width:320px;top:176px;display:flex;justify-content:space-between;font-size:14px;color:var(--dim)}
.lg{position:absolute;top:30px;width:160px;height:130px;border-radius:10px;padding:14px;transition:transform 1s var(--e-out);font-size:14px}
.lg--l{left:14px;transform:translateX(-30px) rotate(-4deg)}
.lg--s{left:186px;transform:translateX(30px) rotate(4deg)}
.step.in .lg--l,.step.in .lg--s{transform:none}
.lg .sd{color:var(--dim)}
.lg .vn{margin-top:12px;display:flex;align-items:center;gap:8px;font-weight:500;font-size:15px;color:#fff}
.lg .sz{margin-top:14px;font-weight:500;font-size:22px;color:#fff}
.lg__eq{position:absolute;left:0;right:0;top:186px;display:flex;justify-content:center;align-items:center;gap:6px;font-size:14px;color:var(--dim);white-space:nowrap}
.lg__eq .coin{--cs:24px}
.pd{position:absolute;left:20px;right:20px;top:22px;bottom:18px;display:flex;flex-direction:column;font-size:15px}
.pd__h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pd__h .mk{flex:1;min-width:0}.pd__h .mk .dex{display:none}.pd__h>span:last-child{flex:none}
.pd__l{margin-top:6px;font-size:14px;color:var(--dim);text-align:right}
.bars{margin-top:auto;height:96px;display:flex;align-items:flex-end;gap:3px;position:relative}
.bars i{flex:1;background:rgba(255,255,255,.12);border-radius:2px 2px 0 0;transform-origin:50% 100%;transform:scaleY(0);transition:transform .5s var(--e-out),background .5s}
.bars i.neg{background:rgba(239,138,127,.45)}
.bars i.on{background:linear-gradient(#fff0cc,#ae9357)}
.step.in .bars i{transform:scaleY(1)}

/* ================================================ 5 · markets ================================================ */
.mchips{position:relative;z-index:2;margin-top:clamp(36px,3.4vw,64px);display:grid;grid-template-columns:repeat(var(--mcols,3),minmax(0,1fr));gap:16px}
.mchip{display:flex;align-items:center;gap:14px;min-width:0;height:clamp(72px,4.6vw,84px);padding:0 20px;font-size:16px;color:var(--list);transition:transform .5s var(--e-out)}
.mchip:hover{transform:translateY(-3px)}
.mchip .coin{--cs:35px}
.mchip__n{display:flex;align-items:center;gap:8px;min-width:0}
.mchip b{font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px}
.mchip__v{margin-left:auto;white-space:nowrap;color:#fff;font-weight:500;font-variant-numeric:tabular-nums}.mchip__v small{font-weight:400;color:var(--muted)}
.tiers__cta{position:relative;z-index:2;margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 32px}
.tiers__ca{max-width:720px}
.tiers__acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.tiers__cta .cta .xlogo{width:16px;height:16px;fill:currentColor}
body[data-page=home] .tiers__model{margin-top:clamp(14px,1.1vw,20px);font-size:clamp(16px,1.1vw,18px)}
.strip__ind{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.12);color:var(--faint)}
.mkts__f,.tiers__f{margin-top:28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--subtle)}

/* ================================================ 6 · tiers ================================================ */
.tiers3{position:relative;z-index:2;margin-top:clamp(36px,3.4vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tc{padding:clamp(24px,2vw,40px)}
.tc>*{position:relative;z-index:1}.tc>.case__light{position:absolute;z-index:0}
.tc__n{font:500 clamp(20px,1.5vw,24px)/1 var(--sans);letter-spacing:-.025em;color:#fff}
.tc__v{position:relative;margin-top:clamp(18px,1.4vw,28px);font:500 clamp(48px,4vw,72px)/1.05 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums;align-self:flex-start;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.tc__glow{position:absolute;left:-20px;top:46px;width:260px;height:110px;background:radial-gradient(45% 45% at 30% 55%,rgba(205,137,57,.15),rgba(205,137,57,0) 72%);mix-blend-mode:plus-lighter;pointer-events:none;z-index:0!important}
.tc{display:flex;flex-direction:column}
.tc--w{background:linear-gradient(201deg,#1a1814 10%,#0d0c0b 70%)!important}
.tc--w::after{border-color:rgba(255,240,204,.75)!important}
.tc--h .case__light,.tc--w .case__light{background:radial-gradient(50% 50% at 50% 50%,rgba(255,240,204,.11),rgba(255,240,204,0) 70%)}
.tc__p{margin-top:12px;font-size:14px;color:var(--muted)}
.tc__p .im--hl{width:17px;height:12px;margin:0 3px}.tc__p .im--lt{width:7px;height:13px;margin:0 4px}
.tc ul{list-style:none;margin-top:clamp(20px,1.6vw,32px);border-top:1px solid rgba(255,255,255,.06)}
.tc li{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;line-height:1.4;color:var(--list)}
.tc li:last-child{border-bottom:0}
.tc li::before{content:"";width:6px;height:6px;border-radius:50%;background:#2e3038;margin-top:.55em;flex:none}
.tc--h li::before,.tc--w li::before{background:var(--champ)}
.openn{margin-top:22px;display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 15px 0 13px;border-radius:9999px;font-size:14px;color:#e8dcc0;
  background:linear-gradient(135deg,rgba(255,240,204,.08),rgba(255,240,204,.015));box-shadow:inset 0 0 0 1px rgba(217,195,143,.28)}

/* ================================================ 7 · final — warm grain horizon ================================================ */
.fv{position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(56px,5vw,96px);text-align:center;padding:clamp(120px,10vw,180px) var(--px) clamp(96px,7vw,128px);
  background:linear-gradient(180deg,var(--canvas) 0%,#0b0a09 35%,var(--horizon) 100%)}
.fv__sky{position:absolute;inset:-10% 0 -10%;pointer-events:none;z-index:-1}
.fv__glow{position:absolute;left:50%;top:58%;width:1300px;height:640px;margin:-320px 0 0 -650px;background:radial-gradient(closest-side,rgba(205,137,57,.17),rgba(205,137,57,0))}
.fv__grain{position:absolute;inset:0;opacity:.32;pointer-events:none;z-index:-1;mix-blend-mode:overlay;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' 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 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fv__marks{position:absolute;inset:0;pointer-events:none;z-index:-1}
.fv__m{position:absolute;will-change:transform;fill:none;stroke:rgba(255,240,204,.16);stroke-width:1}
.fv__m--hl{left:max(2%,calc(50% - 760px));top:24%;width:clamp(180px,20vw,300px);height:auto;aspect-ratio:160/116}
.fv__m--lt{right:max(4%,calc(50% - 700px));top:16%;width:clamp(60px,6.4vw,96px);height:auto;aspect-ratio:16/28}
.fv__in{position:relative;max-width:1100px;margin:0 auto}
.fv__h{margin:0 auto;max-width:20ch;font:var(--display-w) clamp(38px,4.6vw,72px)/1.08 var(--font-display);letter-spacing:var(--display-track);color:#fff;text-wrap:balance}
.fv__h .im--hl{width:.95em;height:.68em}.fv__h .im--lt{width:.38em;height:.72em}
.minirows{margin:clamp(40px,3.4vw,60px) auto 0;width:min(100%,920px);text-align:left}
.minirows>*{position:relative;z-index:1}
.mr__h{display:flex;align-items:center;gap:12px;height:52px;padding:0 24px;font-size:15px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06)}
.mr__h .dot{width:6px;height:6px}
#fvRows{min-height:216px}
#fvRows>.empty{height:216px}
.mr{height:72px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .25s}
.mr:hover{background:rgba(255,255,255,.025)}
.mr:last-child{border-bottom:0}
.mr .coin{--cs:34px}.mr b{font-size:18px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr__s{display:grid;grid-template-columns:var(--pair-w);align-items:center;column-gap:12px;font-size:14px;color:var(--muted)}
.mr__v{font-size:24px;font-weight:500;letter-spacing:-.025em;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.mr__v small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.fv__acts{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:clamp(36px,3vw,52px)}
.cta{height:60px;padding:0 34px;border-radius:999px;display:inline-flex;align-items:center;gap:14px;font:600 18px/1 var(--sans);letter-spacing:-.02em;color:#1b1608;
  position:relative;background:linear-gradient(103deg,#ae9357,#fff0cc 45%,#c9a961 80%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(255,240,204,.3);transition:transform .4s var(--e-out)}
.cta::before{content:"";position:absolute;left:-40%;right:-40%;top:-60%;bottom:-110%;z-index:-1;pointer-events:none;background:radial-gradient(50% 42% at 50% 46%,rgba(205,137,57,.3),rgba(205,137,57,.1) 45%,rgba(205,137,57,0) 72%)}
.cta .ar{font-size:20px;transition:transform .4s var(--e-out)}.cta:hover .ar{transform:translateX(4px)}.cta:active{transform:scale(.98)}

/* ================================================ footer ================================================ */
body[data-page=home] .foot{position:relative;z-index:2;background:linear-gradient(180deg,var(--horizon) 0,#100f0d 300px,#060607 640px);border-top:0}
/* the horizon's grain carries on into the top of the footer, so the two read as one surface */
body[data-page=home] .foot::before{content:"";position:absolute;left:0;right:0;top:0;height:320px;opacity:.32;pointer-events:none;mix-blend-mode:overlay;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' 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 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body[data-page=home] .foot__word>span{font-family:var(--font-display);font-weight:var(--display-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 38%),linear-gradient(103deg,#8d7646 0%,#ae9357 18%,#fff0cc 40%,#c9ad6d 55%,#ae9357 72%,#6f5d36 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body[data-page=home] .foot__word .mark{opacity:1}
body[data-page=home] .foot .vline{gap:4px}
body[data-page=home] .foot .vline .im--hl{width:18px;height:13px;margin:0 6px 0 2px}body[data-page=home] .foot .vline .im--lt{width:8px;height:14px;margin:0 6px 0 4px}

/* ================================================ reveal motion ================================================ */
/* perf r2: the fade starts at .01, invisible on the dark canvas, so the browser counts the text as painted on the first frame (LCP) */
.rv{opacity:.01;transform:translate3d(0,18px,0);transition:opacity .9s var(--e-soft),transform .9s var(--e-out);transition-delay:calc(var(--i,0) * 80ms)}
.rv.in,.hero.in .rv{opacity:1;transform:none}
.mask{overflow:clip;overflow-clip-margin:.2em}
.mask__i{display:block;transform:translate3d(0,105%,0);transition:transform 1.1s var(--e-out)}
.mask.in .mask__i{transform:none}
.reveal{opacity:0;transform:translate3d(0,40px,0);transition:opacity .9s var(--e-soft),transform 1.1s var(--e-out);transition-delay:calc(var(--i,0) * 110ms)}
.reveal.in{opacity:1;transform:none}
.mchips>*,.tiers3>*{opacity:0;transform:translate3d(0,32px,0);transition:opacity .8s var(--e-soft),transform 1s var(--e-out);transition-delay:calc(var(--i,0) * 70ms)}
.mchips.in>*,.tiers3.in>*{opacity:1;transform:none}
.mchips.in>.mchip:hover{transform:translateY(-3px);transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .rv,.reveal,.stat,.mchips>*,.tiers3>*{opacity:1!important;transform:none!important}
  .mask__i,.h1 .ln>.li{transform:none!important}
  .strip__track{animation:none!important}
  .tk,.nt--front,.lg--l,.lg--s{transform:none!important;opacity:1!important}
  .bars i{transform:scaleY(1)!important}
}
html.still .strip__track{animation:none}

/* ================================================ responsive ================================================ */

/* stacked first screen (tablets, phones): copy first, then the object block, then the marquee */
@media (max-width:1023px){
  .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .hero__copy{order:1;padding-top:clamp(40px,7vw,72px)}
  .hero__bg{left:0;right:0}
  .hero__stage{order:2;position:relative;left:auto;right:auto;top:auto;bottom:auto;height:clamp(440px,70vw,600px);margin-top:8px}
  .strip{order:3;position:relative}
  .hero::after{display:block;height:70px}
  .hero__canvas,.hero__still{-webkit-mask-image:linear-gradient(transparent,#000 24%);mask-image:linear-gradient(transparent,#000 24%)}
  .hero__still{object-position:50% 100%}
  .hero__vignette{background:linear-gradient(180deg,rgba(4,4,6,0) 0%,rgba(4,4,6,0) 70%,var(--canvas) 100%)}
  .hero__vignette::after{display:none}
  .beam--a{left:30%;width:70%}.beam--b{left:62%;width:26%}.beam--c{display:none}
  .live__grid{grid-template-columns:minmax(0,1fr)}
  .band__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .tiers3{grid-template-columns:minmax(0,1fr)}
  .tiers__cta{grid-template-columns:minmax(0,1fr)}.tiers__ca{max-width:none}
}
@media (min-width:761px) and (max-width:1023px){.h1{font-size:clamp(52px,7.2vw,72px)}}
/* screens wider than the stage: a longer fade on the stage's right edge, so the slab ends in shadow, not at a line */
@media (min-width:1761px){.hero__vignette{background:linear-gradient(180deg,rgba(4,4,6,0) 62%,rgba(4,4,6,.85) 88%,var(--canvas) 100%),linear-gradient(90deg,var(--canvas) 0%,rgba(4,4,6,.82) 22%,rgba(4,4,6,0) 46%),linear-gradient(270deg,var(--canvas) 0%,rgba(4,4,6,.6) 6%,rgba(4,4,6,0) 16%),radial-gradient(120% 100% at 70% 55%,rgba(4,4,6,0) 55%,rgba(4,4,6,.9) 100%)}}
@media (max-width:760px){
  .h1{font-size:clamp(34px,10.2vw,44px);line-height:1.04;text-wrap:wrap}
  .h1 .ln{white-space:normal;height:auto;line-height:1.1em}
  .h1 .ln .nw{white-space:nowrap}
  .h1{margin-top:22px}
  .hero .lead{margin-top:28px;font-size:18px}
  .hero .acts{margin-top:28px;gap:24px}.btn{height:48px;padding:0 24px}
  .hero__stage{height:clamp(400px,112vw,460px)}
  .ov__usd{font-size:46px;height:46px}.ov__gap{margin-top:-94px;width:340px;margin-left:-170px}.ov__glow{width:240px;margin-left:-120px;top:14px;height:80px}
  .ov__meta{font-size:14px;height:auto}.ov__gap{width:calc(100vw - 32px);margin-left:calc(-50vw + 16px)}
  /* C6: the coin line stays inside the 16 px gutter — it wraps after the market name instead of running past the edge */
  .ov__meta .sw{flex-wrap:wrap;row-gap:4px;column-gap:8px}
  .strip__ind{display:block;margin:6px 0 0;padding:0;border:0}.ov__tag{width:140px;margin-left:-70px;margin-top:12px}.ov__tag .sw{flex-direction:column;gap:7px}
  .strip{padding-bottom:30px}.strip__cap{margin-bottom:12px}
  .mq{font-size:14px}
  .band{margin-top:-40px;padding-top:80px}
  .band__in{padding-top:32px;gap:30px 16px}
  .stat__v{font-size:38px}
  .stat__l{font-size:14px}
  body[data-page=home] .sec{padding-top:88px}
  body[data-page=home] .h2{font-size:clamp(34px,9.6vw,40px)}
  .live__grid{gap:16px}
  .stage{min-height:0;height:420px}
  .scaler{width:auto;left:10px;right:10px;margin-left:0;transform:none}
  .rig{transform:rotateX(16deg)}
  .shot{grid-template-columns:minmax(0,1fr);padding:8px}.sb{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto auto;padding:0 12px;height:68px;font-size:15px}.row .legs{display:none}
  .list,.list .empty{height:340px}.list__in.is-shift{animation-name:slide-m}@keyframes slide-m{from{transform:translateY(-68px)}}
  .stage .ph .r span{display:none}
  .stage .fade{height:90px}
  .acard__h b{font-size:20px}
  .how__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .acard__legs{gap:10px}
  .mchip{height:68px;padding:0 16px}
  .fv{padding:110px var(--px) 90px;margin-top:100px}
  .fv__h{font-size:31px;max-width:none}
  .fv__marks{display:none}
  .stage .row .dex{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto auto}
  .mr{grid-template-columns:auto minmax(0,1fr) auto;height:auto;min-height:72px;padding:12px 16px;row-gap:5px;column-gap:12px}
  .mr .coin{grid-row:1/3;align-self:start}.mr b{grid-column:2}.mr__s{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);row-gap:8px}.mr__v{grid-row:1/3;grid-column:3;font-size:20px;min-width:0;align-self:start}.mr__u{display:none}
  .mr__h{padding:0 16px}
  #fvRows,#fvRows>.empty{min-height:240px}
  .fv__acts{flex-direction:column;gap:22px}.cta{height:56px;width:100%;max-width:340px;justify-content:center}
}

/* ---- Long / Short labels on the landing (labels-v2 C: .scp pair, .sc half) ---- */
.leg2__n{color:var(--list)}
.leg2 .xm--hl{width:16px;height:12px}.leg2 .xm--lt{width:7px;height:13px;margin:0 4.5px}
.acard__kv .leg2{gap:10px}.acard__kv .leg2__n{color:var(--list);font-size:15px}
.acard__kv .lc{--side-slot:98px;min-height:50px!important;padding:8px 0!important}.acard__kv .lc__n b{color:var(--list);font-weight:400;font-size:15px}
.lg .sd{height:22px;display:flex;align-items:center}
.lg .vn .xm{margin-right:2px}


/* ================================================ 1b · live cases rising out of the hero (owner refs 13.11: Surge, AI layer) ================================================
   Display-case surface inside a 6 px light frame (no glass, no blur); rows on fixed heights; bars grow by transform. */
.rise{position:relative;z-index:6;margin-top:calc(-1 * clamp(150px,19vh,218px));padding:0 var(--px)}
.rise__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rc{position:relative;border-radius:14px;padding:6px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 30px 60px -20px rgba(0,0,0,.85)}
.rc__in{position:relative;border-radius:10px;background:linear-gradient(201deg,#141519 13.96%,#0b0c0e);overflow:hidden;height:100%}
.rc__in::before{content:"";position:absolute;inset:0;border-radius:10px;border:1px solid rgba(255,255,255,.6);mix-blend-mode:overlay;-webkit-mask-image:linear-gradient(#fff,rgba(0,0,0,0) 60%);mask-image:linear-gradient(#fff,rgba(0,0,0,0) 60%);pointer-events:none}
.rc__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;height:52px;padding:0 16px}
.rc__t{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:#fff;white-space:nowrap}
.rc__t .ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rc__t .ico>svg:not(.xm){width:15px;height:15px}.rc__t .ico .xm--lt{margin:0}
.rc__k{font-size:14px;color:var(--subtle);white-space:nowrap}
.rc__rows{min-height:calc(4 * 74px)}
.rc__rows>.empty{height:calc(4 * 74px)}
.rr{height:74px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:8px;align-content:center;padding:0 16px;border-top:1px solid var(--rule)}
.rr .ci{grid-row:1/3;position:relative;width:36px;height:36px}
.rr .ci .coin{--cs:36px}
.rr .ci .bd{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:#0b0c0e;box-shadow:0 0 0 2px #0b0c0e,inset 0 0 0 1px rgba(255,255,255,.12)}
.rr .ci .bd .xm--hl{width:11px;height:8px}.rr .ci .bd .xm--lt{width:5px;height:10px;margin:0}
.rr .nm{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;white-space:nowrap}
.rr .nm b{font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis}
.tg{font-size:14px;line-height:1;color:var(--muted2);padding:3px 7px;border-radius:5px;box-shadow:inset 0 0 0 1px #2e3038;flex:none}
.rr .val{font-size:15px;font-weight:500;color:#fff;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rr .val .u{color:var(--subtle);font-weight:400}
.rr .sub{grid-column:2/4;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted2);white-space:nowrap;min-width:0}
.rr .sub .leg2{gap:7px}.rr .paid{color:var(--muted2)}
.rr .st{font-variant-numeric:tabular-nums;color:var(--muted2)}
.bar{flex:1;min-width:24px;height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s var(--e-out)}
.rise.in .bar i{transform:scaleX(var(--w))}
.bar--gold i{background:linear-gradient(90deg,#ae9357,#fff0cc)}.bar--long i{background:var(--long)}.bar--short i{background:var(--short)}
.rc{opacity:0;transform:translate3d(0,46px,0);transition:opacity .9s var(--e-soft),transform 1.1s var(--e-out);transition-delay:calc(300ms + var(--i,0) * 110ms)}
.rise.in .rc{opacity:1;transform:none}
/* the marquee now runs under the cases */
.strip--under{position:relative;left:auto;right:auto;bottom:auto;margin-top:clamp(40px,3.4vw,56px);padding-bottom:0}
.strip--under .strip__cap{padding:0}
.rise .strip__mask{margin:0 calc(-1 * var(--px))}
body[data-page=home] .band{margin-top:0;padding-top:clamp(72px,6vw,104px);background:var(--canvas)}

/* ================================================ two-tone headings: meaning white, tail grey, same size (owner ref 4) ================================================ */
.h2a{color:#fff}
body[data-page=home] .h2 .h2b,.fv__h .h2b{color:var(--body)}
/* grey units next to metal numbers */
.stat__v .u{color:var(--subtle)!important}

/* ================================================ diagram «Hyperliquid — Hylit — Lighter» (How it works) ================================================ */
.dgm{position:relative;z-index:2;margin:clamp(36px,3.4vw,56px) auto 0;display:grid;grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr) auto;align-items:start;max-width:980px;--tw:clamp(150px,15vw,210px);--cw:clamp(84px,8vw,110px)}
.dgm__n{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.dgm__n b{margin-top:10px;font-weight:500;font-size:16px;color:#fff}.dgm__n small{font-size:14px;color:var(--muted2);white-space:nowrap}
.dgm__t{display:block;width:var(--tw);aspect-ratio:380/250;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 72%,transparent 100%)}
.dgm__t img{width:100%;height:100%;object-fit:cover}
.dgm__c{width:var(--cw);aspect-ratio:1;margin-top:calc((var(--tw) * 250 / 380 - var(--cw)) / 2);border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(201deg,#17181d 13.96%,#0b0c0e);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,240,204,.16),0 30px 60px rgba(0,0,0,.6)}
.dgm__c svg{width:46%;height:46%}
.dgm__n--c b{margin-top:calc((var(--tw) * 250 / 380 - var(--cw)) / 2 + 10px)}
.dgm__w{position:relative;align-self:start;margin-top:calc(var(--tw) * 250 / 380 / 2);height:1.5px;background:linear-gradient(90deg,rgba(174,147,87,.2),#d9bd80 50%,rgba(174,147,87,.2))}
.dgm__bead{position:absolute;inset:0;animation:bead 3.2s var(--e-io) infinite}
.dgm__bead::after{content:"";position:absolute;right:-3.5px;top:-2.75px;width:7px;height:7px;border-radius:50%;background:#fff0cc;box-shadow:0 0 0 3px rgba(255,240,204,.12)}
.dgm__w--r .dgm__bead{animation-delay:1.6s}
@keyframes bead{0%{transform:translateX(-100%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:none;opacity:0}}

@media (max-width:1199px){
  .rise__in{grid-template-columns:repeat(2,minmax(0,1fr))}.rise__in>.rc:first-child{grid-column:1/-1}
}
@media (max-width:1023px){
  .rise{margin-top:24px}
}
@media (max-width:760px){
  .rise__in{grid-template-columns:minmax(0,1fr)}
  .rr{padding:0 12px}.rc__hd{padding:10px 12px;height:auto;min-height:52px;flex-wrap:wrap;row-gap:2px}
  .rr .sub .st{display:none}
  .dgm{--tw:92px;--cw:56px;grid-template-columns:auto minmax(16px,1fr) auto minmax(16px,1fr) auto}
  .dgm__c{border-radius:14px}
  .dgm__n small{display:none}.dgm__n b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.rc{opacity:1!important;transform:none!important}.bar i{transform:scaleX(var(--w))!important}.dgm__bead{animation:none;opacity:0}}

/* ---- audit v5 fixes ---- */
/* S5: the steady bar has a fixed length (reads as a bar, not a dash); the caption is «{held}/{hours} h» */
.bar--fix{flex:0 0 72px}
.rr .sub .st{display:inline}
.rr .nm .dex{font-size:14px}
/* minor 2: the exchange badge sits off the coin, so placeholder letters stay readable */
.rr .ci .bd{right:-7px;bottom:-6px;width:17px;height:17px}
.rr .ci .coin--ini i{transform:translate(-2px,-1px)}
/* S6 + minor 9: the diagram tokens — solo stills of the hero tokens (580×400, transparent), no mask, true aspect */
.dgm__t{width:var(--tw);aspect-ratio:580/400;-webkit-mask-image:none;mask-image:none}
.dgm__t img{object-fit:contain}
.dgm__c{margin-top:calc((var(--tw) * 400 / 580 - var(--cw)) / 2)}
.dgm__n--c b{margin-top:calc((var(--tw) * 400 / 580 - var(--cw)) / 2 + 10px)}
.dgm__w{margin-top:calc(var(--tw) * 400 / 580 / 2)}
/* minor 10: the outgoing word is clipped to its own line — nothing above «on» */
.kw{overflow:hidden;overflow-clip-margin:0}
.kw__i{transition:transform .7s var(--e-out),opacity .45s var(--e-out)}
@media (max-width:760px){
  /* minor 3: every case header on phones is the same height; the steady caption shows */
  .rc__hd{flex-direction:column;align-items:flex-start;justify-content:center;min-height:64px}
  .rr{height:auto;min-height:74px;padding-top:12px;padding-bottom:12px}.rr .sub{flex-wrap:wrap;row-gap:8px}.rc__rows,.rc__rows>.empty{min-height:0}
}

/* 13.11 owner fix (stats band): «тут беда с центровкой. + давай тут откажемся от золота» — four equal columns over the full container
   width, number and caption centred on one axis (as in his reference 4, AI layer), white numbers, grey units, no gold and no glow here.
   Gold elsewhere on the site is untouched. */
.band .stat{text-align:center}
.band .stat__v{justify-content:center;font-weight:400}
.band .stat__l{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
.band .stat__glow{display:none}
.band .gold,.band .gold .roll__s>span,.band .gold .roll__x{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:#fff!important;-webkit-text-fill-color:#fff}
.band .stat__v .u,.band .stat__v .u.goldt{background:none!important;-webkit-text-fill-color:var(--subtle);color:var(--subtle)!important}
.band .fresh{justify-content:center}

/* How it works diagram: both threads flow INTO the Hylit tile, in sync; the tile answers on arrival (owner 13.11: «все должно в центр идти») */
.dgm__w--r{transform:scaleX(-1)}
.dgm__w--r .dgm__bead{animation-delay:0s}
.dgm__c{position:relative}
.dgm__c svg{position:relative;z-index:1}
.dgm__c::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(217,189,128,.24),rgba(217,189,128,0) 100%);box-shadow:inset 0 0 0 1px rgba(255,240,204,.5);
  animation:dgmHit 3.2s linear infinite}
@keyframes dgmHit{0%{opacity:.9;transform:scale(1.035)}20%{opacity:0;transform:scale(1)}88%{opacity:0;transform:scale(1)}100%{opacity:.9;transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.dgm__c::before{animation:none;opacity:0}}
/* C6: on phones the class tag steps aside in the rising cases so the market name shows in full (Samsung, SK Hynix, UNITREE) */
@media (max-width:420px){.rr .nm .tg{display:none}}

/* the «open until launch» plaque wraps on phones: a rounded box (not a stretched pill), the dot on the first line */
@media (max-width:760px){.openn{border-radius:16px;padding:8px 14px 8px 13px;align-items:flex-start;line-height:1.45}.openn .dot{margin-top:.5em}}

/* ================================================ audit v7 round 1 (frontend) ================================================ */
/* visual C-2: the funding definition under the lead, above the buttons (COPY B2) — quieter than the lead */
.hero .lead{margin-top:32px}
.hero__sub{margin-top:12px;max-width:44ch;font-size:15px;line-height:1.5;color:var(--muted2);letter-spacing:-.01em}
.hero .acts{margin-top:30px}
@media (max-width:760px){.hero .lead{margin-top:24px}.hero__sub{font-size:15px}.hero .acts{margin-top:24px}}
/* seo C9: the kinetic slot is sized by its two words drawn as pseudo-elements, so the H1's text is one phrase (glyph width = .05 + .34 em) */
.kw__s::before,.kw__s::after{grid-area:1/1;font-weight:var(--display-strong);letter-spacing:-.03em;padding-right:.39em;white-space:nowrap}
.kw__s::before{content:attr(data-a)}.kw__s::after{content:attr(data-b)}
/* geometry M7: no empty pill while the first read is on its way */
.badge--wait{visibility:hidden}
/* a11y S16: pause motion (the marquee, the diagram, the headline's rotation); the marquee also stops while a key user is inside it */
.mpause{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:14px;padding:0 4px;font-size:14px;color:var(--muted2);vertical-align:middle;transition:color .2s}
.mpause:hover{color:#fff}.mpause .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mpause .p2{display:none}.mo-paused .mpause .p1{display:none}.mo-paused .mpause .p2{display:inline}
.strip__cap{display:flex;align-items:center;flex-wrap:wrap;row-gap:2px}
.mo-paused .strip__track,.strip__mask:focus-within .strip__track,.mo-paused .dgm__bead,.mo-paused .dgm__c::before,.mo-paused .dot::after{animation-play-state:paused}
@media (max-width:760px){.mpause{margin-left:0}.strip__cap .mpause{order:3}}
/* a11y S4: the independence line reads (≥ 4.5:1) */
.strip__ind{color:#8a8d99}
/* a11y S1: an ended row is quieter by colour, never by opacity */
.row.ended{opacity:1}.row.ended .mk b,.row.ended .n{color:#a0a3ad}.row.ended .u{color:#8a8d99}
/* geometry S13: the number sits on the column's axis, its units hang beside it */
.band .stat__v{display:block;text-align:center}
.band .stat__v>.gold{position:relative;display:inline-flex}
.band .stat__v{position:relative;width:max-content;max-width:100%;margin:0 auto}
.band .stat__v>.u{position:absolute;left:100%;bottom:.14em;margin-left:5px;white-space:nowrap}
.band .stat__v>.u--pre{left:auto;right:100%;margin:0 10px 0 0}
.band .stat__v>.u--pre:first-child:has(+ .gold[hidden]){position:static;margin:0}
/* geometry S14: an empty value is a dash of the same height; its units hide */
.band .stat__v{min-height:1.12em}
.band .stat__v.is-empty>.u{visibility:hidden}
.band .stat__v.is-empty>.gold{color:var(--subtle)!important;-webkit-text-fill-color:var(--subtle)}
/* geometry S15: one rhythm for heading → sub-line → content in every section */
body[data-page=home] .tiers__model{margin-top:clamp(18px,1.6vw,28px)}
.dgm{margin-top:clamp(36px,3.4vw,64px)}
/* visual C-10: the «Everything in …, plus» line leads the list */
.tc li.tc__inc{color:#fff;font-weight:500}
.tc li.tc__inc::before{background:var(--gold-a)}
/* visual C-6 / geometry S8: in the two-column cases (tablets) the class tag steps aside and the dex tag shrinks before the name does */
.rr .nm b{flex:0 0 auto;max-width:100%}
.rr .nm .dex,.rr .nm .tg{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:clip}
@media (min-width:761px) and (max-width:1199px){#rcHl .rr .nm .tg,#rcLt .rr .nm .tg{display:none}}
/* visual C-6: 768 — the leg tags under the tokens stack (as on phones), so LONG / SHORT never overlap */
@media (min-width:761px) and (max-width:1023px){.ov__tag{width:150px;margin-left:-75px}.ov__tag .sw{flex-direction:column;gap:7px}}
/* the steady caption: full words («Steady: 23 of 24 h»); where the row is too narrow for the bar as well, the bar steps aside */
#rcBest .rr .sub{container-type:inline-size}
.rr .sub .st{white-space:nowrap}
@container (max-width:400px){#rcBest .rr .sub .bar--fix{display:none}}
/* a11y M7 / M22: the overlay separators read; a block still fading in shows at once when a key user reaches it */
.dot3{color:#8a8d99}
.rv:focus-within,.reveal:focus-within,.mchips:focus-within>*,.tiers3:focus-within>*{opacity:1!important;transform:none!important;transition:none!important}
/* geometry M6: the miniature's «next funding» caption steps aside on phones (as in the real cabinet) */
@media (max-width:760px){.stage .ph .r{display:none}}
/* geometry r3: the three live cases share one row grid — the value column holds the widest value («−0.0237% / h»), so the name column
   is the same width in every case whatever each case shows */
.rr{grid-template-columns:40px minmax(0,1fr) minmax(5.4em,auto)}
/* a11y R1 (WCAG 1.4.12): the hero is at least the screen tall (as before) and grows with its copy — the copy keeps the room the rising
   cases overlap (their negative margin) plus a gap, so with wider text spacing the buttons stay above the cases. Default spacing: same size. */
@media (min-width:1024px){
  .hero{height:auto;min-height:clamp(700px,calc(100svh - var(--nav-h)),1040px);max-height:none}
  .hero__copy{padding-bottom:calc(clamp(150px,19vh,218px) + 40px)}
}
/* a11y M3: the tier badge sits beside the step's heading, not inside it (same row, same look) */
.cap__h{margin-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:6px}
.cap__h h3{margin-top:0}.cap__h .hb{margin:0;align-self:center}
/* a11y M22: a case that receives keyboard focus before its reveal shows at once (never a focused element at opacity 0) */
.rc:focus-within{opacity:1;transform:none;transition:none}
.hlp-faq{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.12);color:#8a8d99;pointer-events:auto}
.hlp-faq:hover{color:#fff}
@media (max-width:760px){.hlp-faq{margin-left:0;padding-left:0;border-left:0;flex-basis:100%;margin-top:6px}}
/* newcomer M9: on phones the caption wraps to two lines — the figure sits higher, so «trading fees pay back in …» clears the coin and its dot */
@media (max-width:760px){.ov__gap{margin-top:-122px}}
.band .stat__v>.gold.lead1{margin-left:-.17em}
.kw__i--out .lw::before{content:attr(data-t)}
/* newcomer S7 */
.tc__note{margin-top:14px;font-size:14px;line-height:1.45;color:#8a8d99}
/* geometry r3b: on two-column steps (761–1023) a title with a badge takes two rows — every step's head keeps that height, so the lines below start level */
@media (min-width:761px) and (max-width:1023px){.cap>h3,.cap__h{min-height:56px;align-content:flex-start}}
/* geometry r3c: wider screens too — every step head is at least the badge row's height, so the lines below start level */
@media (min-width:1024px){.cap>h3,.cap__h{min-height:24.5px}}
.ov__meta .ovp{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}