diff --git a/website/src/components/marketing/MarketingShell.tsx b/website/src/components/marketing/MarketingShell.tsx
index 3eab7ac3..2b17e0bf 100755
--- a/website/src/components/marketing/MarketingShell.tsx
+++ b/website/src/components/marketing/MarketingShell.tsx
@@ -68,13 +68,13 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
     ? `bg-white/5 ${borderClassName} backdrop-blur-2xl`
     : `bg-white/70 ${borderClassName} backdrop-blur-2xl`
 
-  const logoClassName = isDark ? 'drop-shadow-[0_0_24px_rgba(29,55,87,0.25)]' : 'drop-shadow-[0_0_14px_rgba(209,200,191,0.18)]'
+  const logoClassName = 'drop-shadow-[0_0_14px_rgba(232,232,232,0.36)]'
   const headerFrameClassName = 'h-[10rem] md:h-[10.5rem] lg:h-[11rem]'
-  const headerInnerClassName = `mx-auto flex w-full max-w-7xl items-center justify-between gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
-  const logoClusterClassName = 'flex min-w-0 items-center gap-3 md:gap-4 xl:gap-5'
-  const emblemImageClassName = `block h-[3.6rem] w-[3.6rem] shrink-0 bg-transparent object-contain object-center sm:h-[4rem] sm:w-[4rem] md:h-[4.45rem] md:w-[4.45rem] lg:h-[4.8rem] lg:w-[4.8rem] ${logoClassName}`
-  const wordmarkImageClassName = `block h-[3.2rem] w-auto max-w-[13.4rem] shrink-0 bg-transparent object-contain sm:h-[3.65rem] md:h-[4.05rem] md:max-w-[14rem] lg:h-[4.45rem] lg:max-w-[15.6rem] ${logoClassName}`
-  const homeLogoLinkClassName = 'flex min-w-0 items-center gap-0'
+  const headerInnerClassName = `relative mx-auto grid w-full max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
+  const emblemImageClassName = `block h-[3.8rem] w-[3.8rem] shrink-0 bg-transparent object-contain object-center sm:h-[4.2rem] sm:w-[4.2rem] md:h-[4.5rem] md:w-[4.5rem] lg:h-[4.9rem] lg:w-[4.9rem] ${logoClassName}`
+  const wordmarkImageClassName = `block h-[3.35rem] w-auto max-w-[14rem] shrink-0 bg-transparent object-contain sm:h-[3.8rem] md:h-[4.2rem] md:max-w-[14.5rem] lg:h-[4.65rem] lg:max-w-[15.8rem] ${logoClassName}`
+  const emblemLinkClassName = 'relative z-10 flex min-w-0 items-center gap-0'
+  const wordmarkLinkClassName = 'absolute left-1/2 top-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 items-center justify-center md:flex'
 
   const activePath = useMemo(() => {
     if (location.pathname === '/about') return '/about'
@@ -122,7 +122,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
 
       <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))]'}`}>
         <div className={headerInnerClassName}>
-          <Link to="/" className={homeLogoLinkClassName} aria-label={`${brandConfig.brandName} home`}>
+          <Link to="/" className={emblemLinkClassName} aria-label={`${brandConfig.brandName} home`}>
             <img
               src="/branding/familiaros_icon.png"
               alt={`${brandConfig.brandName} emblem`}
@@ -130,18 +130,22 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
               loading="eager"
               draggable={false}
             />
-            <span className={logoClusterClassName}>
-              <img
-                src="/branding/familiaros_logo.png"
-                alt={`${brandConfig.brandName} wordmark`}
-                className={wordmarkImageClassName}
-                loading="eager"
-                draggable={false}
-              />
-            </span>
+          </Link>
+          <Link
+            to="/"
+            className={wordmarkLinkClassName}
+            aria-label={`${brandConfig.brandName} brand wordmark`}
+          >
+            <img
+              src="/branding/familiaros_logo.png"
+              alt={`${brandConfig.brandName} wordmark`}
+              className={wordmarkImageClassName}
+              loading="eager"
+              draggable={false}
+            />
           </Link>
 
-          <nav className="hidden items-center flex-1 justify-center lg:flex">
+          <nav className="hidden items-center justify-center lg:flex">
             <div className={`flex items-center gap-2 rounded-full border px-3 py-2 ${glassClassName}`}>
               {navigationItems.map((entry) => {
                 if (entry.kind === 'dropdown') {
@@ -202,7 +206,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
             </div>
           </nav>
 
-          <div className="relative z-10 flex items-center gap-2">
+          <div className="relative z-10 flex items-center gap-2 justify-self-end">
             {isAuthenticated ? (
               <>
                 <Link
diff --git a/website/src/pages/HomeLanding.tsx b/website/src/pages/HomeLanding.tsx
index ca9f6651..2c8fd3b4 100755
--- a/website/src/pages/HomeLanding.tsx
+++ b/website/src/pages/HomeLanding.tsx
@@ -144,20 +144,20 @@ export function HomeLanding() {
     <MarketingShell>
       {/* Hero */}
       <section className="relative mx-auto max-w-7xl px-6 pb-16 pt-16 lg:px-8 lg:pt-24">
-        <div className="pointer-events-none absolute inset-x-8 -top-12 bottom-0 -z-10 rounded-[2.75rem] bg-[radial-gradient(circle_at_top,rgba(216,203,175,0.22),transparent_38%),radial-gradient(circle_at_85%_18%,rgba(121,144,255,0.18),transparent_30%)] blur-3xl" />
+        <div className="pointer-events-none absolute inset-x-8 -top-12 bottom-0 -z-10 rounded-[2.75rem] bg-[radial-gradient(circle_at_top,hsla(var(--brand-silver)/0.22),transparent_38%),radial-gradient(circle_at_85%_18%,hsla(var(--brand-silver)/0.20),transparent_30%)] blur-3xl" />
         <div className="public-hero-shell p-8 md:p-12">
-          <div className="inline-flex items-center gap-2 rounded-full border border-[hsl(var(--brand-ivory))]/40 bg-[hsl(var(--brand-gold))]/10 px-4 py-1 public-shell-kicker">
+          <div className="inline-flex items-center gap-2 rounded-full border border-[hsl(var(--brand-silver))]/40 bg-[hsl(var(--brand-silver))]/10 px-4 py-1 public-shell-kicker">
             <ItshoverShieldCheckIcon size={14} />
             Local-first AI companion platform
           </div>
 
           <div className="relative mt-6 overflow-hidden rounded-3xl border border-white/15 bg-black/25 px-6 py-8 public-hero-inner md:px-10 md:py-12">
-            <div className="pointer-events-none absolute inset-x-24 top-0 h-px bg-gradient-to-r from-transparent via-[hsl(var(--brand-ivory))]/70 to-transparent" />
-            <div className="pointer-events-none absolute inset-x-32 top-0 h-[4px] bg-gradient-to-r from-transparent via-[hsl(var(--brand-gold))]/40 to-transparent blur-sm" />
-            <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(216,203,175,0.22),transparent_54%),linear-gradient(180deg,rgba(11,12,15,0.08)_0%,rgba(11,12,15,0.28)_100%)]" />
+            <div className="pointer-events-none absolute inset-x-24 top-0 h-px bg-gradient-to-r from-transparent via-[hsl(var(--brand-silver))]/70 to-transparent" />
+            <div className="pointer-events-none absolute inset-x-32 top-0 h-[4px] bg-gradient-to-r from-transparent via-[hsl(var(--brand-silver))]/40 to-transparent blur-sm" />
+            <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,hsla(var(--brand-silver)/0.22),transparent_54%),linear-gradient(180deg,rgba(11,12,15,0.08)_0%,rgba(11,12,15,0.28)_100%)]" />
             <div className="relative z-10 mx-auto flex w-fit max-w-full flex-col items-center">
               <h1 className="public-page-title text-center">Create your Familiar.</h1>
-              <div className="mt-3 h-[3px] w-full rounded-full bg-gradient-to-r from-transparent via-[hsl(var(--brand-ivory))] to-transparent shadow-[0_0_16px_rgba(216,203,175,0.45)]" />
+              <div className="mt-3 h-[3px] w-full rounded-full bg-gradient-to-r from-transparent via-[hsl(var(--brand-silver))] to-transparent shadow-[0_0_16px_hsla(var(--brand-silver)/0.32)]" />
             </div>
             <p className="public-lead relative z-10 mx-auto mt-5 max-w-3xl text-center">
               Your Familiar remembers, speaks, and acts across your system. A local-first AI companion with memory, voice, knowledge, and tools — entirely under your control.
@@ -209,8 +209,8 @@ export function HomeLanding() {
             const Icon = pillar.icon
             return (
               <div key={pillar.title} className="public-card rounded-2xl p-6 text-center">
-                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-[hsl(var(--brand-ivory))]/30 bg-[hsl(var(--brand-ivory))]/10">
-                  <Icon className="text-[hsl(var(--brand-ivory))]" size={24} />
+                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-[hsl(var(--brand-silver))]/30 bg-[hsl(var(--brand-silver))]/10">
+                  <Icon className="text-[hsl(var(--brand-silver))]" size={24} />
                 </div>
                 <h3 className="public-section-title mt-4">{pillar.title}</h3>
                 <p className="public-body mt-2">{pillar.body}</p>
@@ -234,7 +234,7 @@ export function HomeLanding() {
             const Icon = feature.icon
             return (
               <div key={feature.title} className="public-card rounded-2xl p-6">
-                <Icon className="text-[hsl(var(--brand-ivory))]" size={20} />
+                <Icon className="text-[hsl(var(--brand-silver))]" size={20} />
                 <h3 className="public-section-title mt-4">{feature.title}</h3>
                 <p className="public-body mt-2">{feature.body}</p>
               </div>
@@ -271,7 +271,7 @@ export function HomeLanding() {
                 key={i}
                 className="flex shrink-0 items-center justify-center rounded-xl border border-white/10 bg-[hsl(var(--brand-deep))]/70 px-5 py-3 backdrop-blur-sm"
               >
-                <span className="whitespace-nowrap text-sm font-semibold tracking-wide text-[hsl(var(--brand-ivory))]/80">{label}</span>
+                <span className="whitespace-nowrap text-sm font-semibold tracking-wide text-[hsl(var(--brand-silver))]/80">{label}</span>
               </div>
             ))}
           </div>
@@ -298,7 +298,7 @@ export function HomeLanding() {
           <div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
             {steps.map((step) => (
               <div key={step.n} className="rounded-2xl border border-white/10 bg-black/20 p-5">
-                <span className="text-xs font-semibold uppercase tracking-widest text-[hsl(var(--brand-gold-soft))]">{step.n}</span>
+                <span className="text-xs font-semibold uppercase tracking-widest text-[hsl(var(--brand-silver))]">{step.n}</span>
                 <h3 className="public-section-title mt-2">{step.title}</h3>
                 <p className="public-body mt-2 text-sm">{step.body}</p>
               </div>
@@ -312,23 +312,23 @@ export function HomeLanding() {
         <div className="public-card-raised rounded-2xl p-5">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <p className="public-shell-kicker">
-              Pricing — <Link to="/pricing" className="text-[hsl(var(--brand-ivory))]">See full plans</Link>
+              Pricing — <Link to="/pricing" className="text-[hsl(var(--brand-silver))]">See full plans</Link>
             </p>
             <div className="inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1">
               <button
                 type="button"
                 onClick={() => setBillingMode('monthly')}
-                className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'monthly' ? 'bg-[hsl(var(--brand-ivory))]/20 text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
+                className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'monthly' ? 'bg-[hsl(var(--brand-silver))]/20 text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
               >
                 Monthly
               </button>
               <button
                 type="button"
                 onClick={() => setBillingMode('annual')}
-                className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'annual' ? 'bg-[hsl(var(--brand-ivory))]/20 text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
+                className={`rounded-full px-3 py-1 text-xs transition-colors ${billingMode === 'annual' ? 'bg-[hsl(var(--brand-silver))]/20 text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
               >
                 Annual
-                {billingMode === 'annual' && <span className="ml-1 text-[hsl(var(--brand-ivory))]">— save ~18%</span>}
+                {billingMode === 'annual' && <span className="ml-1 text-[hsl(var(--brand-silver))]">— save ~18%</span>}
               </button>
             </div>
           </div>
@@ -360,7 +360,7 @@ export function HomeLanding() {
       {/* Final CTA */}
       <section className="mx-auto max-w-7xl px-6 pb-10 lg:px-8">
         <div className="public-card rounded-2xl p-6 md:p-8 text-center">
-          <Sparkles className="mx-auto text-[hsl(var(--brand-ivory))]" size={28} />
+          <Sparkles className="mx-auto text-[hsl(var(--brand-silver))]" size={28} />
           <h2 className="public-section-title mt-4">Ready to meet your Familiar?</h2>
           <p className="public-body mx-auto mt-3 max-w-2xl">
             Start free on macOS, Windows, or Linux. Upgrade when you are ready for knowledge, voice, and tools.
diff --git a/website/src/pages/PricingPage.tsx b/website/src/pages/PricingPage.tsx
index 159a762e..6e9d85b4 100644
--- a/website/src/pages/PricingPage.tsx
+++ b/website/src/pages/PricingPage.tsx
@@ -162,26 +162,26 @@ export function PricingPage() {
         </div>
 
         <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
-          <div className="inline-flex items-center rounded-full border border-white/15 bg-white/5 p-1 backdrop-blur-xl public-card">
+          <div className="inline-flex items-center rounded-full border border-[hsl(var(--brand-silver))]/35 bg-[hsl(var(--brand-silver))]/12 p-1 backdrop-blur-xl">
             <button
               type="button"
               onClick={() => setBillingMode('monthly')}
-              className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'monthly' ? 'text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
+              className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'monthly' ? 'text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
             >
-              {billingMode === 'monthly' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-ivory))]/15" />}
+              {billingMode === 'monthly' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-silver))]/20" />}
               <span className="relative z-10">Monthly</span>
             </button>
             <button
               type="button"
               onClick={() => setBillingMode('annual')}
-              className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'annual' ? 'text-[hsl(var(--brand-ivory))]' : 'text-[hsl(var(--brand-muted))]'}`}
+              className={`relative rounded-full px-5 py-2 text-sm transition-colors ${billingMode === 'annual' ? 'text-[hsl(var(--brand-silver))]' : 'text-[hsl(var(--brand-muted))]'}`}
             >
-              {billingMode === 'annual' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-ivory))]/15" />}
+              {billingMode === 'annual' && <span className="absolute inset-0 rounded-full bg-[hsl(var(--brand-silver))]/20" />}
               <span className="relative z-10">Annual</span>
             </button>
           </div>
           {billingMode === 'annual' && (
-            <span className="rounded-full border border-[hsl(var(--brand-ivory))]/40 bg-[hsl(var(--brand-ivory))]/10 px-3 py-1 text-xs font-medium text-[hsl(var(--brand-ivory))]">
+            <span className="rounded-full border border-[hsl(var(--brand-silver))]/50 bg-[hsl(var(--brand-silver))]/15 px-3 py-1 text-xs font-medium text-[hsl(var(--brand-silver))]">
               Save ~18%
             </span>
           )}
@@ -196,12 +196,12 @@ export function PricingPage() {
               <div key={plan.name} className="relative flex flex-col">
                 {plan.badge && (
                   <div className="absolute -top-3 left-1/2 z-10 -translate-x-1/2">
-                    <span className="rounded-full border border-[hsl(var(--brand-ivory))]/60 bg-[hsl(var(--brand-ivory))]/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-[hsl(var(--brand-ivory))]">
+                    <span className="rounded-full border border-[hsl(var(--brand-silver))]/60 bg-[hsl(var(--brand-silver))]/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-[hsl(var(--brand-silver))]">
                       {plan.badge}
                     </span>
                   </div>
                 )}
-                <div className={`public-card flex h-full flex-col rounded-2xl p-7 ${plan.popular ? 'pricing-glow-border border-[hsl(var(--brand-ivory))]/30' : ''}`}>
+                <div className={`public-card flex h-full flex-col rounded-2xl p-7 border border-[hsl(var(--brand-silver))]/35 ${plan.popular ? 'pricing-glow-border border-[hsl(var(--brand-silver))]/50' : ''}`}>
                   <h2 className="public-card-title">{plan.name}</h2>
                   <p className="public-body mt-2">{plan.description}</p>
                   <p className="mt-5 text-4xl font-semibold leading-none">
@@ -216,7 +216,7 @@ export function PricingPage() {
                   <ul className="mt-6 grow space-y-2.5 text-sm text-[hsl(var(--brand-muted))]">
                     {plan.features.map((feature) => (
                       <li key={feature} className="flex items-start gap-2.5">
-                        <Check size={14} className="mt-0.5 shrink-0 text-[hsl(var(--brand-ivory))]" />
+                        <Check size={14} className="mt-0.5 shrink-0 text-[hsl(var(--brand-silver))]" />
                         <span className="public-body">{feature}</span>
                       </li>
                     ))}
@@ -266,7 +266,7 @@ export function PricingPage() {
             {pricingFaq.map((item) => (
               <div key={item.question} className="public-card-raised rounded-xl p-4">
                 <h3 className="public-card-title flex items-start gap-2">
-                  <HelpCircle size={16} className="mt-0.5 shrink-0 text-[hsl(var(--brand-ivory))]" />
+                    <HelpCircle size={16} className="mt-0.5 shrink-0 text-[hsl(var(--brand-silver))]" />
                   {item.question}
                 </h3>
                 <p className="public-body mt-2">{item.answer}</p>
@@ -277,7 +277,7 @@ export function PricingPage() {
 
         {/* Final CTA */}
         <div className="mt-8 public-card rounded-2xl p-6 md:p-8 text-center">
-          <Sparkles className="mx-auto text-[hsl(var(--brand-ivory))]" size={28} />
+          <Sparkles className="mx-auto text-[hsl(var(--brand-silver))]" size={28} />
           <h2 className="public-section-title mt-4">Not sure which plan fits?</h2>
           <p className="public-body mx-auto mt-3 max-w-2xl">
             Start free and upgrade when your Familiar needs more knowledge, voice, or tools. You can change plans or cancel at any time.
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index ae2c48ae..df0925c9 100755
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -49,8 +49,8 @@
     --ring: 206 100% 13%;
     
     --radius: 0.5rem;
-    --font-ui: 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
-    --font-display: 'Orbitron', 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
+    --font-ui: 'Sora', 'Inter', 'Fira Sans', 'Source Sans 3', 'Segoe UI', sans-serif;
+    --font-display: 'Orbitron', 'Sora', 'Space Grotesk', 'Inter', 'Segoe UI', sans-serif;
     --brand-silver: 0 0% 76%;
     --brand-silver-soft: 0 0% 93%;
     --brand-silver-ink: 220 7% 16%;
@@ -520,10 +520,10 @@
     padding: 1px;
     background: linear-gradient(
       var(--glow-angle, 0deg),
-      rgba(196, 169, 107, 0.0),
-      rgba(216, 203, 175, 0.9),
-      rgba(196, 169, 107, 0.0),
-      rgba(216, 203, 175, 0.0)
+      hsla(var(--brand-silver) / 0.0),
+      hsla(var(--brand-silver) / 0.85),
+      hsla(var(--brand-silver) / 0.0),
+      hsla(var(--brand-silver) / 0.0)
     );
     -webkit-mask:
       linear-gradient(#fff 0 0) content-box,
@@ -543,7 +543,7 @@
     border-radius: inherit;
     background: radial-gradient(
       ellipse at var(--glow-x, 50%) var(--glow-y, 0%),
-      rgba(196, 169, 107, 0.25) 0%,
+      hsla(var(--brand-silver) / 0.28) 0%,
       transparent 70%
     );
     pointer-events: none;
@@ -891,14 +891,14 @@
   /* ── Public marketing card / surface — responds to color mode ── */
   .public-card {
     background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.15);
+    border: 1px solid hsl(var(--brand-silver) / 0.25);
     border-radius: 1rem;
     backdrop-filter: blur(20px);
   }
 
   .public-card-raised {
     background: rgba(0,0,0,0.25);
-    border: 1px solid rgba(255,255,255,0.10);
+    border: 1px solid hsl(var(--brand-silver) / 0.22);
     border-radius: 1rem;
     backdrop-filter: blur(20px);
   }
@@ -912,13 +912,13 @@
 
   [data-color-mode='light'] .public-card {
     background: rgba(255,255,255,0.80);
-    border-color: rgba(38,43,51,0.13);
+    border-color: hsl(var(--brand-silver) / 0.22);
     box-shadow: 0 1px 3px rgba(0,0,0,0.06);
   }
 
   [data-color-mode='light'] .public-card-raised {
     background: rgba(255,255,255,0.90);
-    border-color: rgba(38,43,51,0.16);
+    border-color: hsl(var(--brand-silver) / 0.26);
     box-shadow: 0 2px 8px rgba(0,0,0,0.08);
   }
 
@@ -987,14 +987,14 @@
     display: inline-flex;
     vertical-align: middle;
     border-radius: 9999px;
-    filter: drop-shadow(0 14px 28px rgba(0,0,0,0.24)) drop-shadow(0 0 18px rgba(214,214,214,0.20));
+    filter: drop-shadow(0 12px 24px hsla(var(--brand-silver) / 0.15)) drop-shadow(0 0 16px hsla(var(--brand-silver) / 0.35));
     transition: transform 0.18s ease, filter 0.18s ease;
   }
 
   .public-silver-metal-frame:hover,
   .public-gold-metal-frame:hover {
     transform: translateY(-1px);
-    filter: drop-shadow(0 18px 34px rgba(0,0,0,0.3)) drop-shadow(0 0 22px rgba(224,224,224,0.22));
+    filter: drop-shadow(0 18px 30px hsla(var(--brand-silver) / 0.20)) drop-shadow(0 0 22px hsla(var(--brand-silver) / 0.42));
   }
 
   .public-silver-metal-frame:active,
@@ -1017,7 +1017,7 @@
     background: linear-gradient(135deg, hsl(var(--brand-silver-soft)) 0%, hsl(var(--brand-silver)) 100%);
     color: hsl(var(--brand-silver-ink));
     border: 1px solid hsl(var(--brand-silver) / 0.7);
-    box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 0 rgba(184,150,79,0);
+    box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 1px hsla(var(--brand-silver) / 0.25), 0 0 32px hsla(var(--brand-silver) / 0.2);
     cursor: pointer;
     white-space: nowrap;
   }
@@ -1031,7 +1031,7 @@
 
   [data-color-mode='light'] .public-silver-metal-frame,
   [data-color-mode='light'] .public-gold-metal-frame {
-    filter: drop-shadow(0 14px 28px rgba(90,90,90,0.18)) drop-shadow(0 0 16px rgba(220,220,220,0.16));
+    filter: drop-shadow(0 14px 24px hsla(var(--brand-silver) / 0.10)) drop-shadow(0 0 14px hsla(var(--brand-silver) / 0.32));
   }
 
   [data-color-mode='light'] .public-silver-metal-frame:hover,