Lighten the mobile bar glass for older phones

The mobile menu's full-viewport blur(24) saturate(140%) reads
beautifully on a Pixel but eats frames on older Snapdragons and
3-year-old iPhones. Drop to blur(10) with a touch more transparency
so the panel still feels like glass without the GPU cost. The
filter kernel scales with radius squared, so the saving is roughly
5x. Also drop saturate(), which adds another compositing pass.

Take the sticky navbar and bottom CTA to blur(10) on mobile too
for a consistent look. Desktop keeps the original premium glass.

Author: michael-chipmates

marketing/src/components/Navbar.astro

@@ -85,11 +85,22 @@ const isActive = (path: string) => currentPath === path || currentPath === path.
 
   /* Same root-cause as the navbar fix above: public-layout.css applies
      var(--bg-primary) to the mobile menu panel but the var falls through
-     to transparent on the Astro pages, so the open menu lets page content
-     bleed through and the links become illegible. Replace with an opaque
-     cosmic-blue + backdrop blur, animate the entry/exit, stagger the
-     items, and morph the burger into a close icon. */
+     to transparent on the Astro pages, so the open menu let page text
+     bleed into the links. Replace with a cosmic-blue tint and a lighter
+     backdrop blur, animate the entry, stagger the items, and morph the
+     burger into a close icon. */
   @media (max-width: 640px) {
+    /* Lighter blur radius on mobile across all the glass bars. The
+       cost of backdrop-filter scales roughly with the radius squared,
+       so blur(10) is far cheaper than blur(24) on the full-viewport
+       menu while the glass effect still reads clearly. The navbar and
+       sticky CTA pick up the same value for a consistent look. */
+    .pub-navbar,
+    .pub-cta--sticky {
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+
     .pub-navbar .pub-navbar__nav {
       display: flex;
       visibility: hidden;
@@ -101,9 +112,9 @@ const isActive = (path: string) => currentPath === path || currentPath === path.
         transform 0.24s ease,
         visibility 0s linear 0.24s;
       padding: 2rem 1.5rem max(2rem, env(safe-area-inset-bottom));
-      background: color-mix(in srgb, var(--bg-deep-space, #0C1133) 94%, transparent);
-      backdrop-filter: blur(24px) saturate(140%);
-      -webkit-backdrop-filter: blur(24px) saturate(140%);
+      background: color-mix(in srgb, var(--bg-deep-space, #0C1133) 90%, transparent);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
       border-top: 1px solid color-mix(in srgb, var(--gold-primary, #E6BC5C) 16%, transparent);
       box-shadow: 0 16px 40px color-mix(in srgb, #000 45%, transparent);
       overflow-y: auto;