:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-surface: #1a1a2e;
  --accent-1: #7c3aed;
  --accent-1-rgb: 124, 58, 237;
  --accent-2: #06b6d4;
  --accent-2-rgb: 6, 182, 212;
  --accent-green: #10b981;
  --accent-green-rgb: 16, 185, 129;
  --accent-orange: #f59e0b;
  --text-primary: #e4e4e7;
  --text-muted: #71717a;
  --text-dim: #3f3f46;
  --border: rgba(124, 58, 237, 0.12);
  --border-light: rgba(124, 58, 237, 0.25);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --max-width: 1200px;
  --nav-height: 64px;
  --glow-purple: 0 0 40px rgba(124, 58, 237, 0.15);
  --glow-cyan: 0 0 40px rgba(6, 182, 212, 0.1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
code { font-family: var(--font-mono); }

::selection {
  background: rgba(var(--accent-1-rgb), 0.3);
  color: var(--text-primary);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--text-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }

.section-title {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 48px;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.section-comment {
  color: var(--accent-green);
}

.section-title::before {
  content: '> ';
  color: var(--accent-1);
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

#bg-grid {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(var(--accent-1-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-1-rgb), 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

#bg-grid::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-1-rgb), 0.08) 0%, transparent 60%);
}