From cd16f8b883663248bacc93db95e2758e9cf9a66d Mon Sep 17 00:00:00 2001
From: "Zeko (Hermes)" <zeko@hermes.local>
Date: Fri, 5 Jun 2026 06:32:39 +0700
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20landing=20page=20cleanup=20=E2=80=94?=
 =?UTF-8?q?=20adopt=20uteke=20design=20system=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rewrite +page.svelte using uteke template structure
- All sections centered with max-w-4xl mx-auto text-center
- Clean navbar with sticky backdrop-blur (uteke pattern)
- Footer with proper links (uteke pattern)
- Simplified CSS: removed 1000+ lines of unused styles
- Added FAQ section with accordion
- Added comparison table vs CodeRabbit/Copilot/SonarQube
- Terminal demo with cycling commands
- Proper separator-gradient between sections
- Consistent animation classes (animate-fade-in with delays)
---
 website/src/app.css               | 1179 ++++-------------------------
 website/src/routes/+layout.svelte |   43 +-
 website/src/routes/+page.svelte   |  591 ++++++---------
 3 files changed, 377 insertions(+), 1436 deletions(-)

diff --git a/website/src/app.css b/website/src/app.css
index 25df3bf6..fb707c41 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -2,1139 +2,248 @@
 
 /* ============================================
    DESIGN SYSTEM — cora CLI
-   8px grid · Linear-inspired dark theme
-   Spacing reference: Linear, Supabase, Vercel
+   Based on uteke pattern, oklch color space
    ============================================ */
 
-/* ---- CSS Custom Properties (oklch color space) ---- */
 :root {
-  --background: oklch(0.13 0.01 270);
-  --foreground: oklch(0.92 0.01 270);
-  --card: oklch(0.17 0.01 270);
-  --card-foreground: oklch(0.92 0.01 270);
-  --muted: oklch(0.22 0.01 270);
-  --muted-foreground: oklch(0.65 0.01 270);
-  --accent: oklch(0.65 0.22 270);
-  --accent-bright: oklch(0.72 0.2 270);
-  --accent-foreground: oklch(0.98 0 0);
-  --accent-dim: oklch(0.45 0.12 270);
-  --success: oklch(0.72 0.19 145);
-  --warning: oklch(0.78 0.15 85);
-  --destructive: oklch(0.55 0.22 25);
-  --border: oklch(0.27 0.01 270);
-  --border-subtle: oklch(0.22 0.01 270);
-  --ring: oklch(0.65 0.22 270);
-  --shadow-card: 0 1px 3px oklch(0 0 0 / 0.3);
-  --shadow-card-hover: 0 4px 12px oklch(0 0 0 / 0.4);
-
-  /* Font families */
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-
-  /* ---- 8px Spacing Scale ---- */
-  --space-0: 0;
-  --space-1: 0.25rem;   /* 4px */
-  --space-2: 0.5rem;    /* 8px */
-  --space-3: 0.75rem;   /* 12px */
-  --space-4: 1rem;      /* 16px */
-  --space-5: 1.25rem;   /* 20px */
-  --space-6: 1.5rem;    /* 24px */
-  --space-8: 2rem;      /* 32px */
-  --space-10: 2.5rem;   /* 40px */
-  --space-12: 3rem;     /* 48px */
-  --space-16: 4rem;     /* 64px */
-  --space-20: 5rem;     /* 80px */
-  --space-24: 6rem;     /* 96px */
-  --space-32: 8rem;     /* 128px */
-}
-
-/* ---- Tailwind v4 Theme Tokens ---- */
-@theme {
-  --color-background: oklch(0.13 0.01 270);
-  --color-foreground: oklch(0.92 0.01 270);
-  --color-card: oklch(0.17 0.01 270);
-  --color-card-foreground: oklch(0.92 0.01 270);
-  --color-muted: oklch(0.22 0.01 270);
-  --color-muted-muted-foreground: oklch(0.65 0.01 270);
-  --color-accent: oklch(0.65 0.22 270);
-  --color-accent-foreground: oklch(0.98 0 0);
-  --color-success: oklch(0.72 0.19 145);
-  --color-warning: oklch(0.78 0.15 85);
-  --color-destructive: oklch(0.55 0.22 25);
-  --color-border: oklch(0.27 0.01 270);
-  --color-ring: oklch(0.65 0.22 270);
-  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-}
-
-/* ---- Base Reset ---- */
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+	--background: oklch(0.13 0.01 270);
+	--foreground: oklch(0.92 0.01 270);
+	--card: oklch(0.17 0.01 270);
+	--muted: oklch(0.22 0.01 270);
+	--muted-foreground: oklch(0.65 0.01 270);
+	--accent: oklch(0.65 0.22 270);
+	--accent-bright: oklch(0.72 0.2 270);
+	--accent-foreground: oklch(0.98 0 0);
+	--accent-dim: oklch(0.45 0.12 270);
+	--success: oklch(0.72 0.19 145);
+	--border: oklch(0.27 0.01 270);
+	--border-subtle: oklch(0.22 0.01 270);
 }
 
 html {
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  scroll-behavior: smooth;
+	background-color: var(--background);
+	color: var(--foreground);
+	font-family: 'Inter', system-ui, -apple-system, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	scroll-behavior: smooth;
 }
 
 body {
-  min-height: 100vh;
-  line-height: 1.5;
-  overflow-x: hidden;
+	min-height: 100vh;
+	line-height: 1.5;
 }
 
-/* ---- Selection ---- */
 ::selection {
-  background: oklch(0.65 0.22 270 / 0.3);
-  color: var(--accent-foreground);
-}
-
-/* ---- Scrollbar ---- */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--muted);
+	background: oklch(0.65 0.22 270 / 0.3);
+	color: var(--accent-foreground);
 }
 
-::-webkit-scrollbar-thumb {
-  background: var(--muted-foreground);
-  border-radius: 3px;
+code, .font-mono {
+	font-family: 'JetBrains Mono', ui-monospace, monospace;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: oklch(0.75 0.01 270);
-}
+/* ---- Scrollbar ---- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--muted); }
+::-webkit-scrollbar-thumb { background: var(--muted-foreground); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: oklch(0.75 0.01 270); }
 
 /* ============================================
-   ANIMATIONS (motion OK)
+   ANIMATIONS
    ============================================ */
 @media (prefers-reduced-motion: no-preference) {
-  @keyframes fade-in-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes typing-cursor {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0; }
-  }
-
-  @keyframes subtle-float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-6px); }
-  }
+	@keyframes fade-in-up {
+		from { opacity: 0; transform: translateY(20px); }
+		to { opacity: 1; transform: translateY(0); }
+	}
 
-  @keyframes glow {
-    0%, 100% {
-      box-shadow: 0 0 8px oklch(0.65 0.22 270 / 0.15),
-                  0 0 20px oklch(0.65 0.22 270 / 0.05);
-    }
-    50% {
-      box-shadow: 0 0 12px oklch(0.65 0.22 270 / 0.25),
-                  0 0 30px oklch(0.65 0.22 270 / 0.1);
-    }
-  }
+	@keyframes blink {
+		0%, 50% { opacity: 1; }
+		51%, 100% { opacity: 0; }
+	}
 
-  @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-  }
+	.animate-fade-in { animation: fade-in-up 0.6s ease-out forwards; }
+	.animate-fade-in-delay-1 { animation: fade-in-up 0.6s ease-out 0.1s forwards; opacity: 0; }
+	.animate-fade-in-delay-2 { animation: fade-in-up 0.6s ease-out 0.2s forwards; opacity: 0; }
+	.animate-fade-in-delay-3 { animation: fade-in-up 0.6s ease-out 0.3s forwards; opacity: 0; }
+	.animate-fade-in-delay-4 { animation: fade-in-up 0.6s ease-out 0.4s forwards; opacity: 0; }
 
-  .animate-fade-in-up {
-    animation: fade-in-up 0.6s ease-out forwards;
-  }
-
-  .animate-fade-in {
-    animation: fade-in-up 0.6s ease-out forwards;
-  }
-
-  .animate-fade-in-delay-1 {
-    animation: fade-in-up 0.6s ease-out 0.1s forwards;
-    opacity: 0;
-  }
-
-  .animate-fade-in-delay-2 {
-    animation: fade-in-up 0.6s ease-out 0.2s forwards;
-    opacity: 0;
-  }
-
-  .animate-fade-in-delay-3 {
-    animation: fade-in-up 0.6s ease-out 0.3s forwards;
-    opacity: 0;
-  }
-
-  .animate-fade-in-delay-4 {
-    animation: fade-in-up 0.6s ease-out 0.4s forwards;
-    opacity: 0;
-  }
-
-  .delay-100 { animation-delay: 100ms; opacity: 0; }
-  .delay-200 { animation-delay: 200ms; opacity: 0; }
-  .delay-300 { animation-delay: 300ms; opacity: 0; }
-  .delay-400 { animation-delay: 400ms; opacity: 0; }
-  .delay-500 { animation-delay: 500ms; opacity: 0; }
+	.cursor-blink { animation: blink 1s step-end infinite; }
 }
 
-/* ---- Reduced Motion: disable ALL ---- */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    transform: none !important;
-  }
-  html {
-    scroll-behavior: auto;
-  }
-  .scroll-reveal {
-    opacity: 1 !important;
-    transform: none !important;
-  }
-  .animate-fade-in-up,
-  .animate-fade-in,
-  .animate-fade-in-delay-1,
-  .animate-fade-in-delay-2,
-  .animate-fade-in-delay-3,
-  .animate-fade-in-delay-4 {
-    opacity: 1 !important;
-    transform: none !important;
-  }
-  .delay-100, .delay-200, .delay-300, .delay-400, .delay-500 {
-    opacity: 1 !important;
-  }
-}
-
-/* ---- Scroll Reveal ---- */
-.scroll-reveal {
-  opacity: 0;
-  transform: translateY(12px);
-  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-}
-
-.scroll-reveal.revealed {
-  opacity: 1;
-  transform: translateY(0);
+	*, *::before, *::after {
+		animation-duration: 0.01ms !important;
+		transition-duration: 0.01ms !important;
+	}
+	html { scroll-behavior: auto; }
+	.animate-fade-in, .animate-fade-in-delay-1, .animate-fade-in-delay-2,
+	.animate-fade-in-delay-3, .animate-fade-in-delay-4 { opacity: 1 !important; }
 }
 
 /* ============================================
-   HERO EFFECTS (from uteke pattern)
+   HERO EFFECTS (uteke pattern)
    ============================================ */
-
-/* Hero gradient text */
 .hero-gradient {
-  background: linear-gradient(135deg, oklch(0.72 0.2 270), oklch(0.65 0.22 270), oklch(0.6 0.18 240));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+	background: linear-gradient(135deg, oklch(0.72 0.2 270), oklch(0.65 0.22 270), oklch(0.6 0.18 240));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
 }
 
-/* Subtle glow effect */
 .glow-purple {
-  box-shadow: 0 0 60px -12px oklch(0.65 0.22 270 / 0.2);
+	box-shadow: 0 0 60px -12px oklch(0.65 0.22 270 / 0.2);
 }
 
 .glow-text {
-  text-shadow: 0 0 40px oklch(0.65 0.22 270 / 0.25);
+	text-shadow: 0 0 40px oklch(0.65 0.22 270 / 0.25);
 }
 
-/* Grid background pattern */
 .grid-bg {
-  background-image:
-    linear-gradient(oklch(0.65 0.22 270 / 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(0.65 0.22 270 / 0.03) 1px, transparent 1px);
-  background-size: 64px 64px;
+	background-image:
+		linear-gradient(oklch(0.65 0.22 270 / 0.03) 1px, transparent 1px),
+		linear-gradient(90deg, oklch(0.65 0.22 270 / 0.03) 1px, transparent 1px);
+	background-size: 64px 64px;
 }
 
 /* ============================================
-   TERMINAL BLOCK (from uteke pattern)
+   TERMINAL BLOCK (uteke pattern)
    ============================================ */
-
-/* Terminal code block with top accent line */
 .terminal-block {
-  background: linear-gradient(135deg, var(--card), var(--muted));
-  border: 1px solid var(--border);
-  position: relative;
+	background: linear-gradient(135deg, var(--card), var(--muted));
+	border: 1px solid var(--border);
+	position: relative;
 }
 
 .terminal-block::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--accent), transparent);
-  opacity: 0.4;
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 1px;
+	background: linear-gradient(90deg, transparent, var(--accent), transparent);
+	opacity: 0.4;
 }
 
 /* ============================================
-   FEATURE CARD (from uteke pattern)
+   FEATURE CARD (uteke pattern)
    ============================================ */
-
 .feature-card {
-  transition: all 200ms ease-out;
+	transition: all 200ms ease-out;
 }
 
 .feature-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--accent-dim);
-  background-color: var(--muted);
+	transform: translateY(-2px);
+	border-color: var(--accent-dim);
+	background-color: var(--muted);
 }
 
 /* ============================================
-   CTA BUTTONS (from uteke pattern)
+   CTA BUTTONS (uteke pattern)
    ============================================ */
-
 .cta-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  background: var(--accent);
-  color: var(--accent-foreground);
-  border-radius: var(--space-2);
-  padding: var(--space-2) var(--space-5);
-  font-weight: 600;
-  font-size: 14px;
-  font-family: var(--font-sans);
-  min-height: 44px;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  transition: all 200ms ease-out;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	background: var(--accent);
+	color: var(--accent-foreground);
+	border-radius: 0.5rem;
+	padding: 0.5rem 1.25rem;
+	font-weight: 600;
+	font-size: 14px;
+	font-family: 'Inter', system-ui, sans-serif;
+	min-height: 44px;
+	border: none;
+	cursor: pointer;
+	text-decoration: none;
+	transition: all 200ms ease-out;
 }
 
 .cta-primary:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 0 24px oklch(0.65 0.22 270 / 0.35);
+	transform: translateY(-1px);
+	box-shadow: 0 0 24px oklch(0.65 0.22 270 / 0.35);
 }
 
 .cta-primary:active {
-  transform: translateY(0);
+	transform: translateY(0);
 }
 
 .cta-secondary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  background: transparent;
-  color: var(--muted-foreground);
-  border: 1px solid var(--border);
-  border-radius: var(--space-2);
-  padding: var(--space-2) var(--space-5);
-  font-weight: 500;
-  font-size: 14px;
-  font-family: var(--font-sans);
-  min-height: 44px;
-  cursor: pointer;
-  text-decoration: none;
-  transition: all 200ms ease-out;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	background: transparent;
+	color: var(--muted-foreground);
+	border: 1px solid var(--border);
+	border-radius: 0.5rem;
+	padding: 0.5rem 1.25rem;
+	font-weight: 500;
+	font-size: 14px;
+	font-family: 'Inter', system-ui, sans-serif;
+	min-height: 44px;
+	cursor: pointer;
+	text-decoration: none;
+	transition: all 200ms ease-out;
 }
 
 .cta-secondary:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-}
-
-/* ============================================
-   CURSOR & FLOAT ANIMATION (from uteke)
-   ============================================ */
-
-.cursor-blink {
-  animation: blink 1s step-end infinite;
-}
-
-.float-animation {
-  animation: subtle-float 3s ease-in-out infinite;
+	border-color: var(--accent);
+	color: var(--accent);
 }
 
 /* ============================================
-   COMMAND SYNTAX HIGHLIGHTING (from uteke)
+   COMMAND SYNTAX HIGHLIGHTING (uteke)
    ============================================ */
-
-.cmd-highlight {
-  color: var(--accent-bright);
-}
-
-.cmd-flag {
-  color: oklch(0.75 0.15 240);
-}
-
-.cmd-string {
-  color: oklch(0.78 0.16 155);
-}
-
-.cmd-comment {
-  color: var(--muted-foreground);
-}
+.cmd-highlight { color: var(--accent-bright); }
+.cmd-flag { color: oklch(0.75 0.15 240); }
+.cmd-string { color: oklch(0.78 0.16 155); }
+.cmd-comment { color: var(--muted-foreground); }
 
 /* ============================================
-   SEPARATOR GRADIENT (from uteke)
+   SEPARATOR & TABLE (uteke)
    ============================================ */
-
 .separator-gradient {
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--border), transparent);
-  max-width: 1152px;
-  margin-left: auto;
-  margin-right: auto;
+	height: 1px;
+	background: linear-gradient(90deg, transparent, var(--border), transparent);
+	max-width: 896px;
+	margin-left: auto;
+	margin-right: auto;
 }
 
-/* ============================================
-   COMPARISON TABLE (from uteke pattern)
-   ============================================ */
-
 .compare-table {
-  width: 100%;
-  border-collapse: collapse;
+	width: 100%;
+	border-collapse: collapse;
 }
 
 .compare-table th,
 .compare-table td {
-  padding: var(--space-3) var(--space-5);
-  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
-  text-align: left;
-  font-size: 14px;
-  color: var(--foreground);
+	padding: 0.75rem 1rem;
+	border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
+	text-align: left;
+	font-size: 14px;
 }
 
 .compare-table thead th {
-  color: var(--muted-foreground);
-  font-weight: 500;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding-bottom: var(--space-3);
+	color: var(--muted-foreground);
+	font-weight: 500;
+	font-size: 12px;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
 }
 
 .compare-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.compare-table .cora-col {
-  background: oklch(0.65 0.22 270 / 0.05);
-  font-weight: 500;
+	border-bottom: none;
 }
 
-.compare-table thead .cora-col {
-  background: oklch(0.65 0.22 270 / 0.1);
-  color: var(--accent);
-}
-
-/* Highlight column (uteke pattern) */
 .compare-table th.highlight-col {
-  background-color: var(--muted);
-  border-bottom: 2px solid var(--accent);
+	background-color: var(--muted);
+	border-bottom: 2px solid var(--accent);
 }
 
 .compare-table td.highlight-col {
-  background-color: var(--card);
-}
-
-/* ============================================
-   GLASS CARD (cora original)
-   ============================================ */
-
-.glass-card {
-  background: var(--card);
-  border-radius: var(--space-4);
-  padding: var(--space-6);
-  box-shadow: var(--shadow-card);
-  border: 1px solid oklch(0.27 0.01 270 / 0.5);
-  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out, border-color 0.3s ease-out;
-}
-
-.glass-card:hover {
-  box-shadow: var(--shadow-card-hover);
-  transform: translateY(-2px);
-  border-color: var(--accent-dim);
-}
-
-/* ============================================
-   TERMINAL (cora original)
-   ============================================ */
-
-.terminal {
-  background: oklch(0.10 0 0);
-  border-radius: var(--space-3);
-  border: 1px solid var(--border);
-  overflow: hidden;
-  font-family: var(--font-mono);
-}
-
-.terminal-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
-  position: relative;
-}
-
-.terminal-dot {
-  width: var(--space-3);
-  height: var(--space-3);
-  border-radius: 9999px;
-  flex-shrink: 0;
-}
-
-.terminal-dot-red { background: var(--destructive); }
-.terminal-dot-yellow { background: var(--warning); }
-.terminal-dot-green { background: var(--success); }
-
-.terminal-title {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--muted-foreground);
-  margin-left: var(--space-2);
-}
-
-.terminal-body {
-  padding: var(--space-5);
-  font-family: var(--font-mono);
-  font-size: 14px;
-  line-height: 1.625;
-  color: var(--foreground);
-}
-
-/* ============================================
-   BUTTONS (cora original — kept for compatibility)
-   ============================================ */
-
-.btn-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  background: var(--accent);
-  color: var(--accent-foreground);
-  border-radius: var(--space-2);
-  padding: var(--space-2) var(--space-5);
-  font-weight: 500;
-  font-size: 14px;
-  font-family: var(--font-sans);
-  min-height: 44px;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  transition: opacity 0.2s ease;
-}
-
-.btn-primary:hover {
-  opacity: 0.9;
-}
-
-.btn-primary:active {
-  opacity: 0.8;
-}
-
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  background: transparent;
-  color: var(--foreground);
-  border: 1px solid var(--border);
-  border-radius: var(--space-2);
-  padding: var(--space-2) var(--space-5);
-  font-weight: 500;
-  font-size: 14px;
-  font-family: var(--font-sans);
-  min-height: 44px;
-  cursor: pointer;
-  text-decoration: none;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-
-.btn-ghost:hover {
-  background: var(--muted);
-  border-color: oklch(0.35 0.01 270);
-}
-
-.btn-ghost:active {
-  background: oklch(0.25 0.01 270);
-}
-
-/* ============================================
-   SECTION CONTAINER (8px grid based)
-   ============================================ */
-
-.section {
-  max-width: 1152px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: var(--space-6);
-  padding-right: var(--space-6);
-}
-
-@media (min-width: 768px) {
-  .section {
-    padding-left: var(--space-8);
-    padding-right: var(--space-8);
-  }
-}
-
-@media (min-width: 1280px) {
-  .section {
-    padding-left: var(--space-10);
-    padding-right: var(--space-10);
-  }
-}
-
-.section-hero {
-  padding-top: var(--space-20);
-  padding-bottom: var(--space-16);
-}
-
-.section-tall {
-  padding-top: var(--space-16);
-  padding-bottom: var(--space-16);
-}
-
-.section-compact {
-  padding-top: var(--space-12);
-  padding-bottom: var(--space-12);
-}
-
-@media (min-width: 768px) {
-  .section-hero {
-    padding-top: var(--space-24);
-    padding-bottom: var(--space-20);
-  }
-  .section-tall {
-    padding-top: var(--space-24);
-    padding-bottom: var(--space-24);
-  }
-  .section-compact {
-    padding-top: var(--space-16);
-    padding-bottom: var(--space-16);
-  }
-}
-
-@media (min-width: 1280px) {
-  .section-hero {
-    padding-top: var(--space-32);
-    padding-bottom: var(--space-24);
-  }
-  .section-tall {
-    padding-top: var(--space-32);
-    padding-bottom: var(--space-32);
-  }
-}
-
-/* ============================================
-   BADGE
-   ============================================ */
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: 12px;
-  font-weight: 500;
-  background: var(--muted);
-  color: var(--muted-foreground);
-  border-radius: 9999px;
-  padding: var(--space-1) var(--space-2);
-  line-height: 1.5;
-  letter-spacing: 0.01em;
-}
-
-.badge-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  background: var(--success);
-}
-
-.accent-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: 12px;
-  font-weight: 500;
-  background: oklch(0.65 0.22 270 / 0.15);
-  color: var(--accent);
-  border-radius: 9999px;
-  padding: var(--space-1) var(--space-2);
-  line-height: 1.5;
-  letter-spacing: 0.01em;
-}
-
-/* ============================================
-   TYPING CURSOR
-   ============================================ */
-
-.typing-cursor {
-  display: inline-block;
-  width: 8px;
-  height: 1.1em;
-  background: var(--accent);
-  margin-left: 2px;
-  vertical-align: text-bottom;
-  animation: typing-cursor 1s step-end infinite;
-}
-
-/* ============================================
-   COPY BUTTON
-   ============================================ */
-
-.copy-btn {
-  position: absolute;
-  top: var(--space-3);
-  right: var(--space-3);
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-1) var(--space-2);
-  background: var(--muted);
-  border: 1px solid var(--border);
-  border-radius: var(--space-1);
-  color: var(--muted-foreground);
-  font-size: 12px;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  transition: background-color 0.2s ease, color 0.2s ease;
-  min-height: 44px;
-  min-width: 44px;
-  justify-content: center;
-}
-
-.copy-btn:hover {
-  background: oklch(0.28 0.01 270);
-  color: var(--foreground);
-}
-
-.copy-btn.copied {
-  color: var(--success);
-  border-color: oklch(0.72 0.19 145 / 0.3);
-}
-
-/* ============================================
-   SYNTAX HIGHLIGHTING (cora original)
-   ============================================ */
-
-.syntax-cmd { color: var(--muted-foreground); }
-.syntax-flag { color: oklch(0.75 0.15 240); }
-.syntax-string { color: var(--success); }
-.syntax-comment { color: var(--muted-foreground); }
-.syntax-highlight { color: var(--accent); }
-.syntax-success { color: var(--success); }
-.syntax-warning { color: var(--warning); }
-.syntax-error { color: var(--destructive); }
-
-/* ============================================
-   CHECK/X SYMBOLS
-   ============================================ */
-
-.symbol-check {
-  color: var(--success);
-  font-weight: 600;
-}
-
-.symbol-cross {
-  color: var(--muted-foreground);
-  font-weight: 600;
-}
-
-/* ============================================
-   CONNECT LINE (How It Works)
-   ============================================ */
-
-.connect-line {
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--space-10);
-}
-
-.connect-line::after {
-  content: '';
-  display: block;
-  width: 100%;
-  max-width: var(--space-10);
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    oklch(0.65 0.22 270 / 0.4),
-    transparent
-  );
-}
-
-/* ============================================
-   FEATURE ICON
-   ============================================ */
-
-.feature-icon {
-  width: var(--space-12);
-  height: var(--space-12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--space-3);
-  background: oklch(0.65 0.22 270 / 0.1);
-}
-
-.feature-icon svg {
-  width: var(--space-6);
-  height: var(--space-6);
-  color: var(--accent);
-}
-
-/* ============================================
-   TIMELINE STEP
-   ============================================ */
-
-.timeline-step {
-  display: flex;
-  gap: var(--space-5);
-  align-items: flex-start;
-}
-
-.timeline-number {
-  width: var(--space-10);
-  height: var(--space-10);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: oklch(0.65 0.22 270 / 0.15);
-  color: var(--accent);
-  font-weight: 700;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-/* ============================================
-   DOCS LAYOUT (preserved for docs pages)
-   ============================================ */
-
-.docs-sidebar {
-  position: sticky;
-  top: 3.5rem;
-  height: calc(100vh - 3.5rem);
-  overflow-y: auto;
-  width: 16rem;
-  flex-shrink: 0;
-  padding-top: var(--space-8);
-  border-right: 1px solid var(--border);
-}
-
-.docs-sidebar-link {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--space-2);
-  color: var(--muted-foreground);
-  font-size: 14px;
-  text-decoration: none;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  min-height: 44px;
-}
-
-.docs-sidebar-link:hover {
-  background: var(--muted);
-  color: var(--foreground);
-}
-
-.docs-sidebar-link.active {
-  background: oklch(0.65 0.22 270 / 0.1);
-  color: var(--accent);
-}
-
-.docs-content {
-  flex: 1;
-  min-width: 0;
-  padding: var(--space-8) var(--space-8) var(--space-16);
-}
-
-.docs-content h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  line-height: 1.2;
-  margin-bottom: var(--space-4);
-  color: var(--foreground);
-}
-
-.docs-content h2 {
-  font-size: 1.375rem;
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1.3;
-  margin-top: var(--space-10);
-  margin-bottom: var(--space-4);
-  color: var(--foreground);
-}
-
-.docs-content h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1.4;
-  margin-top: var(--space-8);
-  margin-bottom: var(--space-3);
-  color: var(--foreground);
-}
-
-.docs-content p {
-  color: var(--muted-foreground);
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  margin-bottom: var(--space-4);
-}
-
-.docs-content ul, .docs-content ol {
-  color: var(--muted-foreground);
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  padding-left: var(--space-6);
-  margin-bottom: var(--space-4);
-}
-
-.docs-content li {
-  margin-bottom: var(--space-2);
-}
-
-.docs-content code:not(pre code) {
-  background: var(--muted);
-  color: var(--accent);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-size: 0.8125rem;
-}
-
-.docs-content pre {
-  background: oklch(0.10 0 0);
-  border: 1px solid var(--border);
-  border-radius: var(--space-3);
-  padding: var(--space-5);
-  overflow-x: auto;
-  margin-bottom: var(--space-6);
-}
-
-.docs-content pre code {
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.625;
-  color: var(--foreground);
-}
-
-.docs-content a {
-  color: var(--accent);
-  text-decoration: none;
-  transition: opacity 0.2s ease;
-}
-
-.docs-content a:hover {
-  opacity: 0.8;
-  text-decoration: underline;
-}
-
-/* ---- Docs Section ---- */
-.docs-section {
-  margin-top: var(--space-12);
-}
-
-.docs-section h2 {
-  font-size: 1.375rem;
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1.3;
-  margin-bottom: var(--space-3);
-  color: var(--foreground);
-}
-
-.docs-section p {
-  color: var(--muted-foreground);
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  margin-bottom: var(--space-4);
-}
-
-/* ---- Docs Card ---- */
-.docs-card {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  padding: var(--space-4);
-  background: var(--card);
-  border-radius: var(--space-3);
-  border: 1px solid var(--border);
-}
-
-.docs-card-number {
-  width: var(--space-8);
-  height: var(--space-8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: oklch(0.65 0.22 270 / 0.1);
-  color: var(--accent);
-  font-weight: 700;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.docs-card-number.primary {
-  background: oklch(0.65 0.22 270 / 0.15);
-  color: var(--accent);
-}
-
-.docs-card-number.muted {
-  background: var(--muted);
-  color: var(--muted-foreground);
-}
-
-/* ---- Docs Terminal ---- */
-.docs-terminal {
-  background: oklch(0.10 0 0);
-  border-radius: var(--space-3);
-  border: 1px solid var(--border);
-  overflow: hidden;
-  margin-bottom: var(--space-6);
-}
-
-.terminal-bar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
-  background: oklch(0.10 0 0);
-}
-
-.terminal-bar span {
-  width: var(--space-2);
-  height: var(--space-2);
-  border-radius: 9999px;
-}
-
-.terminal-bar .terminal-dot-red { background: var(--destructive); }
-.terminal-bar .terminal-dot-yellow { background: var(--warning); }
-.terminal-bar .terminal-dot-green { background: var(--success); }
-
-/* ---- Docs utility classes ---- */
-.docs-term-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  margin-bottom: var(--space-4);
-}
-
-.docs-term-item {
-  display: flex;
-  gap: var(--space-2);
-  font-size: 14px;
-  color: var(--muted-foreground);
-}
-
-.docs-term-key {
-  color: var(--accent);
-  font-family: var(--font-mono);
-  flex-shrink: 0;
-}
-
-.docs-term-value {
-  color: var(--muted-foreground);
-  font-size: 14px;
-}
-
-.docs-link-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-
-.docs-link-list a {
-  font-size: 14px;
-  color: var(--accent);
-  text-decoration: none;
-}
-
-.docs-link-list a:hover {
-  text-decoration: underline;
-}
-
-/* ---- Mobile docs nav ---- */
-.mobile-docs-nav {
-  display: none;
-  position: sticky;
-  top: 3.5rem;
-  z-index: 20;
-  background: var(--background);
-  border-bottom: 1px solid var(--border);
-  padding: var(--space-2) var(--space-4);
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.mobile-docs-nav a {
-  display: inline-block;
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--space-2);
-  color: var(--muted-foreground);
-  font-size: 14px;
-  text-decoration: none;
-  min-height: 44px;
-  line-height: 1.25;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.mobile-docs-nav a:hover {
-  background: var(--muted);
-  color: var(--foreground);
-}
-
-.mobile-docs-nav a.active {
-  background: oklch(0.65 0.22 270 / 0.1);
-  color: var(--accent);
-}
-
-@media (min-width: 768px) {
-  .mobile-docs-nav {
-    display: none;
-  }
-}
-
-/* ---- Mobile: collapse docs sidebar ---- */
-@media (max-width: 767px) {
-  .docs-sidebar {
-    display: none;
-  }
-  .docs-content {
-    padding: var(--space-6) var(--space-4) var(--space-12);
-  }
+	background-color: var(--card);
 }
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index 6445718e..43d67712 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -7,34 +7,35 @@
 	const isDocs = $derived($page.url.pathname.startsWith('/docs'));
 </script>
 
-<div class="bg-background min-h-screen">
-	<!-- Header -->
-	<header class="site-header">
-		<div class="max-w-6xl mx-auto px-4 sm:px-6 flex items-center justify-between h-14">
-			<a href="/" class="site-header-link font-semibold text-foreground">
+<div class="min-h-screen flex flex-col">
+	<nav class="border-b border-[var(--border)] bg-[var(--background)]/80 backdrop-blur-md sticky top-0 z-50">
+		<div class="max-w-4xl mx-auto px-6 h-14 flex items-center justify-between">
+			<a href="/" class="flex items-center gap-2.5 text-base font-bold hover:text-[var(--accent)] transition-colors">
+				<span class="text-lg">🛡️</span>
 				cora
 			</a>
-
-			<nav class="hidden sm:flex items-center gap-6">
-				<a href="/docs" class="site-header-link" class:active={isDocs}>Docs</a>
-				<a href="https://github.com/codecoradev/cora-cli" target="_blank" rel="noopener" class="site-header-link">
+			<div class="flex items-center gap-5 text-sm text-[var(--muted-foreground)]">
+				<a href="/docs" class="hover:text-[var(--foreground)] transition-colors hidden sm:inline" class:active={isDocs}>Docs</a>
+				<a href="https://github.com/codecoradev/cora-cli" target="_blank" rel="noopener" class="hover:text-[var(--foreground)] transition-colors inline-flex items-center gap-1">
 					GitHub
+					<svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" /></svg>
 				</a>
-			</nav>
-
-			<!-- Desktop CTA -->
-			<div class="hidden sm:block">
-				<a href="/docs/getting-started" class="btn-primary text-[13px] px-3.5 py-1.5">Get Started</a>
-			</div>
-
-			<!-- Mobile-only CTA -->
-			<div class="sm:hidden">
-				<a href="/docs/getting-started" class="btn-primary text-xs px-3 py-1.5">Get Started</a>
 			</div>
 		</div>
-	</header>
+	</nav>
 
-	<main>
+	<main class="flex-1">
 		{@render children()}
 	</main>
+
+	<footer class="border-t border-[var(--border)] mt-20">
+		<div class="max-w-4xl mx-auto px-6 py-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-[var(--muted-foreground)]">
+			<span>© 2026 cora — AI code review CLI · MIT License</span>
+			<div class="flex items-center gap-4">
+				<a href="https://github.com/codecoradev/cora-cli" target="_blank" rel="noopener" class="hover:text-[var(--foreground)] transition-colors">GitHub</a>
+				<a href="/docs" class="hover:text-[var(--foreground)] transition-colors">Docs</a>
+				<a href="https://github.com/codecoradev/cora-cli/blob/develop/LICENSE" class="hover:text-[var(--foreground)] transition-colors">MIT</a>
+			</div>
+		</div>
+	</footer>
 </div>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 64fead44..4ecde11c 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -1,239 +1,114 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	// ---- Cycling command demo state ----
-	interface Command {
-		cmd: string;
+	interface Feature {
+		icon: string;
+		title: string;
 		desc: string;
-		output: string;
+		detail: string;
 	}
 
-	const commands: Command[] = [
-		{
-			cmd: 'cora review --staged',
-			desc: 'Review staged changes before commit',
-			output: `🛡️  Rules engine: 3 files scanned (zero-cost regex)
-    ✖ src/api/auth.ts:42  — hardcoded API key detected
-    ✖ src/db/query.ts:18  — potential SQL injection
-
-🔗  Context chain: resolving cross-file references...
-    → src/api/auth.ts imports validateToken from src/lib/token.ts
-
-🤖  LLM review: OpenAI GPT-4o-mini
-    ⚠ src/api/auth.ts:67  — missing error boundary
-
-✓ Review complete — 4 issues found`
-		},
-		{
-			cmd: 'cora review --pr 42',
-			desc: 'Review an existing pull request',
-			output: `📦  Fetching PR #42: feat: add payment processing
-📝  12 files changed, +340 −89
-
-🛡️  Rules engine: 12 files scanned
-    ✖ src/payments/stripe.ts:15  — hardcoded secret key
-
-🤖  LLM review: Anthropic Claude 3.5 Sonnet
-    ⚠ src/payments/webhook.ts:45  — missing idempotency check
-
-📊  SARIF: review-results.sarif written (3 findings)
-✓ Review complete — 3 issues found`
-		},
-		{
-			cmd: 'cora config set llm.model gpt-4o',
-			desc: 'Configure your LLM provider',
-			output: `✓ Config updated: llm.model = "gpt-4o"
-  Config file: .cora.yaml
-  
-  Run 'cora review' to start using the new model.`
-		},
-		{
-			cmd: 'cora review --full',
-			desc: 'Full codebase review with all checks',
-			output: `🛡️  Rules engine: 47 files scanned (zero-cost regex)
-    ✖ 3 hardcoded secrets detected
-    ✖ 2 potential SQL injection patterns
-
-🔗  Context chain: 23 cross-file references resolved
-
-🤖  LLM review: OpenAI GPT-4o
-    ⚠ 8 issues found across 6 files
-    💡 3 suggestions for improvement
-
-📊  SARIF: review-results.sarif written (13 findings)
-✓ Review complete — 13 issues found`
-		},
-	];
-
-	let visibleCmd: number = $state(0);
-
-	// ---- FAQ state ----
-	let openFAQIndex: number | null = $state(null);
-
-	function toggleFAQ(index: number) {
-		openFAQIndex = openFAQIndex === index ? null : index;
+	interface Comparison {
+		feature: string;
+		cora: string;
+		coderabbit: string;
+		copilot: string;
+		sonarqube: string;
 	}
 
-	// ---- Copy install command ----
-	const installCmd = 'curl -fsSL https://raw.githubusercontent.com/codecoradev/cora-cli/main/install.sh | sh';
-	let copyClicked = $state(false);
-	function copyInstall() {
-		navigator.clipboard.writeText(installCmd);
-		copyClicked = true;
-		setTimeout(() => { copyClicked = false; }, 2000);
+	interface Command {
+		cmd: string;
+		desc: string;
+		output: string;
 	}
 
-	// ---- Problem/Solution pairs ----
-	const comparisons = [
-		{
-			problem: 'Code review takes hours',
-			solution: 'AI review in under 3 seconds',
-		},
-		{
-			problem: 'Locked to one AI provider',
-			solution: 'BYOK — use any LLM you want',
-		},
-		{
-			problem: 'CI reviews are expensive',
-			solution: 'Free, open source, MIT license',
-		},
-		{
-			problem: 'Reviewers miss context',
-			solution: 'Cross-file context chain + deterministic rules',
-		},
-	];
-
-	// ---- Features ----
-	const features = [
+	const features: Feature[] = [
 		{
 			icon: '🔑',
 			title: 'BYOK Any LLM',
-			description: 'OpenAI, Anthropic, Groq, local models, any OpenAI-compatible endpoint. You control the model, you control the cost.',
-			tag: 'Zero lock-in',
+			desc: 'Zero lock-in',
+			detail: 'OpenAI, Anthropic, Groq, local models — any OpenAI-compatible endpoint. You control the model, you control the cost.'
 		},
 		{
 			icon: '🛡️',
 			title: 'Deterministic Rules Engine',
-			description: 'Zero-cost regex rules catch secrets, SQL injection, TLS issues BEFORE the LLM call. No tokens wasted on obvious bugs.',
-			tag: 'Zero token cost',
+			desc: 'Zero token cost',
+			detail: 'Zero-cost regex rules catch secrets, SQL injection, TLS issues BEFORE the LLM call. No tokens wasted on obvious bugs.'
 		},
 		{
 			icon: '🔗',
 			title: 'Cross-file Context Chain',
-			description: 'AST-based symbol extraction understands your codebase, not just the diff. Follows imports, resolves types.',
-			tag: 'Full codebase awareness',
+			desc: 'Full codebase awareness',
+			detail: 'AST-based symbol extraction understands your codebase, not just the diff. Follows imports, resolves types.'
 		},
 		{
 			icon: '📦',
 			title: 'File Bundling',
-			description: 'Smart grouping of related files for consistent review across large PRs. Reduces context window waste.',
-			tag: 'Smart grouping',
+			desc: 'Smart grouping',
+			detail: 'Smart grouping of related files for consistent review across large PRs. Reduces context window waste.'
 		},
 		{
 			icon: '⚡',
 			title: 'Pre-commit Hooks',
-			description: 'Automatic review on every git commit. Blocks bad code before it\'s pushed. Zero friction, maximum impact.',
-			tag: 'Before you push',
+			desc: 'Before you push',
+			detail: 'Automatic review on every git commit. Blocks bad code before it\'s pushed. Zero friction, maximum impact.'
 		},
 		{
 			icon: '📊',
 			title: 'SARIF + CI Integration',
-			description: 'GitHub Actions composite action, SARIF upload, PR comments, blocking on error. Works in any CI/CD pipeline.',
-			tag: 'GitHub native',
-		},
-		{
-			icon: '🔒',
-			title: 'Privacy First',
-			description: 'Runs locally, zero telemetry, your code never leaves your machine. Perfect for sensitive codebases.',
-			tag: 'Your code stays yours',
-		},
-		{
-			icon: '🚀',
-			title: 'Zero Config',
-			description: 'Works out of the box with sensible defaults. Customize with <code class="text-[var(--accent)] font-mono text-[13px]">.cora.yaml</code> when you need more control.',
-			tag: 'Works immediately',
-		},
-		{
-			icon: '🦀',
-			title: 'Built in Rust',
-			description: 'Single binary, no runtime dependencies, cross-platform. macOS, Linux, Windows — one download, done.',
-			tag: 'Single binary',
-		},
+			desc: 'GitHub native',
+			detail: 'GitHub Actions composite action, SARIF upload, PR comments, blocking on error. Works in any CI/CD pipeline.'
+		}
 	];
 
-	// ---- Comparison table ----
-	const competitors = [
-		{ feature: 'Free forever', cora: '✅ MIT', coderabbit: '❌ $12/mo+', copilot: '❌ $10/mo+', sonarqube: '❌ $150+/mo' },
+	const comparisons: Comparison[] = [
+		{ feature: 'Pricing', cora: '✅ Free (MIT)', coderabbit: '❌ $12/mo+', copilot: '❌ $10/mo+', sonarqube: '❌ $150+/mo' },
 		{ feature: 'BYOK', cora: '✅ Any LLM', coderabbit: '❌ No', copilot: '❌ No', sonarqube: '❌ No' },
 		{ feature: 'Pre-commit hook', cora: '✅ Native', coderabbit: '❌ PR-only', copilot: '❌ PR-only', sonarqube: '❌ CI-only' },
 		{ feature: 'CLI-first', cora: '✅ Local', coderabbit: '❌ Cloud', copilot: '❌ Cloud', sonarqube: '❌ CI' },
 		{ feature: 'Zero telemetry', cora: '✅', coderabbit: '❌ Cloud', copilot: '❌ Cloud', sonarqube: '❌ Cloud' },
 		{ feature: 'Rules engine', cora: '✅ Deterministic', coderabbit: '❌ LLM-only', copilot: '❌ LLM-only', sonarqube: '❌ Static only' },
+		{ feature: 'Context chain', cora: '✅ Cross-file', coderabbit: '⚠️ Diff-only', copilot: '⚠️ Diff-only', sonarqube: '❌ No' },
+		{ feature: 'Privacy', cora: '✅ Local-first', coderabbit: '❌ Cloud', copilot: '❌ Cloud', sonarqube: '❌ Cloud' }
 	];
 
-	// ---- FAQ ----
-	const faqs = [
-		{
-			q: 'What is cora?',
-			a: 'cora is a CLI-first AI code review tool that catches bugs, security issues, and code quality problems before you commit. 100% open source under the MIT license.'
-		},
-		{
-			q: 'What providers are supported?',
-			a: 'Any OpenAI-compatible endpoint: OpenAI, Anthropic (via proxy), Groq, Ollama, vLLM, LiteLLM, and more. If it speaks the OpenAI API format, it works.'
-		},
-		{
-			q: 'Does cora work offline?',
-			a: 'cora runs entirely locally on your machine. It needs internet for LLM API calls (unless you use a local model like Ollama), but no code data is sent to any cora server — there is no cora server.'
-		},
-		{
-			q: 'How is this different from CodeRabbit?',
-			a: 'Four key differences: 1) CLI-first — review before you commit, not after the PR is opened. 2) BYOK — use any LLM, not locked to one provider. 3) Zero telemetry — no data leaves your machine. 4) Deterministic rules engine catches issues with zero token cost.'
-		},
+	const commands: Command[] = [
 		{
-			q: 'What is the rules engine?',
-			a: 'A pre-LLM layer that runs zero-cost regex rules against your diff before calling the LLM. It catches hardcoded secrets, SQL injection patterns, debug print statements, weak TLS configs, and more — without spending a single token.'
+			cmd: 'cora review --staged',
+			desc: 'Review staged changes before commit',
+			output: '🛡️  Rules engine: 3 files scanned\n    ✖ src/api/auth.ts:42  — hardcoded API key detected\n    ✖ src/db/query.ts:18  — potential SQL injection\n\n🤖  LLM review: GPT-4o-mini\n    ⚠ src/api/auth.ts:67  — missing error boundary\n\n✓ Review complete — 3 issues found'
 		},
 		{
-			q: 'Can I use cora in CI?',
-			a: 'Yes. There\'s a GitHub Actions composite action that runs cora review, uploads SARIF results to GitHub Code Scanning, posts PR comments, and can optionally block the PR on error findings.'
+			cmd: 'cora review --pr 42',
+			desc: 'Review an open pull request',
+			output: 'Fetching PR #42 diff... (12 files)\n🔗  Context chain: resolving 8 imports\n\n✓ Found 2 issues + 1 suggestion\n✓ SARIF uploaded to GitHub'
 		},
 		{
-			q: 'How do I track my review stats?',
-			a: 'Run <code class="text-[var(--accent)] font-mono text-[13px]">cora gain</code> for a local dashboard showing your review history, issues found, time saved, and streaks. All data stays on your machine.'
+			cmd: 'cora config set llm.model gpt-4o',
+			desc: 'Switch to a different model',
+			output: '✓ LLM model set to gpt-4o\n✓ Config saved to .cora.yaml'
 		},
 		{
-			q: 'Is it really free?',
-			a: '100% MIT license, no paid tiers, no account required, no telemetry. The only cost is your LLM API usage — and with the deterministic rules engine, most issues are caught before any LLM call.'
-		},
+			cmd: 'cora review --full',
+			desc: 'Full codebase review',
+			output: 'Scanning 247 files...\n🛡️  Rules: 5 violations (secrets, SQL)\n🤖  LLM: 12 issues across 8 files\n\n✓ Report written to .cora/review.json'
+		}
 	];
 
-	// ---- Repos using cora ----
-	const repos = [
-		{ name: 'gofin', desc: 'Finance CLI' },
-		{ name: 'bond', desc: 'Bond calculator' },
-		{ name: 'vivd', desc: 'Vivid terminal UI' },
-		{ name: 'uteke', desc: 'Task engine' },
-		{ name: 'termul', desc: 'Terminal multiplexer' },
-		{ name: 'agentboard', desc: 'Agent dashboard' },
+	let visibleCmd = $state(0);
+	let openFaq = $state<number | null>(null);
+
+	const faqs = [
+		{ q: 'What is cora?', a: 'cora is a CLI-first AI code review tool. It reviews your code before you commit using deterministic rules + LLM analysis, runs entirely locally, and uploads SARIF results to GitHub.' },
+		{ q: 'What providers are supported?', a: 'Any OpenAI-compatible endpoint — OpenAI, Anthropic, Groq, local models via Ollama, LiteLLM proxy, and more. You bring your own key.' },
+		{ q: 'Does cora work offline?', a: 'The rules engine works fully offline with zero API calls. LLM review requires network access to your chosen provider.' },
+		{ q: 'How is this different from CodeRabbit?', a: 'cora runs locally as a CLI, supports BYOK (use any LLM), has deterministic rules that catch issues before LLM review, and is free/open source (MIT). CodeRabbit is cloud-only with fixed pricing.' },
+		{ q: 'What is the rules engine?', a: 'A zero-cost regex-based scanner that catches secrets, SQL injection, TLS issues, and common anti-patterns BEFORE the LLM call. No tokens wasted on obvious bugs.' },
+		{ q: 'Can I use cora in CI?', a: 'Yes. GitHub Actions composite action, SARIF upload, PR comments, and blocking on error. Works in any CI/CD pipeline.' },
+		{ q: 'Is it really free?', a: 'Yes. MIT licensed, fully open source. No usage limits, no account required. You only pay for your own LLM API usage.' }
 	];
 
 	onMount(() => {
-		// Scroll reveal observer
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry) => {
-					if (entry.isIntersecting) {
-						entry.target.classList.add('revealed');
-						observer.unobserve(entry.target);
-					}
-				});
-			},
-			{ threshold: 0.1 }
-		);
-
-		document.querySelectorAll('.scroll-reveal').forEach((el) => observer.observe(el));
-
-		// Cycle through commands
 		const interval = setInterval(() => {
 			visibleCmd = (visibleCmd + 1) % commands.length;
 		}, 4000);
@@ -244,95 +119,90 @@
 
 <svelte:head>
 	<title>cora — AI Code Review CLI · Open Source · MIT</title>
-	<meta name="description" content="CLI-first AI code review. BYOK any LLM. Pre-commit hooks. Deterministic rules engine. Zero telemetry. Open source MIT license. Built in Rust." />
-	<link rel="canonical" href="https://codecora.dev" />
-
-	<!-- FAQPage Schema for Rich Snippets -->
-	<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is cora?","acceptedAnswer":{"@type":"Answer","text":"cora is a CLI-first AI code review tool that catches bugs, security issues, and code quality problems before you commit. 100% open source under the MIT license."}},{"@type":"Question","name":"What providers are supported?","acceptedAnswer":{"@type":"Answer","text":"Any OpenAI-compatible endpoint: OpenAI, Anthropic (via proxy), Groq, Ollama, vLLM, LiteLLM, and more."}},{"@type":"Question","name":"Does cora work offline?","acceptedAnswer":{"@type":"Answer","text":"cora runs entirely locally. It needs internet for LLM API calls (unless using a local model like Ollama), but no code data is sent to any cora server."}},{"@type":"Question","name":"How is this different from CodeRabbit?","acceptedAnswer":{"@type":"Answer","text":"CLI-first (before commit, not after PR), BYOK, zero telemetry, deterministic rules engine."}},{"@type":"Question","name":"What is the rules engine?","acceptedAnswer":{"@type":"Answer","text":"A pre-LLM layer that runs zero-cost regex rules to catch secrets, SQL injection, debug prints, weak TLS configs without spending tokens."}},{"@type":"Question","name":"Can I use cora in CI?","acceptedAnswer":{"@type":"Answer","text":"Yes. GitHub Actions composite action with SARIF upload, PR comments, and optional PR blocking."}},{"@type":"Question","name":"How do I track my review stats?","acceptedAnswer":{"@type":"Answer","text":"Run cora gain for a local dashboard showing review history, issues found, time saved, and streaks."}},{"@type":"Question","name":"Is it really free?","acceptedAnswer":{"@type":"Answer","text":"100% MIT license, no paid tiers, no account required, no telemetry."}}]}</script>
-
-	<meta property="og:title" content="cora — AI Code Review CLI · v0.4 · Open Source · MIT" />
-	<meta property="og:description" content="CLI-first AI code review. BYOK any LLM. Pre-commit hooks. Deterministic rules engine. Zero telemetry. Open source MIT license." />
+	<meta name="description" content="CLI-first AI code review. Runs locally, BYOK any LLM, deterministic rules engine, pre-commit hooks. Free, open source, MIT license." />
+	<meta property="og:title" content="cora — AI Code Review CLI" />
+	<meta property="og:description" content="Ship with confidence. AI code review before you commit. CLI-first, BYOK, deterministic rules." />
+	<meta property="og:type" content="website" />
+	<meta property="og:image" content="/og.png" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="cora — AI Code Review CLI" />
+	<meta name="twitter:description" content="Ship with confidence. AI code review before you commit." />
+	<meta name="twitter:image" content="/og.png" />
 </svelte:head>
 
-<!-- ====== HERO ====== -->
+<!-- Hero -->
 <section class="grid-bg relative overflow-hidden">
-	<!-- Subtle top gradient -->
-	<div class="absolute inset-0 bg-gradient-to-b from-purple-950/10 to-transparent pointer-events-none"></div>
+	<div class="absolute inset-0 bg-gradient-to-b from-[oklch(0.45_0.12_270_/_0.08)] to-transparent pointer-events-none"></div>
 
-	<div class="relative max-w-6xl mx-auto px-6 pt-24 md:pt-36 pb-20 text-center">
+	<div class="relative max-w-4xl mx-auto px-6 pt-24 md:pt-36 pb-20 text-center">
 		<!-- Badge -->
 		<div class="animate-fade-in inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[var(--border)] bg-[var(--card)] text-xs text-[var(--muted-foreground)] mb-8">
 			<span class="w-2 h-2 rounded-full bg-[var(--success)]"></span>
 			<span>v0.4 released</span>
-			<span class="text-[var(--muted-foreground)]">—</span>
-			<a href="https://github.com/codecoradev/cora-cli" target="_blank" rel="noopener" class="text-[var(--accent)] hover:underline">release notes →</a>
+			<span class="text-[var(--border)]">—</span>
+			<a href="https://github.com/codecoradev/cora-cli/releases" target="_blank" rel="noopener" class="text-[var(--accent)] hover:underline">release notes →</a>
 		</div>
 
 		<!-- Headline -->
 		<h1 class="animate-fade-in-delay-1 text-4xl sm:text-5xl md:text-7xl font-bold tracking-tight mb-6 leading-[1.1]">
-			Ship with Confidence.<br />
-			<span class="hero-gradient glow-text">AI Code Review, Before You Commit.</span>
+			Ship with<br />
+			<span class="hero-gradient glow-text">Confidence.</span>
 		</h1>
 
 		<!-- Subheadline -->
 		<p class="animate-fade-in-delay-2 text-base md:text-xl text-[var(--muted-foreground)] max-w-2xl mx-auto mb-10 leading-relaxed">
-			CLI-first AI code review. <strong class="text-[var(--foreground)]">BYOK any LLM, zero telemetry, open source.</strong>
+			AI code review, <strong class="text-[var(--foreground)]">before you commit.</strong><br class="hidden md:block" />
+			CLI-first, BYOK any LLM, deterministic rules, fully open source.
 		</p>
 
 		<!-- Install command -->
 		<div class="animate-fade-in-delay-3 inline-flex flex-col items-center gap-4">
 			<div class="terminal-block inline-flex items-center gap-3 px-5 py-3.5 rounded-xl font-mono text-sm glow-purple">
 				<span class="text-[var(--success)]">$</span>
-				<span class="hidden sm:inline text-[var(--foreground)]">curl -fsSL https://raw.githubusercontent.com/codecoradev/cora-cli/main/install.sh | sh</span>
-				<span class="sm:hidden text-[var(--foreground)]">curl -fsSL .../install.sh | sh</span>
+				<span class="text-[var(--foreground)]">curl -fsSL https://cora.dev/install.sh | sh</span>
 				<button
 					class="text-[var(--muted-foreground)] hover:text-[var(--accent)] transition-colors ml-2"
-					onclick={() => navigator.clipboard.writeText(installCmd)}
+					onclick={() => navigator.clipboard.writeText('curl -fsSL https://cora.dev/install.sh | sh')}
 					title="Copy"
 				>
 					<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
-						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+						<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
 					</svg>
 				</button>
 			</div>
 
-			<div class="flex items-center gap-3 text-sm">
+			<div class="flex items-center gap-4 text-sm">
+				<span class="text-[var(--muted-foreground)]">MIT License</span>
+				<span class="text-[var(--border)]">·</span>
+				<span class="text-[var(--muted-foreground)]">No account</span>
+				<span class="text-[var(--border)]">·</span>
+				<span class="text-[var(--muted-foreground)]">No telemetry</span>
+			</div>
+
+			<div class="flex items-center gap-3 mt-2">
 				<a
 					href="https://github.com/codecoradev/cora-cli"
 					target="_blank"
 					rel="noopener"
 					class="cta-primary inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[var(--accent)] text-[var(--accent-foreground)] font-semibold text-sm"
 				>
-					<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+					<svg class="w-4 h-4" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" /></svg>
 					GitHub
 				</a>
 				<a
-					href="/docs/getting-started"
+					href="/docs"
 					class="cta-secondary inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border border-[var(--border)] text-[var(--muted-foreground)] font-medium text-sm"
 				>
 					Install & Get Started
 				</a>
 			</div>
 		</div>
-
-		<!-- Trust line -->
-		<p class="mt-8 animate-fade-in-delay-4 text-xs text-[var(--muted-foreground)] tracking-wide">
-			<span class="flex items-center justify-center flex-wrap gap-x-4 gap-y-1">
-				<span>MIT License</span>
-				<span>·</span>
-				<span>No account</span>
-				<span>·</span>
-				<span>No telemetry</span>
-				<span>·</span>
-				<span>Rust & WebAssembly</span>
-			</span>
-		</p>
 	</div>
 </section>
 
-<!-- ====== TERMINAL DEMO (Cycling Commands) ====== -->
-<section class="max-w-6xl mx-auto px-6 -mt-4 pb-16 md:pb-24">
+<!-- Terminal Demo -->
+<section class="max-w-4xl mx-auto px-6 -mt-4 pb-16 md:pb-24">
 	<div class="terminal-block rounded-2xl overflow-hidden glow-purple">
 		<!-- Title bar -->
 		<div class="flex items-center gap-2 px-4 py-3 border-b border-[var(--border)] bg-[var(--card)]">
@@ -341,23 +211,23 @@
 				<div class="w-3 h-3 rounded-full bg-yellow-500/60"></div>
 				<div class="w-3 h-3 rounded-full bg-green-500/60"></div>
 			</div>
-			<span class="text-xs text-[var(--muted-foreground)] ml-2 font-mono">cora v0.4 — AI code review engine</span>
+			<span class="text-xs text-[var(--muted-foreground)] ml-2 font-mono">cora — AI code review engine</span>
 		</div>
 
 		<!-- Terminal content -->
-		<div class="p-5 md:p-6 font-mono text-sm space-y-3 min-h-[260px]">
+		<div class="p-5 md:p-6 font-mono text-sm space-y-3 min-h-[200px]">
 			{#each commands as c, i}
-				<div class="transition-all duration-300 {i === visibleCmd ? 'opacity-100' : 'opacity-30'}">
+				<div class="transition-all duration-300 {i === visibleCmd ? 'opacity-100' : 'opacity-25'}">
 					{#if i === visibleCmd}
 						<div class="flex items-start gap-2">
 							<span class="text-[var(--success)] select-none">❯</span>
 							<div>
 								<span class="cmd-highlight">{c.cmd.split(' ')[0]}</span>
-								<span class="cmd-flag"> {c.cmd.split(' ').slice(1).join(' ')}</span>
+								<span class="text-[var(--foreground)]"> {c.cmd.split(' ').slice(1).join(' ')}</span>
 							</div>
 						</div>
-						<p class="text-[var(--muted-foreground)] ml-5 mt-0.5 text-xs cmd-comment"># {c.desc}</p>
-						<div class="ml-5 mt-2 text-[var(--muted-foreground)] text-xs whitespace-pre-wrap leading-relaxed">{c.output}</div>
+						<p class="text-[var(--muted-foreground)] ml-5 mt-0.5 text-xs"># {c.desc}</p>
+						<div class="ml-5 mt-2 text-[var(--muted-foreground)] text-xs whitespace-pre-line">{c.output}</div>
 					{:else}
 						<div class="flex items-start gap-2">
 							<span class="text-[var(--muted-foreground)] select-none">❯</span>
@@ -370,9 +240,9 @@
 	</div>
 </section>
 
-<!-- ====== SOCIAL PROOF ====== -->
-<section class="max-w-6xl mx-auto px-6 py-10 text-center">
-	<div class="flex flex-wrap items-center justify-center gap-8 text-[var(--muted-foreground)]">
+<!-- Social Proof -->
+<section class="max-w-4xl mx-auto px-6 py-10 text-center">
+	<div class="flex flex-wrap items-center justify-center gap-6 text-[var(--muted-foreground)]">
 		<div class="flex items-center gap-2">
 			<span class="text-xl">🦀</span>
 			<span class="text-sm">Built with Rust</span>
@@ -402,56 +272,63 @@
 
 <div class="separator-gradient"></div>
 
-<!-- ====== PROBLEM / SOLUTION CARDS ====== -->
-<section class="max-w-6xl mx-auto px-6 py-16 md:py-24">
+<!-- Problem → Solution -->
+<section class="max-w-4xl mx-auto px-6 py-16 md:py-24">
 	<div class="max-w-3xl mx-auto text-center">
 		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase">The Problem</p>
 		<h2 class="text-2xl md:text-4xl font-bold mb-6">
-			Code review shouldn't be<br />slow or expensive
+			Code review shouldn't be<br />
+			<span class="hero-gradient">slow or expensive</span>
 		</h2>
 		<p class="text-base md:text-lg text-[var(--muted-foreground)] leading-relaxed mb-12">
-			Stop waiting hours for feedback. cora catches issues in seconds — <span class="text-[var(--foreground)]">before you commit.</span>
+			Stop waiting hours for feedback. cora catches issues in seconds — <strong class="text-[var(--foreground)]">before you commit.</strong>
 		</p>
 	</div>
 
-	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
-		{#each comparisons as comp, i}
-			<div class="grid gap-4 scroll-reveal" style="transition-delay: {i * 100}ms;">
-				<!-- Problem card -->
-				<div class="feature-card rounded-xl p-6 border border-[var(--border)] bg-[var(--card)]">
-					<div class="flex items-center gap-3 text-[var(--destructive)]">
-						<span>✕</span>
-						<span class="font-semibold">{comp.problem}</span>
-					</div>
+	<div class="max-w-3xl mx-auto">
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+			<!-- Before -->
+			<div class="terminal-block rounded-xl p-5">
+				<p class="text-xs font-medium text-red-400 mb-3">❌ Without cora</p>
+				<div class="font-mono text-xs space-y-2 text-[var(--muted-foreground)]">
+					<p>> Waiting for PR review...</p>
+					<p class="text-red-400/70">Still waiting (4 hours)</p>
+					<p>> Reviewer missed the SQL injection</p>
+					<p class="text-red-400/70">Merged to production with bug</p>
+					<p>> Now paying $12/mo per reviewer seat</p>
 				</div>
-				<!-- Solution card -->
-				<div class="feature-card rounded-xl p-6 border" style="background: oklch(0.72 0.19 145 / 0.05); border-color: oklch(0.72 0.19 145 / 0.2);">
-					<div class="flex items-center gap-3 text-[var(--success)]">
-						<span>✓</span>
-						<span class="font-semibold">{comp.solution}</span>
-					</div>
+			</div>
+
+			<!-- After -->
+			<div class="terminal-block rounded-xl p-5" style="border-color: var(--accent-dim);">
+				<p class="text-xs font-medium text-[var(--success)] mb-3">✅ With cora</p>
+				<div class="font-mono text-xs space-y-2">
+					<p class="text-[var(--muted-foreground)]">> git commit -m "feat: auth"</p>
+					<p class="text-[var(--success)]">cora review: 2 issues found (0.8s)</p>
+					<p class="text-[var(--muted-foreground)]">> Fixed both issues, committed</p>
+					<p class="text-[var(--success)]">Zero cost. Zero waiting. Zero bugs shipped.</p>
 				</div>
 			</div>
-		{/each}
+		</div>
 	</div>
 </section>
 
 <div class="separator-gradient"></div>
 
-<!-- ====== FEATURES GRID ====== -->
-<section class="max-w-6xl mx-auto px-6 py-16 md:py-24">
+<!-- Features -->
+<section class="max-w-4xl mx-auto px-6 py-16 md:py-24">
 	<div class="text-center mb-14">
-		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase scroll-reveal">Features</p>
-		<h2 class="text-2xl md:text-4xl font-bold scroll-reveal">Everything you need.<br />Nothing you don't.</h2>
+		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase">Features</p>
+		<h2 class="text-2xl md:text-4xl font-bold">Everything you need.<br />Nothing you don't.</h2>
 	</div>
 
 	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-		{#each features as feat, i}
-			<div class="feature-card p-6 rounded-xl border border-[var(--border)] bg-[var(--card)] scroll-reveal" style="transition-delay: {i * 60}ms;">
+		{#each features as feat}
+			<div class="feature-card p-6 rounded-xl border border-[var(--border)] bg-[var(--card)]">
 				<span class="text-2xl">{feat.icon}</span>
 				<h3 class="text-lg font-semibold mt-3 mb-1">{feat.title}</h3>
-				<p class="text-sm text-[var(--accent)] mb-2">{feat.tag}</p>
-				<p class="text-sm text-[var(--muted-foreground)] leading-relaxed">{@html feat.description}</p>
+				<p class="text-sm text-[var(--accent)] mb-2">{feat.desc}</p>
+				<p class="text-sm text-[var(--muted-foreground)] leading-relaxed">{feat.detail}</p>
 			</div>
 		{/each}
 	</div>
@@ -459,80 +336,61 @@
 
 <div class="separator-gradient"></div>
 
-<!-- ====== QUICK START / HOW IT WORKS ====== -->
-<section class="grid-bg relative">
-	<div class="max-w-6xl mx-auto px-6 py-16 md:py-24 relative z-10">
-		<div class="text-center mb-14">
-			<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase scroll-reveal">Get Started</p>
-			<h2 class="text-2xl md:text-4xl font-bold scroll-reveal">Three steps to<br />confident commits</h2>
-		</div>
+<!-- Quick Start -->
+<section class="max-w-4xl mx-auto px-6 py-16 md:py-24">
+	<div class="text-center mb-14">
+		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase">Get Started</p>
+		<h2 class="text-2xl md:text-4xl font-bold">Three steps to<br />confident commits</h2>
+	</div>
 
-		<div class="max-w-2xl mx-auto space-y-6">
-			<div class="flex gap-4 scroll-reveal">
-				<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent)]">1</div>
-				<div class="min-w-0 flex-1">
-					<p class="font-medium mb-2">Install</p>
-					<code class="block px-4 py-3 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm font-mono text-[var(--muted-foreground)] overflow-x-auto">
-						<span class="cmd-highlight">curl</span> -fsSL .../install.sh <span class="cmd-flag">|</span> sh
-					</code>
-				</div>
+	<div class="max-w-2xl mx-auto space-y-6">
+		<div class="flex gap-4">
+			<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent-bright)]">1</div>
+			<div class="min-w-0 flex-1">
+				<p class="font-medium mb-2">Install</p>
+				<code class="block px-4 py-3 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm font-mono text-[var(--muted-foreground)] overflow-x-auto">
+					<span class="cmd-highlight">curl</span> -fsSL https://cora.dev/install.sh <span class="cmd-flag">|</span> sh
+				</code>
 			</div>
-			<div class="flex gap-4 scroll-reveal">
-				<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent)]">2</div>
-				<div class="min-w-0 flex-1">
-					<p class="font-medium mb-2">Configure</p>
-					<code class="block px-4 py-3 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm font-mono text-[var(--muted-foreground)] overflow-x-auto">
-						<span class="cmd-highlight">cora</span> init
-					</code>
-				</div>
-			</div>
-			<div class="flex gap-4 scroll-reveal">
-				<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent)]">3</div>
-				<div class="min-w-0 flex-1">
-					<p class="font-medium mb-2">Review</p>
-					<code class="block px-4 py-3 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm font-mono text-[var(--muted-foreground)] overflow-x-auto">
-						<span class="cmd-highlight">cora review</span> <span class="cmd-flag">--staged</span>
-					</code>
-				</div>
+		</div>
+		<div class="flex gap-4">
+			<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent-bright)]">2</div>
+			<div class="min-w-0 flex-1">
+				<p class="font-medium mb-2">Configure your LLM</p>
+				<code class="block px-4 py-3 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm font-mono text-[var(--muted-foreground)] overflow-x-auto">
+					<span class="cmd-highlight">cora</span> init
+				</code>
 			</div>
-			<div class="flex gap-4 scroll-reveal">
-				<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--success)]/20 flex items-center justify-center text-sm font-bold text-[var(--success)]">✓</div>
-				<div class="min-w-0 flex-1">
-					<p class="font-medium text-[var(--success)]">That's it. No account. No server. No lock-in.</p>
-					<p class="text-sm text-[var(--muted-foreground)] mt-1">Works out of the box with sensible defaults. Customize with <code class="text-[var(--accent)] font-mono text-[12px]">.cora.yaml</code> when you need more control.</p>
-				</div>
+		</div>
+		<div class="flex gap-4">
+			<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent-bright)]">3</div>
+			<div class="min-w-0 flex-1">
+				<p class="font-medium mb-2">Review your code</p>
+				<code class="block px-4 py-3 rounded-lg bg-[var(--card)] border border-[var(--border)] text-sm font-mono text-[var(--muted-foreground)] overflow-x-auto">
+					<span class="cmd-highlight">cora</span> review <span class="cmd-flag">--staged</span>
+				</code>
 			</div>
 		</div>
-	</div>
-</section>
-
-<div class="separator-gradient"></div>
-
-<!-- ====== REPOS USING CORA ====== -->
-<section class="max-w-6xl mx-auto px-6 py-16 md:py-24">
-	<p class="text-center scroll-reveal text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-widest">
-		Trusted across 13 repositories
-	</p>
-	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-8 max-w-4xl mx-auto">
-		{#each repos as repo, i}
-			<div class="feature-card text-center scroll-reveal py-6 rounded-xl border border-[var(--border)] bg-[var(--card)]" style="transition-delay: {i * 60}ms;">
-				<div class="text-base font-semibold text-[var(--foreground)] -tracking-tight">{repo.name}</div>
-				<div class="text-xs text-[var(--muted-foreground)] mt-1">{repo.desc}</div>
+		<div class="flex gap-4">
+			<div class="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--accent-dim)] flex items-center justify-center text-sm font-bold text-[var(--accent)]">✓</div>
+			<div class="min-w-0 flex-1">
+				<p class="font-medium text-[var(--success)]">That's it. No account. No server. No lock-in.</p>
+				<p class="text-sm text-[var(--muted-foreground)] mt-1">Works out of the box with sensible defaults. Customize with <code class="font-mono">.cora.yaml</code> when you need more control.</p>
 			</div>
-		{/each}
+		</div>
 	</div>
 </section>
 
 <div class="separator-gradient"></div>
 
-<!-- ====== COMPARISON TABLE ====== -->
-<section class="max-w-6xl mx-auto px-6 py-16 md:py-24">
+<!-- Comparison -->
+<section class="max-w-4xl mx-auto px-6 py-16 md:py-24">
 	<div class="text-center mb-14">
-		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase scroll-reveal">Compare</p>
-		<h2 class="text-2xl md:text-4xl font-bold scroll-reveal">Why developers choose cora</h2>
+		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase">Compare</p>
+		<h2 class="text-2xl md:text-4xl font-bold">Why developers choose cora</h2>
 	</div>
 
-	<div class="overflow-x-auto rounded-xl border border-[var(--border)] scroll-reveal">
+	<div class="overflow-x-auto rounded-xl border border-[var(--border)]">
 		<table class="compare-table w-full text-sm">
 			<thead>
 				<tr class="border-b border-[var(--border)]">
@@ -544,13 +402,13 @@
 				</tr>
 			</thead>
 			<tbody>
-				{#each competitors as row}
+				{#each comparisons as row}
 					<tr class="border-b border-[var(--border-subtle)] hover:bg-[var(--card)] transition-colors">
 						<td class="px-4 py-3 text-[var(--muted-foreground)]">{row.feature}</td>
-						<td class="highlight-col px-4 py-3 text-center font-medium">{@html row.cora}</td>
-						<td class="px-4 py-3 text-center text-[var(--muted-foreground)] hidden sm:table-cell">{@html row.coderabbit}</td>
-						<td class="px-4 py-3 text-center text-[var(--muted-foreground)] hidden md:table-cell">{@html row.copilot}</td>
-						<td class="px-4 py-3 text-center text-[var(--muted-foreground)] hidden lg:table-cell">{@html row.sonarqube}</td>
+						<td class="highlight-col px-4 py-3 text-center font-medium">{row.cora}</td>
+						<td class="px-4 py-3 text-center text-[var(--muted-foreground)] hidden sm:table-cell">{row.coderabbit}</td>
+						<td class="px-4 py-3 text-center text-[var(--muted-foreground)] hidden md:table-cell">{row.copilot}</td>
+						<td class="px-4 py-3 text-center text-[var(--muted-foreground)] hidden lg:table-cell">{row.sonarqube}</td>
 					</tr>
 				{/each}
 			</tbody>
@@ -560,82 +418,55 @@
 
 <div class="separator-gradient"></div>
 
-<!-- ====== FAQ ACCORDION ====== -->
-<section class="max-w-6xl mx-auto px-6 py-16 md:py-24" id="faq">
-	<div class="max-w-3xl mx-auto">
-		<div class="text-center">
-			<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase scroll-reveal">FAQ</p>
-			<h2 class="text-2xl md:text-4xl font-bold scroll-reveal">Frequently asked questions</h2>
-		</div>
+<!-- FAQ -->
+<section class="max-w-4xl mx-auto px-6 py-16 md:py-24">
+	<div class="text-center mb-14">
+		<p class="text-sm font-medium text-[var(--accent)] mb-4 tracking-wide uppercase">FAQ</p>
+		<h2 class="text-2xl md:text-4xl font-bold">Frequently asked questions</h2>
+	</div>
 
-		<div class="mt-10 flex flex-col gap-3">
-			{#each faqs as faq, index}
-				<div class="scroll-reveal" style="transition-delay: {index * 50}ms;">
-					<div class="feature-card rounded-xl border overflow-hidden" style="background: var(--card); border-color: var(--border);">
-						<button
-							onclick={() => toggleFAQ(index)}
-							class="w-full px-6 py-5 text-left flex items-center justify-between gap-4 cursor-pointer hover:opacity-80 transition-opacity"
-							aria-expanded={openFAQIndex === index}
-						>
-							<span class="font-semibold text-sm sm:text-base text-[var(--foreground)]">{faq.q}</span>
-							<span class="text-xl text-[var(--muted-foreground)] flex-shrink-0 transition-transform duration-300" style="transform: {openFAQIndex === index ? 'rotate(45deg)' : 'rotate(0deg)'}">
-								+
-							</span>
-						</button>
-						{#if openFAQIndex === index}
-							<div class="px-6 pb-5 text-sm text-[var(--muted-foreground)] leading-relaxed border-t" style="border-color: var(--border);">
-								<div class="pt-4">{@html faq.a}</div>
-							</div>
-						{/if}
-					</div>
+	<div class="max-w-2xl mx-auto space-y-3">
+		{#each faqs as faq, i}
+			<button
+				class="feature-card w-full text-left px-5 py-4 rounded-xl border border-[var(--border)] bg-[var(--card)]"
+				onclick={() => openFaq = openFaq === i ? null : i}
+			>
+				<div class="flex items-center justify-between gap-4">
+					<span class="font-medium text-sm">{faq.q}</span>
+					<span class="text-[var(--muted-foreground)] transition-transform duration-200 {openFaq === i ? 'rotate-45' : ''}">+</span>
 				</div>
-			{/each}
-		</div>
+				{#if openFaq === i}
+					<p class="text-sm text-[var(--muted-foreground)] mt-3 leading-relaxed">{faq.a}</p>
+				{/if}
+			</button>
+		{/each}
 	</div>
 </section>
 
 <div class="separator-gradient"></div>
 
-<!-- ====== FINAL CTA ====== -->
-<section class="max-w-6xl mx-auto px-6 py-20 md:py-28 text-center">
-	<h2 class="text-2xl md:text-4xl font-bold mb-4 scroll-reveal">
-		Start Shipping<br />
-		<span class="hero-gradient">Better Code</span>
+<!-- CTA -->
+<section class="max-w-4xl mx-auto px-6 py-20 md:py-28 text-center">
+	<h2 class="text-2xl md:text-4xl font-bold mb-4">
+		Ready to ship<br />
+		<span class="hero-gradient">better code?</span>
 	</h2>
-	<p class="text-[var(--muted-foreground)] mb-8 text-base scroll-reveal">Free forever · No account required · Open source MIT</p>
-	<div class="flex items-center justify-center gap-4 scroll-reveal">
+	<p class="text-[var(--muted-foreground)] mb-8 text-base">Free forever · No account required · Start in 30 seconds</p>
+	<div class="flex items-center justify-center gap-4">
 		<a
 			href="https://github.com/codecoradev/cora-cli"
 			target="_blank"
 			rel="noopener"
 			class="cta-primary inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[var(--accent)] text-[var(--accent-foreground)] font-semibold"
 		>
-			<svg class="w-5 h-5" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+			<svg class="w-5 h-5" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" /></svg>
 			Star on GitHub
 		</a>
 		<a
-			href="/docs/getting-started"
+			href="/docs"
 			class="cta-secondary inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-[var(--border)] text-[var(--muted-foreground)] font-medium"
 		>
 			Read the Docs
 		</a>
 	</div>
 </section>
-
-<!-- ====== FOOTER ====== -->
-<div class="separator-gradient"></div>
-<footer style="background: var(--background);">
-	<div class="max-w-6xl mx-auto px-6 py-8">
-		<div class="flex flex-col md:flex-row items-center justify-between gap-4">
-			<div class="flex items-center gap-3">
-				<span class="text-sm font-semibold text-[var(--foreground)]">cora</span>
-				<span class="text-xs text-[var(--muted-foreground)]">v0.4 · MIT License</span>
-			</div>
-			<div class="flex items-center gap-6">
-				<a href="https://github.com/codecoradev/cora-cli" target="_blank" rel="noopener" class="text-sm text-[var(--muted-foreground)] no-underline transition-colors duration-200 min-h-11 inline-flex items-center hover:text-[var(--foreground)]">GitHub</a>
-				<a href="/docs" class="text-sm text-[var(--muted-foreground)] no-underline transition-colors duration-200 min-h-11 inline-flex items-center hover:text-[var(--foreground)]">Docs</a>
-				<a href="#faq" class="text-sm text-[var(--muted-foreground)] no-underline transition-colors duration-200 min-h-11 inline-flex items-center hover:text-[var(--foreground)]">FAQ</a>
-			</div>
-		</div>
-	</div>
-</footer>

From 9490b7e27774765c38f102ca28fadeb0a1c38749 Mon Sep 17 00:00:00 2001
From: "Zeko (Hermes)" <zeko@hermes.local>
Date: Fri, 5 Jun 2026 07:24:17 +0700
Subject: [PATCH 2/2] fix: restore docs CSS + fix FAQ invalid HTML
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restore all docs layout styles (docs-sidebar, docs-content,
  docs-card, docs-terminal, mobile-docs-nav) accidentally removed
- Restore CSS custom properties needed by docs (--space-*, --font-*,
  --destructive, --warning, @theme tokens)
- Fix FAQ accordion: <button> wrapping <p> → <div role=button> with
  <span> content (valid HTML + keyboard accessible)
---
 website/src/app.css             | 348 +++++++++++++++++++++++++++++++-
 website/src/routes/+page.svelte |  11 +-
 2 files changed, 351 insertions(+), 8 deletions(-)

diff --git a/website/src/app.css b/website/src/app.css
index fb707c41..eb16a7aa 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -9,6 +9,7 @@
 	--background: oklch(0.13 0.01 270);
 	--foreground: oklch(0.92 0.01 270);
 	--card: oklch(0.17 0.01 270);
+	--card-foreground: oklch(0.92 0.01 270);
 	--muted: oklch(0.22 0.01 270);
 	--muted-foreground: oklch(0.65 0.01 270);
 	--accent: oklch(0.65 0.22 270);
@@ -16,14 +17,56 @@
 	--accent-foreground: oklch(0.98 0 0);
 	--accent-dim: oklch(0.45 0.12 270);
 	--success: oklch(0.72 0.19 145);
+	--warning: oklch(0.78 0.15 85);
+	--destructive: oklch(0.55 0.22 25);
 	--border: oklch(0.27 0.01 270);
 	--border-subtle: oklch(0.22 0.01 270);
+	--ring: oklch(0.65 0.22 270);
+	--shadow-card: 0 1px 3px oklch(0 0 0 / 0.3);
+	--shadow-card-hover: 0 4px 12px oklch(0 0 0 / 0.4);
+
+	--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+
+	/* 8px Spacing Scale */
+	--space-0: 0;
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.25rem;
+	--space-6: 1.5rem;
+	--space-8: 2rem;
+	--space-10: 2.5rem;
+	--space-12: 3rem;
+	--space-16: 4rem;
+	--space-20: 5rem;
+	--space-24: 6rem;
+	--space-32: 8rem;
+}
+
+@theme {
+	--color-background: oklch(0.13 0.01 270);
+	--color-foreground: oklch(0.92 0.01 270);
+	--color-card: oklch(0.17 0.01 270);
+	--color-card-foreground: oklch(0.92 0.01 270);
+	--color-muted: oklch(0.22 0.01 270);
+	--color-muted-muted-foreground: oklch(0.65 0.01 270);
+	--color-accent: oklch(0.65 0.22 270);
+	--color-accent-foreground: oklch(0.98 0 0);
+	--color-success: oklch(0.72 0.19 145);
+	--color-warning: oklch(0.78 0.15 85);
+	--color-destructive: oklch(0.55 0.22 25);
+	--color-border: oklch(0.27 0.01 270);
+	--color-ring: oklch(0.65 0.22 270);
+	--font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
+	--font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
 }
 
 html {
 	background-color: var(--background);
 	color: var(--foreground);
-	font-family: 'Inter', system-ui, -apple-system, sans-serif;
+	font-family: var(--font-sans);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	scroll-behavior: smooth;
@@ -40,7 +83,7 @@ body {
 }
 
 code, .font-mono {
-	font-family: 'JetBrains Mono', ui-monospace, monospace;
+	font-family: var(--font-mono);
 }
 
 /* ---- Scrollbar ---- */
@@ -154,7 +197,7 @@ code, .font-mono {
 	padding: 0.5rem 1.25rem;
 	font-weight: 600;
 	font-size: 14px;
-	font-family: 'Inter', system-ui, sans-serif;
+	font-family: var(--font-sans);
 	min-height: 44px;
 	border: none;
 	cursor: pointer;
@@ -183,7 +226,7 @@ code, .font-mono {
 	padding: 0.5rem 1.25rem;
 	font-weight: 500;
 	font-size: 14px;
-	font-family: 'Inter', system-ui, sans-serif;
+	font-family: var(--font-sans);
 	min-height: 44px;
 	cursor: pointer;
 	text-decoration: none;
@@ -247,3 +290,300 @@ code, .font-mono {
 .compare-table td.highlight-col {
 	background-color: var(--card);
 }
+
+/* ============================================
+   DOCS LAYOUT (preserved for docs pages)
+   ============================================ */
+
+.docs-sidebar {
+	position: sticky;
+	top: 3.5rem;
+	height: calc(100vh - 3.5rem);
+	overflow-y: auto;
+	width: 16rem;
+	flex-shrink: 0;
+	padding-top: var(--space-8);
+	border-right: 1px solid var(--border);
+}
+
+.docs-sidebar-link {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: var(--space-2) var(--space-3);
+	border-radius: var(--space-2);
+	color: var(--muted-foreground);
+	font-size: 14px;
+	text-decoration: none;
+	transition: background-color 0.15s ease, color 0.15s ease;
+	min-height: 44px;
+}
+
+.docs-sidebar-link:hover {
+	background: var(--muted);
+	color: var(--foreground);
+}
+
+.docs-sidebar-link.active {
+	background: oklch(0.65 0.22 270 / 0.1);
+	color: var(--accent);
+}
+
+.docs-content {
+	flex: 1;
+	min-width: 0;
+	padding: var(--space-8) var(--space-8) var(--space-16);
+}
+
+.docs-content h1 {
+	font-size: 2rem;
+	font-weight: 700;
+	letter-spacing: -0.025em;
+	line-height: 1.2;
+	margin-bottom: var(--space-4);
+	color: var(--foreground);
+}
+
+.docs-content h2 {
+	font-size: 1.375rem;
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	line-height: 1.3;
+	margin-top: var(--space-10);
+	margin-bottom: var(--space-4);
+	color: var(--foreground);
+}
+
+.docs-content h3 {
+	font-size: 1.125rem;
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	line-height: 1.4;
+	margin-top: var(--space-8);
+	margin-bottom: var(--space-3);
+	color: var(--foreground);
+}
+
+.docs-content p {
+	color: var(--muted-foreground);
+	font-size: 0.9375rem;
+	line-height: 1.7;
+	margin-bottom: var(--space-4);
+}
+
+.docs-content ul, .docs-content ol {
+	color: var(--muted-foreground);
+	font-size: 0.9375rem;
+	line-height: 1.7;
+	padding-left: var(--space-6);
+	margin-bottom: var(--space-4);
+}
+
+.docs-content li {
+	margin-bottom: var(--space-2);
+}
+
+.docs-content code:not(pre code) {
+	background: var(--muted);
+	color: var(--accent);
+	padding: 0.125rem 0.375rem;
+	border-radius: 0.25rem;
+	font-size: 0.8125rem;
+}
+
+.docs-content pre {
+	background: oklch(0.10 0 0);
+	border: 1px solid var(--border);
+	border-radius: var(--space-3);
+	padding: var(--space-5);
+	overflow-x: auto;
+	margin-bottom: var(--space-6);
+}
+
+.docs-content pre code {
+	font-family: var(--font-mono);
+	font-size: 0.8125rem;
+	line-height: 1.625;
+	color: var(--foreground);
+}
+
+.docs-content a {
+	color: var(--accent);
+	text-decoration: none;
+	transition: opacity 0.2s ease;
+}
+
+.docs-content a:hover {
+	opacity: 0.8;
+	text-decoration: underline;
+}
+
+/* ---- Docs Section ---- */
+.docs-section {
+	margin-top: var(--space-12);
+}
+
+.docs-section h2 {
+	font-size: 1.375rem;
+	font-weight: 600;
+	letter-spacing: -0.025em;
+	line-height: 1.3;
+	margin-bottom: var(--space-3);
+	color: var(--foreground);
+}
+
+.docs-section p {
+	color: var(--muted-foreground);
+	font-size: 0.9375rem;
+	line-height: 1.7;
+	margin-bottom: var(--space-4);
+}
+
+/* ---- Docs Card ---- */
+.docs-card {
+	display: flex;
+	align-items: center;
+	gap: var(--space-4);
+	padding: var(--space-4);
+	background: var(--card);
+	border-radius: var(--space-3);
+	border: 1px solid var(--border);
+}
+
+.docs-card-number {
+	width: var(--space-8);
+	height: var(--space-8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 9999px;
+	background: oklch(0.65 0.22 270 / 0.1);
+	color: var(--accent);
+	font-weight: 700;
+	font-size: 14px;
+	flex-shrink: 0;
+}
+
+.docs-card-number.primary {
+	background: oklch(0.65 0.22 270 / 0.15);
+	color: var(--accent);
+}
+
+.docs-card-number.muted {
+	background: var(--muted);
+	color: var(--muted-foreground);
+}
+
+/* ---- Docs Terminal ---- */
+.docs-terminal {
+	background: oklch(0.10 0 0);
+	border-radius: var(--space-3);
+	border: 1px solid var(--border);
+	overflow: hidden;
+	margin-bottom: var(--space-6);
+}
+
+.terminal-bar {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: var(--space-3) var(--space-4);
+	border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
+	background: oklch(0.10 0 0);
+}
+
+.terminal-bar span {
+	width: var(--space-2);
+	height: var(--space-2);
+	border-radius: 9999px;
+}
+
+.terminal-bar .terminal-dot-red { background: var(--destructive); }
+.terminal-bar .terminal-dot-yellow { background: var(--warning); }
+.terminal-bar .terminal-dot-green { background: var(--success); }
+
+/* ---- Docs utility classes ---- */
+.docs-term-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+	margin-bottom: var(--space-4);
+}
+
+.docs-term-item {
+	display: flex;
+	gap: var(--space-2);
+	font-size: 14px;
+	color: var(--muted-foreground);
+}
+
+.docs-term-key {
+	color: var(--accent);
+	font-family: var(--font-mono);
+	flex-shrink: 0;
+}
+
+.docs-term-value {
+	color: var(--muted-foreground);
+	font-size: 14px;
+}
+
+.docs-link-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.docs-link-list a {
+	font-size: 14px;
+	color: var(--accent);
+	text-decoration: none;
+}
+
+.docs-link-list a:hover {
+	text-decoration: underline;
+}
+
+/* ---- Mobile docs nav ---- */
+.mobile-docs-nav {
+	display: none;
+	position: sticky;
+	top: 3.5rem;
+	z-index: 20;
+	background: var(--background);
+	border-bottom: 1px solid var(--border);
+	padding: var(--space-2) var(--space-4);
+	overflow-x: auto;
+	white-space: nowrap;
+}
+
+.mobile-docs-nav a {
+	display: inline-block;
+	padding: var(--space-2) var(--space-3);
+	border-radius: var(--space-2);
+	color: var(--muted-foreground);
+	font-size: 14px;
+	text-decoration: none;
+	min-height: 44px;
+	line-height: 1.25;
+	transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.mobile-docs-nav a:hover {
+	background: var(--muted);
+	color: var(--foreground);
+}
+
+.mobile-docs-nav a.active {
+	background: oklch(0.65 0.22 270 / 0.1);
+	color: var(--accent);
+}
+
+@media (max-width: 767px) {
+	.docs-sidebar {
+		display: none;
+	}
+	.docs-content {
+		padding: var(--space-6) var(--space-4) var(--space-12);
+	}
+}
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 4ecde11c..14c351f6 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -427,18 +427,21 @@
 
 	<div class="max-w-2xl mx-auto space-y-3">
 		{#each faqs as faq, i}
-			<button
-				class="feature-card w-full text-left px-5 py-4 rounded-xl border border-[var(--border)] bg-[var(--card)]"
+			<div
+				class="feature-card w-full text-left px-5 py-4 rounded-xl border border-[var(--border)] bg-[var(--card)] cursor-pointer"
+				role="button"
+				tabindex="0"
 				onclick={() => openFaq = openFaq === i ? null : i}
+				onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openFaq = openFaq === i ? null : i; } }}
 			>
 				<div class="flex items-center justify-between gap-4">
 					<span class="font-medium text-sm">{faq.q}</span>
 					<span class="text-[var(--muted-foreground)] transition-transform duration-200 {openFaq === i ? 'rotate-45' : ''}">+</span>
 				</div>
 				{#if openFaq === i}
-					<p class="text-sm text-[var(--muted-foreground)] mt-3 leading-relaxed">{faq.a}</p>
+					<span class="text-sm text-[var(--muted-foreground)] mt-3 leading-relaxed block">{faq.a}</span>
 				{/if}
-			</button>
+			</div>
 		{/each}
 	</div>
 </section>