@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
        
        /*
        ========================================
        Base & Page Styles
        ========================================
        */
        *, *::before, *::after { box-sizing: border-box; }
        
        html {
            /* This is the key for smooth scrolling */
            scroll-behavior: smooth;
            /* Add padding to the top to offset the sticky navbar height */
            scroll-padding-top: var(--navbar-height);
        }

body { margin: 0; font-family: var(--font-family-sans-serif); }
        ul { list-style: none; margin: 0; padding: 0; }
        a { text-decoration: none; }
        
        .page-section {
            min-height: 100vh;
            display: flex; flex-direction: column; justify-content: center;
            align-items: center; text-align: center;
            padding: 2rem; border-bottom: 1px solid var(--color-border);
        }
        .page-section h1 { font-size: 3rem; }

/*
        ========================================
        Main Navbar Structure
        ========================================
        */
        .navbar {
            position: sticky; top: 0; z-index: 1000;
            height: var(--navbar-height); display: flex; align-items: center;
            background-color: var(--color-background); box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .navbar__container {
            display: flex; justify-content: space-between; align-items: center;
            width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem;
        }
        .navbar__brand { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); }
        .navbar__toggle { display: block; border: none; background: transparent; cursor: pointer; }
        .navbar__menu { display: none; } /* Handled by JS on mobile */

.mobile-menu {
            display: none;
            position: fixed; 
            top: var(--navbar-height); 
            left: 0;
            width: 100%;
            background-color: var(--color-background);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .mobile-menu.is-active { display: block; }
        .mobile-menu li:not(:last-child) { border-bottom: 1px solid #eeeeee; }
        .mobile-menu a { display: block; padding: 1.25rem 1.5rem; color: var(--color-text-secondary); }

/* Style for the currently active link */
        .nav-link.is-active {
            color: var(--color-primary);
            font-weight: 700;
        }

/*
        ========================================
        Desktop Navbar Styles
        ========================================
        */
        @media (min-width: 992px) {
            .navbar__toggle, .mobile-menu { display: none !important; }
            .navbar__menu {
                display: flex;
            }
            .navbar__list { display: flex; gap: 2rem; }
            .nav-link { color: var(--color-text-secondary); font-weight: 500; position: relative; padding-bottom: 5px; }
            .nav-link:hover { color: var(--color-primary); }

/* Add an underline to the active desktop link */
            .nav-link.is-active::after {
                content: '';
                position: absolute;
                bottom: 0; left: 0;
                width: 100%;
                height: 3px;
                background-color: var(--color-primary);
            }
        }
    </style>
</head>
<body>

<header class="navbar">
        <div class="navbar__container">
            <a href="#home" class="navbar__brand">Land.io</a>
            <button class="navbar__toggle" id="navbarToggle" aria-label="Open menu">&#x2630;</button>
            <nav class="navbar__menu" id="desktopMenu">
                <ul class="navbar__list">
                    <li><a href="#home" class="nav-link">Home</a></li>
                    <li><a href="#features" class="nav-link">Features</a></li>
                    <li><a href="#pricing" class="nav-link">Pricing</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

<div class="mobile-menu" id="mobileMenu">
        <ul>
            <li><a href="#home" class="nav-link">Home</a></li>
            <li><a href="#features" class="nav-link">Features</a></li>
            <li><a href="#pricing" class="nav-link">Pricing</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
        </ul>
    </div>
    
    <main>
        <section id="home" class="page-section"><h1>Home Section</h1></section>
        <section id="features" class="page-section" style="background-color: #f9f9f9;"><h1>Features Section</h1></section>
        <section id="pricing" class="page-section"><h1>Pricing Section</h1></section>
        <section id="contact" class="page-section" style="background-color: #f9f9f9;"><h1>Contact Section</h1></section>
    </main>

if (sections.length && navLinks.length) {
            const observerOptions = {
                root: null, // relative to the viewport
                rootMargin: '0px',
                // Trigger when 50% of the section is visible
                threshold: 0.5 
            };

// Observe each section
            sections.forEach(section => {
                observer.observe(section);
            });
        }
    });
    </script>
</body>
</html>