feat: implement comprehensive mobile responsive design system and fix horizontal clipping across all viewport sizes

js/main.js

@@ -148,20 +148,34 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
-  // Mobile Menu Toggle
+  // Mobile Menu Toggle & Body Lock
   if (mobileToggle && navLinks) {
-    mobileToggle.addEventListener('click', () => {
-      navLinks.classList.toggle('open');
-      mobileToggle.textContent = navLinks.classList.contains('open') ? '✕' : '☰';
+    const toggleNav = (forceClose = false) => {
+      const shouldOpen = forceClose ? false : !navLinks.classList.contains('open');
+      navLinks.classList.toggle('open', shouldOpen);
+      document.body.classList.toggle('nav-open', shouldOpen);
+      mobileToggle.textContent = shouldOpen ? '✕' : '☰';
+      mobileToggle.setAttribute('aria-expanded', String(shouldOpen));
+    };
+
+    mobileToggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleNav();
     });
 
-    // Close mobile nav when link clicked
+    // Close mobile nav when any link inside is clicked
     navLinks.querySelectorAll('a').forEach(link => {
       link.addEventListener('click', () => {
-        navLinks.classList.remove('open');
-        mobileToggle.textContent = '☰';
+        toggleNav(true);
       });
     });
+
+    // Close mobile nav when clicking outside on backdrop
+    document.addEventListener('click', (e) => {
+      if (navLinks.classList.contains('open') && !navLinks.contains(e.target) && e.target !== mobileToggle) {
+        toggleNav(true);
+      }
+    });
   }
 
   // Contact Form Submission (Simulated Client-Side)