/* --- CSS VARIABLES --- */
:root {
  --clr-bg: #060608;
  --clr-bg2: #0d0d14;
  --clr-bg3: #111121;
  --clr-surface: #13131f;
  --clr-surface2: #1a1a2e;
  --clr-border: rgba(140, 80, 255, 0.18);

  --clr-purple: #9d4edd;
  --clr-purple-light: #c77dff;
  --clr-purple-neon: #bf5fff;
  --clr-blue: #00b4d8;
  --clr-blue-neon: #00e5ff;
  --clr-blue-light: #90e0ef;
  --clr-success: #22c55e;
  --clr-danger: #ef4444;

  --clr-text: #e8e8f0;
  --clr-text-dim: #8888aa;
  --clr-text-muted: #555570;

  --glow-purple: 0 0 15px rgba(157, 78, 221, 0.6), 0 0 40px rgba(157, 78, 221, 0.25);
  --glow-blue: 0 0 15px rgba(0, 180, 216, 0.6), 0 0 40px rgba(0, 180, 216, 0.25);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  --transition: 0.25s ease;
  --header-h: 96px;

  --font-head: 'Orbitron', monospace;
  --font-body: 'Inter', sans-serif;
}

@media (max-width: 768px) {
  :root { --header-h: 80px; }
}

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-purple); border-radius: 3px; }

/* UTILITY */
.hidden { display: none !important; }
/* --- GLOBAL OVERFLOW FIXES --- */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

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