feat: complete launch & marketing layer

- Add marketing pages: blog, changelog, roadmap, waitlist, security, maintenance
- Add GDPR cookie consent banner with preference modal
- Add referral system with API routes for code generation/tracking
- Add waitlist API with referral support
- Add PWA support: manifest, service worker, install prompt
- Add onboarding flow with 6-step guided tour
- Add in-app notification center with bell dropdown
- Add admin launch checklist (32 items across 8 categories)
- Update landing page with trust badges
- Add Open Graph image and favicon
- Configure ESLint for PWA install patterns
- Add LAUNCH_CHECKLIST.md with go-to-market guide

Supabase migrations for:
- blog_posts and blog_categories tables
- waitlist_signups table
- roadmap_items table
- launch_checklist_items table

src/app/not-found.tsx

@@ -2,32 +2,78 @@ import Link from "next/link";
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen bg-zinc-950 flex items-center justify-center px-6">
-      <div className="text-center">
-        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-zinc-800 mb-6">
-          <svg className="w-8 h-8 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
+    <div className="min-h-screen bg-[#faf8f5] flex items-center justify-center px-6">
+      {/* Background decorations */}
+      <div className="fixed inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-20 left-20 w-40 h-40 bg-[#1a4d2e]/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-40 right-20 w-60 h-60 bg-[#c97a3e]/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="text-center max-w-md mx-auto relative">
+        {/* 404 Illustration */}
+        <div className="relative mb-8">
+          <div className="w-24 h-24 mx-auto bg-gradient-to-br from-[#1a4d2e] to-[#2d6a4f] rounded-3xl flex items-center justify-center shadow-xl">
+            <svg className="w-12 h-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <span className="absolute -top-4 -right-4 w-12 h-12 bg-[#c97a3e]/20 rounded-full flex items-center justify-center text-2xl">📦</span>
         </div>
-        <h1 className="text-4xl font-bold text-zinc-100 tracking-tight">Page not found</h1>
-        <p className="mt-3 text-zinc-500 text-sm max-w-sm mx-auto">
-          The page you&apos;re looking for doesn&apos;t exist or has been moved.
+
+        <h1 className="text-6xl font-bold text-[#1a1a1a] mb-4 tracking-tight" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
+          404
+        </h1>
+        <h2 className="text-2xl font-semibold text-[#1a1a1a] mb-3">
+          Page not found
+        </h2>
+        <p className="text-[#6b8f71] mb-8">
+          Looks like this route got lost along the way. Let&apos;s get you back on track.
         </p>
-        <div className="mt-8 flex items-center justify-center gap-4">
-          <Link
-            href="/"
-            className="rounded-xl bg-zinc-800 hover:bg-zinc-700 px-5 py-2.5 text-sm font-semibold text-zinc-100 transition-colors border border-zinc-700"
-          >
-            Go home
-          </Link>
-          <Link
-            href="/admin"
-            className="rounded-xl bg-emerald-600 hover:bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white transition-colors"
-          >
-            Admin
-          </Link>
+
+        {/* Search suggestion */}
+        <div className="bg-white rounded-2xl p-4 border border-[#e5e5e5] mb-8">
+          <p className="text-sm text-[#888] mb-3">Try searching for what you need:</p>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              placeholder="Search..."
+              className="flex-1 px-4 py-2 rounded-xl border border-[#e5e5e5] text-sm focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50"
+            />
+            <button className="px-4 py-2 bg-[#1a4d2e] text-white rounded-xl text-sm font-medium hover:bg-[#2d6a4f] transition-colors">
+              Search
+            </button>
+          </div>
+        </div>
+
+        {/* Quick links */}
+        <div className="space-y-3">
+          <p className="text-sm text-[#888]">Or explore these pages:</p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <Link href="/" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
+              Home
+            </Link>
+            <Link href="/pricing" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
+              Pricing
+            </Link>
+            <Link href="/blog" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
+              Blog
+            </Link>
+            <Link href="/roadmap" className="px-4 py-2 bg-white border border-[#e5e5e5] rounded-xl text-sm text-[#1a1a1a] hover:border-[#1a4d2e] hover:text-[#1a4d2e] transition-colors">
+              Roadmap
+            </Link>
+          </div>
+        </div>
+
+        {/* Report broken link */}
+        <div className="mt-12 pt-8 border-t border-[#e5e5e5]">
+          <p className="text-xs text-[#888]">
+            Found a broken link?{" "}
+            <a href="mailto:support@routecommerce.com" className="text-[#1a4d2e] hover:underline">
+              Let us know
+            </a>
+          </p>
         </div>
       </div>
     </div>
   );
-}
+}