diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 546ce2dd..0bb25f3b 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -3,7 +3,6 @@
 import React, { useRef, useState, useSyncExternalStore } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Header } from "@/components/header";
 import { Footer, SOURCE_URL } from "@/components/footer";
@@ -15,23 +14,30 @@ import {
 import { motion, useInView, useReducedMotion } from "framer-motion";
 import {
   ArrowRight,
-  Zap,
-  Shield,
-  Star,
+  ArrowDown,
   ChevronDown,
-  LayoutGrid,
-  Lock,
-  Globe,
-  CheckCircle2,
   Search,
-  Check,
-  Database,
   Github,
-  Laptop,
   Download as DownloadIcon,
+  Braces,
+  Globe,
+  Database,
+  ShieldCheck,
+  Container,
+  NotebookPen,
+  HardDrive,
+  Cpu,
+  WifiOff,
+  UserX,
+  CloudOff,
+  FolderTree,
+  Star,
+  Scale,
+  GitPullRequest,
+  FileText,
+  Play,
 } from "lucide-react";
 import { AppleGlyph, DMG_URL } from "@/components/download-desktop-button";
-import { sidebarData } from "@/components/sidebar/data/sidebar-data";
 import { homepageFaqItems } from "@/lib/seo/structured-data";
 import MdtAurora from "@/components/mdt-aurora";
 import { MdtFx } from "@/components/mdt-fx";
@@ -83,134 +89,218 @@ function Section({
   );
 }
 
-// ─── Data ──────────────────────────────────────────────────────────────────────
-
-type HomeToolEntry = {
-  title: string;
-  description: string;
-  url: string;
-  icon?: React.ElementType;
-  category: string;
-};
-
-type ToolCategory = {
-  title: string;
-  icon?: React.ElementType;
-  tools: HomeToolEntry[];
-};
-
-function buildToolCategories(): ToolCategory[] {
-  const out: ToolCategory[] = [];
-  for (const group of sidebarData.navGroups) {
-    const tools: HomeToolEntry[] = [];
-    for (const item of group.items) {
-      if ("items" in item && item.items?.length) {
-        for (const sub of item.items) {
-          if (!sub.url) continue;
-          tools.push({
-            title: sub.title,
-            description: sub.description ?? "",
-            url: typeof sub.url === "string" ? sub.url : String(sub.url),
-            icon: sub.icon ?? item.icon,
-            category: group.title,
-          });
-        }
-      } else if ("url" in item && item.url) {
-        tools.push({
-          title: item.title,
-          description: item.description ?? "",
-          url: typeof item.url === "string" ? item.url : String(item.url),
-          icon: item.icon,
-          category: group.title,
-        });
+function SectionHeading({
+  eyebrow,
+  title,
+  children,
+  align = "center",
+}: {
+  eyebrow?: string;
+  title: React.ReactNode;
+  children?: React.ReactNode;
+  align?: "center" | "left";
+}) {
+  return (
+    <motion.div
+      variants={fadeUp}
+      transition={{ duration: 0.6 }}
+      className={
+        align === "center"
+          ? "mx-auto mb-12 max-w-3xl text-center md:mb-14"
+          : "mb-10 max-w-2xl"
       }
-    }
-    if (tools.length) out.push({ title: group.title, icon: group.icon, tools });
-  }
-  return out;
+    >
+      {eyebrow && <p className="mdt-kicker mb-3">{eyebrow}</p>}
+      <h2 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-5xl md:leading-[1.1]">
+        {title}
+      </h2>
+      {children && (
+        <p className="mt-4 text-lg leading-relaxed text-muted-foreground">
+          {children}
+        </p>
+      )}
+    </motion.div>
+  );
 }
 
-const toolCategories = buildToolCategories();
-const allAppTools: HomeToolEntry[] = toolCategories.flatMap((c) => c.tools);
+// ─── Data — every item below is a shipped capability; keep it honest ──────────
+
+const PROOF_STRIP = [
+  "80+ Tools",
+  "API Client",
+  "SQL",
+  "MongoDB",
+  "Redis",
+  "Security",
+  "Open Source",
+  "Offline",
+  "Local-first",
+] as const;
 
-const toolListGradients = [
-  "from-indigo-500 to-indigo-400",
-  "from-indigo-500 to-indigo-400",
-  "from-indigo-500 to-indigo-400",
-  "from-rose-500 to-orange-400",
-  "from-amber-500 to-yellow-400",
-  "from-indigo-500 to-blue-400",
+/** §17 — consolidation, not feature parity with the specialised product. */
+const fragmentation = [
+  { today: "JSON formatter website", app: "JSON Formatter", href: "/tools/json-formatter" },
+  { today: "JWT decoder website", app: "JWT Decoder", href: "/tools/jwt-decoder" },
+  { today: "Separate API client", app: "API Client", href: "/tools/api-client" },
+  { today: "MongoDB GUI", app: "MongoDB Explorer", href: "/tools/database-explorer" },
+  { today: "Redis GUI", app: "Redis Commander", href: "/tools/redis-commander" },
+  { today: "SQL client", app: "SQL Client", href: "/tools/sql-client" },
+  { today: "Password manager", app: "Local vault", href: "/tools/password-manager" },
+  { today: "Notes app for the project", app: "Notes & snippets", href: "/tools/notes" },
 ] as const;
 
-const homepageToolSlugs = [
-  'json-formatter',
-  'jwt-decoder',
-  'api-client',
-  'regex-tester',
-  'uuid-generator',
-  'base64',
-  'hash-generator',
-  'url-parser',
-  'timestamp-converter',
-  'cron-builder',
-  'mock-data-generator',
-  'docker-compose-generator',
+const capabilities = [
+  {
+    title: "Developer Utilities",
+    icon: Braces,
+    blurb: "The everyday formatters, decoders and generators — offline.",
+    tools: [
+      ["JSON Formatter", "json-formatter"],
+      ["YAML Formatter", "yaml-formatter"],
+      ["JWT Decoder", "jwt-decoder"],
+      ["Regex Tester", "regex-tester"],
+      ["UUID / ULID", "uuid-generator"],
+      ["Base64", "base64"],
+      ["Hash Generator", "hash-generator"],
+      ["Diff Checker", "diff-checker"],
+    ],
+  },
+  {
+    title: "API & Networking",
+    icon: Globe,
+    blurb: "Request collections, environments and sockets in one place.",
+    tools: [
+      ["API Client", "api-client"],
+      ["WebSocket Tester", "websocket-tester"],
+      ["Webhook Tester", "webhook-tester"],
+      ["cURL to Code", "curl-to-code"],
+      ["DNS Lookup", "dns-lookup"],
+      ["HTTP Status Codes", "http-status-codes"],
+    ],
+  },
+  {
+    title: "Databases",
+    icon: Database,
+    blurb: "Native drivers — connections go straight from your machine to the database.",
+    tools: [
+      ["SQL Client (PostgreSQL, MySQL, MariaDB)", "sql-client"],
+      ["MongoDB Explorer", "database-explorer"],
+      ["Redis Commander", "redis-commander"],
+      ["S3 Drive", "s3-drive"],
+    ],
+  },
+  {
+    title: "Security",
+    icon: ShieldCheck,
+    blurb: "Credentials and crypto helpers, encrypted locally.",
+    tools: [
+      ["Password Manager", "password-manager"],
+      ["Encryption Playground", "encryption-playground"],
+      ["HMAC Generator", "hmac-generator"],
+      ["TOTP / 2FA", "totp-generator"],
+      ["SSH / RSA Keys", "ssh-key-generator"],
+      ["Certificate / PEM Decoder", "certificate-pem-decoder"],
+    ],
+  },
+  {
+    title: "DevOps",
+    icon: Container,
+    blurb: "Config scaffolding and the small calculators you keep looking up.",
+    tools: [
+      ["Docker Compose Generator", "docker-compose-generator"],
+      ["Cron Builder", "cron-builder"],
+      [".gitignore Generator", "gitignore-generator"],
+      ["Environment Manager", "environment-manager"],
+      ["Chmod Calculator", "chmod-calculator"],
+    ],
+  },
+  {
+    title: "Productivity",
+    icon: NotebookPen,
+    blurb: "Project context that stays next to the tools that use it.",
+    tools: [
+      ["Notes", "notes"],
+      ["Code Snippets", "snippet-manager"],
+      ["Bookmarks", "bookmarks"],
+      ["Tasks", "to-do"],
+      ["API Keys", "api-keys"],
+    ],
+  },
 ] as const;
 
-const homepageTools = homepageToolSlugs
-  .map((slug) => allAppTools.find((tool) => tool.url === `/app/${slug}`))
-  .filter((tool): tool is HomeToolEntry => Boolean(tool));
+/** §12 — what actually lives together in the app. One local personal
+ *  workspace ships today; this is not a claim of per-project switching. */
+const workspaceTree = [
+  { name: "API Client", detail: "collections · environments · history", href: "/tools/api-client" },
+  { name: "Databases", detail: "PostgreSQL · MongoDB · Redis · S3", href: "/tools/sql-client" },
+  { name: "Vault", detail: "passwords · API keys · env files", href: "/tools/password-manager" },
+  { name: "Notes", detail: "markdown, local", href: "/tools/notes" },
+  { name: "Snippets", detail: "searchable, tagged", href: "/tools/snippet-manager" },
+  { name: "Bookmarks", detail: "links worth keeping", href: "/tools/bookmarks" },
+  { name: "Tasks", detail: "what is next", href: "/tools/to-do" },
+] as const;
 
-// Database clients ship with native Rust drivers in the desktop shell, so they
-// get their own row instead of being buried in the 80+ tool list.
-const databaseClients = [
+const privacyPoints = [
+  {
+    icon: Cpu,
+    title: "Local processing",
+    body: "Formatters, decoders, generators and crypto helpers run on your machine.",
+  },
   {
-    title: "SQL Client",
-    href: "/tools/sql-client",
-    description: "PostgreSQL, MySQL and MariaDB with an encrypted credential store.",
+    icon: HardDrive,
+    title: "Local storage",
+    body: "Notes, snippets, collections and credentials live in an encrypted local database.",
   },
   {
-    title: "MongoDB Explorer",
-    href: "/tools/database-explorer",
-    description: "Browse MongoDB databases, collections and documents.",
+    icon: WifiOff,
+    title: "Offline capability",
+    body: "Core tools work without a network connection. Only the network tools need one.",
   },
   {
-    title: "Redis Commander",
-    href: "/tools/redis-commander",
-    description: "Browse keys, inspect values and run raw commands.",
+    icon: UserX,
+    title: "No mandatory account",
+    body: "No sign-up, no sign-in, no activation. The app opens straight to the dashboard.",
   },
   {
-    title: "S3 Drive",
-    href: "/tools/s3-drive",
-    description: "Manage AWS S3 and DigitalOcean Spaces buckets.",
+    icon: CloudOff,
+    title: "No cloud dependency",
+    body: "There is no MyDevTools backend to depend on. Anonymous usage stats are opt-in and off by default.",
   },
 ] as const;
 
+const openSourceFacts = [
+  { icon: Scale, label: "License", value: "GNU AGPL v3", href: `${SOURCE_URL}/blob/main/LICENSE` },
+  { icon: Github, label: "Repository", value: "mydevtools-tech/mydevtools", href: SOURCE_URL },
+  { icon: GitPullRequest, label: "Contribution guide", value: "CONTRIBUTING.md", href: `${SOURCE_URL}/blob/main/CONTRIBUTING.md` },
+  { icon: FileText, label: "Security policy", value: "SECURITY.md", href: `${SOURCE_URL}/blob/main/SECURITY.md` },
+] as const;
+
 const howItWorks = [
   {
     step: "01",
-    title: "Download the App",
-    description:
-      "Grab the desktop app and open it. No sign-up, no sign-in, no setup — it runs fully offline from the first launch.",
+    title: "Download",
+    description: "No account required. Open the app and it is ready to use.",
     icon: DownloadIcon,
-    gradient: "from-indigo-500 to-indigo-400",
   },
   {
     step: "02",
-    title: "Pick Your Tool",
-    description: `Choose from ${allAppTools.length} tools in one unified dashboard. Everything in a single tab.`,
-    icon: LayoutGrid,
-    gradient: "from-indigo-500 to-indigo-400",
+    title: "Search",
+    description: "Find any tool instantly with the command palette.",
+    icon: Search,
   },
   {
     step: "03",
-    title: "Work Privately",
-    description:
-      "Everything runs on your machine. Sensitive credentials are AES-256 encrypted in a local vault — nothing leaves your device.",
-    icon: Shield,
-    gradient: "from-indigo-500 to-indigo-400",
+    title: "Work",
+    description: "Use tools locally and keep your workflow together.",
+    icon: Play,
   },
-];
+  {
+    step: "04",
+    title: "Build",
+    description: "Connect APIs and databases when your workflow requires them.",
+    icon: Database,
+  },
+] as const;
 
 const faqItems = homepageFaqItems;
 
@@ -223,9 +313,6 @@ const getModKeyServer = () => "⌘";
 // ─── Page ──────────────────────────────────────────────────────────────────────
 
 export default function Page() {
-  const router = useRouter();
-  const goToDownload = () => router.push("/download");
-
   const reduceMotion = useReducedMotion();
   const [openFaqIdx, setOpenFaqIdx] = useState<number | null>(null);
 
@@ -246,7 +333,6 @@ export default function Page() {
     );
   };
 
-
   return (
     <div className="dark mdt-deck flex flex-col min-h-screen bg-background text-foreground font-sans">
       {/* deck atmosphere: fixed grid + grain behind everything + gradient def for icons */}
@@ -268,7 +354,7 @@ export default function Page() {
       <Header />
 
       {/* ── Hero ────────────────────────────────────────────────────────────── */}
-      <section className="relative py-24 sm:py-32 md:py-40 lg:py-48 overflow-hidden">
+      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden">
         {/* Ambient orbs + living aurora */}
         <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
           <MdtAurora />
@@ -292,29 +378,8 @@ export default function Page() {
                 : { duration: 16, repeat: Infinity, ease: "easeInOut", delay: 1.5 }
             }
           />
-          <motion.div
-            className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[700px] h-[300px] rounded-full bg-indigo-600/10 blur-[100px]"
-            animate={
-              reduceMotion ? undefined : { scale: [1, 1.1, 1], opacity: [0.6, 1, 0.6] }
-            }
-            transition={
-              reduceMotion
-                ? undefined
-                : { duration: 10, repeat: Infinity, ease: "easeInOut", delay: 0.8 }
-            }
-          />
         </div>
 
-        {/* Subtle grid */}
-        <div
-          className="pointer-events-none absolute inset-0 -z-10 opacity-[0.035] dark:opacity-[0.06]"
-          style={{
-            backgroundImage: `linear-gradient(hsl(var(--foreground)) 1px, transparent 1px),
-                              linear-gradient(90deg, hsl(var(--foreground)) 1px, transparent 1px)`,
-            backgroundSize: "64px 64px",
-          }}
-        />
-
         <div className="container px-4 md:px-6 mx-auto text-center">
           {/* initial={false} — the hero renders in its final state server-side
               instead of at opacity:0. An entrance animation here would delay the
@@ -325,801 +390,575 @@ export default function Page() {
             initial={false}
             animate="visible"
             variants={stagger}
-            className="space-y-8 max-w-4xl mx-auto"
+            className="space-y-7 max-w-4xl mx-auto"
           >
+            {/* Eyebrow — category first */}
+            <motion.p
+              variants={fadeUp}
+              transition={{ duration: 0.6 }}
+              className="mdt-kicker inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-4 py-1.5"
+            >
+              Open source · Offline · Local-first
+            </motion.p>
 
             {/* Headline */}
             <motion.h1
               variants={fadeUp}
               transition={{ duration: 0.6, delay: 0.08 }}
-              className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.08]"
+              className="text-4xl sm:text-6xl md:text-7xl lg:text-[5.25rem] font-bold tracking-tight leading-[1.05]"
             >
-              {/* Non-breaking space before the break: a plain trailing space is
-                  collapsed away, so textContent reads "WorkstationJSON" to anything
-                  that does not treat <br/> as whitespace. Invisible at line end. */}
-              <span className="text-foreground">The Offline Developer Workstation&nbsp;</span>
-              <br />
-              <span className="mdt-grad-text mdt-grad-anim">
-                JSON, JWT, APIs, SQL &amp; 80+ More
-              </span>
+              The Offline{" "}
+              <span className="mdt-grad-text mdt-grad-anim">Developer Workstation</span>
             </motion.h1>
 
-            {/* Subtitle */}
+            {/* Subheading */}
             <motion.p
               variants={fadeUp}
               transition={{ duration: 0.6, delay: 0.16 }}
               className="text-lg sm:text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
             >
-              Format JSON, decode JWTs, test APIs, build regexes, and query SQL,
-              MongoDB &amp; Redis — 80+ developer tools, an API client and database
-              clients in one desktop app. Completely offline, no account required,
-              free and open source.
+              Stop juggling browser tabs and separate developer apps. MyDevTools
+              brings{" "}
+              <span className="text-foreground">
+                80+ developer tools, an API client, SQL, MongoDB and Redis
+              </span>{" "}
+              into one desktop workspace.
             </motion.p>
 
-            {/* CTAs */}
+            {/* CTAs — one dominant action, one secondary, one text link */}
             <motion.div
               variants={fadeUp}
               transition={{ duration: 0.6, delay: 0.24 }}
-              className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2"
+              className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-1"
             >
               <Magnetic strength={0.4} className="w-full sm:w-auto">
                 <a
                   href={DMG_URL}
                   download
-                  className="mdt-btn-grad inline-flex items-center justify-center gap-2 h-12 px-8 rounded-full text-sm font-medium w-full sm:w-auto"
+                  title="macOS 12+ · Universal (Apple Silicon & Intel)"
+                  className="mdt-btn-grad inline-flex items-center justify-center gap-2 h-12 px-8 rounded-full text-sm font-semibold w-full sm:w-auto"
                 >
                   <AppleGlyph className="h-4 w-4" />
-                  Download for macOS
+                  Download Free
                   <DownloadIcon className="h-4 w-4 opacity-80" />
                 </a>
               </Magnetic>
+              <a
+                href={SOURCE_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mdt-btn-ghost inline-flex items-center justify-center gap-2 h-12 px-7 rounded-full text-sm font-medium w-full sm:w-auto"
+              >
+                <Github className="h-4 w-4" aria-hidden />
+                View on GitHub
+              </a>
+              <Link
+                href="/tools"
+                className="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+              >
+                Explore tools
+                <ArrowRight className="h-4 w-4" />
+              </Link>
             </motion.div>
 
-            {/* Trust line — the three things that matter before the fold */}
+            {/* Trust line */}
             <motion.p
               variants={fadeUp}
               transition={{ duration: 0.6, delay: 0.28 }}
               className="text-sm text-muted-foreground"
             >
-              Free and open source · No account required · Works completely offline
+              <span className="text-foreground/90">Free. Open source. No account required.</span>
+              <span className="mx-2 text-muted-foreground/60">·</span>
+              <span className="mdt-mono text-xs">macOS 12+ · Apple Silicon &amp; Intel</span>
             </motion.p>
 
-            {/* Stats row */}
-            <motion.div
-              variants={fadeUp}
-              transition={{ duration: 0.6, delay: 0.32 }}
-              className="mt-7 mx-auto grid max-w-lg grid-cols-2 overflow-hidden rounded-2xl border border-white/10 bg-[#0a0b12]/80 backdrop-blur-md divide-x divide-white/10 shadow-xl shadow-black/40"
-            >
-              {[
-                { value: "80+", label: "Built-in Tools" },
-                { value: "AES-256", label: "Local Vault" },
-              ].map((s, i) => (
-                <div key={i} className="px-2 py-4 text-center">
-                  <div className="text-lg sm:text-xl md:text-2xl font-bold tracking-tight whitespace-nowrap mdt-grad-text mdt-grad-anim">
-                    {s.value}
-                  </div>
-                  <div className="mt-1 text-xs md:text-sm font-medium leading-snug text-[color:var(--mdt-muted)]">
-                    {s.label}
-                  </div>
-                </div>
-              ))}
-            </motion.div>
-
-            {/* Dashboard screenshot */}
+            {/* Product visual */}
             <motion.div
               variants={fadeUp}
-              transition={{ duration: 0.7, delay: 0.4 }}
-              className="pt-4 relative mx-auto max-w-5xl"
+              transition={{ duration: 0.7, delay: 0.36 }}
+              className="pt-6 relative mx-auto max-w-5xl"
             >
-              {/* Browser chrome frame */}
               <Tilt max={5} className="rounded-2xl">
                 <MdtDashboard />
               </Tilt>
-              {/* Glow beneath the screenshot */}
               <div className="absolute -bottom-6 inset-x-8 h-16 bg-indigo-500/20 blur-2xl rounded-full pointer-events-none" />
             </motion.div>
+          </motion.div>
+        </div>
+      </section>
 
-            {/* Product Hunt badge */}
-            <motion.div
-              variants={fadeUp}
-              transition={{ duration: 0.6, delay: 0.5 }}
-              className="pt-2"
+      {/* ── Proof strip ──────────────────────────────────────────────────────── */}
+      <section aria-label="What is included" className="border-y border-border/40 bg-muted/20">
+        <div className="container mx-auto px-4 md:px-6">
+          <ul className="mdt-mono flex flex-wrap items-center justify-center gap-x-2 gap-y-2 py-4 text-xs sm:text-sm text-muted-foreground">
+            {PROOF_STRIP.map((item, i) => (
+              <li key={item} className="flex items-center gap-2">
+                {i > 0 && <span aria-hidden className="text-muted-foreground/40">·</span>}
+                <span className={i === 0 ? "text-foreground" : undefined}>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      {/* ── Problem + fragmentation ──────────────────────────────────────────── */}
+      <section className="relative overflow-hidden py-16 md:py-24">
+        <div className="container mx-auto px-4 md:px-6">
+          <Section>
+            <SectionHeading
+              eyebrow="Your workflow is fragmented"
+              title={
+                <>
+                  Your development workflow shouldn&apos;t require{" "}
+                  <span className="mdt-grad-text">10 different tools.</span>
+                </>
+              }
             >
-              <a
-                href="https://www.producthunt.com/products/mydevtools?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-mydevtools"
-                target="_blank"
-                className="inline-block hover:opacity-90 hover:scale-105 transition-all duration-300"
-              >
-                <Image
-                  src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1041847&theme=dark&t=1764002797983"
-                  alt="MyDevTools - Essential tools for developers | Product Hunt"
-                  width={250}
-                  height={54}
-                  unoptimized
-                />
-              </a>
+              JSON in one tab. API testing in another. MongoDB somewhere else. Redis
+              in another application. A password manager on the side. MyDevTools
+              brings those everyday workflows together — it replaces the
+              fragmentation, not the tools.
+            </SectionHeading>
+
+            <motion.div variants={fadeUp} className="mx-auto max-w-3xl">
+              <div className="overflow-hidden rounded-2xl glass-overlay">
+                <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 border-b border-border/40 px-5 py-3 text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
+                  <span>Today — 10+ tabs / apps</span>
+                  <span aria-hidden className="w-4" />
+                  <span className="text-foreground">With MyDevTools</span>
+                </div>
+                <ul className="divide-y divide-border/30">
+                  {fragmentation.map((row) => (
+                    <li
+                      key={row.href}
+                      className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 px-5 py-3 text-sm"
+                    >
+                      <span className="text-muted-foreground line-through decoration-muted-foreground/40">
+                        {row.today}
+                      </span>
+                      <ArrowRight aria-hidden className="h-4 w-4 text-indigo-400" />
+                      <Link
+                        href={row.href}
+                        className="group inline-flex items-center gap-1.5 font-medium text-foreground/90 hover:text-foreground"
+                      >
+                        {row.app}
+                        <ArrowRight className="h-3.5 w-3.5 opacity-0 -translate-x-1 transition-all group-hover:opacity-100 group-hover:translate-x-0" />
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+                <div className="flex items-center justify-center gap-2 border-t border-border/40 bg-background/40 px-5 py-3 text-xs text-muted-foreground">
+                  <ArrowDown aria-hidden className="h-3.5 w-3.5" />
+                  One desktop app. Context switching, repeated setup and pasting
+                  secrets into random web tools — gone.
+                </div>
+              </div>
             </motion.div>
-          </motion.div>
+          </Section>
         </div>
       </section>
 
-      {/* ── USP Intro ────────────────────────────────────────────────────────── */}
-      <section className="py-16 md:py-20 bg-muted/30 border-y border-border/40">
-        <div className="container px-4 md:px-6 mx-auto">
-          <motion.div
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, margin: "-80px" }}
-            variants={stagger}
-            className="max-w-4xl mx-auto space-y-6"
-          >
-            <motion.div
+      {/* ── Founder story ────────────────────────────────────────────────────── */}
+      <section className="relative overflow-hidden border-y border-border/40 bg-muted/20 py-16 md:py-24">
+        <div className="container mx-auto px-4 md:px-6">
+          <Section className="mx-auto max-w-3xl">
+            <SectionHeading
+              eyebrow="Why it exists"
+              title="I didn't set out to build a developer platform. I just got tired of the tabs."
+              align="left"
+            />
+            <motion.blockquote
               variants={fadeUp}
-              className="prose prose-invert max-w-none text-center text-foreground/90 space-y-4"
+              className="space-y-4 border-l-2 border-indigo-400/60 pl-5 text-base leading-relaxed text-muted-foreground md:text-lg"
             >
-              <p className="text-lg leading-relaxed">
-                MyDevTools is the offline developer workstation: a desktop app that brings together everything you reach for in a day — a SQL, MongoDB and Redis database client, a full API client, and 80+ utility tools. Stop switching between tabs and apps—format JSON, test APIs, decode JWTs, build regexes, generate UUIDs, and manage databases all in one desktop workspace.
+              <p>
+                I kept opening 10+ browser tabs for everyday development tasks. I
+                started building MyDevTools for myself. I added a password manager
+                because I wanted a secure local place for credentials, and a MongoDB
+                client because I wanted a customized way to explore my data.
               </p>
-              <p className="text-lg leading-relaxed">
-                Local-first architecture means your data is processed on your machine and works fully offline. There is no account and no server: nothing to sign up for, nothing to sign in to, and nothing for us to store. Sensitive credentials are AES-256 encrypted in a local vault. Whether you&apos;re testing REST endpoints, debugging database queries, or working with cryptographic tools, everything runs on your machine — nothing ever leaves your device unless you point a tool at a destination you choose.
+              <p>
+                It started as a web application. Then I started questioning whether
+                sensitive developer data really needed to travel over HTTP in the
+                first place. That pushed me toward an offline-first desktop
+                application.
               </p>
-              <p className="text-lg leading-relaxed">
-                Free for everyone — every tool, every feature, no paid tier and no limits — and open source under the GNU AGPL v3, so you can read exactly what it does. No ads, no data harvesting, and no tracking: usage stats are anonymous, off by default, and yours to switch on. Compare MyDevTools to Postman (API client alternative), DBeaver (database GUI), scattered single-purpose websites, and other dev tool platforms—we unify what others scatter across 20 tabs.
+              <p>
+                Friends were also looking for offline-first developer tools, so I kept
+                going. MyDevTools is now an open-source desktop developer workstation
+                with 80+ tools.
               </p>
-            </motion.div>
-          </motion.div>
+              <footer className="pt-2 text-sm text-foreground/80">
+                —{" "}
+                <a
+                  href="https://github.com/itsmeakhil"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium underline-offset-4 hover:underline"
+                >
+                  Akhil
+                </a>
+                , creator of MyDevTools
+              </footer>
+            </motion.blockquote>
+          </Section>
         </div>
       </section>
 
-      {/* ── How It Works ────────────────────────────────────────────────────── */}
-      <section id="tools" className="py-16 md:py-24 relative overflow-hidden scroll-mt-28">
-        <div className="container px-4 md:px-6 mx-auto">
+      {/* ── Capabilities (80+ tools, grouped) ────────────────────────────────── */}
+      <section id="tools" className="relative overflow-hidden py-16 md:py-24 scroll-mt-28">
+        <div className="container mx-auto px-4 md:px-6">
           <Section>
-            <motion.div
-              variants={fadeUp}
-              transition={{ duration: 0.6 }}
-              className="text-center mb-14"
+            <SectionHeading
+              eyebrow="80+ tools"
+              title={
+                <>
+                  Everything you need for everyday development.{" "}
+                  <span className="mdt-grad-text">In one workspace.</span>
+                </>
+              }
             >
-              <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-4">
-                How It Works
-              </h2>
-              <p className="text-muted-foreground text-lg max-w-xl mx-auto">
-                From zero to productive in under a minute.
-              </p>
-            </motion.div>
+              Tool breadth is the proof, not the headline. Here is what is actually
+              inside — every link opens that tool&apos;s page.
+            </SectionHeading>
 
-            <div className="relative grid grid-cols-1 sm:grid-cols-3 gap-8 md:gap-10 max-w-4xl mx-auto">
-              {/* Connecting line (desktop only) */}
-              <div className="hidden sm:block absolute top-10 left-[calc(16.67%+24px)] right-[calc(16.67%+24px)] h-px border-t border-dashed border-border/50" />
-
-              {howItWorks.map((step, i) => (
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {capabilities.map((group, i) => (
                 <motion.div
-                  key={i}
+                  key={group.title}
                   variants={fadeUp}
-                  transition={{ duration: 0.55, delay: i * 0.12 }}
-                  className="flex flex-col items-center text-center relative"
+                  transition={{ duration: 0.5, delay: i * 0.06 }}
+                  className="flex h-full flex-col rounded-2xl glass-overlay p-6"
                 >
-                  {/* Step circle */}
-                  <div
-                    className={`w-20 h-20 rounded-full bg-gradient-to-br ${step.gradient} p-px mb-6 shadow-lg shadow-black/20 dark:shadow-black/40 z-10`}
-                  >
-                    <div className="w-full h-full rounded-full bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                      <step.icon className="w-8 h-8 text-foreground" />
+                  <div className="mb-3 flex items-center gap-2.5">
+                    <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-400 p-px shadow-md">
+                      <div className="flex h-full w-full items-center justify-center rounded-[7px] bg-card dark:bg-[hsl(var(--surface-2))]">
+                        <group.icon className="h-4 w-4 text-foreground" aria-hidden />
+                      </div>
                     </div>
+                    <h3 className="text-base font-semibold">{group.title}</h3>
                   </div>
-                  <span className="text-xs font-mono font-bold text-muted-foreground/60 mb-2 tracking-widest">
-                    STEP {step.step}
-                  </span>
-                  <h3 className="text-lg font-semibold mb-2">{step.title}</h3>
-                  <p className="text-sm text-muted-foreground leading-relaxed max-w-[220px]">
-                    {step.description}
-                  </p>
+                  <p className="mb-4 text-sm leading-snug text-muted-foreground">{group.blurb}</p>
+                  <ul className="mt-auto flex flex-wrap gap-1.5">
+                    {group.tools.map(([label, slug]) => (
+                      <li key={slug}>
+                        <Link
+                          href={`/tools/${slug}`}
+                          className="inline-block rounded-md border border-border/50 bg-background/50 px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-indigo-400/50 hover:text-foreground"
+                        >
+                          {label}
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
                 </motion.div>
               ))}
             </div>
-          </Section>
-        </div>
-      </section>
 
-      {/* ── Bento Showcase ─────────────────────────────────────────────────── */}
-      <section
-        id="features"
-        className="py-16 md:py-28 relative overflow-hidden scroll-mt-28"
-      >
-        <div className="container px-4 md:px-6 mx-auto">
-          <Section>
             <motion.div
               variants={fadeUp}
-              transition={{ duration: 0.6 }}
-              className="text-center mb-12 md:mb-14"
+              transition={{ duration: 0.55, delay: 0.1 }}
+              className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row"
             >
-              <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-4">
-                Fast, offline, and entirely yours
-              </h2>
-              <p className="text-muted-foreground text-lg max-w-xl mx-auto">
-                Real tools, real previews — speed and privacy by default.
-              </p>
-            </motion.div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5">
-              {/* T1 — JSON Formatter (large) */}
-              <motion.div
-                variants={fadeUp}
-                transition={{ duration: 0.55 }}
-                className="md:col-span-2 md:row-span-2"
-              >
-                <Link
-                  href="/tools/json-formatter"
-                  className="group relative flex h-full min-h-[380px] flex-col overflow-hidden rounded-2xl glass-overlay p-6 md:p-8 transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl dark:hover:shadow-black/40"
-                >
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.06] transition-opacity duration-500 bg-gradient-to-br from-amber-500 to-orange-400" />
-                  <div className="relative z-10 flex items-center gap-2 mb-4">
-                    <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-amber-500 to-orange-400 p-px shadow-md">
-                      <div className="w-full h-full rounded-[7px] bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                        <Zap className="w-4 h-4 text-foreground" />
-                      </div>
-                    </div>
-                    <span className="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
-                      Instant — and offline
-                    </span>
-                  </div>
-                  <h3 className="relative z-10 text-2xl font-semibold mb-3">
-                    Format & validate in milliseconds
-                  </h3>
-                  <p className="relative z-10 text-muted-foreground leading-relaxed mb-6 max-w-md text-sm md:text-base">
-                    JSON, SQL, Markdown — formatters and editors that run
-                    entirely on your machine. No round-trips, no copy-paste
-                    detours.
-                  </p>
-
-                  {/* JSON code preview */}
-                  <div className="relative z-10 mt-auto rounded-xl border border-border/40 dark:border-white/5 bg-background overflow-hidden font-mono text-xs md:text-sm">
-                    <div className="flex items-center justify-between px-3 py-2 border-b border-border/40 bg-muted/40">
-                      <div className="flex gap-1.5">
-                        <div className="w-2.5 h-2.5 rounded-full bg-rose-400/70" />
-                        <div className="w-2.5 h-2.5 rounded-full bg-amber-400/70" />
-                        <div className="w-2.5 h-2.5 rounded-full bg-emerald-400/70" />
-                      </div>
-                      <span className="text-[10px] text-muted-foreground">
-                        payload.json
-                      </span>
-                    </div>
-                    <pre className="p-4 leading-relaxed text-foreground/90 overflow-x-auto">
-{`{
-  "name": "mydevtools",
-  "tools": ${allAppTools.length},
-  "encrypted": true,
-  "offline": true,
-  "account_required": false
-}`}
-                    </pre>
-                  </div>
-
-                  <div className="relative z-10 mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-foreground/80 group-hover:text-foreground transition-colors">
-                    <span>Explore JSON Formatter</span>
-                    <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
-                  </div>
-                </Link>
-              </motion.div>
-
-              {/* T2 — Password Manager */}
-              <motion.div
-                variants={fadeUp}
-                transition={{ duration: 0.55, delay: 0.1 }}
+              <Link
+                href="/tools"
+                className="inline-flex h-11 items-center justify-center rounded-full bg-foreground px-7 text-sm font-medium text-background shadow-md transition-all duration-300 hover:scale-[1.03] hover:bg-foreground/90 active:scale-[0.98]"
               >
-                <Link
-                  href="/tools/password-manager"
-                  className="group relative flex h-full min-h-[180px] flex-col overflow-hidden rounded-2xl glass-overlay p-6 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-black/40"
-                >
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.06] transition-opacity duration-500 bg-gradient-to-br from-indigo-500 to-indigo-400" />
-                  <div className="relative z-10 flex items-center gap-2 mb-3">
-                    <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-400 p-px shadow-md">
-                      <div className="w-full h-full rounded-[7px] bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                        <Lock className="w-4 h-4 text-foreground" />
-                      </div>
-                    </div>
-                    <span className="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
-                      Secure &amp; Private
-                    </span>
-                  </div>
-                  <h3 className="relative z-10 text-lg font-semibold mb-3">
-                    Zero-knowledge vault
-                  </h3>
-
-                  {/* Password entries preview */}
-                  <div className="relative z-10 mt-auto space-y-1.5">
-                    {["github.com", "vercel.com", "anthropic.com"].map(
-                      (label) => (
-                        <div
-                          key={label}
-                          className="flex items-center justify-between px-3 py-1.5 rounded-md bg-background border border-border/40 dark:border-white/5 text-xs"
-                        >
-                          <span className="text-foreground/90 font-mono truncate pr-2">
-                            {label}
-                          </span>
-                          <span className="font-mono tracking-widest text-muted-foreground shrink-0">
-                            ••••••••
-                          </span>
-                        </div>
-                      )
-                    )}
-                  </div>
-                </Link>
-              </motion.div>
-
-              {/* T3 — API Client */}
-              <motion.div
-                variants={fadeUp}
-                transition={{ duration: 0.55, delay: 0.2 }}
+                Browse all tools
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Link>
+              <button
+                type="button"
+                onClick={openCommandPalette}
+                aria-label="Open command palette to search tools"
+                className="inline-flex h-11 cursor-pointer items-center gap-3 rounded-full glass-overlay px-5 text-sm text-muted-foreground transition-all duration-200 hover:text-foreground active:scale-[0.98]"
               >
-                <Link
-                  href="/tools/api-client"
-                  className="group relative flex h-full min-h-[180px] flex-col overflow-hidden rounded-2xl glass-overlay p-6 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-black/40"
-                >
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.06] transition-opacity duration-500 bg-gradient-to-br from-indigo-500 to-indigo-400" />
-                  <div className="relative z-10 flex items-center gap-2 mb-3">
-                    <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-400 p-px shadow-md">
-                      <div className="w-full h-full rounded-[7px] bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                        <Globe className="w-4 h-4 text-foreground" />
-                      </div>
-                    </div>
-                    <span className="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
-                      Developer First
-                    </span>
-                  </div>
-                  <h3 className="relative z-10 text-lg font-semibold mb-3">
-                    Test endpoints in one tab
-                  </h3>
-
-                  {/* API request preview */}
-                  <div className="relative z-10 mt-auto rounded-md border border-border/40 dark:border-white/5 bg-background overflow-hidden font-mono text-[11px]">
-                    <div className="flex items-center gap-2 px-3 py-2 border-b border-border/40">
-                      <span className="px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 font-semibold">
-                        GET
-                      </span>
-                      <span className="text-muted-foreground truncate">
-                        /api/v1/users
-                      </span>
-                      <span className="ml-auto inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 shrink-0">
-                        <CheckCircle2 className="w-3 h-3" /> 200
-                      </span>
-                    </div>
-                    <div className="px-3 py-2 text-foreground/80 truncate">
-                      {`{ "id": 42, "ok": true }`}
-                    </div>
-                  </div>
-                </Link>
-              </motion.div>
-            </div>
+                <Search className="h-4 w-4" />
+                <span>Search tools…</span>
+                <kbd className="ml-1 inline-flex items-center gap-0.5 rounded border border-border/60 bg-muted/60 px-1.5 py-0.5 font-mono text-[11px] text-foreground/80">
+                  <span>{modKey}</span>
+                  <span>K</span>
+                </kbd>
+              </button>
+            </motion.div>
           </Section>
         </div>
       </section>
 
-      {/* ── One offline app ─────────────────────────────────────────────────── */}
-      <section
-        id="download"
-        className="relative overflow-hidden scroll-mt-28 py-16 md:py-24"
-      >
-        <div className="absolute inset-0 -z-10 bg-muted/20" />
-        <div className="container px-4 md:px-6 mx-auto">
-          <Section>
-            <motion.div variants={fadeUp} className="mx-auto max-w-2xl text-center">
-              <h2 className="text-3xl md:text-4xl font-bold tracking-tight">
-                All 80+ tools, <span className="mdt-grad-text">one desktop app</span>
-              </h2>
-              <p className="mt-4 text-lg text-muted-foreground leading-relaxed">
-                Everything runs offline on your device. No tabs, no scattered
-                websites, no account — one workspace for your whole workflow,
-                free for everyone.
-              </p>
-              <div className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3">
+      {/* ── Workspace ────────────────────────────────────────────────────────── */}
+      <section className="relative overflow-hidden border-y border-border/40 bg-muted/20 py-16 md:py-24">
+        <div className="container mx-auto px-4 md:px-6">
+          <Section className="mx-auto grid max-w-5xl items-center gap-10 md:grid-cols-2 md:gap-14">
+            <div>
+              <SectionHeading
+                eyebrow="A workstation, not a tool collection"
+                title={
+                  <>
+                    Your project. Your tools.{" "}
+                    <span className="mdt-grad-text">One workspace.</span>
+                  </>
+                }
+                align="left"
+              >
+                Keep the tools, data, configuration and utilities you use for a
+                project together instead of scattering them across tabs and
+                applications. API collections, database connections, secrets,
+                notes and snippets sit side by side in one local, encrypted
+                database on your machine.
+              </SectionHeading>
+              <motion.div variants={fadeUp} className="flex flex-wrap gap-3">
                 <Button asChild size="lg">
                   <Link href="/download">
                     <DownloadIcon className="mr-2 h-4 w-4" aria-hidden />
                     Download MyDevTools
                   </Link>
                 </Button>
-              </div>
-            </motion.div>
+                <Button asChild size="lg" variant="outline">
+                  <Link href="/features">See features</Link>
+                </Button>
+              </motion.div>
+            </div>
 
-            {/* Database clients — native drivers, so they get their own row */}
-            <motion.div variants={fadeUp} className="mx-auto mt-12 max-w-4xl">
-              <p className="text-center text-sm font-medium text-muted-foreground">
-                Database clients included — native drivers, no extra app to install
-              </p>
-              <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
-                {databaseClients.map((client) => (
-                  <Link
-                    key={client.href}
-                    href={client.href}
-                    className="group rounded-xl glass-overlay p-4 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-black/30"
-                  >
-                    <p className="flex items-center gap-1.5 text-sm font-semibold">
-                      <Database className="h-4 w-4 shrink-0 text-indigo-400" aria-hidden />
-                      {client.title}
-                      <ArrowRight className="h-3.5 w-3.5 shrink-0 opacity-0 -translate-x-1 transition-all duration-300 group-hover:opacity-100 group-hover:translate-x-0" />
-                    </p>
-                    <p className="mt-1 text-xs leading-snug text-muted-foreground">
-                      {client.description}
-                    </p>
-                  </Link>
-                ))}
+            {/* Workspace tree — only things that ship today */}
+            <motion.div variants={fadeUp} transition={{ duration: 0.55, delay: 0.1 }}>
+              <div className="overflow-hidden rounded-2xl glass-overlay font-mono text-sm">
+                <div className="flex items-center gap-2 border-b border-border/40 bg-muted/40 px-4 py-2.5">
+                  <FolderTree className="h-4 w-4 text-indigo-400" aria-hidden />
+                  <span className="font-semibold">Your workspace</span>
+                  <span className="ml-auto rounded bg-indigo-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-indigo-400">
+                    on your device
+                  </span>
+                </div>
+                <ul className="p-2">
+                  {workspaceTree.map((node, i) => {
+                    const last = i === workspaceTree.length - 1;
+                    return (
+                      <li key={node.name}>
+                        <Link
+                          href={node.href}
+                          className="group flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-muted/50"
+                        >
+                          <span aria-hidden className="text-muted-foreground/50">
+                            {last ? "└──" : "├──"}
+                          </span>
+                          <span className="text-foreground/90 group-hover:text-foreground">
+                            {node.name}
+                          </span>
+                          <span className="ml-auto truncate text-xs text-muted-foreground">
+                            {node.detail}
+                          </span>
+                        </Link>
+                      </li>
+                    );
+                  })}
+                </ul>
               </div>
             </motion.div>
           </Section>
         </div>
       </section>
 
-      {/* ── Desktop vs website ──────────────────────────────────────────────── */}
-      <section className="relative overflow-hidden py-16 md:py-24">
-        <div className="container px-4 md:px-6 mx-auto">
+      {/* ── Offline / privacy ────────────────────────────────────────────────── */}
+      <section id="privacy" className="relative overflow-hidden py-16 md:py-24 scroll-mt-28">
+        <div className="container mx-auto px-4 md:px-6">
           <Section>
+            <SectionHeading
+              eyebrow="Why offline?"
+              title="Why send developer data somewhere else if you can process it locally?"
+            >
+              MyDevTools Desktop is designed around local-first development. Core
+              tools run on your machine without requiring an account or cloud
+              service.
+            </SectionHeading>
+
+            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
+              {privacyPoints.map((p, i) => (
+                <motion.div
+                  key={p.title}
+                  variants={fadeUp}
+                  transition={{ duration: 0.5, delay: i * 0.06 }}
+                  className="rounded-2xl glass-overlay p-5"
+                >
+                  <p.icon className="mb-3 h-5 w-5 text-indigo-400" aria-hidden />
+                  <h3 className="mb-1.5 text-sm font-semibold">{p.title}</h3>
+                  <p className="text-xs leading-relaxed text-muted-foreground">{p.body}</p>
+                </motion.div>
+              ))}
+            </div>
+
+            {/* Network transparency — precise, not absolute */}
             <motion.div
               variants={fadeUp}
-              transition={{ duration: 0.6 }}
-              className="mx-auto mb-12 max-w-2xl text-center"
+              transition={{ duration: 0.55, delay: 0.2 }}
+              className="mx-auto mt-8 max-w-3xl rounded-2xl border border-indigo-400/20 bg-indigo-500/[0.06] p-6 text-center"
             >
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">
-                A desktop app, not another web tool
-              </h2>
-              <p className="text-lg text-muted-foreground leading-relaxed">
-                The tools run on your machine. This website only explains what the
-                app does and hands you the download — so there is no confusion about
-                where your data goes.
+              <p className="text-lg font-semibold text-foreground md:text-xl">
+                Your data isn&apos;t sent to MyDevTools servers.
+              </p>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                Network-enabled tools connect to external destinations only when you
+                explicitly use them, such as an API or database. This website only
+                documents the app and hands you the download — the tools do not run
+                here.
               </p>
+              <Link
+                href="/security"
+                className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-foreground/80 transition-colors hover:text-foreground"
+              >
+                Read the security &amp; privacy details
+                <ArrowRight className="h-4 w-4" />
+              </Link>
             </motion.div>
-
-            <div className="mx-auto grid max-w-4xl grid-cols-1 gap-5 md:grid-cols-2">
-              {/* Desktop */}
-              <motion.div variants={fadeUp} transition={{ duration: 0.55, delay: 0.1 }}>
-                <div className="flex h-full flex-col rounded-2xl glass-overlay p-7">
-                  <div className="mb-5 flex items-center gap-2">
-                    <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-400 p-px shadow-md">
-                      <div className="flex h-full w-full items-center justify-center rounded-[7px] bg-card dark:bg-[hsl(var(--surface-2))]">
-                        <Laptop className="h-4 w-4 text-foreground" aria-hidden />
-                      </div>
-                    </div>
-                    <span className="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
-                      The product
-                    </span>
-                  </div>
-                  <h3 className="mb-4 text-xl font-semibold">MyDevTools Desktop</h3>
-                  <ul className="space-y-2.5 text-sm text-muted-foreground">
-                    {[
-                      "All 80+ tools run locally on your machine",
-                      "No account, no sign-in, no activation",
-                      "No MyDevTools backend — data lives in a local encrypted database",
-                      "Connects out only where you point a tool: API client, database clients, DNS/WHOIS, app updates",
-                    ].map((line) => (
-                      <li key={line} className="flex gap-2">
-                        <Check className="mt-0.5 h-4 w-4 shrink-0 text-indigo-400" aria-hidden />
-                        <span>{line}</span>
-                      </li>
-                    ))}
-                  </ul>
-                  <div className="mt-6 pt-1">
-                    <Button asChild size="sm">
-                      <Link href="/download">
-                        <DownloadIcon className="mr-2 h-4 w-4" aria-hidden />
-                        Download the app
-                      </Link>
-                    </Button>
-                  </div>
-                </div>
-              </motion.div>
-
-              {/* Website */}
-              <motion.div variants={fadeUp} transition={{ duration: 0.55, delay: 0.2 }}>
-                <div className="flex h-full flex-col rounded-2xl glass-overlay p-7">
-                  <div className="mb-5 flex items-center gap-2">
-                    <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-slate-500 to-slate-400 p-px shadow-md">
-                      <div className="flex h-full w-full items-center justify-center rounded-[7px] bg-card dark:bg-[hsl(var(--surface-2))]">
-                        <Globe className="h-4 w-4 text-foreground" aria-hidden />
-                      </div>
-                    </div>
-                    <span className="text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
-                      Information only
-                    </span>
-                  </div>
-                  <h3 className="mb-4 text-xl font-semibold">This website</h3>
-                  <ul className="space-y-2.5 text-sm text-muted-foreground">
-                    {[
-                      "Documentation for every tool, plus the changelog and download",
-                      "The tools themselves do not run here",
-                      "Nothing to sign up for — there is no web app and no sync",
-                      "A normal website: it uses standard web analytics, unlike the app",
-                    ].map((line) => (
-                      <li key={line} className="flex gap-2">
-                        <Check className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
-                        <span>{line}</span>
-                      </li>
-                    ))}
-                  </ul>
-                  <div className="mt-6 flex flex-wrap gap-3 pt-1">
-                    <Button asChild size="sm" variant="outline">
-                      <Link href="/tools">Browse tool docs</Link>
-                    </Button>
-                    <Button asChild size="sm" variant="outline">
-                      <Link href="/security">Privacy &amp; security</Link>
-                    </Button>
-                  </div>
-                </div>
-              </motion.div>
-            </div>
           </Section>
         </div>
       </section>
 
-      {/* ── Tools teaser ────────────────────────────────────────────────────── */}
-      <section className="py-16 md:py-24 relative overflow-hidden">
-        <div className="absolute inset-0 -z-10 bg-muted/20" />
-        <div className="container px-4 md:px-6 mx-auto">
+      {/* ── Open source ──────────────────────────────────────────────────────── */}
+      <section
+        id="open-source"
+        className="relative overflow-hidden border-y border-border/40 bg-muted/20 py-16 md:py-24 scroll-mt-28"
+      >
+        <div className="container mx-auto px-4 md:px-6">
           <Section>
-            <motion.div
-              variants={fadeUp}
-              transition={{ duration: 0.6 }}
-              className="text-center mb-10 md:mb-12"
+            <SectionHeading
+              eyebrow="Built in the open"
+              title={
+                <>
+                  Don&apos;t trust our privacy claims.{" "}
+                  <span className="mdt-grad-text">Verify them.</span>
+                </>
+              }
             >
-              <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-4">
-                80+ Tools, One Dashboard
-              </h2>
-              <p className="text-muted-foreground text-lg max-w-2xl mx-auto mb-8">
-                From JSON formatters to API clients, generators, and database
-                explorers — everything you need in one desktop developer toolkit.
-              </p>
-              <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-                <Link
-                  href="/tools"
-                  className="inline-flex items-center justify-center h-11 px-7 rounded-full text-sm font-medium bg-foreground text-background hover:bg-foreground/90 shadow-md hover:scale-[1.03] active:scale-[0.98] transition-all duration-300"
-                >
-                  Browse all tools
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Link>
-                <button
-                  type="button"
-                  onClick={openCommandPalette}
-                  aria-label="Open command palette to search tools"
-                  className="inline-flex items-center gap-3 h-11 px-5 rounded-full glass-overlay text-sm text-muted-foreground hover:text-foreground transition-all duration-200 cursor-pointer active:scale-[0.98]"
-                >
-                  <Search className="w-4 h-4" />
-                  <span>Search tools…</span>
-                  <kbd className="ml-1 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded border border-border/60 bg-muted/60 text-[11px] font-mono text-foreground/80">
-                    <span>{modKey}</span>
-                    <span>K</span>
-                  </kbd>
-                </button>
-              </div>
-            </motion.div>
+              MyDevTools is open source. Read the source, inspect the architecture,
+              understand how data is handled, report issues, and contribute
+              improvements.
+            </SectionHeading>
 
-            {/* Infinite tool-name ticker */}
             <motion.div
               variants={fadeUp}
-              transition={{ duration: 0.55, delay: 0.08 }}
-              className="mdt-marquee mb-10 border-y border-border/40 py-3.5"
+              className="flex flex-col items-center justify-center gap-3 sm:flex-row"
             >
-              <div className="mdt-marquee__track">
-                {[...allAppTools, ...allAppTools].map((t, i) => (
-                  <span
-                    key={i}
-                    className="mdt-mono inline-flex items-center gap-2 text-sm mdt-text-muted"
-                  >
-                    <span
-                      className="inline-block h-1.5 w-1.5 rounded-full"
-                      style={{ background: "var(--mdt-grad)" }}
-                    />
-                    {t.title}
-                  </span>
-                ))}
-              </div>
+              <a
+                href={SOURCE_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex h-12 w-full items-center justify-center rounded-full bg-foreground px-8 text-sm font-medium text-background shadow-md transition-all duration-300 hover:scale-[1.03] hover:bg-foreground/90 active:scale-[0.98] sm:w-auto"
+              >
+                <Github className="mr-2 h-4 w-4" aria-hidden />
+                View MyDevTools on GitHub
+              </a>
+              <a
+                href={`${SOURCE_URL}/blob/main/CONTRIBUTING.md`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mdt-btn-ghost inline-flex h-12 w-full items-center justify-center rounded-full px-7 text-sm font-medium sm:w-auto"
+              >
+                Contribute
+              </a>
+              <Link
+                href="/security"
+                className="mdt-btn-ghost inline-flex h-12 w-full items-center justify-center rounded-full px-7 text-sm font-medium sm:w-auto"
+              >
+                Security
+              </Link>
             </motion.div>
 
-            <motion.div
+            <motion.ul
               variants={fadeUp}
               transition={{ duration: 0.55, delay: 0.1 }}
-              className="mb-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"
+              className="mx-auto mt-10 grid max-w-4xl grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4"
             >
-              {[
-                { href: "/developer-tools", label: "Developer tools platform" },
-                { href: "/features", label: "Product features" },
-                { href: "/security", label: "Security and privacy" },
-                { href: "/download", label: "Download the app" },
-              ].map((link) => (
-                <Link
-                  key={link.href}
-                  href={link.href}
-                  className="rounded-xl border border-border/50 bg-background/50 px-4 py-3 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-colors"
-                >
-                  {link.label}
-                </Link>
-              ))}
-            </motion.div>
-
-            {/* Featured tool cards */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
-              {homepageTools.map((tool, i) => {
-                const g = toolListGradients[i % toolListGradients.length];
-                const Icon = tool.icon;
-                return (
-                  <motion.div
-                    key={tool.url}
-                    variants={fadeUp}
-                    transition={{ duration: 0.45, delay: i * 0.07 }}
+              {openSourceFacts.map((fact) => (
+                <li key={fact.label}>
+                  <a
+                    href={fact.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="group flex h-full flex-col rounded-xl glass-overlay p-4 transition-colors hover:border-indigo-400/40"
                   >
-                    <Link
-                      href={`/tools/${tool.url.replace(/^\/app\//, "")}`}
-                      className="group block h-full rounded-xl glass-overlay p-4 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-black/30 transition-all duration-300"
-                    >
-                      <div className="flex gap-3 items-start">
-                        {Icon ? (
-                          <div className={`shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br ${g} flex items-center justify-center shadow-md group-hover:scale-105 transition-transform duration-300`}>
-                            <Icon className="w-5 h-5 text-white" stroke={1.75} />
-                          </div>
-                        ) : null}
-                        <div className="min-w-0 flex-1">
-                          <p className="font-semibold text-sm sm:text-base mb-0.5 flex items-center gap-1.5">
-                            {tool.title}
-                            <ArrowRight className="w-3.5 h-3.5 shrink-0 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300" />
-                          </p>
-                          <p className="text-xs sm:text-sm text-muted-foreground leading-snug line-clamp-2">
-                            {tool.description}
-                          </p>
-                        </div>
-                      </div>
-                    </Link>
-                  </motion.div>
-                );
-              })}
-            </div>
+                    <span className="mb-2 flex items-center gap-2 text-[11px] font-mono uppercase tracking-wider text-muted-foreground">
+                      <fact.icon className="h-3.5 w-3.5" aria-hidden />
+                      {fact.label}
+                    </span>
+                    <span className="text-sm font-medium text-foreground/90 group-hover:text-foreground">
+                      {fact.value}
+                    </span>
+                  </a>
+                </li>
+              ))}
+            </motion.ul>
 
             <motion.div
               variants={fadeUp}
               transition={{ duration: 0.55, delay: 0.15 }}
-              className="mt-8 text-center"
+              className="mt-8 flex flex-col items-center justify-center gap-4 text-sm text-muted-foreground sm:flex-row sm:gap-6"
             >
-              <Link
-                href="/tools"
-                className="inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+              <p className="inline-flex items-center gap-1.5">
+                <Star className="h-4 w-4 fill-current text-amber-400" aria-hidden />
+                If MyDevTools saves you time, consider starring the project.
+              </p>
+              <a
+                href="https://www.producthunt.com/products/mydevtools?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-mydevtools"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block transition-opacity hover:opacity-90"
               >
-                See all tools
-                <ArrowRight className="w-4 h-4" />
-              </Link>
+                <Image
+                  src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1041847&theme=dark&t=1764002797983"
+                  alt="MyDevTools on Product Hunt"
+                  width={180}
+                  height={39}
+                  unoptimized
+                />
+              </a>
             </motion.div>
           </Section>
         </div>
       </section>
 
-      {/* ── Social Proof ─────────────────────────────────────────────────────── */}
-      <section className="py-16 md:py-24 relative overflow-hidden">
-        <div className="absolute inset-0 -z-10 bg-muted/20" />
-        <div className="container px-4 md:px-6 mx-auto">
+      {/* ── How it works ─────────────────────────────────────────────────────── */}
+      <section className="relative overflow-hidden py-16 md:py-24">
+        <div className="container mx-auto px-4 md:px-6">
           <Section>
-            <motion.div
-              variants={fadeUp}
-              transition={{ duration: 0.6 }}
-              className="text-center mb-14"
-            >
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4">
-                Proof, not promises
-              </h2>
-              <p className="text-muted-foreground text-lg max-w-xl mx-auto">
-                A public launch, local encryption and source code you can read —
-                instead of vague promises.
-              </p>
-            </motion.div>
+            <SectionHeading eyebrow="How it works" title="From 10 browser tabs to one workspace.">
+              From download to productive in under a minute.
+            </SectionHeading>
 
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-5xl mx-auto">
-              {/* Product Hunt card */}
-              <motion.div
-                variants={fadeUp}
-                transition={{ duration: 0.55, delay: 0.1 }}
-              >
-                <div className="group relative h-full rounded-2xl glass-overlay p-7 hover:scale-[1.015] hover:shadow-2xl dark:hover:shadow-black/40 transition-all duration-300 overflow-hidden flex flex-col">
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.05] transition-opacity duration-500 bg-gradient-to-br from-amber-500 to-orange-400" />
-                  <div className="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-400 p-px mb-6 shadow-lg">
-                    <div className="w-full h-full rounded-[11px] bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                      <Star className="w-5 h-5 text-foreground" />
-                    </div>
-                  </div>
-                  <h3 className="relative z-10 text-xl font-semibold mb-3">
-                    Featured on Product Hunt
-                  </h3>
-                  <p className="relative z-10 text-muted-foreground leading-relaxed text-sm md:text-base mb-5 flex-1">
-                    Public launch and feedback surface for real developer
-                    discovery, reviews, and community validation.
-                  </p>
-                  <a
-                    href="https://www.producthunt.com/products/mydevtools?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-mydevtools"
-                    target="_blank"
-                    className="relative z-10 inline-block hover:opacity-90 hover:scale-105 transition-all duration-300 self-start"
-                  >
-                    <Image
-                      src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1041847&theme=dark&t=1764002797983"
-                      alt="MyDevTools on Product Hunt"
-                      width={180}
-                      height={39}
-                      unoptimized
-                    />
-                  </a>
-                </div>
-              </motion.div>
-
-              {/* Privacy card */}
-              <motion.div
-                variants={fadeUp}
-                transition={{ duration: 0.55, delay: 0.2 }}
-              >
-                <div className="group relative h-full rounded-2xl glass-overlay p-7 hover:scale-[1.015] hover:shadow-2xl dark:hover:shadow-black/40 transition-all duration-300 overflow-hidden flex flex-col">
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.05] transition-opacity duration-500 bg-gradient-to-br from-indigo-500 to-indigo-400" />
-                  <div className="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-400 p-px mb-6 shadow-lg">
-                    <div className="w-full h-full rounded-[11px] bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                      <Shield className="w-5 h-5 text-foreground" />
-                    </div>
-                  </div>
-                  <h3 className="relative z-10 text-xl font-semibold mb-3">
-                    Zero-Knowledge Privacy
-                  </h3>
-                  <p className="relative z-10 text-muted-foreground leading-relaxed text-sm md:text-base flex-1">
-                    Sensitive data is encrypted in a local vault with a
-                    password only you know. Nothing is transmitted — your
-                    vault never leaves your device.
-                  </p>
-                </div>
-              </motion.div>
-
-              {/* Open source card */}
-              <motion.div
-                variants={fadeUp}
-                transition={{ duration: 0.55, delay: 0.3 }}
-                className="sm:col-span-2 lg:col-span-1"
-              >
-                <div className="group relative h-full rounded-2xl glass-overlay p-7 hover:scale-[1.015] hover:shadow-2xl dark:hover:shadow-black/40 transition-all duration-300 overflow-hidden flex flex-col">
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.05] transition-opacity duration-500 bg-gradient-to-br from-indigo-500 to-indigo-400" />
-                  <div className="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-400 p-px mb-6 shadow-lg">
-                    <div className="w-full h-full rounded-[11px] bg-card dark:bg-[hsl(var(--surface-2))] flex items-center justify-center">
-                      <Github className="w-5 h-5 text-foreground" aria-hidden />
+            <div className="relative mx-auto grid max-w-5xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4 md:gap-10">
+              <div className="hidden lg:block absolute top-10 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px border-t border-dashed border-border/50" />
+              {howItWorks.map((step, i) => (
+                <motion.div
+                  key={step.step}
+                  variants={fadeUp}
+                  transition={{ duration: 0.55, delay: i * 0.1 }}
+                  className="relative flex flex-col items-center text-center"
+                >
+                  <div className="z-10 mb-6 h-20 w-20 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-400 p-px shadow-lg shadow-black/40">
+                    <div className="flex h-full w-full items-center justify-center rounded-full bg-card dark:bg-[hsl(var(--surface-2))]">
+                      <step.icon className="h-8 w-8 text-foreground" aria-hidden />
                     </div>
                   </div>
-                  <h3 className="relative z-10 text-xl font-semibold mb-3">
-                    Built in the open
-                  </h3>
-                  <p className="relative z-10 text-muted-foreground leading-relaxed text-sm md:text-base mb-5 flex-1">
-                    The whole app — desktop shell, tools and this site — is public
-                    under the GNU AGPL v3. Read the code, build it yourself, open an
-                    issue, or send a pull request.
+                  <span className="mb-2 font-mono text-xs font-bold tracking-widest text-muted-foreground/60">
+                    STEP {step.step}
+                  </span>
+                  <h3 className="mb-2 text-lg font-semibold">{step.title}</h3>
+                  <p className="max-w-[240px] text-sm leading-relaxed text-muted-foreground">
+                    {step.description}
                   </p>
-                  <a
-                    href={SOURCE_URL}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="relative z-10 inline-flex items-center gap-1.5 self-start text-sm font-medium text-foreground/80 transition-colors hover:text-foreground"
-                  >
-                    <Github className="h-4 w-4" aria-hidden />
-                    View the source on GitHub
-                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-                  </a>
-                </div>
-              </motion.div>
+                </motion.div>
+              ))}
             </div>
           </Section>
         </div>
       </section>
 
       {/* ── FAQ ─────────────────────────────────────────────────────────────── */}
-      <section className="py-16 md:py-28 relative overflow-hidden">
-        <div className="container px-4 md:px-6 mx-auto max-w-3xl">
+      <section className="relative overflow-hidden border-t border-border/40 bg-muted/20 py-16 md:py-24">
+        <div className="container mx-auto max-w-3xl px-4 md:px-6">
           <Section>
-            <motion.div
-              variants={fadeUp}
-              transition={{ duration: 0.6 }}
-              className="text-center mb-12"
-            >
-              <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-4">
-                Common Questions
-              </h2>
-              <p className="text-muted-foreground text-lg">
-                Everything you need to know before getting started.
-              </p>
-            </motion.div>
+            <SectionHeading title="Common questions">
+              Everything you need to know before downloading.
+            </SectionHeading>
 
             <div className="space-y-3">
               {faqItems.map((item, i) => (
@@ -1130,26 +969,22 @@ export default function Page() {
                 >
                   <Collapsible
                     open={openFaqIdx === i}
-                    onOpenChange={(open) =>
-                      setOpenFaqIdx(open ? i : null)
-                    }
+                    onOpenChange={(open) => setOpenFaqIdx(open ? i : null)}
                   >
                     <CollapsibleTrigger className="w-full">
-                      <div className="flex items-center justify-between w-full rounded-2xl glass-overlay px-6 py-4 hover:border-border/70 hover:bg-card/70 transition-all duration-200 text-left">
-                        <span className="font-medium text-base pr-4">
-                          {item.q}
-                        </span>
+                      <div className="flex w-full items-center justify-between rounded-2xl glass-overlay px-6 py-4 text-left transition-all duration-200 hover:border-border/70 hover:bg-card/70">
+                        <span className="pr-4 text-base font-medium">{item.q}</span>
                         <motion.div
                           animate={{ rotate: openFaqIdx === i ? 180 : 0 }}
                           transition={{ duration: 0.25 }}
                           className="shrink-0 text-muted-foreground"
                         >
-                          <ChevronDown className="w-4 h-4" />
+                          <ChevronDown className="h-4 w-4" />
                         </motion.div>
                       </div>
                     </CollapsibleTrigger>
                     <CollapsibleContent>
-                      <div className="px-6 pb-4 pt-2 text-muted-foreground text-sm leading-relaxed border border-t-0 border-border/40 dark:border-white/5 rounded-b-2xl bg-card/40 dark:bg-background/60 -mt-2">
+                      <div className="-mt-2 rounded-b-2xl border border-t-0 border-border/40 bg-card/40 px-6 pb-4 pt-2 text-sm leading-relaxed text-muted-foreground dark:border-white/5 dark:bg-background/60">
                         {item.a}
                       </div>
                     </CollapsibleContent>
@@ -1161,71 +996,55 @@ export default function Page() {
         </div>
       </section>
 
-      {/* ── CTA ─────────────────────────────────────────────────────────────── */}
-      <section className="py-24 md:py-36 relative overflow-hidden">
-        {/* Decorative glow blobs */}
+      {/* ── Final CTA ────────────────────────────────────────────────────────── */}
+      <section className="relative overflow-hidden py-24 md:py-36">
         <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
-          <div className="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-indigo-500/12 blur-[100px]" />
-          <div className="absolute top-1/2 right-1/4 translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-indigo-400/12 blur-[100px]" />
-          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[200px] rounded-full bg-indigo-600/8 blur-[80px]" />
+          <div className="absolute top-1/2 left-1/4 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-500/12 blur-[100px]" />
+          <div className="absolute top-1/2 right-1/4 h-[500px] w-[500px] translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-400/12 blur-[100px]" />
         </div>
 
-        {/* Grid */}
-        <div
-          className="pointer-events-none absolute inset-0 -z-10 opacity-[0.03] dark:opacity-[0.05]"
-          style={{
-            backgroundImage: `linear-gradient(hsl(var(--foreground)) 1px, transparent 1px),
-                              linear-gradient(90deg, hsl(var(--foreground)) 1px, transparent 1px)`,
-            backgroundSize: "64px 64px",
-          }}
-        />
-
-        <div className="container px-4 md:px-6 mx-auto text-center relative z-10">
+        <div className="container relative z-10 mx-auto px-4 text-center md:px-6">
           <Section>
             <motion.div variants={fadeUp} transition={{ duration: 0.55 }}>
-              <div className="glass-modal rounded-3xl px-8 py-14 md:px-16 md:py-20 max-w-3xl mx-auto">
-
+              <div className="glass-modal mx-auto max-w-3xl rounded-3xl px-8 py-14 md:px-16 md:py-20">
                 <motion.h2
                   variants={fadeUp}
                   transition={{ duration: 0.6, delay: 0.1 }}
-                  className="text-3xl sm:text-5xl md:text-6xl font-bold mb-6 leading-tight"
+                  className="mb-6 text-3xl font-bold leading-tight sm:text-5xl md:text-6xl"
                 >
-                  Ready to Build{" "}
-                  <span className="mdt-grad-text mdt-grad-anim">
-                    Faster?
-                  </span>
+                  One workspace. Your tools.{" "}
+                  <span className="mdt-grad-text mdt-grad-anim">Your machine.</span>
                 </motion.h2>
 
                 <motion.p
                   variants={fadeUp}
                   transition={{ duration: 0.6, delay: 0.18 }}
-                  className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed"
+                  className="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl"
                 >
-                  Get the offline developer workstation: 80+ tools, an API client
-                  and database clients in one desktop app. Free, open source, and
-                  yours to keep.
+                  80+ developer tools, API, SQL, MongoDB and Redis — open source,
+                  local-first and offline.
                 </motion.p>
 
                 <motion.div
                   variants={fadeUp}
                   transition={{ duration: 0.6, delay: 0.26 }}
-                  className="flex flex-col sm:flex-row items-center justify-center gap-3"
+                  className="flex flex-col items-center justify-center gap-3 sm:flex-row"
                 >
-                  <button
-                    onClick={goToDownload}
-                    className="inline-flex items-center justify-center h-14 px-10 rounded-full text-base font-medium bg-foreground text-background hover:bg-foreground/90 shadow-md hover:shadow-lg hover:scale-[1.05] active:scale-[0.98] transition-all duration-300 w-full sm:w-auto"
+                  <Link
+                    href="/download"
+                    className="inline-flex h-14 w-full items-center justify-center rounded-full bg-foreground px-10 text-base font-medium text-background shadow-md transition-all duration-300 hover:scale-[1.05] hover:bg-foreground/90 hover:shadow-lg active:scale-[0.98] sm:w-auto"
                   >
-                    Download MyDevTools
+                    Download Free
                     <ArrowRight className="ml-2 h-5 w-5" />
-                  </button>
+                  </Link>
                   <a
                     href={SOURCE_URL}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center justify-center h-14 px-10 rounded-full text-base font-medium border border-border/60 dark:border-white/10 bg-background/60 backdrop-blur-sm text-foreground hover:bg-muted hover:scale-[1.04] active:scale-[0.98] transition-all duration-300 w-full sm:w-auto"
+                    className="inline-flex h-14 w-full items-center justify-center rounded-full border border-border/60 bg-background/60 px-10 text-base font-medium text-foreground backdrop-blur-sm transition-all duration-300 hover:scale-[1.04] hover:bg-muted active:scale-[0.98] dark:border-white/10 sm:w-auto"
                   >
                     <Github className="mr-2 h-5 w-5" aria-hidden />
-                    Star on GitHub
+                    View on GitHub
                   </a>
                 </motion.div>
 
@@ -1234,7 +1053,7 @@ export default function Page() {
                   transition={{ duration: 0.6, delay: 0.32 }}
                   className="mt-6 text-sm text-muted-foreground"
                 >
-                  Free and open source · No account required · Works completely offline
+                  Free · Open Source · Offline · macOS 12+
                 </motion.p>
               </div>
             </motion.div>
diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index 2399117b..2a2740f9 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -9,20 +9,61 @@ import { Logo } from "./logo";
 /** Source repository — AGPL v3. Built releases ship on this repo's releases page. */
 export const SOURCE_URL = "https://github.com/mydevtools-tech/mydevtools";
 
-const footerLinks = [
-  { href: "/blog", label: "Blog" },
-  { href: "/changelog", label: "Changelog" },
-  { href: "/developer-tools", label: "Platform" },
-  { href: "/features", label: "Features" },
-  { href: "/download", label: "Download" },
-  { href: "/#tools", label: "Tools" },
-  { href: "/open-source", label: "Open Source" },
-  { href: "/privacy", label: "Privacy" },
-  { href: "/security", label: "Security" },
-  { href: "/help", label: "Help" },
-  { href: SOURCE_URL, label: "Source", external: true },
+type FooterLink = { href: string; label: string; external?: boolean };
+
+const footerColumns: { title: string; links: FooterLink[] }[] = [
+  {
+    title: "Product",
+    links: [
+      { href: "/tools", label: "Tools" },
+      { href: "/features", label: "Features" },
+      { href: "/download", label: "Download" },
+      { href: "/developer-tools", label: "Platform" },
+      { href: "/changelog", label: "Changelog" },
+    ],
+  },
+  {
+    title: "Resources",
+    links: [
+      { href: "/blog", label: "Blog" },
+      { href: "/help", label: "Help & FAQ" },
+      { href: "/privacy", label: "Privacy" },
+      { href: "/security", label: "Security" },
+    ],
+  },
+  {
+    title: "Open Source",
+    links: [
+      { href: SOURCE_URL, label: "GitHub", external: true },
+      { href: "/open-source", label: "Why open source" },
+      { href: `${SOURCE_URL}/blob/main/CONTRIBUTING.md`, label: "Contributing", external: true },
+      { href: `${SOURCE_URL}/blob/main/ROADMAP.md`, label: "Roadmap", external: true },
+      { href: `${SOURCE_URL}/blob/main/LICENSE`, label: "License (AGPL-3.0)", external: true },
+    ],
+  },
+  {
+    title: "Community",
+    links: [
+      { href: `${SOURCE_URL}/discussions`, label: "Discussions", external: true },
+      { href: `${SOURCE_URL}/issues`, label: "Issues", external: true },
+      { href: `${SOURCE_URL}/releases`, label: "Releases", external: true },
+    ],
+  },
 ];
 
+function FooterAnchor({ link }: { link: FooterLink }) {
+  const className = "text-muted-foreground hover:text-foreground transition-colors";
+  return link.external ? (
+    <a href={link.href} target="_blank" rel="noreferrer" className={className}>
+      {link.label}
+    </a>
+  ) : (
+    <Link href={link.href} className={className}>
+      {link.label}
+    </Link>
+  );
+}
+
 export function Footer() {
   const year = new Date().getFullYear();
 
@@ -30,42 +71,38 @@ export function Footer() {
     <>
       <footer className="border-t border-border/50 bg-background/60 backdrop-blur-sm">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-          <div className="flex flex-col items-center gap-4 py-6 md:flex-row md:justify-between md:gap-6">
-            {/* Brand + copyright */}
-            <Link
-              href="/"
-              className="flex items-center gap-2.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-            >
-              <Logo size={22} showText={false} />
-              <span>
-                © {year} <span className="font-semibold text-foreground">MyDevTools</span>
-              </span>
-            </Link>
+          <div className="grid grid-cols-2 gap-8 py-10 md:grid-cols-6">
+            {/* Brand */}
+            <div className="col-span-2 space-y-3">
+              <Link href="/" className="inline-flex items-center gap-2.5">
+                <Logo size={22} showText={false} />
+                <span className="font-semibold text-foreground">MyDevTools</span>
+              </Link>
+              <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
+                The offline developer workstation. 80+ developer tools, API, SQL,
+                MongoDB and Redis — open source, local-first, on your machine.
+              </p>
+            </div>
+
+            {footerColumns.map((col) => (
+              <nav key={col.title} aria-label={col.title}>
+                <h2 className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground/80">
+                  {col.title}
+                </h2>
+                <ul className="space-y-2 text-sm">
+                  {col.links.map((link) => (
+                    <li key={link.href}>
+                      <FooterAnchor link={link} />
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            ))}
+          </div>
 
-            {/* Nav links */}
-            <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm">
-              {footerLinks.map((link) =>
-                link.external ? (
-                  <a
-                    key={link.href}
-                    href={link.href}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    {link.label}
-                  </a>
-                ) : (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                    className="text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    {link.label}
-                  </Link>
-                )
-              )}
-            </nav>
+          <div className="flex flex-col items-center gap-2 border-t border-border/40 py-5 text-xs text-muted-foreground sm:flex-row sm:justify-between">
+            <span>© {year} MyDevTools · Free &amp; open source under the GNU AGPL v3</span>
+            <span>Made by Akhil and contributors</span>
           </div>
         </div>
       </footer>
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index baafe33a..e12f0394 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -2,7 +2,7 @@
 import { useState, useEffect, type ElementType } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Github, Menu, Star, X } from "lucide-react";
+import { Download, Github, Menu, Star, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Logo } from "./logo";
 import { SOURCE_URL } from "./footer";
@@ -49,13 +49,13 @@ type NavLink = {
   external?: boolean;
 };
 
+// Logo is "Home"; Platform/Changelog/Help live in the footer. Download is the
+// header's primary action button, not a nav item.
 const NAV_LINKS: NavLink[] = [
-  { href: "/", label: "Home" },
-  { href: "/features", label: "Features" },
-  { href: "/developer-tools", label: "Platform" },
-  { href: "/download", label: "Download" },
   { href: "/tools", label: "Tools" },
-  { href: "/changelog", label: "Changelog" },
+  { href: "/features", label: "Features" },
+  { href: "/open-source", label: "Open Source" },
+  { href: "/blog", label: "Blog" },
 ];
 
 // "/" only matches exactly; every other section also owns its sub-routes
@@ -129,6 +129,7 @@ export function Header() {
 
   const mobileNavLinks: NavLink[] = [
     ...NAV_LINKS,
+    { href: "/download", label: "Download", icon: Download },
     { href: SOURCE_URL, label: "GitHub", icon: Github, external: true },
   ];
 
@@ -202,6 +203,14 @@ export function Header() {
               </a>
             </Button>
 
+            {/* Primary action — same on every page */}
+            <Button asChild size="sm" className="hidden md:inline-flex h-10 gap-2 px-4">
+              <Link href="/download">
+                <Download className="h-4 w-4" aria-hidden />
+                Download
+              </Link>
+            </Button>
+
             {/* Mobile Menu Toggle */}
             <Button
               variant="ghost"
diff --git a/apps/web/src/lib/metadata.ts b/apps/web/src/lib/metadata.ts
index bfd678e3..486f6b55 100644
--- a/apps/web/src/lib/metadata.ts
+++ b/apps/web/src/lib/metadata.ts
@@ -649,11 +649,11 @@ export function generatePageMetadata(opts: {
 // Base site metadata
 export const siteMetadata = {
     name: 'MyDevTools',
-    // 56 chars — under the ~60 SERP clip. "Desktop" was dropped rather than
-    // "Developer Tools" (the higher-volume phrase) or the database keywords.
-    title: 'MyDevTools: 80+ Developer Tools + SQL/NoSQL/Redis Client',
+    // 58 chars — under the ~60 SERP clip. Category ("Offline Developer
+    // Workstation") leads; "Developer Tools" keeps the higher-volume phrase.
+    title: 'MyDevTools: Offline Developer Workstation — 80+ Dev Tools',
     // Kept under ~160 chars so the closing claim survives SERP truncation.
-    description: 'All-in-one desktop developer toolkit: SQL, MongoDB & Redis clients plus 80+ utilities. Completely offline, no account required, free and open source.',
+    description: 'Open-source offline developer workstation: 80+ developer tools, an API client and SQL, MongoDB & Redis clients in one local-first desktop app. Free, no account.',
     url: baseUrl,
-    ogImage: ogImageUrl('MyDevTools — Desktop Developer Toolkit', 'SQL + NoSQL + Redis client + 80+ developer tools in one desktop app. Offline, no account, free for everyone.'),
+    ogImage: ogImageUrl('MyDevTools — The Offline Developer Workstation', '80+ developer tools, API client, SQL, MongoDB & Redis in one desktop app. Open source, local-first, no account.'),
 }
diff --git a/apps/web/src/lib/seo/structured-data.ts b/apps/web/src/lib/seo/structured-data.ts
index b00bc818..24cea10c 100644
--- a/apps/web/src/lib/seo/structured-data.ts
+++ b/apps/web/src/lib/seo/structured-data.ts
@@ -14,7 +14,7 @@ export const homepageFaqItems = [
   },
   {
     q: 'Is my data secure?',
-    a: 'Your data stays on your device — there is no cloud sync and no server to sync to. Vault-style data is additionally encrypted locally with a password only you know.',
+    a: 'Your data is not sent to MyDevTools servers — there is no cloud sync and no backend. Network tools (API client, database clients) connect only to the destinations you point them at. Vault-style data is additionally encrypted locally with a password only you know.',
   },
   {
     q: 'Do I need an account to use the tools?',