:root {
  --bg: #06060a;
  --bg-elevated: #0e0e14;
  --surface: #14141c;
  --text: #f4f4f8;
  --text-muted: #9a9aad;
  --accent: #6c5ce7;
  --accent-2: #00cec9;
  --accent-glow: rgba(108, 92, 231, 0.45);
  --border: rgba(255, 255, 255, 0.08);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --nav-height: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  background: var(--surface);
  border-radius: 4px;
  color: var(--accent-2);
}

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

.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0.35;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
}

.text-link {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}