diff --git a/packages/app/public/marketing.html b/packages/app/public/marketing.html
index b7547e6..e472e2d 100644
--- a/packages/app/public/marketing.html
+++ b/packages/app/public/marketing.html
@@ -107,6 +107,15 @@
 [data-theme="dark"] #nav.scrolled {
   background: rgba(10,10,10,0.88);
 }
+/* Mobile nav drawer — dark mode: swap hardcoded white for dark surface */
+[data-theme="dark"] .nav-mobile {
+  background: rgba(10,10,10,0.97);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+}
+/* Desktop product dropdown — dark mode */
+[data-theme="dark"] .nav-dropdown-menu {
+  background: rgba(15,15,17,0.98);
+}
 
 /* ════════════════════════════════════════════════════════════
    RESET
@@ -366,8 +375,12 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 /* ── Mobile drawer ── */
 .nav-mobile {
   display: none;
-  position: absolute;
+  /* fixed — not absolute — so it reliably overlays page content on all
+     mobile browsers including iOS Safari, where absolute children of a
+     fixed parent can be clipped to the parent's rendered height. */
+  position: fixed;
   top: 60px; left: 0; right: 0;
+  z-index: 199;
   background: rgba(255,255,255,0.97);
   backdrop-filter: blur(20px) saturate(1.6);
   -webkit-backdrop-filter: blur(20px) saturate(1.6);
@@ -376,6 +389,8 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   padding: 12px 24px 24px;
   flex-direction: column;
   gap: 2px;
+  max-height: calc(100dvh - 60px);
+  overflow-y: auto;
 }
 .nav-mobile.open { display: flex; }
 .nav-mobile ul { list-style: none; display: flex; flex-direction: column; }