From 822990363e0ddd15f0647835044f50305faf2b44 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 31 Mar 2026 23:02:12 -0500
Subject: [PATCH 1/4] Refresh marketing hero background and glow effects

- Add layered gradient mesh and grid textures
- Increase star density and highlight brighter stars
- Emphasize the AI wordmark and add button shimmer
---
 .../marketing/src/components/Background.astro | 63 +++++++++++++++-
 apps/marketing/src/components/Hero.astro      | 73 ++++++++++++++++++-
 2 files changed, 132 insertions(+), 4 deletions(-)

diff --git a/apps/marketing/src/components/Background.astro b/apps/marketing/src/components/Background.astro
index f75309175..21c1bbbed 100644
--- a/apps/marketing/src/components/Background.astro
+++ b/apps/marketing/src/components/Background.astro
@@ -1,5 +1,5 @@
 ---
-const starCount = 160;
+const starCount = 220;
 let seed = 42;
 const rand = () => {
   seed = (seed * 16807) % 2147483647;
@@ -8,18 +8,31 @@ const rand = () => {
 
 const stars = Array.from({ length: starCount }, (_, i) => {
   const twinkle = rand() < 0.3;
+  const bright = rand() < 0.05;
   return {
     id: i,
     x: (rand() * 100).toFixed(3),
     y: (rand() * 100).toFixed(3),
-    r: rand() < 0.85 ? (0.4 + rand() * 0.5).toFixed(3) : (0.8 + rand() * 0.6).toFixed(3),
-    opacity: (0.15 + rand() * 0.45).toFixed(3),
+    r: bright
+      ? (1.2 + rand() * 0.6).toFixed(3)
+      : rand() < 0.85
+        ? (0.4 + rand() * 0.5).toFixed(3)
+        : (0.8 + rand() * 0.6).toFixed(3),
+    opacity: bright
+      ? (0.6 + rand() * 0.3).toFixed(3)
+      : (0.15 + rand() * 0.45).toFixed(3),
     delay: (rand() * 8).toFixed(3),
     twinkle,
   };
 });
 ---
 
+<div class="kn-gradient-mesh" aria-hidden="true">
+  <div class="kn-mesh-orb kn-mesh-orb--1"></div>
+  <div class="kn-mesh-orb kn-mesh-orb--2"></div>
+  <div class="kn-mesh-orb kn-mesh-orb--3"></div>
+</div>
+
 <div class="kn-threads" aria-hidden="true">
   <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" fill="none" xmlns="http://www.w3.org/2000/svg" class="kn-threads-svg">
     <path d="M -80 520 C 180 440, 380 620, 620 460 S 980 340, 1520 480" class="kn-thread kn-thread-a" />
@@ -32,6 +45,9 @@ const stars = Array.from({ length: starCount }, (_, i) => {
     <path d="M 620 500 C 520 580, 380 700, 160 920" class="kn-thread kn-thread-claw-hi" />
     <path d="M 1520 200 C 1200 260, 900 180, 640 280 S 300 360, -40 240" class="kn-thread kn-thread-ocean" />
     <path d="M -40 660 C 200 620, 500 700, 780 640 S 1200 560, 1520 640" class="kn-thread kn-thread-ocean-hi" />
+    <path d="M -60 420 C 200 380, 500 500, 800 420 S 1200 360, 1520 440" class="kn-thread kn-thread-d" />
+    <path d="M 1520 520 C 1200 480, 800 580, 500 500 S 100 440, -60 520" class="kn-thread kn-thread-ocean" />
+    <path d="M 200 -40 C 300 200, 500 350, 700 280 S 1000 200, 1200 340" class="kn-thread kn-thread-c" />
     <circle cx="640" cy="462" r="3" class="kn-dot" />
     <circle cx="640" cy="462" r="14" class="kn-glow" />
     <circle cx="640" cy="462" r="30" fill="var(--kn-landing-accent-dim)" opacity="0.1" />
@@ -55,3 +71,44 @@ const stars = Array.from({ length: starCount }, (_, i) => {
     ))}
   </svg>
 </div>
+
+<style>
+  .kn-gradient-mesh {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+  .kn-mesh-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    animation: float var(--duration, 20s) ease-in-out infinite;
+  }
+  .kn-mesh-orb--1 {
+    width: 50vw;
+    height: 50vw;
+    top: -10%;
+    left: -10%;
+    background: radial-gradient(circle, rgba(202, 58, 41, 0.06), transparent 70%);
+    --duration: 25s;
+  }
+  .kn-mesh-orb--2 {
+    width: 40vw;
+    height: 40vw;
+    top: 40%;
+    right: -15%;
+    background: radial-gradient(circle, rgba(167, 139, 250, 0.05), transparent 70%);
+    --duration: 30s;
+    animation-delay: -8s;
+  }
+  .kn-mesh-orb--3 {
+    width: 45vw;
+    height: 45vw;
+    bottom: -20%;
+    left: 20%;
+    background: radial-gradient(circle, rgba(103, 232, 249, 0.04), transparent 70%);
+    --duration: 28s;
+    animation-delay: -15s;
+  }
+</style>
diff --git a/apps/marketing/src/components/Hero.astro b/apps/marketing/src/components/Hero.astro
index 3af5d136a..3e6ae0b3f 100644
--- a/apps/marketing/src/components/Hero.astro
+++ b/apps/marketing/src/components/Hero.astro
@@ -5,6 +5,12 @@
 ---
 
 <section class="hero" data-reveal>
+  <div class="hero-gradient-mesh" aria-hidden="true">
+    <div class="hero-mesh-blob hero-mesh-blob--1"></div>
+    <div class="hero-mesh-blob hero-mesh-blob--2"></div>
+    <div class="hero-mesh-blob hero-mesh-blob--3"></div>
+  </div>
+
   <div class="hero-copy hero-copy--centered">
     <a href="https://github.com/OpenKnots/okcode/releases" class="kn-pill">
       <span class="kn-pill-badge">New</span>
@@ -20,7 +26,7 @@
       </div>
     </div>
 
-    <h1 class="tagline">The beautiful workspace for shipping with AI.</h1>
+    <h1 class="tagline">The beautiful workspace for shipping with <span class="gradient-text">AI</span>.</h1>
 
     <p class="subtagline">
       Chat, diffs, preview, PR review, and release actions in one glassy desktop + web
@@ -31,6 +37,7 @@
     <div class="hero-actions hero-actions--centered">
       <a id="download-btn" href="https://github.com/OpenKnots/okcode/releases" class="hero-button">
         <span class="hero-button-shine" aria-hidden="true"></span>
+        <span class="hero-button-shimmer" aria-hidden="true"></span>
         <span id="download-label">Download OK Code</span>
       </a>
 
@@ -55,4 +62,68 @@
       </div>
     </div>
   </div>
+
+  <div class="hero-grid-pattern" aria-hidden="true"></div>
 </section>
+
+<style>
+  .hero-gradient-mesh {
+    position: absolute;
+    inset: -20% -10%;
+    z-index: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  .hero-mesh-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.4;
+    animation: float var(--duration) ease-in-out infinite;
+  }
+  .hero-mesh-blob--1 {
+    width: 40rem;
+    height: 40rem;
+    top: -10%;
+    left: -5%;
+    background: radial-gradient(circle, rgba(202, 58, 41, 0.15), transparent 70%);
+    --duration: 18s;
+  }
+  .hero-mesh-blob--2 {
+    width: 35rem;
+    height: 35rem;
+    top: 20%;
+    right: -10%;
+    background: radial-gradient(circle, rgba(167, 139, 250, 0.12), transparent 70%);
+    --duration: 22s;
+    animation-delay: -5s;
+  }
+  .hero-mesh-blob--3 {
+    width: 30rem;
+    height: 30rem;
+    bottom: -15%;
+    left: 30%;
+    background: radial-gradient(circle, rgba(103, 232, 249, 0.1), transparent 70%);
+    --duration: 20s;
+    animation-delay: -10s;
+  }
+  .hero-button-shimmer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
+    animation: shimmer 3s ease-in-out infinite;
+    pointer-events: none;
+  }
+  .hero-grid-pattern {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    opacity: 0.03;
+    background-image:
+      linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
+    background-size: 48px 48px;
+    mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, black, transparent);
+  }
+</style>

From b5c52834456cd167d580ac5e8a165973b77c2294 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 31 Mar 2026 23:04:18 -0500
Subject: [PATCH 2/4] Overhaul the marketing landing page

- Add logo cloud and stats bar
- Refresh feature, FAQ, workflow, and CTA sections
- Improve layout, navigation, and reveal animations
---
 .../marketing/src/components/FaqSection.astro |  41 +-
 .../src/components/FeatureGrid.astro          |  36 +-
 apps/marketing/src/components/FinalCta.astro  | 105 +++-
 apps/marketing/src/components/LogoCloud.astro |  96 ++++
 apps/marketing/src/components/StatsBar.astro  |  89 +++
 .../marketing/src/components/TrustStrip.astro |  82 ++-
 .../src/components/WorkflowSection.astro      |  50 +-
 apps/marketing/src/layouts/Layout.astro       | 515 ++++++++++++++++--
 apps/marketing/src/pages/index.astro          |   9 +
 9 files changed, 937 insertions(+), 86 deletions(-)
 create mode 100644 apps/marketing/src/components/LogoCloud.astro
 create mode 100644 apps/marketing/src/components/StatsBar.astro

diff --git a/apps/marketing/src/components/FaqSection.astro b/apps/marketing/src/components/FaqSection.astro
index 2699d5ae2..7aad77b0e 100644
--- a/apps/marketing/src/components/FaqSection.astro
+++ b/apps/marketing/src/components/FaqSection.astro
@@ -24,8 +24,13 @@ const { faqs } = Astro.props;
             aria-controls={`${id}-panel`}
             data-faq-trigger
           >
-            <span>{item.question}</span>
-            <span class="faq-chevron" aria-hidden="true">⌄</span>
+            <span class="faq-question">
+              <span class="faq-number">{String(index + 1).padStart(2, '0')}</span>
+              {item.question}
+            </span>
+            <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M6 9l6 6 6-6" />
+            </svg>
           </button>
           <div
             id={`${id}-panel`}
@@ -41,3 +46,35 @@ const { faqs } = Astro.props;
     })}
   </div>
 </section>
+
+<style>
+  .faq-trigger {
+    transition: background 0.2s ease;
+  }
+
+  .faq-trigger:hover {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .faq-question {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .faq-number {
+    font-size: 0.72rem;
+    font-weight: 600;
+    color: var(--kn-landing-accent, #ca3a29);
+    opacity: 0.6;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .faq-chevron {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    color: var(--kn-landing-text-muted, #8a94a4);
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
+  }
+</style>
diff --git a/apps/marketing/src/components/FeatureGrid.astro b/apps/marketing/src/components/FeatureGrid.astro
index a67cccde7..90b0345a3 100644
--- a/apps/marketing/src/components/FeatureGrid.astro
+++ b/apps/marketing/src/components/FeatureGrid.astro
@@ -11,7 +11,7 @@ const icons = [
 ] as const;
 ---
 
-<section id="features" class="feature-grid feature-grid--bento" aria-label="Core product pillars" data-reveal>
+<section id="features" class="feature-grid feature-grid--bento" aria-label="Core product pillars" data-reveal data-reveal-children>
   {pillars.map((pillar, index) => (
     <article class={`feature-card feature-card--bento feature-card--${index + 1}`}>
       <div class="feature-card-head">
@@ -25,3 +25,37 @@ const icons = [
     </article>
   ))}
 </section>
+
+<style>
+  .feature-card {
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
+  }
+
+  .feature-card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--kn-landing-accent, #ca3a29), transparent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .feature-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 40px rgba(202, 58, 41, 0.06);
+    border-color: var(--kn-landing-border-hover, rgba(192, 200, 212, 0.16));
+  }
+
+  .feature-card:hover::before {
+    opacity: 1;
+  }
+
+  .feature-card--1 :global(.kn-ico-wrap) { color: var(--kn-landing-accent-bright, #ff4e41); }
+  .feature-card--2 :global(.kn-ico-wrap) { color: #67e8f9; }
+  .feature-card--3 :global(.kn-ico-wrap) { color: #fbbf24; }
+</style>
diff --git a/apps/marketing/src/components/FinalCta.astro b/apps/marketing/src/components/FinalCta.astro
index 752dd9fc7..d99bae0c4 100644
--- a/apps/marketing/src/components/FinalCta.astro
+++ b/apps/marketing/src/components/FinalCta.astro
@@ -5,24 +5,91 @@
 ---
 
 <section class="final-cta kn-card" data-reveal>
-  <p class="section-kicker">Ready</p>
-  <h2>Stop building through tab chaos.</h2>
-  <p>
-    Bring chat, code review, preview, and release flow into one calm workspace built for serious
-    AI-assisted work.
-  </p>
-  <div class="final-cta-actions">
-    <a href="https://github.com/OpenKnots/okcode/releases" class="hero-button">
-      <span class="hero-button-shine" aria-hidden="true"></span>
-      <span>Download OK Code</span>
-    </a>
-    <a
-      href="https://github.com/OpenKnots/okcode"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="secondary-button"
-    >
-      Explore on GitHub
-    </a>
+  <div class="final-cta-mesh" aria-hidden="true">
+    <div class="final-cta-orb final-cta-orb--1"></div>
+    <div class="final-cta-orb final-cta-orb--2"></div>
+  </div>
+  <div class="final-cta-content">
+    <p class="section-kicker">Ready</p>
+    <h2>Stop building through tab chaos.</h2>
+    <p>
+      Bring chat, code review, preview, and release flow into one calm workspace built for serious
+      AI-assisted work.
+    </p>
+    <div class="final-cta-actions">
+      <a href="https://github.com/OpenKnots/okcode/releases" class="hero-button">
+        <span class="hero-button-shine" aria-hidden="true"></span>
+        <span>Download OK Code</span>
+      </a>
+      <a
+        href="https://github.com/OpenKnots/okcode"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="secondary-button"
+      >
+        Explore on GitHub
+      </a>
+    </div>
   </div>
 </section>
+
+<style>
+  .final-cta {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .final-cta::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 10%;
+    right: 10%;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--kn-landing-accent, #ca3a29), transparent);
+    opacity: 0.4;
+  }
+
+  .final-cta-mesh {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .final-cta-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(60px);
+    animation: float var(--duration) ease-in-out infinite;
+  }
+
+  .final-cta-orb--1 {
+    width: 24rem;
+    height: 24rem;
+    top: -40%;
+    left: -10%;
+    background: radial-gradient(circle, rgba(202, 58, 41, 0.12), transparent 70%);
+    --duration: 16s;
+  }
+
+  .final-cta-orb--2 {
+    width: 20rem;
+    height: 20rem;
+    bottom: -30%;
+    right: -5%;
+    background: radial-gradient(circle, rgba(167, 139, 250, 0.08), transparent 70%);
+    --duration: 20s;
+    animation-delay: -6s;
+  }
+
+  .final-cta-content {
+    position: relative;
+    z-index: 1;
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+  }
+</style>
diff --git a/apps/marketing/src/components/LogoCloud.astro b/apps/marketing/src/components/LogoCloud.astro
new file mode 100644
index 000000000..b74f2caa4
--- /dev/null
+++ b/apps/marketing/src/components/LogoCloud.astro
@@ -0,0 +1,96 @@
+---
+/**
+ * Logo cloud — social proof showing compatible tools and integrations.
+ */
+---
+
+<section class="logo-cloud" data-reveal>
+  <p class="logo-cloud-label">Works with the tools you already use</p>
+  <div class="logo-cloud-grid" data-reveal-children>
+    <div class="logo-cloud-item">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+      <span>GitHub</span>
+    </div>
+    <div class="logo-cloud-item">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/></svg>
+      <span>VS Code</span>
+    </div>
+    <div class="logo-cloud-item">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+      <span>Claude</span>
+    </div>
+    <div class="logo-cloud-item">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.602 1.5v3.001l-2.602 1.5-2.602-1.5z"/></svg>
+      <span>OpenAI</span>
+    </div>
+    <div class="logo-cloud-item">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M24 22.525H0l12-21.05 12 21.05z"/></svg>
+      <span>Vercel</span>
+    </div>
+    <div class="logo-cloud-item">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="32" height="32"><path d="M4.105 4.105S9.158 1.58 11.684.316a3.079 3.079 0 0 1 1.481-.315c.766.047 1.677.788 1.677.788L24 9.948v9.789h-4.263V24H4.117l-.012-4.263H0v-9.789l4.105-5.843zM8.4 19.737h7.2V12h-7.2v7.737z"/></svg>
+      <span>Terminal</span>
+    </div>
+  </div>
+</section>
+
+<style>
+  .logo-cloud {
+    text-align: center;
+    margin-bottom: var(--kn-landing-section-gap, clamp(5rem, 8vw, 8rem));
+    padding: 2rem 0;
+  }
+
+  .logo-cloud-label {
+    font-size: 0.82rem;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--kn-landing-text-muted, #8a94a4);
+    margin-bottom: 2.5rem;
+  }
+
+  .logo-cloud-grid {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3rem;
+    flex-wrap: wrap;
+  }
+
+  .logo-cloud-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.65rem;
+    color: var(--kn-landing-text-dim, #4a5060);
+    transition: color 0.3s ease, transform 0.3s ease;
+  }
+
+  .logo-cloud-item:hover {
+    color: var(--kn-landing-text-secondary, #c0c8d4);
+    transform: translateY(-2px);
+  }
+
+  .logo-cloud-item svg {
+    width: 2.25rem;
+    height: 2.25rem;
+    opacity: 0.35;
+    transition: opacity 0.3s ease;
+  }
+
+  .logo-cloud-item:hover svg {
+    opacity: 0.7;
+  }
+
+  .logo-cloud-item span {
+    font-size: 0.75rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+  }
+
+  @media (max-width: 720px) {
+    .logo-cloud-grid {
+      gap: 2rem;
+    }
+  }
+</style>
diff --git a/apps/marketing/src/components/StatsBar.astro b/apps/marketing/src/components/StatsBar.astro
new file mode 100644
index 000000000..fc4357fef
--- /dev/null
+++ b/apps/marketing/src/components/StatsBar.astro
@@ -0,0 +1,89 @@
+---
+/**
+ * Stats bar — metrics section for visual credibility.
+ */
+interface Props {
+  metrics: ReadonlyArray<{ value: string; label: string }>;
+}
+
+const { metrics } = Astro.props;
+---
+
+<section class="stats-bar" data-reveal data-reveal-children>
+  {metrics.map((metric) => (
+    <div class="stat-item">
+      <span class="stat-value">{metric.value}</span>
+      <span class="stat-label">{metric.label}</span>
+    </div>
+  ))}
+</section>
+
+<style>
+  .stats-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: var(--kn-landing-section-gap, clamp(5rem, 8vw, 8rem));
+    padding: 2.5rem 2rem;
+    border-radius: 1.5rem;
+    border: 1px solid var(--kn-landing-border, rgba(192, 200, 212, 0.08));
+    background: var(--kn-landing-card-bg, rgba(192, 200, 212, 0.02));
+    backdrop-filter: blur(18px);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 24px 80px rgba(0, 0, 0, 0.2);
+  }
+
+  .stat-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1.5rem;
+    position: relative;
+  }
+
+  .stat-item + .stat-item::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 15%;
+    height: 70%;
+    width: 1px;
+    background: linear-gradient(180deg, transparent, var(--kn-landing-border, rgba(192, 200, 212, 0.08)), transparent);
+  }
+
+  .stat-value {
+    font-size: clamp(2.25rem, 4vw, 3.5rem);
+    font-weight: 700;
+    letter-spacing: -0.04em;
+    line-height: 1;
+    background: linear-gradient(135deg, var(--kn-landing-text, #e8ecf0), var(--kn-landing-accent-bright, #ff4e41));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .stat-label {
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.16em;
+    color: var(--kn-landing-text-muted, #8a94a4);
+    font-weight: 500;
+  }
+
+  @media (max-width: 720px) {
+    .stats-bar {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 2rem;
+      padding: 2rem 1.5rem;
+    }
+
+    .stat-item + .stat-item::before {
+      display: none;
+    }
+  }
+</style>
diff --git a/apps/marketing/src/components/TrustStrip.astro b/apps/marketing/src/components/TrustStrip.astro
index 55fcb6f7a..ed11e8227 100644
--- a/apps/marketing/src/components/TrustStrip.astro
+++ b/apps/marketing/src/components/TrustStrip.astro
@@ -2,19 +2,75 @@
 /**
  * Trust strip — three trust signals below the hero.
  */
+const items = [
+  {
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
+    label: "Made for builders",
+    text: "Designed around real AI coding workflows",
+  },
+  {
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>`,
+    label: "Calm by default",
+    text: "Less context switching, more legible work",
+  },
+  {
+    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
+    label: "Close to the metal",
+    text: "Open source, desktop-aware, release-friendly",
+  },
+];
 ---
 
-<section class="trust-strip" aria-label="Why teams use OK Code" data-reveal>
-  <div class="trust-item kn-card">
-    <span class="trust-label">Made for builders</span>
-    <strong>Designed around real AI coding workflows</strong>
-  </div>
-  <div class="trust-item kn-card">
-    <span class="trust-label">Calm by default</span>
-    <strong>Less context switching, more legible work</strong>
-  </div>
-  <div class="trust-item kn-card">
-    <span class="trust-label">Close to the metal</span>
-    <strong>Open source, desktop-aware, release-friendly</strong>
-  </div>
+<section class="trust-strip" aria-label="Why teams use OK Code" data-reveal data-reveal-children>
+  {items.map((item) => (
+    <div class="trust-item kn-card">
+      <span class="trust-icon" set:html={item.icon} />
+      <span class="trust-label">{item.label}</span>
+      <strong>{item.text}</strong>
+    </div>
+  ))}
 </section>
+
+<style>
+  .trust-item {
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
+  }
+
+  .trust-item::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(180deg, var(--kn-landing-accent, #ca3a29), var(--kn-landing-accent-bright, #ff4e41));
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .trust-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 30px rgba(202, 58, 41, 0.06);
+    border-color: var(--kn-landing-border-hover, rgba(192, 200, 212, 0.16));
+  }
+
+  .trust-item:hover::before {
+    opacity: 1;
+  }
+
+  .trust-icon {
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--kn-landing-accent-bright, #ff4e41);
+    margin-bottom: 0.75rem;
+    opacity: 0.7;
+  }
+
+  .trust-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/apps/marketing/src/components/WorkflowSection.astro b/apps/marketing/src/components/WorkflowSection.astro
index ece7d88f5..d4ece7d81 100644
--- a/apps/marketing/src/components/WorkflowSection.astro
+++ b/apps/marketing/src/components/WorkflowSection.astro
@@ -16,13 +16,59 @@ const { steps } = Astro.props;
     </p>
   </div>
 
-  <div class="workflow-grid workflow-grid--cards">
-    {steps.map((item) => (
+  <div class="workflow-grid workflow-grid--cards" data-reveal-children>
+    {steps.map((item, index) => (
       <article class="workflow-card kn-card">
+        <span class="workflow-step-bg" aria-hidden="true">{item.step}</span>
         <span class="workflow-step">{item.step}</span>
         <h3>{item.title}</h3>
         <p>{item.body}</p>
+        {index < steps.length - 1 && <div class="workflow-connector" aria-hidden="true" />}
       </article>
     ))}
   </div>
 </section>
+
+<style>
+  .workflow-card {
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
+  }
+
+  .workflow-card:hover {
+    transform: translateY(-3px);
+    border-color: var(--kn-landing-border-hover, rgba(192, 200, 212, 0.16));
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+  }
+
+  .workflow-step-bg {
+    position: absolute;
+    top: -0.75rem;
+    right: 0.5rem;
+    font-size: 5.5rem;
+    font-weight: 800;
+    line-height: 1;
+    color: var(--kn-landing-text, #e8ecf0);
+    opacity: 0.03;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .workflow-connector {
+    display: none;
+  }
+
+  @media (min-width: 721px) {
+    .workflow-connector {
+      display: block;
+      position: absolute;
+      top: 50%;
+      right: -0.6rem;
+      width: 1.2rem;
+      height: 1px;
+      background: linear-gradient(90deg, var(--kn-landing-border, rgba(192, 200, 212, 0.08)), transparent);
+      z-index: 2;
+    }
+  }
+</style>
diff --git a/apps/marketing/src/layouts/Layout.astro b/apps/marketing/src/layouts/Layout.astro
index debfbb4d1..562ed7d47 100644
--- a/apps/marketing/src/layouts/Layout.astro
+++ b/apps/marketing/src/layouts/Layout.astro
@@ -52,6 +52,12 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
             <span class="nav-wordmark">OK Code</span>
           </a>
 
+          <button class="kn-nav-toggle" aria-label="Toggle menu" aria-expanded="false">
+            <span class="kn-nav-toggle-bar"></span>
+            <span class="kn-nav-toggle-bar"></span>
+            <span class="kn-nav-toggle-bar"></span>
+          </button>
+
           <div class="kn-nav-links">
             <a href="#features" class="kn-nav-link">Features</a>
             <a href="#surfaces" class="kn-nav-link">Surfaces</a>
@@ -75,21 +81,55 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
       </main>
 
       <footer class="kn-footer">
+        <div class="kn-footer-gradient-line"></div>
         <div class="kn-footer-inner content-wrap">
-          <span class="kn-footer-mark">
-            <img src="/icon.png" alt="" class="footer-icon" width="14" height="14" />
-            OK Code
-          </span>
-          <div class="kn-footer-links">
-            <a href="https://github.com/OpenKnots/okcode" target="_blank" rel="noopener noreferrer">GitHub</a>
-            <a href="https://discord.gg/jn4EGJjrvv" target="_blank" rel="noopener noreferrer">Discord</a>
-            <span>&copy; {new Date().getFullYear()} OpenKnots</span>
+          <div class="kn-footer-grid">
+            <div class="kn-footer-brand">
+              <a href="/" class="kn-footer-mark">
+                <img src="/icon.png" alt="" class="footer-icon" width="20" height="20" />
+                <span>OK Code</span>
+              </a>
+              <p class="kn-footer-tagline">A minimal GUI for coding agents.<br />Web and desktop.</p>
+            </div>
+
+            <div class="kn-footer-col">
+              <h4 class="kn-footer-heading">Product</h4>
+              <ul class="kn-footer-list">
+                <li><a href="#features">Features</a></li>
+                <li><a href="#surfaces">Surfaces</a></li>
+                <li><a href="#themes">Themes</a></li>
+                <li><a href="#faq">FAQ</a></li>
+                <li><a href="#download">Download</a></li>
+              </ul>
+            </div>
+
+            <div class="kn-footer-col">
+              <h4 class="kn-footer-heading">Community</h4>
+              <ul class="kn-footer-list">
+                <li><a href="https://github.com/OpenKnots/okcode" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+                <li><a href="https://discord.gg/jn4EGJjrvv" target="_blank" rel="noopener noreferrer">Discord</a></li>
+              </ul>
+            </div>
+
+            <div class="kn-footer-col">
+              <h4 class="kn-footer-heading">Legal</h4>
+              <ul class="kn-footer-list">
+                <li><a href="#">Privacy</a></li>
+                <li><a href="#">Terms</a></li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="kn-footer-bottom">
+            <span class="kn-footer-copyright">&copy; {new Date().getFullYear()} OpenKnots</span>
+            <a href="#" class="kn-footer-top-link">Back to top &uarr;</a>
           </div>
         </div>
       </footer>
     </div>
 
     <script>
+      /* ── Header scroll state ── */
       const header = document.querySelector("[data-site-header]");
       if (header) {
         const onScroll = () => {
@@ -98,6 +138,81 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
         onScroll();
         window.addEventListener("scroll", onScroll, { passive: true });
       }
+
+      /* ── Scroll-spy for nav links ── */
+      const navLinks = document.querySelectorAll<HTMLAnchorElement>(".kn-nav-link");
+      const spySections = document.querySelectorAll<HTMLElement>("#features, #surfaces, #faq");
+
+      if (spySections.length > 0 && navLinks.length > 0) {
+        const spyObserver = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              const id = entry.target.getAttribute("id");
+              const link = document.querySelector<HTMLAnchorElement>(`.kn-nav-link[href="#${id}"]`);
+              if (link) {
+                link.classList.toggle("is-active", entry.isIntersecting);
+              }
+            });
+          },
+          { rootMargin: "-20% 0px -60% 0px", threshold: 0 }
+        );
+        spySections.forEach((s) => spyObserver.observe(s));
+      }
+
+      /* ── Mobile menu toggle ── */
+      const toggle = document.querySelector<HTMLButtonElement>(".kn-nav-toggle");
+      const navLinksContainer = document.querySelector<HTMLElement>(".kn-nav-links");
+
+      if (toggle && navLinksContainer) {
+        const openMenu = () => {
+          toggle.classList.add("is-open");
+          toggle.setAttribute("aria-expanded", "true");
+          navLinksContainer.classList.add("is-open");
+          document.body.style.overflow = "hidden";
+        };
+
+        const closeMenu = () => {
+          toggle.classList.remove("is-open");
+          toggle.setAttribute("aria-expanded", "false");
+          navLinksContainer.classList.remove("is-open");
+          document.body.style.overflow = "";
+        };
+
+        toggle.addEventListener("click", () => {
+          const isOpen = toggle.classList.contains("is-open");
+          isOpen ? closeMenu() : openMenu();
+        });
+
+        navLinksContainer.querySelectorAll("a").forEach((link) => {
+          link.addEventListener("click", closeMenu);
+        });
+
+        document.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") closeMenu();
+        });
+      }
+
+      /* ── Smooth scroll with offset for sticky header ── */
+      document.querySelectorAll<HTMLAnchorElement>('a[href^="#"]').forEach((anchor) => {
+        anchor.addEventListener("click", (e) => {
+          const href = anchor.getAttribute("href");
+          if (!href || href === "#") return;
+          const target = document.querySelector(href);
+          if (target) {
+            e.preventDefault();
+            const headerHeight = header ? header.getBoundingClientRect().height : 0;
+            const top = target.getBoundingClientRect().top + window.scrollY - headerHeight - 16;
+            window.scrollTo({ top, behavior: "smooth" });
+          }
+        });
+      });
+
+      /* ── Reveal children stagger indices ── */
+      document.querySelectorAll("[data-reveal-children]").forEach((container) => {
+        Array.from(container.children).forEach((child, i) => {
+          (child as HTMLElement).style.setProperty("--reveal-index", String(i));
+        });
+      });
     </script>
   </body>
 </html>
@@ -126,6 +241,7 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     --kn-landing-border: rgba(192, 200, 212, 0.08);
     --kn-landing-border-hover: rgba(192, 200, 212, 0.16);
     --kn-landing-card-bg: rgba(192, 200, 212, 0.02);
+    --kn-landing-card-bg-hover: rgba(192, 200, 212, 0.04);
     --kn-landing-glow-1: rgba(192, 200, 212, 0.07);
     --kn-landing-glow-2: rgba(202, 58, 41, 0.06);
     --kn-landing-star-color: #c0c8d4;
@@ -140,6 +256,9 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     --kn-landing-footer-link-hover: #ff4e41;
     --kn-landing-ico-bg: rgba(192, 200, 212, 0.04);
     --kn-landing-status-green: #00d4aa;
+    --kn-landing-section-gap: clamp(5rem, 8vw, 8rem);
+    --kn-landing-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+    --kn-landing-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 
   * {
@@ -151,6 +270,7 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
   html {
     color-scheme: dark;
     scroll-behavior: smooth;
+    scroll-padding-top: 5rem;
   }
 
   body {
@@ -168,7 +288,7 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     position: fixed;
     inset: 0;
     pointer-events: none;
-    opacity: 0.05;
+    opacity: 0.03;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     z-index: 1;
   }
@@ -224,6 +344,41 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     min-width: 0;
   }
 
+  /* ── Keyframe Animations ── */
+
+  @keyframes kn-star-twinkle {
+    0%, 100% { opacity: 0.12; }
+    50% { opacity: 0.6; }
+  }
+
+  @keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  @keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+  }
+
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* ── Header ── */
+
   .site-header {
     position: sticky;
     top: 0;
@@ -264,6 +419,44 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     box-shadow: 0 0 18px rgba(167, 139, 250, 0.12);
   }
 
+  /* ── Mobile hamburger toggle ── */
+
+  .kn-nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    width: 36px;
+    height: 36px;
+    padding: 6px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    z-index: 25;
+  }
+
+  .kn-nav-toggle-bar {
+    display: block;
+    width: 100%;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--kn-landing-text-secondary);
+    transition: transform 0.3s var(--kn-landing-ease-out-expo), opacity 0.3s ease;
+    transform-origin: center;
+  }
+
+  .kn-nav-toggle.is-open .kn-nav-toggle-bar:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+  .kn-nav-toggle.is-open .kn-nav-toggle-bar:nth-child(2) {
+    opacity: 0;
+  }
+  .kn-nav-toggle.is-open .kn-nav-toggle-bar:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+
+  /* ── Nav Links ── */
+
   .kn-nav-links {
     display: flex;
     align-items: center;
@@ -272,6 +465,7 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
   }
 
   .kn-nav-link {
+    position: relative;
     color: var(--kn-landing-nav-link);
     font-size: 0.84rem;
     transition: color 0.2s ease;
@@ -281,6 +475,22 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     color: var(--kn-landing-text-secondary);
   }
 
+  .kn-nav-link.is-active {
+    color: var(--kn-landing-accent-bright);
+  }
+
+  .kn-nav-link.is-active::after {
+    content: "";
+    position: absolute;
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--kn-landing-accent-bright);
+  }
+
   .kn-nav-signin,
   .hero-button,
   .secondary-button,
@@ -322,6 +532,8 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24), 0 0 24px rgba(202, 58, 41, 0.08);
   }
 
+  /* ── Sections ── */
+
   .hero,
   .trust-strip,
   .feature-grid,
@@ -353,11 +565,6 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     height: 100%;
   }
 
-  @keyframes kn-star-twinkle {
-    0%, 100% { opacity: 0.12; }
-    50% { opacity: 0.6; }
-  }
-
   .kn-star-twinkle {
     animation: kn-star-twinkle 5s ease-in-out infinite;
   }
@@ -377,12 +584,14 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
   .kn-dot { fill: var(--kn-landing-text-secondary); opacity: 0.25; }
   .kn-glow { fill: var(--kn-landing-accent); opacity: 0.06; }
 
+  /* ── Reveal Animations ── */
+
   [data-reveal] {
     opacity: 0;
     transform: translateY(16px);
     transition:
-      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
-      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+      opacity 0.8s var(--kn-landing-ease-out-expo),
+      transform 0.8s var(--kn-landing-ease-out-expo);
     will-change: opacity, transform;
   }
 
@@ -391,12 +600,26 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     transform: translateY(0);
   }
 
+  [data-reveal-children] > * {
+    opacity: 0;
+    transform: translateY(16px);
+    transition: opacity 0.6s var(--kn-landing-ease-out-expo), transform 0.6s var(--kn-landing-ease-out-expo);
+    transition-delay: calc(var(--reveal-index, 0) * 80ms);
+  }
+
+  [data-reveal-children].revealed > * {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* ── Tab Panels ── */
+
   [data-tab-panel] {
     opacity: 0;
     transform: translateY(8px);
     transition:
-      opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
-      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+      opacity 0.35s var(--kn-landing-ease-out-expo),
+      transform 0.35s var(--kn-landing-ease-out-expo);
     position: absolute;
     inset: 0 auto auto 0;
     width: 100%;
@@ -412,6 +635,8 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     visibility: visible;
   }
 
+  /* ── Card System ── */
+
   .kn-card,
   .feature-card,
   .workflow-card,
@@ -425,12 +650,15 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
   .panel,
   .rail,
   .final-cta {
+    position: relative;
+    overflow: hidden;
     background: var(--kn-landing-card-bg);
     border: 1px solid var(--kn-landing-border);
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 0.04),
       0 24px 80px rgba(0, 0, 0, 0.34);
     backdrop-filter: blur(18px);
+    transition: border-color 0.3s ease, box-shadow 0.4s ease, transform 0.3s var(--kn-landing-ease-out-expo);
   }
 
   .kn-card:hover,
@@ -441,9 +669,16 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
   .theme-preview-card:hover,
   .faq-card:hover,
   .trust-item:hover {
+    transform: translateY(-2px);
     border-color: var(--kn-landing-border-hover);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      0 28px 90px rgba(0, 0, 0, 0.38),
+      0 0 24px rgba(202, 58, 41, 0.06);
   }
 
+  /* ── Typography ── */
+
   .eyebrow,
   .hero-pills span,
   .tab-chip,
@@ -496,6 +731,59 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     line-height: 1.7;
   }
 
+  /* ── Gradient Text Utility ── */
+
+  .gradient-text {
+    background: linear-gradient(135deg, var(--kn-landing-text), var(--kn-landing-accent-bright));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* ── Pill Badge ── */
+
+  .kn-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.85rem 0.4rem 0.45rem;
+    border-radius: 999px;
+    border: 1px solid rgba(192, 200, 212, 0.12);
+    background: rgba(192, 200, 212, 0.04);
+    backdrop-filter: blur(18px);
+    font-size: 0.84rem;
+    color: var(--kn-landing-text-secondary);
+    transition: border-color 0.3s ease, background 0.3s ease;
+  }
+
+  .kn-pill:hover {
+    border-color: rgba(192, 200, 212, 0.2);
+    background: rgba(192, 200, 212, 0.06);
+  }
+
+  .kn-pill-badge {
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    background: linear-gradient(135deg, var(--kn-landing-accent), var(--kn-landing-accent-bright));
+    color: #fff;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .kn-pill-arrow {
+    opacity: 0.5;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+  }
+
+  .kn-pill:hover .kn-pill-arrow {
+    transform: translateX(2px);
+    opacity: 0.8;
+  }
+
+  /* ── Hero Button ── */
+
   .hero-button {
     position: relative;
     display: inline-flex;
@@ -539,14 +827,7 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     transform: rotate(24deg) translateX(1.4rem);
   }
 
-  .kn-footer {
-    position: relative;
-    z-index: 1;
-    border-top: 1px solid var(--kn-landing-border);
-    margin-top: 2rem;
-    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
-    backdrop-filter: blur(18px);
-  }
+  /* ── Section Divider ── */
 
   .section-divider {
     position: relative;
@@ -555,7 +836,7 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     justify-content: center;
     gap: 1rem;
     width: 100%;
-    margin: 0 auto 4rem;
+    margin: 0 auto var(--kn-landing-section-gap);
     color: rgba(192, 200, 212, 0.34);
   }
 
@@ -575,62 +856,196 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     filter: drop-shadow(0 0 16px rgba(202, 58, 41, 0.12));
   }
 
+  /* ── Footer ── */
+
+  .kn-footer {
+    position: relative;
+    z-index: 1;
+    margin-top: 2rem;
+    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
+    backdrop-filter: blur(18px);
+  }
+
+  .kn-footer-gradient-line {
+    height: 1px;
+    width: 100%;
+    background: linear-gradient(90deg, transparent, var(--kn-landing-accent), transparent);
+  }
+
   .kn-footer-inner {
+    padding: 4rem var(--marketing-pad-x) 2rem;
+  }
+
+  .kn-footer-grid {
+    display: grid;
+    grid-template-columns: 2fr repeat(3, 1fr);
+    gap: 3rem;
+  }
+
+  .kn-footer-brand {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
     gap: 1rem;
-    padding: 2rem var(--marketing-pad-x);
   }
 
   .kn-footer-mark {
     display: inline-flex;
     align-items: center;
-    gap: 0.55rem;
+    gap: 0.65rem;
+    color: var(--kn-landing-text);
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+
+  .kn-footer-tagline {
+    font-size: 0.84rem;
     color: var(--kn-landing-text-muted);
-    font-size: 0.78rem;
-    font-weight: 500;
+    line-height: 1.6;
+  }
+
+  .kn-footer-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
+  }
+
+  .kn-footer-heading {
+    text-transform: uppercase;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    color: var(--kn-landing-text-muted);
+    margin-bottom: 0.25rem;
   }
 
-  .kn-footer-links {
+  .kn-footer-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .kn-footer-list a {
+    position: relative;
+    display: inline-block;
+    font-size: 0.84rem;
+    color: var(--kn-landing-text-dim);
+    transition: color 0.2s ease;
+  }
+
+  .kn-footer-list a::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background: var(--kn-landing-accent-bright);
+    transition: width 0.3s var(--kn-landing-ease-out-expo);
+  }
+
+  .kn-footer-list a:hover {
+    color: var(--kn-landing-text-secondary);
+  }
+
+  .kn-footer-list a:hover::after {
+    width: 100%;
+  }
+
+  .kn-footer-bottom {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-    font-size: 0.82rem;
+    justify-content: space-between;
+    margin-top: 3rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--kn-landing-border);
+  }
+
+  .kn-footer-copyright {
+    font-size: 0.78rem;
     color: var(--kn-landing-text-dim);
   }
 
-  .kn-footer-links a {
-    color: var(--kn-landing-footer-link);
+  .kn-footer-top-link {
+    font-size: 0.78rem;
+    color: var(--kn-landing-text-muted);
     transition: color 0.2s ease;
   }
 
-  .kn-footer-links a:hover {
-    color: var(--kn-landing-footer-link-hover);
+  .kn-footer-top-link:hover {
+    color: var(--kn-landing-accent-bright);
   }
 
+  /* ── Mobile ── */
+
   @media (max-width: 720px) {
-    .kn-nav-inner,
-    .kn-footer-inner {
+    .kn-nav-toggle {
+      display: flex;
+    }
+
+    .kn-nav-links {
+      position: fixed;
+      inset: 0;
+      z-index: 22;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 2rem;
+      background: rgba(5, 5, 7, 0.96);
+      backdrop-filter: blur(24px);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.3s var(--kn-landing-ease-out-expo), visibility 0.3s;
+    }
+
+    .kn-nav-links.is-open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .kn-nav-links a {
+      font-size: 1.5rem;
+      opacity: 0;
+      transform: translateY(16px);
+      transition: opacity 0.4s var(--kn-landing-ease-out-expo), transform 0.4s var(--kn-landing-ease-out-expo), color 0.2s ease;
+    }
+
+    .kn-nav-links.is-open a:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
+    .kn-nav-links.is-open a:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.14s; }
+    .kn-nav-links.is-open a:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.20s; }
+    .kn-nav-links.is-open a:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
+
+    .kn-nav-inner {
       padding-inline: var(--marketing-pad-x);
     }
 
-    .kn-nav-inner,
-    .kn-footer-inner {
+    .kn-footer-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 2.5rem;
+    }
+
+    .kn-footer-brand {
+      grid-column: 1 / -1;
+    }
+
+    .kn-footer-bottom {
       flex-direction: column;
       align-items: flex-start;
+      gap: 0.75rem;
     }
+  }
 
-    .kn-nav-links,
-    .kn-footer-links {
-      width: 100%;
+  @media (max-width: 480px) {
+    .kn-footer-grid {
+      grid-template-columns: 1fr;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     [data-reveal],
+    [data-reveal-children] > *,
     [data-tab-panel],
     .hero-button,
     .secondary-button,
@@ -638,7 +1053,9 @@ const ogImage = Astro.site ? new URL(ogImagePath, Astro.site).href : null;
     .spotlight-item,
     .faq-trigger,
     .hero-button-shine,
-    .kn-star-twinkle {
+    .kn-star-twinkle,
+    .kn-nav-toggle-bar,
+    .kn-nav-links a {
       transition: none !important;
       animation: none !important;
       transform: none !important;
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 28436e5c2..db9a83c98 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -1,7 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Hero from "../components/Hero.astro";
+import LogoCloud from "../components/LogoCloud.astro";
 import TrustStrip from "../components/TrustStrip.astro";
+import StatsBar from "../components/StatsBar.astro";
 import FeatureGrid from "../components/FeatureGrid.astro";
 import WorkflowSection from "../components/WorkflowSection.astro";
 import CoreSurfaces from "../components/CoreSurfaces.astro";
@@ -9,6 +11,13 @@ import ThemeShowcase from "../components/ThemeShowcase.astro";
 import FaqSection from "../components/FaqSection.astro";
 import FinalCta from "../components/FinalCta.astro";
 
+const metrics = [
+  { value: "100%", label: "Open Source" },
+  { value: "5", label: "Core Surfaces" },
+  { value: "3", label: "Premium Themes" },
+  { value: "<1s", label: "Thread Restore" },
+] as const;
+
 const description =
   "OK Code is the premium dark workspace for AI coding flows — persistent threads, diffs, preview, PR review, and release actions in one calm desktop + web product.";
 

From d081f4494c586a5caec1aa0720c0379320c0fc44 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 31 Mar 2026 23:05:46 -0500
Subject: [PATCH 3/4] Refine landing page spacing and section order

- Add logo cloud and stats bar to the homepage flow
- Increase vertical spacing between landing sections
- Remove the decorative divider between FAQ and CTA
---
 apps/marketing/src/pages/index.astro | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index db9a83c98..958744556 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -179,21 +179,15 @@ const faqs = [
 
 <Layout title="OK Code" {description}>
   <Hero />
+  <LogoCloud />
   <TrustStrip />
+  <StatsBar metrics={metrics} />
   <FeatureGrid pillars={pillars} />
   <WorkflowSection steps={workflowSteps} />
   <CoreSurfaces surfaces={surfaces} />
   <ThemeShowcase themes={themes} />
   <FaqSection faqs={faqs} />
   <FinalCta />
-  <div class="section-divider" aria-hidden="true">
-    <svg viewBox="0 0 32 32" fill="none">
-      <path d="M8 16 C8 10, 14 8, 16 14 S24 10, 24 16" stroke="currentColor" stroke-width="1" />
-      <path d="M16 8 C10 8, 8 14, 14 16 S10 24, 16 24" stroke="var(--kn-landing-accent)" stroke-width="1" />
-      <path d="M24 16 C24 22, 18 24, 16 18 S8 22, 8 16" stroke="currentColor" stroke-width="0.85" opacity="0.7" />
-      <circle cx="16" cy="16" r="1.4" fill="var(--kn-landing-accent)" opacity="0.5" />
-    </svg>
-  </div>
 </Layout>
 
 <script>
@@ -453,8 +447,8 @@ const faqs = [
     gap: 2rem;
     align-items: center;
     justify-items: center;
-    margin-bottom: 2.75rem;
-    padding-top: clamp(1rem, 3vw, 2.25rem);
+    margin-bottom: clamp(4rem, 8vw, 7rem);
+    padding-top: clamp(3rem, 8vw, 6rem);
   }
 
   :global(.hero-copy) {
@@ -979,7 +973,7 @@ const faqs = [
 
   :global(.trust-strip) {
     gap: 1rem;
-    margin-bottom: 4rem;
+    margin-bottom: var(--kn-landing-section-gap, clamp(5rem, 8vw, 8rem));
     flex-wrap: wrap;
   }
 
@@ -1019,7 +1013,7 @@ const faqs = [
   }
 
   :global(.feature-grid) {
-    margin-bottom: 4rem;
+    margin-bottom: var(--kn-landing-section-gap, clamp(5rem, 8vw, 8rem));
   }
 
   :global(.feature-card),
@@ -1048,7 +1042,7 @@ const faqs = [
 
   :global(.workflow-section),
   :global(.faq-section) {
-    margin-bottom: 4rem;
+    margin-bottom: var(--kn-landing-section-gap, clamp(5rem, 8vw, 8rem));
   }
 
   :global(.section-heading),
@@ -1087,9 +1081,9 @@ const faqs = [
   :global(.spotlight),
   :global(.theme-section) {
     grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
-    gap: 1.25rem;
+    gap: 2rem;
     align-items: start;
-    margin-bottom: 4rem;
+    margin-bottom: var(--kn-landing-section-gap, clamp(5rem, 8vw, 8rem));
   }
 
   :global(.spotlight-copy),

From facc837ac4e5b04bfeec99b9b4a7aff453838867 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 31 Mar 2026 23:16:24 -0500
Subject: [PATCH 4/4] Add marketing site improvement audit

- Document production-readiness gaps and recommendations
- Cover accessibility, design, performance, SEO, and architecture
---
 apps/marketing/MARKETING_IMPROVEMENTS.md | 1009 ++++++++++++++++++++++
 1 file changed, 1009 insertions(+)
 create mode 100644 apps/marketing/MARKETING_IMPROVEMENTS.md

diff --git a/apps/marketing/MARKETING_IMPROVEMENTS.md b/apps/marketing/MARKETING_IMPROVEMENTS.md
new file mode 100644
index 000000000..fdd722d4c
--- /dev/null
+++ b/apps/marketing/MARKETING_IMPROVEMENTS.md
@@ -0,0 +1,1009 @@
+# Marketing Page Improvement Recommendations
+
+Comprehensive audit and recommendations to bring the OK Code marketing site to production-level quality comparable to OpenAI, Vercel, and Linear marketing pages.
+
+---
+
+## Table of Contents
+
+1. [Critical Issues](#1-critical-issues)
+2. [Accessibility](#2-accessibility)
+3. [Visual Design & Polish](#3-visual-design--polish)
+4. [Animation & Interaction](#4-animation--interaction)
+5. [Layout & Spacing](#5-layout--spacing)
+6. [Responsive Design](#6-responsive-design)
+7. [Performance](#7-performance)
+8. [SEO & Meta](#8-seo--meta)
+9. [Content & Copy](#9-content--copy)
+10. [Architecture & Code Quality](#10-architecture--code-quality)
+11. [New Sections & Features](#11-new-sections--features)
+12. [Reference Benchmarks](#12-reference-benchmarks)
+
+---
+
+## 1. Critical Issues
+
+These must be fixed before considering the page production-ready.
+
+### 1.1 Missing Focus Indicators (WCAG 2.1 AA Failure)
+
+**Problem:** Zero `:focus-visible` styles exist on any interactive element -- buttons, links, tabs, FAQ triggers, nav links, or form elements. This is a WCAG 2.1 Level AA violation and makes the site unusable for keyboard-only users.
+
+**Affected elements:**
+
+- `.hero-button`, `.secondary-button`
+- `.kn-nav-link`, `.kn-nav-signin`
+- `.tab-chip`, `.spotlight-item`
+- `.faq-trigger`
+- `.kn-pill` (hero badge link)
+- All footer links
+- Logo cloud items (if made focusable)
+
+**Fix:** Add a global focus-visible rule in Layout.astro:
+
+```css
+:focus-visible {
+  outline: 2px solid var(--kn-landing-accent-bright);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Subtle ring for buttons/interactive elements */
+.hero-button:focus-visible,
+.secondary-button:focus-visible,
+.tab-chip:focus-visible,
+.spotlight-item:focus-visible,
+.faq-trigger:focus-visible {
+  outline: 2px solid var(--kn-landing-accent-bright);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(255, 78, 65, 0.15);
+}
+```
+
+### 1.2 Duplicate / Conflicting Style Definitions
+
+**Problem:** Animation and component styles are defined in both `Layout.astro` and `index.astro` with conflicting values. Whichever loads last wins, creating unpredictable behavior.
+
+**Specific conflicts:**
+| Style | Layout.astro | index.astro | Delta |
+|-------|-------------|-------------|-------|
+| `[data-reveal]` transition | `0.8s` | `0.7s` | 0.1s mismatch |
+| `.hero-button` styles | Full definition | Full redefinition | Competing specificity |
+| `.hero-button-shine` | Defined | Redefined | Duplicate |
+| `.section-title` | Defined | Redefined | Duplicate |
+| Card shared styles | Defined in Layout | Overridden in index | Cascading conflicts |
+
+**Fix:** Establish a single source of truth:
+
+- Layout.astro owns: CSS variables, base resets, nav, footer, card base, reveal system, utility classes
+- index.astro owns: page-specific layout (hero layout, grid arrangements, section spacing)
+- Components own: their scoped hover/interaction styles
+
+### 1.3 Hardcoded FAQ Max-Height
+
+**Problem:** The first FAQ panel has `style="max-height: 220px"` hardcoded inline. If content exceeds 220px (e.g., longer answers, larger font size, narrow viewport), it will be clipped with no scroll.
+
+**Fix:** Use `scrollHeight` calculation on mount, or switch to CSS `grid-template-rows: 0fr / 1fr` animation pattern which naturally sizes to content:
+
+```css
+.faq-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.35s ease;
+}
+.faq-item[data-open="true"] .faq-panel {
+  grid-template-rows: 1fr;
+}
+.faq-panel > div {
+  overflow: hidden;
+}
+```
+
+---
+
+## 2. Accessibility
+
+### 2.1 Mobile Menu Focus Trap
+
+**Problem:** When the mobile hamburger menu opens, keyboard focus is not trapped inside the overlay. Users can Tab into content behind the menu.
+
+**Fix:** Implement a focus trap that cycles between the first and last focusable element in the menu. Close on Escape (already implemented) and restore focus to the trigger button on close.
+
+### 2.2 Icon-Only Elements Missing Labels
+
+**Problem:** Several SVG icons serve as the sole content of interactive or informational elements but lack `aria-label`:
+
+- Trust strip icons (decorative only -- acceptable since text follows)
+- Logo cloud items -- SVGs have no accessible name
+- Mobile hamburger button -- check that `aria-label="Menu"` is present
+- Feature grid icons -- decorative, but `kn-ico-wrap` has no role
+
+**Fix for LogoCloud:**
+
+```html
+<div class="logo-cloud-item" role="img" aria-label="GitHub">
+  <svg aria-hidden="true">...</svg>
+  <span>GitHub</span>
+</div>
+```
+
+### 2.3 Color-Only Differentiation
+
+**Problem:** Feature grid cards use different icon colors (red, cyan, yellow) as the only visual differentiator between cards. This fails WCAG 1.4.1 (Use of Color).
+
+**Fix:** The eyebrow text already differentiates semantically. Add a subtle visual indicator beyond color -- e.g., different icon backgrounds or border accents that also vary in lightness/shape.
+
+### 2.4 Stats Bar Semantic Structure
+
+**Problem:** Stats values/labels use plain `<span>` elements with no semantic meaning. Screen readers won't understand the relationship between "100%" and "Open Source".
+
+**Fix:** Use a description list:
+
+```html
+<dl class="stats-bar">
+  <div class="stat-item">
+    <dt class="stat-label">Open Source</dt>
+    <dd class="stat-value">100%</dd>
+  </div>
+</dl>
+```
+
+### 2.5 Reduced Motion Coverage
+
+**Problem:** `prefers-reduced-motion` rules exist in Layout.astro and index.astro but don't cover:
+
+- Background.astro mesh orb animations
+- Hero mesh blob floating
+- Final CTA orb animations
+- Button shimmer effects
+- Star twinkling (partially covered)
+
+**Fix:** Add a global catch-all in Layout.astro and specific overrides in components:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## 3. Visual Design & Polish
+
+### 3.1 Add a Video or Animated Product Demo
+
+**What OpenAI/Vercel do:** Both feature prominent hero-area product demos -- either a looping video, an interactive demo, or an animated screenshot walkthrough. The current OK Code hero has text + icon only with no product visual.
+
+**Recommendation:** Add an autoplay muted video or animated sequence below the hero tagline showing the actual product:
+
+- A 10-15 second loop showing: opening a thread, seeing a diff, previewing, and reviewing
+- Wrapped in the existing `glass-stage` chrome (already styled in index.astro but unused)
+- Lazy-loaded below the fold with a poster frame
+- Fallback to a static screenshot for `prefers-reduced-motion`
+
+### 3.2 Typography Refinement
+
+**Current gaps vs. premium benchmarks:**
+
+- Tagline size maxes at `6.2rem` -- Vercel uses `5.5rem` but with tighter tracking and bolder weight. Consider testing `font-weight: 700` (currently not set, inherits `400`)
+- Section titles at `clamp(2rem, 3vw, 3.15rem)` -- could push to `clamp(2.2rem, 3.5vw, 3.75rem)` for more dramatic hierarchy
+- Body text line-height at `1.7` is generous -- OpenAI uses `1.6`. Test reducing slightly for density
+- Missing font-weight variation: headings don't declare `font-weight` explicitly, relying on `<strong>` or browser defaults
+
+**Recommendations:**
+
+```css
+.tagline {
+  font-weight: 700;
+}
+.section-title {
+  font-weight: 650;
+  font-size: clamp(2.2rem, 3.5vw, 3.75rem);
+}
+.section-body {
+  line-height: 1.6;
+}
+```
+
+### 3.3 Card Glass Effect Refinement
+
+**Current:** Cards use `backdrop-filter: blur(18px)` uniformly. Premium sites vary the glass intensity by section importance.
+
+**Recommendation:**
+
+- Hero card/CTA: `blur(24px) saturate(180%)`
+- Feature/workflow cards: `blur(12px) saturate(140%)`
+- FAQ/minor cards: `blur(8px)`
+- Add `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03)` for an inner light edge
+
+### 3.4 Gradient Border Effects on Key Cards
+
+**What Linear/Vercel do:** Animated gradient borders on featured cards using `@property` for animatable CSS custom properties.
+
+**Recommendation:** Add gradient borders to the hero mark, feature cards, and CTA section:
+
+```css
+@property --border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.feature-card {
+  border: 1px solid transparent;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-image:
+    linear-gradient(var(--kn-landing-card-bg), var(--kn-landing-card-bg)),
+    conic-gradient(
+      from var(--border-angle),
+      transparent 60%,
+      var(--kn-landing-accent) 80%,
+      transparent 100%
+    );
+  animation: rotate-border 6s linear infinite;
+}
+
+@keyframes rotate-border {
+  to {
+    --border-angle: 360deg;
+  }
+}
+```
+
+### 3.5 Noise Texture Refinement
+
+**Current:** Single noise overlay at `0.03` opacity. Barely visible.
+
+**Recommendation:** Add a second finer-grain noise layer with `mix-blend-mode: overlay` for more natural integration:
+
+```css
+body::after {
+  /* existing noise */
+  mix-blend-mode: soft-light;
+  opacity: 0.04;
+}
+body::before {
+  /* second layer: finer grain */
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.02;
+  background-image: url("data:image/svg+xml,..."); /* higher baseFrequency */
+  mix-blend-mode: overlay;
+  z-index: 1;
+}
+```
+
+### 3.6 Button Polish
+
+**Current gaps:**
+
+- Primary button uses accent red gradient but lacks "depth" compared to Vercel's buttons
+- No active/pressed state (`:active`)
+- Shimmer runs continuously -- should only trigger on hover or on a slow interval
+
+**Recommendations:**
+
+```css
+.hero-button:active {
+  transform: translateY(0) scale(0.98);
+  box-shadow: 0 6px 24px rgba(202, 58, 41, 0.15);
+}
+
+/* Shimmer only on hover, not continuous */
+.hero-button-shimmer {
+  animation: none;
+}
+.hero-button:hover .hero-button-shimmer {
+  animation: shimmer 0.6s ease forwards;
+}
+```
+
+---
+
+## 4. Animation & Interaction
+
+### 4.1 Scroll-Linked Progress Indicator
+
+**What Vercel does:** A thin progress bar at the very top of the viewport that fills as users scroll.
+
+**Implementation:**
+
+```css
+.scroll-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--kn-landing-accent), var(--kn-landing-accent-bright));
+  z-index: 100;
+  transform-origin: left;
+  transition: none;
+}
+```
+
+```js
+window.addEventListener(
+  "scroll",
+  () => {
+    const pct = window.scrollY / (document.body.scrollHeight - window.innerHeight);
+    bar.style.transform = `scaleX(${pct})`;
+  },
+  { passive: true },
+);
+```
+
+### 4.2 Section Entrance Animations Should Be More Varied
+
+**Current:** Every section uses the same `translateY(16px) + opacity` fade-in-up. This becomes monotonous.
+
+**Recommendation:** Vary the entrance animation by section type:
+
+- Hero: `scale(0.96)` + fade (expand in)
+- Trust strip: Stagger left-to-right with `translateX(-20px)` per item
+- Feature grid: Each card fades from its own direction (left, bottom, right)
+- Workflow: Sequential slide-in from left
+- Spotlight: Split entrance -- copy slides from left, panels from right
+- Theme: Tabs fade in then preview scales up
+- FAQ: Gentle fade only (no transform) since it's a reading section
+- CTA: `scale(0.98)` + fade (subtle zoom)
+
+### 4.3 Parallax-Light Effect on Hero
+
+**What OpenAI does:** Subtle parallax on background elements as the user scrolls the hero section.
+
+**Recommendation:** Apply `transform: translateY(calc(var(--scroll) * -0.3))` to the hero mesh blobs, driven by scroll position. Use `requestAnimationFrame` for performance:
+
+```js
+let ticking = false;
+window.addEventListener(
+  "scroll",
+  () => {
+    if (!ticking) {
+      requestAnimationFrame(() => {
+        document.documentElement.style.setProperty("--scroll", window.scrollY);
+        ticking = false;
+      });
+      ticking = true;
+    }
+  },
+  { passive: true },
+);
+```
+
+### 4.4 Cursor-Follow Glow Effect
+
+**What Linear does:** A subtle glow that follows the mouse cursor on card hover.
+
+**Recommendation:** Add to feature cards and workflow cards:
+
+```js
+card.addEventListener("mousemove", (e) => {
+  const rect = card.getBoundingClientRect();
+  card.style.setProperty("--mouse-x", `${e.clientX - rect.left}px`);
+  card.style.setProperty("--mouse-y", `${e.clientY - rect.top}px`);
+});
+```
+
+```css
+.feature-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.3s;
+  background: radial-gradient(
+    400px circle at var(--mouse-x) var(--mouse-y),
+    rgba(255, 255, 255, 0.04),
+    transparent 40%
+  );
+}
+.feature-card:hover::after {
+  opacity: 1;
+}
+```
+
+### 4.5 Tab Transition Enhancement
+
+**Current:** Tab panels use a simple `opacity + translateY(6px)` crossfade. Feels basic.
+
+**Recommendation:** Add a subtle scale and blur transition:
+
+```css
+[data-tab-panel] {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+  filter: blur(2px);
+  transition:
+    opacity 0.4s ease,
+    transform 0.4s ease,
+    filter 0.4s ease;
+}
+[data-tab-panel][data-active="true"] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  filter: blur(0);
+}
+```
+
+### 4.6 Nav Link Hover Underline
+
+**What Vercel/Linear do:** Nav links get a subtle animated underline on hover.
+
+```css
+.kn-nav-link::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 0;
+  height: 1px;
+  background: var(--kn-landing-accent);
+  transition: width 0.3s ease;
+}
+.kn-nav-link:hover::after {
+  width: 100%;
+}
+```
+
+---
+
+## 5. Layout & Spacing
+
+### 5.1 Increase Section Vertical Spacing
+
+**Current:** Most sections use `4rem` margin-bottom (some now upgraded to `var(--kn-landing-section-gap)`).
+
+**Recommendation:** Ensure ALL sections use the CSS variable, and increase the clamp:
+
+```css
+--kn-landing-section-gap: clamp(6rem, 10vw, 10rem);
+```
+
+Premium sites like Vercel use 120-160px between major sections. Current 4rem = 64px is too tight.
+
+### 5.2 Content Width Constraints
+
+**Current:** `--marketing-content-max: 1680px` -- this is very wide. On ultra-wide monitors, text lines become too long for comfortable reading.
+
+**Recommendation:**
+
+- Max content width: `1280px` (matches Vercel)
+- Text content max: `680px` for paragraphs (optimal reading width)
+- Full-bleed sections: background extends to edges, content stays constrained
+
+```css
+--marketing-content-max: 1280px;
+--marketing-text-max: 680px;
+
+.section-body,
+.subtagline,
+.final-cta p {
+  max-width: var(--marketing-text-max);
+}
+```
+
+### 5.3 Card Padding Increase
+
+**Current:** Cards use `1.35rem` padding. This feels cramped compared to premium sites.
+
+**Recommendation:** Increase to `1.75rem` on desktop, `1.35rem` on mobile:
+
+```css
+.feature-card,
+.workflow-card,
+.spotlight-panel {
+  padding: clamp(1.35rem, 2vw, 1.75rem);
+}
+```
+
+### 5.4 Hero Vertical Rhythm
+
+**Current:** Hero padding-top is `clamp(3rem, 8vw, 6rem)` and margin-bottom is `clamp(4rem, 8vw, 7rem)`.
+
+**Recommendation:** Push further for dramatic impact:
+
+```css
+.hero {
+  padding-top: clamp(4rem, 12vw, 8rem);
+  margin-bottom: clamp(5rem, 10vw, 9rem);
+}
+```
+
+---
+
+## 6. Responsive Design
+
+### 6.1 Standardize Breakpoints
+
+**Current inconsistency:**
+
+- Layout.astro: `720px`, `480px`
+- index.astro: `1100px`, `720px`
+- download.astro: `640px`
+
+**Recommendation:** Adopt a consistent breakpoint system:
+
+```css
+/* Breakpoints (add as CSS custom media when Astro supports it) */
+/* sm: 480px   -- small mobile */
+/* md: 768px   -- tablet portrait */
+/* lg: 1024px  -- tablet landscape / small desktop */
+/* xl: 1280px  -- desktop */
+/* 2xl: 1536px -- large desktop */
+```
+
+### 6.2 Tablet-Specific Layouts
+
+**Problem:** The site jumps from desktop (3-4 columns) directly to mobile (1 column) at 1100px with no intermediate state. Tablets get a broken layout.
+
+**Recommendation:**
+
+```css
+/* Tablet: 2-column layouts */
+@media (max-width: 1024px) and (min-width: 769px) {
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .workflow-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .spotlight,
+  .theme-section {
+    grid-template-columns: 1fr;
+  }
+}
+```
+
+### 6.3 Mobile Typography Scale
+
+**Problem:** Large headings on mobile could be tighter. The `clamp()` functions work but haven't been tuned for the smallest screens.
+
+**Recommendation:**
+
+```css
+@media (max-width: 480px) {
+  .tagline {
+    font-size: 2.6rem;
+    letter-spacing: -0.05em;
+  }
+  .section-title {
+    font-size: 1.75rem;
+  }
+  .final-cta h2 {
+    font-size: 1.85rem;
+  }
+}
+```
+
+### 6.4 Touch Target Sizes
+
+**Problem:** Some interactive elements may be smaller than the 44x44px minimum recommended touch target.
+
+**Recommendation:** Audit and ensure:
+
+- Nav links: `min-height: 44px; padding: 0.75rem 1rem;`
+- Tab chips: `min-height: 44px;`
+- FAQ triggers: Already 44px+ (good)
+- Footer links: Add padding for touch
+
+---
+
+## 7. Performance
+
+### 7.1 Background SVG Optimization
+
+**Problem:** Background.astro renders 220 SVG circles + 13 path elements in a fixed-position container that scrolls with the page. This causes paint thrashing on every scroll event.
+
+**Recommendations:**
+
+- Add `will-change: transform` to `.kn-stars` and `.kn-threads`
+- Use `contain: strict` on the background container
+- Consider converting star field to a static PNG/WebP with CSS animation for the twinkle subset
+- Reduce star count to 150 (many are invisible at `opacity: 0.12`)
+
+### 7.2 Image Optimization
+
+**Problem:** `icon.png` is loaded unoptimized in multiple sizes (88x88 hero, 28x28 nav, 14x14 footer) without srcset, lazy loading, or format optimization.
+
+**Recommendation:**
+
+- Install `@astrojs/image` or use Astro's built-in `<Image>` component
+- Generate WebP/AVIF variants
+- Add `loading="lazy"` to all images below the fold
+- Use `fetchpriority="high"` on the hero icon
+- Create properly sized variants (no serving 88px image at 14px)
+
+### 7.3 Font Loading Strategy
+
+**Problem:** DM Sans Variable is imported but no font-display strategy is set. This may cause FOIT (Flash of Invisible Text).
+
+**Recommendation:**
+
+```css
+@font-face {
+  font-family: "DM Sans Variable";
+  font-display: swap;
+  /* ... */
+}
+```
+
+Or preload the font in the `<head>`:
+
+```html
+<link rel="preload" href="/fonts/dm-sans-variable.woff2" as="font" type="font/woff2" crossorigin />
+```
+
+### 7.4 CSS Containment
+
+**Current:** `content-visibility: auto` applied to some below-fold sections but not consistently.
+
+**Recommendation:** Apply to all below-fold sections and add proper `contain-intrinsic-size`:
+
+```css
+.trust-strip,
+.feature-grid,
+.workflow-section,
+.spotlight,
+.theme-section,
+.faq-section,
+.final-cta,
+.logo-cloud,
+.stats-bar {
+  content-visibility: auto;
+  contain-intrinsic-block-size: auto 500px;
+}
+```
+
+### 7.5 Reduce Animation Overhead
+
+**Problem:** Multiple `blur(60-100px)` filters on animated elements (mesh orbs, hero blobs, CTA orbs) are GPU-intensive and may cause frame drops on low-end devices.
+
+**Recommendation:**
+
+- Use `@media (prefers-reduced-motion: no-preference)` to only show blobs when motion is OK
+- Reduce blur radius: 100px -> 60px on background mesh, 80px -> 50px on hero blobs
+- Add `will-change: transform` to animated blob elements
+- Consider using CSS `background-image` radial gradients instead of blurred elements
+
+---
+
+## 8. SEO & Meta
+
+### 8.1 Structured Data (JSON-LD)
+
+**Problem:** No structured data markup. Search engines can't understand the product type or organization.
+
+**Recommendation:** Add to Layout.astro `<head>`:
+
+```html
+<script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    "name": "OK Code",
+    "applicationCategory": "DeveloperApplication",
+    "operatingSystem": "macOS, Windows, Linux",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD"
+    },
+    "description": "A premium workspace for AI coding flows.",
+    "url": "https://okcode.dev",
+    "author": {
+      "@type": "Organization",
+      "name": "OpenKnots"
+    }
+  }
+</script>
+```
+
+### 8.2 Open Graph Enhancements
+
+**Current:** OG image defaults to `/icon.png` (a small app icon). Not ideal for social sharing.
+
+**Recommendation:**
+
+- Create a dedicated 1200x630px OG image showing the product UI
+- Add `og:site_name`, `og:locale`
+- Add Twitter-specific card size (`twitter:card: summary_large_image` -- already present, good)
+
+### 8.3 Sitemap
+
+**Problem:** No sitemap generated.
+
+**Recommendation:** Install `@astrojs/sitemap`:
+
+```js
+// astro.config.mjs
+import sitemap from "@astrojs/sitemap";
+export default defineConfig({
+  integrations: [sitemap()],
+  site: process.env.PUBLIC_SITE_URL,
+});
+```
+
+### 8.4 Canonical URLs
+
+**Current:** Canonical URL only set when `Astro.site` is available (requires `PUBLIC_SITE_URL` env var). In development, no canonical is set.
+
+**Recommendation:** Always set a canonical, even in dev:
+
+```js
+const canonical = Astro.site
+  ? new URL(Astro.url.pathname, Astro.site).href
+  : `https://okcode.dev${Astro.url.pathname}`;
+```
+
+### 8.5 Heading Hierarchy
+
+**Problem:** Multiple pages may have inconsistent heading levels since components define their own `<h2>`, `<h3>` tags independently.
+
+**Recommendation:** Audit heading hierarchy per page:
+
+- `<h1>`: Only the hero tagline (one per page)
+- `<h2>`: Section titles (Features, Workflow, Surfaces, Themes, FAQ, CTA)
+- `<h3>`: Within sections (feature card titles, workflow step titles, FAQ questions)
+
+---
+
+## 9. Content & Copy
+
+### 9.1 Hero Tagline A/B Testing Opportunities
+
+**Current:** "The beautiful workspace for shipping with AI."
+
+**Alternative test candidates:**
+
+- "Ship with AI. Stay in flow." (shorter, more action-oriented)
+- "One workspace for the entire AI coding loop." (benefit-focused)
+- "Chat. Diff. Preview. Ship." (feature-list cadence, like Vercel's style)
+
+### 9.2 Social Proof
+
+**Current:** LogoCloud shows "Works with the tools you already use" with generic tool icons. This is weak social proof compared to what premium sites show.
+
+**Stronger alternatives:**
+
+- GitHub star count (dynamic, auto-updating)
+- "Used by X developers" (if metrics available)
+- Testimonial quotes from real users
+- "Featured in" press/blog logos
+- Community size (Discord member count)
+
+### 9.3 Comparison Section
+
+**What competitors show:** A "Why OK Code vs. X" comparison table is a high-conversion element.
+
+**Recommendation:** Add a comparison section after the workflow section:
+
+```
+| Feature              | OK Code | Terminal AI | IDE Plugins |
+|---------------------|---------|-------------|-------------|
+| Persistent threads  | Yes     | No          | Partial     |
+| Built-in diffs      | Yes     | No          | No          |
+| Local preview       | Yes     | No          | Partial     |
+| PR review surface   | Yes     | No          | No          |
+| Open source         | Yes     | Varies      | No          |
+```
+
+### 9.4 CTA Copy Refinement
+
+**Current CTAs:** "Download OK Code" / "View on GitHub" / "Explore on GitHub"
+
+**Recommendations:**
+
+- Primary: "Get OK Code Free" (emphasizes free, reduces friction)
+- Secondary: "Star on GitHub" (more specific action)
+- Bottom CTA: "Start shipping calmer" (emotional, benefit-oriented)
+
+### 9.5 FAQ Expansion
+
+**Current:** 4 FAQ items. Premium sites typically show 6-10.
+
+**Suggested additions:**
+
+- "How does it compare to Cursor / Windsurf / Copilot?"
+- "What AI models does it support?"
+- "Can I self-host it?"
+- "Is my code sent to a server?"
+- "How does the desktop app work offline?"
+- "What's on the roadmap?"
+
+---
+
+## 10. Architecture & Code Quality
+
+### 10.1 Style Architecture Consolidation
+
+**Problem:** Styles are split across Layout.astro (global), index.astro (global via `:global()`), and component scoped `<style>` blocks. This creates three competing layers.
+
+**Recommendation:** Adopt a clear layering:
+
+1. **Layout.astro** -- Design tokens (CSS variables), resets, base typography, nav, footer
+2. **Components** -- Scoped styles for component-specific layout and interactions
+3. **Page files** -- Only page-level composition styles (grid arrangements between sections)
+
+Specifically, move all hero/card/button visual styles from index.astro into either Layout.astro (if shared) or the relevant component.
+
+### 10.2 CSS Custom Property Naming
+
+**Current:** Variables are prefixed `--kn-landing-*` (legacy from "Knots"?). Some newer additions use fallback values like `var(--kn-landing-accent, #ca3a29)`.
+
+**Recommendation:** Standardize naming and ensure all variables are defined centrally:
+
+```
+--ok-bg
+--ok-text
+--ok-text-secondary
+--ok-text-muted
+--ok-accent
+--ok-accent-bright
+--ok-border
+--ok-card-bg
+--ok-section-gap
+```
+
+### 10.3 Remove Unused Styles
+
+**Potentially unused styles found in index.astro:**
+
+- `.hero-visual`, `.hero-glow--violet`, `.hero-glow--cyan` -- these appear to be from an earlier hero design with floating orbs, now replaced by the gradient mesh approach
+- `.orb--one`, `.orb--two` -- same, unused
+- `.glass-stage`, `.glass-toolbar`, `.glass-body`, `.glass-badge`, `.glass-label` -- comprehensive glass mockup styles that aren't referenced in any current component
+- `.rail`, `.rail--sidebar`, `.rail--meta`, `.center-stack` -- same
+- `.message`, `.message--large`, `.message--short` -- same
+- `.code-line`, `.code-line--add`, `.code-line--remove` -- same
+- `.preview-window`, `.preview-nav`, `.preview-card` -- same
+- `.chrome-label`, `.panel-status`, `.floating-card-kicker` -- same
+
+**Recommendation:** Audit and remove ~150+ lines of dead CSS from index.astro. This will reduce file size and eliminate confusion.
+
+### 10.4 Component Prop Validation
+
+**Problem:** Some components accept inline data arrays (TrustStrip) while others accept props (FeatureGrid, WorkflowSection, FaqSection). Inconsistent pattern.
+
+**Recommendation:** Standardize on props for all data-driven components, with the data defined in the page file. This allows reuse across pages.
+
+### 10.5 TypeScript Strictness
+
+**Problem:** The `tsconfig.json` strictness level and TypeScript coverage haven't been audited. Component interfaces exist but may not be comprehensive.
+
+**Recommendation:** Enable `strict: true` in tsconfig and add proper typing to all component props and script variables.
+
+---
+
+## 11. New Sections & Features
+
+### 11.1 Product Screenshot / Demo Section
+
+**Priority: HIGH**
+
+The single biggest gap vs. OpenAI/Vercel is the absence of any product visual. Users need to see the product before downloading.
+
+**Options (in order of impact):**
+
+1. **Embedded video** -- 15-second autoplay muted loop showing the product in use
+2. **Animated screenshot carousel** -- 3-4 screenshots with auto-rotation
+3. **Interactive demo** -- Embedded iframe or WebGL recreation of the product
+4. **Static hero screenshot** -- Single high-quality product screenshot in the hero area
+
+### 11.2 Changelog / What's New Section
+
+**What Vercel/Linear show:** A "What's new" or "Changelog" teaser showing recent updates. Builds trust that the product is actively maintained.
+
+**Recommendation:** Add a compact changelog strip below the theme showcase:
+
+```html
+<section class="changelog-teaser">
+  <h2>What's new</h2>
+  <div class="changelog-items">
+    <article>
+      <time>Mar 2026</time>
+      <h3>v1.2 -- Theme engine</h3>
+      <p>Three premium themes with full customization.</p>
+    </article>
+    <!-- 2-3 more items -->
+  </div>
+  <a href="/changelog">View full changelog</a>
+</section>
+```
+
+### 11.3 Testimonials / Quotes Section
+
+**What premium sites show:** 2-3 rotating testimonial quotes with attribution (name, company, avatar).
+
+**Recommendation:** Add between the workflow section and core surfaces:
+
+```html
+<section class="testimonials">
+  <blockquote>
+    <p>"OK Code is the first AI coding tool that doesn't feel disposable."</p>
+    <cite>-- Developer Name, Company</cite>
+  </blockquote>
+</section>
+```
+
+### 11.4 "Built With" / Tech Stack Section
+
+**Recommendation:** A compact section showing the tech stack (Tauri, React, TanStack Router) to build developer credibility.
+
+### 11.5 Email Capture / Newsletter
+
+**What Vercel does:** A subtle email capture at the bottom for product updates.
+
+**Recommendation:** Add above the footer:
+
+```html
+<section class="newsletter">
+  <h2>Stay in the loop</h2>
+  <p>Get notified about new releases and features.</p>
+  <form>
+    <input type="email" placeholder="you@example.com" />
+    <button type="submit">Subscribe</button>
+  </form>
+</section>
+```
+
+### 11.6 Dark/Light Mode Toggle
+
+**Current:** Exclusively dark theme. Most premium sites offer both.
+
+**Recommendation:** While the dark aesthetic is core to the brand, consider:
+
+- A subtle toggle in the nav for users who prefer light mode
+- At minimum, respect `prefers-color-scheme` for accessibility
+- Start with just the marketing page; the app itself can stay dark-only
+
+---
+
+## 12. Reference Benchmarks
+
+### Sites to Study
+
+| Site                                 | Strength to Emulate                                                   |
+| ------------------------------------ | --------------------------------------------------------------------- |
+| [vercel.com](https://vercel.com)     | Section spacing, typography scale, product demo, gradient borders     |
+| [openai.com](https://openai.com)     | Hero impact, social proof, stats bar, video demo                      |
+| [linear.app](https://linear.app)     | Card interactions (cursor glow), animation variety, dark theme polish |
+| [raycast.com](https://raycast.com)   | Product screenshots, feature deep-dives, keyboard shortcut showcase   |
+| [warp.dev](https://warp.dev)         | Terminal product marketing, developer-focused copy, comparison tables |
+| [cursor.com](https://cursor.com)     | AI coding tool positioning, hero messaging, social proof              |
+| [arc.net](https://arc.net)           | Emotional copy, typography choices, minimalist design                 |
+| [supabase.com](https://supabase.com) | Dark theme execution, code examples, community section                |
+
+### Quality Checklist
+
+Before considering the marketing page production-ready, verify:
+
+- [ ] Lighthouse Performance score > 90
+- [ ] Lighthouse Accessibility score = 100
+- [ ] Lighthouse SEO score = 100
+- [ ] All interactive elements have visible focus states
+- [ ] `prefers-reduced-motion` fully respected
+- [ ] Mobile navigation focus trap implemented
+- [ ] No duplicate style definitions between files
+- [ ] All dead CSS removed
+- [ ] Product demo/screenshot visible above the fold
+- [ ] OG image is 1200x630 and shows product
+- [ ] Structured data (JSON-LD) present
+- [ ] Sitemap generated
+- [ ] Font loading optimized (no FOIT)
+- [ ] All images have width/height attributes (CLS prevention)
+- [ ] Touch targets are minimum 44x44px
+- [ ] Color contrast ratios meet WCAG AA
+- [ ] Page loads in < 2s on 3G (simulated)
+- [ ] No layout shift after initial paint (CLS < 0.1)
+
+---
+
+_Generated from a full audit of the OK Code marketing codebase on 2026-03-31._