diff --git a/website/src/components/marketing/MarketingShell.tsx b/website/src/components/marketing/MarketingShell.tsx
index 98ec518f..92843573 100755
--- a/website/src/components/marketing/MarketingShell.tsx
+++ b/website/src/components/marketing/MarketingShell.tsx
@@ -60,13 +60,44 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
   const isDark = colorMode === 'dark'
   const isHomePage = location.pathname === '/'
 
-  const shellClassName = `${isHomePage ? 'bg-transparent' : 'bg-[hsl(var(--background))]'} text-[hsl(var(--foreground))]`
+  const shellClassName = `bg-transparent text-[hsl(var(--foreground))]`
+  const shellBackdropClassName = isHomePage
+    ? isDark
+      ? 'bg-black/90'
+      : 'bg-white/80'
+    : isDark
+      ? 'bg-black/40'
+      : 'bg-white/58'
+  const shaderOverlayClassName = isHomePage
+    ? 'opacity-[0.94]'
+    : isDark
+      ? 'opacity-55'
+      : 'opacity-35'
+  const shellShaderStyle = isHomePage && isDark
+    ? { filter: 'saturate(1.28) contrast(1.08) brightness(1.06)' }
+    : undefined
+  const homeGlowGradients = isDark
+    ? [
+        'radial-gradient(circle_at_50%_8%, hsl(var(--brand-line)/0.14), transparent_22%), radial-gradient(circle_at_82%_18%, hsl(var(--brand-line)/0.16), transparent_24%)',
+        'linear-gradient(180deg,rgba(9,10,13,0.04)_0%,rgba(9,10,13,0.3)_42%,rgba(9,10,13,0.72)_100%)',
+      ]
+    : [
+        'radial-gradient(circle_at_50%_8%, rgba(166,146,110,0.16), transparent_22%), radial-gradient(circle_at_82%_18%, rgba(120,131,144,0.16), transparent_24%)',
+        'linear-gradient(180deg,rgba(247,245,240,0.2)_0%,rgba(247,245,240,0.44)_42%,rgba(247,245,240,0.84)_100%)',
+      ]
+  const secondaryGlowClassName = isDark
+    ? 'bg-[radial-gradient(circle, hsl(var(--brand-line)/0.20), transparent_62%)]'
+    : 'bg-[radial-gradient(circle, rgba(166,146,110,0.24), transparent_62%)]'
+  const secondaryGlowAltClassName = isDark
+    ? 'bg-[radial-gradient(circle, hsl(var(--primary)/0.16), transparent_62%)]'
+    : 'bg-[radial-gradient(circle, rgba(120,131,144,0.18), transparent_62%)]'
 
   const mutedClassName = 'text-[hsl(var(--muted-foreground))]'
   const borderClassName = isDark ? 'border-white/15' : 'border-[hsl(var(--border))]'
+  const navHoverClassName = isDark ? 'hover:bg-white/10' : 'hover:bg-black/8'
   const glassClassName = isDark
     ? `bg-white/5 ${borderClassName} backdrop-blur-2xl`
-    : `bg-white/70 ${borderClassName} backdrop-blur-2xl`
+    : `bg-black/5 ${borderClassName} backdrop-blur-2xl`
 
   const logoClassName = 'drop-shadow-[0_0_14px_rgba(232,232,232,0.36)]'
   const headerFrameClassName = 'h-[10rem] md:h-[10.5rem] lg:h-[11rem]'
@@ -90,10 +121,10 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
 
   return (
     <div className={`relative isolate min-h-screen overflow-hidden ${shellClassName}`} data-color-mode={isDark ? 'dark' : 'light'}>
-      <div className={`fixed inset-0 z-0 pointer-events-none ${isHomePage ? 'bg-black/90' : 'bg-black/40'}`}>
+      <div className={`fixed inset-0 z-0 pointer-events-none ${shellBackdropClassName}`}>
         <div
-          className={`absolute inset-0 ${isHomePage ? 'opacity-[0.94]' : 'opacity-55'}`}
-          style={isHomePage ? { filter: 'saturate(1.28) contrast(1.08) brightness(1.06)' } : undefined}
+          className={`absolute inset-0 ${shaderOverlayClassName}`}
+          style={shellShaderStyle}
         >
           <ShaderAnimation />
         </div>
@@ -102,26 +133,23 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
             <div
               className="absolute inset-0"
               style={{
-                background:
-                  'radial-gradient(circle_at_50%_8%, hsl(var(--brand-line)/0.14), transparent_22%), radial-gradient(circle_at_82%_18%, hsl(var(--brand-line)/0.16), transparent_24%)',
+                background: homeGlowGradients[0],
               }}
             />
-            <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(9,10,13,0.04)_0%,rgba(9,10,13,0.3)_42%,rgba(9,10,13,0.72)_100%)]" />
+            <div className="absolute inset-0" style={{ background: homeGlowGradients[1] }} />
           </>
         )}
       </div>
       <div className="pointer-events-none absolute inset-0 z-0">
         <div
-          className="absolute -top-40 -right-32 h-[28rem] w-[28rem] rounded-full"
-          style={{ background: 'radial-gradient(circle, hsl(var(--brand-line)/0.20), transparent_62%)' }}
+          className={`absolute -top-40 -right-32 h-[28rem] w-[28rem] rounded-full ${secondaryGlowClassName}`}
         />
         <div
-          className="absolute top-[35%] -left-44 h-[32rem] w-[32rem] rounded-full"
-          style={{ background: 'radial-gradient(circle, hsl(var(--primary)/0.16), transparent_62%)' }}
+          className={`absolute top-[35%] -left-44 h-[32rem] w-[32rem] rounded-full ${secondaryGlowAltClassName}`}
         />
       </div>
 
-      <header className={`sticky top-0 z-50 border-b backdrop-blur-2xl ${isDark ? 'border-white/10 bg-black/20' : 'border-[hsl(var(--border))] bg-[hsl(var(--background))]'}`}>
+      <header className={`sticky top-0 z-50 border-b backdrop-blur-2xl ${isDark ? 'border-white/10 bg-black/20' : 'border-[hsl(var(--border))] bg-white/45 backdrop-saturate-150'}`}>
         <div className={headerInnerClassName}>
           <div className={logoClusterClassName}>
             <Link to="/" className={emblemLinkClassName} aria-label={`${brandConfig.brandName} home`}>
@@ -180,7 +208,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
                               className={`block rounded-xl px-3 py-2 text-sm transition-colors ${
                                 activePath === child.to
                                   ? 'bg-[hsl(var(--brand-line))] text-[hsl(var(--foreground))]'
-                                  : `${mutedClassName} hover:bg-white/10 hover:text-current`
+                                  : `${mutedClassName} ${navHoverClassName} hover:text-current`
                               }`}
                             >
                               {child.label}
@@ -199,7 +227,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
                     className={`public-nav-link ${
                       isActive
                         ? 'public-nav-link-active'
-                        : `${mutedClassName} hover:bg-white/10 hover:text-current`
+                        : `${mutedClassName} ${navHoverClassName} hover:text-current`
                     }`}
                   >
                     {entry.label}
@@ -269,7 +297,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
       </header>
 
       {mobileOpen && (
-        <div className={`sticky top-0 z-40 border-b ${borderClassName} bg-[hsl(var(--background))] lg:hidden`}>
+        <div className={`sticky top-0 z-40 border-b ${borderClassName} ${isDark ? 'bg-black/60' : 'bg-white/85'} lg:hidden`}>
           <nav className="mx-auto max-w-7xl px-5 pb-4 pt-2">
             <div className="flex flex-col gap-1">
               {navigationItems.flatMap((entry) => {
@@ -284,7 +312,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
                         className={`rounded-xl px-4 py-2.5 text-sm transition-colors pl-6 ${
                           activePath === child.to
                             ? 'bg-[hsl(var(--brand-line))] text-[hsl(var(--foreground))]'
-                            : `${mutedClassName} hover:bg-white/10`
+                            : `${mutedClassName} ${navHoverClassName}`
                         }`}
                       >
                         {child.label}
@@ -301,7 +329,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
                     className={`rounded-xl px-4 py-2.5 text-sm transition-colors ${
                       isActive
                         ? 'bg-[hsl(var(--brand-line))] text-[hsl(var(--foreground))]'
-                        : `${mutedClassName} hover:bg-white/10`
+                        : `${mutedClassName} ${navHoverClassName}`
                     }`}
                   >
                     {entry.label}