/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Reveal (progressive enhancement — hidden by default, shown via JS) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback: always show content if JS is disabled */
@media not all and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 1; transform: none; }
}

/* ── Floating cards ── */
@media (prefers-reduced-motion: no-preference) {
  .floating-card-1 { animation: float-slow 5s ease-in-out infinite; }
  .floating-card-2 { animation: float-medium 4s ease-in-out infinite 0.5s; }
  .floating-card-3 { animation: float-fast 3.5s ease-in-out infinite 1s; }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(0deg); }
}
@keyframes float-medium {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(0deg); }
}
@keyframes float-fast {
  0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

/* ── Navbar scroll state ── */
#navbar.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 20px rgba(0,0,0,0.07);
}

/* ── Utility ── */
.font-heading { font-family: 'Nunito', sans-serif; }
.font-body { font-family: 'Quicksand', sans-serif; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }

/* ── Mobile link hover ── */
.mobile-link {
  display: block;
  border-radius: 0.75rem;
  transition: background 0.15s, color 0.15s;
}
.mobile-link:hover { background: #f0fdfa; color: #0d9488; }

/* ── Smooth scroll offset for fixed nav ── */
section[id] { scroll-margin-top: 80px; }

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
  h1 { font-size: 2.75rem !important; }
  h2 { font-size: 2.25rem !important; }
  .floating-card-1, .floating-card-2, .floating-card-3 { display: none; }
}