/* ── Base & Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* ── Navbar ── */
#navbar { transition: background 0.3s, box-shadow 0.3s, padding 0.3s; }
#navbar.scrolled { background: rgba(253,251,247,0.95); backdrop-filter: blur(12px); box-shadow: 0 1px 20px rgba(27,67,50,0.08); }

/* ── Mobile Menu ── */
#mobileMenu { transition: max-height 0.35s ease, opacity 0.3s ease; }
#mobileMenu.open { max-height: 400px; opacity: 1; }
#mobileMenu.closed { max-height: 0; opacity: 0; }

/* ── Geo Shapes ── */
.geo-shape { position: absolute; opacity: 0.6; }

.circle-1 {
    width: 420px; height: 420px;
    background: rgba(149,214,150,0.12);
    border-radius: 50%;
    top: -100px; right: -100px;
    animation: float 8s ease-in-out infinite;
}
.circle-2 {
    width: 200px; height: 200px;
    background: rgba(255,107,107,0.1);
    border-radius: 50%;
    bottom: 15%; left: 5%;
    animation: float 6s ease-in-out infinite reverse;
}
.circle-3 {
    width: 120px; height: 120px;
    background: rgba(245,166,35,0.12);
    border-radius: 50%;
    top: 30%; left: 10%;
    animation: float 7s ease-in-out infinite;
}
.triangle-1 {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid rgba(196,181,253,0.1);
    top: 20%; right: 15%;
    transform: rotate(25deg);
    animation: spin-slow 20s linear infinite;
}
.square-1 {
    width: 80px; height: 80px;
    background: rgba(149,214,150,0.08);
    bottom: 25%; right: 8%;
    transform: rotate(45deg);
    animation: spin-slow 15s linear infinite reverse;
}
.ring-1 {
    width: 160px; height: 160px;
    border: 3px solid rgba(255,255,255,0.06);
    border-radius: 50%;
    top: 40%; right: 5%;
    animation: pulse-ring 4s ease-in-out infinite;
}
.dot-cluster {
    top: 60%; left: 3%;
    display: grid;
    grid-template-columns: repeat(4, 10px);
    gap: 12px;
}
.dot-cluster span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}
.dot-cluster span:nth-child(odd) { background: rgba(245,166,35,0.1); }
.dot-cluster span:nth-child(3n) { background: rgba(149,214,150,0.12); }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulse-ring {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* ── Scroll Reveal ── */
.scroll-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: no-preference) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
    }
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Menu Cards ── */
.menu-card { perspective: 800px; }
@media (prefers-reduced-motion: no-preference) {
    .menu-card { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
    .menu-card.revealed { opacity: 1; transform: translateY(0); }
}

/* ── Gallery ── */
.gallery-item { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .gallery-item { opacity: 0; transform: scale(0.97); transition: opacity 0.5s ease, transform 0.5s ease; }
    .gallery-item.revealed { opacity: 1; transform: scale(1); }
}

/* ── Feature Cards ── */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
@media (prefers-reduced-motion: no-preference) {
    .feature-card { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease; }
    .feature-card.revealed { opacity: 1; transform: translateY(0); }
}

/* ── Utility ── */
::selection { background: rgba(149,214,150,0.3); }
</styles.css>
<sm-file path="script.js">
(function () {
    'use strict';

    // ── Navbar scroll effect ──
    const navbar = document.getElementById('navbar');
    let lastScroll = 0;

    function handleNavScroll() {
        const currentScroll = window.pageYOffset;
        if (currentScroll > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
        lastScroll = currentScroll;
    }
    window.addEventListener('scroll', handleNavScroll, { passive: true });

    // ── Mobile menu ──
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const menuIconOpen = document.getElementById('menuIconOpen');
    const menuIconClose = document.getElementById('menuIconClose');
    let menuOpen = false;

    menuBtn.addEventListener('click', function () {
        menuOpen = !menuOpen;
        if (menuOpen) {
            mobileMenu.classList.remove('closed');
            mobileMenu.classList.add('open');
            menuIconOpen.classList.add('hidden');
            menuIconClose.classList.remove('hidden');
        } else {
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('closed');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
        }
    });

    // Close mobile menu on link click
    document.querySelectorAll('.mobile-link, #mobileMenu a').forEach(function (link) {
        link.addEventListener('click', function () {
            menuOpen = false;
            mobileMenu.classList.remove('open');
            mobileMenu.classList.add('closed');
            menuIconOpen.classList.remove('hidden');
            menuIconClose.classList.add('hidden');
        });
    });

    // ── Scroll reveal (progressive enhancement) ──
    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (!prefersReducedMotion) {
        const revealElements = document.querySelectorAll('.scroll-reveal, .menu-card, .gallery-item, .feature-card');

        function revealOnScroll() {
            const windowHeight = window.innerHeight;
            revealElements.forEach(function (el) {
                const elementTop = el.getBoundingClientRect().top;
                const revealPoint = windowHeight * 0.88;
                if (elementTop < revealPoint) {
                    el.classList.add('revealed');
                }
            });
        }

        window.addEventListener('scroll', revealOnScroll, { passive: true });
        // Run once on load to catch elements already in view
        revealOnScroll();
    } else {
        // If reduced motion is preferred, show everything immediately
        document.querySelectorAll('.scroll-reveal, .menu-card, .gallery-item, .feature-card').forEach(function (el) {
            el.classList.add('revealed');
        });
    }

    // ── Contact form ──
    const contactForm = document.getElementById('contactForm');
    const successMsg = document.getElementById('successMsg');
    const btnText = document.getElementById('btnText');
    const btnArrow = document.getElementById('btnArrow');
    const btnSpinner = document.getElementById('btnSpinner');

    contactForm.addEventListener('submit', function (e) {
        e.preventDefault();

        // Show loading state
        btnText.textContent = 'Sending...';
        btnArrow.classList.add('hidden');
        btnSpinner.classList.remove('hidden');

        // Simulate send delay
        setTimeout(function () {
            contactForm.classList.add('hidden');
            successMsg.classList.remove('hidden');
            btnText.textContent = 'Send Message';
            btnArrow.classList.remove('hidden');
            btnSpinner.classList.add('hidden');
        }, 1200);
    });

    // ── Smooth scroll for anchor links (fallback for older browsers) ──
    document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
        anchor.addEventListener('click', function (e) {
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                e.preventDefault();
                const navHeight = navbar.offsetHeight;
                const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
                window.scrollTo({
                    top: targetPosition,
                    behavior: prefersReducedMotion ? 'auto' : 'smooth'
                });
            }
        });
    });
})();
</script>