diff --git a/docs/index.html b/docs/index.html
index 3f73298..264073c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,29 +31,25 @@
   </script>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@700;800;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
 
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --bg:         #060c18;
-      --bg2:        #0b1525;
-      --bg3:        #101e34;
-      --border:     #18293e;
-      --border2:    #1f3451;
-      --cyan:       #00c8f0;
-      --cyan-dim:   rgba(0,200,240,0.1);
-      --cyan-glow:  rgba(0,200,240,0.25);
-      --purple:     #8b5cf6;
-      --purple-dim: rgba(139,92,246,0.1);
-      --green:      #3ecf8e;
-      --green-dim:  rgba(16,217,126,0.1);
-      --amber:      #f59e0b;
-      --text:       #dde8ff;
-      --text2:      #5c789e;
-      --text3:      #2e4462;
-      --mono:       'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;
+      --bg:         #09090b;
+      --bg2:        #111113;
+      --bg3:        #1a1a1f;
+      --border:     #27272a;
+      --border2:    #3f3f46;
+      --accent:     #6366f1;
+      --accent2:    #818cf8;
+      --accent-dim: rgba(99,102,241,0.1);
+      --green:      #22c55e;
+      --text:       #fafafa;
+      --text2:      #a1a1aa;
+      --text3:      #52525b;
+      --mono:       'DM Mono', monospace;
     }
 
     html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@@ -61,21 +57,12 @@
     body {
       background: var(--bg);
       color: var(--text);
-      font-family: 'Outfit', system-ui, sans-serif;
+      font-family: 'Inter', system-ui, sans-serif;
       line-height: 1.6;
       overflow-x: hidden;
     }
 
-    /* Noise texture overlay */
-    .dot-grid {
-      position: fixed;
-      inset: 0;
-      pointer-events: none;
-      z-index: 0;
-      opacity: .35;
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
-      background-size: 256px 256px;
-    }
+    h1, h2, .cta-title { font-family: 'Outfit', system-ui, sans-serif; }
 
     /* ── NAV ──────────────────────────────────────── */
     nav {
@@ -86,8 +73,8 @@
       align-items: center;
       justify-content: space-between;
       padding: 14px 48px;
-      border-bottom: 1px solid rgba(24,41,62,.6);
-      background: rgba(6,12,24,.72);
+      border-bottom: 1px solid rgba(39,39,42,.6);
+      background: rgba(9,9,11,.72);
       backdrop-filter: blur(18px) saturate(1.4);
       -webkit-backdrop-filter: blur(18px) saturate(1.4);
     }
@@ -101,27 +88,19 @@
       flex-shrink: 0;
     }
 
-    .nav-logo-mark {
-      width: 28px;
-      height: 28px;
-      flex-shrink: 0;
-    }
+    .nav-logo-mark { width: 28px; height: 28px; flex-shrink: 0; }
 
     .nav-name {
       font-size: 14px;
       font-weight: 700;
       letter-spacing: -0.01em;
     }
-    .nav-name em { color: var(--cyan); font-style: normal; }
+    .nav-name em { color: var(--accent2); font-style: normal; }
 
     .nav-center {
       display: flex;
       align-items: center;
-      gap: 2px;
-      background: rgba(16,30,52,.5);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 3px 4px;
+      gap: 4px;
     }
 
     .nav-right {
@@ -137,29 +116,29 @@
       gap: 6px;
       color: var(--text2);
       text-decoration: none;
-      font-size: 12.5px;
+      font-size: 13px;
       font-weight: 500;
       padding: 5px 11px;
       border-radius: 7px;
       transition: color .18s, background .18s;
       white-space: nowrap;
     }
-    .nav-link:hover { color: var(--text); background: rgba(0,200,240,.08); }
+    .nav-link:hover { color: var(--text); background: var(--accent-dim); }
     .nav-link.active { color: var(--text); background: var(--bg3); }
     .nav-link svg { width: 14px; height: 14px; }
 
     .nav-pip {
-      background: var(--cyan-dim);
-      color: var(--cyan);
-      border: 1px solid rgba(0,200,240,.28);
+      background: var(--accent-dim);
+      color: var(--accent2);
+      border: 1px solid rgba(99,102,241,.28);
       border-radius: 7px;
       padding: 5px 13px;
-      font-size: 12.5px;
+      font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       transition: background .18s, border-color .18s;
     }
-    .nav-pip:hover { background: rgba(0,200,240,.18); border-color: rgba(0,200,240,.5); }
+    .nav-pip:hover { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.5); }
 
     /* ── HERO ─────────────────────────────────────── */
     .hero-wrap {
@@ -167,31 +146,42 @@
       z-index: 1;
     }
 
-    .hero-glow {
-      position: absolute;
-      top: -180px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 1100px;
-      height: 700px;
-      pointer-events: none;
-      background:
-        radial-gradient(ellipse at 35% 45%, rgba(0,200,240,.07) 0%, transparent 55%),
-        radial-gradient(ellipse at 65% 35%, rgba(139,92,246,.05) 0%, transparent 50%),
-        radial-gradient(ellipse at 50% 60%, rgba(62,207,142,.03) 0%, transparent 45%);
-    }
-
     .hero {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 56px;
-      align-items: center;
-      max-width: 1180px;
+      max-width: 720px;
       margin: 0 auto;
-      padding: 76px 48px 64px;
+      padding: 100px 24px 60px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+    }
+
+    .hero-number {
+      font-family: 'Outfit', sans-serif;
+      font-size: 180px;
+      font-weight: 900;
+      line-height: 0.85;
+      letter-spacing: -0.06em;
+      background: linear-gradient(180deg, var(--text) 30%, var(--text3) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin: 24px 0 0;
     }
 
-    .hero-left { display: flex; flex-direction: column; gap: 28px; }
+    .hero-pct {
+      font-size: 100px;
+      letter-spacing: -0.02em;
+    }
+
+    .hero-claim {
+      font-size: 22px;
+      font-weight: 500;
+      color: var(--text2);
+      margin: 8px 0 32px;
+      letter-spacing: -0.01em;
+    }
 
     .hero-badge {
       display: inline-flex;
@@ -204,7 +194,6 @@
       font-size: 12px;
       font-weight: 500;
       color: var(--text2);
-      width: fit-content;
     }
     .badge-dot {
       width: 7px; height: 7px;
@@ -215,20 +204,29 @@
     }
     @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
 
-    .hero-title {
-      font-size: 62px;
-      font-weight: 800;
-      line-height: 1.08;
-      letter-spacing: -0.035em;
+    .hero-desc {
+      font-size: 16px;
+      color: var(--text3);
+      line-height: 1.7;
+      max-width: 480px;
+      margin-bottom: 36px;
     }
-    .hero-title .accent { color: var(--cyan); }
 
-    .hero-desc {
-      font-size: 17px;
+    .hero-actions {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      margin-top: 8px;
+    }
+
+    .hero-link {
       color: var(--text2);
-      line-height: 1.68;
-      max-width: 410px;
+      text-decoration: none;
+      font-size: 15px;
+      font-weight: 500;
+      transition: color .2s;
     }
+    .hero-link:hover { color: var(--text); }
 
     .install-row {
       display: flex;
@@ -238,7 +236,6 @@
       border: 1px solid var(--border2);
       border-radius: 10px;
       overflow: hidden;
-      max-width: 420px;
     }
 
     .install-dollar {
@@ -277,69 +274,43 @@
       flex-shrink: 0;
       line-height: 1.5;
     }
-    .copy-btn:hover { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(0,200,240,.35); }
-
-    .install-alt {
-      font-size: 12px;
-      color: var(--text3);
-      font-family: var(--mono);
-      margin-top: -8px;
-    }
-    .install-alt a { color: var(--text2); text-decoration: none; }
-    .install-alt a:hover { color: var(--cyan); }
+    .copy-btn:hover { background: var(--accent-dim); color: var(--accent2); border-color: rgba(99,102,241,.35); }
 
-    /* ── EDITORS STRIP ────────────────────────────── */
-    .editors-section {
+    /* ── TRUST STRIP ──────────────────────────────── */
+    .trust-strip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 24px;
+      padding: 40px 24px;
       position: relative;
       z-index: 1;
-      border-top: 1px solid var(--border);
-      border-bottom: 1px solid var(--border);
-      background: var(--bg2);
-      padding: 40px 0;
-      text-align: center;
     }
-    .editors-label {
+    .trust-strip img,
+    .trust-strip svg {
+      width: 20px;
+      height: 20px;
+      opacity: 0.3;
+      filter: grayscale(1) brightness(2);
+    }
+    .trust-label {
       font-size: 12px;
-      font-weight: 600;
-      letter-spacing: .1em;
-      text-transform: uppercase;
       color: var(--text3);
-      margin-bottom: 24px;
     }
-    .editor-badges {
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-      flex-wrap: wrap;
-      padding: 0 24px;
-    }
-    .editor-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      padding: 12px 22px;
-      background: var(--bg);
-      border: 1px solid var(--border2);
-      border-radius: 12px;
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--text);
-      transition: border-color .2s, transform .2s, box-shadow .2s;
-    }
-    .editor-badge:hover { border-color: rgba(0,200,240,.3); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
-    .editor-badge img { width: 28px; height: 28px; flex-shrink: 0; }
-    .editor-badge img.invert { filter: invert(1) brightness(1.5); }
 
     /* ── TERMINAL ─────────────────────────────────── */
+    .terminal-section {
+      position: relative;
+      z-index: 1;
+      padding: 0 24px 80px;
+    }
+
     .terminal-window {
-      background: #070f1c;
-      border: 1px solid var(--border2);
-      border-radius: 14px;
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 16px;
       overflow: hidden;
-      box-shadow:
-        0 24px 80px rgba(0,0,0,.55),
-        0 0 0 1px rgba(255,255,255,.03),
-        0 0 60px rgba(0,200,240,.04);
+      box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03);
     }
 
     .terminal-bar {
@@ -371,12 +342,12 @@
     .t-cmd    { color: var(--text); }
     .t-ok     { color: var(--green); }
     .t-info   { color: var(--text2); }
-    .t-cyan   { color: var(--cyan); }
+    .t-accent { color: var(--accent2); }
     .t-save   { color: var(--green); font-weight: 600; }
     .cursor {
       display: inline-block;
       width: 7px; height: 13px;
-      background: var(--cyan);
+      background: var(--accent2);
       vertical-align: middle;
       margin-left: 1px;
       animation: blink 1s step-end infinite;
@@ -392,31 +363,21 @@
       padding: 0 48px;
     }
 
-    .section-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: .12em;
-      text-transform: uppercase;
-      color: var(--cyan);
-      margin-bottom: 14px;
-    }
-    .section-tag::before {
-      content: '';
-      width: 20px;
-      height: 2px;
-      background: linear-gradient(90deg, var(--cyan), rgba(139,92,246,.6));
-      border-radius: 2px;
+    .section-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--accent2);
+      margin-bottom: 16px;
     }
 
     h2 {
-      font-size: 40px;
+      font-family: 'Outfit', system-ui, sans-serif;
+      font-size: 44px;
       font-weight: 800;
-      line-height: 1.14;
-      letter-spacing: -0.025em;
-      margin-bottom: 14px;
+      line-height: 1.12;
+      letter-spacing: -0.03em;
+      margin-bottom: 16px;
+      color: var(--text);
     }
 
     .sec-sub {
@@ -426,138 +387,71 @@
       line-height: 1.62;
     }
 
-    /* ── HOW IT WORKS ─────────────────────────────── */
-    .how-section { padding: 120px 0; }
+    /* ── DEMO ─────────────────────────────────────── */
+    .demo-section { padding: 80px 0 60px; }
 
-    .how-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 2px;
-      margin-top: 52px;
-      background: var(--border);
-      border: 1px solid var(--border);
-      border-radius: 16px;
+    .demo-frame {
+      max-width: 800px;
+      margin: 28px auto 0;
+      border-radius: 12px;
       overflow: hidden;
+      border: 1px solid var(--border);
     }
-
-    .how-card {
-      background: var(--bg);
-      padding: 40px 34px;
-      transition: background .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
-    }
-    .how-card:hover { background: var(--bg2); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(0,200,240,.1); }
-
-    .how-num {
-      font-family: var(--mono);
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: .1em;
-      color: var(--text3);
-      margin-bottom: 26px;
-    }
-
-    .how-icon {
-      width: 46px; height: 46px;
-      border-radius: 12px;
+    .demo-bar {
+      background: var(--bg2);
+      padding: 8px 16px;
       display: flex;
       align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      margin-bottom: 18px;
-    }
-
-    .how-title {
-      font-size: 18px;
-      font-weight: 700;
-      margin-bottom: 10px;
-      letter-spacing: -.01em;
+      gap: 8px;
+      border-bottom: 1px solid var(--border);
     }
-
-    .how-body {
-      font-size: 14px;
+    .demo-bar span {
+      margin-left: auto;
+      font-size: 12px;
       color: var(--text2);
-      line-height: 1.65;
-    }
-
-    .how-cmd {
-      display: inline-block;
-      margin-top: 18px;
-      padding: 6px 12px;
-      background: var(--bg2);
-      border: 1px solid var(--border2);
-      border-radius: 7px;
       font-family: var(--mono);
-      font-size: 12px;
-      color: var(--cyan);
-    }
-
-    .c-cyan   { color: var(--cyan); }
-    .c-green  { color: var(--green); }
-    .c-amber  { color: var(--amber); }
-    .c-text2  { color: var(--text2); }
-
-    /* ── FEATURES ─────────────────────────────────── */
-    .features-section { padding: 120px 0; }
-
-    .features-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 16px;
-      margin-top: 52px;
     }
 
-    .feat-card {
-      background: var(--bg2);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 30px;
-      transition: border-color .3s, background .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
-      box-shadow: 0 2px 8px rgba(0,0,0,.2);
-      position: relative;
-    }
-    .feat-card:hover {
-      border-color: rgba(0,200,240,.25);
-      background: var(--bg3);
-      transform: translateY(-4px);
-      box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 20px rgba(0,200,240,.04);
-    }
+    /* ── BENCHMARK ────────────────────────────────── */
+    .bench-section { padding: 160px 0; }
 
-    .feat-icon {
-      width: 42px; height: 42px;
-      border-radius: 10px;
+    .bench-numbers {
       display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-      margin-bottom: 16px;
-    }
-
-    .feat-title {
-      font-size: 15px;
-      font-weight: 700;
-      margin-bottom: 7px;
+      justify-content: space-between;
+      gap: 32px;
+      margin: 64px 0;
+      padding: 48px 0;
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
     }
-
-    .feat-body {
-      font-size: 13.5px;
-      color: var(--text2);
-      line-height: 1.62;
+    .bench-num { text-align: center; flex: 1; }
+    .bench-val {
+      display: inline-block;
+      font-family: 'Outfit', sans-serif;
+      font-size: 64px;
+      font-weight: 900;
+      letter-spacing: -0.04em;
+      line-height: 1;
+      position: relative;
     }
-
-    code {
-      background: var(--bg3);
-      border: 1px solid var(--border2);
-      border-radius: 4px;
-      padding: 1px 5px;
-      font-family: var(--mono);
-      font-size: .9em;
-      color: var(--cyan);
+    .bench-val::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: currentColor;
+      opacity: 0.2;
+      border-radius: 1px;
     }
-
-    /* ── BENCHMARK ────────────────────────────────── */
-    .bench-section {
-      padding: 120px 0;
-      border-top: 1px solid var(--border);
+    .bench-label {
+      display: block;
+      margin-top: 8px;
+      font-size: 13px;
+      color: var(--text3);
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
     }
 
     .bench-layout {
@@ -565,61 +459,6 @@
       grid-template-columns: 1fr 1fr;
       gap: 56px;
       align-items: start;
-      margin-top: 48px;
-    }
-
-    .bench-stats {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 20px;
-    }
-
-    .bench-stat {
-      background: rgba(11,21,37,.7);
-      backdrop-filter: blur(8px);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      padding: 28px 24px;
-      transition: border-color .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
-    }
-    .bench-stat:hover { border-color: rgba(0,200,240,.2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
-
-    .bench-stat-label {
-      font-size: 11px;
-      font-weight: 600;
-      letter-spacing: .1em;
-      text-transform: uppercase;
-      color: var(--text3);
-      margin-bottom: 8px;
-    }
-
-    .bench-stat-val {
-      font-size: 40px;
-      font-weight: 800;
-      line-height: 1;
-      letter-spacing: -.03em;
-    }
-
-    .bench-stat-desc {
-      font-size: 12px;
-      color: var(--text3);
-      margin-top: 6px;
-    }
-
-    .bench-stat.wide {
-      grid-column: 1 / -1;
-    }
-
-    .bench-right {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .bench-methodology {
-      font-size: 14px;
-      color: var(--text2);
-      line-height: 1.7;
     }
 
     .bench-bar-chart {
@@ -652,13 +491,9 @@
       position: relative;
     }
 
-    .bench-bar-fill {
-      height: 100%;
-      border-radius: 6px;
-    }
-
+    .bench-bar-fill { height: 100%; border-radius: 6px; }
     .bench-bar-fill.baseline { background: var(--text3); }
-    .bench-bar-fill.cce { background: var(--cyan); }
+    .bench-bar-fill.cce { background: var(--accent2); }
     .bench-bar-fill.green { background: var(--green); }
 
     .bench-bar-val {
@@ -681,26 +516,92 @@
       color: var(--text2);
       line-height: 1.8;
     }
-
     .bench-reproduce .t-dim { color: var(--text3); }
     .bench-reproduce .t-cmd { color: var(--text); }
 
-    @media (max-width: 1024px) {
-      .bench-layout { grid-template-columns: 1fr; }
-      .bench-stats { grid-template-columns: 1fr 1fr; }
+    .c-green  { color: var(--green); }
+    .c-text2  { color: var(--text2); }
+
+    /* ── CAPABILITIES ─────────────────────────────── */
+    .cap-section { padding: 160px 0; }
+
+    .cap-list {
+      margin-top: 56px;
+      max-width: 720px;
     }
 
-    @media (max-width: 640px) {
-      .bench-stats { grid-template-columns: 1fr; }
-      .bench-stat.wide { grid-column: auto; }
+    .cap-item {
+      display: flex;
+      gap: 32px;
+      padding: 40px 0 40px 24px;
+      border-bottom: 1px solid var(--border);
+      border-left: 2px solid transparent;
+      align-items: baseline;
+      transition: border-left-color .2s;
     }
+    .cap-item:first-child { border-top: 1px solid var(--border); }
+    .cap-item:hover { border-left-color: var(--accent); }
 
-    /* ── COMPARE ──────────────────────────────────── */
-    .compare-section {
-      padding: 120px 0;
-      border-top: 1px solid var(--border);
+    .cap-num {
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text3);
+      flex-shrink: 0;
+      width: 28px;
+    }
+
+    .cap-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      letter-spacing: -0.01em;
+    }
+
+    .cap-desc {
+      font-size: 14px;
+      color: var(--text2);
+      line-height: 1.7;
+    }
+
+    .cap-code {
+      display: inline-block;
+      margin-top: 12px;
+      padding: 6px 12px;
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--accent2);
+    }
+
+    code {
+      background: var(--bg3);
+      border: 1px solid var(--border2);
+      border-radius: 4px;
+      padding: 1px 5px;
+      font-family: var(--mono);
+      font-size: .9em;
+      color: var(--accent2);
+    }
+
+    .rec-pill {
+      display: inline-block;
+      font-size: 9px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      background: rgba(34,197,94,.15);
+      color: var(--green);
+      padding: 2px 6px;
+      border-radius: 4px;
+      margin-left: 6px;
+      vertical-align: middle;
     }
 
+    /* ── COMPARE ──────────────────────────────────── */
+    .compare-section { padding: 160px 0; }
+
     .compare-table-wrap {
       margin-top: 48px;
       border: 1px solid var(--border);
@@ -722,7 +623,7 @@
       background: var(--bg2);
       border-bottom: 1px solid var(--border);
     }
-    th.hl { color: var(--cyan); background: rgba(0,200,240,.06); }
+    th.hl { color: var(--accent2); background: var(--accent-dim); }
 
     td {
       padding: 13px 24px;
@@ -732,32 +633,76 @@
     }
     tr:last-child td { border-bottom: none; }
 
-    td.hl { background: rgba(0,200,240,.035); }
+    td.hl { background: rgba(99,102,241,.035); }
     td.row-head { color: var(--text); font-weight: 500; }
     td.yes { color: var(--green); font-size: 15px; font-weight: 600; }
     td.no  { color: var(--text3); font-size: 15px; }
     td.cost-base { color: var(--text2); }
-    td.cost-cce  { color: var(--cyan); font-weight: 700; font-size: 15px; }
+    td.cost-cce  { color: var(--accent2); font-weight: 700; font-size: 15px; }
     td.cost-best { color: var(--green); font-weight: 700; font-size: 15px; }
 
+    /* ── BLOG ─────────────────────────────────────── */
+    .blog-section { padding: 140px 0; }
+
+    .blog-list { margin-top: 48px; max-width: 620px; }
+
+    .blog-item {
+      display: flex;
+      align-items: baseline;
+      gap: 24px;
+      text-decoration: none;
+      padding: 20px 0;
+      border-bottom: 1px solid var(--border);
+      transition: opacity .2s;
+    }
+    .blog-item:first-child { border-top: 1px solid var(--border); }
+    .blog-item:hover { opacity: .7; }
+
+    .blog-date {
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text3);
+      flex-shrink: 0;
+      width: 100px;
+    }
+
+    .blog-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text);
+      line-height: 1.4;
+    }
+
     /* ── CTA ──────────────────────────────────────── */
     .cta-section {
-      padding: 120px 0 100px;
+      padding: 200px 0 160px;
       text-align: center;
+      position: relative;
+    }
+    .cta-section::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 600px;
+      height: 400px;
+      background: radial-gradient(ellipse, rgba(99,102,241,.06) 0%, transparent 60%);
+      pointer-events: none;
     }
 
     .cta-title {
-      font-size: 56px;
-      font-weight: 800;
-      line-height: 1.1;
-      letter-spacing: -.035em;
-      margin-bottom: 18px;
+      font-size: 72px;
+      font-weight: 900;
+      letter-spacing: -.04em;
+      line-height: 1.0;
+      margin-bottom: 24px;
     }
 
     .cta-sub {
       font-size: 18px;
       color: var(--text2);
-      margin-bottom: 44px;
+      margin-bottom: 48px;
     }
 
     .cta-install {
@@ -775,7 +720,7 @@
       align-items: center;
       justify-content: center;
       gap: 20px;
-      margin-top: 44px;
+      margin-top: 48px;
       flex-wrap: wrap;
     }
 
@@ -797,13 +742,13 @@
       justify-content: center;
       font-size: 11px;
       font-weight: 700;
-      color: var(--cyan);
+      color: var(--accent2);
       flex-shrink: 0;
     }
 
     .step-num.done {
-      background: var(--green-dim);
-      border-color: rgba(16,217,126,.3);
+      background: rgba(34,197,94,.1);
+      border-color: rgba(34,197,94,.3);
       color: var(--green);
     }
 
@@ -838,23 +783,64 @@
     }
     .foot-links a:hover { color: var(--text); }
 
+    /* ── SCROLL REVEAL ────────────────────────────── */
+    .reveal {
+      opacity: 0;
+      transform: translateY(16px);
+      transition: opacity .5s ease, transform .5s ease;
+    }
+    .reveal.revealed {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .reveal-stagger .cap-item,
+    .reveal-stagger .bench-num {
+      opacity: 0;
+      transform: translateY(12px);
+      transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
+    }
+    .reveal-stagger.revealed .cap-item,
+    .reveal-stagger.revealed .bench-num {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .reveal-stagger.revealed .cap-item:nth-child(1),
+    .reveal-stagger.revealed .bench-num:nth-child(1) { transition-delay: 0s; }
+    .reveal-stagger.revealed .cap-item:nth-child(2),
+    .reveal-stagger.revealed .bench-num:nth-child(2) { transition-delay: .06s; }
+    .reveal-stagger.revealed .cap-item:nth-child(3),
+    .reveal-stagger.revealed .bench-num:nth-child(3) { transition-delay: .12s; }
+    .reveal-stagger.revealed .cap-item:nth-child(4),
+    .reveal-stagger.revealed .bench-num:nth-child(4) { transition-delay: .18s; }
+    .reveal-stagger.revealed .cap-item:nth-child(5) { transition-delay: .24s; }
+    .reveal-stagger.revealed .cap-item:nth-child(6) { transition-delay: .30s; }
+
     /* ── REDUCED MOTION ───────────────────────────── */
     @media (prefers-reduced-motion: reduce) {
       .badge-dot { animation: none; }
       .cursor { animation: none; opacity: 1; }
+      .reveal { opacity: 1; transform: none; transition: none; }
+      .reveal-stagger .cap-item,
+      .reveal-stagger .bench-num { opacity: 1; transform: none; transition: none; }
     }
 
     /* ── RESPONSIVE ───────────────────────────────── */
     @media (max-width: 1024px) {
       nav { padding: 14px 24px; }
       .nav-center { display: none; }
-      .hero { grid-template-columns: 1fr; padding: 60px 24px 40px; gap: 40px; }
-      .hero-title { font-size: 46px; }
-      .how-grid { grid-template-columns: 1fr; gap: 0; }
-      .features-grid { grid-template-columns: 1fr 1fr; }
+      .hero { padding: 80px 24px 60px; }
+      .hero-number { font-size: 140px; }
+      .hero-pct { font-size: 80px; }
+      .hero-actions { flex-direction: column; gap: 16px; }
+      .bench-layout { grid-template-columns: 1fr; }
+      .bench-numbers { flex-wrap: wrap; gap: 24px; }
+      .bench-num { min-width: 40%; }
       .wrap { padding: 0 24px; }
       footer { flex-direction: column; gap: 16px; padding: 24px; text-align: center; }
       .terminal-body { overflow-x: auto; }
+      .cap-section, .bench-section, .compare-section { padding: 100px 0; }
+      .cta-section { padding: 120px 0 100px; }
+      .cta-title { font-size: 48px; }
     }
 
     @media (max-width: 640px) {
@@ -862,40 +848,45 @@
       .nav-name { font-size: 13px; }
       .nav-link { padding: 5px 8px; font-size: 12px; }
       .nav-pip { padding: 5px 10px; font-size: 12px; }
-      .hero { padding: 40px 16px 32px; overflow: hidden; }
-      .hero-left { min-width: 0; }
-      .hero-title { font-size: 36px; }
+      .hero { padding: 48px 16px 40px; }
+      .hero-number { font-size: 100px; }
+      .hero-pct { font-size: 60px; }
+      .hero-claim { font-size: 18px; }
       .hero-desc { font-size: 15px; max-width: 100%; }
       h2 { font-size: 30px; }
       .cta-title { font-size: 36px; }
-      .features-grid { grid-template-columns: 1fr; }
       .wrap { padding: 0 16px; }
       .install-row { max-width: 100%; }
       .install-text { font-size: 12px; }
+      .bench-numbers { flex-direction: column; gap: 32px; }
+      .bench-num { min-width: auto; }
+      .bench-val { font-size: 44px; }
+      .cap-item { flex-direction: column; gap: 8px; padding-left: 0; border-left: none; }
+      .cap-section, .bench-section, .compare-section, .blog-section { padding: 80px 0; }
+      .cta-section { padding: 100px 0 80px; }
+      .blog-item { flex-direction: column; gap: 4px; }
+      .blog-date { width: auto; }
     }
   </style>
 </head>
 <body>
 
-<div class="dot-grid"></div>
-
 <!-- ── NAV ───────────────────────────────────────────── -->
 <nav>
   <a href="/" class="nav-brand">
     <svg class="nav-logo-mark" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="30" height="30" rx="7" fill="#0b1525"/>
-      <rect x="5" y="6" width="19" height="3" rx="1.5" fill="#1b3b66" opacity="0.5"/>
-      <rect x="5" y="11" width="15" height="3" rx="1.5" fill="#1a4e78" opacity="0.65"/>
-      <rect x="5" y="16" width="10" height="3" rx="1.5" fill="#0077a0" opacity="0.82"/>
-      <rect x="5" y="21" width="6" height="3" rx="1.5" fill="#00c8f0"/>
+      <rect width="30" height="30" rx="7" fill="#111113"/>
+      <rect x="5" y="6" width="19" height="3" rx="1.5" fill="#3f3f46" opacity="0.5"/>
+      <rect x="5" y="11" width="15" height="3" rx="1.5" fill="#52525b" opacity="0.65"/>
+      <rect x="5" y="16" width="10" height="3" rx="1.5" fill="#6366f1" opacity="0.82"/>
+      <rect x="5" y="21" width="6" height="3" rx="1.5" fill="#818cf8"/>
     </svg>
     <span class="nav-name">Code <em>Context Engine</em></span>
   </a>
   <div class="nav-center">
     <a href="#demo" class="nav-link" data-section="demo">Demo</a>
     <a href="#benchmark" class="nav-link" data-section="benchmark">Benchmark</a>
-    <a href="#how" class="nav-link" data-section="how">How it works</a>
-    <a href="#features" class="nav-link" data-section="features">Features</a>
+    <a href="#capabilities" class="nav-link" data-section="capabilities">Capabilities</a>
     <a href="#compare" class="nav-link" data-section="compare">Compare</a>
     <a href="#blog" class="nav-link" data-section="blog">Blog</a>
     <a href="guide/" class="nav-link">Docs</a>
@@ -911,164 +902,145 @@
 
 <!-- ── HERO ───────────────────────────────────────────── -->
 <div class="hero-wrap">
-  <div class="hero-glow"></div>
   <div class="hero">
+    <div class="hero-badge">
+      <span class="badge-dot"></span>
+      Open source MCP server
+    </div>
 
-    <div class="hero-left">
-      <div class="hero-badge">
-        <span class="badge-dot"></span>
-        MCP Server &nbsp;·&nbsp; Local &nbsp;·&nbsp; Zero Cloud
-      </div>
-
-      <h1 class="hero-title">Index once.<br><span class="accent">Save 94%.</span></h1>
+    <div class="hero-number">94<span class="hero-pct">%</span></div>
+    <p class="hero-claim">fewer input tokens for your AI coding agent</p>
 
-      <p class="hero-desc">
-        A local MCP server for AI coding agents. AST-aware indexing, semantic search, and automatic compression. Your agent stops re-reading your entire codebase every session.
-      </p>
+    <p class="hero-desc">
+      CCE indexes your codebase with Tree-sitter and serves relevant chunks via MCP. Your agent stops re-reading entire files. Benchmarked on FastAPI with 20 real queries.
+    </p>
 
-      <div style="display:flex;flex-direction:column;gap:10px">
-        <div class="install-row">
-          <span class="install-dollar">$</span>
-          <span class="install-text">uv tool install "code-context-engine[local]"</span>
-          <button class="copy-btn" id="copy-hero" onclick="copyText(this,'uv tool install &quot;code-context-engine[local]&quot;')">Copy</button>
-        </div>
-        <div class="install-alt">
-          or: <a href="https://pypi.org/project/code-context-engine/" target="_blank">pipx install "code-context-engine[local]"</a> · Ollama users: skip [local]
-        </div>
-        <div class="install-alt" style="margin-top:2px">
-          <span style="color:var(--cyan);font-weight:500">Agent Plugin:</span> <code style="font-size:12px;padding:2px 6px">cce init --plugin</code> <span style="color:var(--text3)">zero-install for VS Code, Cursor, Copilot, Codex, ChatGPT, Kiro</span>
-        </div>
+    <div class="hero-actions">
+      <div class="install-row">
+        <span class="install-dollar">$</span>
+        <span class="install-text">uv tool install "code-context-engine[local]"</span>
+        <button class="copy-btn" id="copy-hero" onclick="copyText(this,'uv tool install &quot;code-context-engine[local]&quot;')">Copy</button>
       </div>
-
+      <a href="#demo" class="hero-link">Watch demo &#8594;</a>
     </div>
+  </div>
+</div>
 
-    <div>
-      <div class="terminal-window">
-        <div class="terminal-bar">
-          <div class="win-dot" style="background:#ff5f56"></div>
-          <div class="win-dot" style="background:#ffbd2e"></div>
-          <div class="win-dot" style="background:#27c93f"></div>
-          <span class="terminal-label">~/my-project</span>
-        </div>
-        <div class="terminal-body">
-          <span class="tl on"><span class="t-dim">$</span> <span class="t-cmd">cce init</span></span>
-          <span class="tl on">&nbsp;</span>
-          <span class="tl on">  <span class="t-cyan" style="font-weight:700">Code Context Engine</span>  <span class="t-dim">·  my-project</span></span>
-          <span class="tl on">  <span class="t-dim">────────────────────────────────</span></span>
-          <span class="tl on">&nbsp;</span>
-          <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">Git hooks installed  </span><span class="t-dim">(3 hooks, auto-updates)</span></span>
-          <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">MCP server registered in </span><span class="t-cyan">.mcp.json</span></span>
-          <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">CLAUDE.md created</span></span>
-          <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">.gitignore updated</span></span>
-          <span class="tl on">&nbsp;</span>
-          <span class="tl on">  <span class="t-cyan" style="font-weight:600">Indexing project</span>...</span>
-          <span class="tl on">    <span class="t-cyan">██████████████████████████████</span>  <span style="font-weight:600;color:#dde8ff">89/89</span> <span class="t-dim">files  100%</span></span>
-          <span class="tl on">&nbsp;</span>
-          <span class="tl on">  <span class="t-ok">✓</span> <span style="font-weight:700;color:#dde8ff">Indexed 1,247 chunks</span> <span class="t-info">from 89 files</span></span>
-          <span class="tl on">&nbsp;</span>
-          <span class="tl on">  <span class="t-ok" style="font-weight:700">Done!</span>  <span class="t-dim">Restart your AI coding agent to activate CCE.</span></span>
-          <span class="cursor"></span>
-        </div>
+<!-- ── TERMINAL ──────────────────────────────────────── -->
+<section class="terminal-section">
+  <div class="wrap" style="max-width:720px">
+    <p style="text-align:center;font-size:13px;color:var(--text3);margin-bottom:16px">One command to set up</p>
+    <div class="terminal-window">
+      <div class="terminal-bar">
+        <div class="win-dot" style="background:#ff5f56"></div>
+        <div class="win-dot" style="background:#ffbd2e"></div>
+        <div class="win-dot" style="background:#27c93f"></div>
+        <span class="terminal-label">~/my-project</span>
+      </div>
+      <div class="terminal-body">
+        <span class="tl on"><span class="t-dim">$</span> <span class="t-cmd">cce init</span></span>
+        <span class="tl on">&nbsp;</span>
+        <span class="tl on">  <span class="t-accent" style="font-weight:700">Code Context Engine</span>  <span class="t-dim">·  my-project</span></span>
+        <span class="tl on">  <span class="t-dim">────────────────────────────────</span></span>
+        <span class="tl on">&nbsp;</span>
+        <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">Git hooks installed  </span><span class="t-dim">(3 hooks, auto-updates)</span></span>
+        <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">MCP server registered in </span><span class="t-accent">.mcp.json</span></span>
+        <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">CLAUDE.md created</span></span>
+        <span class="tl on">  <span class="t-ok">✓</span> <span class="t-info">.gitignore updated</span></span>
+        <span class="tl on">&nbsp;</span>
+        <span class="tl on">  <span class="t-accent" style="font-weight:600">Indexing project</span>...</span>
+        <span class="tl on">    <span class="t-accent">██████████████████████████████</span>  <span style="font-weight:600;color:var(--text)">89/89</span> <span class="t-dim">files  100%</span></span>
+        <span class="tl on">&nbsp;</span>
+        <span class="tl on">  <span class="t-ok">✓</span> <span style="font-weight:700;color:var(--text)">Indexed 1,247 chunks</span> <span class="t-info">from 89 files</span></span>
+        <span class="tl on">&nbsp;</span>
+        <span class="tl on">  <span class="t-ok" style="font-weight:700">Done!</span>  <span class="t-dim">Restart your AI coding agent to activate CCE.</span></span>
+        <span class="cursor"></span>
       </div>
     </div>
-
   </div>
-</div>
+</section>
 
-<!-- ── EDITORS ───────────────────────────────────────────── -->
-<div class="editors-section">
-  <div class="editors-label">Works with your editor</div>
-  <div class="editor-badges">
-    <span class="editor-badge"><img src="https://cdn.simpleicons.org/anthropic/D97757" alt="Anthropic">Claude Code</span>
-    <span class="editor-badge"><img src="https://www.cursor.com/favicon.ico" alt="Cursor" style="width:28px;height:28px;border-radius:6px">Cursor</span>
-    <span class="editor-badge"><img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg" alt="VS Code">VS Code</span>
-    <span class="editor-badge"><img src="https://cdn.simpleicons.org/googlegemini/88A5F8" alt="Gemini">Gemini CLI</span>
-    <span class="editor-badge"><svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>Codex CLI</span>
-    <span class="editor-badge"><img src="https://opencode.ai/favicon.svg" alt="OpenCode" style="width:28px;height:28px">OpenCode</span>
-    <span class="editor-badge"><img src="https://www.tabnine.com/favicon.ico" alt="Tabnine" style="width:28px;height:28px;border-radius:6px">Tabnine</span>
-    <span class="editor-badge"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="5" fill="#1a1a2e"/><path d="M7 6l5 6-5 6M13 6l5 6-5 6" stroke="#00c8f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Kiro</span>
-    <a href="https://agent-plugins.org" target="_blank" rel="noopener" class="editor-badge" style="border-color:rgba(0,200,240,.25);text-decoration:none;color:var(--text)"><svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect width="28" height="28" rx="7" fill="rgba(0,200,240,0.1)"/><path d="M8 10h12M8 14h8M8 18h5" stroke="#00c8f0" stroke-width="2" stroke-linecap="round"/></svg>Agent Plugin</a>
-  </div>
+<div class="trust-strip">
+  <img src="https://cdn.simpleicons.org/anthropic/D97757" alt="Claude Code" title="Claude Code">
+  <img src="https://www.cursor.com/favicon.ico" alt="Cursor" title="Cursor" style="border-radius:3px">
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/vscode/vscode-original.svg" alt="VS Code" title="VS Code">
+  <img src="https://cdn.simpleicons.org/googlegemini/88A5F8" alt="Gemini CLI" title="Gemini CLI">
+  <span class="trust-label">and 5 more editors</span>
 </div>
 
 <!-- ── DEMO ───────────────────────────────────────────── -->
-<section class="bench-section" id="demo" style="padding-top:60px;padding-bottom:40px">
-  <div class="wrap" style="text-align:center">
-    <span class="section-tag">Demo</span>
-    <h2 style="margin-bottom:8px">See it in action</h2>
-    <p style="color:var(--text2);font-size:15px;margin-bottom:28px">Install, index, search, and see savings in under 30 seconds.</p>
-    <div style="max-width:800px;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.4)">
-      <div style="background:var(--bg2);padding:8px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)">
-        <div style="width:12px;height:12px;border-radius:50%;background:#ff5f56"></div>
-        <div style="width:12px;height:12px;border-radius:50%;background:#ffbd2e"></div>
-        <div style="width:12px;height:12px;border-radius:50%;background:#27c93f"></div>
-        <span style="margin-left:auto;font-size:12px;color:var(--text2);font-family:var(--mono)">terminal</span>
+<section class="demo-section reveal" id="demo">
+  <div class="wrap" style="text-align:center;max-width:800px">
+    <p style="font-size:13px;color:var(--text3);margin-bottom:16px">30-second demo</p>
+    <div class="demo-frame">
+      <div class="demo-bar">
+        <div class="win-dot" style="background:#ff5f56"></div>
+        <div class="win-dot" style="background:#ffbd2e"></div>
+        <div class="win-dot" style="background:#27c93f"></div>
+        <span>terminal</span>
       </div>
       <img src="demo.gif" alt="CCE Demo: install, index, search, and see token savings" style="width:100%;display:block;background:#0d1117">
     </div>
   </div>
 </section>
 
-<section class="bench-section" id="benchmark">
+<!-- ── BENCHMARK ─────────────────────────────────────── -->
+<section class="bench-section reveal" id="benchmark">
   <div class="wrap">
-    <span class="section-tag">Benchmark</span>
-    <h2>Reproducible benchmark.<br>Run it yourself.</h2>
-    <p class="sec-sub">20 real coding questions against FastAPI (53 source files, 180K tokens). No synthetic queries, no cherry-picking.</p>
+    <p class="section-label">Benchmark</p>
+    <h2>Reproducible results</h2>
+    <p class="sec-sub">20 real questions against FastAPI. No synthetic queries.</p>
+
+    <div class="bench-numbers reveal-stagger">
+      <div class="bench-num">
+        <span class="bench-val c-green">94%</span>
+        <span class="bench-label">retrieval savings</span>
+      </div>
+      <div class="bench-num">
+        <span class="bench-val" style="color:var(--accent2)">89%</span>
+        <span class="bench-label">compression</span>
+      </div>
+      <div class="bench-num">
+        <span class="bench-val" style="color:var(--text)">0.90</span>
+        <span class="bench-label">recall@10</span>
+      </div>
+      <div class="bench-num">
+        <span class="bench-val" style="color:var(--text3)">0.4ms</span>
+        <span class="bench-label">p50 latency</span>
+      </div>
+    </div>
 
     <div class="bench-layout">
-      <div class="bench-stats">
-        <div class="bench-stat">
-          <div class="bench-stat-label">Retrieval</div>
-          <div class="bench-stat-val c-green">94%</div>
-          <div class="bench-stat-desc">full files → relevant chunks</div>
-        </div>
-        <div class="bench-stat">
-          <div class="bench-stat-label">Compression</div>
-          <div class="bench-stat-val c-cyan">89%</div>
-          <div class="bench-stat-desc">chunks → signatures</div>
-        </div>
-        <div class="bench-stat">
-          <div class="bench-stat-label">Recall@10</div>
-          <div class="bench-stat-val c-amber">0.90</div>
-          <div class="bench-stat-desc">found the right files</div>
-        </div>
-        <div class="bench-stat">
-          <div class="bench-stat-label">Latency p50</div>
-          <div class="bench-stat-val c-text2">0.4ms</div>
-          <div class="bench-stat-desc">per search query</div>
-        </div>
-        <div class="bench-stat wide">
-          <div class="bench-stat-label">Token flow per query (avg)</div>
-          <div class="bench-bar-chart" style="margin-top:14px">
-            <div class="bench-bar-row">
-              <span class="bench-bar-label">Full files</span>
-              <div class="bench-bar-track">
-                <div class="bench-bar-fill baseline" style="width:100%"></div>
-              </div>
-              <span class="bench-bar-val">83,681</span>
+      <div>
+        <h3 style="font-size:18px;font-weight:700;margin-bottom:20px">Token flow per query (avg)</h3>
+        <div class="bench-bar-chart">
+          <div class="bench-bar-row">
+            <span class="bench-bar-label">Full files</span>
+            <div class="bench-bar-track">
+              <div class="bench-bar-fill baseline" style="width:100%"></div>
             </div>
-            <div class="bench-bar-row">
-              <span class="bench-bar-label">After retrieval</span>
-              <div class="bench-bar-track">
-                <div class="bench-bar-fill cce" style="width:5.9%"></div>
-              </div>
-              <span class="bench-bar-val" style="color:var(--cyan)">4,927</span>
+            <span class="bench-bar-val">83,681</span>
+          </div>
+          <div class="bench-bar-row">
+            <span class="bench-bar-label">After retrieval</span>
+            <div class="bench-bar-track">
+              <div class="bench-bar-fill cce" style="width:5.9%"></div>
             </div>
-            <div class="bench-bar-row">
-              <span class="bench-bar-label">After compression</span>
-              <div class="bench-bar-track">
-                <div class="bench-bar-fill green" style="width:0.6%"></div>
-              </div>
-              <span class="bench-bar-val" style="color:var(--green)">523</span>
+            <span class="bench-bar-val" style="color:var(--accent2)">4,927</span>
+          </div>
+          <div class="bench-bar-row">
+            <span class="bench-bar-label">After compression</span>
+            <div class="bench-bar-track">
+              <div class="bench-bar-fill green" style="width:0.6%"></div>
             </div>
+            <span class="bench-bar-val" style="color:var(--green)">523</span>
           </div>
         </div>
       </div>
 
-      <div class="bench-right">
+      <div style="display:flex;flex-direction:column;gap:24px">
         <div>
-          <h3 style="font-size:18px;font-weight:700;margin-bottom:12px">Per-Layer Savings</h3>
-          <p class="bench-methodology" style="margin-bottom:14px">Each layer measured against its own baseline. Not stacked.</p>
+          <h3 style="font-size:18px;font-weight:700;margin-bottom:14px">Per-Layer Savings</h3>
           <div style="display:flex;flex-direction:column;gap:8px;font-size:13px">
             <div style="display:flex;justify-content:space-between;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px">
               <span>Retrieval <span style="color:var(--text3);font-size:11px">· measured</span></span>
@@ -1080,11 +1052,11 @@ <h3 style="font-size:18px;font-weight:700;margin-bottom:12px">Per-Layer Savings<
             </div>
             <div style="display:flex;justify-content:space-between;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px">
               <span>Output Compression <span style="color:var(--text3);font-size:11px">· estimated</span></span>
-              <span class="c-cyan" style="font-weight:700">65%</span>
+              <span style="color:var(--accent2);font-weight:700">65%</span>
             </div>
             <div style="display:flex;justify-content:space-between;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px">
               <span>Grammar <span style="color:var(--text3);font-size:11px">· measured</span></span>
-              <span class="c-cyan" style="font-weight:700">13%</span>
+              <span style="color:var(--accent2);font-weight:700">13%</span>
             </div>
           </div>
         </div>
@@ -1100,105 +1072,73 @@ <h3 style="font-size:18px;font-weight:700;margin-bottom:12px">Reproduce it</h3>
         </div>
 
         <p style="font-size:13px;color:var(--text3)">
-          Full results: <a href="https://github.com/elara-labs/code-context-engine/blob/main/benchmarks/results/fastapi.md" target="_blank" rel="noopener" style="color:var(--cyan);text-decoration:none">benchmarks/results/fastapi.md</a>
+          Full results: <a href="https://github.com/elara-labs/code-context-engine/blob/main/benchmarks/results/fastapi.md" target="_blank" rel="noopener" style="color:var(--accent2);text-decoration:none">benchmarks/results/fastapi.md</a>
         </p>
       </div>
     </div>
   </div>
 </section>
 
-<!-- ── HOW IT WORKS ───────────────────────────────────── -->
-<section class="how-section" id="how">
+<!-- ── CAPABILITIES ──────────────────────────────────── -->
+<section class="cap-section reveal" id="capabilities">
   <div class="wrap">
-    <span class="section-tag">How it works</span>
-    <h2>Three commands.<br>Permanent savings.</h2>
-
-    <div class="how-grid">
-      <div class="how-card">
-        <div class="how-num">01</div>
-        <div class="how-icon" style="background:var(--cyan-dim)">🗂</div>
-        <div class="how-title">Index your codebase</div>
-        <p class="how-body">Tree-sitter parses your code into semantic chunks (functions, classes, modules). Stored locally with vector embeddings. Git hooks keep the index current automatically.</p>
-        <span class="how-cmd">cce init</span>
-      </div>
-      <div class="how-card">
-        <div class="how-num">02</div>
-        <div class="how-icon" style="background:var(--purple-dim)">🔍</div>
-        <div class="how-title">Agent searches, not reads</div>
-        <p class="how-body">Instead of reading whole files, your agent calls <code>context_search</code> via MCP. Hybrid vector + keyword search finds the relevant chunks. Gets the 800 tokens it needs, not an 8,000-token dump.</p>
-        <span class="how-cmd">context_search "payment"</span>
-      </div>
-      <div class="how-card">
-        <div class="how-num">03</div>
-        <div class="how-icon" style="background:var(--green-dim)">📊</div>
-        <div class="how-title">Track real savings</div>
-        <p class="how-body">Every query is recorded. <code>cce savings</code> shows exactly how many tokens CCE saved you, with dollar estimates from live Anthropic pricing.</p>
-        <span class="how-cmd">cce savings</span>
-      </div>
-    </div>
-  </div>
-</section>
+    <p class="section-label">Capabilities</p>
+    <h2>What it does</h2>
 
-<!-- ── FEATURES ───────────────────────────────────────── -->
-<section class="features-section" id="features">
-  <div class="wrap">
-    <span class="section-tag">Features</span>
-    <h2>Everything your agent needs.<br>Nothing it doesn't.</h2>
-
-    <div class="features-grid">
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--cyan-dim)">🌳</div>
-        <div class="feat-title">AST-Aware Chunking</div>
-        <p class="feat-body">Tree-sitter parses Python, JavaScript, TypeScript, PHP, Go, Rust, and Java into semantic chunks. Functions, classes, imports. No raw file dumps, no context waste.</p>
-      </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--purple-dim)">⚡</div>
-        <div class="feat-title">Hybrid Search + Graph Expansion</div>
-        <p class="feat-body">Vector similarity + BM25 keyword search merged via Reciprocal Rank Fusion. Then CCE walks one hop on the code graph — if <code>auth.py</code> is a hit, <code>utils.py</code> it imports comes too.</p>
-      </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--green-dim)">🧠</div>
-        <div class="feat-title">Smart Compression</div>
-        <p class="feat-body">With Ollama running locally, chunks are summarized by phi3:mini. Without it, smart truncation extracts signatures and docstrings. Four output levels: <code>off</code>, <code>lite</code>, <code>standard</code>, <code>max</code>.</p>
-      </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--cyan-dim)">🔗</div>
-        <div class="feat-title">Session Memory</div>
-        <p class="feat-body">Recall decisions and code areas across sessions via <code>session_recall</code>, <code>record_decision</code>, and <code>record_code_area</code>. No re-explaining your architecture every session.</p>
+    <div class="cap-list reveal-stagger">
+      <div class="cap-item">
+        <span class="cap-num">01</span>
+        <div>
+          <h3 class="cap-title">AST-Aware Indexing</h3>
+          <p class="cap-desc">Tree-sitter parses your code into semantic chunks (functions, classes, modules). Stored locally with vector embeddings. Git hooks keep the index current after every commit.</p>
+          <code class="cap-code">$ cce init && cce index</code>
+        </div>
       </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--cyan-dim)">🛡</div>
-        <div class="feat-title">Security by Default</div>
-        <p class="feat-body">Secret files (.env, *.pem) are never indexed. Content is scanned for API keys and credentials. PII is scrubbed from memory writes. Path traversal protection on all inputs.</p>
+      <div class="cap-item">
+        <span class="cap-num">02</span>
+        <div>
+          <h3 class="cap-title">Hybrid Search + Graph Expansion</h3>
+          <p class="cap-desc">Your agent calls context_search via MCP. Vector similarity + BM25 keyword search merged via Reciprocal Rank Fusion. If <code>auth.py</code> is a hit, <code>utils.py</code> it imports comes too.</p>
+          <code class="cap-code">context_search("how does auth work?")</code>
+        </div>
       </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--purple-dim)">📊</div>
-        <div class="feat-title">Web Dashboard</div>
-        <p class="feat-body">Run <code>cce dashboard</code> for donut charts, bar graphs, file health, and live 5-second polling. Or use <code>cce savings</code> for a quick terminal summary.</p>
+      <div class="cap-item">
+        <span class="cap-num">03</span>
+        <div>
+          <h3 class="cap-title">Smart Compression</h3>
+          <p class="cap-desc">With Ollama running locally, chunks are summarized by phi3:mini. Without it, smart truncation extracts signatures and docstrings. Four output levels: <code>off</code>, <code>lite</code>, <code>standard</code>, <code>max</code>.</p>
+        </div>
       </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--cyan-dim)">🔌</div>
-        <div class="feat-title">Agent Plugin (Zero Install)</div>
-        <p class="feat-body">Run <code>cce init --plugin</code> to generate a portable <a href="https://agent-plugins.org" target="_blank" rel="noopener" style="color:var(--cyan);text-decoration:none">Agent Plugin</a> directory. VS Code, Cursor, Copilot, Codex, ChatGPT, and Kiro load it automatically. Uses <code>uvx</code> so users don't need CCE pre-installed.</p>
+      <div class="cap-item">
+        <span class="cap-num">04</span>
+        <div>
+          <h3 class="cap-title">Session Memory</h3>
+          <p class="cap-desc">Decisions and code areas persist across sessions via record_decision, record_code_area, and session_recall. No re-explaining your architecture every time.</p>
+        </div>
       </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--green-dim)">🔄</div>
-        <div class="feat-title">Project Auto-Discovery</div>
-        <p class="feat-body">The MCP server walks up from its working directory to find <code>.context-engine.yaml</code> or <code>.git/</code>. Works from subdirectories, plugin roots, or any launch point. No <code>--project-dir</code> needed.</p>
+      <div class="cap-item">
+        <span class="cap-num">05</span>
+        <div>
+          <h3 class="cap-title">Dashboard + Savings Tracking</h3>
+          <p class="cap-desc">Every query is recorded. cce dashboard for charts and live polling. cce savings for token counts and dollar estimates from live Anthropic pricing.</p>
+        </div>
       </div>
-      <div class="feat-card">
-        <div class="feat-icon" style="background:var(--purple-dim)">📦</div>
-        <div class="feat-title">Single Source Instructions</div>
-        <p class="feat-body">One instruction template powers all writers: Agent Plugin SKILL.md, CLAUDE.md, .cursorrules, AGENTS.md, and every other instruction file. Update once, all formats stay in sync.</p>
+      <div class="cap-item">
+        <span class="cap-num">06</span>
+        <div>
+          <h3 class="cap-title">Agent Plugin</h3>
+          <p class="cap-desc">cce init --plugin generates a portable Agent Plugin directory. VS Code, Cursor, Copilot, Codex, ChatGPT, and Kiro load it automatically via uvx. Zero install.</p>
+          <code class="cap-code">$ cce init --plugin</code>
+        </div>
       </div>
     </div>
   </div>
 </section>
 
 <!-- ── COMPARE ────────────────────────────────────────── -->
-<section class="compare-section" id="compare">
+<section class="compare-section reveal" id="compare">
   <div class="wrap">
-    <span class="section-tag">Comparison</span>
+    <p class="section-label">Comparison</p>
     <h2>How CCE stacks up</h2>
 
     <div class="compare-table-wrap">
@@ -1209,51 +1149,51 @@ <h2>How CCE stacks up</h2>
             <th style="width:16%">No tool</th>
             <th style="width:16%">Caveman</th>
             <th class="hl" style="width:18%">CCE (default)</th>
-            <th class="hl" style="width:18%">CCE + Ollama</th>
+            <th class="hl" style="width:18%">CCE + Ollama <span class="rec-pill">Best</span></th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td class="row-head">Compress output tokens</td>
-            <td class="no">✗</td>
-            <td class="yes">✓</td>
-            <td class="yes hl">✓</td>
-            <td class="yes hl">✓</td>
+            <td class="no">&#10007;</td>
+            <td class="yes">&#10003;</td>
+            <td class="yes hl">&#10003;</td>
+            <td class="yes hl">&#10003;</td>
           </tr>
           <tr>
             <td class="row-head">Compress input tokens</td>
-            <td class="no">✗</td>
-            <td class="no">✗</td>
-            <td class="yes hl">✓</td>
-            <td class="yes hl">✓</td>
+            <td class="no">&#10007;</td>
+            <td class="no">&#10007;</td>
+            <td class="yes hl">&#10003;</td>
+            <td class="yes hl">&#10003;</td>
           </tr>
           <tr>
             <td class="row-head">Codebase indexing</td>
-            <td class="no">✗</td>
-            <td class="no">✗</td>
-            <td class="yes hl">✓</td>
-            <td class="yes hl">✓</td>
+            <td class="no">&#10007;</td>
+            <td class="no">&#10007;</td>
+            <td class="yes hl">&#10003;</td>
+            <td class="yes hl">&#10003;</td>
           </tr>
           <tr>
             <td class="row-head">Session memory</td>
-            <td class="no">✗</td>
-            <td class="no">✗</td>
-            <td class="yes hl">✓</td>
-            <td class="yes hl">✓</td>
+            <td class="no">&#10007;</td>
+            <td class="no">&#10007;</td>
+            <td class="yes hl">&#10003;</td>
+            <td class="yes hl">&#10003;</td>
           </tr>
           <tr>
             <td class="row-head">LLM summarization</td>
-            <td class="no">✗</td>
-            <td class="no">✗</td>
-            <td class="no hl">✗</td>
-            <td class="yes hl">✓</td>
+            <td class="no">&#10007;</td>
+            <td class="no">&#10007;</td>
+            <td class="no hl">&#10007;</td>
+            <td class="yes hl">&#10003;</td>
           </tr>
           <tr>
             <td class="row-head">Agent Plugin (zero-install)</td>
-            <td class="no">✗</td>
-            <td class="no">✗</td>
-            <td class="yes hl">✓</td>
-            <td class="yes hl">✓</td>
+            <td class="no">&#10007;</td>
+            <td class="no">&#10007;</td>
+            <td class="yes hl">&#10003;</td>
+            <td class="yes hl">&#10003;</td>
           </tr>
           <tr>
             <td class="row-head">Cost per session (Sonnet, medium project)</td>
@@ -1269,56 +1209,32 @@ <h2>How CCE stacks up</h2>
 </section>
 
 <!-- ── BLOG ───────────────────────────────────────────── -->
-<section class="compare-section" id="blog">
+<section class="blog-section reveal" id="blog">
   <div class="wrap">
-    <span class="section-tag">Blog</span>
-    <h2>Deep dives</h2>
-
-    <div style="display:grid;gap:20px;margin-top:40px;max-width:700px">
-      <a href="blog/v0-4-20-multi-agent-savings.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 15, 2026 · 4 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">v0.4.20: Multi-Agent Targeting and Input/Output Savings Split</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">New --agent flag for cce init, accurate cost tracking with separate input and output token pricing, and upgrade detection fix.</div>
-      </a>
-      <a href="blog/what-is-code-context-engine.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 5, 2026 · 8 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">What is Code Context Engine? Complete Guide</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">What it does, how it works, how to set it up, all 9 tools explained. Everything a developer needs to know.</div>
-      </a>
-      <a href="blog/save-claude-code-tokens.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 5, 2026 · 4 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">How to Save Claude Code Tokens</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">Claude Code is expensive because of input tokens. Here's how to cut them by 94% with one command.</div>
+    <p class="section-label">Blog</p>
+    <h2>Latest</h2>
+    <div class="blog-list">
+      <a href="blog/v0-4-20-multi-agent-savings.html" class="blog-item">
+        <span class="blog-date">May 15, 2026</span>
+        <span class="blog-title">v0.4.20: Multi-Agent Targeting and Input/Output Savings Split</span>
       </a>
-      <a href="blog/cce-vs-cursor-indexing.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 5, 2026 · 4 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">CCE vs Cursor Built-in Indexing</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">Local vs cloud. One editor vs six. An honest comparison of tradeoffs.</div>
+      <a href="blog/what-is-code-context-engine.html" class="blog-item">
+        <span class="blog-date">May 5, 2026</span>
+        <span class="blog-title">What is Code Context Engine? Complete Guide</span>
       </a>
-      <a href="blog/reduce-ai-coding-costs.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 5, 2026 · 5 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">How to Reduce AI Coding Agent Costs</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">5 practical ways to cut your Claude Code, Cursor, and Copilot bills.</div>
-      </a>
-      <a href="blog/cce-cursor-setup-guide.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 6, 2026 · 5 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">How to Use CCE with Cursor: Complete Setup Guide</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">Step-by-step guide to setting up Code Context Engine with Cursor. Works alongside Cursor's built-in indexing.</div>
-      </a>
-      <a href="blog/benchmark-fastapi.html" style="text-decoration:none;display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:36px;transition:border-color .3s,transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.2);" onmouseover="this.style.borderColor='rgba(0,200,240,.25)';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
-        <div style="font-family:var(--mono);font-size:12px;color:var(--text3);margin-bottom:12px">May 4, 2026 · 5 min read</div>
-        <div style="font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.01em">How We Cut Claude Code Token Usage by 94%</div>
-        <div style="font-size:15px;color:var(--text2);line-height:1.6">Reproducible benchmark on FastAPI. 20 real queries. Per-layer methodology. Limitations disclosed.</div>
+      <a href="blog/save-claude-code-tokens.html" class="blog-item">
+        <span class="blog-date">May 5, 2026</span>
+        <span class="blog-title">How to Save Claude Code Tokens</span>
       </a>
     </div>
   </div>
 </section>
 
 <!-- ── CTA ────────────────────────────────────────────── -->
-<section class="cta-section">
+<section class="cta-section reveal">
   <div class="wrap">
-    <h2 class="cta-title">Stop paying to<br>re-read code.</h2>
-    <p class="cta-sub">One install. Automatic savings. Everything local.</p>
+    <h2 class="cta-title">Start saving.</h2>
+    <p class="cta-sub">Three commands. Permanent token savings. Everything stays local.</p>
 
     <div class="cta-install">
       <span class="install-dollar" style="border-right:1px solid var(--border)">$</span>
@@ -1328,16 +1244,12 @@ <h2 class="cta-title">Stop paying to<br>re-read code.</h2>
 
     <div class="cta-steps">
       <div class="step-chip"><span class="step-num">1</span> uv install</div>
-      <span class="step-arrow">→</span>
+      <span class="step-arrow">&#8594;</span>
       <div class="step-chip"><span class="step-num">2</span> cce init</div>
-      <span class="step-arrow">→</span>
+      <span class="step-arrow">&#8594;</span>
       <div class="step-chip"><span class="step-num">3</span> Restart editor</div>
-      <span class="step-arrow">→</span>
-      <div class="step-chip"><span class="step-num done">✓</span> Saving tokens</div>
-    </div>
-
-    <div style="margin-top:28px;font-size:14px;color:var(--text3)">
-      Or generate an <a href="https://agent-plugins.org" target="_blank" rel="noopener" style="color:var(--cyan);text-decoration:none">Agent Plugin</a> for zero-install distribution: <code style="font-size:13px">cce init --plugin</code>
+      <span class="step-arrow">&#8594;</span>
+      <div class="step-chip"><span class="step-num done">&#10003;</span> Saving tokens</div>
     </div>
   </div>
 </section>
@@ -1346,13 +1258,13 @@ <h2 class="cta-title">Stop paying to<br>re-read code.</h2>
 <footer>
   <div class="foot-left">
     <svg width="18" height="18" viewBox="0 0 30 30" fill="none">
-      <rect width="30" height="30" rx="7" fill="#0b1525"/>
-      <rect x="5" y="6" width="19" height="3" rx="1.5" fill="#1b3b66" opacity="0.5"/>
-      <rect x="5" y="11" width="15" height="3" rx="1.5" fill="#1a4e78" opacity="0.65"/>
-      <rect x="5" y="16" width="10" height="3" rx="1.5" fill="#0077a0" opacity="0.82"/>
-      <rect x="5" y="21" width="6" height="3" rx="1.5" fill="#00c8f0"/>
+      <rect width="30" height="30" rx="7" fill="#111113"/>
+      <rect x="5" y="6" width="19" height="3" rx="1.5" fill="#3f3f46" opacity="0.5"/>
+      <rect x="5" y="11" width="15" height="3" rx="1.5" fill="#52525b" opacity="0.65"/>
+      <rect x="5" y="16" width="10" height="3" rx="1.5" fill="#6366f1" opacity="0.82"/>
+      <rect x="5" y="21" width="6" height="3" rx="1.5" fill="#818cf8"/>
     </svg>
-    Code Context Engine &nbsp;·&nbsp; MIT License
+    Code Context Engine &nbsp;·&nbsp; <a href="https://github.com/elara-labs" style="color:var(--text3);text-decoration:none" target="_blank" rel="noopener">Elara Labs</a> &nbsp;·&nbsp; MIT License
   </div>
   <div class="foot-links">
     <a href="https://github.com/elara-labs/code-context-engine" target="_blank" rel="noopener">GitHub</a>
@@ -1369,7 +1281,7 @@ <h2 class="cta-title">Stop paying to<br>re-read code.</h2>
     const orig = btn.textContent;
     btn.textContent = 'Copied!';
     btn.style.color = 'var(--green)';
-    btn.style.borderColor = 'rgba(16,217,126,.4)';
+    btn.style.borderColor = 'rgba(34,197,94,.4)';
     setTimeout(() => {
       btn.textContent = orig;
       btn.style.color = '';
@@ -1403,8 +1315,46 @@ <h2 class="cta-title">Stop paying to<br>re-read code.</h2>
   update();
 }
 
+// ── Scroll reveal ────────────────────────────────────
+function initReveal() {
+  const els = document.querySelectorAll('.reveal, .reveal-stagger');
+  if (!els.length) return;
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        e.target.classList.add('revealed');
+        io.unobserve(e.target);
+      }
+    });
+  }, { threshold: 0.12 });
+  els.forEach(el => io.observe(el));
+}
+
+// ── Social proof counters ────────────────────────────
+function loadStats() {
+  fetch('https://api.github.com/repos/elara-labs/code-context-engine')
+    .then(r => r.json())
+    .then(d => {
+      if (d.stargazers_count != null) {
+        const el = document.getElementById('gh-stars');
+        if (el) el.textContent = d.stargazers_count.toLocaleString();
+      }
+    }).catch(() => {});
+
+  fetch('https://pypistats.org/api/packages/code-context-engine/recent')
+    .then(r => r.json())
+    .then(d => {
+      if (d.data && d.data.last_month != null) {
+        const el = document.getElementById('pypi-downloads');
+        if (el) el.textContent = d.data.last_month.toLocaleString();
+      }
+    }).catch(() => {});
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   initScrollSpy();
+  initReveal();
+  loadStats();
 });
 </script>
 </body>