fix(web): mobile menu background via inline style (Tailwind v4 quirk)

Tailwind v4's `bg-[--color-X]` bracket-arbitrary syntax does not wrap the
value in var(), so it compiles to `background-color: --color-bg-elevated`
— an invalid color, which the browser falls back to transparent. The
mobile menu was the one element that depended solely on this utility for
its background, so it rendered with none.

Use an inline style with explicit var() and color-mix to match the nav
bar's frosted look (var(--color-bg) at 80% + backdrop-blur).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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