Fix mobile menu: add nav panel and wire up toggle button

The mobile toggle button (.site-mobile-toggle) had no corresponding nav
panel and the JS was targeting the old .mobile-menu-toggle selector.
Add a full-screen mobile nav overlay with all navigation links and
update the JS to use the correct selectors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: congwang-mk

_layouts/default.html

@@ -252,6 +252,71 @@
         display: block;
         border-radius: 1px;
     }
+    /* Mobile nav panel */
+    .site-mobile-nav {
+        display: none;
+        position: fixed;
+        top: 64px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(15, 23, 42, 0.98);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        z-index: 999998;
+        overflow-y: auto;
+    }
+    .site-mobile-nav.active {
+        display: block;
+    }
+    .site-mobile-nav-inner {
+        padding: 16px 20px 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+    .site-mobile-link {
+        display: block;
+        padding: 12px 16px;
+        font-size: 15px;
+        font-weight: 500;
+        color: rgba(255,255,255,0.6);
+        text-decoration: none;
+        border-radius: 4px;
+        transition: color 0.15s, background 0.15s;
+    }
+    .site-mobile-link:hover,
+    .site-mobile-link.active {
+        color: white;
+        background: rgba(255,255,255,0.06);
+    }
+    .site-mobile-cta {
+        display: block;
+        padding: 12px 20px;
+        font-size: 15px;
+        font-weight: 600;
+        color: #0f172a;
+        background: #e2a23b;
+        text-decoration: none;
+        border-radius: 4px;
+        text-align: center;
+        margin-top: 12px;
+    }
+    .site-mobile-cta:hover {
+        background: #f5b829;
+    }
+    .site-mobile-toggle.active span:nth-child(1) {
+        transform: rotate(45deg) translate(5px, 5px);
+    }
+    .site-mobile-toggle.active span:nth-child(2) {
+        opacity: 0;
+    }
+    .site-mobile-toggle.active span:nth-child(3) {
+        transform: rotate(-45deg) translate(5px, -5px);
+    }
+    .site-mobile-toggle span {
+        transition: transform 0.2s, opacity 0.2s;
+    }
     @media (max-width: 900px) {
         .site-nav { display: none; }
         .site-mobile-toggle { display: flex; }
@@ -329,6 +394,23 @@
                 <span></span>
             </button>
         </div>
+
+        <div class="site-mobile-nav">
+            <div class="site-mobile-nav-inner">
+                <a href="/" class="site-mobile-link {% if page.url == '/' %}active{% endif %}">Home</a>
+                <a href="/products/platform.html" class="site-mobile-link {% if page.url == '/products/platform.html' %}active{% endif %}">Multikernel Platform</a>
+                <a href="/products/enclaves.html" class="site-mobile-link {% if page.url == '/products/enclaves.html' %}active{% endif %}">Multikernel Enclaves</a>
+                <a href="/products/resilience.html" class="site-mobile-link {% if page.url == '/products/resilience.html' %}active{% endif %}">Multikernel Resilience</a>
+                <a href="/technology.html" class="site-mobile-link {% if page.url == '/technology.html' %}active{% endif %}">Technology</a>
+                <a href="/roadmap.html" class="site-mobile-link {% if page.url == '/roadmap.html' %}active{% endif %}">Roadmap</a>
+                <a href="/faq.html" class="site-mobile-link {% if page.url == '/faq.html' %}active{% endif %}">FAQ</a>
+                <a href="/getting-started.html" class="site-mobile-link {% if page.url == '/getting-started.html' %}active{% endif %}">Getting Started</a>
+                <a href="/blog/" class="site-mobile-link {% if page.url contains '/blog' or page.layout == 'post' %}active{% endif %}">Blog</a>
+                <a href="/about.html" class="site-mobile-link {% if page.url == '/about.html' %}active{% endif %}">About</a>
+                <a href="https://github.com/multikernel" target="_blank" class="site-mobile-link">GitHub</a>
+                <a href="https://calendar.app.google/nc1upkqQoUeoukdD9" target="_blank" rel="noopener noreferrer" class="site-mobile-cta">Schedule a Demo</a>
+            </div>
+        </div>
     </header>
 
     {{ content }}
@@ -435,8 +517,8 @@ <h4>Resources</h4>
             }
 
             // Mobile menu functionality
-            const mobileToggle = document.querySelector('.mobile-menu-toggle');
-            const mobileNav = document.querySelector('.mobile-nav');
+            const mobileToggle = document.querySelector('.site-mobile-toggle');
+            const mobileNav = document.querySelector('.site-mobile-nav');
             const body = document.body;
 
             if (mobileToggle && mobileNav) {
@@ -446,6 +528,15 @@ <h4>Resources</h4>
                     body.classList.toggle('mobile-nav-open');
                 });
 
+                // Close mobile nav when tapping a link
+                mobileNav.querySelectorAll('a').forEach(function(link) {
+                    link.addEventListener('click', function() {
+                        mobileNav.classList.remove('active');
+                        mobileToggle.classList.remove('active');
+                        body.classList.remove('mobile-nav-open');
+                    });
+                });
+
                 // Close mobile nav when clicking outside
                 document.addEventListener('click', function(e) {
                     if (!mobileNav.contains(e.target) && !mobileToggle.contains(e.target)) {