diff --git a/src/components/AnimatedLogo.tsx b/src/components/AnimatedLogo.tsx
index dfbb78a..9ec29d8 100644
--- a/src/components/AnimatedLogo.tsx
+++ b/src/components/AnimatedLogo.tsx
@@ -57,8 +57,11 @@ export default function AnimatedLogo({
   const tileGradId = `al-tile-${uid}`;
   const sheenGradId = `al-sheen-${uid}`;
   const wordmarkColor = variant === 'onDark' ? '#FFFFFF' : '#0F172A';
-  const taglineColor = variant === 'onDark' ? '#CBD5E1' : '#475569';
-  const accentColor = '#1D4ED8';
+  const taglineColor = variant === 'onDark' ? '#E2E8F0' : '#475569';
+  // On a dark/blue header the tile's own gradient (#2563EB→#1E3A8A) reads
+  // as the same shade as the bar behind it, so we paint a faint white ring
+  // around the rounded edge to separate the mark from the background.
+  const accentColor = variant === 'onDark' ? '#7DD3FC' : '#1D4ED8';
 
   return (
     <span
@@ -100,6 +103,19 @@ export default function AnimatedLogo({
 
         {/* Tile */}
         <rect x="0" y="0" width="64" height="64" rx="14" ry="14" fill={`url(#${tileGradId})`} />
+        {variant === 'onDark' && (
+          <rect
+            x="0.75"
+            y="0.75"
+            width="62.5"
+            height="62.5"
+            rx="13.4"
+            ry="13.4"
+            fill="none"
+            stroke="rgba(255,255,255,0.28)"
+            strokeWidth="1.5"
+          />
+        )}
 
         {/* Sheen sweep — a tall skewed band that travels left→right. */}
         <g clipPath={`url(#al-clip-${uid})`}>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6f8c66b..2252fd2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -269,9 +269,9 @@ export default function Header() {
                 aria-label="AV Beat — homepage"
                 className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--brand-bg)] rounded-md"
               >
-                <span className="hidden lg:inline-flex"><AnimatedLogo size={44} variant="onLight" /></span>
-                <span className="hidden md:inline-flex lg:hidden"><AnimatedLogo size={40} variant="onLight" showTagline={false} /></span>
-                <span className="inline-flex md:hidden"><AnimatedLogo size={36} variant="onLight" iconOnly /></span>
+                <span className="hidden lg:inline-flex"><AnimatedLogo size={44} variant="onDark" /></span>
+                <span className="hidden md:inline-flex lg:hidden"><AnimatedLogo size={40} variant="onDark" showTagline={false} /></span>
+                <span className="inline-flex md:hidden"><AnimatedLogo size={36} variant="onDark" iconOnly /></span>
               </Link>
 
               {/* Header 728x90 banner — centered between logo and right side */}