/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }

/* ── Nav state classes ────────────────────────────────────────────── */
#site-header.scrolled .nav-brand-text { color: #064E3B; }
#site-header.scrolled .nav-btn-bg { background: #D1FAE5; }
#site-header.scrolled .nav-link { color: #064E3B; }

/* ── Nav links ────────────────────────────────────────────────────── */
.nav-link {
  color: #064E3B;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  transition: background 0.2s, color 0.2s;
  font-size: 0.938rem;
}
.nav-link:hover { background: #D1FAE5; color: #047857; }

/* ── Mobile menu ──────────────────────────────────────────────────── */
#mobile-menu.open { opacity: 1; pointer-events: auto; }

/* ── Hero entrance (above the fold — always visible, no JS needed) ─ */
.hero-eyebrow { animation: fadeUp 0.8s ease both; }
.hero-title    { animation: fadeUp 0.8s 0.15s ease both; }
.hero-sub      { animation: fadeUp 0.8s 0.3s ease both; }
.hero-ctas     { animation: fadeUp 0.8s 0.45s ease both; }

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

/* ── Scroll reveal (below the fold only — progressive enhancement) ─ */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 3-D card tilt (progressive enhancement) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .card-3d {
    transform-style: preserve-3d;
    will-change: transform;
  }
}