:root {
  --background: oklch(0.16 0.012 270);
  --foreground: oklch(0.97 0.005 270);
  --surface: oklch(0.19 0.014 270);
  --surface-elevated: oklch(0.225 0.016 270);
  --card: oklch(0.19 0.014 270);
  --primary: oklch(0.62 0.22 295);
  --primary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.23 0.014 270);
  --muted-foreground: oklch(0.68 0.02 270);
  --border: oklch(0.28 0.018 270);
  --destructive: oklch(0.62 0.24 25);
  --twitch: oklch(0.62 0.22 295);
  --youtube: oklch(0.6 0.24 25);
  --kick: oklch(0.78 0.21 145);
  --tiktok: oklch(0.7 0.18 350);
}
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% -10%, color-mix(in oklab, var(--twitch) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 30% at 100% 30%, color-mix(in oklab, var(--youtube) 8%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 30% at 0% 60%, color-mix(in oklab, var(--kick) 6%, transparent), transparent 70%);
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: 'Space Grotesk', Inter, sans-serif; letter-spacing: -0.02em; }
.text-twitch { color: var(--twitch); }
.text-youtube { color: var(--youtube); }
.text-kick { color: var(--kick); }
.text-tiktok { color: var(--tiktok); }
.bg-twitch { background-color: var(--twitch); }
.bg-youtube { background-color: var(--youtube); }
.bg-kick { background-color: var(--kick); }
.bg-tiktok { background-color: var(--tiktok); }
.gradient-text-platforms {
  background: linear-gradient(90deg, var(--twitch) 0%, var(--youtube) 50%, var(--kick) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.surface-card {
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
.grid-bg {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--foreground) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 30%, transparent 80%);
}
.shadow-glow-primary { box-shadow: 0 0 40px -8px var(--twitch); }
.shadow-elevated { box-shadow: 0 20px 60px -20px oklch(0 0 0 / 0.6); }
.shadow-card { box-shadow: 0 8px 30px -8px oklch(0 0 0 / 0.4); }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-pulse-dot { animation: pulseDot 1.5s ease-in-out infinite; }
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in { opacity: 1; transform: none; }