feat(marketing): ambient "shift" canvas hero (replaces the desk illustration)

Port of crnacura/AmbientCanvasBackgrounds' shift effect: large circles drift
at random with hue driven by 3D simplex noise, drawn to an offscreen buffer
then blurred and composited onto the visible canvas. Re-tuned to a light brand
palette (pale periwinkle base; blue→violet→coral blooms) so the dark hero copy
stays readable. Self-contained (vendored simplex noise), scoped to the hero,
respects prefers-reduced-motion, and pauses when scrolled out of view / tab
hidden.

- Replace claws-at-desk.png with <HeroAmbient/>; add a soft fade into the
  section below.
- Mask the animated hero region in the marketing @visual snapshot (keeps the
  baseline deterministic) and refresh the baseline.
- Fix a latent AA contrast bug the old illustration was hiding: the CrewStrip
  caption (#77879e on white, 3.65:1) → #647289 (4.87:1).

Co-Authored-By: Claude Opus 4.8 <[email protected]>

frontend/src/components/marketing/Sections.tsx

@@ -1,6 +1,8 @@
 import Image from "next/image";
 import Link from "next/link";
 
+import { HeroAmbient } from "./HeroAmbient";
+
 /* Marketing landing — WorkClaw's full section layout/styling reproduced 1:1,
    Clawmates-branded with honest claims (no borrowed customer logos, no
    unverified SOC 2). Measurements/colours lifted from the live source.
@@ -19,6 +21,8 @@ export function Hero() {
       className="relative -mt-[98px] h-[760px] w-full overflow-hidden bg-[#ebf4fd] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
       style={{ zIndex: 2 }}
     >
+      {/* Animated ambient backdrop (replaces the hero illustration). */}
+      <HeroAmbient />
       <div
         className="absolute left-1/2 flex w-full max-w-[720px] -translate-x-1/2 flex-col items-center px-6 text-center"
         style={{ top: "clamp(160px, 12.0139vw, 173px)", gap: 48, zIndex: 2 }}
@@ -96,21 +100,12 @@ export function Hero() {
           ))}
         </ul>
       </div>
+      {/* Soft fade into the white section below. */}
       <div
-        className="absolute left-1/2 flex w-[600px] -translate-x-1/2 justify-center sm:w-[740px] md:w-[820px] lg:w-[920px] xl:w-[1020px] 2xl:w-[1098px]"
-        style={{ bottom: "-9%", zIndex: 1 }}
-      >
-        <Image
-          src="/images/marketing/claws-at-desk.png"
-          alt="The clawmate crew working at a shared desk"
-          width={1672}
-          height={919}
-          priority
-          unoptimized
-          className="h-auto w-full"
-          style={{ filter: "drop-shadow(0 24px 40px rgba(22,29,39,0.08))" }}
-        />
-      </div>
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-white"
+        style={{ zIndex: 1 }}
+      />
     </section>
   );
 }
@@ -120,7 +115,7 @@ export function CrewStrip() {
   return (
     <div className="relative w-full" style={{ zIndex: 1 }}>
       <div className="relative z-[1] flex flex-col items-center gap-6 pt-8 pb-14 lg:gap-8">
-        <p className="text-center text-[16px] font-semibold text-[#77879e]">
+        <p className="text-center text-[16px] font-semibold text-[#647289]">
           A whole crew, built on the open{" "}
           <span className="text-marketing-coral-strong">Claw</span> runtime
         </p>