/* ---------- Base ---------- */
:root{
  --bg:#0b0f10;
  --panel:#11161b;
  --muted:#7c8a96;
  --text:#e6edf3;
  --gold:#f5d061;
  --emerald:#34d399;
  --ring:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
.container{width:min(1100px,92%);margin:0 auto}
a{color:var(--emerald);text-decoration:none}
a:hover{opacity:.9}

/* ---------- Animated gradient backdrop under canvas ---------- */
body:before{
  content:"";
  position:fixed;inset:-20%;
  background: radial-gradient(1400px 800px at 12% 12%, #0e1b1f 0%, transparent 60%),
              radial-gradient(1400px 900px at 88% 18%, #122126 0%, transparent 60%);
  filter: blur(8px);
  z-index:-3;
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform: translate3d(0,0,0) scale(1)}
  100%{transform: translate3d(2%, -2%, 0) scale(1.02)}
}

/* Canvas particles sits under UI */
#bg{position:fixed;inset:0;z-index:-2;}

/* ---------- Nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0 8px 0;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:.5px}
.brand strong{color:var(--gold)}
.nav nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav nav a{color:var(--text);opacity:.9}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--ring);display:inline-block;font-weight:600}
.btn-fill{background:linear-gradient(135deg,var(--emerald),#22c55e);color:#071309;border:0}
.btn-line{background:transparent}
.telegram{display:none} /* keep hidden for now */

/* ---------- Hero ---------- */
.hero{padding:48px 0 10px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{background:#0e1318;border:1px solid var(--ring);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:12px}
h1{font-size: clamp(36px,6vw,62px);line-height:1.02;margin:0 0 12px}
h1 .muted{color:var(--muted);font-weight:800}
.lead{font-size: clamp(16px,2.4vw,20px);color:#cdd6dd;max-width:860px}
.hero-cta{display:flex;gap:12px;margin:20px 0 10px}
.badges{display:flex;gap:10px;flex-wrap:wrap;color:#9fb0bd;font-size:13px;margin-bottom:12px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.stat{background:#0e1318;border:1px solid var(--ring);padding:14px;border-radius:14px}
.stat small{display:block;color:var(--muted)}
.stat b{font-size:18px}

/* ---------- Panels ---------- */
.panel{margin:28px 0 8px;padding:18px;border:1px solid var(--ring);background:rgba(11,15,16,.55);backdrop-filter: blur(6px);border-radius:16px}
.panel h2{margin:0 0 10px;font-size:28px}
.tokencards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tokencards article{background:#0e1318;border:1px solid var(--ring);padding:14px;border-radius:12px}
.road{display:grid;gap:8px;margin:0;padding-left:18px}
.steps{display:grid;gap:8px;margin:0;padding-left:18px}
.note{color:#9fb0bd;margin-top:10px}

/* ---------- Footer ---------- */
.footer{padding:40px 0 70px;color:#9fb0bd}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .nav nav{display:none}
  .stats{grid-template-columns:1fr}
  .tokencards{grid-template-columns:1fr}
}

/* Respect user reduced motion */
@media (prefers-reduced-motion: reduce){
  body:before{animation:none}
}