/* ── Base ── */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Nav ── */
#nav.scrolled {
  background: rgba(253,251,247,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(47,168,102,0.08);
}
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #2FA866;
  border-radius: 1px;
  transition: width 0.2s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Hero ── */
.hero-gradient {
  background: linear-gradient(135deg, #146941 0%, #2FA866 35%, #54C988 55%, #BDF0D3 75%, #F5EDDA 100%);
}
.hero-blob {
  background: radial-gradient(circle, rgba(189,240,211,0.6) 0%, transparent 70%);
}
.hero-blob-1 { animation: float 8s ease-in-out infinite; }
.hero-blob-2 { animation: float 10s ease-in-out infinite reverse; }
.hero-blob-3 { animation: float 12s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── CTA Banner ── */
.cta-gradient {
  background: linear-gradient(135deg, #0C402A 0%, #146941 40%, #1D8752 70%, #2FA866 100%);
}

/* ── Cards ── */
.card { will-change: transform; }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal[data-reveal-state="hidden"] {
  opacity: 0;
  transform: translateY(24px);
}

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

/* ── Mobile Menu ── */
#mobileMenu { animation: slideDown 0.2s ease; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Utilities ── */
.no-underline { text-decoration: none; }
</styles.css>

<sm-file path="script.js">
(function () {
  'use strict';

  // ── Mobile Menu ──
  const menuBtn = document.getElementById('menuBtn');
  const mobileMenu = document.getElementById('mobileMenu');
  const iconOpen = document.getElementById('menuIconOpen');
  const iconClose = document.getElementById('menuIconClose');

  menuBtn.addEventListener('click', function () {
    const isOpen = !mobileMenu.classList.contains('hidden');
    mobileMenu.classList.toggle('hidden');
    iconOpen.classList.toggle('hidden');
    iconClose.classList.toggle('hidden');
    menuBtn.setAttribute('aria-expanded', !isOpen);
  });

  document.querySelectorAll('.mobile-link, #mobileMenu a').forEach(function (link) {
    link.addEventListener('click', function () {
      mobileMenu.classList.add('hidden');
      iconOpen.classList.remove('hidden');
      iconClose.classList.add('hidden');
      menuBtn.setAttribute('aria-expanded', 'false');
    });
  });

  // ── Navbar Scroll ──
  const nav = document.getElementById('nav');
  let lastScroll = 0;
  function onScroll() {
    const y = window.scrollY;
    nav.classList.toggle('scrolled', y > 60);
    lastScroll = y;
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  // ── Scroll Reveal (progressive enhancement) ──
  if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
    const reveals = document.querySelectorAll('.reveal');
    if (reveals.length) {
      reveals.forEach(function (el) { el.setAttribute('data-reveal-state', 'hidden'); });
      const observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
      reveals.forEach(function (el) { observer.observe(el); });
    }
  }

  // ── Contact Form ──
  const form = document.getElementById('contactForm');
  const success = document.getElementById('formSuccess');
  if (form) {
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      if (!form.checkValidity()) {
        form.reportValidity();
        return;
      }
      form.style.display = 'none';
      success.classList.remove('hidden');
    });
  }
})();