feat(ui): add responsive navigation and mobile layout improvements

Add hamburger menu toggle with ARIA support for mobile nav. Introduce
responsive breakpoints at 768px (tablet) and 480px (phone) with stacked
nav, adjusted spacing, and full-width elements. Add table overflow
protection and responsive refinements across all page layouts.

public/styles/global.css

@@ -145,6 +145,7 @@ a {
 .nav {
   display: flex;
   gap: var(--space-xl);
+  align-items: center;
 }
 
 .nav a {
@@ -153,6 +154,7 @@ a {
   font-size: 0.9rem;
   letter-spacing: 0.02em;
   position: relative;
+  white-space: nowrap;
 }
 
 .nav a::after {
@@ -176,8 +178,26 @@ a {
   width: 100%;
 }
 
+/* Hamburger menu toggle (hidden by default, visible on mobile) */
+.nav-toggle {
+  display: none;
+  background: none;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.4rem 0.6rem;
+  line-height: 1;
+  border-radius: 4px;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.nav-toggle:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
 .nav-download {
-  margin-left: auto;
   color: var(--color-bg) !important;
   background: var(--color-accent);
   padding: 0.65rem 1.75rem;
@@ -201,6 +221,14 @@ a {
   box-shadow: 0 2px 12px rgba(0, 221, 119, 0.3);
 }
 
+/* Table overflow protection */
+table {
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}
+
 /* ===== Hero Section ===== */
 .hero {
   position: relative;
@@ -671,7 +699,7 @@ section {
 
 .feature-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: var(--space-lg);
 }
 
@@ -781,7 +809,7 @@ section {
 
 .arch-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--space-xl);
   margin-top: var(--space-2xl);
 }
@@ -1096,7 +1124,7 @@ section {
 
 .download-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: var(--space-lg);
   margin-bottom: var(--space-xl);
 }
@@ -1303,19 +1331,63 @@ section {
   }
 }
 
+/* Tablet and smaller */
 @media (max-width: 768px) {
   .site-header {
     padding: var(--space-sm) 0;
   }
   
+  .header-content {
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+  }
+
+  .logo-image {
+    height: 32px;
+    max-width: 140px;
+  }
+
+  /* Show hamburger toggle, hide nav by default */
+  .nav-toggle {
+    display: block;
+  }
+
   .nav {
-    gap: var(--space-md);
-    font-size: 0.8rem;
+    display: none;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    order: 3;
+    padding-top: var(--space-sm);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .nav.nav-open {
+    display: flex;
+  }
+
+  .nav a {
+    font-size: 0.85rem;
+    padding: 0.75rem var(--space-md);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .nav a:last-child {
+    border-bottom: none;
+  }
+
+  .nav a::after {
+    display: none;
   }
 
   .nav-download {
-    padding: 0.5rem 1rem;
-    font-size: 0.75rem !important;
+    border-radius: 0;
+    text-align: center;
+    padding: 0.75rem var(--space-md) !important;
+    font-size: 0.85rem !important;
     letter-spacing: 0.06em !important;
   }
   
@@ -1371,8 +1443,14 @@ section {
     grid-template-columns: 1fr;
     gap: var(--space-lg);
   }
+  
+  .download-disclaimer {
+    flex-direction: column;
+    text-align: center;
+  }
 }
 
+/* Small phones */
 @media (max-width: 480px) {
   .container,
   .features-layout,
@@ -1381,10 +1459,65 @@ section {
     padding: 0 var(--space-md);
   }
   
+  .site-header {
+    padding: var(--space-xs) 0;
+  }
+
+  .logo-image {
+    height: 28px;
+    max-width: 120px;
+  }
+
+  .nav a {
+    font-size: 0.8rem;
+    padding: 0.6rem var(--space-sm);
+  }
+
+  .nav-download {
+    padding: 0.6rem var(--space-sm) !important;
+    font-size: 0.8rem !important;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .nav-toggle {
+    padding: 0.3rem 0.5rem;
+    font-size: 1.25rem;
+  }
+  
+  .hero {
+    padding-top: calc(var(--space-xl) + 60px);
+    padding-bottom: var(--space-xl);
+  }
+
+  .hero-label {
+    font-size: 0.75rem;
+  }
+
+  .hero-description {
+    font-size: 1rem;
+  }
+
+  section {
+    padding: var(--space-xl) 0;
+  }
+
+  .section-title {
+    font-size: clamp(1.75rem, 8vw, 2.5rem);
+  }
+  
   .feature-primary,
   .pricing-block {
     padding: var(--space-lg);
   }
+
+  .feature-item {
+    padding: var(--space-lg);
+  }
+
+  .feature-content h3 {
+    font-size: 1.5rem;
+  }
   
   .pricing-features {
     flex-direction: column;
@@ -1394,6 +1527,35 @@ section {
     width: 100%;
     text-align: center;
   }
+
+  .pricing-action {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .platform-card {
+    padding: var(--space-lg);
+  }
+
+  .platform-name {
+    font-size: 1.25rem;
+  }
+
+  .footer-section {
+    text-align: center;
+  }
+
+  .footer-section a {
+    padding-left: 0;
+  }
+
+  .footer-section a::before {
+    display: none;
+  }
+
+  .footer-bottom {
+    font-size: 0.75rem;
+  }
 }
 
 /* ===== Animations & Effects ===== */