/* VelaSite Theme */
:root {
  --midnight: #0d1117;
  --deep-slate: #161b22;
  --card: #1c2333;
  --card-hover: #21293a;
  --amber: #f59e0b;
  --amber-dim: #d97706;
  --amber-glow: rgba(245,158,11,0.12);
  --cream: #faf8f5;
  --slate-light: #e2e8f0;
  --slate-mid: #94a3b8;
  --slate-dark: #475569;
  --border: rgba(255,255,255,0.07);
  --border-amber: rgba(245,158,11,0.25);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--midnight);
  color: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: 'Outfit', 'DM Sans', sans-serif; }

/* Responsive */
@media (max-width: 768px) {
  .container { padding: 0 20px !important; }

  /* Hero grid collapses to single column */
  section > .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* 3-column grids become 1 column */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 2-column feature grid becomes 1 column */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Outcomes 2-col -> 1-col */
  section:last-of-type .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* stat grid */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:24px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  nav .container > div:last-child { display: none; }
}

@media (max-width: 480px) {
  h1, .font-display { letter-spacing: -0.02em !important; }
  section { padding: 60px 0 !important; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--midnight); }
::-webkit-scrollbar-thumb { background: var(--card-hover); border-radius: 3px; }

/* Selection */
::selection { background: var(--amber); color: var(--midnight); }

/* Links */
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}