/* ── RESET & BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.6;
}
h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-light); }

/* ── ANIMATION UTILITIES ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-up           { animation: fadeUp .45s ease both; }
.fade-up.delay-1   { animation-delay: .1s; }
.fade-up.delay-2   { animation-delay: .2s; }

/* ── REDUCED MOTION ─────────────────────────────────────────────────
   Respect users who ask the OS to minimise animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}