Hero Section

app/globals.css

@@ -1500,7 +1500,6 @@ main {
 }
 
 .home-hero-left {
-  background: var(--secondary);
   display: flex;
   align-items: center;
   padding: 6rem max(2rem, calc((100vw - 1280px) / 2 + 1.5rem));
@@ -1509,39 +1508,11 @@ main {
 }
 
 .home-hero-left::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -128px;
-  bottom: 0;
-  width: clamp(88px, 8vw, 128px);
-  background: rgba(var(--secondary-rgb), 0.78);
-  clip-path: ellipse(72% 156% at 18% 62%);
-  pointer-events: none;
-  z-index: 1;
+  display: none;
 }
 
 .home-hero-left::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -214px;
-  bottom: 0;
-  width: clamp(280px, 22vw, 392px);
-  background: linear-gradient(
-    to right,
-    var(--secondary) 0%,
-    var(--secondary) 40%,
-    rgba(13, 27, 42, 0.95) 55%,
-    rgba(13, 27, 42, 0.85) 65%,
-    rgba(13, 27, 42, 0.60) 75%,
-    rgba(13, 27, 42, 0.30) 86%,
-    rgba(13, 27, 42, 0.08) 94%,
-    transparent 100%
-  );
-  clip-path: ellipse(80% 158% at 12% 62%);
-  pointer-events: none;
-  z-index: 2;
+  display: none;
 }
 
 .home-hero-visual {
@@ -1549,8 +1520,26 @@ main {
   overflow: hidden;
   isolation: isolate;
   min-height: 100%;
-  margin-left: -122px;
-  clip-path: ellipse(66% 154% at 100% 62%);
+  margin-left: -200px;
+  /* Pull it slightly left to give room for the fade */
+  -webkit-mask-image: radial-gradient(ellipse 100% 140% at 100% 50%,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 1) 30%,
+      rgba(0, 0, 0, 0.85) 50%,
+      rgba(0, 0, 0, 0.65) 65%,
+      rgba(0, 0, 0, 0.40) 80%,
+      rgba(0, 0, 0, 0.15) 90%,
+      rgba(0, 0, 0, 0.05) 95%,
+      rgba(0, 0, 0, 0) 100%);
+  mask-image: radial-gradient(ellipse 100% 140% at 100% 50%,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 1) 30%,
+      rgba(0, 0, 0, 0.85) 50%,
+      rgba(0, 0, 0, 0.65) 65%,
+      rgba(0, 0, 0, 0.40) 80%,
+      rgba(0, 0, 0, 0.15) 90%,
+      rgba(0, 0, 0, 0.05) 95%,
+      rgba(0, 0, 0, 0) 100%);
 }
 
 .home-hero-visual::before {
@@ -1569,12 +1558,10 @@ main {
   position: absolute;
   inset: 0;
   background:
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(13, 27, 42, 0.14) 0%,
       rgba(13, 27, 42, 0.04) 38%,
-      rgba(13, 27, 42, 0.12) 100%
-    );
+      rgba(13, 27, 42, 0.12) 100%);
   z-index: 1;
 }
 
@@ -1752,6 +1739,8 @@ main {
     height: 400px;
     margin-left: 0;
     clip-path: none;
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 1) 30%);
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 1) 30%);
   }
 
   .home-hero-visual::before {
@@ -2874,6 +2863,7 @@ a.home-cta-contact-item:hover {
     min-height: 220px;
   }
 }
+
 /* ─── 404 Not Found ──────────────────────────────────────── */
 
 .nf-hero {