diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 317c2b0..c94a6b5 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -58,14 +58,20 @@ export function Hero() {
         </div>
       </div>
 
-      {/* Right: hero image as background-image so transparent PNG blends into cream section */}
+      {/* Right: hero image — gradient mask fades left + top edges into the cream background */}
       <div
         className="h-[36.4375rem] shrink-0 w-[55.4375rem]"
         style={{
           backgroundImage: "url('/hero.png')",
-          backgroundSize: "contain",
-          backgroundPosition: "right center",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
+          WebkitMaskImage:
+            "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+          WebkitMaskComposite: "destination-in",
+          maskImage:
+            "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+          maskComposite: "intersect",
         }}
         aria-hidden="true"
       />