/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Hero Gradient ────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #064E3B 0%, #059669 35%, #10B981 60%, #34D399 80%, #F59E0B 100%);
}

/* ── Decorative Blobs ─────────────────────────────────── */
.hero-blob { will-change: transform; }
.blob-1 { animation: float1 8s ease-in-out infinite; }
.blob-2 { animation: float2 10s ease-in-out infinite; }
.blob-3 { animation: float3 12s ease-in-out infinite; }

@keyframes float1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.05); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-25px, 15px) scale(1.08); }
}
@keyframes float3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-48%, -52%) scale(1.04); }
}

/* ── Scroll Hint ──────────────────────────────────────── */
.scroll-hint { opacity: 0.7; }
.scroll-hint:hover { opacity: 1; }

/* ── Card Hover ───────────────────────────────────────── */
.card-hover { will-change: transform; }
.card-hover > div { will-change: transform, box-shadow; }

/* ── Reveal Animations (progressive enhancement) ─────── */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hidden state — applied via JS only */
.reveal.hidden-reveal {
  opacity: 0;
  transform: translateY(30px);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .hero-blob { animation: none; }
  .scroll-hint { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Mobile Menu ──────────────────────────────────────── */
#mobileMenu.open .menu-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
#mobileMenu.open .menu-line:nth-child(2) { opacity: 0; }
#mobileMenu.open .menu-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-link { transition: color 0.2s; }
.mobile-link:hover { color: #059669; }

/* ── Navbar Scroll State ──────────────────────────────── */
#navbar.scrolled {
  background: rgba(253, 248, 240, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(5, 78, 59, 0.08);
}