feat(web): hero redesign — cycling step rotator + full-width video section

Restructures the landing page above-the-fold into two distinct sections:

1. **Hero — left copy + cycling tile, no static stack of three blocks**
   New `<HeroStepRotator>` (Framer Motion client component) shows ONE
   tile centred in the column, cycling prompt.txt → build.log →
   claude_desktop_config.json every 3.5s. Auto-advance pauses on hover
   and exposes a 3-dot tablist so users can jump to any step. The active
   dot grows wide with an accent glow.

   Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a
   radial glow that translates toward the cursor — both driven by motion
   values, so the transforms stay on the GPU compositor instead of
   re-rendering on every mousemove. `useReducedMotion()` strips the
   tilt + glow translation and collapses the page transition to an
   instant cross-fade (the rotation itself still advances — it's content,
   not decoration).

   Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video
   section below is teased above the fold. New scroll cue ("see it run"
   + animated chevron) sits at the bottom of the hero, anchored to
   #flow.

2. **Flow video — full-width edge-to-edge under the hero (new section)**
   The hero.mp4 / hero.webm pair moves out of the "How it works"
   section into its own #flow section. No max-w wrapper — it spans the
   viewport with `w-full aspect-video`, so on a 1080p monitor the video
   gets the full 1920px width. Adds a subtle radial vignette so the
   black edges blend into the page chrome.

3. **"How it works" — now lean**
   Video removed (it's the flow section now). Just the three textual
   cards as supporting copy.

Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes
typecheck + Next.js production build with no new warnings; LCP path is
untouched since the rotator is client-hydrated after first paint and
Framer Motion is tree-shaken to the components we import.

Note: visitors with `prefers-reduced-motion: reduce` will still see the
video's poster instead of autoplay — Chrome blocks the network fetch
entirely for autoplay media when reduced-motion is set. The flow video
remains visible for the rest, and the step rotator continues to cycle
its content (with instant cross-fade instead of slide+scale).

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

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

@@ -1,6 +1,9 @@
+import { HeroStepRotator } from '@/components/hero-step-rotator';
 import { JsonLd } from '@/components/json-ld';
+import { ParticleHero } from '@/components/particle-hero';
 import { StaticCodeBlock } from '@/components/static-code-block';
 import { FAQ, faqJsonLd } from '@/lib/seo';
+import { ChevronDown } from 'lucide-react';
 import Link from 'next/link';
 
 const PROMPT_EXAMPLE = `Create an MCP server that searches our Notion workspace.
@@ -83,14 +86,25 @@ const TIERS = [
 export default function Landing() {
   return (
     <>
-      {/* Hero */}
-      <section className="relative border-b border-[--color-border]">
-        <div className="mx-auto grid max-w-6xl gap-10 px-6 py-14 sm:py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12 md:py-28">
+      {/* Hero — left: copy + CTAs, right: cycling step-rotator tile.
+          The old layout stacked three static code blocks vertically; the
+          new layout shows one centered tile that cycles through the same
+          three artifacts (prompt → build.log → claude config) with a
+          mouse-reactive 3D tilt and a step indicator. Shorter overall
+          so the video section below is teased above the fold. */}
+      <section className="relative overflow-hidden border-b border-[--color-border]">
+        {/* WebGL particle field — capability-detected client component.
+            Sits behind the hero content at z-0 with pointer-events:none
+            so the CTAs above remain fully interactive. The canvas listens
+            for pointermove on window itself, so the ring still tracks
+            the cursor through the content above. */}
+        <ParticleHero />
+        <div className="relative z-10 mx-auto grid max-w-6xl gap-10 px-6 py-12 sm:py-14 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12 md:py-16">
           <div className="min-w-0">
             <span className="mono inline-block rounded-full border border-[--color-border] bg-[--color-bg-elevated] px-2.5 py-0.5 text-[11px] tracking-wide text-[--color-fg-muted]">
               v0.1 — updated 2026-05-20
             </span>
-            <h1 className="mt-6 text-balance text-[30px] font-semibold leading-[1.06] tracking-tight sm:text-[40px] md:text-[56px]">
+            <h1 className="mt-6 text-balance text-[30px] font-semibold leading-[1.06] tracking-tight sm:text-[40px] md:text-[52px]">
               Describe your tool.
               <br />
               We host the server.
@@ -115,7 +129,7 @@ export default function Landing() {
                 Read the docs
               </Link>
             </div>
-            <div className="mt-10 flex flex-wrap gap-x-6 gap-y-2 text-[12px] text-[--color-fg-subtle]">
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-2 text-[12px] text-[--color-fg-subtle]">
               <span className="inline-flex items-center gap-1.5">
                 <span className="size-1.5 rounded-full bg-emerald-400" /> OAuth 2.1 + PKCE
               </span>
@@ -132,14 +146,53 @@ export default function Landing() {
           </div>
 
           <div className="relative min-w-0">
-            <div className="absolute -inset-px rounded-lg border border-[--color-border-strong]" />
-            <div className="space-y-3">
-              <StaticCodeBlock label="prompt.txt" code={PROMPT_EXAMPLE} />
-              <StaticCodeBlock label="build.log" code={OUTPUT_EXAMPLE} />
-              <StaticCodeBlock label="claude_desktop_config.json" code={INSTALL_SNIPPET} />
-            </div>
+            <HeroStepRotator />
           </div>
         </div>
+        {/* Scroll cue — hints the video section sits directly below. */}
+        <a
+          href="#flow"
+          aria-label="See the flow in action"
+          className="absolute inset-x-0 bottom-2 z-10 mx-auto flex w-fit items-center gap-1 text-[11px] uppercase tracking-[0.18em] text-[--color-fg-subtle] transition-colors hover:text-[--color-fg-muted]"
+        >
+          <span>see it run</span>
+          <ChevronDown size={12} className="animate-bounce" />
+        </a>
+      </section>
+
+      {/* Flow video — full-width edge-to-edge under the hero. The clip
+          shows the real flow (prompt → server schematic → live connection
+          to Claude Desktop) in three smooth phases. autoplay-muted-loop +
+          playsInline satisfies every mobile browser autoplay policy; the
+          `poster` carries first paint while the video decodes. */}
+      <section
+        id="flow"
+        className="relative w-full overflow-hidden border-b border-[--color-border] bg-black"
+      >
+        <div className="relative aspect-video w-full">
+          <video
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="auto"
+            poster="/videos/hero-poster.jpg"
+            className="size-full object-cover"
+            aria-label="Animation: a 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>
+          {/* Subtle vignette to integrate edges into the rest of the page */}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-0"
+            style={{
+              background:
+                'radial-gradient(ellipse at center, transparent 60%, rgba(10,10,11,0.55) 100%)',
+            }}
+          />
+        </div>
       </section>
 
       {/* How it works */}
@@ -152,33 +205,11 @@ export default function Landing() {
             </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>
-
+          {/* The same video used to live here; it now has its own
+              full-width section directly under the hero so it's teased
+              above the fold and gets edge-to-edge real estate. This
+              section keeps the three explanatory cards as supporting
+              copy under the video. */}
           <div className="grid gap-6 md:grid-cols-3">
             {[
               {