:root{
  --bg: #070709;
  --card:#0f0f10;
  --muted: #9aa0a6;
  --accent:start(#b91c2c, #7b0020);
  --red: #c41e3a;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --container: 1120px;
  --gap: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(200,20,30,0.06), transparent), var(--bg);
  color:#e6e6e6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding:24px 12px;
}

/* layout */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(180deg, rgba(0,0,0,0.45), transparent);backdrop-filter: blur(6px);padding:10px 0;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:44px;height:44px}
.brand-name{font-weight:700;letter-spacing:1px}
.symbol{color:var(--red);font-weight:600;margin-left:6px;font-size:0.95rem}

/* nav */
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{color:#fff;background:var(--glass)}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px;border-radius:8px}

/* header actions */
.header-actions{display:flex;align-items:center;gap:10px}
#langSelect{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03);padding:6px;border-radius:8px}

/* hero */
.hero{padding:32px 0}
.hero-inner{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start}
.hero-content h1{font-size:3.2rem;color:var(--red);margin-bottom:6px;letter-spacing:2px}
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:18px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(90deg,#b91c2c,#7b0020);box-shadow:0 6px 18px rgba(183,27,42,0.14);border:0}
.hero-card{background:var(--card);padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{padding:10px;background:rgba(255,255,255,0.02);border-radius:8px}
.stat-label{display:block;color:var(--muted);font-size:0.85rem}
.stat-value{font-weight:700;font-size:1.05rem;color:#fff}

/* mini rows */
.mini-row{display:flex;justify-content:space-between;margin:6px 0}

/* sections */
.section{padding:28px 0}
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:12px;padding:20px;margin-bottom:18px;border:1px solid rgba(255,255,255,0.02)}
.token-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.token-info dt{color:var(--muted);font-size:0.9rem}
.token-info dd{font-weight:700;color:#fff;margin-top:6px}

/* roadmap */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.phase{background:rgba(255,255,255,0.02);padding:14px;border-radius:10px;border-left:6px solid rgba(255,255,255,0.02)}
.phase.done{border-left-color:#2e7d32}
.phase.progress{border-left-color:#f57c00}
.phase.future{border-left-color:#6a1b9a}
.phase h3{margin:0 0 8px;color:var(--red)}

/* footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);margin-top:32px;padding:18px 0;text-align:center;color:var(--muted)}

/* small */
.muted{color:var(--muted);font-size:0.85rem}

/* responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* accessibility focus */
a:focus, button:focus, select:focus { outline: 3px solid rgba(196,30,58,0.18); outline-offset: 2px; }