From 17056d0b30e9a3e0350a93c7176c6a9ecf0e04cd Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Wed, 8 Jul 2026 23:00:25 +0200
Subject: [PATCH] =?UTF-8?q?feat(landing):=20honest=20high-end=20redesign?=
 =?UTF-8?q?=20=E2=80=94=20kill=20fake=20social=20proof,=20brand=20gradient?=
 =?UTF-8?q?=20identity,=20final=20CTA,=20mobile=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- removed fabricated fork counts/'verified' badges, 'our customers ship
  today' copy, pseudo client logo marks and stale v0.1 badge (zero-user
  product must not fake traction)
- new proof-by-specificity band: verifiable links to /docs/oauth, /status,
  /security instead of testimonial cosplay
- identity: indigo-to-cyan brand gradient, indigo-tinted elevated surfaces,
  mono section kickers, terminal-chrome hero rotator, gradient h-11 CTA
- how-it-works as connected pipeline; new final CTA band (page no longer
  ends on FAQ); footer upgraded to 4-column product/resources/legal
- lib/pricing.ts single tier source for pricing page + landing teaser;
  annual-billing FAQ claim softened to truth (no annual checkout exists)
- hero video preload=metadata + IntersectionObserver play (2.6MB off the
  critical path); 44px touch targets; mobile menu: Guides link, CTA,
  scroll-lock, escape/outside-tap close

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SXUwmPVRTD8AKQtio6gCN5
---
 apps/web/app/(marketing)/layout.tsx           | 105 ++-
 apps/web/app/(marketing)/page.tsx             | 596 +++++++++---------
 apps/web/app/(marketing)/pricing/page.tsx     |  77 +--
 apps/web/app/globals.css                      |  66 +-
 apps/web/components/hero-step-rotator.tsx     |  41 +-
 apps/web/components/hero-video.tsx            |  39 +-
 apps/web/components/marketing-mobile-menu.tsx |  44 +-
 apps/web/lib/pricing.ts                       |  91 +++
 8 files changed, 627 insertions(+), 432 deletions(-)
 create mode 100644 apps/web/lib/pricing.ts

diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index 4288b8a..6746330 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -39,42 +39,83 @@ export default function MarketingLayout({ children }: { children: React.ReactNod
         </div>
       </header>
       <main className="flex-1">{children}</main>
-      <footer className="border-t border-[--color-border] py-8">
-        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 text-[12px] text-[--color-fg-subtle] md:flex-row md:items-center md:justify-between">
-          <Link
-            href="/status"
-            className="flex items-center gap-2 transition-colors hover:text-[--color-fg]"
-          >
-            <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
-            <span>System status</span>
-          </Link>
-          <div className="flex flex-wrap gap-x-5 gap-y-1">
-            <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
-              Docs
-            </Link>
-            <Link href="/contact" className="transition-colors hover:text-[--color-fg]">
-              Contact
-            </Link>
-            <Link href="/security" className="transition-colors hover:text-[--color-fg]">
-              Security
-            </Link>
-            <Link href="/privacy" className="transition-colors hover:text-[--color-fg]">
-              Privacy
-            </Link>
-            <Link href="/agb" className="transition-colors hover:text-[--color-fg]">
-              AGB
-            </Link>
-            <Link href="/impressum" className="transition-colors hover:text-[--color-fg]">
-              Impressum
-            </Link>
-            <Link href="/terms" className="transition-colors hover:text-[--color-fg]">
-              Terms
-            </Link>
+      <footer className="border-t border-[--color-border] py-12">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="grid gap-10 sm:grid-cols-2 md:grid-cols-4">
+            {/* Brand column — positioning line + live status. */}
+            <div className="sm:col-span-2 md:col-span-1">
+              <Logo />
+              <p className="mt-3 max-w-xs text-[12.5px] leading-relaxed text-[--color-fg-subtle]">
+                From a prompt to a hosted, OAuth-protected MCP server — for Claude, Cursor and
+                ChatGPT.
+              </p>
+              <Link
+                href="/status"
+                className="mt-4 flex items-center gap-2 text-[12px] text-[--color-fg-subtle] transition-colors hover:text-[--color-fg]"
+              >
+                <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
+                <span>System status</span>
+              </Link>
+            </div>
+            <FooterColumn
+              title="Product"
+              links={[
+                { href: '/templates', label: 'Templates' },
+                { href: '/pricing', label: 'Pricing' },
+                { href: '/changelog', label: 'Changelog' },
+                { href: '/security', label: 'Security' },
+              ]}
+            />
+            <FooterColumn
+              title="Resources"
+              links={[
+                { href: '/docs', label: 'Docs' },
+                { href: '/guides', label: 'Guides' },
+                { href: '/docs/faq', label: 'FAQ' },
+                { href: '/contact', label: 'Contact' },
+              ]}
+            />
+            <FooterColumn
+              title="Legal"
+              links={[
+                { href: '/privacy', label: 'Privacy' },
+                { href: '/terms', label: 'Terms' },
+                { href: '/agb', label: 'AGB' },
+                { href: '/impressum', label: 'Impressum' },
+              ]}
+            />
+          </div>
+          <div className="mt-10 border-t border-[--color-border] pt-6 text-[12px] text-[--color-fg-subtle]">
+            &copy; {new Date().getFullYear()} BuildMyMCPServer
           </div>
-          <div>&copy; {new Date().getFullYear()} BuildMyMCPServer</div>
         </div>
       </footer>
       <CookieBanner />
     </div>
   );
 }
+
+function FooterColumn({
+  title,
+  links,
+}: {
+  title: string;
+  links: { href: string; label: string }[];
+}) {
+  return (
+    <div>
+      <h3 className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[--color-fg-muted]">
+        {title}
+      </h3>
+      <ul className="mt-3 space-y-2 text-[12.5px] text-[--color-fg-subtle]">
+        {links.map((l) => (
+          <li key={l.href}>
+            <Link href={l.href} className="transition-colors hover:text-[--color-fg]">
+              {l.label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 60e411e..183037a 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -12,31 +12,11 @@ import { JsonLd } from '@/components/json-ld';
 import { ParticleHero } from '@/components/particle-hero';
 import { PulseLink } from '@/components/pulse';
 import { ScrollCue } from '@/components/scroll-cue';
-import { StaticCodeBlock } from '@/components/static-code-block';
+import { TIERS } from '@/lib/pricing';
 import { FAQ, faqJsonLd } from '@/lib/seo';
-import { ChevronDown } from 'lucide-react';
-import type { ComponentType } from 'react';
+import { Activity, ChevronDown, Container, ShieldCheck } from 'lucide-react';
 import Link from 'next/link';
-
-const PROMPT_EXAMPLE = `Create an MCP server that searches our Notion workspace.
-Tools: search_pages, get_page_content.
-Auth: NOTION_API_KEY.`;
-
-const OUTPUT_EXAMPLE = `> Generating spec...               OK  (2 tools)
-> Static checks                    OK
-> Building image bmm-mcp-notion    OK  17.2s
-> Deploying container              OK
-> Live at https://notion-x9.mcp.buildmymcpserver.com
-> First request: 401 → token → 200 OK`;
-
-const INSTALL_SNIPPET = `{
-  "mcpServers": {
-    "notion": {
-      "url": "https://notion-x9.mcp.buildmymcpserver.com/mcp",
-      "auth": "oauth2"
-    }
-  }
-}`;
+import type { ComponentType } from 'react';
 
 interface ExampleEntry {
   title: string;
@@ -50,41 +30,58 @@ interface ExampleEntry {
 }
 
 const EXAMPLES: ExampleEntry[] = [
-  { title: 'PostgreSQL', desc: 'Read-only access to your tables with schema introspection.',           Icon: PostgresIcon,         bg: '#336791', fg: '#ffffff' },
-  { title: 'Salesforce', desc: 'Query opportunities, accounts and leads from Claude.',                Icon: SalesforceCloudIcon,  bg: '#00a1e0', fg: '#ffffff' },
-  { title: 'Notion',     desc: 'Search pages, read content, append blocks.',                          Icon: NotionIcon,           bg: '#ffffff', fg: '#0a0a0b' },
-  { title: 'GitHub',     desc: 'List issues, search code, post comments. Scoped to one repo.',       Icon: GitHubIcon,           bg: '#181717', fg: '#ffffff' },
-  { title: 'Stripe',     desc: 'Look up charges, customers, refunds (read-only by default).',         Icon: StripeIcon,           bg: '#635bff', fg: '#ffffff' },
-  { title: 'Custom REST',desc: 'Wrap any HTTP API behind one prompt-defined tool surface.',           Icon: RestIcon,             bg: '#6366f1', fg: '#ffffff' },
+  {
+    title: 'PostgreSQL',
+    desc: 'Read-only access to your tables with schema introspection.',
+    Icon: PostgresIcon,
+    bg: '#336791',
+    fg: '#ffffff',
+  },
+  {
+    title: 'Salesforce',
+    desc: 'Query opportunities, accounts and leads from Claude.',
+    Icon: SalesforceCloudIcon,
+    bg: '#00a1e0',
+    fg: '#ffffff',
+  },
+  {
+    title: 'Notion',
+    desc: 'Search pages, read content, append blocks.',
+    Icon: NotionIcon,
+    bg: '#ffffff',
+    fg: '#0a0a0b',
+  },
+  {
+    title: 'GitHub',
+    desc: 'List issues, search code, post comments. Scoped to one repo.',
+    Icon: GitHubIcon,
+    bg: '#181717',
+    fg: '#ffffff',
+  },
+  {
+    title: 'Stripe',
+    desc: 'Look up charges, customers, refunds (read-only by default).',
+    Icon: StripeIcon,
+    bg: '#635bff',
+    fg: '#ffffff',
+  },
+  {
+    title: 'Custom REST',
+    desc: 'Wrap any HTTP API behind one prompt-defined tool surface.',
+    Icon: RestIcon,
+    bg: '#6366f1',
+    fg: '#ffffff',
+  },
 ];
 
-interface ClientEntry {
-  name: string;
-  /** Single-character mark for inline visual identity. */
-  mark: string;
-}
-
-const CLIENTS: ClientEntry[] = [
-  { name: 'Claude Desktop',  mark: 'C' },
-  { name: 'Cursor',           mark: '⌘' },
-  { name: 'ChatGPT',          mark: '✦' },
-  { name: 'VS Code Copilot',  mark: '<>' },
-  { name: 'Continue.dev',     mark: '→' },
-];
-
-interface MockTemplate {
-  name: string;
-  author: string;
-  tools: number;
-  forks: number;
-  verified: boolean;
-}
-
-const MOCK_TEMPLATES: MockTemplate[] = [
-  { name: 'notion-search',     author: 'core',      tools: 2, forks: 247, verified: true  },
-  { name: 'github-issues',     author: 'core',      tools: 3, forks: 89,  verified: true  },
-  { name: 'stripe-readonly',   author: 'core',      tools: 4, forks: 156, verified: true  },
-  { name: 'linear-tasks',      author: 'community', tools: 5, forks: 34,  verified: false },
+// Honest marketplace preview data: template names + tool counts only. These
+// mirror the first-party starter templates; no invented fork counts, no
+// "verified" theatre — the frame is labelled as a preview of the card format.
+const PREVIEW_TEMPLATES: { name: string; author: string; tools: number }[] = [
+  { name: 'notion-search', author: 'core', tools: 2 },
+  { name: 'github-issues', author: 'core', tools: 3 },
+  { name: 'stripe-readonly', author: 'core', tools: 4 },
+  { name: 'postgres-readonly', author: 'core', tools: 3 },
 ];
 
 const MARKETPLACE_POINTS: { t: string; d: string }[] = [
@@ -97,94 +94,104 @@ const MARKETPLACE_POINTS: { t: string; d: string }[] = [
     d: "A template carries the spec and generated code, never the author's API keys. You add your own on fork.",
   },
   {
-    t: 'Ranked by real usage',
-    d: 'Templates rise on fork count and active deploys, not vanity stars. The useful ones surface themselves.',
+    t: 'Open from day one',
+    d: 'Publish a server you built and anyone can fork it. The marketplace is young — early templates set the standard.',
   },
 ];
 
-const TIERS = [
+// Proof-by-specificity band: three claims a visitor can verify with one
+// click instead of taking our word for it. Substitute for social proof
+// until there is social proof.
+const PROOF_POINTS: {
+  t: string;
+  d: string;
+  href: string;
+  linkLabel: string;
+  Icon: ComponentType<{ size?: number; className?: string }>;
+}[] = [
   {
-    name: 'Hobby',
-    price: '€0',
-    tag: 'Forever free',
-    features: ['1 server', '100k calls/mo', 'BMM subdomain', 'Community support'],
+    t: 'OAuth 2.1 authorization server',
+    d: 'PKCE, Dynamic Client Registration and Resource Indicators (RFC 8707) in front of every server.',
+    href: '/docs/oauth',
+    linkLabel: 'Read the auth docs',
+    Icon: ShieldCheck,
   },
   {
-    name: 'Pro',
-    price: '€49',
-    tag: '/ month',
-    features: [
-      '5 servers',
-      '1M calls/mo',
-      'Priority build queue',
-      'Custom domain · soon',
-      'Email support',
-    ],
+    t: 'Live system status',
+    d: 'Uptime and incident history, public. If a build queue slows down, you see it before we tell you.',
+    href: '/status',
+    linkLabel: 'Check status now',
+    Icon: Activity,
   },
   {
-    name: 'Team',
-    price: '€199',
-    tag: '/ month',
-    features: ['25 servers', '10M calls/mo', 'Audit log', 'RBAC · soon', 'Slack support'],
-  },
-  {
-    name: 'Enterprise',
-    price: 'Custom',
-    tag: 'talk to us',
-    features: ['Unlimited', 'Custom infra · on request', 'SSO/SAML · on request', 'Dedicated hosting', 'Customer success'],
+    t: 'Per-server container isolation',
+    d: 'Every generated server runs in its own Docker container. Secrets AES-256-GCM encrypted at rest.',
+    href: '/security',
+    linkLabel: 'Security architecture',
+    Icon: Container,
   },
 ];
 
+const PIPELINE_STEPS: { n: string; t: string; d: string }[] = [
+  {
+    n: '01',
+    t: 'Describe your tool',
+    d: 'A sentence is enough. List your secrets and which APIs to call.',
+  },
+  {
+    n: '02',
+    t: 'We generate, check, deploy',
+    d: 'Claude writes the spec. We render TypeScript, run static checks, build a container, deploy to your subdomain.',
+  },
+  {
+    n: '03',
+    t: 'Install in your client',
+    d: 'Copy the snippet into Claude Desktop, Cursor or ChatGPT. OAuth flow on first use.',
+  },
+];
+
+/** Mono shell-comment section kicker: `## how_it_works` */
+function Kicker({ children }: { children: string }) {
+  return <p className="kicker">## {children}</p>;
+}
+
 export default function Landing() {
+  const teaserTiers = TIERS.filter((t) => t.name === 'Hobby' || t.name === 'Pro');
   return (
     <>
-      {/* Hero — left: copy + CTAs, right: cycling step-rotator tile.
-          The old layout stacked three static code blocks vertically; the
-          new layout shows one centered tile that cycles through the same
-          three artifacts (prompt → build.log → claude config) with a
-          mouse-reactive 3D tilt and a step indicator. Shorter overall
-          so the video section below is teased above the fold. */}
+      {/* Hero — left: copy + CTAs, right: cycling terminal tile. The WebGL
+          particle field sits behind at z-0 with pointer-events:none so the
+          CTAs stay interactive. */}
       <section
         className="relative flex items-center overflow-hidden border-b border-[--color-border]"
         style={{ minHeight: 'calc(100svh - 3rem)' }}
       >
-        {/* WebGL particle field — capability-detected client component.
-            Sits behind the hero content at z-0 with pointer-events:none
-            so the CTAs above remain fully interactive. The canvas listens
-            for pointermove on window itself, so the ring still tracks
-            the cursor through the content above. With the hero now
-            filling the full first-viewport (minus the 48px sticky nav),
-            the field has cinematic-scale room and the indigo radial
-            glow + dot mask read as the dominant background motif. */}
         <ParticleHero />
         <div className="relative z-10 mx-auto grid w-full max-w-6xl gap-10 px-6 py-14 sm:py-20 md:grid-cols-[1.05fr_1fr] md:items-center md:gap-12">
           <div className="min-w-0">
-            <span className="mono inline-block rounded-full border border-[--color-border] bg-[--color-bg-elevated] px-2.5 py-0.5 text-[11px] tracking-wide text-[--color-fg-muted]">
-              v0.1 · updated 2026-05-20
-            </span>
-            <h1 className="mt-6 text-balance text-[30px] font-semibold leading-[1.06] tracking-tight sm:text-[40px] md:text-[52px]">
+            <h1 className="text-balance text-[36px] font-semibold leading-[1.04] tracking-[-0.03em] sm:text-[44px] md:text-[60px]">
               Describe your tool.
               <br />
               We host the server.
               <br />
               <span className="text-[--color-fg-muted]">AI uses it.</span>
             </h1>
-            <p className="mt-5 max-w-md text-[15px] leading-relaxed text-[--color-fg-muted]">
+            <p className="mt-5 max-w-md text-[15px] leading-relaxed text-[--color-fg-muted] sm:text-[16px]">
               From prompt to production MCP server in 60 seconds. OAuth 2.1, Streamable HTTP, ready
               for Claude, Cursor and ChatGPT.
             </p>
-            <div className="mt-7 flex flex-wrap items-center gap-3">
+            <div className="mt-8 flex flex-wrap items-center gap-3">
               <PulseLink
                 href="/login"
-                className="inline-flex h-9 items-center justify-center rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+                className="btn-brand inline-flex h-11 items-center justify-center rounded-md px-5 text-[14px] font-medium"
               >
-                Start building free
+                Start building free →
               </PulseLink>
               <PulseLink
-                href="/docs"
-                className="inline-flex h-9 items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] px-4 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+                href="#flow"
+                className="inline-flex h-11 items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] px-5 text-[14px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
               >
-                Read the docs
+                See a live build
               </PulseLink>
             </div>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-2 text-[12px] text-[--color-fg-subtle]">
@@ -208,28 +215,17 @@ export default function Landing() {
           </div>
         </div>
       </section>
-      {/* Scroll cue — fixed at the bottom of the loadscreen rather than
-          inside the hero, so it sits at the natural lower edge of the
-          first viewport regardless of how tall the hero ends up. Fades
-          out once the user has scrolled past the loadscreen. */}
       <ScrollCue targetId="flow" />
 
-      {/* Flow video — full-width edge-to-edge under the hero. The clip
-          shows the real flow (prompt → server schematic → live connection
-          to Claude Desktop) in three smooth phases. autoplay-muted-loop +
-          playsInline satisfies every mobile browser autoplay policy; the
-          `poster` carries first paint while the video decodes. */}
+      {/* Flow video — full-width edge-to-edge under the hero. Plays when
+          scrolled into view (see hero-video.tsx); preload=metadata keeps the
+          2.6 MB mp4 off the critical path on mobile. */}
       <section
         id="flow"
         className="relative w-full overflow-hidden border-b border-[--color-border] bg-black"
       >
         <div className="relative aspect-video w-full">
-          {/* HeroVideo: native <video> with autoplay+muted+loop, plus a
-              frosted mute toggle pinned bottom-right so visitors can
-              switch the narration on. See components/hero-video.tsx for
-              the autoplay/unmute mechanics. */}
           <HeroVideo />
-          {/* Subtle vignette to integrate edges into the rest of the page */}
           <div
             aria-hidden
             className="pointer-events-none absolute inset-0"
@@ -241,95 +237,101 @@ export default function Landing() {
         </div>
       </section>
 
-      {/* How it works */}
+      {/* How it works — three pipeline nodes joined by a gradient connector.
+          Desktop: horizontal line behind the numbered nodes. Mobile: the grid
+          stacks and each card keeps its own node, joined by a left rail. */}
       <section id="how" className="border-b border-[--color-border] py-14 sm:py-20">
         <div className="mx-auto max-w-6xl px-6">
           <div className="mb-10 max-w-2xl">
-            <h2 className="text-[28px] font-semibold tracking-tight">How it works</h2>
-            <p className="mt-2 text-[14px] text-[--color-fg-muted]">
+            <Kicker>how_it_works</Kicker>
+            <h2 className="mt-3 text-[28px] font-semibold tracking-tight sm:text-[32px]">
               Three steps. No JSON to write, no Docker to manage.
-            </p>
+            </h2>
           </div>
 
-          {/* The same video used to live here; it now has its own
-              full-width section directly under the hero so it's teased
-              above the fold and gets edge-to-edge real estate. This
-              section keeps the three explanatory cards as supporting
-              copy under the video. */}
-          <div className="grid gap-6 md:grid-cols-3">
-            {[
-              {
-                n: '01',
-                t: 'Describe your tool',
-                d: 'A sentence is enough. List your secrets and which APIs to call.',
-              },
-              {
-                n: '02',
-                t: 'We generate, check, deploy',
-                d: 'Claude writes the spec. We render TypeScript, run static checks, build a container, deploy to your subdomain.',
-              },
-              {
-                n: '03',
-                t: 'Install in your client',
-                d: 'Copy the snippet into Claude Desktop, Cursor or ChatGPT. OAuth flow on first use.',
-              },
-            ].map((s) => (
-              <div key={s.n} className="panel p-5">
-                <div className="mono text-[11px] tracking-widest text-[--color-fg-subtle]">
-                  {s.n}
+          <div className="relative">
+            {/* Gradient connector — desktop only, sits behind the node row. */}
+            <div
+              aria-hidden
+              className="absolute left-0 right-0 top-[22px] hidden h-px md:block"
+              style={{ background: 'var(--gradient-brand)', opacity: 0.35 }}
+            />
+            {/* Mobile left rail joining the stacked nodes. */}
+            <div
+              aria-hidden
+              className="absolute bottom-6 left-[22px] top-[22px] w-px md:hidden"
+              style={{ background: 'var(--gradient-brand)', opacity: 0.35 }}
+            />
+            <div className="grid gap-8 md:grid-cols-3 md:gap-6">
+              {PIPELINE_STEPS.map((s) => (
+                <div key={s.n} className="relative flex gap-4 md:block">
+                  <div
+                    className="mono relative z-10 flex size-11 shrink-0 items-center justify-center rounded-full border border-[--color-border-strong] text-[12px] tracking-widest text-[--color-fg]"
+                    style={{
+                      background: 'var(--color-bg)',
+                      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.05)',
+                    }}
+                  >
+                    {s.n}
+                  </div>
+                  <div className="min-w-0 md:mt-5">
+                    <h3 className="text-[15px] font-semibold tracking-tight">{s.t}</h3>
+                    <p className="mt-2 text-[13px] leading-relaxed text-[--color-fg-muted]">
+                      {s.d}
+                    </p>
+                  </div>
                 </div>
-                <h3 className="mt-4 text-[15px] font-semibold tracking-tight">{s.t}</h3>
-                <p className="mt-2 text-[13px] leading-relaxed text-[--color-fg-muted]">{s.d}</p>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
         </div>
       </section>
 
-      {/* ── Clients · trust-signal row ─────────────────────────────────
-          Archetype: typographic logo row. No panels, no bullets, just
-          well-spaced word-marks with a small symbolic mark. The whole
-          section breathes — generous py — so it reads as a moment of
-          trust, not a feature card. */}
-      <section className="border-b border-[--color-border] bg-[--color-bg] py-20 sm:py-24">
+      {/* Proof by specificity — three verifiable claims, each one click from
+          its evidence. Replaces the old pseudo-logo row: no invented marks,
+          just a plain-text compatibility line. */}
+      <section className="border-b border-[--color-border] py-16 sm:py-24">
         <div className="mx-auto max-w-6xl px-6">
-          <p className="text-center text-[11px] uppercase tracking-[0.24em] text-[--color-fg-subtle]">
-            Connects everywhere your AI lives
-          </p>
-          <div className="mt-12 flex flex-wrap items-center justify-center gap-x-14 gap-y-7 sm:gap-x-20">
-            {CLIENTS.map((c) => (
-              <div
-                key={c.name}
-                className="group flex items-center gap-3 transition-colors"
-              >
-                <span
-                  aria-hidden
-                  className="mono flex size-7 items-center justify-center rounded-md border border-[--color-border] text-[12px] text-[--color-fg-muted] transition-colors group-hover:border-[--color-accent] group-hover:text-[--color-accent]"
+          <Kicker>verify_it_yourself</Kicker>
+          <h2 className="mt-3 max-w-2xl text-[28px] font-semibold leading-[1.1] tracking-tight sm:text-[32px]">
+            No testimonials yet — we're new.
+            <br />
+            <span className="text-[--color-fg-muted]">So check the claims instead.</span>
+          </h2>
+          <div className="mt-10 grid gap-4 md:grid-cols-3">
+            {PROOF_POINTS.map((p) => {
+              const Icon = p.Icon;
+              return (
+                <Link
+                  key={p.t}
+                  href={p.href}
+                  className="panel-raised group flex flex-col p-5 transition-colors hover:border-[--color-border-strong]"
                 >
-                  {c.mark}
-                </span>
-                <span className="text-[17px] font-medium tracking-tight text-[--color-fg-muted] transition-colors group-hover:text-[--color-fg]">
-                  {c.name}
-                </span>
-              </div>
-            ))}
+                  <Icon size={20} className="text-[--color-accent]" />
+                  <h3 className="mt-4 text-[15px] font-semibold tracking-tight">{p.t}</h3>
+                  <p className="mt-2 flex-1 text-[13px] leading-relaxed text-[--color-fg-muted]">
+                    {p.d}
+                  </p>
+                  <span className="mt-4 text-[13px] font-medium text-[--color-accent] transition-colors group-hover:text-[--color-fg]">
+                    {p.linkLabel} →
+                  </span>
+                </Link>
+              );
+            })}
           </div>
+          <p className="mt-10 text-center text-[13px] text-[--color-fg-subtle]">
+            Works with Claude Desktop, Cursor, ChatGPT, VS Code Copilot and Continue.dev — anything
+            that speaks MCP.
+          </p>
         </div>
       </section>
 
-      {/* ── Examples · integration grid with brand-coloured marks ──────
-          Archetype: 2-col header (title left, supporting copy right) +
-          asymmetric 3-col card grid where each card carries a coloured
-          square brand mark for the service. The marks give each card
-          its own visual identity, breaking the "every card looks the
-          same" pattern of the previous version. */}
+      {/* Use cases — brand-coloured integration grid. */}
       <section className="border-b border-[--color-border] py-20 sm:py-28">
         <div className="mx-auto max-w-6xl px-6">
           <div className="mb-12 grid gap-6 md:grid-cols-[1fr_auto] md:items-end md:gap-12">
             <div>
-              <p className="text-[11px] uppercase tracking-[0.22em] text-[--color-fg-subtle]">
-                Use cases
-              </p>
+              <Kicker>use_cases</Kicker>
               <h2 className="mt-3 text-[32px] font-semibold leading-[1.1] tracking-tight sm:text-[40px]">
                 Wrap any HTTP API.
                 <br />
@@ -337,7 +339,7 @@ export default function Landing() {
               </h2>
             </div>
             <p className="max-w-xs text-[14px] leading-relaxed text-[--color-fg-muted]">
-              Real integrations our customers ship today. Built from one prompt each.
+              Ship integrations like these from one prompt each.
             </p>
           </div>
 
@@ -347,7 +349,7 @@ export default function Landing() {
               return (
                 <div
                   key={e.title}
-                  className="group flex items-start gap-4 rounded-xl border border-[--color-border] bg-[--color-bg-elevated] p-5 transition-colors hover:border-[--color-border-strong]"
+                  className="panel-raised group flex items-start gap-4 p-5 transition-colors hover:border-[--color-border-strong]"
                 >
                   <div
                     aria-hidden
@@ -372,27 +374,20 @@ export default function Landing() {
         </div>
       </section>
 
-      {/* ── Marketplace · two-column with product preview ──────────────
-          Archetype: split layout. Left column carries the headline,
-          three bullet-form selling points, and the CTA. Right column
-          carries a mock browser frame containing real-looking template
-          cards — so the visitor SEES the marketplace, not just reads
-          a description of it. */}
+      {/* Marketplace — split layout: selling points left, honest preview
+          frame right. */}
       <section className="border-b border-[--color-border] py-20 sm:py-28">
         <div className="mx-auto grid max-w-6xl gap-14 px-6 md:grid-cols-[5fr_6fr] md:items-center md:gap-16">
-          {/* Left — text + points + CTA */}
           <div>
-            <p className="text-[11px] uppercase tracking-[0.22em] text-[--color-fg-subtle]">
-              Marketplace
-            </p>
+            <Kicker>marketplace</Kicker>
             <h2 className="mt-3 text-[32px] font-semibold leading-[1.1] tracking-tight sm:text-[40px]">
               Skip the prompt.
               <br />
               <span className="text-[--color-fg-muted]">Fork what works.</span>
             </h2>
             <p className="mt-5 max-w-md text-[14px] leading-relaxed text-[--color-fg-muted]">
-              The marketplace is a library of working MCP servers the community already built.
-              Fork one, paste your credentials, deploy. Or publish yours and let others build on it.
+              The marketplace is a library of working MCP servers. Fork one, paste your credentials,
+              deploy. Or publish yours and let others build on it.
             </p>
 
             <ul className="mt-8 space-y-5">
@@ -414,29 +409,22 @@ export default function Landing() {
 
             <PulseLink
               href="/templates"
-              className="mt-8 inline-flex h-9 items-center gap-2 rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+              className="btn-brand mt-8 inline-flex h-11 items-center gap-2 rounded-md px-5 text-[14px] font-medium"
             >
               Browse the marketplace →
             </PulseLink>
           </div>
 
-          {/* Right — mock marketplace browser frame */}
-          <MarketplaceMock />
+          <MarketplacePreview />
         </div>
       </section>
 
-      {/* ── Pricing · 4 cards with Pro highlighted as recommended ─────
-          Archetype: centred header + 4-card row where the Pro tier is
-          visually distinct (accent border, indigo glow shadow, floating
-          "recommended" pill, slightly elevated). Other tiers stay calm
-          so the eye lands on Pro first. Big price typography (text-
-          [40px]) replaces the previous flat 26px. */}
+      {/* Pricing teaser — Hobby + Pro only; the full matrix lives on
+          /pricing. Data is shared via lib/pricing.ts so it can't drift. */}
       <section id="pricing" className="border-b border-[--color-border] py-20 sm:py-28">
-        <div className="mx-auto max-w-6xl px-6">
-          <div className="mb-14 text-center">
-            <p className="text-[11px] uppercase tracking-[0.22em] text-[--color-fg-subtle]">
-              Pricing
-            </p>
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="mb-12 text-center">
+            <Kicker>pricing</Kicker>
             <h2 className="mt-3 text-[32px] font-semibold leading-[1.1] tracking-tight sm:text-[40px]">
               Pay for tool calls.
               <br />
@@ -444,16 +432,16 @@ export default function Landing() {
             </h2>
           </div>
 
-          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
-            {TIERS.map((t) => {
-              const featured = t.name === 'Pro';
+          <div className="grid gap-5 sm:grid-cols-2">
+            {teaserTiers.map((t) => {
+              const featured = Boolean(t.highlight);
               return (
                 <div
                   key={t.name}
-                  className={`relative flex flex-col gap-6 rounded-xl border p-6 transition-colors ${
+                  className={`relative flex flex-col gap-6 rounded-xl border p-6 ${
                     featured
                       ? 'border-[--color-accent] bg-[--color-bg-elevated]'
-                      : 'border-[--color-border] bg-[--color-bg-elevated] hover:border-[--color-border-strong]'
+                      : 'border-[--color-border] bg-[--color-bg-elevated]'
                   }`}
                   style={
                     featured
@@ -461,7 +449,7 @@ export default function Landing() {
                           boxShadow:
                             '0 0 0 4px rgba(99, 102, 241, 0.12), 0 24px 50px rgba(0, 0, 0, 0.35)',
                         }
-                      : undefined
+                      : { boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)' }
                   }
                 >
                   {featured && (
@@ -483,6 +471,9 @@ export default function Landing() {
                       </span>
                       <span className="text-[12px] text-[--color-fg-subtle]">{t.tag}</span>
                     </div>
+                    <p className="mt-3 text-[13px] leading-relaxed text-[--color-fg-muted]">
+                      {t.description}
+                    </p>
                   </div>
 
                   <ul className="flex flex-1 flex-col gap-2.5 border-t border-[--color-border] pt-5 text-[13px] text-[--color-fg-muted]">
@@ -498,23 +489,42 @@ export default function Landing() {
                       </li>
                     ))}
                   </ul>
+
+                  <Link
+                    href={t.href}
+                    className={`inline-flex h-10 items-center justify-center rounded-md px-4 text-[13px] font-medium transition-colors ${
+                      featured
+                        ? 'btn-brand'
+                        : 'border border-[--color-border] bg-[--color-bg-subtle] text-[--color-fg] hover:border-[--color-border-strong]'
+                    }`}
+                  >
+                    {t.cta}
+                  </Link>
                 </div>
               );
             })}
           </div>
+
+          <div className="mt-8 text-center">
+            <Link
+              href="/pricing"
+              className="text-[14px] font-medium text-[--color-accent] transition-colors hover:text-[--color-fg]"
+            >
+              See all plans — Team, Enterprise →
+            </Link>
+          </div>
         </div>
       </section>
 
-      {/* FAQ — collapsible accordion using native <details>. Crawlers
-          and screen readers still see the full Q+A in the HTML; users
-          see one question at a time and expand on demand. No JS, no
-          state, semantically correct. `list-none` + the WebKit-marker
-          pseudo-class suppress the default disclosure triangle so we
-          can render our own chevron that rotates via `group-open`. */}
-      <section className="py-14 sm:py-20">
+      {/* FAQ — collapsible accordion using native <details>. Crawlers and
+          screen readers see the full Q+A in the HTML. */}
+      <section className="border-b border-[--color-border] py-14 sm:py-20">
         <JsonLd data={faqJsonLd()} />
         <div className="mx-auto max-w-3xl px-6">
-          <h2 className="text-[28px] font-semibold tracking-tight">FAQ</h2>
+          <Kicker>faq</Kicker>
+          <h2 className="mt-3 text-[28px] font-semibold tracking-tight">
+            Questions, answered straight.
+          </h2>
           <div className="mt-8 border-t border-[--color-border]">
             {FAQ.map((f) => (
               <details
@@ -536,28 +546,58 @@ export default function Landing() {
           </div>
         </div>
       </section>
+
+      {/* Final CTA — the page must not end on FAQ. Gradient top border keeps
+          the brand mark scarce but present at the exit point. */}
+      <section className="relative py-20 sm:py-28">
+        <div
+          aria-hidden
+          className="absolute inset-x-0 top-0 h-px"
+          style={{ background: 'var(--gradient-brand)', opacity: 0.6 }}
+        />
+        <div className="mx-auto max-w-3xl px-6 text-center">
+          <h2 className="text-balance text-[32px] font-semibold leading-[1.1] tracking-tight sm:text-[44px]">
+            Your first server is <span className="text-brand-gradient">one prompt away</span>.
+          </h2>
+          <p className="mx-auto mt-4 max-w-md text-[14.5px] leading-relaxed text-[--color-fg-muted]">
+            Free tier, full source export, no lock-in. If it doesn't work for you, take the
+            TypeScript and leave.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            <PulseLink
+              href="/login"
+              className="btn-brand inline-flex h-11 items-center justify-center rounded-md px-6 text-[14px] font-medium"
+            >
+              Start building free →
+            </PulseLink>
+            <PulseLink
+              href="/docs"
+              className="inline-flex h-11 items-center justify-center rounded-md border border-[--color-border] bg-[--color-bg-elevated] px-6 text-[14px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+            >
+              Read the docs
+            </PulseLink>
+          </div>
+        </div>
+      </section>
     </>
   );
 }
 
 /**
- * Mock marketplace preview.
+ * Honest marketplace preview.
  *
- * Static, server-rendered. Renders a faux-browser frame containing four
- * realistic template cards so the visitor sees what the marketplace
- * actually looks like rather than reading marketing copy about it.
- *
- * The card data lives in `MOCK_TEMPLATES` at the top of this file —
- * those are real template-flavoured names, modest fork counts, and the
- * `core` / `community` author tag. Numbers are deliberately small and
- * truthful-looking for a young marketplace; nothing here pretends to be
- * GitHub-trending traffic.
+ * Static, server-rendered browser frame showing what a template card looks
+ * like. Card data mirrors the first-party starter templates — names, author
+ * and tool counts only. No fork counts, no "verified" badges: the frame is
+ * explicitly labelled a preview, not live marketplace traffic.
  */
-function MarketplaceMock() {
+function MarketplacePreview() {
   return (
     <div
       className="overflow-hidden rounded-xl border border-[--color-border-strong] bg-[--color-bg-elevated]"
-      style={{ boxShadow: '0 24px 60px rgba(0, 0, 0, 0.45)' }}
+      style={{
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 60px rgba(0, 0, 0, 0.45)',
+      }}
     >
       {/* Browser chrome */}
       <div className="flex items-center gap-3 border-b border-[--color-border] bg-[--color-bg-subtle] px-4 py-3">
@@ -573,50 +613,37 @@ function MarketplaceMock() {
 
       {/* Toolbar inside the page chrome */}
       <div className="flex items-center justify-between gap-4 border-b border-[--color-border] px-5 py-3">
-        <div className="flex items-center gap-3">
-          <span className="text-[13px] font-semibold tracking-tight text-[--color-fg]">
-            Templates
-          </span>
-          <span className="text-[11px] text-[--color-fg-subtle]">·</span>
-          <span className="text-[11px] text-[--color-fg-subtle]">{MOCK_TEMPLATES.length} live</span>
-        </div>
-        <div className="hidden items-center gap-1.5 rounded-md border border-[--color-border] px-2 py-1 sm:flex">
-          <span className="text-[11px] text-[--color-fg-subtle]">trending</span>
-          <ChevronDown size={11} className="text-[--color-fg-subtle]" />
-        </div>
+        <span className="text-[13px] font-semibold tracking-tight text-[--color-fg]">
+          Templates
+        </span>
+        <span className="mono text-[10px] uppercase tracking-wider text-[--color-fg-subtle]">
+          preview
+        </span>
       </div>
 
       {/* Template cards grid */}
       <div className="grid gap-3 p-4 sm:grid-cols-2">
-        {MOCK_TEMPLATES.map((t) => (
+        {PREVIEW_TEMPLATES.map((t) => (
           <div
             key={t.name}
             className="rounded-md border border-[--color-border] bg-[--color-bg-subtle] p-4 transition-colors hover:border-[--color-accent]/40"
           >
-            <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
-                <div className="mono truncate text-[13px] font-semibold tracking-tight text-[--color-fg]">
-                  {t.name}
-                </div>
-                <div className="mt-1 flex items-center gap-1.5">
-                  <span className="mono text-[10px] uppercase tracking-wider text-[--color-fg-subtle]">
-                    {t.author}
-                  </span>
-                  {t.verified && (
-                    <span className="inline-flex items-center gap-0.5 rounded-full border border-[--color-accent]/50 bg-[--color-accent]/10 px-1.5 py-px text-[9.5px] font-medium uppercase tracking-wider text-[--color-accent]">
-                      ✓ verified
-                    </span>
-                  )}
-                </div>
+            <div className="min-w-0">
+              <div className="mono truncate text-[13px] font-semibold tracking-tight text-[--color-fg]">
+                {t.name}
+              </div>
+              <div className="mt-1 flex items-center gap-1.5">
+                <span className="mono text-[10px] uppercase tracking-wider text-[--color-fg-subtle]">
+                  {t.author}
+                </span>
+                <span className="inline-flex items-center rounded-full border border-[--color-border-strong] px-1.5 py-px text-[9.5px] font-medium uppercase tracking-wider text-[--color-fg-subtle]">
+                  template
+                </span>
               </div>
             </div>
 
-            <div className="mt-4 flex items-center justify-between text-[11px] text-[--color-fg-subtle]">
+            <div className="mt-4 text-[11px] text-[--color-fg-subtle]">
               <span className="mono">{t.tools} tools</span>
-              <span className="mono inline-flex items-center gap-1">
-                <ForkGlyph />
-                {t.forks}
-              </span>
             </div>
           </div>
         ))}
@@ -624,20 +651,3 @@ function MarketplaceMock() {
     </div>
   );
 }
-
-function ForkGlyph() {
-  return (
-    <svg width="11" height="11" viewBox="0 0 14 14" fill="none" aria-hidden>
-      <circle cx="3.5" cy="3" r="1.4" stroke="currentColor" strokeWidth={1.2} />
-      <circle cx="10.5" cy="3" r="1.4" stroke="currentColor" strokeWidth={1.2} />
-      <circle cx="7" cy="11" r="1.4" stroke="currentColor" strokeWidth={1.2} />
-      <path
-        d="M 3.5 4.5 L 3.5 6.5 Q 3.5 7.5 4.5 7.5 L 9.5 7.5 Q 10.5 7.5 10.5 6.5 L 10.5 4.5"
-        stroke="currentColor"
-        strokeWidth={1.2}
-        fill="none"
-      />
-      <path d="M 7 7.5 L 7 9.5" stroke="currentColor" strokeWidth={1.2} />
-    </svg>
-  );
-}
diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx
index 5c05bd8..ce4676c 100644
--- a/apps/web/app/(marketing)/pricing/page.tsx
+++ b/apps/web/app/(marketing)/pricing/page.tsx
@@ -1,3 +1,4 @@
+import { TIERS } from '@/lib/pricing';
 import { pageMetadata } from '@/lib/seo';
 import Link from 'next/link';
 
@@ -8,80 +9,6 @@ export const metadata = pageMetadata({
   path: '/pricing',
 });
 
-const TIERS = [
-  {
-    name: 'Hobby',
-    price: '€0',
-    tag: 'Forever free',
-    description: 'For trying things out and shipping single-user tools.',
-    model: 'Open-tier AI',
-    modelDetail: 'Free-tier model · ~30-60s analyze',
-    features: [
-      '1 MCP server',
-      '100,000 tool calls / month',
-      '5 prompt analyses / day',
-      'BuildMyMCP subdomain',
-      'Community support',
-    ],
-    cta: 'Start free',
-    href: '/login',
-  },
-  {
-    name: 'Pro',
-    price: '€49',
-    tag: '/ month',
-    description: 'For solo founders and small teams shipping production tools.',
-    model: 'Claude AI',
-    modelDetail: 'Powered by Anthropic Claude · ~10–20s analyze',
-    features: [
-      '5 MCP servers',
-      '1M tool calls / month',
-      '40 prompt analyses / day',
-      'Priority build queue',
-      'Custom domain · coming soon',
-      'Email support, 1 business-day response',
-    ],
-    cta: 'Start Pro',
-    href: '/settings/billing?tier=pro_monthly',
-    highlight: true,
-  },
-  {
-    name: 'Team',
-    price: '€199',
-    tag: '/ month',
-    description: 'For teams that need an audit trail and room to scale.',
-    model: 'Claude AI',
-    modelDetail: "Anthropic's flagship quality",
-    features: [
-      '25 MCP servers',
-      '10M tool calls / month',
-      '50 prompt analyses / day',
-      'Audit log',
-      'RBAC · coming soon',
-      'Shared Slack channel support',
-    ],
-    cta: 'Start Team',
-    href: '/settings/billing?tier=team_monthly',
-  },
-  {
-    name: 'Enterprise',
-    price: 'Custom',
-    tag: 'talk to us',
-    description: 'For organizations with custom infrastructure, compliance and scale needs.',
-    model: 'Claude AI',
-    modelDetail: 'Top-tier Claude · EU data-residency option',
-    features: [
-      'Unlimited servers',
-      'Custom infrastructure & data residency — on request',
-      'Dedicated hosting — scoped per contract',
-      'SSO / SAML — on request',
-      'Customer success manager',
-    ],
-    cta: 'Contact sales',
-    href: 'mailto:sales@buildmymcpserver.com',
-  },
-];
-
 const FAQ = [
   {
     q: 'What counts as a tool call?',
@@ -93,7 +20,7 @@ const FAQ = [
   },
   {
     q: 'Annual billing?',
-    a: 'Yes — save 20% on Pro and Team paying annually. Enterprise is annual by default.',
+    a: 'Annual plans are coming — contact us for annual invoicing today. Enterprise is annual by default.',
   },
   {
     q: 'Plan changes?',
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index ecec493..9b14f2f 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1,15 +1,21 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @theme {
   --color-bg: #0a0a0b;
-  --color-bg-elevated: #111114;
-  --color-bg-subtle: #16161a;
+  /* Elevated surfaces carry a ~1% indigo tint so panels read as part of the
+     brand instead of flat gray. Kept close enough to the old #111114/#16161a
+     that dashboard contrast ratios are unaffected. */
+  --color-bg-elevated: #121218;
+  --color-bg-subtle: #17171d;
   --color-fg: #fafafa;
   --color-fg-muted: #a1a1aa;
   --color-fg-subtle: #71717a;
   --color-border: #1f1f22;
   --color-border-strong: #2a2a2e;
   --color-accent: #6366f1;
+  /* Secondary brand hue — cyan endpoint of the identity gradient. Reserved
+     for the gradient, kickers and "live" accents; never a surface color. */
+  --color-accent-2: #22d3ee;
   --color-accent-fg: #ffffff;
   --color-success: #22c55e;
   --color-warn: #f59e0b;
@@ -39,7 +45,7 @@
     background: var(--color-bg);
     color: var(--color-fg);
     font-family: var(--font-sans);
-    font-feature-settings: 'cv11', 'ss01';
+    font-feature-settings: "cv11", "ss01";
   }
   ::selection {
     background: rgba(99, 102, 241, 0.3);
@@ -100,7 +106,56 @@
   }
 }
 
+/* Identity gradient — indigo → cyan. Defined outside @theme (it's not a
+   Tailwind token, just a shared value) and used ONLY for: primary CTAs,
+   section kickers, the featured pricing card and one hero glow. Scarcity is
+   what keeps it feeling like a brand mark instead of decoration. */
+:root {
+  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
+}
+
 @layer components {
+  /* Gradient-filled primary CTA. A dark inner overlay on hover (instead of a
+     second gradient) keeps the transition GPU-cheap. */
+  .btn-brand {
+    position: relative;
+    background: var(--gradient-brand);
+    color: #ffffff;
+    isolation: isolate;
+  }
+  .btn-brand::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: rgba(10, 10, 11, 0);
+    transition: background-color 0.2s ease-out;
+    z-index: -1;
+  }
+  .btn-brand:hover::after {
+    background: rgba(10, 10, 11, 0.18);
+  }
+  /* Gradient text for the rare display moment (final CTA heading). */
+  .text-brand-gradient {
+    background: var(--gradient-brand);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  /* Mono section kicker, shell-comment style: `## how_it_works` */
+  .kicker {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    color: var(--color-accent);
+  }
+  /* Elevated panel with an inner top highlight — reads as machined edge. */
+  .panel-raised {
+    background: var(--color-bg-elevated);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  }
   .panel {
     background: var(--color-bg-elevated);
     border: 1px solid var(--color-border);
@@ -139,7 +194,8 @@
 }
 
 @keyframes pulse-dot {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
     transform: scale(1);
   }
diff --git a/apps/web/components/hero-step-rotator.tsx b/apps/web/components/hero-step-rotator.tsx
index 03adc32..3b94ce3 100644
--- a/apps/web/components/hero-step-rotator.tsx
+++ b/apps/web/components/hero-step-rotator.tsx
@@ -174,9 +174,19 @@ export function HeroStepRotator() {
                 y: glowDy,
               }}
             />
+            {/* Terminal chrome: traffic lights + filename tab. The tile IS
+                the product's aesthetic (build logs, configs), so it should
+                look like a real terminal window, not a generic card. */}
             <div className="relative flex items-center justify-between border-b border-[--color-border] px-4 py-2.5">
-              <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
-                {current.label}
+              <span className="flex items-center gap-3">
+                <span aria-hidden className="flex gap-1.5">
+                  <span className="size-2.5 rounded-full bg-[#ff5f57]/80" />
+                  <span className="size-2.5 rounded-full bg-[#febc2e]/80" />
+                  <span className="size-2.5 rounded-full bg-[#28c840]/80" />
+                </span>
+                <span className="mono text-[11px] uppercase tracking-wider text-[--color-fg-subtle]">
+                  {current.label}
+                </span>
               </span>
               <span className="mono text-[10.5px] tracking-[0.16em] text-[--color-accent]">
                 {current.badge}
@@ -189,23 +199,28 @@ export function HeroStepRotator() {
         </AnimatePresence>
       </div>
 
-      {/* Step indicator — accent dot is wider + glows so the active step
-          reads at a glance. Buttons stay clickable so users can jump. */}
-      <div className="flex items-center gap-2" role="tablist" aria-label="Hero flow steps">
+      {/* Step indicator — the visible dot stays small, but each button
+          carries generous padding so the effective touch target is ≥44px.
+          Plain buttons with aria-current (not a tablist — no arrow-key
+          semantics to honour, they're simple jump buttons). */}
+      <div className="flex items-center" aria-label="Hero flow steps">
         {STEPS.map((s, i) => (
           <button
             key={s.badge}
             type="button"
-            role="tab"
-            aria-selected={i === step}
+            aria-current={i === step}
             aria-label={`Jump to ${s.badge}`}
             onClick={() => setStep(i)}
-            className={`h-1.5 rounded-full transition-all duration-300 ${
-              i === step
-                ? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
-                : 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
-            }`}
-          />
+            className="flex min-h-11 min-w-11 items-center justify-center"
+          >
+            <span
+              className={`h-1.5 rounded-full transition-all duration-300 ${
+                i === step
+                  ? 'w-9 bg-[--color-accent] shadow-[0_0_10px_rgba(99,102,241,0.65)]'
+                  : 'w-1.5 bg-[--color-border-strong] hover:bg-[--color-fg-subtle]'
+              }`}
+            />
+          </button>
         ))}
       </div>
     </div>
diff --git a/apps/web/components/hero-video.tsx b/apps/web/components/hero-video.tsx
index a0571e7..c32a56f 100644
--- a/apps/web/components/hero-video.tsx
+++ b/apps/web/components/hero-video.tsx
@@ -47,6 +47,9 @@ function formatTime(seconds: number): string {
 export function HeroVideo() {
   const videoRef = useRef<HTMLVideoElement>(null);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Set when the user explicitly pauses — the IntersectionObserver must not
+  // restart a video the user chose to stop.
+  const userPausedRef = useRef(false);
   const [muted, setMuted] = useState(true);
   const [playing, setPlaying] = useState(false);
   const [playFailed, setPlayFailed] = useState(false);
@@ -69,10 +72,26 @@ export function HeroVideo() {
     v.addEventListener('timeupdate', onTime);
     v.addEventListener('loadedmetadata', onMeta);
     v.addEventListener('durationchange', onMeta);
-    // Best-effort autoplay attempt — silently fail on browsers that
-    // block it; the overlay is the user's escape hatch.
-    v.play().catch(() => undefined);
+    // Play only while scrolled into view: with preload="metadata" the 2.6 MB
+    // mp4 stays off the critical path until the section is actually visible,
+    // and playback pauses again off-screen (saves battery + decode). The
+    // .play() attempt is still best-effort — browsers that block autoplay
+    // leave the overlay as the user's escape hatch. `userPaused` tracks an
+    // explicit pause so the observer doesn't fight the user's choice.
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) return;
+        if (entry.isIntersecting) {
+          if (!userPausedRef.current && v.paused) v.play().catch(() => undefined);
+        } else if (!v.paused) {
+          v.pause();
+        }
+      },
+      { threshold: 0.35 },
+    );
+    io.observe(v);
     return () => {
+      io.disconnect();
       v.removeEventListener('play', onPlay);
       v.removeEventListener('pause', onPause);
       v.removeEventListener('timeupdate', onTime);
@@ -82,9 +101,12 @@ export function HeroVideo() {
   }, []);
 
   // Clear any pending hide timer on unmount.
-  useEffect(() => () => {
-    if (hideTimer.current) clearTimeout(hideTimer.current);
-  }, []);
+  useEffect(
+    () => () => {
+      if (hideTimer.current) clearTimeout(hideTimer.current);
+    },
+    [],
+  );
 
   const scheduleHide = useCallback(() => {
     if (hideTimer.current) clearTimeout(hideTimer.current);
@@ -106,6 +128,7 @@ export function HeroVideo() {
     if (!v) return;
     if (v.paused) {
       setPlayFailed(false);
+      userPausedRef.current = false;
       try {
         // .load() resets the media element's resource selection — required
         // when an earlier autoplay attempt was blocked before the source
@@ -116,6 +139,7 @@ export function HeroVideo() {
         setPlayFailed(true);
       }
     } else {
+      userPausedRef.current = true;
       v.pause();
     }
   }, []);
@@ -165,11 +189,10 @@ export function HeroVideo() {
     >
       <video
         ref={videoRef}
-        autoPlay
         muted
         loop
         playsInline
-        preload="auto"
+        preload="metadata"
         poster="/videos/hero-poster.jpg"
         onClick={onVideoClick}
         className="size-full cursor-pointer object-cover"
diff --git a/apps/web/components/marketing-mobile-menu.tsx b/apps/web/components/marketing-mobile-menu.tsx
index ebffe32..656f00a 100644
--- a/apps/web/components/marketing-mobile-menu.tsx
+++ b/apps/web/components/marketing-mobile-menu.tsx
@@ -2,27 +2,52 @@
 
 import { Menu, X } from 'lucide-react';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const LINKS = [
   { href: '/#how', label: 'How it works' },
   { href: '/templates', label: 'Templates' },
   { href: '/pricing', label: 'Pricing' },
   { href: '/docs', label: 'Docs' },
+  { href: '/guides', label: 'Guides' },
   { href: '/changelog', label: 'Changelog' },
 ];
 
 /** Hamburger menu shown below the md breakpoint, where the inline nav is hidden. */
 export function MarketingMobileMenu() {
   const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // While the panel is open: lock body scroll, close on Escape and on any
+  // pointerdown outside the menu subtree. All three effects unwind together
+  // when the panel closes or the component unmounts.
+  useEffect(() => {
+    if (!open) return;
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    const onPointerDown = (e: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onPointerDown);
+    };
+  }, [open]);
+
   return (
-    <div className="md:hidden">
+    <div ref={rootRef} className="md:hidden">
       <button
         type="button"
         aria-label={open ? 'Close menu' : 'Open menu'}
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
-        className="flex size-8 items-center justify-center rounded-md text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+        className="flex size-11 items-center justify-center rounded-md text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
       >
         {open ? <X size={18} /> : <Menu size={18} />}
       </button>
@@ -34,20 +59,27 @@ export function MarketingMobileMenu() {
           // browser falls back to transparent. Inline `var()` is unambiguous.
           className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] shadow-lg shadow-black/40 backdrop-blur-md"
           style={{
-            backgroundColor: 'color-mix(in oklab, var(--color-bg) 80%, transparent)',
+            backgroundColor: 'color-mix(in oklab, var(--color-bg) 92%, transparent)',
           }}
         >
-          <nav className="mx-auto flex max-w-6xl flex-col px-6">
+          <nav className="mx-auto flex max-w-6xl flex-col px-6 pb-5">
             {LINKS.map((l) => (
               <Link
                 key={l.href}
                 href={l.href}
                 onClick={() => setOpen(false)}
-                className="border-b border-[--color-border] py-3.5 text-[14px] text-[--color-fg-muted] transition-colors last:border-0 hover:text-[--color-fg]"
+                className="flex min-h-11 items-center border-b border-[--color-border] text-[14px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
               >
                 {l.label}
               </Link>
             ))}
+            <Link
+              href="/login"
+              onClick={() => setOpen(false)}
+              className="btn-brand mt-4 inline-flex h-11 w-full items-center justify-center rounded-md text-[14px] font-medium"
+            >
+              Start building free →
+            </Link>
           </nav>
         </div>
       )}
diff --git a/apps/web/lib/pricing.ts b/apps/web/lib/pricing.ts
new file mode 100644
index 0000000..ab5eaa2
--- /dev/null
+++ b/apps/web/lib/pricing.ts
@@ -0,0 +1,91 @@
+// Single source of truth for pricing tiers. Rendered on /pricing (all tiers)
+// and as the landing-page teaser (Hobby + Pro). The landing page previously
+// carried its own hardcoded copy of this data, which had already drifted —
+// one array, two consumers, no drift.
+
+export interface PricingTier {
+  name: string;
+  price: string;
+  tag: string;
+  description: string;
+  model: string;
+  modelDetail: string;
+  features: string[];
+  cta: string;
+  href: string;
+  highlight?: boolean;
+}
+
+export const TIERS: PricingTier[] = [
+  {
+    name: 'Hobby',
+    price: '€0',
+    tag: 'Forever free',
+    description: 'For trying things out and shipping single-user tools.',
+    model: 'Open-tier AI',
+    modelDetail: 'Free-tier model · ~30-60s analyze',
+    features: [
+      '1 MCP server',
+      '100,000 tool calls / month',
+      '5 prompt analyses / day',
+      'BuildMyMCP subdomain',
+      'Community support',
+    ],
+    cta: 'Start free',
+    href: '/login',
+  },
+  {
+    name: 'Pro',
+    price: '€49',
+    tag: '/ month',
+    description: 'For solo founders and small teams shipping production tools.',
+    model: 'Claude AI',
+    modelDetail: 'Powered by Anthropic Claude · ~10–20s analyze',
+    features: [
+      '5 MCP servers',
+      '1M tool calls / month',
+      '40 prompt analyses / day',
+      'Priority build queue',
+      'Custom domain · coming soon',
+      'Email support, 1 business-day response',
+    ],
+    cta: 'Start Pro',
+    href: '/settings/billing?tier=pro_monthly',
+    highlight: true,
+  },
+  {
+    name: 'Team',
+    price: '€199',
+    tag: '/ month',
+    description: 'For teams that need an audit trail and room to scale.',
+    model: 'Claude AI',
+    modelDetail: "Anthropic's flagship quality",
+    features: [
+      '25 MCP servers',
+      '10M tool calls / month',
+      '50 prompt analyses / day',
+      'Audit log',
+      'RBAC · coming soon',
+      'Shared Slack channel support',
+    ],
+    cta: 'Start Team',
+    href: '/settings/billing?tier=team_monthly',
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    tag: 'talk to us',
+    description: 'For organizations with custom infrastructure, compliance and scale needs.',
+    model: 'Claude AI',
+    modelDetail: 'Top-tier Claude · EU data-residency option',
+    features: [
+      'Unlimited servers',
+      'Custom infrastructure & data residency — on request',
+      'Dedicated hosting — scoped per contract',
+      'SSO / SAML — on request',
+      'Customer success manager',
+    ],
+    cta: 'Contact sales',
+    href: 'mailto:sales@buildmymcpserver.com',
+  },
+];