:root {
  --bg: #0b0f17;
  --panel: rgba(255,255,255,0.06);
  --txt: #e6e8ee;
  --muted: #a9afc3;
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --ok: #22c55e;
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 80% -10%, rgba(136,84,255,.2), transparent 60%), var(--bg);
  color: var(--txt);
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.header { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:36px; height:36px; }
.wordmark { font-weight:800; font-size:20px; letter-spacing:0.2px; }

.nav a { color: var(--txt); text-decoration:none; margin-left:18px; opacity:.9; }
.nav .btn.small { padding:8px 12px; font-size:12px; }

.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; padding:60px 0 30px; }
.hero h1 { font-size: clamp(32px, 6vw, 52px); margin: 0 0 8px; }
.subtitle { color: var(--muted); font-size: 16px; margin: 6px 0 16px; }
.pill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); padding:3px 8px; border-radius: 999px; color:#061018; font-weight:700; }
.cta-row { display:flex; gap:12px; margin-top: 12px; }
.status { margin-top: 14px; color: var(--muted); font-size: 13px; display:flex; align-items:center; gap:8px; }
.dot { width:8px; height:8px; border-radius:999px; display:inline-block; }
.dot.live { background: var(--ok); box-shadow:0 0 10px var(--ok); }

.btn { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#061018; font-weight:700; padding:12px 18px; border-radius: 12px; border:none; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.outline { background: transparent; color: var(--txt); border:1px solid #2b3242; }
.btn.small { padding:8px 10px; }

.glass { background: var(--panel); border:1px solid rgba(255,255,255,0.08); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.hero-card { padding: 18px; }
.swap-head { font-weight:700; margin-bottom: 10px; }
.swap-row { display:grid; grid-template-columns: 1fr 160px; gap:10px; align-items:end; margin-bottom:10px; }
.swap-row label { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.swap-mid { text-align:center; opacity:.6; }
.swap-actions { display:flex; align-items:center; gap:10px; }
.swap-actions .mini { font-size:12px; color:var(--muted); }

input { width: 100%; padding: 12px 12px; border-radius: 12px; border:1px solid #293243; background: #0f1420; color: var(--txt); outline:none; }
input:disabled { opacity:.7; cursor:not-allowed; }

.features .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:16px; }
.card { background: var(--panel); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:16px; }
.card h3 { margin:0 0 8px; }

.roadmap ol { margin: 0; padding-left: 20px; color: var(--muted); }
.community .badges { display:flex; gap:12px; flex-wrap:wrap; }
.badge { background: #101727; padding:10px 14px; border-radius: 999px; border:1px solid #243049; color: var(--txt); text-decoration:none; }

.footer { display:flex; align-items:center; justify-content:space-between; padding: 24px 0 40px; color: var(--muted); font-size: 14px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .swap-row { grid-template-columns: 1fr; }
  .nav { display:none; }
}