diff --git a/web/app/about/page.tsx b/web/app/about/page.tsx
new file mode 100644
index 0000000..92006bb
--- /dev/null
+++ b/web/app/about/page.tsx
@@ -0,0 +1,105 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { SiteFooter } from '../../components/SiteFooter';
+import { SiteNav } from '../../components/SiteNav';
+import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
+import s from '../landing.module.css';
+
+export const metadata: Metadata = {
+  title: 'About Agent Relay',
+  description: 'Agent Relay exists for an agent-centered future where software works through coordinated agents.',
+  alternates: {
+    canonical: absoluteUrl('/about'),
+  },
+  openGraph: {
+    title: 'About Agent Relay',
+    description: 'Agent Relay exists for an agent-centered future where software works through coordinated agents.',
+    url: absoluteUrl('/about'),
+    type: 'website',
+    images: [ogImage(HOME_OG_IMAGE_PATH, 'About Agent Relay')],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'About Agent Relay',
+    description: 'Agent Relay exists for an agent-centered future where software works through coordinated agents.',
+    images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
+  },
+};
+
+export default function AboutPage() {
+  const navGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+  const mobileGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+
+  return (
+    <div className={`${s.page} ${s.homePage} ${s.aboutPage}`}>
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+
+      <main className={s.aboutMain}>
+        <section className={s.aboutHero} aria-labelledby="about-title">
+          <div className={s.aboutHeroCopy}>
+            <h1 id="about-title" className={s.aboutTitle}>
+              The future is <span className={s.aboutNoBreak}>agent-centered.</span>
+            </h1>
+            <p className={s.aboutLead}>
+              Software is becoming a network of agents that work with people, share context, and move work
+              forward.
+            </p>
+          </div>
+
+          <div className={s.aboutOrbit} role="img" aria-label="Agent Relay at the center of agent work">
+            <span className={`${s.aboutOrbitRing} ${s.aboutOrbitRingOuter}`} />
+            <span className={`${s.aboutOrbitRing} ${s.aboutOrbitRingInner}`} />
+            <span className={`${s.aboutOrbitNode} ${s.aboutOrbitNodeTop}`}>People</span>
+            <span className={`${s.aboutOrbitNode} ${s.aboutOrbitNodeRight}`}>Tools</span>
+            <span className={`${s.aboutOrbitNode} ${s.aboutOrbitNodeBottom}`}>Memory</span>
+            <span className={`${s.aboutOrbitNode} ${s.aboutOrbitNodeLeft}`}>Files</span>
+            <span className={s.aboutOrbitCore}>
+              <img src="/brand-kit/agent-relay-mark-transparent.png" alt="" className={s.aboutOrbitMark} />
+            </span>
+          </div>
+        </section>
+
+        <section className={s.aboutBeliefs} aria-labelledby="belief-title">
+          <div className={s.aboutBeliefIntro}>
+            <h2 id="belief-title">We are building for the next center of work.</h2>
+            <p>
+              Agents need the same primitives teams rely on: identity, communication, files, memory, and
+              permissions.
+            </p>
+          </div>
+
+          <div className={s.aboutBeliefList}>
+            <article className={s.aboutBeliefItem}>
+              <h3>Agents become participants.</h3>
+              <p>They should join workspaces, understand context, and coordinate without brittle glue.</p>
+            </article>
+            <article className={s.aboutBeliefItem}>
+              <h3>Context becomes infrastructure.</h3>
+              <p>The history of work should be shared, searchable, durable, and easy to inspect.</p>
+            </article>
+            <article className={s.aboutBeliefItem}>
+              <h3>Humans stay in charge.</h3>
+              <p>Agent systems should make decisions visible and give people clear control points.</p>
+            </article>
+          </div>
+        </section>
+
+        <section className={s.aboutClosing} aria-label="Agent Relay purpose">
+          <p>Agent Relay exists to make that future reliable, open, and understandable.</p>
+        </section>
+      </main>
+
+      <SiteFooter />
+    </div>
+  );
+}
diff --git a/web/app/blog/[slug]/page.tsx b/web/app/blog/[slug]/page.tsx
index ebe376a..b29d5d7 100644
--- a/web/app/blog/[slug]/page.tsx
+++ b/web/app/blog/[slug]/page.tsx
@@ -11,7 +11,6 @@ import remarkGfm from 'remark-gfm';
 import { BlogTableOfContents } from '../../../components/blog/BlogTableOfContents';
 import styles from '../../../components/blog/blog.module.css';
 import { HighlightedPre } from '../../../components/docs/HighlightedCode';
-import { GitHubStarsBadge } from '../../../components/GitHubStars';
 import { Waitlist } from '../../../components/home';
 import { SiteFooter } from '../../../components/SiteFooter';
 import { SiteNav } from '../../../components/SiteNav';
@@ -19,6 +18,7 @@ import { getAllPosts, getPost, slugifyHeading } from '../../../lib/blog';
 import { getAuthorInitials, getBlogAuthor } from '../../../lib/blog-authors';
 import { OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH } from '../../../lib/og-meta';
 import { absoluteUrl, SITE_NAME, SITE_URL } from '../../../lib/site';
+import landingStyles from '../../landing.module.css';
 
 type PageProps = {
   params: Promise<{ slug: string }>;
@@ -133,6 +133,16 @@ export default async function BlogPostPage({ params }: PageProps) {
     .slice(0, 4);
   const postUrl = absoluteUrl(`/blog/${slug}`);
   const imageUrl = post.frontmatter.coverImage || absoluteUrl(`/blog/${slug}/og.png`);
+  const navGetStartedLink = (
+    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+  const mobileGetStartedLink = (
+    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
   const structuredData = {
     '@context': 'https://schema.org',
     '@type': 'BlogPosting',
@@ -253,7 +263,7 @@ export default async function BlogPostPage({ params }: PageProps) {
 
   return (
     <div className={styles.blogPage}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
 
       <section className={styles.postHero}>
         <div className={styles.postHeroInner}>
diff --git a/web/app/blog/page.tsx b/web/app/blog/page.tsx
index 067a246..62d8468 100644
--- a/web/app/blog/page.tsx
+++ b/web/app/blog/page.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link';
 import { Rss } from 'lucide-react';
 
 import styles from '../../components/blog/blog.module.css';
-import { GitHubStarsBadge } from '../../components/GitHubStars';
 import { SiteFooter } from '../../components/SiteFooter';
 import { SiteNav } from '../../components/SiteNav';
 import { getAllPosts } from '../../lib/blog';
 import { getAuthorInitials, getBlogAuthor } from '../../lib/blog-authors';
 import { defaultOgImage } from '../../lib/og-meta';
 import { absoluteUrl, SITE_NAME, SITE_URL } from '../../lib/site';
+import landingStyles from '../landing.module.css';
 
 export const metadata: Metadata = {
   title: { absolute: 'Agent Relay Blog — Multi-Agent Systems & AI Coordination' },
@@ -46,6 +46,16 @@ function formatDate(dateStr: string): string {
 export default function BlogIndexPage() {
   const posts = getAllPosts();
   const allPosts = posts;
+  const navGetStartedLink = (
+    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+  const mobileGetStartedLink = (
+    <Link href="/docs" className={`${landingStyles.ctaPrimary} ${landingStyles.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
   const structuredData = {
     '@context': 'https://schema.org',
     '@type': 'CollectionPage',
@@ -66,7 +76,7 @@ export default function BlogIndexPage() {
 
   return (
     <div className={styles.blogPage}>
-      <SiteNav actions={<GitHubStarsBadge />} />
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
 
       <main className={styles.blogMain}>
         <script
diff --git a/web/app/careers/page.tsx b/web/app/careers/page.tsx
new file mode 100644
index 0000000..eb65ac2
--- /dev/null
+++ b/web/app/careers/page.tsx
@@ -0,0 +1,52 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { SiteFooter } from '../../components/SiteFooter';
+import { SiteNav } from '../../components/SiteNav';
+import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
+import s from '../landing.module.css';
+
+export const metadata: Metadata = {
+  title: 'Careers',
+  description: 'Careers at Agent Relay.',
+  alternates: {
+    canonical: absoluteUrl('/careers'),
+  },
+  openGraph: {
+    title: 'Careers',
+    description: 'Careers at Agent Relay.',
+    url: absoluteUrl('/careers'),
+    type: 'website',
+    images: [ogImage(HOME_OG_IMAGE_PATH, 'Careers')],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Careers',
+    description: 'Careers at Agent Relay.',
+    images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
+  },
+};
+
+export default function CareersPage() {
+  const navGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+  const mobileGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+
+  return (
+    <div className={`${s.page} ${s.homePage}`}>
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+
+      <main className={s.homeMain} />
+
+      <SiteFooter />
+    </div>
+  );
+}
diff --git a/web/app/docs/agents/[slug]/og.png/route.tsx b/web/app/docs/agents/[slug]/og.png/route.tsx
new file mode 100644
index 0000000..de9ce74
--- /dev/null
+++ b/web/app/docs/agents/[slug]/og.png/route.tsx
@@ -0,0 +1,42 @@
+import { ImageResponse } from 'next/og';
+import { notFound } from 'next/navigation';
+
+import { DefaultVariant, loadBrandFonts, OG_SIZE } from '../../../../../lib/og/template';
+import { getProductDoc, getProductDocSlugs } from '../../../../../lib/product-docs';
+import { agentsSection } from '../../../../../lib/product-docs-nav';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-static';
+
+type RouteContext = {
+  params: Promise<{ slug: string }>;
+};
+
+export function generateStaticParams() {
+  return getProductDocSlugs(agentsSection).map((slug) => ({ slug }));
+}
+
+export async function GET(_request: Request, { params }: RouteContext) {
+  const { slug } = await params;
+  const doc = getProductDoc(agentsSection.id, slug);
+
+  if (!doc) {
+    notFound();
+  }
+
+  const { fonts, headingFamily, bodyFamily } = await loadBrandFonts();
+
+  return new ImageResponse(
+    <DefaultVariant
+      headingFamily={headingFamily}
+      bodyFamily={bodyFamily}
+      eyebrow={agentsSection.label}
+      title={doc.frontmatter.title}
+      subtitle={doc.frontmatter.description}
+    />,
+    {
+      ...OG_SIZE,
+      ...(fonts.length > 0 ? { fonts } : {}),
+    }
+  );
+}
diff --git a/web/app/docs/agents/[slug]/page.tsx b/web/app/docs/agents/[slug]/page.tsx
new file mode 100644
index 0000000..62435da
--- /dev/null
+++ b/web/app/docs/agents/[slug]/page.tsx
@@ -0,0 +1,59 @@
+import type { Metadata } from 'next';
+
+import { ProductDocPage } from '../../../../components/docs/ProductDocPage';
+import { ogImage } from '../../../../lib/og-meta';
+import {
+  agentsSection,
+  getProductDoc,
+  getProductDocMarkdownUrl,
+  getProductDocSlugs,
+} from '../../../../lib/product-docs';
+import { absoluteUrl } from '../../../../lib/site';
+
+const SECTION_ID = agentsSection.id;
+
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export function generateStaticParams() {
+  return getProductDocSlugs(agentsSection).map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const doc = getProductDoc(SECTION_ID, slug);
+
+  if (!doc) {
+    return { title: 'Not Found' };
+  }
+
+  const ogPath = `/docs/${SECTION_ID}/${slug}/og.png`;
+
+  return {
+    title: `${doc.frontmatter.title} — Agents`,
+    description: doc.frontmatter.description,
+    alternates: {
+      canonical: absoluteUrl(`/docs/${SECTION_ID}/${slug}`),
+      types: { 'text/markdown': getProductDocMarkdownUrl(SECTION_ID, slug) },
+    },
+    openGraph: {
+      title: `${doc.frontmatter.title} — Agents`,
+      description: doc.frontmatter.description,
+      url: absoluteUrl(`/docs/${SECTION_ID}/${slug}`),
+      type: 'article',
+      images: [ogImage(ogPath, `${doc.frontmatter.title} — Agents docs`)],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: `${doc.frontmatter.title} — Agents`,
+      description: doc.frontmatter.description,
+      images: [absoluteUrl(ogPath)],
+    },
+  };
+}
+
+export default async function AgentsDocPage({ params }: PageProps) {
+  const { slug } = await params;
+  return <ProductDocPage sectionId={SECTION_ID} slug={slug} />;
+}
diff --git a/web/app/docs/agents/markdown/[slug]/route.ts b/web/app/docs/agents/markdown/[slug]/route.ts
new file mode 100644
index 0000000..426b412
--- /dev/null
+++ b/web/app/docs/agents/markdown/[slug]/route.ts
@@ -0,0 +1,30 @@
+import { agentsSection, getProductDocMarkdown, getProductDocSlugs } from '../../../../../lib/product-docs';
+
+export const revalidate = 86400;
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return getProductDocSlugs(agentsSection).map((slug) => ({ slug: `${slug}.md` }));
+}
+
+type RouteProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function GET(_request: Request, { params }: RouteProps) {
+  const { slug: rawSlug } = await params;
+  const slug = rawSlug.replace(/\.md$/, '');
+
+  const doc = getProductDocMarkdown(agentsSection.id, slug);
+
+  if (!doc) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  return new Response(doc.markdown, {
+    headers: {
+      'Content-Type': 'text/markdown; charset=utf-8',
+      'Cache-Control': 'public, max-age=86400',
+    },
+  });
+}
diff --git a/web/app/docs/agents/page.tsx b/web/app/docs/agents/page.tsx
new file mode 100644
index 0000000..4572542
--- /dev/null
+++ b/web/app/docs/agents/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function AgentsDocsIndexPage() {
+  redirect('/docs/agents/introduction');
+}
diff --git a/web/app/landing.module.css b/web/app/landing.module.css
index 6f81f0f..35e3c5e 100644
--- a/web/app/landing.module.css
+++ b/web/app/landing.module.css
@@ -13,6 +13,737 @@
     color 0.3s ease;
 }
 
+.homePage {
+  --home-nav-offset: 84px;
+  background: #071724;
+}
+
+.homeMain {
+  position: relative;
+  min-height: 100dvh;
+  margin-top: calc(var(--home-nav-offset) * -1);
+  overflow: hidden;
+  padding: var(--home-nav-offset) 0 0;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(116, 184, 226, 0.1), transparent 30%),
+    linear-gradient(180deg, #14344a 0%, #123148 100%);
+}
+
+.homeMain::before {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    rgba(2, 10, 18, 0.12),
+    transparent 22%,
+    transparent 82%,
+    rgba(2, 10, 18, 0.16)
+  );
+  content: '';
+}
+
+.homeMain::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  min-height: 84px;
+  height: 10%;
+  pointer-events: none;
+  border-top: 1px solid rgba(116, 184, 226, 0.05);
+  background: #061723;
+  content: '';
+}
+
+.homePosterHero {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 1600px);
+  min-height: clamp(620px, 72vw, 960px);
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.homePosterSvg {
+  position: absolute;
+  top: clamp(48px, 6vw, 88px);
+  left: max(18px, calc(50% - 700px));
+  width: min(1520px, 118vw);
+  height: auto;
+  overflow: visible;
+  display: block;
+}
+
+.homePosterTextLine,
+.homePosterShadowLine {
+  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', 'Arial Black', var(--font-heading), sans-serif;
+  font-size: 230px;
+  font-stretch: condensed;
+  font-weight: 900;
+  letter-spacing: -0.061em;
+  line-height: 1;
+  paint-order: stroke fill;
+  stroke-linejoin: round;
+  text-transform: uppercase;
+}
+
+.homePosterTextLine {
+  fill: #fff;
+  stroke: #2d638f;
+  stroke-width: 18px;
+}
+
+.homePosterShadowLine {
+  fill: #2b618a;
+  stroke: #2b618a;
+  stroke-width: 18px;
+}
+
+.homeNavAction {
+  min-height: 42px;
+  padding: 10px 22px;
+  font-size: 0.86rem;
+  white-space: nowrap;
+}
+
+.homeRelaySection {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(48px, 6vw, 78px) 24px clamp(76px, 8vw, 112px);
+  border-top: 1px solid rgba(116, 184, 226, 0.08);
+  background:
+    radial-gradient(circle at 76% 12%, rgba(116, 184, 226, 0.12), transparent 30%),
+    linear-gradient(180deg, #061723 0%, #081d2b 100%);
+}
+
+.homeRelaySection::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(116, 184, 226, 0.04) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.032) 1px, transparent 1px);
+  background-size: 96px 96px;
+  mask-image: radial-gradient(circle at 68% 28%, black 0%, transparent 62%);
+  opacity: 0.28;
+  content: '';
+}
+
+.homeRelayInner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1fr);
+  align-items: center;
+  gap: clamp(44px, 7vw, 108px);
+  width: min(100%, 1180px);
+  margin: 0 auto;
+}
+
+.homeRelayCopy {
+  display: grid;
+  gap: 20px;
+  max-width: 560px;
+}
+
+.homeRelayKicker {
+  color: rgba(143, 202, 247, 0.72);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.homeRelayCopy h2 {
+  max-width: 12ch;
+  margin: 0;
+  color: rgba(239, 247, 255, 0.95);
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(2.7rem, 5vw, 5.2rem);
+  font-weight: 640;
+  letter-spacing: -0.055em;
+  line-height: 0.96;
+}
+
+.homeRelayCopy p {
+  max-width: 54ch;
+  margin: 0;
+  color: rgba(195, 212, 228, 0.78);
+  font-size: clamp(1rem, 1.5vw, 1.14rem);
+  line-height: 1.65;
+}
+
+.homeRelayVisual {
+  position: relative;
+  min-height: 430px;
+  overflow: hidden;
+  padding: clamp(26px, 4vw, 42px);
+  border: 1px solid rgba(116, 184, 226, 0.16);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(116, 184, 226, 0.08), rgba(116, 184, 226, 0.02)),
+    rgba(3, 13, 23, 0.42);
+  box-shadow:
+    inset 0 1px 0 rgba(239, 247, 255, 0.05),
+    0 28px 80px rgba(0, 0, 0, 0.18);
+}
+
+.homeRelayVisual::before {
+  position: absolute;
+  top: 50%;
+  right: -12%;
+  left: -12%;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(116, 184, 226, 0.16),
+    rgba(116, 184, 226, 0.34),
+    transparent
+  );
+  content: '';
+}
+
+.homeRelaySignal {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.homeRelaySignal span {
+  position: absolute;
+  border: 1px solid rgba(116, 184, 226, 0.14);
+  border-radius: 999px;
+}
+
+.homeRelaySignal span:nth-child(1) {
+  inset: 42px 18% 72px 18%;
+}
+
+.homeRelaySignal span:nth-child(2) {
+  inset: 88px 10% 112px 10%;
+}
+
+.homeRelaySignal span:nth-child(3) {
+  inset: 134px 2% 152px 2%;
+}
+
+.homeRelayFlow {
+  position: relative;
+  display: grid;
+  gap: 16px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.homeRelayStep {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+  padding: 18px;
+  border: 1px solid rgba(116, 184, 226, 0.14);
+  border-radius: 14px;
+  background: rgba(6, 23, 35, 0.74);
+  box-shadow: inset 0 1px 0 rgba(239, 247, 255, 0.04);
+}
+
+.homeRelayStepIndex {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  aspect-ratio: 1;
+  border: 1px solid rgba(116, 184, 226, 0.24);
+  border-radius: 999px;
+  color: rgba(180, 220, 255, 0.82);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 0.74rem;
+  font-weight: 800;
+}
+
+.homeRelayStep h3 {
+  margin: 0 0 6px;
+  color: rgba(239, 247, 255, 0.92);
+  font-size: 1rem;
+  font-weight: 760;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+}
+
+.homeRelayStep p {
+  margin: 0;
+  color: rgba(195, 212, 228, 0.72);
+  font-size: 0.92rem;
+  line-height: 1.55;
+}
+
+@media (max-width: 960px) {
+  .homePage {
+    --home-nav-offset: 72px;
+  }
+
+  .homeMain {
+    background:
+      radial-gradient(circle at 8% 18%, rgba(116, 184, 226, 0.1), transparent 34%),
+      linear-gradient(180deg, #14344a 0%, #123148 100%);
+  }
+
+  .homePosterHero {
+    min-height: clamp(560px, 88vw, 800px);
+  }
+
+  .homePosterSvg {
+    top: clamp(42px, 8vw, 72px);
+    left: -28px;
+    width: 1320px;
+    max-width: none;
+  }
+
+  .homeRelayInner {
+    grid-template-columns: 1fr;
+    gap: 36px;
+  }
+
+  .homeRelayCopy {
+    max-width: 720px;
+  }
+
+  .homeRelayCopy h2 {
+    max-width: 14ch;
+  }
+
+  .homeRelayVisual {
+    min-height: auto;
+  }
+}
+
+@media (max-width: 560px) {
+  .homeMain {
+    min-height: 560px;
+    background:
+      radial-gradient(circle at 10% 18%, rgba(116, 184, 226, 0.1), transparent 38%),
+      linear-gradient(180deg, #14344a 0%, #123148 100%);
+  }
+
+  .homePosterHero {
+    min-height: 560px;
+  }
+
+  .homePosterSvg {
+    top: 46px;
+    left: -32px;
+    width: 1040px;
+  }
+
+  .homePosterTextLine,
+  .homePosterShadowLine {
+    font-size: 214px;
+    stroke-width: 16px;
+  }
+
+  .homeRelaySection {
+    padding: 62px 18px 78px;
+  }
+
+  .homeRelayVisual {
+    padding: 16px;
+    border-radius: 14px;
+  }
+
+  .homeRelayStep {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 16px;
+  }
+}
+
+.aboutPage {
+  background:
+    radial-gradient(circle at 76% 25%, rgba(116, 184, 226, 0.18), transparent 31%),
+    radial-gradient(circle at 18% 78%, rgba(88, 166, 255, 0.09), transparent 34%),
+    linear-gradient(180deg, #07111b 0%, #0d2233 50%, #08111a 100%);
+}
+
+.aboutMain {
+  position: relative;
+  overflow: hidden;
+  min-height: calc(100dvh - 80px);
+  padding: clamp(38px, 5vw, 74px) 24px 96px;
+}
+
+.aboutMain::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(116, 184, 226, 0.055) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(116, 184, 226, 0.04) 1px, transparent 1px);
+  background-size: 84px 84px;
+  mask-image: radial-gradient(circle at 58% 34%, black 0%, transparent 64%);
+  opacity: 0.26;
+}
+
+.aboutHero,
+.aboutBeliefs,
+.aboutClosing {
+  position: relative;
+  z-index: 1;
+  width: min(100%, 1180px);
+  margin: 0 auto;
+}
+
+.aboutHero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
+  align-items: center;
+  gap: clamp(36px, 7vw, 96px);
+  min-height: min(560px, calc(100dvh - 156px));
+  padding: 8px 0 58px;
+}
+
+.aboutHeroCopy {
+  display: grid;
+  gap: 22px;
+  max-width: 780px;
+}
+
+.aboutTitle {
+  max-width: 760px;
+  margin: 0;
+  color: rgba(239, 247, 255, 0.96);
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(3.7rem, 6.4vw, 5.6rem);
+  font-weight: 620;
+  letter-spacing: -0.055em;
+  line-height: 0.96;
+}
+
+.aboutNoBreak {
+  white-space: nowrap;
+}
+
+.aboutLead {
+  max-width: 560px;
+  margin: 0;
+  color: rgba(195, 212, 228, 0.82);
+  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
+  line-height: 1.65;
+}
+
+.aboutOrbit {
+  position: relative;
+  width: min(100%, 430px);
+  aspect-ratio: 1;
+  justify-self: end;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at center, rgba(116, 184, 226, 0.18), transparent 28%),
+    radial-gradient(circle at center, rgba(7, 17, 31, 0.72), transparent 68%);
+}
+
+.aboutOrbit::before,
+.aboutOrbit::after {
+  content: '';
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.aboutOrbit::before {
+  inset: 16%;
+  background: radial-gradient(circle, rgba(116, 184, 226, 0.18), rgba(116, 184, 226, 0.02) 62%, transparent);
+  filter: blur(16px);
+}
+
+.aboutOrbit::after {
+  inset: 2px;
+  border: 1px solid rgba(116, 184, 226, 0.08);
+}
+
+.aboutOrbitRing {
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgba(143, 202, 247, 0.18);
+  border-radius: 50%;
+}
+
+.aboutOrbitRingOuter {
+  transform: rotate(-10deg) scaleX(0.86);
+}
+
+.aboutOrbitRingInner {
+  inset: 18%;
+  border-color: rgba(143, 202, 247, 0.24);
+  transform: rotate(18deg) scaleY(0.78);
+}
+
+.aboutOrbitCore {
+  position: absolute;
+  inset: 50%;
+  display: grid;
+  width: clamp(104px, 12vw, 136px);
+  aspect-ratio: 1;
+  place-items: center;
+  border: 1px solid rgba(151, 204, 245, 0.2);
+  border-radius: 24px;
+  background:
+    linear-gradient(180deg, rgba(151, 204, 245, 0.12), rgba(151, 204, 245, 0.03)),
+    rgba(5, 15, 27, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 28px 70px rgba(2, 7, 18, 0.38);
+  transform: translate(-50%, -50%);
+}
+
+.aboutOrbitMark {
+  width: 60%;
+  height: auto;
+  filter: drop-shadow(0 16px 22px rgba(7, 17, 31, 0.36));
+}
+
+.aboutOrbitNode {
+  position: absolute;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 14px;
+  border: 1px solid rgba(143, 202, 247, 0.2);
+  border-radius: 999px;
+  background: rgba(6, 18, 31, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 16px 36px rgba(2, 7, 18, 0.28);
+  color: rgba(231, 243, 255, 0.9);
+  font-size: 0.82rem;
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.aboutOrbitNodeTop {
+  top: 8%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.aboutOrbitNodeRight {
+  top: 48%;
+  right: -4%;
+  transform: translateY(-50%);
+}
+
+.aboutOrbitNodeBottom {
+  bottom: 8%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.aboutOrbitNodeLeft {
+  top: 48%;
+  left: -3%;
+  transform: translateY(-50%);
+}
+
+.aboutBeliefs {
+  display: grid;
+  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
+  gap: clamp(36px, 7vw, 92px);
+  padding: 76px 0 66px;
+  border-top: 1px solid rgba(143, 202, 247, 0.14);
+}
+
+.aboutBeliefIntro {
+  display: grid;
+  align-content: start;
+  gap: 18px;
+}
+
+.aboutBeliefIntro h2 {
+  max-width: 12ch;
+  margin: 0;
+  color: rgba(239, 247, 255, 0.94);
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(2.35rem, 5vw, 4.4rem);
+  font-weight: 620;
+  letter-spacing: -0.045em;
+  line-height: 1;
+}
+
+.aboutBeliefIntro p {
+  max-width: 46ch;
+  margin: 0;
+  color: rgba(195, 212, 228, 0.72);
+  font-size: 1.02rem;
+  line-height: 1.7;
+}
+
+.aboutBeliefList {
+  display: grid;
+  align-content: start;
+}
+
+.aboutBeliefItem {
+  display: grid;
+  gap: 8px;
+  padding: 26px 0;
+  border-top: 1px solid rgba(143, 202, 247, 0.14);
+}
+
+.aboutBeliefItem:last-child {
+  border-bottom: 1px solid rgba(143, 202, 247, 0.14);
+}
+
+.aboutBeliefItem h3 {
+  margin: 0;
+  color: rgba(239, 247, 255, 0.94);
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
+  font-weight: 620;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+}
+
+.aboutBeliefItem p {
+  max-width: 58ch;
+  margin: 0;
+  color: rgba(195, 212, 228, 0.72);
+  font-size: 0.98rem;
+  line-height: 1.65;
+}
+
+.aboutClosing {
+  padding: 34px 0 8px;
+}
+
+.aboutClosing p {
+  max-width: 900px;
+  margin: 0;
+  color: rgba(239, 247, 255, 0.92);
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(2rem, 5vw, 4.1rem);
+  font-weight: 610;
+  letter-spacing: -0.045em;
+  line-height: 1.05;
+}
+
+@media (max-width: 960px) {
+  .aboutMain {
+    padding: 44px 20px 80px;
+  }
+
+  .aboutHero {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    padding: 34px 0 62px;
+  }
+
+  .aboutHeroCopy {
+    gap: 18px;
+  }
+
+  .aboutTitle {
+    max-width: 760px;
+    font-size: clamp(3.35rem, 12vw, 5.4rem);
+  }
+
+  .aboutOrbit {
+    width: min(78vw, 380px);
+    justify-self: center;
+    margin-top: 8px;
+  }
+
+  .aboutBeliefs {
+    grid-template-columns: 1fr;
+    gap: 34px;
+    padding: 58px 0 58px;
+  }
+
+  .aboutBeliefIntro h2 {
+    max-width: 13ch;
+  }
+}
+
+@media (max-width: 560px) {
+  .aboutMain {
+    padding: 34px 18px 68px;
+  }
+
+  .aboutMain::before {
+    background-size: 56px 56px;
+    opacity: 0.18;
+  }
+
+  .aboutHero {
+    padding-top: 26px;
+  }
+
+  .aboutTitle {
+    font-size: clamp(3rem, 16vw, 4.7rem);
+    letter-spacing: -0.05em;
+  }
+
+  .aboutNoBreak {
+    white-space: normal;
+  }
+
+  .aboutLead {
+    font-size: 1rem;
+  }
+
+  .aboutOrbit {
+    width: min(86vw, 320px);
+  }
+
+  .aboutOrbitCore {
+    border-radius: 18px;
+  }
+
+  .aboutOrbitNode {
+    min-height: 34px;
+    padding: 0 11px;
+    font-size: 0.76rem;
+  }
+
+  .aboutOrbitNodeRight {
+    right: -1%;
+  }
+
+  .aboutOrbitNodeLeft {
+    left: -1%;
+  }
+
+  .aboutBeliefItem {
+    padding: 22px 0;
+  }
+}
+
+.messagingPage {
+  position: relative;
+  isolation: isolate;
+  background: #0d2638;
+}
+
+.messagingPage::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 0;
+  height: max(680px, 82dvh);
+  pointer-events: none;
+  background: var(--agent-tools-band-bg);
+}
+
+.messagingPage > :not(:first-child) {
+  position: relative;
+  z-index: 1;
+}
+
 /* ---- HERO ---- */
 
 .heroSection {
@@ -32,6 +763,15 @@
   background: var(--agent-tools-band-bg);
 }
 
+:global(html[data-theme='dark']) .messagingPage {
+  background: #0d2638;
+}
+
+.messagingPage .heroSection,
+:global(html[data-theme='dark']) .messagingPage .heroSection {
+  background: transparent;
+}
+
 .heroSection > * {
   position: relative;
   z-index: 2;
@@ -69,7 +809,7 @@
 .heroLeft {
   display: flex;
   flex-direction: column;
-  gap: 28px;
+  gap: 18px;
   padding-top: 56px;
 }
 
@@ -103,92 +843,229 @@
   animation: pulse 2s ease-in-out infinite;
 }
 
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.headline {
+  font-family: var(--font-heading), sans-serif;
+  font-size: clamp(3.2rem, 7vw, 5.5rem);
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  color: var(--fg);
+  opacity: 0.85;
+}
+
+:global(html[data-theme='dark']) .headline {
+  opacity: 1;
+}
+
+.subtitle {
+  font-size: 1.1rem;
+  line-height: 1.65;
+  color: var(--fg-muted);
+  max-width: 48ch;
+  font-weight: 400;
+}
+
+.ctas {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-top: 4px;
+}
+
+.heroCommandCta {
+  appearance: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: min(100%, 610px);
+  margin-top: 6px;
+  min-height: 54px;
+  padding: 10px 12px 10px 16px;
+  border: 1px solid rgba(116, 184, 226, 0.2);
+  border-radius: 10px;
+  background:
+    linear-gradient(180deg, rgba(116, 184, 226, 0.08), rgba(116, 184, 226, 0.02)),
+    rgba(4, 18, 31, 0.76);
+  box-shadow:
+    inset 0 1px 0 rgba(237, 247, 255, 0.06),
+    inset 0 -1px 0 rgba(116, 184, 226, 0.04);
+  -webkit-backdrop-filter: blur(12px) saturate(125%);
+  backdrop-filter: blur(12px) saturate(125%);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  transition:
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.heroCommandCta::before {
+  content: none;
+}
+
+.heroCommandPrompt,
+.heroCommandText,
+.heroCommandCopyButton {
+  position: relative;
+  z-index: 1;
+}
+
+.heroCommandPrompt {
+  color: rgba(184, 211, 232, 0.62);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.heroCommandText {
+  min-width: 0;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+  color: rgba(244, 250, 255, 0.94);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: clamp(0.84rem, 1.5vw, 1rem);
+  font-weight: 520;
+  letter-spacing: 0;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+
+.heroCommandText::-webkit-scrollbar {
+  display: none;
+}
+
+.heroCommandCopyButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  border: 1px solid rgba(116, 184, 226, 0.28);
+  border-radius: 8px;
+  background: rgba(9, 24, 40, 0.54);
+  color: rgba(222, 240, 255, 0.78);
+  cursor: inherit;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s,
+    color 0.2s,
+    border-color 0.2s,
+    background 0.2s;
+}
+
+.heroCommandCopyButton svg {
+  width: 17px;
+  height: 17px;
+  stroke-width: 1.8;
 }
 
-.headline {
-  font-family: var(--font-heading), sans-serif;
-  font-size: clamp(3.2rem, 7vw, 5.5rem);
-  font-weight: 500;
-  line-height: 1.05;
-  letter-spacing: -0.03em;
-  color: var(--fg);
-  opacity: 0.85;
+.heroCommandCopied {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
 }
 
-:global(html[data-theme='dark']) .headline {
+.heroCommandCta:hover .heroCommandCopyButton,
+.heroCommandCta:focus-visible .heroCommandCopyButton {
+  border-color: rgba(116, 184, 226, 0.28);
+  background: rgba(9, 24, 40, 0.58);
+  color: rgba(222, 240, 255, 0.76);
+}
+
+.heroCommandCta:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white 18%);
+  outline-offset: 3px;
+}
+
+.heroCommandCta:focus-within .heroCommandCopyButton {
   opacity: 1;
 }
 
-.subtitle {
-  font-size: 1.1rem;
-  line-height: 1.65;
-  color: var(--fg-muted);
-  max-width: 48ch;
-  font-weight: 400;
+@media (hover: hover) and (pointer: fine) {
+  .heroCommandCta:hover {
+    border-color: rgba(116, 184, 226, 0.36);
+    background:
+      linear-gradient(180deg, rgba(116, 184, 226, 0.1), rgba(116, 184, 226, 0.025)),
+      rgba(4, 18, 31, 0.8);
+  }
+
+  .heroCommandCta:hover .heroCommandCopyButton,
+  .heroCommandCta:focus-within .heroCommandCopyButton {
+    opacity: 1;
+  }
 }
 
-.ctas {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding-top: 4px;
+@media (hover: none), (pointer: coarse) {
+  .heroCommandCopyButton {
+    opacity: 1;
+  }
 }
 
 .installCommand {
+  appearance: none;
   width: 100%;
-  min-height: 64px;
+  justify-self: stretch;
+  min-height: 54px;
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 0.72rem 0.9rem;
-  border: 1px solid rgba(156, 207, 255, 0.26);
-  border-radius: 0.75rem;
+  gap: 12px;
+  padding: 10px 12px 10px 16px;
+  border: 1px solid rgba(116, 184, 226, 0.2);
+  border-left-color: rgba(116, 184, 226, 0.5);
+  border-left-width: 3px;
+  border-radius: 10px;
   background:
-    linear-gradient(180deg, rgba(156, 207, 255, 0.16), rgba(156, 207, 255, 0.055)), rgba(7, 17, 31, 0.46);
+    linear-gradient(180deg, rgba(116, 184, 226, 0.08), rgba(116, 184, 226, 0.02)),
+    rgba(4, 18, 31, 0.76);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    inset 0 -1px 0 rgba(156, 207, 255, 0.08),
-    0 18px 34px rgba(3, 10, 20, 0.16);
-  -webkit-backdrop-filter: blur(18px) saturate(145%);
-  backdrop-filter: blur(18px) saturate(145%);
+    inset 0 1px 0 rgba(237, 247, 255, 0.06),
+    inset 0 -1px 0 rgba(116, 184, 226, 0.04);
+  -webkit-backdrop-filter: blur(12px) saturate(125%);
+  backdrop-filter: blur(12px) saturate(125%);
   color: var(--fg);
   font: inherit;
   text-align: left;
   cursor: pointer;
   transition:
     background 0.2s,
-    border-color 0.2s,
-    box-shadow 0.2s,
-    transform 0.15s var(--ease-out-quint);
+    border-color 0.2s;
 }
 
 @media (hover: hover) and (pointer: fine) {
   .installCommand:hover {
-    border-color: rgba(156, 207, 255, 0.42);
+    border-color: rgba(116, 184, 226, 0.36);
+    border-left-color: rgba(116, 184, 226, 0.68);
     background:
-      linear-gradient(180deg, rgba(156, 207, 255, 0.21), rgba(156, 207, 255, 0.075)), rgba(8, 24, 42, 0.5);
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.1),
-      inset 0 -1px 0 rgba(156, 207, 255, 0.1),
-      0 20px 40px rgba(3, 10, 20, 0.2);
-    transform: translateY(-1px);
+      linear-gradient(180deg, rgba(116, 184, 226, 0.1), rgba(116, 184, 226, 0.025)),
+      rgba(4, 18, 31, 0.8);
   }
 }
 
 .installCommand:active {
-  transform: scale(0.99);
+  border-color: rgba(116, 184, 226, 0.48);
 }
 
 .installCommand:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--primary) 55%, white 20%);
+  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white 18%);
   outline-offset: 3px;
 }
 
@@ -249,10 +1126,12 @@
 .installInner {
   position: relative;
   width: 100%;
-  max-width: 800px;
+  max-width: 980px;
   display: grid;
-  gap: 30px;
-  padding: 40px 40px 0;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
+  align-items: center;
+  gap: clamp(36px, 6vw, 72px);
+  padding: 44px 40px 0;
 }
 
 .installInner::before {
@@ -292,6 +1171,12 @@
   z-index: 1;
 }
 
+.installCopyColumn {
+  display: grid;
+  gap: 18px;
+  min-width: 0;
+}
+
 .waitlistSection {
   --card-bg: #0d1724;
   --line: rgba(116, 184, 226, 0.22);
@@ -355,103 +1240,163 @@
 
 .installHeaderText {
   width: 100%;
-  max-width: 720px;
-  margin: 0 auto;
+  max-width: 560px;
+  margin: 0;
   display: grid;
-  gap: 8px;
+  gap: 10px;
 }
 
 .installTitleRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  min-height: 42px;
+  display: block;
+  min-height: 0;
 }
 
 .installTitle {
   font-family: var(--font-heading), sans-serif;
-  font-size: clamp(1.3rem, 2vw, 1.7rem);
+  font-size: clamp(1.6rem, 2.7vw, 2.25rem);
   font-weight: 600;
   letter-spacing: -0.03em;
-  line-height: 1.15;
+  line-height: 1.08;
   color: var(--fg);
   margin: 0;
 }
 
 .installSubtitle {
-  max-width: 60ch;
+  max-width: 54ch;
   margin: 0;
   color: var(--fg-muted);
-  font-size: 0.92rem;
-  line-height: 1.6;
+  font-size: 0.98rem;
+  line-height: 1.55;
 }
 
-.installAgentLogos {
+.installVisual {
   position: relative;
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: nowrap;
-  justify-content: flex-end;
-  gap: 0;
-  width: 260px;
-  height: 42px;
-  padding-right: 0;
+  display: grid;
+  align-content: center;
+  gap: 18px;
+  min-height: 286px;
+  padding: 24px;
+  overflow: hidden;
+  isolation: isolate;
+  border: 1px solid rgba(116, 184, 226, 0.16);
+  border-radius: 14px;
+  background:
+    linear-gradient(180deg, rgba(116, 184, 226, 0.08), rgba(116, 184, 226, 0.02)),
+    rgba(4, 18, 31, 0.36);
+  box-shadow:
+    inset 0 1px 0 rgba(237, 247, 255, 0.06),
+    inset 0 -1px 0 rgba(116, 184, 226, 0.04);
+}
+
+.installVisual::before,
+.installVisual::after {
+  position: absolute;
+  inset: 28px 38px 82px;
+  border: 1px solid rgba(116, 184, 226, 0.16);
+  border-radius: 50%;
+  content: '';
+  z-index: -1;
+}
+
+.installVisual::after {
+  inset: 52px 74px 106px;
+  opacity: 0.58;
+}
+
+.installVisualOrbit {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-height: 178px;
+}
+
+.installVisualOrbit::before,
+.installVisualOrbit::after {
+  position: absolute;
+  left: 18%;
+  right: 18%;
+  top: 50%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(116, 184, 226, 0.22),
+    rgba(166, 211, 136, 0.22),
+    transparent
+  );
+  content: '';
+}
+
+.installVisualOrbit::after {
+  left: 50%;
+  right: auto;
+  top: 20%;
+  bottom: 20%;
+  width: 1px;
+  height: auto;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    rgba(116, 184, 226, 0.18),
+    rgba(166, 211, 136, 0.18),
+    transparent
+  );
+}
+
+.installAgentLogos {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .installAgentLogo {
-  display: inline-flex;
+  position: absolute;
+  display: flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
-  margin-right: -14px;
+  margin: 0;
+  border: 1px solid rgba(156, 207, 255, 0.18);
   color: var(--fg);
-  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
+  border-radius: 12px;
+  background: rgba(7, 17, 31, 0.72);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
   transition:
-    color 0.2s,
-    filter 0.2s,
-    margin-right 0.2s,
-    transform 0.2s;
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.installAgentLogo:nth-child(1) {
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.installAgentLogos:hover .installAgentLogo {
-  margin-right: 10px;
+.installAgentLogo:nth-child(2) {
+  top: 46px;
+  right: 14px;
 }
 
-.installAgentTooltip {
-  position: absolute;
-  top: auto;
-  bottom: calc(100% + 10px);
-  right: 0;
-  width: max-content;
-  max-width: 290px;
-  padding: 0.58rem 0.72rem;
-  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--bg-elevated) 94%, var(--primary) 6%);
-  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
-  color: var(--fg);
-  font-size: 0.78rem;
-  font-weight: 600;
-  line-height: 1.35;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(4px);
-  transition:
-    opacity 0.16s,
-    transform 0.16s;
-  z-index: 4;
+.installAgentLogo:nth-child(3) {
+  right: 18%;
+  bottom: 4px;
 }
 
-.installAgentLogos:hover .installAgentTooltip {
-  opacity: 1;
-  transform: translateY(0);
+.installAgentLogo:nth-child(4) {
+  bottom: 4px;
+  left: 18%;
+}
+
+.installAgentLogo:nth-child(5) {
+  top: 46px;
+  left: 14px;
 }
 
 .installAgentLogo:hover {
-  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.34));
-  transform: translateY(-3px);
+  border-color: rgba(156, 207, 255, 0.3);
+  background: rgba(9, 25, 41, 0.82);
 }
 
 .installAgentLogoIcon {
@@ -461,14 +1406,85 @@
   flex-shrink: 0;
 }
 
+.installVisualCore {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  gap: 9px;
+  width: 112px;
+  height: 112px;
+  border: 1px solid rgba(156, 207, 255, 0.2);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 50% 10%, rgba(156, 207, 255, 0.14), transparent 46%),
+    rgba(7, 17, 31, 0.84);
+  box-shadow:
+    inset 0 1px 0 rgba(237, 247, 255, 0.08),
+    0 20px 42px rgba(0, 0, 0, 0.2);
+  color: rgba(222, 238, 251, 0.9);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.installVisualMark {
+  width: 44px;
+  height: auto;
+}
+
+.installVisualCode {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid rgba(116, 184, 226, 0.14);
+  border-radius: 10px;
+  background: rgba(2, 12, 22, 0.5);
+}
+
+.installVisualCode span {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: rgba(196, 211, 226, 0.74);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .installActions {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 12px;
+  gap: 14px;
   align-items: stretch;
   width: 100%;
-  max-width: 720px;
-  margin: 0 auto;
+  max-width: 560px;
+  margin: 0;
+}
+
+.installCtas {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+}
+
+.installCtas .ctaPrimary,
+.installCtas .ctaSecondary {
+  min-height: 42px;
+  padding: 10px 24px;
+  font-size: 0.88rem;
+}
+
+.installCtas .ctaPrimary svg {
+  width: 1rem;
+  height: 1rem;
+  stroke-width: 2;
 }
 
 .skillCallout {
@@ -3745,6 +4761,9 @@
   }
 
   .installInner {
+    grid-template-columns: 1fr;
+    gap: 32px;
+    max-width: 720px;
     padding: 36px 32px 0;
   }
 
@@ -3766,18 +4785,13 @@
     max-width: 620px;
   }
 
-  .installHeader {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 18px;
+  .installHeaderText,
+  .installActions {
+    max-width: none;
   }
 
-  .installAgentLogos {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    max-width: none;
-    padding-right: 0;
-    gap: 8px;
+  .installVisual {
+    max-width: 560px;
   }
 
   .installAgentLogo,
@@ -3860,13 +4874,28 @@
   }
 
   .installTitleRow {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 10px;
+    min-height: 0;
   }
 
-  .installAgentLogos {
-    width: 100%;
+  .installTitle {
+    font-size: clamp(1.5rem, 8vw, 2rem);
+  }
+
+  .installVisual {
+    min-height: 250px;
+    padding: 18px;
+  }
+
+  .installVisual::before {
+    inset: 24px 26px 78px;
+  }
+
+  .installVisual::after {
+    inset: 52px 56px 104px;
+  }
+
+  .installVisualOrbit {
+    min-height: 160px;
   }
 
   .installAgentLogo {
@@ -3874,6 +4903,14 @@
     height: 38px;
   }
 
+  .installAgentLogo:nth-child(2) {
+    right: 0;
+  }
+
+  .installAgentLogo:nth-child(5) {
+    left: 0;
+  }
+
   .installAgentLogoIcon {
     width: 1.7rem;
     height: 1.7rem;
diff --git a/web/app/messaging/page.tsx b/web/app/messaging/page.tsx
new file mode 100644
index 0000000..ab9489d
--- /dev/null
+++ b/web/app/messaging/page.tsx
@@ -0,0 +1,75 @@
+import type { Metadata } from 'next';
+
+import { GitHubStarsBadge } from '../../components/GitHubStars';
+import { SiteFooter } from '../../components/SiteFooter';
+import { SiteNav } from '../../components/SiteNav';
+import {
+  A2AFeature,
+  AgentToolsFeature,
+  Deploy,
+  DeliveryFeature,
+  Hero,
+  HowItWorks,
+  MessagingFeature,
+  QuickStart,
+  Waitlist,
+  WaveDivider,
+} from '../../components/home';
+import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
+import s from '../landing.module.css';
+
+export const metadata: Metadata = {
+  title: 'Agent Relay Messaging — Headless Slack for agents.',
+  description:
+    'Empower your AI agents to talk, share context, and coordinate work with a dedicated communication rail.',
+  alternates: {
+    canonical: absoluteUrl('/messaging'),
+  },
+  openGraph: {
+    title: 'Agent Relay Messaging — Headless Slack for Agents',
+    description:
+      'Channels, threads, DMs, reactions, and real-time events — everything you’d expect from Slack, exposed as an SDK.',
+    url: absoluteUrl('/messaging'),
+    type: 'website',
+    images: [ogImage(HOME_OG_IMAGE_PATH, 'Agent Relay Messaging — Headless Slack for Agents')],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Agent Relay Messaging — Headless Slack for Agents',
+    description:
+      'Channels, threads, DMs, reactions, and real-time events — everything you’d expect from Slack, exposed as an SDK.',
+    images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
+  },
+};
+
+export default function MessagingPage() {
+  return (
+    <div className={`${s.page} ${s.messagingPage}`}>
+      <SiteNav actions={<GitHubStarsBadge />} />
+
+      <Hero />
+
+      <div className={s.featuresWrapper}>
+        <section className={s.featuresSection}>
+          <MessagingFeature />
+          <HowItWorks />
+          <DeliveryFeature />
+          <WaveDivider variant="feature" />
+          <AgentToolsFeature />
+          <WaveDivider variant="a2a" className={s.a2aSeparator} />
+          <A2AFeature />
+        </section>
+      </div>
+
+      <div className={s.deployWrapper}>
+        <Deploy />
+        <QuickStart />
+      </div>
+
+      <Waitlist />
+
+      <SiteFooter />
+    </div>
+  );
+}
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 9482dd9..fb346e1 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -1,73 +1,59 @@
 import type { Metadata } from 'next';
+import Link from 'next/link';
 
-import { GitHubStarsBadge } from '../components/GitHubStars';
+import { HomePosterText } from '../components/home/HomePosterText';
+import { HomeRelaySection } from '../components/home/HomeRelaySection';
 import { SiteFooter } from '../components/SiteFooter';
 import { SiteNav } from '../components/SiteNav';
-import {
-  A2AFeature,
-  AgentToolsFeature,
-  Deploy,
-  DeliveryFeature,
-  Hero,
-  HowItWorks,
-  MessagingFeature,
-  QuickStart,
-  Waitlist,
-  WaveDivider,
-} from '../components/home';
 import { HOME_OG_IMAGE_PATH, ogImage } from '../lib/og-meta';
 import { absoluteUrl } from '../lib/site';
 import s from './landing.module.css';
 
 export const metadata: Metadata = {
-  title: 'Agent Relay — Headless Slack for agents.',
+  title: 'Agent Relay',
   description:
-    'Empower your AI agents to talk, share context, and coordinate work with a dedicated communication rail.',
+    'Infrastructure for AI agents that need shared context, reliable delivery, tools, files, schedules, and human handoffs.',
   alternates: {
     canonical: absoluteUrl('/'),
   },
   openGraph: {
-    title: 'Agent Relay — Headless Slack for Agents',
+    title: 'Agent Relay',
     description:
-      'Channels, threads, DMs, reactions, and real-time events — everything you’d expect from Slack, exposed as an SDK.',
+      'Infrastructure for AI agents that need shared context, reliable delivery, tools, files, schedules, and human handoffs.',
     url: absoluteUrl('/'),
     type: 'website',
-    images: [ogImage(HOME_OG_IMAGE_PATH, 'Agent Relay — Headless Slack for Agents')],
+    images: [ogImage(HOME_OG_IMAGE_PATH, 'Agent Relay')],
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Agent Relay — Headless Slack for Agents',
+    title: 'Agent Relay',
     description:
-      'Channels, threads, DMs, reactions, and real-time events — everything you’d expect from Slack, exposed as an SDK.',
+      'Infrastructure for AI agents that need shared context, reliable delivery, tools, files, schedules, and human handoffs.',
     images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
   },
 };
 
 export default function HomePage() {
-  return (
-    <div className={s.page}>
-      <SiteNav actions={<GitHubStarsBadge />} />
-
-      <Hero />
+  const navGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+  const mobileGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
 
-      <div className={s.featuresWrapper}>
-        <section className={s.featuresSection}>
-          <MessagingFeature />
-          <HowItWorks />
-          <DeliveryFeature />
-          <WaveDivider variant="feature" />
-          <AgentToolsFeature />
-          <WaveDivider variant="a2a" className={s.a2aSeparator} />
-          <A2AFeature />
-        </section>
-      </div>
+  return (
+    <div className={`${s.page} ${s.homePage}`}>
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
 
-      <div className={s.deployWrapper}>
-        <Deploy />
-        <QuickStart />
-      </div>
+      <main className={s.homeMain}>
+        <HomePosterText />
+      </main>
 
-      <Waitlist />
+      <HomeRelaySection />
 
       <SiteFooter />
     </div>
diff --git a/web/app/reflex/page.tsx b/web/app/reflex/page.tsx
new file mode 100644
index 0000000..8fac36d
--- /dev/null
+++ b/web/app/reflex/page.tsx
@@ -0,0 +1,52 @@
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { SiteFooter } from '../../components/SiteFooter';
+import { SiteNav } from '../../components/SiteNav';
+import { HOME_OG_IMAGE_PATH, ogImage } from '../../lib/og-meta';
+import { absoluteUrl } from '../../lib/site';
+import s from '../landing.module.css';
+
+export const metadata: Metadata = {
+  title: 'Reflex',
+  description: 'A blank Agent Relay page for the next homepage concept.',
+  alternates: {
+    canonical: absoluteUrl('/reflex'),
+  },
+  openGraph: {
+    title: 'Reflex',
+    description: 'A blank Agent Relay page for the next homepage concept.',
+    url: absoluteUrl('/reflex'),
+    type: 'website',
+    images: [ogImage(HOME_OG_IMAGE_PATH, 'Reflex')],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Reflex',
+    description: 'A blank Agent Relay page for the next homepage concept.',
+    images: [absoluteUrl(HOME_OG_IMAGE_PATH)],
+  },
+};
+
+export default function ReflexPage() {
+  const navGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+  const mobileGetStartedLink = (
+    <Link href="/docs" className={`${s.ctaPrimary} ${s.homeNavAction}`}>
+      Get Started
+    </Link>
+  );
+
+  return (
+    <div className={`${s.page} ${s.homePage}`}>
+      <SiteNav actions={navGetStartedLink} mobileMenuContent={mobileGetStartedLink} hideLinks />
+
+      <main className={s.homeMain} />
+
+      <SiteFooter />
+    </div>
+  );
+}
diff --git a/web/components/SiteFooter.tsx b/web/components/SiteFooter.tsx
index b6734a7..2793434 100644
--- a/web/components/SiteFooter.tsx
+++ b/web/components/SiteFooter.tsx
@@ -1,9 +1,95 @@
 import Link from 'next/link';
+import { ExternalLink } from 'lucide-react';
 
 import { SITE_EMAIL } from '../lib/site';
 import { LogoIcon, LogoWordmark } from './SiteNav';
 import s from './site-footer.module.css';
 
+type FooterLink = {
+  href: string;
+  label: string;
+  showExternalIcon?: boolean;
+};
+
+type FooterColumn = {
+  links: FooterLink[];
+  title: string;
+};
+
+const footerColumns: FooterColumn[] = [
+  {
+    title: 'Products',
+    links: [
+      { label: 'Relay Cloud', href: 'https://agentrelay.com/cloud' },
+      { label: 'Reflex', href: '/reflex' },
+      { label: 'Pear', href: '/pear' },
+    ],
+  },
+  {
+    title: 'Open Source',
+    links: [
+      { label: 'Relay', href: '/messaging' },
+      { label: 'RelayFile', href: 'https://github.com/AgentWorkforce/relayfile' },
+      { label: 'RelayAuth', href: 'https://github.com/AgentWorkforce/relayauth' },
+      { label: 'RelayFlows', href: 'https://github.com/AgentWorkforce/relayflows' },
+      { label: 'Agents', href: '/agents' },
+    ],
+  },
+  {
+    title: 'Resources',
+    links: [
+      { label: 'Relay Docs', href: '/docs' },
+      { label: 'RelayFile Docs', href: '/docs/file' },
+      { label: 'Brand', href: '/brand' },
+      { label: 'GitHub', href: 'https://github.com/agentworkforce/relay' },
+      { label: 'Proactive Agents', href: 'https://proactiveagents.dev', showExternalIcon: true },
+    ],
+  },
+  {
+    title: 'Company',
+    links: [
+      { label: 'Home', href: '/' },
+      { label: 'Blog', href: '/blog' },
+      { label: 'About', href: '/about' },
+      { label: 'Careers', href: '/careers' },
+    ],
+  },
+  {
+    title: 'Help',
+    links: [
+      { label: 'Telemetry', href: '/telemetry' },
+      { label: 'Privacy', href: '/privacy' },
+      { label: 'Terms', href: '/terms' },
+      { label: 'Contact', href: `mailto:${SITE_EMAIL}` },
+    ],
+  },
+];
+
+function FooterTextLink({ href, label, showExternalIcon }: FooterLink) {
+  const isExternal = href.startsWith('http');
+  const isMail = href.startsWith('mailto:');
+
+  if (isExternal || isMail) {
+    return (
+      <a
+        href={href}
+        target={isExternal ? '_blank' : undefined}
+        rel={isExternal ? 'noopener noreferrer' : undefined}
+        className={s.link}
+      >
+        {label}
+        {showExternalIcon ? <ExternalLink className={s.externalIcon} aria-hidden="true" /> : null}
+      </a>
+    );
+  }
+
+  return (
+    <Link href={href} className={s.link}>
+      {label}
+    </Link>
+  );
+}
+
 export function SiteFooter() {
   return (
     <footer className={s.footer}>
@@ -17,116 +103,14 @@ export function SiteFooter() {
         </div>
 
         <div className={s.columns}>
-          <div className={s.col}>
-            <h4 className={s.colTitle}>Projects</h4>
-            <Link href="/pear" className={s.link}>
-              Pear
-            </Link>
-            <a
-              href="https://github.com/AgentWorkforce/relayfile"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              Relayfile
-            </a>
-            <a
-              href="https://github.com/AgentWorkforce/relayauth"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              Relayauth
-            </a>
-            <a
-              href="https://github.com/AgentWorkforce/trajectories"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              Trajectories
-            </a>
-            <a
-              href="https://github.com/AgentWorkforce/burn"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              Burn
-            </a>
-            <a
-              href="https://github.com/AgentWorkforce/relayflows"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              Relayflows
-            </a>
-          </div>
-          <div className={s.col}>
-            <h4 className={s.colTitle}>Documentation</h4>
-            <Link href="/docs/introduction" className={s.link}>
-              Introduction
-            </Link>
-            <Link href="/docs/quickstart" className={s.link}>
-              Quickstart
-            </Link>
-            <Link href="/docs/messaging" className={s.link}>
-              Messaging
-            </Link>
-            <Link href="/docs/delivery" className={s.link}>
-              Delivery
-            </Link>
-            <Link href="/docs/actions" className={s.link}>
-              Actions
-            </Link>
-            <Link href="/docs/cli-overview" className={s.link}>
-              CLI
-            </Link>
-            <Link href="/docs/typescript-sdk" className={s.link}>
-              TypeScript SDK
-            </Link>
-          </div>
-          <div className={s.col}>
-            <h4 className={s.colTitle}>Resources</h4>
-            <Link href="/blog" className={s.link}>
-              Blog
-            </Link>
-            <Link href="/brand" className={s.link}>
-              Brand
-            </Link>
-            <a
-              href="https://proactiveagents.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              Proactive Agents
-            </a>
-          </div>
-          <div className={s.col}>
-            <h4 className={s.colTitle}>Company</h4>
-            <a
-              href="https://github.com/agentworkforce/relay"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.link}
-            >
-              GitHub
-            </a>
-            <Link href="/telemetry" className={s.link}>
-              Telemetry
-            </Link>
-            <Link href="/privacy" className={s.link}>
-              Privacy
-            </Link>
-            <Link href="/terms" className={s.link}>
-              Terms
-            </Link>
-            <a href={`mailto:${SITE_EMAIL}`} className={s.link}>
-              Contact
-            </a>
-          </div>
+          {footerColumns.map((column) => (
+            <div className={s.col} key={column.title}>
+              <h4 className={s.colTitle}>{column.title}</h4>
+              {column.links.map((link) => (
+                <FooterTextLink key={`${column.title}-${link.label}`} {...link} />
+              ))}
+            </div>
+          ))}
         </div>
       </div>
 
diff --git a/web/components/SiteNav.tsx b/web/components/SiteNav.tsx
index c0c8e18..da7bfb4 100644
--- a/web/components/SiteNav.tsx
+++ b/web/components/SiteNav.tsx
@@ -40,11 +40,13 @@ export function SiteNav({
   center,
   actions,
   mobileMenuContent,
+  hideLinks,
   hideMobileDocsLink,
 }: {
   center?: React.ReactNode;
   actions?: React.ReactNode;
   mobileMenuContent?: React.ReactNode;
+  hideLinks?: boolean;
   hideMobileDocsLink?: boolean;
 } = {}) {
   const pathname = usePathname();
@@ -74,18 +76,20 @@ export function SiteNav({
           {center && <div className={s.navCenter}>{center}</div>}
 
           <div className={s.navRight}>
-            <ul className={s.links}>
-              <li>
-                <Link href="/docs" className={s.link}>
-                  Docs
-                </Link>
-              </li>
-              <li>
-                <Link href="/blog" className={s.link}>
-                  Blog
-                </Link>
-              </li>
-            </ul>
+            {!hideLinks && (
+              <ul className={s.links}>
+                <li>
+                  <Link href="/docs" className={s.link}>
+                    Docs
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/blog" className={s.link}>
+                    Blog
+                  </Link>
+                </li>
+              </ul>
+            )}
             <div className={s.actions}>{actions}</div>
           </div>
 
@@ -133,23 +137,27 @@ export function SiteNav({
               }
             }}
           >
-            {!hideMobileDocsLink && (
+            {!hideLinks && !hideMobileDocsLink && (
               <Link href="/docs" className={s.mobileLink} onClick={() => setMenuOpen(false)}>
                 Docs
               </Link>
             )}
-            <Link href="/blog" className={s.mobileLink} onClick={() => setMenuOpen(false)}>
-              Blog
-            </Link>
-            <a
-              href="https://github.com/agentworkforce/relay"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.mobileLink}
-              onClick={() => setMenuOpen(false)}
-            >
-              GitHub
-            </a>
+            {!hideLinks && (
+              <>
+                <Link href="/blog" className={s.mobileLink} onClick={() => setMenuOpen(false)}>
+                  Blog
+                </Link>
+                <a
+                  href="https://github.com/agentworkforce/relay"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={s.mobileLink}
+                  onClick={() => setMenuOpen(false)}
+                >
+                  GitHub
+                </a>
+              </>
+            )}
             {mobileMenuContent}
           </div>
         )}
diff --git a/web/components/docs/BannerLink.tsx b/web/components/docs/BannerLink.tsx
index a20047c..f33270c 100644
--- a/web/components/docs/BannerLink.tsx
+++ b/web/components/docs/BannerLink.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
-import { ArrowRight, BookOpen, PlayCircle, Rocket } from 'lucide-react';
+import { ArrowRight, BookOpen, Bot, Compass, PlayCircle, Rocket } from 'lucide-react';
 
 import styles from './docs.module.css';
 
@@ -8,7 +8,7 @@ function isInternalHref(href: string): boolean {
   return href.startsWith('/') && !href.startsWith('//');
 }
 
-type BannerIcon = 'play' | 'rocket' | 'docs';
+type BannerIcon = 'play' | 'rocket' | 'docs' | 'bot' | 'compass';
 
 interface BannerLinkProps {
   href: string;
@@ -20,6 +20,8 @@ const iconMap = {
   play: PlayCircle,
   rocket: Rocket,
   docs: BookOpen,
+  bot: Bot,
+  compass: Compass,
 } satisfies Record<BannerIcon, typeof PlayCircle>;
 
 export function BannerLink({ href, children, icon = 'docs' }: BannerLinkProps) {
diff --git a/web/components/docs/DocsNav.tsx b/web/components/docs/DocsNav.tsx
index f603b05..61eddd5 100644
--- a/web/components/docs/DocsNav.tsx
+++ b/web/components/docs/DocsNav.tsx
@@ -8,6 +8,7 @@ import {
   Activity,
   BookOpen,
   Bot,
+  ChevronDown,
   Cloud,
   Clock3,
   Compass,
@@ -35,7 +36,7 @@ import { SiClaude, SiPython, SiTypescript } from 'react-icons/si';
 
 import { docsNav, legacyDocsNav } from '../../lib/docs-nav';
 import { getDocsVersionForPath, legacyDocsBasePath, v8DocsBasePath } from '../../lib/docs-versions';
-import { getProductSectionForPath, productBasePath } from '../../lib/product-docs-nav';
+import { getProductSectionForPath, productBasePath, productSections } from '../../lib/product-docs-nav';
 import { DocsVersionSelect } from './DocsVersionSelect';
 import { FolderOpen as FolderOpenIcon, Repeat } from 'lucide-react';
 import styles from './docs.module.css';
@@ -43,10 +44,30 @@ import styles from './docs.module.css';
 type NavIcon = ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>;
 
 const productSectionIcons: Record<string, NavIcon> = {
+  agents: Bot,
   file: FolderOpenIcon,
   loop: Repeat,
 };
 
+const docsProductOptions = [
+  {
+    id: null,
+    label: 'Relay',
+    tagline: 'Messaging and orchestration for AI agents.',
+    href: '/docs/introduction',
+    Icon: Network,
+    version: undefined,
+  },
+  ...productSections.map((section) => ({
+    id: section.id,
+    label: section.label,
+    tagline: section.tagline,
+    href: `${productBasePath(section)}/introduction`,
+    Icon: productSectionIcons[section.id] ?? BookOpen,
+    version: section.version,
+  })),
+];
+
 const productNavIcons: Record<string, NavIcon> = {
   introduction: Compass,
   quickstart: Rocket,
@@ -62,6 +83,9 @@ const productNavIcons: Record<string, NavIcon> = {
   sdk: SiTypescript,
   'python-sdk': SiPython,
   agents: Bot,
+  patterns: Network,
+  build: Bot,
+  deploy: Rocket,
   'adapters-and-providers': Plug,
   comparison: BookOpen,
   cloud: Cloud,
@@ -187,25 +211,7 @@ export function DocsNav({ variant = 'sidebar' }: { variant?: 'sidebar' | 'mobile
       aria-label="Documentation"
     >
       {!isSidebar && !productSection && <DocsVersionSelect />}
-      {productSection &&
-        (() => {
-          const ProductIcon = productSectionIcons[productSection.id] ?? BookOpen;
-          return (
-            <div className={styles.productHeader}>
-              <Link href="/docs/introduction" className={styles.productBackLink}>
-                ← Agent Relay docs
-              </Link>
-              <Link href={docsBasePath} className={styles.productHeaderName}>
-                <ProductIcon className={styles.productHeaderIcon} aria-hidden="true" />
-                <span>{productSection.label}</span>
-                {productSection.version && (
-                  <span className={styles.productHeaderVersion}>v{productSection.version}</span>
-                )}
-              </Link>
-              <p className={styles.productHeaderTagline}>{productSection.tagline}</p>
-            </div>
-          );
-        })()}
+      {(productSection || docsVersion === 'v8') && <DocsProductSwitcher activeId={productSection?.id ?? null} />}
       {navGroups.map((group) => (
         <div key={group.title} className={styles.navGroup}>
           <h4 className={styles.navGroupTitle}>{group.title}</h4>
@@ -238,3 +244,52 @@ export function DocsNav({ variant = 'sidebar' }: { variant?: 'sidebar' | 'mobile
     </nav>
   );
 }
+
+function DocsProductSwitcher({ activeId }: { activeId: string | null }) {
+  const activeProduct =
+    docsProductOptions.find((option) => option.id === activeId) ?? docsProductOptions[0];
+  const ActiveIcon = activeProduct.Icon;
+
+  return (
+    <div className={styles.productHeader}>
+      <details className={styles.productSwitcher}>
+        <summary className={styles.productSwitcherSummary}>
+          <span className={styles.productSwitcherCurrent}>
+            <ActiveIcon className={styles.productHeaderIcon} aria-hidden="true" />
+            <span className={styles.productSwitcherText}>
+              <span className={styles.productSwitcherLabel}>{activeProduct.label}</span>
+              <span className={styles.productHeaderTagline}>{activeProduct.tagline}</span>
+            </span>
+          </span>
+          <span className={styles.productSwitcherMeta}>
+            {activeProduct.version && (
+              <span className={styles.productHeaderVersion}>v{activeProduct.version}</span>
+            )}
+            <ChevronDown className={styles.productSwitcherChevron} aria-hidden="true" />
+          </span>
+        </summary>
+        <div className={styles.productSwitcherMenu}>
+          {docsProductOptions.map((option) => {
+            const OptionIcon = option.Icon;
+            const isActive = option.id === activeId;
+            return (
+              <Link
+                key={option.id ?? 'relay'}
+                href={option.href}
+                className={`${styles.productSwitcherOption} ${
+                  isActive ? styles.productSwitcherOptionActive : ''
+                }`}
+              >
+                <OptionIcon className={styles.productSwitcherOptionIcon} aria-hidden="true" />
+                <span className={styles.productSwitcherOptionText}>
+                  <span>{option.label}</span>
+                  <span>{option.tagline}</span>
+                </span>
+              </Link>
+            );
+          })}
+        </div>
+      </details>
+    </div>
+  );
+}
diff --git a/web/components/docs/docs.module.css b/web/components/docs/docs.module.css
index b47572b..3246c11 100644
--- a/web/components/docs/docs.module.css
+++ b/web/components/docs/docs.module.css
@@ -293,44 +293,77 @@
   margin-bottom: 1.4rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--line);
+  position: relative;
 }
 
-.productBackLink {
-  display: inline-flex;
+.productSwitcher {
+  position: relative;
+}
+
+.productSwitcherSummary {
+  list-style: none;
+  display: flex;
   align-items: center;
-  gap: 0.3rem;
-  font-size: 0.74rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: var(--fg-faint);
-  text-decoration: none;
-  margin-bottom: 0.75rem;
-  transition: color 0.15s;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.62rem 0.66rem;
+  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
+  border-radius: 0.55rem;
+  background: color-mix(in srgb, var(--primary) 4%, transparent);
+  color: var(--fg);
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
 }
 
-.productBackLink:hover {
-  color: var(--primary);
+.productSwitcherSummary::-webkit-details-marker {
+  display: none;
+}
+
+.productSwitcherSummary:hover {
+  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
+  background: color-mix(in srgb, var(--primary) 7%, transparent);
 }
 
-.productHeaderName {
+.productSwitcher[open] .productSwitcherSummary {
+  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+}
+
+.productSwitcherCurrent {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 1.05rem;
+  gap: 0.58rem;
+  min-width: 0;
+}
+
+.productSwitcherText {
+  display: grid;
+  gap: 0.14rem;
+  min-width: 0;
+}
+
+.productSwitcherLabel {
+  font-size: 1rem;
   font-weight: 700;
+  line-height: 1.1;
   color: var(--fg);
-  text-decoration: none;
 }
 
-.productHeaderName:hover {
-  color: var(--primary);
+.productSwitcherMeta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.36rem;
+  flex-shrink: 0;
 }
 
 .productHeaderIcon {
   width: 1.1rem;
   height: 1.1rem;
   color: var(--primary);
+  flex-shrink: 0;
 }
 
 .productHeaderVersion {
@@ -345,10 +378,85 @@
 }
 
 .productHeaderTagline {
-  margin: 0.4rem 0 0;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 0.8rem;
   line-height: 1.4;
   color: var(--fg-muted);
+  white-space: nowrap;
+}
+
+.productSwitcherChevron {
+  width: 0.9rem;
+  height: 0.9rem;
+  color: var(--fg-muted);
+  transition: transform 0.15s;
+}
+
+.productSwitcher[open] .productSwitcherChevron {
+  transform: rotate(180deg);
+}
+
+.productSwitcherMenu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 0.4rem);
+  left: 0;
+  right: 0;
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.35rem;
+  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
+  border-radius: 0.6rem;
+  background: color-mix(in srgb, var(--bg), #061a28 14%);
+  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.24);
+}
+
+.productSwitcherOption {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.56rem;
+  padding: 0.55rem 0.5rem;
+  border-radius: 0.42rem;
+  color: var(--fg-muted);
+  text-decoration: none;
+  transition:
+    background 0.15s,
+    color 0.15s;
+}
+
+.productSwitcherOption:hover,
+.productSwitcherOptionActive {
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  color: var(--fg);
+}
+
+.productSwitcherOptionIcon {
+  width: 0.95rem;
+  height: 0.95rem;
+  margin-top: 0.1rem;
+  flex-shrink: 0;
+  color: var(--primary);
+}
+
+.productSwitcherOptionText {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.productSwitcherOptionText span:first-child {
+  font-size: 0.86rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: currentColor;
+}
+
+.productSwitcherOptionText span:last-child {
+  font-size: 0.72rem;
+  line-height: 1.35;
+  color: var(--fg-faint);
 }
 
 .navGroup {
diff --git a/web/components/home/Hero.tsx b/web/components/home/Hero.tsx
index 6e326fc..c82af5a 100644
--- a/web/components/home/Hero.tsx
+++ b/web/components/home/Hero.tsx
@@ -1,8 +1,7 @@
-import Link from 'next/link';
-
+import { HeroCommandCta } from './HeroCommandCta';
 import { HeroGraph } from './HeroGraph';
 import s from '../../app/landing.module.css';
-import { GitHubIcon, HeroBackdrop } from './icons';
+import { HeroBackdrop } from './icons';
 
 export function Hero() {
   return (
@@ -17,23 +16,7 @@ export function Hero() {
             multi-agent system without worrying about the glue.
           </p>
 
-          <div className={s.ctas}>
-            <Link href="/docs" className={s.ctaPrimary}>
-              Read Docs
-            </Link>
-            <Link href="/skill" className={s.ctaSecondary}>
-              Agent Skill
-            </Link>
-            <a
-              href="https://github.com/agentworkforce/relay"
-              target="_blank"
-              rel="noopener noreferrer"
-              className={s.ctaSecondary}
-            >
-              <GitHubIcon />
-              GitHub
-            </a>
-          </div>
+          <HeroCommandCta />
         </div>
 
         <div className={s.heroRight}>
diff --git a/web/components/home/HeroCommandCta.tsx b/web/components/home/HeroCommandCta.tsx
new file mode 100644
index 0000000..f88fb27
--- /dev/null
+++ b/web/components/home/HeroCommandCta.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+
+import s from '../../app/landing.module.css';
+
+const HERO_COMMAND = 'npx @agent-relay@latest skills add';
+
+async function copyCommand() {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(HERO_COMMAND);
+      return;
+    } catch {
+      // Embedded browsers can expose clipboard but still block writes.
+    }
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = HERO_COMMAND;
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
+
+export function HeroCommandCta() {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    await copyCommand();
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1800);
+  }
+
+  return (
+    <button className={s.heroCommandCta} type="button" onClick={handleCopy}>
+      <span className={s.heroCommandPrompt}>$</span>
+      <code className={s.heroCommandText}>{HERO_COMMAND}</code>
+      <span className={s.heroCommandCopyButton} aria-hidden="true">
+        {copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+      </span>
+      <span className={s.heroCommandCopied} aria-live="polite">
+        {copied ? 'Copied' : 'Copy'}
+      </span>
+    </button>
+  );
+}
diff --git a/web/components/home/HomePosterText.tsx b/web/components/home/HomePosterText.tsx
new file mode 100644
index 0000000..a99049a
--- /dev/null
+++ b/web/components/home/HomePosterText.tsx
@@ -0,0 +1,58 @@
+import s from '../../app/landing.module.css';
+
+// Edit these lines to change the homepage poster copy.
+const HOME_POSTER_LINES = ['UNLEASH', 'YOUR', 'TEAM'];
+const HOME_POSTER_SHADOW_STEPS = Array.from({ length: 360 }, (_, index) => index + 1);
+const HOME_POSTER_LINE_START = 236;
+const HOME_POSTER_LINE_HEIGHT = 194;
+const HOME_POSTER_SHADOW_STEP_SIZE = 2.3;
+
+export function HomePosterText({ lines = HOME_POSTER_LINES }: { lines?: string[] }) {
+  const title = lines.join(' ');
+
+  return (
+    <section className={s.homePosterHero} aria-label={title}>
+      <svg
+        className={s.homePosterSvg}
+        viewBox="0 0 1440 900"
+        preserveAspectRatio="xMinYMin meet"
+        role="img"
+      >
+        <title>{title}</title>
+        <g aria-hidden="true">
+          {HOME_POSTER_SHADOW_STEPS.map((step) => (
+            <g
+              key={step}
+              transform={`translate(${step * HOME_POSTER_SHADOW_STEP_SIZE} ${
+                step * HOME_POSTER_SHADOW_STEP_SIZE
+              })`}
+            >
+              {lines.map((line, index) => (
+                <text
+                  key={`${step}-${line}-${index}`}
+                  className={s.homePosterShadowLine}
+                  x="34"
+                  y={HOME_POSTER_LINE_START + index * HOME_POSTER_LINE_HEIGHT}
+                >
+                  {line}
+                </text>
+              ))}
+            </g>
+          ))}
+        </g>
+        <g>
+          {lines.map((line, index) => (
+            <text
+              key={`${line}-${index}`}
+              className={s.homePosterTextLine}
+              x="34"
+              y={HOME_POSTER_LINE_START + index * HOME_POSTER_LINE_HEIGHT}
+            >
+              {line}
+            </text>
+          ))}
+        </g>
+      </svg>
+    </section>
+  );
+}
diff --git a/web/components/home/HomeRelaySection.tsx b/web/components/home/HomeRelaySection.tsx
new file mode 100644
index 0000000..dc3eece
--- /dev/null
+++ b/web/components/home/HomeRelaySection.tsx
@@ -0,0 +1,53 @@
+import s from '../../app/landing.module.css';
+
+const RELAY_STEPS = [
+  {
+    title: 'Get agents on the same channel',
+    body: 'Give each worker a shared place to listen, speak, and see the work already in motion.',
+  },
+  {
+    title: 'Organize the team around threads',
+    body: 'Keep decisions, handoffs, files, and status updates attached to the task they belong to.',
+  },
+  {
+    title: 'Route work without more glue',
+    body: 'Agents can recover context, mention each other, and move work forward without asking humans to reconnect the dots.',
+  },
+];
+
+export function HomeRelaySection() {
+  return (
+    <section className={s.homeRelaySection} aria-labelledby="home-relay-title">
+      <div className={s.homeRelayInner}>
+        <div className={s.homeRelayCopy}>
+          <span className={s.homeRelayKicker}>Get on the relay</span>
+          <h2 id="home-relay-title">A relay is how agent teams stay together.</h2>
+          <p>
+            It is the shared coordination layer for agents, people, files, messages, and decisions. Instead of
+            every worker operating from a separate side channel, everyone joins the same signal.
+          </p>
+        </div>
+
+        <div className={s.homeRelayVisual}>
+          <div className={s.homeRelaySignal} aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+
+          <div className={s.homeRelayFlow}>
+            {RELAY_STEPS.map((step, index) => (
+              <div className={s.homeRelayStep} key={step.title}>
+                <span className={s.homeRelayStepIndex}>{String(index + 1).padStart(2, '0')}</span>
+                <div>
+                  <h3>{step.title}</h3>
+                  <p>{step.body}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/web/components/home/QuickStart.tsx b/web/components/home/QuickStart.tsx
index e937230..d8e2ffa 100644
--- a/web/components/home/QuickStart.tsx
+++ b/web/components/home/QuickStart.tsx
@@ -1,64 +1,79 @@
 import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
 
 import { AGENT_TOOL_LABELS, AGENT_TOOLS, AgentToolLogo } from '../AgentToolLogos';
-import { AgentSetupPrompt, InstallCommand } from '../InstallCommand';
+import { InstallCommand } from '../InstallCommand';
 import s from '../../app/landing.module.css';
+import { GitHubIcon } from './icons';
 
 export function QuickStart() {
   return (
     <section className={s.installSection} aria-labelledby="install-title">
       <div className={s.installInner}>
-        <div className={s.installHeader}>
-          <div className={s.installHeaderText}>
-            <div className={s.installTitleRow}>
-              <h2 id="install-title" className={s.installTitle}>
-                Quick start
-              </h2>
-
-              <div className={s.installAgentLogos} aria-label="Get started with the agents you already use">
-                {AGENT_TOOLS.map((provider) => (
-                  <span
-                    key={provider}
-                    className={s.installAgentLogo}
-                    aria-label={AGENT_TOOL_LABELS[provider]}
-                    title={AGENT_TOOL_LABELS[provider]}
-                  >
-                    <AgentToolLogo
-                      className={s.installAgentLogoIcon}
-                      idPrefix={`install-agent-${provider}`}
-                      provider={provider}
-                    />
-                  </span>
-                ))}
-                <span className={s.installAgentTooltip}>
-                  Works with the harnesses you already love or integrate your own.
-                </span>
+        <div className={s.installCopyColumn}>
+          <div className={s.installHeader}>
+            <div className={s.installHeaderText}>
+              <div className={s.installTitleRow}>
+                <h2 id="install-title" className={s.installTitle}>
+                  Build agent communication into your app
+                </h2>
               </div>
+
+              <p className={s.installSubtitle}>
+                Use the Agent Relay SDK for channels, DMs, threads, and realtime events inside your product
+                or infrastructure.
+              </p>
             </div>
+          </div>
 
-            <p className={s.installSubtitle}>
-              Human or agent, sometimes it's just <i>easier</i> to start building with stuff to figure out if
-              it's useful. Fortunately, we've made that really easy for both.
-            </p>
+          <div className={s.installActions}>
+            <div className={s.installCtas}>
+              <Link href="/docs" className={s.ctaPrimary}>
+                Read the docs
+                <ArrowRight aria-hidden="true" />
+              </Link>
+              <a
+                href="https://github.com/agentworkforce/relay"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={s.ctaSecondary}
+              >
+                <GitHubIcon />
+                GitHub
+              </a>
+            </div>
+            <InstallCommand />
           </div>
         </div>
 
-        <div className={s.installActions}>
-          <InstallCommand />
-          <AgentSetupPrompt />
-        </div>
+        <div className={s.installVisual} role="img" aria-label="Agent Relay connects app messages to agent runtimes">
+          <div className={s.installVisualOrbit} aria-hidden="true">
+            <div className={s.installAgentLogos}>
+              {AGENT_TOOLS.map((provider) => (
+                <span key={provider} className={s.installAgentLogo} title={AGENT_TOOL_LABELS[provider]}>
+                  <AgentToolLogo
+                    className={s.installAgentLogoIcon}
+                    idPrefix={`install-agent-${provider}`}
+                    provider={provider}
+                  />
+                </span>
+              ))}
+            </div>
+
+            <div className={s.installVisualCore}>
+              <img src="/brand-kit/agent-relay-mark-transparent.png" alt="" className={s.installVisualMark} />
+              <span>Relay SDK</span>
+            </div>
+          </div>
 
-        <div className={s.skillCallout}>
-          <span className={s.skillCalloutText}>
-            <strong>Hand this to an agent</strong>
+          <div className={s.installVisualCode} aria-hidden="true">
             <span>
-              The hosted skill explains how to start a workspace, choose orchestrator or participant mode, and
-              get workers communicating on Relay.
+              <code>channel.send(&quot;ready&quot;)</code>
             </span>
-          </span>
-          <Link href="/skill" className={s.skillCalloutLink}>
-            Open skill
-          </Link>
+            <span>
+              <code>thread.reply(agent)</code>
+            </span>
+          </div>
         </div>
       </div>
     </section>
diff --git a/web/components/site-footer.module.css b/web/components/site-footer.module.css
index 25a21ba..0e7d2a3 100644
--- a/web/components/site-footer.module.css
+++ b/web/components/site-footer.module.css
@@ -50,7 +50,7 @@
 
 .columns {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 32px;
 }
 
@@ -70,6 +70,10 @@
 }
 
 .link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  width: fit-content;
   font-size: 0.88rem;
   color: var(--footer-muted);
   text-decoration: none;
@@ -80,6 +84,13 @@
   color: var(--footer-fg);
 }
 
+.externalIcon {
+  width: 0.8rem;
+  height: 0.8rem;
+  flex-shrink: 0;
+  stroke-width: 1.8;
+}
+
 .bottom {
   display: flex;
   align-items: center;
diff --git a/web/content/docs/agents/build.mdx b/web/content/docs/agents/build.mdx
new file mode 100644
index 0000000..0db2a95
--- /dev/null
+++ b/web/content/docs/agents/build.mdx
@@ -0,0 +1,47 @@
+---
+title: 'Build your own'
+description: 'Define a custom agent by making the trigger, context, permissions, and handoff path explicit.'
+---
+
+Start with the contract. The implementation can change, but the contract keeps the agent understandable.
+
+## Define the job
+
+Write the job in one sentence:
+
+```text
+When <trigger> happens, inspect <context>, take <bounded action>, and report <where>.
+```
+
+If the sentence needs a paragraph, split the agent into smaller agents.
+
+## Give it a persona
+
+The persona is not a brand voice. It is the operating policy:
+
+- What the agent optimizes for
+- What it must never do without approval
+- Which files, tools, providers, and channels it can use
+- What a good final report looks like
+
+## Keep context structured
+
+Prefer durable references over pasted prose:
+
+- Relay channels and threads for coordination
+- Relayfile paths for provider-backed records
+- GitHub PR URLs and commit SHAs for code review
+- Linear issue IDs for product work
+
+Structured context lets the agent resume, verify, and explain itself without reconstructing the world from a prompt.
+
+## Build from the repo
+
+<CardGroup cols={2}>
+  <Card title="Agents repo" href="https://github.com/AgentWorkforce/agents">
+    Fork the examples and keep your agent's persona, trigger, and implementation together.
+  </Card>
+  <Card title="Relay docs" href="/docs/introduction">
+    Use Relay for the messaging, workspace, and handoff layer.
+  </Card>
+</CardGroup>
diff --git a/web/content/docs/agents/deploy.mdx b/web/content/docs/agents/deploy.mdx
new file mode 100644
index 0000000..9d6ce43
--- /dev/null
+++ b/web/content/docs/agents/deploy.mdx
@@ -0,0 +1,33 @@
+---
+title: 'Deploy and operate'
+description: 'Run proactive agents with clear triggers, scoped credentials, observable output, and human approval where it matters.'
+---
+
+Deployment is where an agent becomes part of the team. Treat it like a small service with a narrower blast radius and a louder paper trail.
+
+## Before enabling a trigger
+
+- Scope credentials to the paths, repos, channels, and providers the agent actually needs.
+- Set a clear reporting channel or thread.
+- Decide which actions require approval.
+- Put a spending or runtime limit around open-ended work.
+- Test with a real event and confirm the final report is useful.
+
+## Operating loop
+
+An unattended agent should leave enough evidence that a teammate can answer:
+
+1. Why did it wake up?
+2. What context did it inspect?
+3. What did it change?
+4. What does a human need to review?
+
+If those answers are not visible in Relay, the agent is too quiet.
+
+## Promote slowly
+
+Start in report-only mode. Let the agent recommend the action, then graduate one permission at a time: comment, label, open a PR, merge, deploy.
+
+<BannerLink href="/docs/agents/build" icon="bot">
+  Design the agent contract before increasing autonomy.
+</BannerLink>
diff --git a/web/content/docs/agents/introduction.mdx b/web/content/docs/agents/introduction.mdx
new file mode 100644
index 0000000..8f5a8d2
--- /dev/null
+++ b/web/content/docs/agents/introduction.mdx
@@ -0,0 +1,35 @@
+---
+title: 'Agents'
+description: 'Proactive workers that watch the systems your team already uses, decide when action is needed, and report back through Relay.'
+---
+
+Agents turn Relay from a coordination layer into an operating system for work. They can watch channels, files, provider events, schedules, and pull requests, then take a bounded action without waiting for someone to paste context into a chat box.
+
+The important part is not autonomy for its own sake. A useful agent has a small job, clear inputs, visible output, and a human-friendly trail of what it did.
+
+## What an agent needs
+
+- **A trigger**: a schedule, webhook, file event, message, or manual launch.
+- **Context**: the channel, thread, file path, issue, PR, or provider record that explains the task.
+- **A policy**: what the agent may read, write, spend, and deploy.
+- **A reporting path**: where the agent posts progress, findings, and handoffs.
+
+Relay gives that work a shared substrate: messages for coordination, Relayfile for provider-backed state, and profiles for repeatable behavior.
+
+## Start here
+
+<CardGroup cols={3}>
+  <Card title="Quickstart" href="/docs/agents/quickstart">
+    Launch a small repo-review agent and see how it reports through Relay.
+  </Card>
+  <Card title="Agent patterns" href="/docs/agents/patterns">
+    Pick the shape that matches the job: reviewer, monitor, triager, or worker pair.
+  </Card>
+  <Card title="Build your own" href="/docs/agents/build">
+    Define the trigger, behavior, permissions, and handoff path for a custom agent.
+  </Card>
+</CardGroup>
+
+<BannerLink href="/agents" icon="bot">
+  Browse the open-source agent gallery.
+</BannerLink>
diff --git a/web/content/docs/agents/patterns.mdx b/web/content/docs/agents/patterns.mdx
new file mode 100644
index 0000000..7a9dcd9
--- /dev/null
+++ b/web/content/docs/agents/patterns.mdx
@@ -0,0 +1,34 @@
+---
+title: 'Agent patterns'
+description: 'Use a small set of repeatable patterns for proactive agents instead of designing every workflow from scratch.'
+---
+
+Good agents are boring in the best way. They have one reason to wake up, one definition of done, and a clear path back to the team.
+
+## Reviewer
+
+Reviews pull requests, migrations, release notes, or generated work. The agent should cite files, produce concrete findings, and hand back a short pass/fail summary.
+
+Use it when quality gates are frequent and repetitive.
+
+## Monitor
+
+Watches outside signals: package releases, vendor changelogs, HN keywords, inbound emails, or provider webhooks. It should dedupe aggressively and only post when the signal clears a threshold.
+
+Use it when the job is mostly "notice the important thing."
+
+## Triager
+
+Turns unstructured input into routed work. It can classify Linear issues, summarize customer requests, open follow-up tickets, or assign an owner.
+
+Use it when the next step is known, but humans spend time sorting the queue.
+
+## Worker pair
+
+Splits a job between an implementer and a reviewer. One agent changes the system, the other checks the result and asks for corrections before a human sees it.
+
+Use it when the task benefits from independent review before handoff.
+
+<BannerLink href="/agents/use-cases" icon="compass">
+  See concrete proactive-agent use cases.
+</BannerLink>
diff --git a/web/content/docs/agents/quickstart.mdx b/web/content/docs/agents/quickstart.mdx
new file mode 100644
index 0000000..76207e2
--- /dev/null
+++ b/web/content/docs/agents/quickstart.mdx
@@ -0,0 +1,50 @@
+---
+title: 'Quickstart'
+description: 'Fork an existing proactive agent, connect it to a Relay workspace, and run it against a real event.'
+---
+
+The fastest way to start is to fork an existing agent and keep the first job narrow. Review a PR. Triage one Linear project. Watch one package. Send one digest.
+
+## 1. Pick an agent
+
+Start from the open-source agents repo:
+
+```bash
+gh repo clone AgentWorkforce/agents
+cd agents
+```
+
+Choose a small agent directory as the reference. Each agent should make the trigger, persona, and implementation obvious from the files in that folder.
+
+## 2. Connect Relay
+
+Install the Relay skill in the coding harness you use for setup work:
+
+```bash
+npx @agent-relay@latest skills add
+```
+
+Then create or select the workspace where the agent should report progress. The same workspace can host the agent's channel, human handoffs, and durable context.
+
+## 3. Run the first event
+
+Use a real event, but keep the permission surface small:
+
+```bash
+agent-relay spawn repo-reviewer \
+  --channel dev \
+  --task "Review the latest pull request and report findings."
+```
+
+The first successful run should prove three things: the agent got the right context, stayed inside its policy, and reported its work somewhere humans already look.
+
+## Next
+
+<CardGroup cols={2}>
+  <Card title="Agent patterns" href="/docs/agents/patterns">
+    Use a known shape instead of inventing every workflow from scratch.
+  </Card>
+  <Card title="Deploy and operate" href="/docs/agents/deploy">
+    Add schedules, secrets, limits, and reporting before leaving it unattended.
+  </Card>
+</CardGroup>
diff --git a/web/lib/product-docs-nav.ts b/web/lib/product-docs-nav.ts
index e265bf0..24cfe63 100644
--- a/web/lib/product-docs-nav.ts
+++ b/web/lib/product-docs-nav.ts
@@ -1,5 +1,5 @@
 // Pure, dependency-free section + nav definitions for the standalone product
-// docs (Relayfile, Relayloop). This module is safe to import from client
+// docs (Relayfile, Agents, Relayloop). This module is safe to import from client
 // components — it must NOT import anything that touches `node:fs` (e.g.
 // content-store), so the sidebar can use it without dragging server-only code
 // into the browser bundle. Content loaders live in `./product-docs`.
@@ -136,7 +136,34 @@ export const loopSection: ProductDocSection = {
   ],
 };
 
-export const productSections: ProductDocSection[] = [fileSection, loopSection];
+export const agentsSection: ProductDocSection = {
+  id: 'agents',
+  label: 'Agents',
+  tagline: 'Proactive workers you can fork, adapt, and deploy.',
+  repo: 'AgentWorkforce/agents',
+  nav: [
+    {
+      title: 'Start',
+      items: [
+        { title: 'Introduction', slug: 'introduction' },
+        { title: 'Quickstart', slug: 'quickstart' },
+      ],
+    },
+    {
+      title: 'Design',
+      items: [
+        { title: 'Agent patterns', slug: 'patterns' },
+        { title: 'Build your own', slug: 'build' },
+      ],
+    },
+    {
+      title: 'Run',
+      items: [{ title: 'Deploy and operate', slug: 'deploy' }],
+    },
+  ],
+};
+
+export const productSections: ProductDocSection[] = [fileSection, agentsSection, loopSection];
 
 export function getProductSection(id: string): ProductDocSection | null {
   return productSections.find((section) => section.id === id) ?? null;
diff --git a/web/lib/product-docs.ts b/web/lib/product-docs.ts
index 90770eb..daf8d19 100644
--- a/web/lib/product-docs.ts
+++ b/web/lib/product-docs.ts
@@ -13,6 +13,7 @@ import { absoluteUrl } from './site';
 // avoid pulling the server-only loaders below into the browser bundle.
 export type { NavItem, NavGroup, ProductDocSection } from './product-docs-nav';
 export {
+  agentsSection,
   fileSection,
   loopSection,
   productSections,