feat(web): Remotion hero video — Section 2 (prompt → server → connect)

New @bmm/video workspace at remotion/. Renders an 8s 1920×1080 H.264
+ WebM + JPG poster sequence that visualises the three-step "How it
works" pitch literally:

- Beat 1 (0-2s): "Search our Notion workspace" word-by-word entrance
  with spring-in from below + brief indigo under-glow + monospace
  prompt.txt label. Blinking cursor bridges the loop seam.
- Beat 2 (2-5s): each prompt word detonates into ~9 particles per
  word; particles drift, then magnetically converge onto target slots
  along a server schematic that strokes itself on. Scan-line sweep +
  corner labels (mcp-notion, OAuth 2.1, search_pages, get_page_content)
  sell that this is a real artefact, not a placeholder.
- Beat 3 (5-8s): Claude Desktop client panel slides in from the right;
  a Bézier wire animates between server and client; three data-packet
  dots travel along the wire; 200-OK tag pops; green live-dot pulses
  on the server. Last 12 frames fade to black so frame 239 ≈ frame 0
  and browser <video loop> has no visible seam.

Brand palette is hard-coded in lib/colors.ts to match globals.css —
keeps the Remotion bundle self-contained (no Tailwind import needed).
springIn / softSpring / clampLerp / rand helpers in lib/easings.ts
power the motion vocabulary. Concurrency=1 + yuv420p in the config
gives a deterministic render that plays on every <video> tag.

File sizes: hero.mp4 449 KB, hero.webm 258 KB, hero-poster.jpg 33 KB —
all well under the 3 MB / 250 KB ceilings.

Section 2 ("How it works") now opens with the video in a
border-bordered aspect-video panel between the heading and the three
existing cards. autoPlay+muted+loop+playsInline satisfies every mobile
autoplay policy; motion-reduce:hidden swaps in the static poster for
prefers-reduced-motion users.

Scripts:
- pnpm --filter @bmm/video render:all  (mp4 + webm + poster)
- pnpm --filter @bmm/video to-web      (copy to apps/web/public/videos/)
- pnpm --filter @bmm/video build       (both, end-to-end)

`to-web` is the script name because `publish` collides with pnpm's
built-in npm-publish command which refused to run with an unclean tree.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/(marketing)/page.tsx

@@ -145,12 +145,40 @@ export default function Landing() {
       {/* How it works */}
       <section id="how" className="border-b border-[--color-border] py-14 sm:py-20">
         <div className="mx-auto max-w-6xl px-6">
-          <div className="mb-12 max-w-2xl">
+          <div className="mb-10 max-w-2xl">
             <h2 className="text-[28px] font-semibold tracking-tight">How it works</h2>
             <p className="mt-2 text-[14px] text-[--color-fg-muted]">
               Three steps. No JSON to write, no Docker to manage.
             </p>
           </div>
+
+          {/* Hero video — visualises the three beats: prompt → transform →
+              live server connected to client. autoplay-muted-loop satisfies
+              every mobile browser autoplay policy. WebM is offered first
+              (smaller file on Chrome/Firefox), MP4 is the Safari fallback.
+              motion-reduce:hidden swaps in a static poster for users with
+              prefers-reduced-motion — Tailwind ships that variant by default. */}
+          <div className="relative mb-12 aspect-video overflow-hidden rounded-lg border border-[--color-border-strong] bg-black">
+            <video
+              autoPlay
+              muted
+              loop
+              playsInline
+              poster="/videos/hero-poster.jpg"
+              className="size-full object-cover motion-reduce:hidden"
+              aria-label="Animation: a natural-language prompt becomes a live MCP server and connects to Claude Desktop"
+            >
+              <source src="/videos/hero.webm" type="video/webm" />
+              <source src="/videos/hero.mp4" type="video/mp4" />
+            </video>
+            {/* prefers-reduced-motion fallback */}
+            <img
+              src="/videos/hero-poster.jpg"
+              alt="Prompt becoming a live MCP server"
+              className="hidden size-full object-cover motion-reduce:block"
+            />
+          </div>
+
           <div className="grid gap-6 md:grid-cols-3">
             {[
               {