diff --git a/components/CardsPageView.js b/components/CardsPageView.js
index 4d8b4c9..586b1fa 100644
--- a/components/CardsPageView.js
+++ b/components/CardsPageView.js
@@ -49,7 +49,7 @@ export default function CardsPageView(props) {
   return (
     <>
       {/* Header */}
-      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+      <div className="page-header-glass p-4 sm:p-6">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
diff --git a/components/CollectionPageView.js b/components/CollectionPageView.js
index f5eef0a..1956474 100644
--- a/components/CollectionPageView.js
+++ b/components/CollectionPageView.js
@@ -78,7 +78,7 @@ export default function CollectionPageView(props) {
     <>
       <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
         {/* Header */}
-        <div className="p-6 border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
+        <div className="page-header-glass p-6">
           <div className="flex items-center justify-between mb-6">
             {/* Back button */}
             <div className="flex items-center">
diff --git a/components/CollectionsPageView.js b/components/CollectionsPageView.js
index e74c79a..05794ac 100644
--- a/components/CollectionsPageView.js
+++ b/components/CollectionsPageView.js
@@ -48,7 +48,7 @@ export default function CollectionsPageView(props) {
   return (
     <>
       {/* Header */}
-      <div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+      <div className="page-header-glass p-6">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
diff --git a/pages/community/collections.js b/pages/community/collections.js
index 6c818e4..186d633 100644
--- a/pages/community/collections.js
+++ b/pages/community/collections.js
@@ -198,7 +198,7 @@ export default function CommunityCollections() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+      <div className="page-header-glass p-6">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
diff --git a/pages/dashboard.js b/pages/dashboard.js
index c05274b..3531c93 100644
--- a/pages/dashboard.js
+++ b/pages/dashboard.js
@@ -80,7 +80,7 @@ export default function Dashboard() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+      <div className="page-header-glass p-4 sm:p-6">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
diff --git a/pages/my-cards.js b/pages/my-cards.js
index 03fc940..54ef040 100644
--- a/pages/my-cards.js
+++ b/pages/my-cards.js
@@ -262,7 +262,7 @@ export default function MyCards() {
   return (
     <Layout user={user}>
       {/* Header */}
-      <div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
+      <div className="page-header-glass p-4 sm:p-6">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
diff --git a/styles/globals.css b/styles/globals.css
index 2b03d9f..03a604a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -188,17 +188,78 @@ body {
   }
 }
 
-/* Apply theme colors */
+/* Apply theme colors.
+   The hearth gradient: a soft warm wash that gives glass surfaces a real
+   substrate to blur and distort. Without this the page bg is flat warm-
+   white and the blur is functionally invisible (the chief reason the
+   first 3 redesign PRs landed but the user said "still looks the same").
+   Two layers:
+     - A radial ember glow biased to the bottom-left (the seat of a fire)
+     - A soft vertical gradient from cooler-top to warmer-bottom
+   Fixed attachment so scrolling content slides over the gradient rather
+   than pulling it along — that's what gives glass surfaces their
+   parallax-blur behavior. */
 body {
   background-color: var(--bg-primary-light);
+  background-image:
+    radial-gradient(
+      ellipse 80% 60% at 15% 100%,
+      rgba(255, 128, 0, 0.08) 0%,
+      rgba(255, 128, 0, 0.02) 40%,
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 85% 0%,
+      rgba(255, 171, 64, 0.06) 0%,
+      transparent 60%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(254, 252, 248, 1) 0%,
+      rgba(252, 246, 235, 1) 100%
+    );
+  background-attachment: fixed;
   color: var(--text-primary-light);
 }
 
 [data-theme="dark"] body {
   background-color: var(--bg-primary-dark);
+  background-image:
+    radial-gradient(
+      ellipse 80% 60% at 15% 100%,
+      rgba(255, 128, 0, 0.16) 0%,
+      rgba(255, 128, 0, 0.04) 40%,
+      transparent 70%
+    ),
+    radial-gradient(
+      ellipse 60% 50% at 85% 0%,
+      rgba(124, 58, 237, 0.08) 0%,
+      transparent 60%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(26, 15, 10, 1) 0%,
+      rgba(38, 22, 14, 1) 100%
+    );
+  background-attachment: fixed;
   color: var(--text-primary-dark);
 }
 
+/* .page-header-glass — the recurring "page header strip" pattern
+   (full-bleed band at the top of authenticated pages: dashboard, my-
+   cards, cards, collections, community/collections, collection/[id],
+   scanner). Uses a higher-tint surface than .glass-panel because the
+   strip spans the whole content width and needs more visual weight,
+   but inherits the same rim + blur recipe. Pairs with `border-bottom:
+   1px solid var(--border)` for the separator line below. */
+.page-header-glass {
+  background: var(--glass-surface-high);
+  backdrop-filter: blur(20px) saturate(180%);
+  box-shadow:
+    var(--rim-light-inner),
+    0 1px 0 var(--border);
+}
+
 /* Card Scanner Animations */
 @keyframes pulse {
   0%, 100% {