diff --git a/config/custom.css b/config/custom.css
index 501f92a..3aee267 100755
--- a/config/custom.css
+++ b/config/custom.css
@@ -1,25 +1,51 @@
 /* custom.css */
 
+/* Base background behavior */
 body {
-    background-size: cover !important;
-    background-position: center center !important;
-    background-attachment: fixed !important;
-  }
-  
-  /* Per-tab backgrounds */
-  body.tab-glance {
-    background-image: url("/images/bg-glance.jpg") !important;
-  }
-  
-  body.tab-pncharris {
-    background-image: url("/images/pncharris-bg.png") !important;
-  }
-  
-  body.tab-netgrimoire {
-    background-image: url("/images/bg-netgrimoire.jpg") !important;
-  }
-  
-  body.tab-wasted-bandwidth {
-    background-image: url("/images/bg-wasted-bandwidth.jpg") !important;
-  }
-  
\ No newline at end of file
+  background-size: cover !important;
+  background-position: center center !important;
+  background-attachment: fixed !important;
+}
+
+/* Per-tab backgrounds */
+body.tab-glance {
+  background-image: url("/images/bg-glance.jpg") !important;
+}
+
+body.tab-pncharris {
+  background-image: url("/images/pncharris-bg.png") !important;
+}
+
+body.tab-netgrimoire {
+  background-image: url("/images/bg-netgrimoire.jpg") !important;
+}
+
+body.tab-wasted-bandwidth {
+  background-image: url("/images/bg-wasted-bandwidth.jpg") !important;
+}
+
+/* ----------------------------- */
+/* Readability / tone-down layer */
+/* ----------------------------- */
+
+/* Dark overlay behind all content */
+#page-wrapper {
+  background-color: rgba(0, 0, 0, 0.55);
+}
+
+/* Soft blur + desaturate background only */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  backdrop-filter: blur(6px) saturate(0.8);
+  z-index: -1;
+}
+
+/* Make service cards and widgets pop */
+.service-card,
+.widget {
+  background: rgba(20, 20, 20, 0.85) !important;
+  backdrop-filter: blur(2px);
+  border-radius: 10px;
+}