:root {
  --bg: #070807;
  --bg-2: #0b0c0b;
  --paper: #e9eee8;
  --muted: #929a92;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.22);
  --amber: #f2a900;
  --amber-2: #ffd267;
  --amber-dim: rgba(242,169,0,.12);
  --max: 1240px;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--paper);
  font-family: "Space Grotesk", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--amber); color: #0b0b0a; }

.svg-filters { position: absolute; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.shell { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; position: relative; }

.ambient { position: fixed; inset: 0; pointer-events: none; z-index: -2; overflow: hidden; background:
  radial-gradient(circle at 52% -10%, rgba(255,185,33,.06), transparent 32%),
  linear-gradient(180deg, #050605 0%, #080908 46%, #050605 100%); }
.grain { position:absolute; inset:-100%; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation: grain 9s steps(10) infinite; }
.grid { position:absolute; inset:0; opacity:.15; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.glow { position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(90px); opacity:.12; background:var(--amber); }
.glow-a { top:30vh; left:-330px; }
.glow-b { top:72vh; right:-380px; }
.bubble { position:absolute; width:var(--s); height:var(--s); left:var(--x); bottom:-40px; border:1px solid rgba(255,197,65,.17); border-radius:50%; box-shadow: inset 0 0 8px rgba(255,220,130,.08); animation: rise var(--d) linear infinite; animation-delay:var(--delay); opacity:.25; }

.site-header { position: sticky; top: 0; z-index: 20; height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 max(20px, calc((100vw - var(--max))/2)); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(7,8,7,.72); backdrop-filter: blur(18px); }
.brand-mini { text-decoration:none; font-size:24px; letter-spacing:-.08em; width:max-content; }
.nav { display:flex; gap:30px; }
.nav a { text-decoration:none; color:#aeb5ae; font-size:13px; letter-spacing:.06em; text-transform:uppercase; transition:.2s ease; }
.nav a:hover { color:white; }
.micro-button { justify-self:end; text-decoration:none; font:500 12px "IBM Plex Mono", monospace; border:1px solid var(--line-strong); border-radius:999px; padding:9px 13px; transition:.2s ease; }
.micro-button:hover { border-color:var(--amber); color:var(--amber-2); }

.hero { padding-top:74px; }
.hero-kicker { font-size:11px; color:#707870; letter-spacing:.08em; margin-bottom:14px; text-transform:uppercase; }
.hero-visual { position:relative; overflow:hidden; aspect-ratio:3/1; min-height:280px; display:flex; align-items:center; justify-content:center; background:#030403; }
.hero-visual img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.03); }
.scanline { position:absolute; inset:0; background:linear-gradient(180deg, transparent 0 49%, rgba(255,255,255,.025) 50%, transparent 51%); background-size:100% 5px; mix-blend-mode:screen; opacity:.5; }
.hero-copy { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; padding:52px 0 28px; align-items:end; }
.eyebrow { margin:0 0 18px; font-size:11px; color:var(--amber-2); letter-spacing:.13em; }
.hero-title { font-size:clamp(52px,7vw,104px); line-height:.86; letter-spacing:-.08em; margin:0; max-width:850px; }
.hero-title span { color:transparent; -webkit-text-stroke:1px rgba(232,238,232,.46); }
.hero-sidecopy p { color:#aeb5ae; line-height:1.7; font-size:15px; max-width:540px; margin:0 0 26px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:999px; text-decoration:none; font:500 12px "IBM Plex Mono", monospace; letter-spacing:.02em; transition:.2s ease; }
.button-primary { background:var(--amber); color:#111; border:1px solid var(--amber); }
.button-primary:hover { background:var(--amber-2); transform:translateY(-1px); }
.button-ghost { border:1px solid var(--line-strong); background:rgba(255,255,255,.025); }
.button-ghost:hover { border-color:rgba(242,169,0,.75); color:var(--amber-2); }

.ticker { display:flex; gap:42px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; color:#717971; font-size:10px; white-space:nowrap; }
.ticker span::before { content:"•"; color:var(--amber); margin-right:42px; }

.glass-panel { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 24px 70px rgba(0,0,0,.18); }
.section { padding:128px 0 30px; }
.section-index { position:absolute; left:-72px; top:136px; writing-mode:vertical-rl; transform:rotate(180deg); color:#4f554f; font-size:10px; letter-spacing:.14em; }
.section-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:58px; align-items:center; }
.section-title { font-size:clamp(42px,5vw,76px); line-height:.92; letter-spacing:-.065em; margin:0 0 30px; }
.lead { font-size:22px!important; line-height:1.45!important; color:#d7ddd7!important; max-width:680px; }
.copy-block p { color:#929a92; line-height:1.75; font-size:15px; max-width:660px; }
.copy-block .muted, .muted { color:#697069; }

.knit { font-family:"Space Grotesk", sans-serif; font-weight:700; filter:url(#woolEdge); background-image: repeating-linear-gradient(128deg, #f0f3ef 0 2px, #cfd5ce 2px 4px, #f0f3ef 4px 6px); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(255,255,255,.04); }

.coin-stage { min-height:560px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; isolation:isolate; }
.coin-stage::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(242,169,0,.2), transparent 68%); filter:blur(24px); z-index:-1; }
.coin-sticker { width:min(370px,70vw); aspect-ratio:1; border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 40% 28%, #1f211f, #0b0c0b 58%, #050605 100%); border:1px solid rgba(255,205,98,.38); box-shadow:0 0 0 10px rgba(255,255,255,.02), 0 34px 90px rgba(0,0,0,.45), inset 0 0 70px rgba(242,169,0,.08); transform:rotate(-4deg); }
.coin-sticker img { width:54%; height:54%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)); }
.coin-ring { position:absolute; inset:17px; border:1px dashed rgba(255,202,83,.32); border-radius:50%; display:flex; align-items:flex-start; justify-content:center; padding-top:9px; color:#bb8b29; font-size:9px; letter-spacing:.24em; }
.coin-ticker { position:absolute; bottom:54px; right:40px; font-size:26px; color:var(--amber-2); }
.coin-meta { position:absolute; inset:auto 22px 20px 22px; display:flex; justify-content:space-between; font-size:9px; color:#666e66; }

.token-head, .roadmap-head, .chart-head { display:grid; grid-template-columns:1fr .8fr; gap:60px; align-items:end; margin-bottom:34px; }
.token-intro { color:#939b93; line-height:1.7; margin:0 0 8px; }
.token-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.data-card { min-height:210px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; }
.data-card .label { color:#6e766e; font-size:10px; }
.data-card strong { font-size:28px; letter-spacing:-.04em; }
.data-card small { color:#717871; font-size:12px; line-height:1.45; }
.data-card .contract { font-size:12px; line-height:1.45; word-break:break-all; color:#c5cbc5; }
.copy-ca { align-self:flex-start; border:0; border-bottom:1px solid #555c55; background:transparent; color:#878f87; padding:0 0 3px; font:500 10px "IBM Plex Mono", monospace; cursor:pointer; }
.copy-ca:hover { color:var(--amber-2); border-color:var(--amber); }
.token-note { margin-top:12px; min-height:78px; padding:18px 20px; display:flex; gap:16px; align-items:center; }
.note-mark { width:30px; height:30px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; font:600 12px "IBM Plex Mono", monospace; color:var(--amber); flex:none; }
.token-note p { margin:0; color:#7d857d; font-size:12px; line-height:1.6; }
.token-note code, .chart-overlay code { color:#bcc4bc; }

.roadmap-head p { line-height:1.7; }
.roadmap-line { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.road-step { min-height:265px; padding:26px 24px; border-right:1px solid var(--line); position:relative; }
.road-step:last-child { border-right:0; }
.road-step::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; top:-4px; left:24px; background:#2b302b; border:1px solid #515851; }
.road-step.active::before { background:var(--amber); border-color:var(--amber); box-shadow:0 0 18px rgba(242,169,0,.55); }
.road-num { color:#5d655d; font-size:11px; }
.road-step h3 { font-size:19px; letter-spacing:-.03em; margin:88px 0 10px; }
.road-step p { color:#747c74; line-height:1.6; font-size:13px; margin:0; }

.chart-status { justify-self:end; display:flex; gap:9px; align-items:center; color:#707770; font-size:10px; }
.dot { width:7px; height:7px; border-radius:50%; background:#6f5841; box-shadow:0 0 14px rgba(242,169,0,.2); }
.chart-status.live .dot { background:var(--amber); box-shadow:0 0 14px rgba(242,169,0,.5); }
.chart-shell { min-height:540px; overflow:hidden; position:relative; background:#080908; }
#dexFrame { width:100%; min-height:540px; border:0; background:#080908; }
.chart-placeholder { min-height:540px; position:relative; overflow:hidden; }
#ghostChart { position:absolute; inset:0; width:100%; height:100%; opacity:.72; }
.chart-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:34px; background:linear-gradient(to top, rgba(7,8,7,.92), rgba(7,8,7,.08) 72%); }
.chart-overlay > span { color:#737b73; font-size:10px; }
.chart-overlay h3 { font-size:28px; margin:8px 0 8px; letter-spacing:-.04em; }
.chart-overlay p { color:#7f877f; max-width:650px; line-height:1.6; font-size:13px; margin:0 0 18px; }

.social-section { padding-bottom:120px; }
.social-panel { border-top:1px solid var(--line); padding-top:38px; }
.social-links { margin-top:34px; }
.social-links a { display:grid; grid-template-columns:1fr auto; align-items:center; min-height:88px; border-bottom:1px solid var(--line); text-decoration:none; color:#a8afa8; font-size:clamp(20px,3vw,42px); letter-spacing:-.04em; transition:.18s ease; }
.social-links a:first-child { border-top:1px solid var(--line); }
.social-links a:hover { color:white; padding-left:14px; border-color:rgba(242,169,0,.45); }
.social-links b { color:var(--amber); font-size:.65em; }

.closing { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); min-height:360px; margin-bottom:80px; background:#040504; }
.closing img { width:100%; height:100%; min-height:360px; object-fit:cover; opacity:.25; filter:blur(.2px) saturate(.8); }
.closing::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,8,7,.88), rgba(7,8,7,.25), rgba(7,8,7,.68)); }
.closing-copy { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:54px; }
.closing-copy span { font-size:9px; letter-spacing:.12em; color:#747b74; }
.closing-copy h2 { font-size:clamp(42px,6vw,82px); line-height:.9; margin:16px 0 0; letter-spacing:-.07em; }

.footer { min-height:120px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:30px; color:#646b64; font-size:10px; }
.footer p:last-child { max-width:520px; text-align:right; line-height:1.5; }

@keyframes grain { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)} 20%{transform:translate(-7%,3%)} 30%{transform:translate(5%,-2%)} 40%{transform:translate(-3%,6%)} 50%{transform:translate(-6%,2%)} 60%{transform:translate(6%,0)} 70%{transform:translate(0,6%)} 80%{transform:translate(3%,-5%)} 90%{transform:translate(-4%,3%)} }
@keyframes rise { to { transform:translateY(-120vh); opacity:0; } }

@media (max-width: 980px) {
  .site-header { grid-template-columns:1fr auto; }
  .nav { display:none; }
  .hero-copy, .section-grid, .token-head, .roadmap-head, .chart-head { grid-template-columns:1fr; gap:24px; }
  .hero-title { font-size:clamp(50px,11vw,86px); }
  .token-grid { grid-template-columns:repeat(2,1fr); }
  .roadmap-line { grid-template-columns:repeat(2,1fr); }
  .road-step:nth-child(2) { border-right:0; }
  .road-step:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .chart-status { justify-self:start; }
  .section-index { display:none; }
}

@media (max-width: 640px) {
  .shell { width:min(100% - 24px, var(--max)); }
  .site-header { height:64px; padding:0 12px; }
  .hero { padding-top:40px; }
  .hero-visual { min-height:180px; border-radius:18px; }
  .hero-copy { padding-top:34px; }
  .hero-title { font-size:50px; }
  .section { padding-top:92px; }
  .section-title { font-size:42px; }
  .coin-stage { min-height:440px; }
  .token-grid { grid-template-columns:1fr; }
  .data-card { min-height:150px; }
  .roadmap-line { grid-template-columns:1fr; }
  .road-step, .road-step:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); min-height:190px; }
  .road-step:last-child { border-bottom:0; }
  .road-step h3 { margin-top:48px; }
  .chart-shell, #dexFrame, .chart-placeholder { min-height:470px; }
  .chart-overlay { padding:22px; }
  .social-links a { min-height:72px; }
  .closing { min-height:470px; }
  .closing img { min-height:470px; object-position:center; }
  .closing-copy { padding:28px; }
  .footer { align-items:flex-start; flex-direction:column; justify-content:center; }
  .footer p:last-child { text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .grain, .bubble { animation:none; }
}