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/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);
   }