:root {
  --bg: #07060f;
  --fg: #f2f0ff;
  --muted: #9a96b8;
  --line: #24213d;
  --card: #100e1f;
  --accent: #b9ff4a;
  --accent-2: #8f7bff;
  --radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 "Space Grotesk", system-ui, sans-serif;
  overflow-x: hidden;
}
#stars { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
.mono { font-family: "JetBrains Mono", monospace; }

.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px clamp(16px, 4vw, 48px);
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}
.logo { font-weight: 700; letter-spacing: .08em; display: flex; align-items: center; gap: 10px; }
.logo .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.nav nav { display: flex; gap: 28px; color: var(--muted); font-size: 14px; }
.nav nav a:hover { color: var(--fg); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #0b0b0b; font: 600 15px "Space Grotesk", sans-serif;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--accent); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn-ghost:hover { box-shadow: none; border-color: var(--muted); }

.hero {
  min-height: 92vh; display: grid; place-items: center; align-content: center;
  text-align: center; gap: 28px; padding: 64px 16px;
}
.planet { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }
.core {
  width: 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #0b0b0b;
  background: radial-gradient(circle at 30% 30%, #e4ffb0, var(--accent) 45%, #4c7a00);
  box-shadow: 0 0 80px -10px var(--accent);
}
.ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; animation: spin linear infinite; }
.ring span { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); }
.r1 { inset: 50px; animation-duration: 6s; }
.r2 { inset: 20px; animation-duration: 11s; animation-direction: reverse; }
.r3 { inset: -10px; animation-duration: 18s; }
.r3 span { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

h1 { font-size: clamp(40px, 8vw, 88px); line-height: 1; letter-spacing: -.03em; max-width: 12ch; }
h1 em { font-style: normal; color: var(--accent); }
.lead { color: var(--muted); max-width: 52ch; font-size: 18px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stats { list-style: none; display: flex; gap: clamp(24px, 6vw, 72px); margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.stats b { display: block; font-size: 32px; font-family: "JetBrains Mono", monospace; }
.stats span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }

.section { max-width: 1100px; margin: 0 auto; padding: 96px 16px; }
.section h2 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.02em; margin-bottom: 40px; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cards article, .steps li, .roadmap li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.cards article { transition: transform .3s, border-color .3s; }
.cards article:hover { transform: translateY(-4px); border-color: var(--accent-2); }
h3 { font-size: 20px; margin-bottom: 8px; }
.cards p, .steps p, .roadmap p { color: var(--muted); }

.tokenomics { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 48px; align-items: center; }
.donut { width: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 5; }
.donut .track { stroke: var(--line); }
.donut .seg { transition: stroke-dasharray 1.4s cubic-bezier(.2,.8,.2,1); }
.legend { list-style: none; display: grid; gap: 14px; }
.legend li { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.legend i { width: 12px; height: 12px; border-radius: 4px; }
.legend b { margin-left: auto; font-family: "JetBrains Mono", monospace; }

.roadmap { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.roadmap span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.roadmap .done { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.roadmap .done span { color: var(--accent); }
.roadmap .done span::after { content: " ✓"; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.steps b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-2); margin-bottom: 18px; }

footer { text-align: center; color: var(--muted); font-size: 13px; padding: 48px 16px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .nav nav { display: none; }
  .tokenomics { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ring { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}