/* Fonts, CSS variables, reset, body, ambient background, noise + grid overlay, scrollbar. */

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/outfit-300.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/outfit-400.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/outfit-500.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/outfit-600.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/outfit-700.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/outfit-800.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/space-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-mono-700.woff2) format('woff2'); }

/* ─── Reset & Variables ─────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-primary: #06060a;
  --bg-card: #0d0d14;
  --bg-card-hover: #111119;
  --bg-elevated: #16161f;
  --bg-deeper: #0a0a10;
  --border: #1e1e2a;
  --border-hover: #2d2d3f;
  --text-primary: #ededf0;
  --text-secondary: #8888a0;
  --text-muted: #55556a;
  --accent: #8b5cf6;
  --accent-bright: #a78bfa;
  --accent-dim: #6d28d9;
  --accent-glow: rgba(139, 92, 246, 0.15);
  --success: #22c55e;
  --success-dim: #16a34a;
  --danger: #ef4444;
  --warning: #f59e0b;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── Ambient Background ────────────────────────────────────── */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4; animation: orbFloat 20s ease-in-out infinite; }
.ambient-orb:nth-child(1) { width: 600px; height: 600px; background: radial-gradient(circle, #6d28d9 0%, transparent 70%); top: -200px; left: -100px; }
.ambient-orb:nth-child(2) { width: 500px; height: 500px; background: radial-gradient(circle, #4f46e5 0%, transparent 70%); bottom: -200px; right: -100px; animation-delay: -7s; }
.ambient-orb:nth-child(3) { width: 400px; height: 400px; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -14s; opacity: 0.2; }
@keyframes orbFloat { 0%, 100% { transform: translate(0,0) scale(1); } 25% { transform: translate(30px,-40px) scale(1.05); } 50% { transform: translate(-20px,20px) scale(0.95); } 75% { transform: translate(40px,30px) scale(1.02); } }

.noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); background-repeat: repeat; }

.grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(rgba(139,92,246,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.03) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%); }

/* ─── Animations (shared) ───────────────────────────────────── */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }