:root {
  --bg: #080d14;
  --bg-alt: #0c1220;
  --bg-card: #111927;
  --panel: #0f1a28;
  --line: rgba(255,255,255,0.09);
  --line2: rgba(255,255,255,0.15);
  --text: #e8eff8;
  --text-dim: #8899aa;
  --text-muted: #8fa3bc;
  --muted: #8fa3bc;
  --muted2: #3d5068;
  --sub: #7a90a8;
  --green: #00e57a;
  --green-dim: rgba(0,229,122,0.12);
  --green-glow: rgba(0,229,122,0.22);
  --green-text: #00e57a;
  --amber: #f5a623;
  --amber-dim: rgba(245,166,35,0.11);
  --border: #1a2332;
  --radius: 12px;
  --font-head: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Figtree', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
button, input, textarea, select { font: inherit; }
a:hover { text-decoration: none; }
img { max-width: 100%; }
ul { list-style: none; }
html, body { max-width: 100vw; overflow-x: hidden; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; width: 100%; }
.logo { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--text); text-decoration: none; }
.logo-green { color: var(--green); }

@media (max-width: 768px) {
  .container { padding: 0 16px; }
}