Fix mobile menu: solid background, styled Connect button, proper z-index

- Move mobile menu to end of body for correct stacking order
- Add body.menu-open class to hide page layers behind menu
- Style Connect button in mobile menu with green border
- Reduce menu gap and add overflow-y for smaller screens

Co-Authored-By: systemthreat <systemthreat@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: SystemThreat

index.html

@@ -1364,22 +1364,6 @@ <h2>14. Contact</h2>
     <div class="grid-overlay"></div>
     <div class="vignette"></div>
 
-    <!-- ============================================
-         MOBILE MENU
-         ============================================ -->
-    <div class="mobile-menu" id="mobileMenu">
-        <button class="mobile-menu-close" onclick="closeMobileMenu()">
-            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
-        </button>
-        <a href="whoami.html">WhoAmI</a>
-        <a href="#loselijo" onclick="closeMobileMenu()">Los Elijo</a>
-        <a href="#products" onclick="closeMobileMenu()">Products</a>
-        <a href="#credentials" onclick="closeMobileMenu()">Credentials</a>
-        <a href="contact.html">Contact</a>
-        <a href="careers.html">Careers</a>
-        <a href="https://app.skyknet.com" class="connect-btn" onclick="closeMobileMenu()">Connect</a>
-    </div>
-
     <!-- ============================================
          MAIN CONTENT
          ============================================ -->
@@ -2267,8 +2251,8 @@ <h2 class="cta-title reveal">
             if (e.key === 'Escape') { document.querySelectorAll('.modal-overlay.visible').forEach(m => m.classList.remove('visible')); document.body.style.overflow = ''; }
         });
 
-        function openMobileMenu() { document.getElementById('mobileMenu').classList.add('visible'); document.body.style.overflow = 'hidden'; playClickSound(); }
-        function closeMobileMenu() { document.getElementById('mobileMenu').classList.remove('visible'); document.body.style.overflow = ''; playClickSound(); }
+        function openMobileMenu() { document.getElementById('mobileMenu').classList.add('visible'); document.body.classList.add('menu-open'); document.body.style.overflow = 'hidden'; playClickSound(); }
+        function closeMobileMenu() { document.getElementById('mobileMenu').classList.remove('visible'); document.body.classList.remove('menu-open'); document.body.style.overflow = ''; playClickSound(); }
     </script>
 
     <!-- ============================================
@@ -2437,5 +2421,19 @@ <h2 class="cta-title reveal">
             });
         });
     </script>
+
+    <!-- Mobile Menu (last in body to ensure it paints above all layers) -->
+    <div class="mobile-menu" id="mobileMenu">
+        <button class="mobile-menu-close" onclick="closeMobileMenu()">
+            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+        <a href="whoami.html">WhoAmI</a>
+        <a href="#loselijo" onclick="closeMobileMenu()">Los Elijo</a>
+        <a href="#products" onclick="closeMobileMenu()">Products</a>
+        <a href="#credentials" onclick="closeMobileMenu()">Credentials</a>
+        <a href="contact.html">Contact</a>
+        <a href="careers.html">Careers</a>
+        <a href="https://app.skyknet.com" class="connect-btn" onclick="closeMobileMenu()">Connect</a>
+    </div>
 </body>
 </html>

nav.css

@@ -53,6 +53,7 @@
     font-weight: 700;
     letter-spacing: 0.3em;
     color: var(--cyan);
+    white-space: nowrap;
 }
 
 .logo-text-sub {
@@ -66,7 +67,7 @@
 
 .nav-links {
     display: flex;
-    gap: 64px;
+    gap: 32px;
     list-style: none;
 }
 
@@ -142,12 +143,18 @@
     display: none;
     position: fixed;
     inset: 0;
-    z-index: 9999;
-    background: rgba(0, 0, 0, 0.97);
+    z-index: 99999;
+    background: #000000;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 40px;
+    gap: 28px;
+    padding: 80px 24px 40px;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0.3s;
+    isolation: isolate;
+    overflow-y: auto;
 }
 
 .mobile-menu a {
@@ -164,6 +171,20 @@
     color: var(--cyan, #00ff00);
 }
 
+.mobile-menu .connect-btn {
+    font-size: 14px;
+    color: var(--cyan, #00ff00);
+    border: 1px solid var(--cyan, #00ff00);
+    padding: 14px 36px;
+    margin-top: 20px;
+    transition: background 0.3s, color 0.3s;
+}
+
+.mobile-menu .connect-btn:hover {
+    background: var(--cyan, #00ff00);
+    color: #000;
+}
+
 .mobile-menu-close {
     position: absolute;
     top: 32px;
@@ -184,6 +205,35 @@
     visibility: visible;
 }
 
+/* Hide page layers when mobile menu is open */
+body.menu-open #webgl,
+body.menu-open .overlay,
+body.menu-open .vignette,
+body.menu-open .grid-overlay,
+body.menu-open .content {
+    visibility: hidden;
+}
+
+/* Connect Button */
+.connect-btn {
+    font-family: 'Space Mono', monospace;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.3em;
+    text-transform: uppercase;
+    color: var(--cyan, #00ff00);
+    text-decoration: none;
+    border: 1px solid var(--cyan, #00ff00);
+    padding: 10px 24px;
+    transition: background 0.3s, color 0.3s;
+    white-space: nowrap;
+}
+
+.connect-btn:hover {
+    background: var(--cyan, #00ff00);
+    color: #000;
+}
+
 /* Responsive */
 @media (max-width: 1024px) {
     .nav { padding: 24px 32px; }
@@ -192,6 +242,7 @@
 @media (max-width: 768px) {
     .nav { padding: 12px 16px; }
     .nav-links { display: none; }
+    .connect-btn.desktop { display: none; }
     .mobile-menu-btn { display: flex; }
     .mobile-menu { display: flex; }
 }