@font-face{font-family:"SG";src:url("assets/SpaceGrotesk-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JBM";src:url("assets/JetBrainsMono-var.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#0a0f0b; --bg2:#101711; --line:#1f2b21; --ink:#e9f2ea; --mute:#8fa392;
  --g:#19e01a; --g2:#0b5d0c; --red:#e8322a; --card:#0e1510;
  --px:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 "SG",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.mono{font-family:"JBM",ui-monospace,monospace}
b{color:var(--g);font-weight:700}

/* ticker tape */
.tape{background:var(--g);color:#06100a;overflow:hidden;white-space:nowrap;font:700 12px/28px "JBM",monospace;letter-spacing:.04em;height:28px}
.tape-track{display:inline-block;padding-left:100%;animation:tape 38s linear infinite}
.tape-track span{margin-right:42px}
@keyframes tape{to{transform:translateX(-100%)}}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,40px);background:rgba(10,15,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img:first-child{width:40px;height:40px;image-rendering:pixelated;border:2px solid var(--g)}
.brand-wm{height:26px;width:auto}
.nav-links{display:flex;gap:26px}
.nav-links a{text-decoration:none;color:var(--mute);font-weight:500;font-size:15px}
.nav-links a:hover{color:var(--g)}
.nav-cta{display:flex;align-items:center;gap:10px}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);color:var(--ink);background:var(--bg2)}
.icon-btn:hover{border-color:var(--g);color:var(--g)}

/* buttons: pixel-stepped corners */
.btn{--c:var(--g);display:inline-flex;align-items:center;gap:10px;font:700 15px/1 "SG",sans-serif;text-decoration:none;cursor:pointer;border:0;padding:12px 18px;color:#06100a;background:var(--c);
  clip-path:polygon(0 var(--px),var(--px) var(--px),var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)));
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:transform .08s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(2px)}
.btn-lg{padding:16px 22px;font-size:17px}
.btn-ghost-ca{--c:#1a241c;color:var(--ink);max-width:100%;min-width:0}
.btn-ghost-ca .ca-label{color:var(--g);font-family:"JBM",monospace;font-size:13px}
.btn-ghost-ca .ca-text{font:500 14px "JBM",monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:300px}
.btn-ghost-ca .ca-state{font:700 12px "JBM",monospace;background:var(--g);color:#06100a;padding:4px 7px;flex:none}
.btn-ghost-ca.copied .ca-state{background:#fff}

/* hero */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero picture,.hero-bg{position:absolute;inset:0;width:100%;height:100%}
.hero-bg{object-fit:cover;object-position:70% 50%;image-rendering:pixelated}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,8,.94) 0%,rgba(6,10,8,.78) 38%,rgba(6,10,8,0) 72%)}
.hero-in{position:relative;z-index:1;padding:64px clamp(16px,6vw,72px);max-width:720px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px "JBM",monospace;color:var(--g);border:1px solid var(--g2);padding:6px 10px;background:rgba(25,224,26,.06);margin-bottom:22px}
.dot{width:8px;height:8px;background:var(--g);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
h1{font:700 clamp(42px,7.4vw,92px)/.95 "SG",sans-serif;letter-spacing:-.035em;margin-bottom:22px}
h1 em{font-style:normal;color:var(--g)}
.lede{font-size:clamp(17px,1.6vw,20px);color:#cfdccf;max-width:560px;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero-note{font-size:14px;color:var(--mute)}
.hero-note a{color:var(--g)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stat{padding:26px clamp(16px,3vw,32px);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.stat:last-child{border-right:0}
.stat .k{font:600 12px "JBM",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.stat .v{font:700 clamp(26px,3vw,38px)/1.1 "SG",sans-serif;color:var(--g);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.stat .s{font-size:13px;color:var(--mute)}

/* sections */
section{padding:clamp(56px,8vw,96px) clamp(16px,5vw,56px)}
.stats{padding:0}
.sec-h{font:700 clamp(30px,4vw,48px)/1 "SG",sans-serif;letter-spacing:-.03em;margin-bottom:36px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:var(--card);border:1px solid var(--line);padding:0 0 24px;position:relative;overflow:hidden}
.step img{width:100%;aspect-ratio:1;object-fit:cover;image-rendering:pixelated;border-bottom:1px solid var(--line)}
.step .n{position:absolute;top:12px;left:12px;font:700 13px "JBM",monospace;background:#06100a;color:var(--g);padding:5px 8px}
.step h3{font:700 22px/1.2 "SG",sans-serif;margin:20px 22px 8px}
.step p{margin:0 22px;color:#bccbbd;font-size:15px}

.split{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;padding-top:0}
.board,.chart{padding-top:0}
.panel{background:var(--card);border:1px solid var(--line);padding:22px;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-h h2{font:700 22px "SG",sans-serif;letter-spacing:-.01em}
.badge{font:600 11px "JBM",monospace;text-transform:uppercase;letter-spacing:.08em;color:#ffcf3f;border:1px solid #6a5513;padding:4px 7px;white-space:nowrap}
.badge.live{color:var(--g);border-color:var(--g2)}

.feed{list-style:none;display:flex;flex-direction:column;gap:6px}
.feed li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;background:var(--bg2);border-left:3px solid var(--g);font-size:14px;animation:slide .35s ease-out}
.feed .t{font:500 12px "JBM",monospace;color:var(--mute)}
.feed .m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .m b{font-family:"JBM",monospace}
.feed .usd{font:600 13px "JBM",monospace;color:var(--g)}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.wallet img{width:140px;height:140px;image-rendering:pixelated;border:2px solid var(--line);margin-bottom:16px}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv dt{color:var(--mute)}
.kv dd{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font:600 11px "JBM",monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid #162018;font-family:"JBM",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.r{text-align:right}
tbody tr:nth-child(-n+3) td:first-child{color:var(--g);font-weight:700}
tbody tr:hover{background:var(--bg2)}
.fine{font-size:13px;color:var(--mute);margin-top:14px}

.chart-box{position:relative;height:460px;background:var(--bg2);border:1px solid var(--line)}
.chart-box iframe{width:100%;height:100%;border:0}
.chart-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--mute);text-align:center;padding:16px}
.chart-empty img{width:120px;height:120px;image-rendering:pixelated;opacity:.85}

.faq{max-width:880px;margin:0 auto;padding-top:0}
details{border:1px solid var(--line);background:var(--card);margin-bottom:10px}
summary{cursor:pointer;list-style:none;padding:18px 22px;font:600 17px "SG",sans-serif;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"JBM",monospace;color:var(--g);font-size:20px;line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 22px 20px;color:#bccbbd}
details a{color:var(--g)}

.stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;border-top:1px solid var(--line)}
.stickers img{width:100%;aspect-ratio:1;object-fit:cover;image-rendering:pixelated}

.foot{padding:40px clamp(16px,5vw,56px) 56px;border-top:1px solid var(--line);display:grid;gap:18px}
.foot>img{width:auto;height:28px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--g);text-decoration:none;font-weight:600}
.disclaimer{font-size:12px;color:#66786a;max-width:820px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--g);color:#06100a;font:700 14px "JBM",monospace;padding:10px 16px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px){
  .nav-links{display:none}
  .steps{grid-template-columns:1fr 1fr}
  .steps .step:last-child{grid-column:1/-1}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .brand-wm{height:20px}
  .nav .btn-buy{padding:10px 12px;font-size:14px}
  .hero{min-height:auto;align-items:flex-end}
  .hero-bg{object-position:78% 50%}
  .hero-shade{background:linear-gradient(0deg,rgba(6,10,8,.97) 0%,rgba(6,10,8,.85) 55%,rgba(6,10,8,.35) 100%)}
  .hero-in{padding:180px 16px 40px}
  .hero-actions .btn{width:100%;justify-content:center}
  .btn-ghost-ca .ca-text{max-width:none;flex:1}
  .steps{grid-template-columns:1fr}
  .stat .v{font-size:24px}
  .feed li{grid-template-columns:1fr auto}
  .feed .t{grid-column:1/-1}
  .feed .m{white-space:normal}
  th:nth-child(3),td:nth-child(3){display:none}
  th,td{padding:10px 8px}
  .chart-box{height:380px}
  .stickers{grid-template-columns:1fr 1fr}
  .wallet img{width:110px;height:110px}
}
@media (prefers-reduced-motion:reduce){
  .tape-track,.dot,.feed li{animation:none}
  html{scroll-behavior:auto}
}
