stable state

components/Navigation.tsx

@@ -30,9 +30,9 @@ export default function Navigation() {
         right: 0,
         zIndex: 100,
         transition: "background 0.4s ease, border-color 0.4s ease",
-        background: scrolled ? "rgba(7,8,10,0.94)" : "transparent",
-        backdropFilter: scrolled ? "blur(16px)" : "none",
-        borderBottom: scrolled ? "1px solid #1c1f26" : "1px solid transparent",
+        background: "rgba(7,8,10,0.94)",
+        backdropFilter: "blur(16px)",
+        borderBottom: "1px solid #1c1f26",
       }}
     >
       <nav
@@ -127,16 +127,22 @@ export default function Navigation() {
 
         {/* Mobile toggle */}
         <button
-          onClick={() => setOpen(!open)}
-          className="md:hidden flex flex-col"
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          className="mobile-menu-btn"
           style={{
             background: "none",
             border: "none",
             cursor: "pointer",
-            padding: "8px",
+            padding: "12px",
+            display: "flex",
+            flexDirection: "column",
             gap: "5px",
+            touchAction: "manipulation",
           }}
           aria-label="Toggle menu"
+          aria-expanded={open}
+          aria-controls="mobile-nav-menu"
         >
           <span
             style={{
@@ -171,13 +177,9 @@ export default function Navigation() {
         </button>
       </nav>
 
-      {/* Hover underline via CSS */}
-      <style>{`
-        nav a:hover .nav-underline { transform: scaleX(1) !important; }
-      `}</style>
-
       {/* Mobile menu */}
       <div
+        id="mobile-nav-menu"
         style={{
           background: "rgba(7,8,10,0.98)",
           borderTop: "1px solid #1c1f26",