feat: landing page CRO revision, demo page, auto-trial, multi-catalog messaging

- Rewrite landing page copy with Jobs-to-be-Done and loss framing
- Add VIN live preview via backend pl24+emex decode chain
- Add comparison table (mobile-responsive), stats, pricing teaser, referral banner
- Replace testimonials with aggregate social proof stats
- Create demo page with 3-step VIN decode flow for unregistered users
- Add public /vehicles/preview/:vin endpoint (no auth required)
- Auto-create 7-day trial subscription on user registration
- Highlight multi-catalog cross-querying advantage in OEM feature and comparison
- Update register page with trial messaging and VIN param support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/globals.css

@@ -17,6 +17,9 @@
   --color-accent-foreground: #171717;
   --color-destructive: #ef4444;
   --color-destructive-foreground: #fafafa;
+  --color-surface: #f5f5f5;
+  --color-surface-foreground: #171717;
+  --color-surface-alt: #eaeaea;
   --color-card: #ffffff;
   --color-card-foreground: #0a0a0a;
   --color-popover: #ffffff;
@@ -26,6 +29,7 @@
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
 }
 
 @layer base {
@@ -42,6 +46,27 @@
   100% { transform: translateX(100%); }
 }
 
+@keyframes scroll-left {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+.animate-scroll-left { animation: scroll-left 30s linear infinite; }
+.animate-float { animation: float 3s ease-in-out infinite; }
+.carousel-track:hover .animate-scroll-left { animation-play-state: paused; }
+.scrollbar-none::-webkit-scrollbar { display: none; }
+.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
+
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in-up { animation: fade-in-up 0.3s ease-out; }
+
 .dark {
   --color-background: #0a0a0a;
   --color-foreground: #fafafa;
@@ -58,6 +83,9 @@
   --color-accent-foreground: #fafafa;
   --color-destructive: #dc2626;
   --color-destructive-foreground: #fafafa;
+  --color-surface: #1a1a1a;
+  --color-surface-foreground: #fafafa;
+  --color-surface-alt: #0f0f0f;
   --color-card: #0a0a0a;
   --color-card-foreground: #fafafa;
   --color-popover: #0a0a0a;