site/assets/css/style.css

@@ -628,6 +628,22 @@ section[id] {
   z-index: 2;
 }
 
+/* Gradient blur: the hero photo is blurred hardest behind the text (the middle)
+   and sharpens smoothly outward — a backdrop blur masked by a radial gradient.
+   The layer sits behind the text (z-index -1 in the container's stacking
+   context) and above the photo and its overlays. */
+.hero-section .container::before {
+  content: '';
+  position: absolute;      /* the container is static, so this fills the hero */
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  -webkit-mask-image: radial-gradient(ellipse 52% 46% at 50% 52%, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
+  mask-image: radial-gradient(ellipse 52% 46% at 50% 52%, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
+}
+
 .hero-text {
   padding-top: 60px;
 }