/* ============================================================
   BASE – CSS-Variablen, Reset, Typografie, Animationen
   ============================================================ */

:root {
  --navy: #0D1F2D;
  --terra: #C45E3E;
  --terra-light: #D4724F;
  --warm: #F0C987;
  --cream: #F8F5EF;
  --white: #FFFFFF;
  --gray: #6B7280;
  --light: #F0F4F8;
  --border: #E5E7EB;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero h1, .hero-sub, .hero-actions, .hero-stats, .hero-visual {
    animation: none;
  }
}