:root {
  --bg-base: #0d0f1a;
  --bg-surface: #131627;
  --bg-raised: #1a1d2e;
  --border-subtle: #1e2235;
  --border-accent: #2d3158;
  --accent-indigo: #6366f1;
  --accent-violet: #8b5cf6;
  --text-primary: #e2e8f0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-base);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent-indigo) 10%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: 'Inter', sans-serif;
}

.font-mono-custom {
  font-family: 'JetBrains Mono', monospace;
}

/* ── Hero ──────────────────────────────────────────── */

.hero-fade {
  background: radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--accent-indigo) 7%, transparent) 0%, transparent 70%);
}

/* ── Project cards ─────────────────────────────────── */

.card-glow {
  border: 1px solid var(--border-subtle);
}

.challenges-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.challenges-toggle .chevron {
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

.challenges-toggle.open .chevron {
  transform: rotate(90deg);
}

/* ── Nav ───────────────────────────────────────────── */

.nav-pill {
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}