From 6bedd9aef942a0eb7e457cbbcb8a1e1b4b687713 Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Sun, 24 Aug 2025 19:03:34 +0500
Subject: [PATCH] improved

---
 dist/css/styles.css | 660 ++++++++++++--------------------------------
 dist/index.html     | 100 ++++++-
 2 files changed, 281 insertions(+), 479 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index d576d08..af02dec 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -71,6 +71,25 @@ a:hover {
     transition: all var(--transition-fast)
 }
 
+/* Active state (scrollspy) */
+.nav-link.active {
+    color: var(--primary);
+    background: var(--bg-secondary);
+    font-weight: var(--font-semibold);
+}
+
+/* Improved hover/focus visible states */
+.nav-link:focus-visible, .btn:focus-visible, .referral-card:focus-visible, .speed-card:focus-visible, .status-card:focus-visible, .benefit-card:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px rgba(99 102 241 / .25);
+}
+
+.nav-link:hover:not(.active) {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
 .nav-link::before {
     transition: all var(--transition-fast)
 }
@@ -95,6 +114,128 @@ a:hover {
     transform: scale(1.05)
 }
 
+/* Mobile navigation toggle */
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    width: 48px;
+    height: 48px;
+    background: var(--bg-primary);
+    border: 2px solid var(--border-primary);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    position: relative;
+    transition: all var(--transition-fast);
+}
+.nav-toggle-bar {
+    width: 22px;
+    height: 2px;
+    background: var(--text-primary);
+    border-radius: 2px;
+    transition: all var(--transition-fast);
+    margin: 0 auto;
+}
+.nav-open .nav-toggle-bar:nth-child(1){transform: translateY(7px) rotate(45deg);}
+.nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
+.nav-open .nav-toggle-bar:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
+
+body:not(.js-ready) .header-nav {transition:none !important;}
+
+.nav-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,.4);
+    backdrop-filter: blur(2px);
+    z-index: 90;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity .3s;
+}
+.nav-open #navOverlay {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Mobile nav panel */
+@media (max-width: 900px) {
+    .nav-toggle {display: inline-flex;}
+    .header-nav {
+        position: fixed;
+        top: var(--header-height);
+        right: 0;
+        width: min(320px, 80%);
+        background: var(--bg-primary);
+        border-left: 1px solid var(--border-primary);
+        border-bottom: 1px solid var(--border-primary);
+        box-shadow: var(--shadow-lg);
+        padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-sm);
+        max-height: calc(100vh - var(--header-height));
+        overflow-y: auto;
+    transform: translate3d(100%,0,0);
+    transition: transform .4s cubic-bezier(.65,.05,.36,1);
+        z-index: 120;
+    }
+    .header-nav[data-open="true"] {
+    transform: translate3d(0,0,0);
+    }
+    body.nav-open {overflow:hidden;}
+    .nav-link {font-size: var(--text-base); padding: var(--space-md) var(--space-lg);}    
+    .nav-link::before {display:none;}
+    .dark-mode-toggle {order: 3;}
+}
+
+/* Hero meta badges */
+.hero-meta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-3xl);
+}
+.hero-badge {
+    --badge-bg: linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));
+    display: inline-flex;
+    align-items: center;
+    gap: .4ch;
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--text-xs);
+    font-weight: var(--font-medium);
+    letter-spacing: .05em;
+    text-transform: uppercase;
+    background: var(--badge-bg);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-full);
+    position: relative;
+    overflow: hidden;
+}
+.hero-badge::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%);
+    opacity: .4;
+    pointer-events: none;
+}
+
+/* Performance: hint GPU for frequently animated elements */
+.btn, .nav-toggle, .header-nav, .back-to-top, .benefit-card, .status-card, .referral-card, .speed-card {will-change: transform;}
+
+/* Reduced motion adjustments */
+@media (prefers-reduced-motion: reduce) {
+    .header-nav, .nav-toggle-bar, .btn::before, .benefit-card, .status-card, .referral-card, .speed-card, .back-to-top {transition: none !important; animation: none !important;}
+}
+
+@media (max-width: 600px) {
+    .hero-meta {margin-bottom: var(--space-2xl);}    
+    .hero-badge {font-size: 10px;}
+}
+
 [data-theme="dark"] .sun-icon {
     display: none
 }
@@ -779,56 +920,17 @@ select:focus {
 
         /* Footer */
         .site-footer {
-            background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+            background: var(--bg-secondary);
             border-top: 1px solid var(--border-primary);
-            padding: var(--space-7xl) 0 var(--space-5xl);
+            padding: var(--space-7xl) 0 var(--space-4xl);
             margin-top: auto;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .site-footer::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, var(--primary), transparent);
-            opacity: 0.6;
-        }
-
-        .site-footer::after {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, 
-                transparent 0%, 
-                rgba(129, 140, 248, 0.1) 25%, 
-                rgba(129, 140, 248, 0.3) 50%, 
-                rgba(129, 140, 248, 0.1) 75%, 
-                transparent 100%
-            );
-            animation: shimmer 3s ease-in-out infinite;
-        }
-
-        @keyframes shimmer {
-            0%, 100% { opacity: 0.3; }
-            50% { opacity: 0.8; }
         }
 
         .footer-content {
             display: grid;
             grid-template-columns: 2fr 1fr 1fr 1fr;
             gap: var(--space-5xl);
-            margin-bottom: var(--space-6xl);
-        }
-
-        .footer-section {
-            position: relative;
+            margin-bottom: var(--space-5xl);
         }
 
         .footer-section h4,
@@ -837,7 +939,6 @@ select:focus {
             font-size: var(--text-lg);
             font-weight: var(--font-semibold);
             color: var(--text-primary);
-            position: relative;
         }
 
         .footer-section h5 {
@@ -845,103 +946,50 @@ select:focus {
             margin-bottom: var(--space-lg);
         }
 
-        .footer-section h5::after {
-            content: '';
-            position: absolute;
-            bottom: -8px;
-            left: 0;
-            width: 24px;
-            height: 2px;
-            background: var(--primary);
-            border-radius: 1px;
-            opacity: 0.8;
-        }
-
         .footer-brand {
             display: flex;
             align-items: center;
             gap: var(--space-md);
-            margin-bottom: var(--space-xl);
-            transition: transform var(--transition-normal);
-        }
-
-        .footer-brand:hover {
-            transform: translateX(2px);
+            margin-bottom: var(--space-lg);
         }
 
         .footer-logo {
-            width: 36px;
-            height: 36px;
+            width: 32px;
+            height: 32px;
             color: var(--primary);
-            filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3));
-            transition: all var(--transition-normal);
-        }
-
-        .footer-brand:hover .footer-logo {
-            transform: rotate(-5deg) scale(1.05);
-            filter: drop-shadow(0 4px 8px rgba(129, 140, 248, 0.4));
         }
 
         .footer-brand h4 {
             margin: 0;
             font-size: var(--text-xl);
             font-weight: var(--font-bold);
-            background: linear-gradient(135deg, var(--text-primary), var(--primary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
         }
 
         .footer-description {
-            margin: 0 0 var(--space-2xl);
+            margin: 0 0 var(--space-xl);
             color: var(--text-secondary);
-            line-height: 1.7;
-            max-width: 320px;
-            font-size: var(--text-sm);
+            line-height: 1.6;
+            max-width: 300px;
         }
 
         .footer-stats {
             display: flex;
-            gap: var(--space-md);
+            gap: var(--space-lg);
             flex-wrap: wrap;
         }
 
         .footer-stat {
             display: inline-flex;
             align-items: center;
-            padding: var(--space-sm) var(--space-lg);
+            padding: var(--space-xs) var(--space-md);
             background: var(--bg-primary);
             border: 1px solid var(--border-primary);
             border-radius: var(--radius-full);
             font-size: var(--text-xs);
-            font-weight: var(--font-semibold);
-            color: var(--primary);
+            font-weight: var(--font-medium);
+            color: var(--text-secondary);
             text-transform: uppercase;
-            letter-spacing: 0.08em;
-            transition: all var(--transition-fast);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .footer-stat::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.1), transparent);
-            transition: left 0.6s ease;
-        }
-
-        .footer-stat:hover::before {
-            left: 100%;
-        }
-
-        .footer-stat:hover {
-            border-color: var(--primary);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
+            letter-spacing: 0.05em;
         }
 
         .footer-links {
@@ -952,72 +1000,23 @@ select:focus {
 
         .footer-links li {
             margin-bottom: var(--space-md);
-            transform: translateX(0);
-            transition: transform var(--transition-fast);
-        }
-
-        .footer-links li:hover {
-            transform: translateX(4px);
         }
 
         .footer-links a {
             color: var(--text-secondary);
             text-decoration: none;
-            transition: all var(--transition-fast);
+            transition: color var(--transition-fast);
             font-size: var(--text-sm);
-            line-height: 1.6;
-            display: inline-flex;
-            align-items: center;
-            gap: var(--space-xs);
-            position: relative;
-        }
-
-        .footer-links a::before {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 0;
-            width: 0;
-            height: 1px;
-            background: var(--primary);
-            transition: width var(--transition-fast);
+            line-height: 1.5;
         }
 
         .footer-links a:hover {
             color: var(--primary);
         }
 
-        .footer-links a:hover::before {
-            width: 100%;
-        }
-
-        .footer-links a[target="_blank"]::after {
-            content: '↗';
-            opacity: 0;
-            font-size: var(--text-xs);
-            transition: opacity var(--transition-fast);
-        }
-
-        .footer-links a[target="_blank"]:hover::after {
-            opacity: 1;
-        }
-
         .footer-bottom {
-            padding-top: var(--space-5xl);
+            padding-top: var(--space-4xl);
             border-top: 1px solid var(--border-primary);
-            position: relative;
-        }
-
-        .footer-bottom::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 60px;
-            height: 1px;
-            background: var(--primary);
-            opacity: 0.6;
         }
 
         .footer-bottom-content {
@@ -1025,193 +1024,65 @@ select:focus {
             justify-content: space-between;
             align-items: flex-end;
             gap: var(--space-3xl);
-            flex-wrap: wrap;
-        }
-
-        .footer-left {
-            flex: 1;
-            min-width: 250px;
         }
 
         .footer-left p {
             margin: 0 0 var(--space-sm);
             color: var(--text-tertiary);
             font-size: var(--text-sm);
-            line-height: 1.5;
         }
 
         .footer-disclaimer {
             font-size: var(--text-xs) !important;
             color: var(--text-muted) !important;
             font-style: italic;
-            opacity: 0.8;
         }
 
         .footer-left a {
             color: var(--primary);
             text-decoration: none;
-            font-weight: var(--font-medium);
-            transition: all var(--transition-fast);
         }
 
         .footer-left a:hover {
             text-decoration: underline;
-            text-shadow: 0 0 8px rgba(129, 140, 248, 0.4);
         }
 
         .footer-right {
             text-align: right;
-            flex-shrink: 0;
         }
 
         .footer-meta {
             display: flex;
             align-items: center;
             gap: var(--space-lg);
-            flex-wrap: wrap;
         }
 
         .last-updated {
             font-size: var(--text-xs);
             color: var(--text-muted);
-            opacity: 0.9;
         }
 
         .github-link {
             display: flex;
             align-items: center;
             justify-content: center;
-            width: 44px;
-            height: 44px;
+            width: 36px;
+            height: 36px;
             background: var(--bg-primary);
-            border: 2px solid var(--border-primary);
-            border-radius: var(--radius-lg);
+            border: 1px solid var(--border-primary);
+            border-radius: var(--radius-md);
             color: var(--text-secondary);
             text-decoration: none;
-            transition: all var(--transition-normal);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .github-link::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: linear-gradient(135deg, var(--primary), var(--primary-hover));
-            opacity: 0;
-            transition: opacity var(--transition-normal);
-        }
-
-        .github-link svg {
-            position: relative;
-            z-index: 1;
-            transition: transform var(--transition-normal);
+            transition: all var(--transition-fast);
         }
 
         .github-link:hover {
-            border-color: var(--primary);
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(129, 140, 248, 0.4);
-        }
-
-        .github-link:hover::before {
-            opacity: 1;
-        }
-
-        .github-link:hover svg {
-            color: white;
-            transform: scale(1.1);
-        }
-
-        .github-link:focus {
-            outline: 2px solid var(--primary);
-            outline-offset: 2px;
-        }        /* Additional Footer Enhancements */
-        .footer-section {
-            animation: fadeInUp 0.6s ease-out;
-            animation-fill-mode: both;
-        }
-
-        .footer-section:nth-child(1) { animation-delay: 0.1s; }
-        .footer-section:nth-child(2) { animation-delay: 0.2s; }
-        .footer-section:nth-child(3) { animation-delay: 0.3s; }
-        .footer-section:nth-child(4) { animation-delay: 0.4s; }
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Improved scrollbar for overflow areas */
-        .footer-section::-webkit-scrollbar {
-            width: 4px;
-        }
-
-        .footer-section::-webkit-scrollbar-track {
-            background: var(--bg-tertiary);
-            border-radius: 2px;
-        }
-
-        .footer-section::-webkit-scrollbar-thumb {
             background: var(--primary);
-            border-radius: 2px;
-        }
-
-        .footer-section::-webkit-scrollbar-thumb:hover {
-            background: var(--primary-hover);
-        }
-
-        /* Focus styles for better accessibility */
-        .footer-links a:focus {
-            outline: 2px solid var(--primary);
-            outline-offset: 2px;
-            border-radius: var(--radius-sm);
-        }
-
-        /* Enhanced mobile touch targets */
-        @media (max-width: 768px) {
-            .footer-links a {
-                padding: var(--space-sm) var(--space-md);
-                margin: var(--space-xs) 0;
-                border-radius: var(--radius-md);
-                transition: all var(--transition-fast);
-            }
-
-            .footer-links a:hover,
-            .footer-links a:focus {
-                background: var(--bg-primary);
-                transform: none;
-            }
-        }
-
-        /* Reduced motion for users who prefer it */
-        @media (prefers-reduced-motion: reduce) {
-            .footer-section,
-            .footer-brand,
-            .footer-logo,
-            .footer-stat,
-            .footer-links li,
-            .footer-links a,
-            .github-link {
-                animation: none !important;
-                transition: none !important;
-            }
-
-            .footer-brand:hover,
-            .footer-links li:hover,
-            .footer-stat:hover,
-            .github-link:hover {
-                transform: none !important;
-            }
-        }
-
-.back-to-top.visible {
+            color: white;
+            border-color: var(--primary);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }.back-to-top.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0)
@@ -1356,37 +1227,7 @@ select:focus {
     transition: all var(--transition-normal)
 }
 
-        /* Enhanced tablet view */
-        @media (max-width: 1024px) {
-            .footer-content {
-                grid-template-columns: 1fr 1fr;
-                gap: var(--space-4xl);
-            }
-
-            .footer-section:first-child {
-                grid-column: 1 / -1;
-                text-align: center;
-                border-bottom: 1px solid var(--border-primary);
-                padding-bottom: var(--space-3xl);
-                margin-bottom: var(--space-2xl);
-            }
-
-            .footer-brand {
-                justify-content: center;
-            }
-
-            .footer-description {
-                text-align: center;
-                max-width: 500px;
-                margin: 0 auto var(--space-xl);
-            }
-
-            .footer-stats {
-                justify-content: center;
-            }
-        }
-
-        @media (max-width:1024px) {
+@media (max-width:1024px) {
     .resources-categories {
         grid-template-columns: 1fr
     }
@@ -1453,63 +1294,11 @@ select:focus {
 
     .footer-content {
         grid-template-columns: repeat(2, 1fr);
-        gap: var(--space-3xl);
+        gap: var(--space-xl)
     }
 
-    .footer-section:first-child {
-        grid-column: 1 / -1;
-        text-align: center;
-        border-bottom: 1px solid var(--border-primary);
-        padding-bottom: var(--space-3xl);
-        margin-bottom: var(--space-xl);
-    }
-
-    .footer-brand {
-        justify-content: center;
-        margin-bottom: var(--space-lg);
-    }
-
-    .footer-brand h4 {
-        font-size: var(--text-lg);
-    }
-
-    .footer-description {
-        max-width: 400px;
-        margin: 0 auto var(--space-xl);
-        text-align: center;
-    }
-
-    .footer-stats {
-        justify-content: center;
-    }
-
-    .footer-section h5 {
-        text-align: center;
-        margin-bottom: var(--space-lg);
-    }
-
-    .footer-links {
-        text-align: center;
-    }
-
-    .footer-bottom-content {
-        flex-direction: column;
-        gap: var(--space-xl);
-        text-align: center;
-    }
-
-    .footer-left {
-        min-width: auto;
-    }
-
-    .footer-right {
-        text-align: center;
-    }
-
-    .footer-meta {
-        flex-direction: column;
-        gap: var(--space-md);
-        align-items: center;
+    .footer-brand h3 {
+        font-size: var(--text-lg)
     }
 }
 
@@ -1539,112 +1328,27 @@ select:focus {
 
     .footer-content {
         grid-template-columns: 1fr;
-        gap: var(--space-2xl);
-    }
-
-    .footer-section:first-child {
-        grid-column: 1;
-        border-bottom: 1px solid var(--border-primary);
-        padding-bottom: var(--space-2xl);
-        margin-bottom: var(--space-lg);
+        gap: var(--space-lg)
     }
 
     .footer-brand {
-        justify-content: center;
-        margin-bottom: var(--space-lg);
-    }
-
-    .footer-brand h4 {
-        font-size: var(--text-lg);
-    }
-
-    .footer-logo {
-        width: 32px;
-        height: 32px;
-    }
-
-    .footer-description {
-        max-width: 100%;
-        margin: 0 0 var(--space-lg);
         text-align: center;
-    }
-
-    .footer-stats {
-        justify-content: center;
-        gap: var(--space-sm);
-    }
-
-    .footer-stat {
-        padding: var(--space-xs) var(--space-md);
-        font-size: 10px;
-    }
-
-    .footer-section h5 {
-        text-align: center;
-        font-size: var(--text-sm);
-        margin-bottom: var(--space-md);
-    }
-
-    .footer-section h5::after {
-        left: 50%;
-        transform: translateX(-50%);
-        width: 20px;
+        padding-bottom: var(--space-lg);
+        border-bottom: 1px solid rgba(var(--text-rgb), 0.1);
+        margin-bottom: var(--space-lg)
     }
 
     .footer-links {
+        justify-content: center
+    }
+
+    .footer-links h4 {
         text-align: center;
-    }
-
-    .footer-links li {
-        margin-bottom: var(--space-sm);
-    }
-
-    .footer-links a {
-        font-size: var(--text-xs);
-        padding: var(--space-xs) 0;
-        display: inline-block;
+        margin-bottom: var(--space-md)
     }
 
     .footer-bottom {
-        padding-top: var(--space-3xl);
-    }
-
-    .footer-bottom-content {
-        flex-direction: column;
-        gap: var(--space-lg);
-        text-align: center;
-        align-items: center;
-    }
-
-    .footer-left {
-        min-width: auto;
-        order: 2;
-    }
-
-    .footer-left p {
-        font-size: var(--text-xs);
-        margin-bottom: var(--space-xs);
-    }
-
-    .footer-right {
-        text-align: center;
-        order: 1;
-    }
-
-    .footer-meta {
-        flex-direction: column;
-        gap: var(--space-md);
-        align-items: center;
-    }
-
-    .last-updated {
-        order: 2;
-    }
-
-    .github-link {
-        order: 1;
-        width: 40px;
-        height: 40px;
+        text-align: center
     }
 }
 
diff --git a/dist/index.html b/dist/index.html
index acb2b10..18aefc8 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -80,7 +80,12 @@
                         </svg>
                         Debrid Comparison
                     </a>
-                    <nav class="header-nav" aria-label="Main navigation">
+                    <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" aria-controls="primary-navigation" aria-expanded="false" type="button">
+                        <span class="nav-toggle-bar"></span>
+                        <span class="nav-toggle-bar"></span>
+                        <span class="nav-toggle-bar"></span>
+                    </button>
+                    <nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true">
                         <a href="#what-are-debrid" class="nav-link">Intro</a>
                         <a href="#pricing" class="nav-link">Pricing</a>
                         <a href="#file-hosts" class="nav-link">Hosts</a>
@@ -103,6 +108,7 @@
                 </div>
             </div>
         </header>
+        <div class="nav-overlay" id="navOverlay" hidden></div>
 
         <main id="main-content" class="main-content" role="main">
             <!-- Hero Section -->
@@ -771,6 +777,97 @@
         // Dark mode toggle
         document.addEventListener('DOMContentLoaded', () => {
             const btn = document.getElementById('darkModeToggle');
+            const bodyEl = document.body;
+            const navToggle = document.getElementById('navToggle');
+            const nav = document.getElementById('primary-navigation');
+            const navOverlay = document.getElementById('navOverlay');
+            const focusableSelectors = 'a[href], button:not([disabled]), select, textarea, input, [tabindex]:not([tabindex="-1"])';
+            let lastFocusedBeforeMenu = null;
+
+            // Mark JS ready to enable transitions after initial paint (prevents slide-in glitch)
+            requestAnimationFrame(()=> bodyEl.classList.add('js-ready'));
+
+            function trapFocus(container) {
+                const focusables = Array.from(container.querySelectorAll(focusableSelectors));
+                if (!focusables.length) return;            
+                let first = focusables[0];
+                let last = focusables[focusables.length - 1];
+                function handle(e){
+                    if(e.key==='Tab') {
+                        if(e.shiftKey && document.activeElement===first){e.preventDefault();last.focus();}
+                        else if(!e.shiftKey && document.activeElement===last){e.preventDefault();first.focus();}
+                    }
+                }
+                container.addEventListener('keydown', handle);
+            }
+
+            function updateNavAria(){
+                if(!nav) return;
+                if(window.innerWidth <= 900){
+                    nav.setAttribute('aria-hidden', bodyEl.classList.contains('nav-open') ? 'false' : 'true');
+                } else {
+                    nav.removeAttribute('aria-hidden');
+                }
+            }
+
+            function openMenu(){
+                lastFocusedBeforeMenu = document.activeElement;
+                bodyEl.classList.add('nav-open');
+                navToggle.setAttribute('aria-expanded','true');
+                navOverlay.hidden = false;
+                nav.setAttribute('data-open','true');
+                const firstLink = nav.querySelector('a');
+                firstLink && firstLink.focus();
+                trapFocus(nav);
+                updateNavAria();
+            }
+            function closeMenu(){
+                bodyEl.classList.remove('nav-open');
+                navToggle.setAttribute('aria-expanded','false');
+                navOverlay.hidden = true;
+                nav.removeAttribute('data-open');
+                lastFocusedBeforeMenu && lastFocusedBeforeMenu.focus();
+                updateNavAria();
+            }
+            if(navToggle){
+                navToggle.addEventListener('click', ()=>{
+                    if(bodyEl.classList.contains('nav-open')) closeMenu(); else openMenu();
+                });
+            }
+            if(navOverlay){
+                navOverlay.addEventListener('click', closeMenu);
+            }
+            window.addEventListener('keydown', (e)=>{
+                if(e.key==='Escape' && bodyEl.classList.contains('nav-open')) closeMenu();
+            });
+
+            // Handle resize (debounced via rAF)
+            let resizeRaf;
+            window.addEventListener('resize', ()=>{
+                if(resizeRaf) cancelAnimationFrame(resizeRaf);
+                resizeRaf = requestAnimationFrame(updateNavAria);
+            });
+            updateNavAria();
+
+            // Scrollspy for active nav link
+            const sectionIds = Array.from(nav?.querySelectorAll('a[href^="#"]')||[]).map(a=>a.getAttribute('href')).filter(Boolean);
+            const sections = sectionIds.map(id=>document.querySelector(id)).filter(Boolean);
+            if('IntersectionObserver' in window && sections.length){
+                const observer = new IntersectionObserver(entries=>{
+                    entries.forEach(entry=>{
+                        const id = '#'+entry.target.id;
+                        const link = nav.querySelector(`a[href="${id}"]`);
+                        if(link){
+                            if(entry.isIntersecting){
+                                nav.querySelectorAll('.nav-link.active').forEach(l=>{l.classList.remove('active'); l.removeAttribute('aria-current');});
+                                link.classList.add('active');
+                                link.setAttribute('aria-current','page');
+                            }
+                        }
+                    });
+                }, {rootMargin: '-40% 0px -50% 0px', threshold: [0,0.25,0.5,1]});
+                sections.forEach(sec=>observer.observe(sec));
+            }
             if (btn) {
                 const getTheme = () => document.documentElement.getAttribute('data-theme') || 'light';
                 const setTheme = (theme) => {
@@ -795,6 +892,7 @@
                     if (!target) return;
                     
                     e.preventDefault();
+                    if(bodyEl.classList.contains('nav-open')) closeMenu();
                     target.scrollIntoView({ 
                         behavior: prefersReduced ? 'auto' : 'smooth', 
                         block: 'start'