/* styles.css — no colour literals here: everything comes from tokens.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{background:rgb(var(--bg));color:rgb(var(--text));font:450 var(--fm)/1.45 var(--sans);letter-spacing:-.003em;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;min-width:320px;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:rgba(var(--text),.35)}
:focus-visible{outline:1px solid rgba(var(--text),.8);outline-offset:2px;border-radius:var(--r-sm)}
.mono{font-family:var(--mono);letter-spacing:-.01em}
.up{color:rgb(var(--green))}.down{color:rgb(var(--red))}
[hidden]{display:none!important}

.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--color-accent);pointer-events:none}

/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(var(--bg),.84);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(var(--line),var(--a-stroke))}
.top-row{display:flex;align-items:center;gap:var(--sp-3);height:var(--head);padding:0 var(--sp-6)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-4);min-height:var(--tap);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand .mark{width:28px;height:28px;border-radius:var(--r-md);transition:transform .7s cubic-bezier(.3,1.5,.45,1)}
.brand:hover .mark{transform:rotate(90deg)}
.brand span{padding-left:var(--sp-4);border-left:1px solid rgba(var(--line),.12);line-height:16px;font-weight:500;color:rgba(var(--text),var(--a-text-2))}
.status{display:flex;align-items:center;gap:var(--sp-3);margin-left:var(--sp-4);height:28px;padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid rgba(var(--line),var(--a-stroke));background:rgba(var(--line),.02);font-size:var(--fs);font-weight:500;color:rgba(var(--text),var(--a-text-2));white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(var(--text),var(--a-text-3))}
.status.on .dot,.fd-dot.on{background:rgb(var(--green));box-shadow:0 0 0 3px rgba(var(--green),.15);animation:fdpulse 2s infinite}
.status.err .dot,.fd-dot.err{background:rgb(var(--red))}
.social{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.icon-btn{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-md);border:1px solid rgba(var(--line),.09);color:rgba(var(--text),var(--a-text-2));transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
a.icon-btn:hover{color:rgb(var(--text));border-color:rgba(var(--line),.18);background:rgba(var(--line),.05)}
.icon-btn.is-inert{opacity:.4;cursor:default}

/* contract slot */
.ca-bar{display:flex;align-items:center;justify-content:center;min-height:var(--ca-h);padding:var(--sp-3) var(--sp-6);border-top:1px solid rgba(var(--line),var(--a-stroke))}
.ca{display:flex;align-items:center;gap:var(--sp-5);width:100%;max-width:980px;min-height:var(--tap);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-lg);border:1px solid rgba(var(--line),.09);background:rgba(var(--line),.025);text-align:left;color:rgba(var(--text),var(--a-text-3))}
.ca .lab{font:600 var(--fx) var(--mono);letter-spacing:.06em;color:rgba(var(--text),var(--a-text-2));flex:none}
.ca .addr{flex:1;min-width:0;font:600 20px/1.25 var(--mono);letter-spacing:-.02em;word-break:break-all}
.ca .act{flex:none;font:600 var(--fs) var(--sans);color:rgba(var(--text),var(--a-text-2));display:inline-flex;align-items:center;gap:var(--sp-3)}
.ca .act svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.ca.live{color:rgb(var(--text));border-color:rgba(var(--green),.45);cursor:pointer;transition:background var(--t-base),border-color var(--t-base),transform .2s var(--spring)}
button.ca.live:hover{background:rgba(var(--green),.08)}
button.ca.live:active{transform:scale(.99)}
button.ca.live .lab{color:rgb(var(--green))}
button.ca.copied{border-color:var(--color-accent);background:rgba(var(--accent-rgb),.08)}
button.ca.copied .act{color:var(--color-accent)}
.ca.is-inert .addr{font-weight:500;font-size:16px}

/* frame */
.app{display:grid;grid-template-columns:minmax(0,1fr)}
.side{display:none}
@media (min-width:1100px){
  .app{grid-template-columns:var(--side) minmax(0,1fr)}
  .side{display:block;position:sticky;top:calc(var(--head) + var(--ca-h));align-self:start;padding:var(--sp-6) var(--sp-5);border-right:1px solid rgba(var(--line),var(--a-stroke));min-height:calc(100vh - var(--head) - var(--ca-h))}
}
.side summary{list-style:none;cursor:pointer;padding:var(--sp-3) var(--sp-4);font-size:var(--fx);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(var(--text),var(--a-text-3))}
.side summary::-webkit-details-marker{display:none}
.side a{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-md);color:rgba(var(--text),var(--a-text-2));font-weight:500;transition:color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.side a:hover{color:rgb(var(--text));background:rgba(var(--line),.05)}
.side details{margin-bottom:var(--sp-5)}
.page{min-width:0;max-width:1180px;width:100%;margin:0 auto}
.sec{padding:0 28px 40px}

/* hero */
.hero{position:relative;z-index:0;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-7);padding:44px 28px 40px;isolation:isolate;overflow:hidden;min-height:360px}
.hero::after{content:"";position:absolute;inset:0 0 -1px 0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent 55%,rgb(var(--bg)))}
.mesh{position:absolute;inset:-20% -10% -10% -10%;z-index:-3;pointer-events:none;filter:blur(40px);opacity:.9;
  background:radial-gradient(40% 50% at 20% 30%,rgba(var(--accent-rgb),.16),transparent 70%),radial-gradient(38% 46% at 80% 20%,rgba(var(--line),.12),transparent 70%),radial-gradient(34% 44% at 60% 90%,rgba(var(--accent-rgb),.08),transparent 70%);animation:meshdrift 14s ease-in-out infinite alternate}
.moire{--ox:72%;--oy:26%;--dot:rgb(var(--black));position:absolute;inset:0 0 auto 0;height:300px;z-index:-2;overflow:hidden;pointer-events:none;opacity:.55;-webkit-mask:radial-gradient(circle,var(--dot) 0,var(--dot) .6px,transparent .78px) 0 0/10px 10px repeat;mask:radial-gradient(circle,var(--dot) 0,var(--dot) .6px,transparent .78px) 0 0/10px 10px repeat}
.moire::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--ox) var(--oy),rgba(var(--line),.22),rgba(var(--line),.08) 58%,rgba(var(--line),.016) 100%)}
.moire-pulse{position:absolute;top:-25%;bottom:-25%;left:0;width:34%;opacity:0;background:linear-gradient(90deg,transparent,rgba(var(--line),.5) 50%,transparent);transform:translateX(-110%) skewX(-18deg);animation:sweep 8s cubic-bezier(.45,0,.2,1) 1.2s infinite}
.hero-l{min-width:0;max-width:620px}
.crumbs{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);color:rgba(var(--text),var(--a-text-3));font-size:var(--fs);font-weight:500}
.crumbs i{font-style:normal;opacity:.6}
.hero h1{font-size:var(--h1);font-weight:500;line-height:1.1;letter-spacing:-.035em}
.lede{max-width:620px;margin-top:var(--sp-4);color:rgba(var(--text),var(--a-text-2));font-size:14.5px;line-height:1.6}
.acts{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-6);border-radius:var(--r-md);border:1px solid rgba(var(--line),.14);font-weight:600;transition:border-color var(--t-base),background var(--t-base),scale .2s var(--spring)}
.btn:hover{border-color:rgba(var(--line),.3);background:rgba(var(--line),.05)}.btn:active{scale:.98}
.btn.primary{background:rgb(var(--text));color:rgb(var(--bg));border-color:transparent}
.btn.primary:hover{background:rgba(var(--text),.88)}
.wave{flex:none;display:flex;align-items:center;gap:6px;height:180px;padding-right:var(--sp-6)}
.wave i{display:block;width:10px;border-radius:var(--r-pill);background:rgb(var(--text));transform-origin:50% 50%;animation:beat 1.8s var(--ease) infinite;animation-delay:calc(var(--i) * -.14s)}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid rgba(var(--line),var(--a-stroke));margin-bottom:var(--sp-7);-webkit-mask:linear-gradient(90deg,transparent,var(--dot-on) 6%,var(--dot-on) 94%,transparent);mask:linear-gradient(90deg,transparent,var(--dot-on) 6%,var(--dot-on) 94%,transparent);--dot-on:rgb(var(--black))}
.ticker-track{display:flex;width:max-content;gap:var(--sp-7);padding:var(--sp-4) var(--sp-6);animation:tickroll 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs);white-space:nowrap}
.tk b{font-weight:600}.tk .sk-bar{width:90px}

/* board */
.fd-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;padding:12px 16px;margin-bottom:var(--sp-5);border-radius:var(--r-xl);border:1px solid rgba(var(--line),var(--a-stroke));background:rgba(var(--line),var(--a-surface));overflow:hidden}
.fd-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:var(--fs);color:rgba(var(--text),var(--a-text-3))}
.fd-stats span{display:flex;align-items:center;gap:var(--sp-2)}
.fd-stats b{color:rgb(var(--text));font:500 var(--fs) var(--mono)}
.fd-dot{width:7px;height:7px;border-radius:50%;background:rgba(var(--text),var(--a-text-3))}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 var(--sp-3);border-radius:var(--r-sm);font-size:var(--fx);font-weight:600;background:rgba(var(--line),.05);color:rgba(var(--text),var(--a-text-2));box-shadow:inset 0 0 0 1px rgba(var(--line),.05);white-space:nowrap}
.pill.live{background:rgba(var(--green),.09);color:rgb(var(--green));box-shadow:inset 0 0 0 1px rgba(var(--green),.14)}
.board-head,.row{display:grid;grid-template-columns:34px minmax(0,2.2fr) repeat(4,minmax(0,1fr));gap:var(--sp-5);align-items:center}
.board-head{padding:0 16px var(--sp-3);font-size:var(--fx);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--text),var(--a-text-3))}
.r{text-align:right}
.fd-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{position:relative;min-height:60px;padding:10px 16px;border-radius:var(--r-xl);border:1px solid rgba(var(--line),var(--a-stroke));background:rgba(var(--line),var(--a-surface));overflow:hidden;transition:border-color var(--t-base) var(--ease-out)}
.row:hover{border-color:rgba(var(--line),var(--a-stroke-hi))}
.row.enter{animation:min .26s var(--spring) backwards;animation-delay:calc(var(--i) * 45ms)}
.rk{font:500 var(--fs) var(--mono);color:rgba(var(--text),var(--a-text-3))}
.who{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.who .t{min-width:0}.who b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{display:block;color:rgba(var(--text),var(--a-text-3));font-size:var(--fs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg{flex:none;width:36px;height:36px;border-radius:50%;background:rgba(var(--line),.08);display:grid;place-items:center;font-weight:700;font-size:var(--fm);overflow:hidden}
.lg img{width:100%;height:100%;object-fit:cover}
.lg.brand-logo{border-radius:var(--r-md);background:rgb(var(--bg))}
.cell{font:500 var(--fm) var(--mono);text-align:right;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.flash-up{animation:flashup .9s var(--ease-out)}.cell.flash-down{animation:flashdown .9s var(--ease-out)}
.row.own{border-left:2px solid var(--color-accent);animation:ownPulse 1.6s ease-in-out infinite}
.row.own .rk{color:var(--color-accent)}
.sk-bar{display:block;height:12px;border-radius:var(--r-xs);background:linear-gradient(90deg,rgba(var(--line),.04) 25%,rgba(var(--line),.12) 50%,rgba(var(--line),.04) 75%);background-size:200% 100%;animation:sk 1.4s linear infinite}
.sk-bar.w2{width:60%}.sk-bar.r{margin-left:auto;width:70%}
.note{margin-top:var(--sp-5);font-size:var(--fs);color:rgba(var(--text),var(--a-text-3))}
.note.err{color:rgb(var(--red))}

/* tiles / cards */
.sect{margin-bottom:var(--sp-4);font-size:var(--fx);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(var(--text),var(--a-text-3))}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border-radius:var(--r-lg);background:rgba(var(--line),var(--a-surface));border:1px solid rgba(var(--line),var(--a-stroke));transition:border-color var(--t-base),background var(--t-base);overflow:hidden}
.tile:hover{background:rgba(var(--line),.04);border-color:rgba(var(--line),.13)}
.tile b{font-weight:600}.tile p{color:rgba(var(--text),var(--a-text-2));font-size:var(--fs);line-height:1.55}
.tile .ic{font:600 var(--fx) var(--mono);color:rgba(var(--text),var(--a-text-3));font-style:normal}
.tag{align-self:flex-start;margin-top:auto;padding:1px var(--sp-2);border-radius:var(--r-xs);font-style:normal;font-size:var(--fx);font-weight:700;background:rgba(var(--line),.08);color:rgba(var(--text),var(--a-text-2))}
.tag.on{background:rgba(var(--green),.12);color:rgb(var(--green))}
.steps,.road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);list-style:none}
.road{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;border-radius:var(--r-xl);border:1px solid rgba(var(--line),var(--a-stroke));background:rgba(var(--line),var(--a-surface));overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);height:48px;padding:0 18px;border-bottom:1px solid rgba(var(--line),var(--a-stroke))}
.card-h h3{font-size:var(--fm);font-weight:600}
.card-b{padding:18px;color:rgba(var(--text),var(--a-text-2));line-height:1.55}
.road h3{margin:var(--sp-4) 0 var(--sp-2);color:rgb(var(--text));font-size:var(--fl);font-weight:600}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.kv small{display:block;color:rgba(var(--text),var(--a-text-3));font-size:var(--fx);letter-spacing:.06em;text-transform:uppercase}
.kv b{color:rgb(var(--text));font-weight:600;word-break:break-all}
.foot{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-7) 28px 60px;border-top:1px solid rgba(var(--line),var(--a-stroke));color:rgba(var(--text),var(--a-text-3));font-size:var(--fs)}

/* spotlight */
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--t-mid);background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--line),.08),transparent 70%)}
.spot:hover::before{opacity:1}
.row.own.spot::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.1),transparent 70%)}

/* reveal (driven by motion.js spring) */
.reveal{opacity:0;will-change:transform,opacity}
.reveal.in{opacity:1}

@keyframes fdpulse{50%{box-shadow:0 0 0 6px rgba(var(--green),0)}}
@keyframes sweep{0%{opacity:0;transform:translateX(-110%) skewX(-18deg)}5%{opacity:1}30%{opacity:1}36%,100%{opacity:0;transform:translateX(330%) skewX(-18deg)}}
@keyframes sk{to{background-position:-200% 0}}
@keyframes min{from{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes fin{from{opacity:0}}
@keyframes ownPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.28),inset 0 0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 0 6px rgba(var(--accent-rgb),0),inset 0 0 24px 0 rgba(var(--accent-rgb),.07)}}
@keyframes flashup{0%{background:rgba(var(--green),.28)}100%{background:transparent}}
@keyframes flashdown{0%{background:rgba(var(--red),.28)}100%{background:transparent}}
@keyframes tickroll{to{transform:translateX(-50%)}}
@keyframes beat{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes meshdrift{to{transform:translate3d(3%,-4%,0) scale(1.08)}}

@media (max-width:1100px){.road,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .hero{flex-direction:column;align-items:flex-start;padding:32px 16px 28px}
  .wave{height:120px;gap:4px}.wave i{width:8px}
  .sec{padding:0 16px 32px}
  .steps{grid-template-columns:1fr}
  .board-head{display:none}
  .row{grid-template-columns:28px repeat(3,minmax(0,1fr));row-gap:var(--sp-3);column-gap:var(--sp-4)}
  .row>.who{grid-column:2 / 4}
  .row>.c-price{grid-column:4}
  .row>.c-chg,.row>.c-vol,.row>.c-liq{grid-row:2;text-align:left;font-size:var(--fs);color:rgba(var(--text),var(--a-text-2))}
  .row>.c-chg{grid-column:2}.row>.c-vol{grid-column:3}.row>.c-liq{grid-column:4}
  .row>.c-chg.up{color:rgb(var(--green))}.row>.c-chg.down{color:rgb(var(--red))}
  .row>.c-vol::before,.row>.c-liq::before{content:attr(data-l) " ";color:rgba(var(--text),var(--a-text-3))}
}
@media (max-width:640px){
  .tiles,.road,.kv{grid-template-columns:1fr}
  .top-row{padding:0 var(--sp-5);gap:var(--sp-2)}
  .brand span,.status{display:none}
  .ca-bar{padding:var(--sp-3) var(--sp-5)}
  .ca{padding:var(--sp-3)}
  .ca .addr{font-size:13px}
  .ca .act span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .ticker{overflow-x:auto}.wave i{transform:scaleY(.8)}
}