feat(landing): honest high-end redesign — kill fake social proof, brand gradient identity, final CTA, mobile fixes

- 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

@@ -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>
+  );
+}