*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 90px);-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;line-height:1.5;overflow-x:hidden;min-height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
h1,h2,h3{font-weight:800;line-height:1.05;letter-spacing:-.03em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--accent);color:var(--disc);padding:10px 16px;border-radius:var(--r-cell);z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}

/* progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--forest-bright),var(--mint));transform-origin:0 50%;transform:scaleX(0)}

/* header */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h);padding-inline:var(--gutter);max-width:1240px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.brand img{border-radius:50%}
.brand-word{font-weight:900;letter-spacing:.12em;font-size:20px}
.nav{display:none;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;border-radius:var(--r-pill);color:var(--ink-2);font-weight:600;font-size:15px;transition:color var(--dur-hover) var(--ease-settle),background-color var(--dur-hover) var(--ease-settle)}
.nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--mint) 9%,transparent)}
@media(min-width:900px){.nav{display:flex}}
.socials{display:flex;gap:6px;margin-left:auto}
.social{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--rule);color:var(--ink);transition:background-color var(--dur-hover) var(--ease-settle),border-color var(--dur-hover) var(--ease-settle),transform var(--dur-tap) var(--ease-settle)}
.social svg{width:20px;height:20px;fill:currentColor}
a.social:hover{background:color-mix(in srgb,var(--mint) 12%,transparent);border-color:var(--accent)}
a.social:active{transform:scale(.94)}
.social.is-inert{color:var(--ink-2);opacity:.55;cursor:default}

/* CA slot */
.ca{border-top:1px solid var(--rule);background:color-mix(in srgb,var(--forest-deep) 55%,var(--ground))}
.ca-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:10px var(--gutter)}
.ca-label{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);flex:none}
.ca-value{flex:1 1 220px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(15px,2.3vw,26px);font-weight:700;line-height:1.25;overflow-wrap:anywhere;word-break:break-all;color:var(--ink)}
.ca[data-state="absent"] .ca-value,.ca[data-state="unconfirmed"] .ca-value{color:var(--ink-2);font-family:inherit;font-weight:600;font-size:clamp(15px,2vw,20px)}
.copy{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding-inline:16px;border-radius:var(--r-pill);border:1px solid var(--accent);color:var(--accent);font-weight:700;font-size:14px;transition:background-color var(--dur-hover) var(--ease-settle),color var(--dur-hover) var(--ease-settle),transform var(--dur-tap) var(--ease-settle)}
.copy svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.copy:hover:not(:disabled){background:var(--accent);color:var(--disc)}
.copy:active:not(:disabled){transform:scale(.96)}
.copy:disabled{opacity:.35;cursor:not-allowed;border-color:var(--rule);color:var(--ink-2)}
.copy.is-done{background:var(--accent);color:var(--disc)}
.copy.is-sm{padding-inline:0;border-color:var(--rule);color:var(--ink-2)}

/* hero */
.hero{position:relative;overflow:clip;min-height:calc(100svh - var(--header-h) - 70px);padding-block:48px 40px;isolation:isolate}
.mesh{position:absolute;inset:-10%;z-index:-1;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.15;will-change:transform}
.b1{width:56%;aspect-ratio:1;left:-8%;top:-10%;background:radial-gradient(circle,var(--mint),transparent 68%);animation:drift1 22s ease-in-out infinite alternate}
.b2{width:50%;aspect-ratio:1;right:-6%;top:12%;background:radial-gradient(circle,var(--emerald),transparent 68%);animation:drift2 27s ease-in-out infinite alternate}
.b3{width:46%;aspect-ratio:1;left:30%;bottom:-18%;background:radial-gradient(circle,var(--forest-bright),transparent 68%);animation:drift3 31s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18%,14%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20%,10%) scale(.9)}}
@keyframes drift3{to{transform:translate(-14%,-18%) scale(1.2)}}
.hero-grid{max-width:1240px;margin:0 auto;padding-inline:var(--gutter);display:grid;gap:32px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero-title{font-size:clamp(46px,8.6vw,124px);font-weight:900;line-height:.92;letter-spacing:-.04em;text-wrap:balance}
.hero-title .w{display:inline-block}
.hero-lede{margin-top:24px;max-width:34em;font-size:clamp(16px,1.6vw,19px);color:var(--ink-2);line-height:1.55}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding-inline:26px;border-radius:var(--r-pill);font-weight:700;font-size:16px;transition:transform var(--dur-tap) var(--ease-settle),box-shadow var(--dur-hover) var(--ease-settle),background-color var(--dur-hover) var(--ease-settle),border-color var(--dur-hover) var(--ease-settle)}
.btn-primary{background:var(--accent);color:var(--disc);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--mint) 70%,transparent)}
.btn-primary:hover{box-shadow:0 14px 36px -10px color-mix(in srgb,var(--mint) 85%,transparent);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);background:color-mix(in srgb,var(--mint) 8%,transparent)}
.btn:active{transform:scale(.97)}

.hero-stage{position:relative;display:grid;place-items:center;min-height:300px}
.hero-logo{width:100%;height:auto;aspect-ratio:1;filter:drop-shadow(0 30px 60px color-mix(in srgb,var(--mint) 28%,transparent))}
.depth{will-change:transform;width:min(100%,520px)}
.float{animation:levitate 4s ease-in-out infinite;will-change:transform}
@keyframes levitate{0%,100%{transform:translateY(-12px) rotate(-1.5deg)}50%{transform:translateY(12px) rotate(1.5deg)}}
.ring{position:absolute;border-radius:50%;border:1px solid var(--rule);pointer-events:none;will-change:transform}
.r1{width:124%;max-width:680px;aspect-ratio:1}
.r2{width:96%;max-width:500px;aspect-ratio:1;border-color:color-mix(in srgb,var(--mint) 24%,transparent)}

/* hero entrance */
.hero-title .w{opacity:0;transform:translateY(20px);animation:rise .6s var(--ease-settle) calc(.2s + var(--i)*.1s) both}
.hero-in{opacity:0;animation:fade .6s var(--ease-settle) .1s both}
.hero-lede{opacity:0;animation:fade .6s var(--ease-settle) 1.1s both}
.hero-ctas .btn{opacity:0;animation:pop .5s var(--ease-settle) 1.7s both}
.hero-ctas .btn+.btn{animation-delay:1.8s}
.hero-tiles{opacity:0;animation:fade .6s var(--ease-settle) 1.9s both}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.hero-tiles{max-width:1240px;margin:40px auto 0;padding-inline:var(--gutter);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:900px){.hero-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* tiles & spotlight */
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--r-glass);border:1px solid var(--rule);background:var(--panel);overflow:hidden}
.tile-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tile-v{font-size:clamp(20px,2.4vw,28px);font-weight:800;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:10px}
.is-pending{color:var(--ink-2);font-weight:600}
[data-spot]{position:relative}
[data-spot]::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--mint) 16%,transparent),transparent 70%);transition:opacity .3s var(--ease-settle)}
[data-spot]:hover::before{opacity:1}
[data-spot]>*{position:relative}

/* pill */
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.pill{display:inline-flex;align-items:center;gap:10px;height:40px;padding-inline:16px;border-radius:var(--r-pill);border:1px solid var(--rule);font-weight:700;font-size:14px;white-space:nowrap;background:var(--panel)}
.pill[data-tone="warn"] .live-dot,.pill[data-tone="down"] .live-dot{background:var(--ink-2)}
.pill[data-tone="warn"] .live-dot::after,.pill[data-tone="down"] .live-dot::after{border-color:var(--ink-2);animation:none;opacity:0}

/* ticker */
.ticker{border-block:1px solid var(--rule);background:color-mix(in srgb,var(--forest-deep) 40%,var(--ground));overflow:hidden;height:56px;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,var(--disc) 6%,var(--disc) 94%,transparent);mask:linear-gradient(90deg,transparent,var(--disc) 6%,var(--disc) 94%,transparent)}
.ticker-track{display:flex;gap:36px;width:max-content;padding-left:36px;animation:scroll 48s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;white-space:nowrap}
.tick .t-sym{letter-spacing:.04em}
.tick .t-px{color:var(--ink-2);font-weight:600}
.skel-tick{width:130px;height:16px;border-radius:var(--r-pill)}
.up{color:var(--accent)}
.down{color:var(--ink-2)}

/* sections */
.sec{padding-block:clamp(64px,9vw,128px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sec h2{font-size:clamp(32px,5vw,64px);max-width:15em;text-wrap:balance}
.sub{margin-top:16px;color:var(--ink-2);max-width:36em;font-size:clamp(15px,1.5vw,18px)}
.fine{color:var(--ink-2);font-size:13px;margin-top:14px}

/* reveal: only hidden when script is running */
.js [data-reveal]{opacity:0;will-change:transform,opacity}

/* board */
.board{border:1px solid var(--rule);border-radius:var(--r-glass);background:var(--panel);overflow:hidden}
.board-head,.mrow{display:grid;grid-template-columns:40px minmax(150px,1.6fr) repeat(4,minmax(0,1fr)) 64px;align-items:center;column-gap:16px;padding-inline:20px}
.board-head{height:46px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.r{text-align:right}
.mrow{position:relative;min-height:64px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;overflow:hidden}
.mrow:last-child{border-bottom:0}
.mrow>*{position:relative;min-width:0}
.mrow::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--mint) 12%,transparent),transparent 70%);transition:opacity .3s var(--ease-settle)}
.mrow:hover::before{opacity:1}
.mrow.in{animation:rowin .5s var(--ease-settle) calc(var(--i)*.06s) both}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rank{color:var(--ink-2)}
.tok{display:flex;align-items:center;gap:12px;min-width:0}
.tok-meta{min-width:0}
.tok-sym{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tok-name{display:block;color:var(--ink-2);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--disc);background:var(--mint)}
.av img{width:100%;height:100%;object-fit:cover}
.av.c1{background:var(--mint)}.av.c2{background:var(--emerald)}.av.c3{background:var(--paper)}.av.c4{background:var(--green)}
.cell.flash-up{animation:flashup .9s var(--ease-settle)}
.cell.flash-down{animation:flashdown .9s var(--ease-settle)}
@keyframes flashup{0%{background:color-mix(in srgb,var(--mint) 32%,transparent)}100%{background:transparent}}
@keyframes flashdown{0%{background:color-mix(in srgb,var(--slate) 34%,transparent)}100%{background:transparent}}
.cell{border-radius:6px;padding:2px 4px;margin:-2px -4px}
.skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--slate) 16%,transparent);border-radius:var(--r-cell);height:14px}
.skel::after,.skel-tick::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--mist) 14%,transparent),transparent);transform:translateX(-100%);animation:shimmer 1.4s linear infinite}
.skel-tick{position:relative;overflow:hidden;background:color-mix(in srgb,var(--slate) 16%,transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel.circ{width:36px;height:36px;border-radius:50%}
.board-err{padding:16px 20px;color:var(--ink-2);font-weight:600;border-top:1px solid var(--rule)}

@media(max-width:899px){
  .board-head{display:none}
  .mrow{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"rank tok copy" "px ch vol" "liq liq liq";row-gap:8px;padding:14px 16px}
  .mrow .rank{grid-area:rank}
  .mrow .tok{grid-area:tok}
  .mrow .c-px{grid-area:px}
  .mrow .c-ch{grid-area:ch}
  .mrow .c-vol{grid-area:vol}
  .mrow .c-liq{grid-area:liq;text-align:left}
  .mrow .c-copy{grid-area:copy}
  .mrow .r{text-align:left}
  .mrow .c-ch,.mrow .c-vol{text-align:left}
  .mrow [data-l]::before{content:attr(data-l);display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:800}
  .mrow.skeleton{grid-template-areas:"rank tok copy"}
}

/* steps */
.steps{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(5,minmax(0,1fr))}}
.step,.rule{padding:24px;border:1px solid var(--rule);border-radius:var(--r-glass);background:var(--panel);overflow:hidden}
.n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-weight:800;font-size:14px;margin-bottom:18px}
.step h3,.rule h3{font-size:22px;margin-bottom:10px}
.step p,.rule p{color:var(--ink-2);font-size:15px}

.panel{margin-top:28px;border:1px solid var(--rule);border-radius:var(--r-glass);background:var(--panel);padding:clamp(18px,3vw,32px)}
.tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:var(--r-pill);margin-bottom:24px}
.tabs button{min-height:44px;padding-inline:20px;border-radius:var(--r-pill);font-weight:700;color:var(--ink-2);transition:background-color var(--dur-hover) var(--ease-settle),color var(--dur-hover) var(--ease-settle)}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--disc)}
.tabpanel{animation:fade .45s var(--ease-settle)}
.tabpanel p{color:var(--ink-2);max-width:40em;margin-top:18px}
.bins{width:100%;height:clamp(110px,16vw,190px)}
.bins rect{fill:var(--forest-bright);rx:3px;transform-box:fill-box;transform-origin:50% 100%;animation:grow .7s var(--ease-settle) both}
.bins rect.hot{fill:var(--mint)}
.bins rect:nth-child(odd){animation-delay:.05s}
@keyframes grow{from{transform:scaleY(.15);opacity:0}to{transform:none;opacity:1}}

/* receipt */
.receipt{border:1px solid var(--rule);border-radius:var(--r-glass);background:var(--panel);overflow:hidden}
.rline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px clamp(18px,3vw,32px);border-bottom:1px solid var(--rule)}
.rline:last-child{border-bottom:0}
.rline h3{font-size:20px;margin-bottom:4px}
.rline p{color:var(--ink-2);font-size:14px;max-width:34em}
.val{font-size:clamp(18px,2.4vw,26px);font-weight:800;white-space:nowrap}
.split{display:grid;gap:12px;margin-top:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.split{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rules{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cta{position:relative;text-align:center;border:1px solid var(--rule);border-radius:var(--r-glass);padding:clamp(40px,7vw,88px) var(--gutter);background:radial-gradient(60% 90% at 50% 0%,color-mix(in srgb,var(--forest) 55%,transparent),transparent 70%),var(--panel);display:flex;flex-direction:column;align-items:center}
.cta img{border-radius:50%;margin-bottom:22px}
.cta p{color:var(--ink-2);margin-top:14px;max-width:30em}
.cta .hero-ctas{justify-content:center}
.cta .hero-ctas .btn{opacity:1;animation:none}

.foot{border-top:1px solid var(--rule);padding-block:40px}
.foot-in{display:grid;gap:20px}
@media(min-width:900px){.foot-in{grid-template-columns:auto 1fr;align-items:center}.foot-in .fine{grid-column:1/-1}}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;color:var(--ink-2);font-weight:600}
.foot-nav a:hover{color:var(--ink)}

@media(max-width:560px){
  .brand-word{font-size:18px}
  .hero{padding-top:28px}
  .btn{width:100%;justify-content:center}
  .hero-ctas{width:100%}
  .pill{height:44px}
}

/* reduced motion: final state, zero motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-title .w,.hero-in,.hero-lede,.hero-ctas .btn,.hero-tiles,.tabpanel{opacity:1;transform:none}
  .js [data-reveal]{opacity:1;transform:none}
  .ticker{overflow-x:auto}
  .ticker-track{transform:none}
  .skel::after,.skel-tick::after{display:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}