fix(Hero): gradient mask-image to feather sharp PNG alpha edges

PNG has hard alpha cutoff edges — adds left (0%→14%) and top (0%→10%)
linear-gradient masks via mask-composite:intersect so both edges fade
simultaneously into the cream background, matching Figma's seamless look.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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"
       />