diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 4fdd64df7..8792e9915 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,15 +1,10 @@
 import { HeroTwoCol } from '../components/landing/HeroTwoCol';
-import { ArchDiagram } from '../components/landing/ArchDiagram';
-import { ValueProps } from '../components/landing/ValueProps';
-import { LangGraphShowcase } from '../components/landing/LangGraphShowcase';
-import { DeepAgentsShowcase } from '../components/landing/DeepAgentsShowcase';
 import { StatsStrip } from '../components/landing/StatsStrip';
-// import { SocialProof } from '../components/landing/SocialProof';
 import { ProblemSection } from '../components/landing/ProblemSection';
-import { LibrariesSection } from '../components/landing/LibrariesSection';
-import { ChatFeaturesSection } from '../components/landing/ChatFeaturesSection';
+import { PilotSolution } from '../components/landing/PilotSolution';
+import { TheStack } from '../components/landing/TheStack';
 import { WhitePaperSection } from '../components/landing/WhitePaperSection';
-import { HomePilotCTA } from '../components/landing/HomePilotCTA';
+import { PilotFooterCTA } from '../components/landing/PilotFooterCTA';
 import { tokens } from '../../lib/design-tokens';
 
 export default async function HomePage() {
@@ -18,34 +13,23 @@ export default async function HomePage() {
       {/* Ambient gradient blobs */}
       <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: tokens.gradient.warm, top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
       <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2000, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 3500, right: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 5000, left: '30%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 6500, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
-      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.cool, top: 8000, left: '20%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2200, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 3800, right: '20%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
 
       {/* 1. Hook — headline, animation, CTA */}
       <HeroTwoCol />
       {/* 2. Trust — quick credibility stats */}
       <StatsStrip />
-      {/* <SocialProof /> */}
       {/* 3. Problem — last-mile gap narrative */}
       <ProblemSection />
-      {/* 4. Libraries — teaser cards for Angular, Render, Chat */}
-      <LibrariesSection />
-      {/* 5. Chat features — interactive 4-tab scenarios */}
-      <ChatFeaturesSection />
-      {/* 6. Value — why this product, with interactive code tabs */}
-      <ValueProps />
-      {/* 7. Depth — capability showcases */}
-      <LangGraphShowcase />
-      <DeepAgentsShowcase />
-      {/* 9. White paper free download */}
+      {/* 4. Solution — pilot-to-prod program */}
+      <PilotSolution />
+      {/* 5. Product — the three-library stack */}
+      <TheStack />
+      {/* 6. Lead gen — whitepaper download */}
       <WhitePaperSection />
-      {/* 10. Pilot program CTA */}
-      <HomePilotCTA />
-      {/* 11. Architecture — technical credibility */}
-      <ArchDiagram />
+      {/* 7. Final CTA — "Ready to stop stalling?" */}
+      <PilotFooterCTA />
     </div>
   );
 }
diff --git a/apps/website/src/components/landing/PilotFooterCTA.tsx b/apps/website/src/components/landing/PilotFooterCTA.tsx
index 9490f3d1d..03a27be32 100644
--- a/apps/website/src/components/landing/PilotFooterCTA.tsx
+++ b/apps/website/src/components/landing/PilotFooterCTA.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import Link from 'next/link';
 import { tokens } from '../../../lib/design-tokens';
 import { CitationBadge } from './CitationBadge';
 
@@ -88,9 +89,8 @@ export function PilotFooterCTA() {
           }}
         >
           {/* Primary CTA */}
-          <motion.a
-            href="#whitepaper-gate"
-            whileHover={{ boxShadow: '0 0 20px rgba(255, 255, 255, 0.3)' }}
+          <Link
+            href="/pilot-to-prod"
             style={{
               display: 'inline-block',
               padding: '0.875rem 2rem',
@@ -105,7 +105,7 @@ export function PilotFooterCTA() {
             }}
           >
             Start Your Pilot →
-          </motion.a>
+          </Link>
 
           {/* Secondary CTA */}
           <a
diff --git a/apps/website/src/components/landing/PilotSolution.tsx b/apps/website/src/components/landing/PilotSolution.tsx
new file mode 100644
index 000000000..a17a700ba
--- /dev/null
+++ b/apps/website/src/components/landing/PilotSolution.tsx
@@ -0,0 +1,157 @@
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const STEPS = [
+  {
+    num: 1,
+    title: 'Pilot',
+    description: 'We assess your LangGraph agent and Angular codebase. You get a concrete production plan.',
+  },
+  {
+    num: 2,
+    title: 'Build',
+    description: 'We work alongside your team to integrate the framework. Streaming, generative UI, testing — done right.',
+  },
+  {
+    num: 3,
+    title: 'Ship',
+    description: 'Your agent goes to production with your team owning every line. No vendor lock-in, no black boxes.',
+  },
+];
+
+export function PilotSolution() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.7rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.12em',
+          fontWeight: 700,
+          color: tokens.colors.accent,
+          marginBottom: 14,
+        }}>
+          The Solution
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontSize: 'clamp(26px, 3.5vw, 46px)',
+          fontWeight: 800,
+          lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+          marginBottom: 10,
+        }}>
+          From proof of concept to production in 90 days
+        </h2>
+        <p style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontStyle: 'italic',
+          fontSize: '1.05rem',
+          color: tokens.colors.textSecondary,
+          maxWidth: 560,
+          margin: '0 auto',
+        }}>
+          The structured pilot engagement that closes the last-mile gap.
+        </p>
+      </motion.div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+        gap: 16,
+        maxWidth: 840,
+        margin: '0 auto 36px',
+      }}>
+        {STEPS.map((step, i) => (
+          <motion.div
+            key={step.num}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.1, duration: 0.5 }}
+            style={{
+              padding: '28px 20px',
+              textAlign: 'center',
+              borderRadius: 18,
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              border: `1px solid ${tokens.glass.border}`,
+              boxShadow: tokens.glass.shadow,
+            }}
+          >
+            <div style={{
+              width: 32,
+              height: 32,
+              borderRadius: '50%',
+              background: tokens.colors.accent,
+              color: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              margin: '0 auto 14px',
+            }}>
+              {step.num}
+            </div>
+            <h3 style={{
+              fontFamily: 'Inter, sans-serif',
+              fontSize: '1rem',
+              fontWeight: 600,
+              color: tokens.colors.textPrimary,
+              marginBottom: 8,
+            }}>
+              {step.title}
+            </h3>
+            <p style={{
+              fontSize: '0.82rem',
+              color: tokens.colors.textSecondary,
+              lineHeight: 1.5,
+            }}>
+              {step.description}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+
+      <div style={{ textAlign: 'center' }}>
+        <Link
+          href="/pilot-to-prod"
+          style={{
+            display: 'inline-block',
+            padding: '0.875rem 2rem',
+            background: tokens.colors.accent,
+            color: '#fff',
+            fontFamily: 'Inter, sans-serif',
+            fontSize: 15,
+            fontWeight: 600,
+            textDecoration: 'none',
+            borderRadius: 6,
+          }}
+        >
+          Explore the Pilot Program →
+        </Link>
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.62rem',
+          color: tokens.colors.textMuted,
+          marginTop: 12,
+          letterSpacing: '0.06em',
+        }}>
+          Included with every app deployment license
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/landing/TheStack.tsx b/apps/website/src/components/landing/TheStack.tsx
new file mode 100644
index 000000000..276d636f6
--- /dev/null
+++ b/apps/website/src/components/landing/TheStack.tsx
@@ -0,0 +1,211 @@
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const LIBRARIES = [
+  {
+    id: 'angular',
+    tag: 'Agent',
+    pkg: '@cacheplane/angular',
+    color: tokens.colors.accent,
+    rgb: '0,64,144',
+    headline: 'The reactive bridge to LangGraph',
+    description: 'Signal-native streaming connects your Angular templates directly to LangGraph agent state. Interrupts, persistence, time-travel, and branch history \u2014 every LangGraph feature has a first-class Angular API. Test deterministically with MockAgentTransport.',
+    pills: ['Angular Signals', 'LangGraph Cloud', 'MockAgentTransport'],
+    href: '/angular',
+    ctaLabel: 'Explore Agent',
+  },
+  {
+    id: 'render',
+    tag: 'Gen UI',
+    pkg: '@cacheplane/render',
+    color: tokens.colors.renderGreen,
+    rgb: '26,122,64',
+    headline: 'Agents that render UI \u2014 on open standards',
+    description: "Built on Vercel\u2019s json-render spec and Google\u2019s A2UI protocol. Your agent emits a render spec, your Angular components render it \u2014 with streaming JSON patches, component registries, and signal-native state. No coupling between agent logic and frontend.",
+    pills: ['Vercel json-render', 'Google A2UI', 'JSON Patch streaming'],
+    href: '/render',
+    ctaLabel: 'Explore Render',
+  },
+  {
+    id: 'chat',
+    tag: 'Chat',
+    pkg: '@cacheplane/chat',
+    color: tokens.colors.chatPurple,
+    rgb: '90,0,200',
+    headline: 'Production chat UI in days, not sprints',
+    description: 'Every component you need \u2014 streaming messages, tool call cards, interrupt panels, generative UI, debug overlay, theming \u2014 pre-built, composable, and WCAG accessible. Built on the Agent and Render libraries so everything works together from day one.',
+    pills: ['<chat-messages>', '<chat-debug>', 'WCAG accessible'],
+    href: '/chat',
+    ctaLabel: 'Explore Chat',
+  },
+];
+
+function Connector({ fromRgb, toRgb }: { fromRgb: string; toRgb: string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '2px 0' }}>
+      <div style={{
+        width: 2,
+        height: 28,
+        background: `linear-gradient(to bottom, rgba(${fromRgb}, 0.3), rgba(${toRgb}, 0.3))`,
+        borderRadius: 1,
+      }} />
+    </div>
+  );
+}
+
+export function TheStack() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.7rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.12em',
+          fontWeight: 700,
+          color: tokens.colors.accent,
+          marginBottom: 14,
+        }}>
+          The Cacheplane Stack
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontSize: 'clamp(26px, 3.5vw, 46px)',
+          fontWeight: 800,
+          lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+          marginBottom: 10,
+        }}>
+          Three libraries. One architecture.<br />
+          Every layer you need.
+        </h2>
+        <p style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontStyle: 'italic',
+          fontSize: '1.05rem',
+          color: tokens.colors.textSecondary,
+          maxWidth: 520,
+          margin: '0 auto',
+        }}>
+          Your LangGraph agent already works. These three libraries ship it.
+        </p>
+      </motion.div>
+
+      <div style={{ maxWidth: 860, margin: '0 auto', display: 'flex', flexDirection: 'column' }}>
+        {LIBRARIES.map((lib, i) => (
+          <div key={lib.id}>
+            {i > 0 && (
+              <Connector
+                fromRgb={LIBRARIES[i - 1].rgb}
+                toRgb={lib.rgb}
+              />
+            )}
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: i * 0.1 }}
+              style={{
+                background: `rgba(${lib.rgb}, 0.03)`,
+                border: `1px solid rgba(${lib.rgb}, 0.15)`,
+                borderRadius: 14,
+                padding: '28px 28px 24px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 12,
+              }}
+            >
+              <span style={{
+                display: 'inline-block',
+                alignSelf: 'flex-start',
+                fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                fontSize: '0.58rem',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.07em',
+                padding: '2px 9px',
+                borderRadius: 5,
+                color: '#fff',
+                background: lib.color,
+              }}>
+                {lib.tag}
+              </span>
+
+              <p style={{
+                fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                fontSize: '0.76rem',
+                fontWeight: 700,
+                color: lib.color,
+                margin: 0,
+              }}>
+                {lib.pkg}
+              </p>
+
+              <h3 style={{
+                fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+                fontSize: '1.3rem',
+                fontWeight: 700,
+                color: tokens.colors.textPrimary,
+                lineHeight: 1.25,
+                margin: 0,
+              }}>
+                {lib.headline}
+              </h3>
+
+              <p style={{
+                fontFamily: 'Inter, sans-serif',
+                fontSize: '0.88rem',
+                color: tokens.colors.textSecondary,
+                lineHeight: 1.6,
+                margin: 0,
+              }}>
+                {lib.description}
+              </p>
+
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+                {lib.pills.map(pill => (
+                  <span key={pill} style={{
+                    fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                    fontSize: '0.58rem',
+                    padding: '2px 8px',
+                    borderRadius: 4,
+                    background: `rgba(${lib.rgb}, 0.07)`,
+                    color: lib.color,
+                    border: `1px solid rgba(${lib.rgb}, 0.15)`,
+                  }}>
+                    {pill}
+                  </span>
+                ))}
+              </div>
+
+              <Link
+                href={lib.href}
+                style={{
+                  fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                  fontSize: '0.72rem',
+                  fontWeight: 700,
+                  color: lib.color,
+                  textDecoration: 'none',
+                  marginTop: 4,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 4,
+                }}
+              >
+                {lib.ctaLabel} →
+              </Link>
+            </motion.div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md b/docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md
new file mode 100644
index 000000000..8511cdba3
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-10-homepage-narrative-funnel.md
@@ -0,0 +1,549 @@
+# Homepage Narrative Funnel Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Redesign the home page into a 7-section narrative funnel (Hero → Stats → Problem → PilotSolution → TheStack → WhitePaper → StopStallingCTA).
+
+**Architecture:** Two new client components (PilotSolution, TheStack) using the existing glassmorphism design system and framer-motion scroll animations. Reuse PilotFooterCTA for the closing CTA. Simplify page.tsx by removing 7 section imports and reducing ambient blobs.
+
+**Tech Stack:** Next.js 16 (App Router), React 19, framer-motion, `@cacheplane/design-tokens`
+
+**Spec:** `docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md`
+
+---
+
+### Task 1: Create PilotSolution component
+
+**Files:**
+- Create: `apps/website/src/components/landing/PilotSolution.tsx`
+
+- [ ] **Step 1: Create PilotSolution.tsx**
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const STEPS = [
+  {
+    num: 1,
+    title: 'Pilot',
+    description: 'We assess your LangGraph agent and Angular codebase. You get a concrete production plan.',
+  },
+  {
+    num: 2,
+    title: 'Build',
+    description: 'We work alongside your team to integrate the framework. Streaming, generative UI, testing — done right.',
+  },
+  {
+    num: 3,
+    title: 'Ship',
+    description: 'Your agent goes to production with your team owning every line. No vendor lock-in, no black boxes.',
+  },
+];
+
+export function PilotSolution() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.7rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.12em',
+          fontWeight: 700,
+          color: tokens.colors.accent,
+          marginBottom: 14,
+        }}>
+          The Solution
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontSize: 'clamp(26px, 3.5vw, 46px)',
+          fontWeight: 800,
+          lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+          marginBottom: 10,
+        }}>
+          From proof of concept to production in 90 days
+        </h2>
+        <p style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontStyle: 'italic',
+          fontSize: '1.05rem',
+          color: tokens.colors.textSecondary,
+          maxWidth: 560,
+          margin: '0 auto',
+        }}>
+          The structured pilot engagement that closes the last-mile gap.
+        </p>
+      </motion.div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+        gap: 16,
+        maxWidth: 840,
+        margin: '0 auto 36px',
+      }}>
+        {STEPS.map((step, i) => (
+          <motion.div
+            key={step.num}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: i * 0.1, duration: 0.5 }}
+            style={{
+              padding: '28px 20px',
+              textAlign: 'center',
+              borderRadius: 18,
+              background: tokens.glass.bg,
+              backdropFilter: `blur(${tokens.glass.blur})`,
+              WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
+              border: `1px solid ${tokens.glass.border}`,
+              boxShadow: tokens.glass.shadow,
+            }}
+          >
+            <div style={{
+              width: 32,
+              height: 32,
+              borderRadius: '50%',
+              background: tokens.colors.accent,
+              color: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+              fontSize: '0.75rem',
+              fontWeight: 700,
+              margin: '0 auto 14px',
+            }}>
+              {step.num}
+            </div>
+            <h3 style={{
+              fontFamily: 'Inter, sans-serif',
+              fontSize: '1rem',
+              fontWeight: 600,
+              color: tokens.colors.textPrimary,
+              marginBottom: 8,
+            }}>
+              {step.title}
+            </h3>
+            <p style={{
+              fontSize: '0.82rem',
+              color: tokens.colors.textSecondary,
+              lineHeight: 1.5,
+            }}>
+              {step.description}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+
+      <div style={{ textAlign: 'center' }}>
+        <Link
+          href="/pilot-to-prod"
+          style={{
+            display: 'inline-block',
+            padding: '0.875rem 2rem',
+            background: tokens.colors.accent,
+            color: '#fff',
+            fontFamily: 'Inter, sans-serif',
+            fontSize: 15,
+            fontWeight: 600,
+            textDecoration: 'none',
+            borderRadius: 6,
+          }}
+        >
+          Explore the Pilot Program →
+        </Link>
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.62rem',
+          color: tokens.colors.textMuted,
+          marginTop: 12,
+          letterSpacing: '0.06em',
+        }}>
+          Included with every app deployment license
+        </p>
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify the component compiles**
+
+Run: `cd apps/website && npx next build 2>&1 | head -30`
+
+If there are type errors, fix them. The component should compile without errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/PilotSolution.tsx
+git commit -m "feat(website): add PilotSolution component for home page"
+```
+
+---
+
+### Task 2: Create TheStack component
+
+**Files:**
+- Create: `apps/website/src/components/landing/TheStack.tsx`
+
+- [ ] **Step 1: Create TheStack.tsx**
+
+```tsx
+'use client';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { tokens } from '@cacheplane/design-tokens';
+
+const LIBRARIES = [
+  {
+    id: 'angular',
+    tag: 'Agent',
+    pkg: '@cacheplane/angular',
+    color: tokens.colors.accent,
+    rgb: '0,64,144',
+    headline: 'The reactive bridge to LangGraph',
+    description: 'Signal-native streaming connects your Angular templates directly to LangGraph agent state. Interrupts, persistence, time-travel, and branch history — every LangGraph feature has a first-class Angular API. Test deterministically with MockAgentTransport.',
+    pills: ['Angular Signals', 'LangGraph Cloud', 'MockAgentTransport'],
+    href: '/angular',
+    ctaLabel: 'Explore Agent',
+  },
+  {
+    id: 'render',
+    tag: 'Gen UI',
+    pkg: '@cacheplane/render',
+    color: tokens.colors.renderGreen,
+    rgb: '26,122,64',
+    headline: 'Agents that render UI — on open standards',
+    description: "Built on Vercel\u2019s json-render spec and Google\u2019s A2UI protocol. Your agent emits a render spec, your Angular components render it — with streaming JSON patches, component registries, and signal-native state. No coupling between agent logic and frontend.",
+    pills: ['Vercel json-render', 'Google A2UI', 'JSON Patch streaming'],
+    href: '/render',
+    ctaLabel: 'Explore Render',
+  },
+  {
+    id: 'chat',
+    tag: 'Chat',
+    pkg: '@cacheplane/chat',
+    color: tokens.colors.chatPurple,
+    rgb: '90,0,200',
+    headline: 'Production chat UI in days, not sprints',
+    description: 'Every component you need — streaming messages, tool call cards, interrupt panels, generative UI, debug overlay, theming — pre-built, composable, and WCAG accessible. Built on the Agent and Render libraries so everything works together from day one.',
+    pills: ['<chat-messages>', '<chat-debug>', 'WCAG accessible'],
+    href: '/chat',
+    ctaLabel: 'Explore Chat',
+  },
+];
+
+function Connector({ fromRgb, toRgb }: { fromRgb: string; toRgb: string }) {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '2px 0' }}>
+      <div style={{
+        width: 2,
+        height: 28,
+        background: `linear-gradient(to bottom, rgba(${fromRgb}, 0.3), rgba(${toRgb}, 0.3))`,
+        borderRadius: 1,
+      }} />
+    </div>
+  );
+}
+
+export function TheStack() {
+  return (
+    <section style={{ padding: '80px 32px' }}>
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.5 }}
+        style={{ textAlign: 'center', marginBottom: 48 }}
+      >
+        <p style={{
+          fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+          fontSize: '0.7rem',
+          textTransform: 'uppercase',
+          letterSpacing: '0.12em',
+          fontWeight: 700,
+          color: tokens.colors.accent,
+          marginBottom: 14,
+        }}>
+          The Cacheplane Stack
+        </p>
+        <h2 style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontSize: 'clamp(26px, 3.5vw, 46px)',
+          fontWeight: 800,
+          lineHeight: 1.1,
+          color: tokens.colors.textPrimary,
+          marginBottom: 10,
+        }}>
+          Three libraries. One architecture.<br />
+          Every layer you need.
+        </h2>
+        <p style={{
+          fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+          fontStyle: 'italic',
+          fontSize: '1.05rem',
+          color: tokens.colors.textSecondary,
+          maxWidth: 520,
+          margin: '0 auto',
+        }}>
+          Your LangGraph agent already works. These three libraries ship it.
+        </p>
+      </motion.div>
+
+      <div style={{ maxWidth: 860, margin: '0 auto', display: 'flex', flexDirection: 'column' }}>
+        {LIBRARIES.map((lib, i) => (
+          <div key={lib.id}>
+            {i > 0 && (
+              <Connector
+                fromRgb={LIBRARIES[i - 1].rgb}
+                toRgb={lib.rgb}
+              />
+            )}
+            <motion.div
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: i * 0.1 }}
+              style={{
+                background: `rgba(${lib.rgb}, 0.03)`,
+                border: `1px solid rgba(${lib.rgb}, 0.15)`,
+                borderRadius: 14,
+                padding: '28px 28px 24px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 12,
+              }}
+            >
+              <span style={{
+                display: 'inline-block',
+                alignSelf: 'flex-start',
+                fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                fontSize: '0.58rem',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.07em',
+                padding: '2px 9px',
+                borderRadius: 5,
+                color: '#fff',
+                background: lib.color,
+              }}>
+                {lib.tag}
+              </span>
+
+              <p style={{
+                fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                fontSize: '0.76rem',
+                fontWeight: 700,
+                color: lib.color,
+                margin: 0,
+              }}>
+                {lib.pkg}
+              </p>
+
+              <h3 style={{
+                fontFamily: 'var(--font-garamond, "EB Garamond", Georgia, serif)',
+                fontSize: '1.3rem',
+                fontWeight: 700,
+                color: tokens.colors.textPrimary,
+                lineHeight: 1.25,
+                margin: 0,
+              }}>
+                {lib.headline}
+              </h3>
+
+              <p style={{
+                fontFamily: 'Inter, sans-serif',
+                fontSize: '0.88rem',
+                color: tokens.colors.textSecondary,
+                lineHeight: 1.6,
+                margin: 0,
+              }}>
+                {lib.description}
+              </p>
+
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
+                {lib.pills.map(pill => (
+                  <span key={pill} style={{
+                    fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                    fontSize: '0.58rem',
+                    padding: '2px 8px',
+                    borderRadius: 4,
+                    background: `rgba(${lib.rgb}, 0.07)`,
+                    color: lib.color,
+                    border: `1px solid rgba(${lib.rgb}, 0.15)`,
+                  }}>
+                    {pill}
+                  </span>
+                ))}
+              </div>
+
+              <Link
+                href={lib.href}
+                style={{
+                  fontFamily: 'var(--font-mono, "JetBrains Mono", monospace)',
+                  fontSize: '0.72rem',
+                  fontWeight: 700,
+                  color: lib.color,
+                  textDecoration: 'none',
+                  marginTop: 4,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 4,
+                }}
+              >
+                {lib.ctaLabel} →
+              </Link>
+            </motion.div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 2: Verify the component compiles**
+
+Run: `cd apps/website && npx next build 2>&1 | head -30`
+
+If there are type errors, fix them. The component should compile without errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/components/landing/TheStack.tsx
+git commit -m "feat(website): add TheStack component for home page"
+```
+
+---
+
+### Task 3: Update PilotFooterCTA primary CTA href
+
+**Files:**
+- Modify: `apps/website/src/components/landing/PilotFooterCTA.tsx:91-93`
+
+- [ ] **Step 1: Change the primary CTA href from `#whitepaper-gate` to `/pilot-to-prod`**
+
+In `apps/website/src/components/landing/PilotFooterCTA.tsx`, find:
+
+```tsx
+            href="#whitepaper-gate"
+```
+
+Replace with:
+
+```tsx
+            href="/pilot-to-prod"
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add apps/website/src/components/landing/PilotFooterCTA.tsx
+git commit -m "fix(website): update PilotFooterCTA primary CTA to link to pilot page"
+```
+
+---
+
+### Task 4: Rewrite page.tsx with new flow
+
+**Files:**
+- Modify: `apps/website/src/app/page.tsx`
+
+- [ ] **Step 1: Replace page.tsx with the new narrative funnel flow**
+
+Replace the entire contents of `apps/website/src/app/page.tsx` with:
+
+```tsx
+import { HeroTwoCol } from '../components/landing/HeroTwoCol';
+import { StatsStrip } from '../components/landing/StatsStrip';
+import { ProblemSection } from '../components/landing/ProblemSection';
+import { PilotSolution } from '../components/landing/PilotSolution';
+import { TheStack } from '../components/landing/TheStack';
+import { WhitePaperSection } from '../components/landing/WhitePaperSection';
+import { PilotFooterCTA } from '../components/landing/PilotFooterCTA';
+import { tokens } from '../../lib/design-tokens';
+
+export default async function HomePage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      {/* Ambient gradient blobs */}
+      <div style={{ position: 'absolute', width: 600, height: 600, borderRadius: '50%', background: tokens.gradient.warm, top: -200, left: -150, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 500, height: 500, borderRadius: '50%', background: tokens.gradient.cool, top: 800, right: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: tokens.gradient.warm, top: 2200, left: -100, filter: 'blur(80px)', pointerEvents: 'none' }} aria-hidden="true" />
+      <div style={{ position: 'absolute', width: 350, height: 350, borderRadius: '50%', background: tokens.gradient.coolLight, top: 3800, right: '20%', filter: 'blur(70px)', pointerEvents: 'none' }} aria-hidden="true" />
+
+      {/* 1. Hook — headline, animation, CTA */}
+      <HeroTwoCol />
+      {/* 2. Trust — quick credibility stats */}
+      <StatsStrip />
+      {/* 3. Problem — last-mile gap narrative */}
+      <ProblemSection />
+      {/* 4. Solution — pilot-to-prod program */}
+      <PilotSolution />
+      {/* 5. Product — the three-library stack */}
+      <TheStack />
+      {/* 6. Lead gen — whitepaper download */}
+      <WhitePaperSection />
+      {/* 7. Final CTA — "Ready to stop stalling?" */}
+      <PilotFooterCTA />
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Build and verify**
+
+Run: `cd apps/website && npx next build 2>&1 | tail -20`
+
+Expected: Build succeeds. No type errors. No missing imports.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add apps/website/src/app/page.tsx
+git commit -m "feat(website): rewrite home page with narrative funnel flow
+
+Replaces 11-section layout with 7-section funnel:
+Hero → Stats → Problem → PilotSolution → TheStack → WhitePaper → StopStallingCTA
+
+Removes: LibrariesSection, ChatFeaturesSection, ValueProps,
+LangGraphShowcase, DeepAgentsShowcase, HomePilotCTA, ArchDiagram"
+```
+
+---
+
+### Task 5: Visual verification and final build
+
+- [ ] **Step 1: Full build check**
+
+Run: `cd apps/website && npx next build`
+
+Expected: Build succeeds with no errors and no warnings related to the changed files.
+
+- [ ] **Step 2: Run dev server and verify page loads**
+
+Run: `cd apps/website && npx next dev -p 3100 &`
+
+Then run: `curl -s http://localhost:3100 | head -50`
+
+Expected: HTML response containing the new section content. Kill the dev server after.
+
+- [ ] **Step 3: Verify no unused import warnings**
+
+Run: `cd apps/website && npx next lint 2>&1 | grep -i "page\|PilotSolution\|TheStack\|PilotFooterCTA" || echo "No lint issues"`
+
+Expected: No lint errors on the changed files.
diff --git a/docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md b/docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md
new file mode 100644
index 000000000..b0f3f8334
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-10-homepage-narrative-funnel-design.md
@@ -0,0 +1,195 @@
+# Homepage Narrative Funnel Redesign
+
+**Date:** 2026-04-10
+**Status:** Draft
+
+## Summary
+
+Redesign the home page from an 11-section showcase into a focused 7-section narrative funnel: Problem → Solution → Stack → CTA. The page tells one story and routes visitors to dedicated landing pages for depth.
+
+## Motivation
+
+The current home page is long (11 sections) and includes deep interactive demos (ChatFeaturesSection, LangGraphShowcase, DeepAgentsShowcase) that duplicate content available on dedicated library landing pages. The Pilot-to-Prod program — the core solution to the "last mile" problem — appears only as a weak CTA near the bottom. The architecture diagram adds technical credibility but doesn't drive conversions.
+
+The redesign positions Cacheplane's narrative clearly: here's the problem → here's how we solve it → here's what you get → let's go.
+
+## New Page Flow
+
+```
+HeroTwoCol → StatsStrip → ProblemSection → PilotSolution → TheStack → WhitePaperSection → StopStallingCTA
+```
+
+### Removed sections
+- `LibrariesSection` — replaced by TheStack (more substance)
+- `ChatFeaturesSection` — interactive demo lives on `/chat` landing page
+- `ValueProps` ("Why agent()?") — folded into TheStack's Agent card
+- `LangGraphShowcase` — capability detail lives on `/angular` landing page
+- `DeepAgentsShowcase` — capability detail lives on `/angular` landing page
+- `HomePilotCTA` — replaced by StopStallingCTA (stronger design)
+- `ArchDiagram` — dropped entirely
+
+### Kept as-is
+- `HeroTwoCol` — hero with GenerativeUIFrame demo
+- `StatsStrip` — credibility stats
+- `ProblemSection` — last-mile gap narrative with animated progress bar
+- `WhitePaperSection` — lead gen form + guide description
+
+### Ambient gradient blobs
+Reduced from 7 to 4 (page is shorter). Positions adjusted to cover the new section layout.
+
+## New Components
+
+### 1. `PilotSolution`
+
+**File:** `apps/website/src/components/landing/PilotSolution.tsx`
+**Type:** Client component (`'use client'` — uses framer-motion)
+**Position:** Directly after ProblemSection — the "answer" to the 50% failure stat.
+
+#### Layout
+- Eyebrow: `THE SOLUTION` — mono font, accent blue (`tokens.colors.accent`), uppercase
+- Headline: "From proof of concept to production in 90 days" — EB Garamond, `clamp(26px, 3.5vw, 46px)`
+- Subtitle: italic, "The structured pilot engagement that closes the last-mile gap."
+- 3 step cards in a horizontal row (responsive: stack on mobile)
+- CTA button: "Explore the Pilot Program →" → `/pilot-to-prod`
+- Fine print: "Included with every app deployment license"
+
+#### Step cards
+Each card uses glassmorphism (`tokens.glass.*`) consistent with ProblemSection stat cards.
+
+| # | Title | Description |
+|---|-------|-------------|
+| 1 | Pilot | We assess your LangGraph agent and Angular codebase. You get a concrete production plan. |
+| 2 | Build | We work alongside your team to integrate the framework. Streaming, generative UI, testing — done right. |
+| 3 | Ship | Your agent goes to production with your team owning every line. No vendor lock-in, no black boxes. |
+
+Each card has:
+- A numbered circle (accent blue bg, white text, 32px)
+- Title in Inter, 600 weight
+- Description in Inter, `tokens.colors.textSecondary`
+
+#### Styling
+- Section padding: `80px 32px`
+- Content max-width: `840px` (matches ProblemSection)
+- Step cards grid: `repeat(auto-fit, minmax(220px, 1fr))` with `gap: 16px`
+- CTA: `tokens.colors.accent` background, white text, 6px border-radius, centered
+- Responsive: cards stack to single column on mobile
+
+### 2. `TheStack`
+
+**File:** `apps/website/src/components/landing/TheStack.tsx`
+**Type:** Client component (`'use client'` — uses framer-motion for scroll animations)
+**Position:** After PilotSolution. The product showcase.
+
+#### Layout
+- Eyebrow: `THE CACHEPLANE STACK` — mono font, accent blue
+- Headline: "Three libraries. One architecture. Every layer you need." — EB Garamond
+- Subtitle: "Your LangGraph agent already works. These three libraries ship it."
+- 3 cards in vertical stack with connecting lines between them
+- Max-width: `860px`, centered
+
+#### Cards
+
+Cards are stacked vertically (not a 3-col grid) to reinforce the layering metaphor. Between each card, a thin gradient connector line (2px, ~24px tall) transitions from the upper card's color to the lower card's color.
+
+Each card structure:
+- Tag pill (white text on library color, uppercase mono, same style as current LibrariesSection)
+- Package name (mono, library color, 0.76rem)
+- Headline (EB Garamond, 700 weight, `tokens.colors.textPrimary`)
+- Value prop paragraph (Inter, `tokens.colors.textSecondary`, ~2 sentences)
+- Differentiator pills row (mono, tinted bg/border matching library color)
+- CTA link: "Explore [Name] →" (mono, library color, no decoration)
+
+**Card 1 — Agent** (color: `tokens.colors.accent` / `#004090`, rgb: `0,64,144`):
+- Tag: `AGENT`
+- Package: `@cacheplane/angular`
+- Headline: "The reactive bridge to LangGraph"
+- Value prop: "Signal-native streaming connects your Angular templates directly to LangGraph agent state. Interrupts, persistence, time-travel, and branch history — every LangGraph feature has a first-class Angular API. Test deterministically with MockAgentTransport."
+- Pills: `Angular Signals` · `LangGraph Cloud` · `MockAgentTransport`
+- CTA: "Explore Agent →" → `/angular`
+
+**Card 2 — Render** (color: `tokens.colors.renderGreen` / `#1a7a40`, rgb: `26,122,64`):
+- Tag: `GEN UI`
+- Package: `@cacheplane/render`
+- Headline: "Agents that render UI — on open standards"
+- Value prop: "Built on Vercel's json-render spec and Google's A2UI protocol. Your agent emits a render spec, your Angular components render it — with streaming JSON patches, component registries, and signal-native state. No coupling between agent logic and frontend."
+- Pills: `Vercel json-render` · `Google A2UI` · `JSON Patch streaming`
+- CTA: "Explore Render →" → `/render`
+
+**Card 3 — Chat** (color: `tokens.colors.chatPurple` / `#5a00c8`, rgb: `90,0,200`):
+- Tag: `CHAT`
+- Package: `@cacheplane/chat`
+- Headline: "Production chat UI in days, not sprints"
+- Value prop: "Every component you need — streaming messages, tool call cards, interrupt panels, generative UI, debug overlay, theming — pre-built, composable, and WCAG accessible. Built on the Agent and Render libraries so everything works together from day one."
+- Pills: `<chat-messages>` · `<chat-debug>` · `WCAG accessible`
+- CTA: "Explore Chat →" → `/chat`
+
+#### Card styling
+- Background: `rgba(${rgb}, 0.03)`
+- Border: `1px solid rgba(${rgb}, 0.15)`
+- Border-radius: `14px`
+- Padding: `28px 28px 24px`
+- Each card animates in with framer-motion (`opacity: 0, y: 24` → visible) with staggered delay
+
+#### Connector lines
+Between each card, a centered vertical line:
+- Width: `2px`, height: `28px`
+- Background: `linear-gradient(to bottom, rgba(${upperRgb}, 0.3), rgba(${lowerRgb}, 0.3))`
+- Centered horizontally within the max-width container
+
+### 3. `StopStallingCTA` (reuse of `PilotFooterCTA`)
+
+**File:** No new file — reuse `apps/website/src/components/landing/PilotFooterCTA.tsx`
+**Position:** Final section on the page, after WhitePaperSection.
+
+We import and render `PilotFooterCTA` directly in `page.tsx`. The component is already self-contained with the correct design:
+
+- Dark background: `linear-gradient(135deg, #1a1a2e 0%, #0d1b3e 100%)`
+- Eyebrow: "Ready when you are"
+- Headline: "Ready to stop stalling?"
+- Subtext with Gartner citation
+- Primary CTA: "Start Your Pilot →" → `#whitepaper-gate`
+- Secondary CTA: "Download the Guide" → `/whitepaper.pdf`
+- Fine print: pricing info
+
+**One change:** Update the primary CTA `href` from `#whitepaper-gate` to `/pilot-to-prod` so it drives to the pilot page rather than scrolling to the whitepaper form (which is directly above it on the page and redundant as a CTA target).
+
+## Changes to `page.tsx`
+
+```tsx
+import { HeroTwoCol } from '../components/landing/HeroTwoCol';
+import { StatsStrip } from '../components/landing/StatsStrip';
+import { ProblemSection } from '../components/landing/ProblemSection';
+import { PilotSolution } from '../components/landing/PilotSolution';
+import { TheStack } from '../components/landing/TheStack';
+import { WhitePaperSection } from '../components/landing/WhitePaperSection';
+import { PilotFooterCTA } from '../components/landing/PilotFooterCTA';
+import { tokens } from '../../lib/design-tokens';
+
+export default async function HomePage() {
+  return (
+    <div style={{ background: tokens.gradient.bgFlow, position: 'relative', overflow: 'hidden' }}>
+      {/* 4 ambient gradient blobs */}
+      <HeroTwoCol />
+      <StatsStrip />
+      <ProblemSection />
+      <PilotSolution />
+      <TheStack />
+      <WhitePaperSection />
+      <PilotFooterCTA />  {/* "Ready to stop stalling?" dark CTA */}
+    </div>
+  );
+}
+```
+
+## Files changed
+
+| Action | File |
+|--------|------|
+| Create | `apps/website/src/components/landing/PilotSolution.tsx` |
+| Create | `apps/website/src/components/landing/TheStack.tsx` |
+| Edit | `apps/website/src/app/page.tsx` — new flow, reduced blobs |
+| Edit | `apps/website/src/components/landing/PilotFooterCTA.tsx` — change primary CTA href from `#whitepaper-gate` to `/pilot-to-prod` |
+
+## Files NOT deleted
+
+Existing components (LibrariesSection, ChatFeaturesSection, ValueProps, LangGraphShowcase, DeepAgentsShowcase, HomePilotCTA, ArchDiagram) are not deleted — they are simply no longer imported by the home page. They may still be used by other pages or re-used in the future.