feat(web): animated mesh hero with peer constellation + comparison section

- New hero section with a live animated mesh background: three equal
  Claude Code peers in a triangle layout + six desaturated background
  peers, all rendered pixel-perfect from pure React/CSS using the exact
  Unicode characters and colors from Claude Code's own source.
- User prompts type into the bottom prompt-input box and "submit" to
  scrollback (matching real Claude Code behavior). Mesh sends fly as
  envelope icons with fading trails between peers; receivers pulse on
  arrival. Dynamic routing by peer displayName.
- Radial vignette overlay keeps the hero title crisp while letting the
  corner peers pulse visibly around the edges. Top/bottom linear fades
  bleed into adjacent sections.
- Responsive scaling via ResizeObserver: cover-fit in hero bg context,
  contain-fit for standalone use.
- Features section: added Skills, MCPs, and Commands as the first
  three tabs — the mesh's real differentiators. Updated subtitle copy.
- New "Where claudemesh fits" section positioned between Features and
  WhatIsClaudemesh: four-card comparison (vs MCP, vs subagents,
  vs OpenClaw, and the positive claim) framing claudemesh as a wire
  between Claude Code sessions, not a replacement for any of them.

All work is additive: 10 new files in apps/web/src/modules/marketing/
home/fake-claude-code/ plus hero-mesh-animation.tsx, hero-with-mesh.tsx,
and where-mesh-fits.tsx. Single edit each to features.tsx and
(marketing)/page.tsx to swap in the new hero and mount the new section.

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

apps/web/src/modules/marketing/home/hero-with-mesh.tsx

@@ -0,0 +1,118 @@
+import Link from "next/link";
+
+import { HeroMeshAnimation } from "./hero-mesh-animation";
+import { Reveal, SectionIcon } from "./_reveal";
+
+export const HeroWithMesh = () => {
+  return (
+    <section className="relative overflow-hidden border-b border-[var(--cm-border)] bg-[var(--cm-bg)]">
+      {/* Full-bleed mesh animation as hero background */}
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div className="absolute inset-0">
+          <HeroMeshAnimation fit="cover" />
+        </div>
+        {/* Radial vignette: dark where text sits, transparent at the edges
+            so the corner peers keep pulsing visibly */}
+        <div
+          className="absolute inset-0"
+          style={{
+            background:
+              "radial-gradient(ellipse 900px 540px at 50% 38%, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.75) 38%, rgba(5,5,5,0.3) 68%, rgba(5,5,5,0) 100%)",
+          }}
+        />
+        {/* Top/bottom fades so the animation bleeds into surrounding sections */}
+        <div
+          className="absolute inset-x-0 top-0 h-32"
+          style={{
+            background:
+              "linear-gradient(to bottom, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0) 100%)",
+          }}
+        />
+        <div
+          className="absolute inset-x-0 bottom-0 h-32"
+          style={{
+            background:
+              "linear-gradient(to top, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0) 100%)",
+          }}
+        />
+      </div>
+
+      <div className="relative z-10 mx-auto flex max-w-[var(--cm-max-w)] flex-col items-center px-6 py-24 md:px-12 md:py-32">
+        <Reveal className="mb-8">
+          <SectionIcon glyph="mesh" />
+        </Reveal>
+
+        <Reveal delay={1}>
+          <h1
+            className="max-w-4xl text-center text-[clamp(2.75rem,7vw,5.25rem)] font-medium leading-[1.08] tracking-tight text-[var(--cm-fg)]"
+            style={{
+              fontFamily: "var(--cm-font-serif)",
+              textShadow: "0 2px 30px rgba(0,0,0,0.85)",
+            }}
+          >
+            Your Claude Code sessions{" "}
+            <span className="text-[var(--cm-clay)]">work alone.</span>
+            <br />
+            <span className="text-[var(--cm-fg-secondary)]">
+              claudemesh connects them.
+            </span>
+          </h1>
+        </Reveal>
+
+        <Reveal delay={2}>
+          <p
+            className="mx-auto mt-8 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)] md:text-xl"
+            style={{
+              fontFamily: "var(--cm-font-serif)",
+              textShadow: "0 2px 20px rgba(0,0,0,0.8)",
+            }}
+          >
+            Share context, files, skills, and MCPs across every Claude Code
+            session — encrypted, with zero setup. The broker routes ciphertext.
+            It never reads your messages.
+          </p>
+        </Reveal>
+
+        <Reveal delay={3}>
+          <div className="mt-10 flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
+            <Link
+              href="/auth/register"
+              className="group inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-clay)] px-5 py-3 text-[15px] font-medium text-[var(--cm-fg)] shadow-[0_10px_40px_rgba(215,119,87,0.35)] transition-colors duration-300 hover:bg-[var(--cm-clay-hover)]"
+              style={{ fontFamily: "var(--cm-font-sans)" }}
+            >
+              Start free
+              <span className="transition-transform duration-300 group-hover:translate-x-0.5">
+                →
+              </span>
+            </Link>
+            <div
+              className="flex items-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)]/85 px-4 py-3 text-[13px] text-[var(--cm-fg-secondary)] backdrop-blur-md"
+              style={{ fontFamily: "var(--cm-font-mono)" }}
+            >
+              <span className="text-[var(--cm-clay)]">$</span>
+              <span>curl -fsSL claudemesh.com/install | bash</span>
+            </div>
+          </div>
+        </Reveal>
+
+        <Reveal delay={4}>
+          <p
+            className="mt-14 text-center text-sm text-[var(--cm-fg-tertiary)]"
+            style={{
+              fontFamily: "var(--cm-font-sans)",
+              textShadow: "0 2px 16px rgba(0,0,0,0.8)",
+            }}
+          >
+            Open-source CLI · Free during public beta ·{" "}
+            <Link
+              href="https://github.com/alezmad/claudemesh-cli"
+              className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 transition-colors hover:text-[var(--cm-fg)] hover:decoration-[var(--cm-clay)]"
+            >
+              View source
+            </Link>
+          </p>
+        </Reveal>
+      </div>
+    </section>
+  );
+};