Add responsive hamburger menu for mobile navigation

- Replace multi-row nav with hamburger menu on mobile
- Nav scrolls away on mobile (not fixed)
- Smooth animated hamburger icon (3 lines → X)
- Mobile menu slides down with all navigation links
- Reduced hero padding since nav no longer overlaps
- Cleaner single-row mobile header

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: sinelaw

homepage/index.html

@@ -124,6 +124,74 @@
             filter: invert(1);
         }
 
+        /* Hamburger Menu */
+        .hamburger {
+            display: none;
+            flex-direction: column;
+            gap: 5px;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            padding: 8px;
+        }
+
+        .hamburger span {
+            width: 24px;
+            height: 2px;
+            background: var(--accent-green);
+            transition: all 0.3s;
+            border-radius: 2px;
+        }
+
+        .hamburger.active span:nth-child(1) {
+            transform: rotate(45deg) translate(7px, 7px);
+        }
+
+        .hamburger.active span:nth-child(2) {
+            opacity: 0;
+        }
+
+        .hamburger.active span:nth-child(3) {
+            transform: rotate(-45deg) translate(7px, -7px);
+        }
+
+        .mobile-menu {
+            display: none;
+            position: fixed;
+            top: 60px;
+            left: 0;
+            right: 0;
+            background: var(--bg-darker);
+            border-bottom: 1px solid var(--border-color);
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+            z-index: 99;
+        }
+
+        .mobile-menu.active {
+            max-height: 400px;
+        }
+
+        .mobile-menu-content {
+            display: flex;
+            flex-direction: column;
+            padding: 16px;
+            gap: 8px;
+        }
+
+        .mobile-menu-content a {
+            padding: 12px 16px;
+            border-radius: 6px;
+            color: var(--text-light);
+            font-size: 0.9rem;
+            transition: background 0.2s;
+        }
+
+        .mobile-menu-content a:hover {
+            background: var(--bg-card);
+        }
+
         /* Hero Section */
         .hero {
             min-height: 100vh;
@@ -754,17 +822,34 @@
 
         /* Responsive */
         @media (max-width: 768px) {
-            .nav-links {
-                gap: 16px;
+            nav {
+                position: relative;
             }
 
-            .nav-links > a[href^="#"] {
+            .nav-container {
+                height: 60px;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                padding: 0 16px;
+            }
+
+            .nav-logo {
+                width: auto;
+            }
+
+            .nav-links {
                 display: none;
             }
 
-            .btn-github {
-                padding: 6px 12px;
-                font-size: 0.8rem;
+            .hamburger {
+                display: flex;
+            }
+
+            .mobile-menu {
+                display: block;
+                position: absolute;
+                top: 60px;
             }
 
             #version-badge {
@@ -790,7 +875,7 @@
             }
 
             .hero {
-                padding: 60px 16px 24px;
+                padding: 40px 16px 24px;
                 min-height: auto;
                 justify-content: flex-start;
             }
@@ -897,6 +982,11 @@
             <a href="#" class="nav-logo">
                 >_ Fresh <span id="version-badge"></span>
             </a>
+            <button class="hamburger" onclick="toggleMobileMenu()" aria-label="Menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
             <div class="nav-links">
                 <a href="#features">Features</a>
                 <a href="#install">Install</a>
@@ -914,6 +1004,18 @@
         </div>
     </nav>
 
+    <!-- Mobile Menu -->
+    <div class="mobile-menu" id="mobile-menu">
+        <div class="mobile-menu-content">
+            <a href="#features" onclick="toggleMobileMenu()">Features</a>
+            <a href="#install" onclick="toggleMobileMenu()">Install</a>
+            <a href="docs/">Docs</a>
+            <a href="https://github.com/sinelaw/fresh/blob/master/CHANGELOG.md" target="_blank">Changelog</a>
+            <a href="https://discord.gg/qUutBj9t" target="_blank">Discord</a>
+            <a href="https://github.com/sinelaw/fresh" target="_blank">GitHub</a>
+        </div>
+    </div>
+
     <!-- Hero Section -->
     <section class="hero">
         <div class="hero-content">
@@ -1239,6 +1341,13 @@ <h2>What People Are Saying</h2>
     </footer>
 
     <script>
+        function toggleMobileMenu() {
+            const menu = document.getElementById('mobile-menu');
+            const hamburger = document.querySelector('.hamburger');
+            menu.classList.toggle('active');
+            hamburger.classList.toggle('active');
+        }
+
         function copyCode(elementId, btn) {
             const text = document.getElementById(elementId).textContent;
             navigator.clipboard.writeText(text).then(() => {