*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #080810;
  --bg2: #0a0d18;
  --cyan: #00f5ff;
  --orange: #ff6b00;
  --red: #ff2244;
  --green: #00ff88;
  --yellow: #ffd22e;
  --purple: #b366ff;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── BACKGROUND ─── */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,245,255,0.13) 0%, transparent 38%),
    radial-gradient(circle at 85% 15%, rgba(255,107,0,0.10) 0%, transparent 28%),
    radial-gradient(circle at 12% 75%, rgba(0,255,136,0.07) 0%, transparent 28%),
    linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px);
  background-size: auto, auto, auto, 64px 64px, 64px 64px;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,245,255,0.2); border-radius: 3px; }