diff --git a/apps/web/components/marketing-mobile-menu.tsx b/apps/web/components/marketing-mobile-menu.tsx
index 7b1bc93..ebffe32 100644
--- a/apps/web/components/marketing-mobile-menu.tsx
+++ b/apps/web/components/marketing-mobile-menu.tsx
@@ -27,7 +27,16 @@ export function MarketingMobileMenu() {
         {open ? <X size={18} /> : <Menu size={18} />}
       </button>
       {open && (
-        <div className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40">
+        <div
+          // Background via inline style: Tailwind v4's bracket-arbitrary syntax
+          // `bg-[--color-X]` emits invalid CSS (it forgets the var() wrapper),
+          // so the class compiles to `background-color: --color-bg` which the
+          // browser falls back to transparent. Inline `var()` is unambiguous.
+          className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] shadow-lg shadow-black/40 backdrop-blur-md"
+          style={{
+            backgroundColor: 'color-mix(in oklab, var(--color-bg) 80%, transparent)',
+          }}
+        >
           <nav className="mx-auto flex max-w-6xl flex-col px-6">
             {LINKS.map((l) => (
               <Link