From ee997f6fe6f8e8ca7058f127cca40992675bf495 Mon Sep 17 00:00:00 2001
From: Yash Kewlani <86704881+yakew7@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:57:33 +0530
Subject: [PATCH] Update index.html

---
 index.html | 2516 +++++++++++++++++++---------------------------------
 1 file changed, 900 insertions(+), 1616 deletions(-)

diff --git a/index.html b/index.html
index 5f4dbf1..91f4fea 100644
--- a/index.html
+++ b/index.html
@@ -11,1950 +11,1241 @@
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="Fair Code: Algorithmic Bias Detection">
 <meta name="twitter:description" content="Bias in AI is real, measurable, and fixable. Open-source audits with up to 97% bias reduction.">
-<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%230d0f14'/><circle cx='50' cy='50' r='12' fill='%23c9a84c'/></svg>">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23f4f1e8'/><circle cx='50' cy='50' r='14' fill='%23a63a22'/></svg>">
 <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=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Syne:wght@400;700;800&family=Syne+Mono&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
+<script>
+  (function () {
+    var saved = localStorage.getItem('fc-theme') || 'light';
+    document.documentElement.setAttribute('data-theme', saved);
+  })();
+</script>
 <style>
-  :root {
-    --bg: #0d0f14;
-    --surface: #131620;
-    --border: #1e2130;
-    --border2: #262a3a;
-    --accent: #c9a84c;
-    --accent2: #9b2335;
-    --accent3: #4a7c6f;
-    --text: #d4cfc0;
-    --muted: #b0aec0;
-    --white: #ede8dc;
-    --nav-bg: rgba(13,15,20,0.94);
-    --terminal-bg: #080a0e;
-    --terminal-bar-bg: #0f111a;
-    --terminal-label-color: #3a3a50;
-    --terminal-text: #c8c4b0;
-    --t-head-color: #2a2a3a;
-    --bias-track-bg: #181a26;
-    --compare-bg: #0a0c14;
-    --card-stroke: rgba(201,168,76,0.04);
-    --code-comment: #3a3a50;
-    --scanline-color: transparent;
-  }
+  /* ════════════════════════════════════════════════════
+     FAIR CODE — design system "The Audit Ledger"
+     paper + ink editorial · serif display · mono data
+     ════════════════════════════════════════════════════ */
 
-  html[data-theme="light"] {
-    --bg: #f2ede4;
-    --surface: #ece6da;
-    --border: #c8bfaa;
-    --border2: #b5aa94;
-    --accent: #1a3a6b;
-    --accent2: #8b1a1a;
-    --accent3: #2a5a2a;
-    --text: #1c1810;
-    --muted: #5a5040;
-    --white: #0e0c08;
-    --nav-bg: rgba(242,237,228,0.95);
-    --terminal-bg: #1a1810;
-    --terminal-bar-bg: #252018;
-    --terminal-label-color: #8a7a60;
-    --terminal-text: #d4cfc0;
-    --t-head-color: #4a4030;
-    --bias-track-bg: #c8bfaa;
-    --compare-bg: #e8e2d6;
-    --card-stroke: rgba(0,0,0,0.04);
-    --code-comment: #7a6a50;
+  :root {
+    /* paper (default, light) */
+    --bg: #f4f1e8;
+    --surface: #ebe7d9;
+    --border: #d9d3c0;
+    --border2: #bdb59c;
+    --accent: #a63a22;           /* brick red — bias, links, brand */
+    --accent2: #8c2f1b;          /* deep red */
+    --accent3: #2f6b4f;          /* ledger green — fair, fixed */
+    --text: #36321f;
+    --muted: #7d7459;
+    --white: #1d1910;            /* strongest ink (headings) */
+    --nav-bg: rgba(244,241,232,0.92);
+    --terminal-bg: #191610;
+    --terminal-bar-bg: #211d14;
+    --terminal-label-color: #8d8367;
+    --terminal-text: #d6d0bd;
+    --t-head-color: #6d6549;
+    --bias-track-bg: #e2dcc9;
+    --compare-bg: #ece8db;
+    --card-stroke: rgba(29,25,16,0.04);
+    --code-comment: #8d8367;
     --scanline-color: transparent;
-  }
 
-  html, body {
-    max-width: 100%;
-    overflow-x: hidden;
+    --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
+    --sans: 'Archivo', 'Helvetica Neue', sans-serif;
+    --mono: 'IBM Plex Mono', 'SF Mono', monospace;
+  }
+
+  html[data-theme="dark"] {
+    /* ink */
+    --bg: #15130d;
+    --surface: #1c1912;
+    --border: #2e2a1f;
+    --border2: #443e2d;
+    --accent: #cf6f49;
+    --accent2: #b85432;
+    --accent3: #79b294;
+    --text: #cfc7b0;
+    --muted: #8d8367;
+    --white: #f1e9d4;
+    --nav-bg: rgba(21,19,13,0.92);
+    --terminal-bg: #100e09;
+    --terminal-bar-bg: #181510;
+    --terminal-label-color: #6d6549;
+    --terminal-text: #cfc7b0;
+    --t-head-color: #6d6549;
+    --bias-track-bg: #242013;
+    --compare-bg: #1a1710;
+    --card-stroke: rgba(241,233,212,0.04);
+    --code-comment: #6d6549;
   }
 
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
-  /* ── SCROLL BEHAVIOR — respect reduced-motion ─── */
+  html, body { max-width: 100%; overflow-x: hidden; }
+
   @media (prefers-reduced-motion: no-preference) {
     html { scroll-behavior: smooth; }
   }
 
-  /* ── FOCUS STYLES ──────────────────────────────── */
   :focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
     border-radius: 1px;
   }
+  :focus:not(:focus-visible) { outline: none; }
 
-  /* Suppress the default outline only when focus-visible is supported */
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
+  ::selection { background: var(--accent); color: var(--bg); }
 
   body {
     background: var(--bg);
     color: var(--text);
-    font-family: 'IBM Plex Mono', monospace;
+    font-family: var(--sans);
+    font-size: 16px;
     font-weight: 400;
+    line-height: 1.6;
     overflow-x: hidden;
-    cursor: crosshair;
     transition: background 0.3s, color 0.3s;
+    -webkit-font-smoothing: antialiased;
   }
 
   input, textarea { cursor: text; }
   a, button { cursor: pointer; }
+  a { color: inherit; }
 
-  /* ── COPY BUTTON ───────────────────────────────── */
-  .copy-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 9px;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: var(--muted);
-    background: transparent;
-    border: 1px solid var(--border2);
-    padding: 3px 9px;
-    cursor: pointer;
-    transition: color 0.15s, border-color 0.15s, background 0.15s;
-    flex-shrink: 0;
-    white-space: nowrap;
-    line-height: 1.6;
-  }
-  .copy-btn:hover { color: var(--accent); border-color: var(--accent); }
-  .copy-btn.copied { color: var(--accent3); border-color: var(--accent3); background: rgba(74,124,111,0.08); }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .copy-btn.copied { background: color-mix(in srgb, var(--accent3) 8%, transparent); }
-  }
-  .copy-btn svg { width: 10px; height: 10px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-
-  .code-block-header-left { display: flex; align-items: center; gap: 8px; }
-
-  .terminal-bar-left { display: flex; align-items: center; gap: 6px; }
-
-  /* ── SHARE BUTTON ──────────────────────────────── */
-  .share-audit-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 9px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: var(--muted);
-    background: transparent;
-    border: 1px solid var(--border2);
-    padding: 6px 14px;
-    cursor: pointer;
-    transition: color 0.15s, border-color 0.15s, background 0.15s;
-    position: relative;
-  }
-  .share-audit-btn::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--accent);
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.25s ease;
-    z-index: 0;
-  }
-  .share-audit-btn span, .share-audit-btn svg { position: relative; z-index: 1; }
-  .share-audit-btn:hover { color: var(--bg); border-color: var(--accent); }
-  .share-audit-btn:hover::before { transform: scaleX(1); }
-  .share-audit-btn.shared { color: var(--accent3); border-color: var(--accent3); }
-  .share-audit-btn.shared::before { background: var(--accent3); transform: scaleX(1); color: var(--bg); }
-  .share-audit-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
-
-  .project-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 28px;
-    padding-top: 24px;
-    border-top: 1px solid var(--border);
-    flex-wrap: wrap;
-  }
-  .project-actions-label {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    margin-right: 4px;
-  }
-
-  @media (max-width: 480px) {
-    .copy-btn { font-size: 8px; padding: 2px 7px; }
-    .share-audit-btn { font-size: 8px; padding: 5px 10px; }
-  }
-
-  body::before {
-    content: '';
-    position: fixed;
-    inset: 0;
-    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.18) 100%);
-    pointer-events: none;
-    z-index: 9000;
+  /* shared micro-label — mono, uppercase, tracked out */
+  .hero-eyebrow, .section-eyebrow, .stat-label, .project-num, .terminal-label,
+  .key-insight-label, .bias-label, .search-filter-label, .search-count,
+  .roadmap-meta, .footer-by, .mobile-section-label, .tag,
+  .search-no-results-label, .project-actions-label {
+    font-family: var(--mono);
   }
 
-  body::after { display: none; }
-
-  /* NAV */
+  /* ── NAV ───────────────────────────────────────── */
   nav {
-    position: fixed;
-    top: 0; left: 0; right: 0;
-    z-index: 100;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 0 48px;
-    height: 52px;
-    border-bottom: 1px solid var(--border);
+    gap: 36px;
+    padding-inline: max(40px, calc((100vw - 1320px) / 2));
+    height: 64px;
     background: var(--nav-bg);
     backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
   }
 
   .nav-logo {
-    font-family: 'Syne Mono', monospace;
-    font-size: 14px;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 23px;
     color: var(--white);
     text-decoration: none;
-    letter-spacing: 0.06em;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .nav-logo::before {
-    content: '';
-    width: 6px; height: 6px;
-    background: var(--accent);
-    border-radius: 50%;
-    animation: pulse 2s infinite;
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
+  .nav-logo:hover { color: var(--accent); }
 
   .nav-links {
     display: flex;
-    gap: 0;
+    align-items: center;
+    gap: 26px;
     list-style: none;
-    height: 100%;
+    margin-right: auto;
   }
 
-  .nav-links li { height: 100%; }
-
-  .nav-links a {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px;
-    color: var(--muted);
-    text-decoration: none;
-    letter-spacing: 0.12em;
+  .nav-links > li > a {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.14em;
     text-transform: uppercase;
-    transition: color 0.15s, background 0.15s;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 20px;
-    border-right: 1px solid var(--border);
+    text-decoration: none;
+    color: var(--muted);
+    padding: 6px 0;
+    border-bottom: 1px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
   }
+  .nav-links > li > a:hover { color: var(--white); border-bottom-color: var(--accent); }
 
-  .nav-links a:hover { color: var(--accent); background: rgba(200,255,0,0.04); }
-  nav > .nav-links:first-of-type li:first-child a { border-left: 1px solid var(--border); }
+  .nav-caret { font-size: 8px; opacity: 0.7; }
 
-  .nav-github {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px;
-    color: var(--bg);
-    background: var(--accent);
-    padding: 0 18px;
-    height: 36px;
-    display: flex;
-    align-items: center;
+  .nav-dropdown-wrap { position: relative; }
+
+  .nav-dropdown {
+    position: absolute;
+    top: calc(100% + 10px);
+    left: -18px;
+    min-width: 250px;
+    list-style: none;
+    background: var(--bg);
+    border: 1px solid var(--border2);
+    padding: 6px 0;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
+    box-shadow: 0 18px 40px rgba(20,16,8,0.14);
+  }
+  .nav-dropdown-wrap:hover .nav-dropdown,
+  .nav-dropdown-wrap:focus-within .nav-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+  .nav-dropdown li a {
+    display: block;
+    padding: 9px 18px;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    color: var(--muted);
     text-decoration: none;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    transition: opacity 0.2s;
-    cursor: pointer;
-    flex-shrink: 0;
+    transition: color 0.12s, background 0.12s, padding-left 0.12s;
+  }
+  .nav-dropdown li a:hover {
+    color: var(--white);
+    background: var(--surface);
+    padding-left: 24px;
   }
-
-  .nav-github:hover { opacity: 0.85; }
 
   .nav-social {
     display: flex;
     align-items: center;
-    gap: 0;
-    margin-left: 10px;
+    gap: 18px;
+    flex-shrink: 0;
   }
-
-  .nav-social-link {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px;
-    color: var(--muted);
-    padding: 0 18px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
+  .nav-social a {
+    font-family: var(--mono);
+    font-size: 11px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    border: 1px solid var(--border);
-    margin-left: -1px;
-    transition: color 0.2s, border-color 0.2s, background 0.2s;
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  .nav-social-link:hover { color: var(--accent); border-color: var(--border2); background: rgba(201,168,76,0.05); }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .nav-social-link:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
+    color: var(--muted);
+    text-decoration: none;
+    transition: color 0.15s;
   }
+  .nav-social a:hover { color: var(--accent); }
 
   .theme-toggle {
-    width: 36px; height: 36px;
+    width: 34px;
+    height: 34px;
     border: 1px solid var(--border2);
+    border-radius: 50%;
     background: transparent;
     color: var(--muted);
-    cursor: pointer;
-    display: flex;
+    font-size: 14px;
+    line-height: 1;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 14px;
-    transition: all 0.2s;
+    transition: color 0.15s, border-color 0.15s, transform 0.3s;
     flex-shrink: 0;
-    margin-left: 6px;
   }
+  .theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: rotate(40deg); }
 
-  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
+  .nav-hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    width: 38px;
+    height: 38px;
+    background: transparent;
+    border: 1px solid var(--border2);
+    padding: 9px 8px;
+    flex-shrink: 0;
+  }
+  .nav-hamburger span {
+    display: block;
+    height: 1.5px;
+    width: 100%;
+    background: var(--text);
+    transition: transform 0.25s, opacity 0.2s;
+  }
+  .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
+  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
+  .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
 
-  /* HERO */
-  .hero {
-    min-height: 100vh;
-    min-height: 100dvh;
-    display: grid;
-    grid-template-rows: 1fr auto;
-    padding-top: 52px;
-    position: relative;
+  /* ── MOBILE NAV ────────────────────────────────── */
+  .mobile-nav {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    right: 0;
+    z-index: 990;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border2);
+    max-height: 0;
     overflow: hidden;
+    transition: max-height 0.3s ease;
   }
+  .mobile-nav.open { max-height: calc(100vh - 64px); overflow-y: auto; }
 
-  .hero-inner {
+  .mobile-nav-inner {
     display: flex;
     flex-direction: column;
-    justify-content: flex-end;
-    padding: 0 48px 72px;
-    position: relative;
-    z-index: 2;
+    padding: 18px 24px 28px;
   }
-
-  .hero-watermark {
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
+  .mobile-link {
+    font-family: var(--mono);
+    font-size: 13px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text);
+    text-decoration: none;
+    padding: 13px 0;
+    border-bottom: 1px solid var(--border);
+  }
+  .mobile-link:hover { color: var(--accent); }
+  .mobile-sub { padding-left: 18px; color: var(--muted); font-size: 12px; }
+  .mobile-section-label {
+    font-size: 10px;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--accent);
+    padding: 18px 0 8px;
+  }
+  .mobile-social-row {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    z-index: 1;
-    overflow: hidden;
+    gap: 22px;
+    padding-top: 20px;
   }
-
-  .hero-watermark span {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(160px, 28vw, 380px);
-    color: transparent;
-    -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 10%, transparent);
-    white-space: nowrap;
-    letter-spacing: -0.02em;
-    transform: rotate(-8deg) translateY(10%);
-    user-select: none;
+  .mobile-social-row a {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted);
+    text-decoration: none;
   }
 
-  .corner {
-    position: absolute;
-    width: 20px; height: 20px;
-    border-color: var(--border2);
-    border-style: solid;
-    z-index: 3;
+  /* ── HERO ──────────────────────────────────────── */
+  .hero {
+    position: relative;
+    padding: clamp(70px, 11vh, 130px) 0 clamp(54px, 8vh, 96px);
+    padding-inline: max(40px, calc((100vw - 1320px) / 2));
   }
 
-  .corner.tl { top: 72px; left: 48px; border-width: 1px 0 0 1px; }
-  .corner.tr { top: 72px; right: 48px; border-width: 1px 1px 0 0; }
-  .corner.bl { bottom: 72px; left: 48px; border-width: 0 0 1px 1px; }
-  .corner.br { bottom: 72px; right: 48px; border-width: 0 1px 1px 0; }
+  .corner, .hero-watermark { display: none; }
+
+  .hero-inner { position: relative; }
 
   .hero-eyebrow {
-    font-size: 10px;
-    color: var(--accent);
-    letter-spacing: 0.3em;
+    font-size: 11px;
+    letter-spacing: 0.22em;
     text-transform: uppercase;
-    margin-bottom: 20px;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.2s forwards;
+    color: var(--accent);
+    margin-bottom: 34px;
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 14px;
   }
-
-  .hero-eyebrow::before {
+  .hero-eyebrow::after {
     content: '';
-    width: 24px; height: 1px;
-    background: var(--accent);
-    opacity: 0.5;
+    flex: 1;
+    height: 1px;
+    background: var(--border);
   }
 
   .hero-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(44px, 8vw, 116px);
-    line-height: 0.92;
-    letter-spacing: -0.02em;
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: clamp(58px, 10.5vw, 148px);
+    line-height: 0.96;
+    letter-spacing: -0.015em;
     color: var(--white);
-    margin-bottom: 28px;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.35s forwards;
-    word-break: break-word;
-    overflow-wrap: break-word;
+    max-width: 13ch;
+  }
+  .hero-title .hl {
+    font-style: italic;
+    color: var(--accent);
   }
-
-  .hero-title .hl { color: var(--accent); }
-  .hero-title .hl2 { color: var(--accent2); -webkit-text-stroke: 0; }
 
   .hero-bottom {
     display: flex;
-    align-items: flex-end;
     justify-content: space-between;
-    gap: 32px;
-    opacity: 0;
-    animation: fadeUp 0.7s 0.5s forwards;
+    align-items: flex-end;
+    gap: 60px;
+    margin-top: clamp(44px, 7vh, 80px);
+    padding-top: 34px;
+    border-top: 1px solid var(--border);
   }
 
   .hero-sub {
-    font-size: 13px;
-    color: var(--muted);
-    max-width: 440px;
-    line-height: 1.8;
-    font-weight: 400;
+    max-width: 420px;
+    font-size: 16px;
+    line-height: 1.75;
+    color: var(--text);
   }
 
-  .hero-stats {
-    display: flex;
-    gap: 2px;
-    flex-shrink: 0;
-  }
+  .hero-stats { display: flex; }
 
   .hero-stat-box {
-    padding: 20px 28px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    text-align: right;
+    padding: 0 34px;
+    border-left: 1px solid var(--border);
   }
+  .hero-stat-box:last-child { padding-right: 0; }
 
   .hero-stat-box .num {
-    font-family: 'Syne', sans-serif;
-    font-weight: 700;
-    font-size: 36px;
+    font-family: var(--serif);
+    font-size: clamp(40px, 4.5vw, 62px);
     line-height: 1;
-    color: var(--accent2);
+    color: var(--accent);
+    letter-spacing: -0.02em;
   }
-
-  .hero-stat-box .num.good { color: var(--accent); }
-
+  .hero-stat-box .num.good { color: var(--accent3); }
   .hero-stat-box .lbl {
-    font-size: 9px;
-    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 10px;
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    margin-top: 4px;
+    color: var(--muted);
+    margin-top: 10px;
+    line-height: 1.7;
   }
 
-  /* TICKER */
+  /* ── TICKER ────────────────────────────────────── */
   .ticker {
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     overflow: hidden;
-    padding: 10px 0;
+    white-space: nowrap;
     background: var(--surface);
-    position: relative;
   }
-
-  .ticker::before, .ticker::after {
-    content: '';
-    position: absolute;
-    top: 0; bottom: 0;
-    width: 80px;
-    z-index: 2;
-    pointer-events: none;
-  }
-
-  .ticker::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
-  .ticker::after { right: 0; background: linear-gradient(-90deg, var(--surface), transparent); }
-
   .ticker-track {
-    display: flex;
-    animation: ticker 30s linear infinite;
-    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    width: max-content;
+    padding: 11px 0;
+    animation: ticker-scroll 90s linear infinite;
+  }
+  .ticker:hover .ticker-track { animation-play-state: paused; }
+  @keyframes ticker-scroll {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-50%); }
   }
-
   @media (prefers-reduced-motion: reduce) {
+    .ticker { overflow-x: auto; }
     .ticker-track { animation: none; }
   }
 
   .ticker-item {
+    font-family: var(--mono);
     font-size: 10px;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    padding: 0 36px;
+    letter-spacing: 0.14em;
     color: var(--muted);
-    flex-shrink: 0;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 10px;
+    gap: 9px;
+    margin-right: 44px;
   }
-
+  .ticker-item.red { color: var(--accent); }
   .ticker-item .dot {
-    width: 4px; height: 4px;
+    width: 4px;
+    height: 4px;
     border-radius: 50%;
-    background: var(--accent);
-    opacity: 0.6;
-    flex-shrink: 0;
-  }
-
-  .ticker-item.red .dot { background: var(--accent2); }
-
-  @keyframes ticker {
-    from { transform: translateX(0); }
-    to { transform: translateX(-50%); }
+    background: currentColor;
+    opacity: 0.65;
+    display: inline-block;
   }
 
-  /* SECTION COMMON */
+  /* ── SECTIONS ──────────────────────────────────── */
   section {
-    padding: 112px 48px;
-    border-bottom: 1px solid var(--border);
-    position: relative;
+    padding-block: clamp(72px, 10vh, 120px);
+    padding-inline: max(40px, calc((100vw - 1320px) / 2));
   }
 
   .section-eyebrow {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.3em;
-    text-transform: uppercase;
-    margin-bottom: 56px;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     gap: 14px;
+    font-size: 11px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: 44px;
   }
-
   .section-eyebrow .num {
     color: var(--accent);
-    font-size: 10px;
+    font-size: 11px;
   }
-
+  .section-eyebrow .num::before { content: '§ '; }
   .section-eyebrow::after {
     content: '';
     flex: 1;
-    max-width: 40px;
+    align-self: center;
     height: 1px;
-    background: var(--border2);
+    background: var(--border);
+  }
+
+  .about-title, .method-title, .projects-title, .impact-title, .roadmap-title {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: clamp(34px, 4.6vw, 58px);
+    line-height: 1.02;
+    letter-spacing: -0.01em;
+    color: var(--white);
+    text-transform: none;
   }
 
-  /* ABOUT */
+  /* ── ABOUT ─────────────────────────────────────── */
   .about-grid {
     display: grid;
-    grid-template-columns: 1.2fr 1fr;
-    gap: 80px;
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+    gap: clamp(40px, 6vw, 100px);
     align-items: start;
   }
 
-  .about-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(28px, 6vw, 52px);
-    line-height: 0.94;
-    letter-spacing: -0.02em;
-    color: var(--white);
-    margin-bottom: 36px;
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
-
   .about-quote {
-    border-left: 2px solid var(--accent);
-    padding: 14px 22px;
-    margin: 36px 0;
-    font-size: 12px;
+    font-family: var(--serif);
     font-style: italic;
-    color: var(--muted);
-    line-height: 1.7;
-    background: rgba(128,128,128,0.05);
-  }
-
-  .about-body {
-    font-size: 13px;
-    line-height: 1.9;
-    color: var(--muted);
-    margin-bottom: 16px;
-    font-weight: 400;
+    font-size: clamp(19px, 2vw, 24px);
+    line-height: 1.5;
+    color: var(--text);
+    margin-top: 28px;
+    padding-left: 22px;
+    border-left: 2px solid var(--accent);
   }
 
-  .about-body strong { color: var(--text); font-weight: 400; }
-
   .tag-row {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 28px;
+    gap: 8px;
+    margin-top: 30px;
   }
-
   .tag {
-    font-size: 9px;
-    letter-spacing: 0.15em;
+    font-size: 10px;
+    letter-spacing: 0.12em;
     text-transform: uppercase;
-    padding: 5px 10px;
+    padding: 6px 12px;
     border: 1px solid var(--border2);
+    border-radius: 999px;
     color: var(--muted);
-    background: transparent;
-    cursor: default;
-    transition: all 0.15s;
+  }
+  .tag.active {
+    color: var(--accent3);
+    border-color: var(--accent3);
   }
 
-  .tag:hover { border-color: var(--accent); color: var(--accent); }
-  .tag.active { border-color: var(--accent); color: var(--accent); opacity: 0.8; background: transparent; }
+  .about-body {
+    font-size: 15.5px;
+    line-height: 1.85;
+    color: var(--text);
+  }
 
   .gh-badge {
     display: inline-flex;
     align-items: center;
-    gap: 10px;
-    font-size: 10px;
-    letter-spacing: 0.12em;
-    color: var(--muted);
-    border: 1px solid var(--border2);
-    padding: 10px 16px;
-    text-decoration: none;
+    gap: 9px;
+    margin-top: 26px;
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
-    transition: all 0.2s;
-    margin-top: 28px;
-    cursor: pointer;
+    color: var(--text);
+    text-decoration: none;
+    border: 1px solid var(--border2);
+    padding: 10px 18px;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
   }
-
-  .gh-badge:hover { border-color: var(--muted); color: var(--text); }
-
+  .gh-badge:hover { border-color: var(--accent); color: var(--accent); }
   .gh-dot {
-    width: 6px; height: 6px;
+    width: 7px;
+    height: 7px;
     border-radius: 50%;
-    background: var(--accent);
-    flex-shrink: 0;
-    animation: pulse 2s infinite;
+    background: var(--accent3);
+    animation: pulse-dot 2.4s ease-in-out infinite;
   }
+  @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
 
-  /* METHODOLOGY */
+  /* ── METHODOLOGY ───────────────────────────────── */
   .method-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 80px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
+    gap: clamp(40px, 6vw, 90px);
     align-items: start;
   }
 
-  .method-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(28px, 3.5vw, 48px);
-    line-height: 0.94;
-    letter-spacing: -0.02em;
-    color: var(--white);
-    margin-bottom: 20px;
-  }
-
   .code-block {
-    margin-top: 28px;
-    font-size: 11px;
-    color: var(--muted);
-    border: 1px solid var(--border);
-    padding: 0;
-    overflow: hidden;
+    margin-top: 30px;
+    border: 1px solid var(--border2);
+    background: var(--terminal-bg);
   }
-
   .code-block-header {
-    background: var(--border);
-    padding: 8px 16px;
-    font-size: 9px;
-    color: #444;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: 10px;
+    padding: 9px 14px;
+    background: var(--terminal-bar-bg);
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--terminal-label-color);
   }
-
+  .code-block-header .dot { display: none; }
   .code-block-body {
     padding: 18px 20px;
-    line-height: 1.8;
+    font-family: var(--mono);
+    font-size: 12.5px;
+    line-height: 2;
+    color: var(--terminal-text);
   }
-
-  .code-block-body .k { color: var(--accent3); }
-  .code-block-body .v { color: var(--accent); }
-  .code-block-body .c { color: var(--code-comment); }
+  .code-block-body .c { color: var(--code-comment); font-style: italic; }
+  .code-block-body .k { color: #c8a96a; }
+  .code-block-body .v { color: #9dbd9a; }
 
   .method-flow {
     display: flex;
     flex-direction: column;
+    counter-reset: step;
   }
 
   .method-step {
     display: flex;
-    gap: 20px;
-    align-items: flex-start;
+    gap: 26px;
     padding: 22px 0;
-    border-bottom: 1px solid var(--border);
-    position: relative;
+    border-top: 1px solid var(--border);
   }
-
-  .method-step:last-child { border-bottom: none; }
+  .method-step:last-child { border-bottom: 1px solid var(--border); }
 
   .step-num {
-    font-size: 9px;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 26px;
     color: var(--accent);
-    letter-spacing: 0.12em;
-    min-width: 30px;
-    padding-top: 2px;
+    line-height: 1.1;
     flex-shrink: 0;
+    width: 44px;
   }
-
   .step-content h4 {
-    font-size: 12px;
-    font-weight: 400;
+    font-family: var(--sans);
+    font-size: 16px;
+    font-weight: 600;
     color: var(--white);
-    margin-bottom: 5px;
-    letter-spacing: 0.04em;
+    margin-bottom: 6px;
   }
-
   .step-content p {
-    font-size: 11px;
+    font-size: 13.5px;
+    line-height: 1.75;
     color: var(--muted);
-    line-height: 1.7;
-    font-weight: 400;
   }
+  .step-content em { color: var(--accent); font-style: italic; }
 
-  /* PROJECTS */
+  /* ── PROJECTS ──────────────────────────────────── */
   .projects-header {
     display: flex;
-    justify-content: space-between;
     align-items: flex-end;
-    margin-bottom: 56px;
+    justify-content: space-between;
+    gap: 24px;
+    flex-wrap: wrap;
+    margin-bottom: 34px;
   }
+  .projects-header .gh-badge { margin-top: 0; }
 
-  .projects-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(28px, 5vw, 60px);
-    letter-spacing: -0.02em;
-    line-height: 0.94;
-    color: var(--white);
-    word-break: break-word;
-  }
+  /* search */
+  .search-bar-wrap { margin-bottom: 26px; }
 
-  .project-card {
-    border: 1px solid var(--border);
-    padding: 48px;
-    margin-bottom: 2px;
-    position: relative;
-    overflow: hidden;
-    transition: border-color 0.3s;
+  .search-bar-inner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 1px solid var(--border2);
     background: var(--surface);
+    padding: 0 16px;
+    height: 52px;
+    transition: border-color 0.15s;
   }
+  .search-bar-inner:focus-within { border-color: var(--accent); }
+  .search-bar-inner.has-query { border-color: var(--accent); }
 
-  .project-card::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; bottom: 0;
-    width: 2px;
-    background: var(--accent);
-    transform: scaleY(0);
-    transform-origin: top;
-    transition: transform 0.4s ease;
+  .search-bar-prefix {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--accent);
+    flex-shrink: 0;
+    user-select: none;
   }
 
-  .project-card:hover::before { transform: scaleY(1); }
-  .project-card:hover { border-color: var(--border2); }
-  .project-card.red::before { background: var(--accent2); }
+  .search-bar-input {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--text);
+    height: 100%;
+  }
+  .search-bar-input::placeholder { color: var(--muted); opacity: 0.75; }
 
-  .project-card .card-bg-num {
-    position: absolute;
-    top: -12px; right: 32px;
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: 120px;
-    color: transparent;
-    -webkit-text-stroke: 1px var(--card-stroke);
-    pointer-events: none;
+  .search-bar-hint {
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+    border: 1px solid var(--border);
+    padding: 3px 8px;
+    border-radius: 3px;
+    flex-shrink: 0;
     user-select: none;
-    line-height: 1;
   }
 
-  .project-top {
+  .search-bar-clear {
+    display: none;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    font-size: 13px;
+    padding: 6px;
+    transition: color 0.15s;
+  }
+  .search-bar-clear:hover { color: var(--accent); }
+  .search-bar-clear.visible { display: block; }
+
+  .search-filter-row {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 40px;
+    align-items: center;
+    gap: 8px;
     flex-wrap: wrap;
-    gap: 24px;
+    margin-top: 14px;
   }
-
-  .project-num {
-    font-size: 9px;
+  .search-filter-label {
+    font-size: 10px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
     color: var(--muted);
-    letter-spacing: 0.25em;
-    margin-bottom: 10px;
+    margin-right: 4px;
+  }
+  .search-filter-btn {
+    font-family: var(--mono);
+    font-size: 10.5px;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
+    color: var(--muted);
+    background: transparent;
+    border: 1px solid var(--border2);
+    border-radius: 999px;
+    padding: 6px 14px;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
   }
-
-  .project-name {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: 44px;
-    letter-spacing: -0.01em;
-    color: var(--white);
-    line-height: 1;
+  .search-filter-btn:hover { color: var(--white); border-color: var(--border2); background: var(--surface); }
+  .search-filter-btn.active {
+    color: var(--bg);
+    background: var(--white);
+    border-color: var(--white);
   }
-
-  .project-desc {
-    font-size: 12px;
+  .search-count {
+    margin-left: auto;
+    font-size: 10.5px;
+    letter-spacing: 0.12em;
     color: var(--muted);
-    max-width: 320px;
-    line-height: 1.8;
-    margin-top: 10px;
-    font-weight: 400;
   }
 
-  .project-stats { text-align: right; }
-
-  .project-stats .stat-label {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.15em;
+  .search-no-results {
+    display: none;
+    border: 1px dashed var(--border2);
+    padding: 38px 30px;
+    text-align: center;
+    margin-bottom: 24px;
+  }
+  .search-no-results.visible { display: block; }
+  .search-no-results-label {
+    font-size: 11px;
+    letter-spacing: 0.2em;
     text-transform: uppercase;
-    margin-bottom: 4px;
+    color: var(--accent);
+    margin-bottom: 10px;
   }
-
-  .project-stats .stat-big {
-    font-family: 'Syne', sans-serif;
-    font-weight: 700;
-    font-size: 80px;
-    line-height: 1;
+  .search-no-results-text {
+    font-size: 13.5px;
+    color: var(--muted);
   }
 
-  .project-stats .stat-big.bad { color: var(--accent2); }
-  .project-stats .stat-big.good { color: var(--accent); font-size: 50px; }
+  .search-hidden { display: none !important; }
 
-  .project-stats .stat-unit { font-size: 38px; vertical-align: super; }
-  .project-stats .stat-unit.good { font-size: 24px; }
+  /* ── PROJECT CARD — the audit dossier ──────────── */
+  .project-card {
+    position: relative;
+    border: 1px solid var(--border2);
+    border-top: 2px solid var(--white);
+    background: var(--bg);
+    padding: clamp(28px, 4.5vw, 56px);
+    margin-bottom: 22px;
+    overflow: hidden;
+  }
+  .project-card.red { border-top-color: var(--accent); }
 
-  .reduction-badge {
-    display: inline-block;
-    background: transparent;
-    color: var(--accent);
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    padding: 5px 10px;
-    margin-top: 10px;
-    border: 1px solid var(--accent);
-    opacity: 0.8;
-  }
-
-  .terminals-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-    margin-top: 32px;
-  }
-
-  .terminal {
-    background: var(--terminal-bg);
-    border: 1px solid var(--border);
-    overflow: hidden;
+  .card-bg-num {
+    position: absolute;
+    top: -10px;
+    right: 18px;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: clamp(110px, 14vw, 200px);
+    line-height: 1;
+    color: transparent;
+    -webkit-text-stroke: 1px var(--border);
+    pointer-events: none;
+    user-select: none;
   }
 
-  .terminal-bar {
-    background: var(--terminal-bar-bg);
-    padding: 8px 14px;
+  .project-top {
+    position: relative;
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    gap: 6px;
-    border-bottom: 1px solid var(--border);
-  }
-
-  .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
-  .dot.red { background: #ff5f57; }
-  .dot.yellow { background: #febc2e; }
-  .dot.green { background: #28c840; }
-
-  .terminal-label {
-    font-size: 9px;
-    color: var(--terminal-label-color);
-    letter-spacing: 0.08em;
-    margin-left: 6px;
-    font-weight: 400;
-  }
-
-  .terminal-body {
-    padding: 18px 20px;
-    font-size: 11px;
-    line-height: 1.9;
-    color: var(--terminal-text);
-    font-weight: 400;
-  }
-
-  .t-head { color: var(--t-head-color); }
-  .t-bad { color: #f87171; }
-  .t-good { color: #4ade80; }
-  .t-accent { color: #60a5fa; }
-  .t-normal { color: var(--terminal-text); }
-
-  .key-insight {
-    margin-top: 32px;
-    padding-top: 32px;
-    border-top: 1px solid var(--border);
+    gap: clamp(28px, 4vw, 70px);
+    flex-wrap: wrap;
   }
+  .project-top > div:first-child { max-width: 560px; min-width: 0; flex: 1 1 380px; }
 
-  .key-insight-label {
-    font-size: 9px;
-    color: var(--accent);
-    letter-spacing: 0.25em;
+  .project-num {
+    font-size: 10.5px;
+    letter-spacing: 0.24em;
     text-transform: uppercase;
-    margin-bottom: 14px;
-  }
-
-  .key-insight p {
-    font-size: 12px;
-    color: var(--muted);
-    line-height: 1.9;
-    max-width: 640px;
-    font-weight: 400;
-  }
-
-  .bias-bar-wrap {
-    margin-top: 32px;
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-  }
-
-  .bias-row {
-    display: grid;
-    grid-template-columns: 150px 1fr 70px;
-    align-items: center;
-    gap: 14px;
-  }
-
-  .bias-label {
-    font-size: 10px;
-    color: var(--muted);
-    letter-spacing: 0.04em;
-  }
-
-  .bias-track {
-    height: 3px;
-    background: var(--bias-track-bg);
-    position: relative;
-    overflow: visible;
-  }
-
-  .bias-fill {
-    height: 100%;
-    position: relative;
-  }
-
-  .bias-fill.bad { background: var(--accent2); }
-  .bias-fill.good { background: var(--accent); }
-
-  .bias-val {
-    font-size: 10px;
-    color: var(--text);
-    text-align: right;
-  }
-
-  /* IMPACT */
-  .impact-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(28px, 5vw, 72px);
-    line-height: 0.93;
-    letter-spacing: -0.02em;
-    color: var(--white);
-    max-width: 680px;
-    margin-bottom: 0;
-    word-break: break-word;
-  }
-
-  .impact-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1px;
-    background: var(--border);
-    margin-top: 64px;
-  }
-
-  .impact-cell {
-    background: var(--bg);
-    padding: 40px 32px;
-    position: relative;
-    overflow: hidden;
-    transition: background 0.2s;
-  }
-
-  .impact-cell:hover { background: var(--surface); }
-
-  .impact-num {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: 60px;
-    line-height: 1;
     color: var(--accent);
-    margin-bottom: 12px;
-    letter-spacing: -0.02em;
-  }
-
-  .impact-desc {
-    font-size: 11px;
-    color: var(--muted);
-    line-height: 1.7;
-    font-weight: 400;
-  }
-
-  .impact-footnote {
-    font-size: 11px;
-    color: var(--muted);
-    max-width: 560px;
-    line-height: 1.9;
-    margin-top: 48px;
-    font-weight: 400;
-  }
-
-  /* ROADMAP */
-  .roadmap-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(24px, 4vw, 56px);
-    line-height: 0.93;
-    letter-spacing: -0.02em;
-    color: var(--white);
-    margin-bottom: 12px;
-    word-break: break-word;
-  }
-
-  .roadmap-sub {
-    font-size: 12px;
-    color: var(--muted);
-    max-width: 440px;
-    line-height: 1.8;
-    font-weight: 400;
-  }
-
-  .roadmap-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1px;
-    background: var(--border);
-    margin-top: 48px;
-  }
-
-  .roadmap-item {
-    background: var(--bg);
-    padding: 28px 32px;
-    display: flex;
-    gap: 18px;
-    align-items: flex-start;
-    transition: background 0.2s;
-  }
-
-  .roadmap-item:hover { background: var(--surface); }
-
-  .roadmap-status {
-    width: 7px; height: 7px;
-    border-radius: 50%;
-    margin-top: 5px;
-    flex-shrink: 0;
-  }
-
-  .roadmap-status.done { background: var(--accent); box-shadow: 0 0 8px rgba(201,168,76,0.6); }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .roadmap-status.done { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
+    margin-bottom: 16px;
   }
-  .roadmap-status.soon { background: transparent; border: 1px solid var(--border2); }
 
-  .roadmap-name {
-    font-size: 12px;
-    color: var(--text);
-    margin-bottom: 5px;
+  .project-name {
+    font-family: var(--serif);
     font-weight: 400;
-  }
-
-  .roadmap-meta {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.08em;
-  }
-
-  /* FOOTER */
-  footer {
-    padding: 40px 48px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 24px;
-    border-top: 1px solid var(--border);
-  }
-
-  .footer-logo {
-    font-family: 'Syne Mono', monospace;
-    font-size: 24px;
-    color: var(--white);
-    letter-spacing: 0.02em;
-  }
-
-  .footer-logo span { color: var(--accent); }
-
-  .footer-by {
-    font-size: 10px;
-    color: var(--muted);
-    letter-spacing: 0.1em;
-    margin-top: 6px;
-  }
-
-  .footer-links {
-    display: flex;
-    gap: 0;
-  }
-
-  .footer-links a {
-    font-size: 10px;
-    color: var(--muted);
-    text-decoration: none;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    transition: color 0.2s;
-    padding: 8px 16px;
-    border: 1px solid var(--border);
-    margin-left: -1px;
-  }
-
-  .footer-links a:hover { color: var(--accent); border-color: rgba(200,255,0,0.3); z-index: 1; position: relative; }
-
-  /* ANIMATIONS */
-  @keyframes fadeUp {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.3; }
-  }
-
-  .reveal {
-    opacity: 0;
-    transform: translateY(20px);
-    transition: opacity 0.65s ease, transform 0.65s ease;
-  }
-
-  .reveal.visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .reveal {
-      opacity: 1;
-      transform: none;
-      transition: none;
-    }
-  }
-
-  /* COMPARE BLOCKS */
-  .compare-row {
-    display: grid;
-    grid-template-columns: 1fr 40px 1fr;
-    gap: 12px;
-    align-items: center;
-    margin-top: 40px;
-  }
-
-  .compare-block {
-    border: 1px solid var(--border);
-    padding: 24px;
-    background: var(--compare-bg);
-  }
-
-  .compare-block.bad { border-color: var(--accent2); opacity: 0.6; }
-  .compare-block.good { border-color: var(--accent); opacity: 0.6; }
-
-  .compare-tag {
-    font-size: 8px;
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    margin-bottom: 14px;
-  }
-
-  .compare-tag.bad { color: var(--accent2); }
-  .compare-tag.good { color: var(--accent); }
-
-  .compare-num {
-    font-family: 'Syne', sans-serif;
-    font-weight: 700;
-    font-size: 48px;
+    font-size: clamp(34px, 4vw, 54px);
     line-height: 1;
-    letter-spacing: -0.02em;
-    margin-bottom: 4px;
-  }
-
-  .compare-num.bad { color: var(--accent2); }
-  .compare-num.good { color: var(--accent); }
-
-  .compare-desc {
-    font-size: 11px;
-    color: var(--muted);
-    line-height: 1.5;
-  }
-
-  .compare-arrow {
-    text-align: center;
-    font-size: 16px;
-    color: var(--border2);
-  }
-
-  /* EXPLAINERS */
-  .explainer-card {
-    border: 1px solid var(--border);
-    background: var(--bg);
-    overflow: hidden;
-  }
-
-  .explainer-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 48px;
-    padding: 48px;
-    border-bottom: 1px solid var(--border);
-    background: var(--surface);
-  }
-
-  .explainer-num {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-  }
-
-  .explainer-title {
-    font-family: 'Syne', sans-serif;
-    font-weight: 800;
-    font-size: clamp(22px, 3vw, 40px);
+    letter-spacing: 0.005em;
     color: var(--white);
-    line-height: 0.96;
-    letter-spacing: -0.02em;
-    margin-bottom: 14px;
+    margin-bottom: 18px;
   }
 
-  .explainer-tagline {
-    font-size: 12px;
-    color: var(--muted);
+  .project-desc {
+    font-size: 15px;
     line-height: 1.8;
-    font-style: italic;
-    max-width: 340px;
-  }
-
-  .explainer-def-label {
-    font-size: 9px;
-    color: var(--accent);
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    margin-bottom: 14px;
-  }
-
-  .explainer-def-text {
-    font-size: 13px;
     color: var(--text);
-    line-height: 1.9;
-    font-weight: 400;
-    border-left: 2px solid var(--accent);
-    padding-left: 20px;
-  }
-
-  .explainer-body {
-    padding: 48px;
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-  }
-
-  .explainer-block-label {
-    font-size: 9px;
-    color: var(--accent);
-    letter-spacing: 0.25em;
-    text-transform: uppercase;
-    margin-bottom: 14px;
-  }
-
-  .explainer-block-text {
-    font-size: 12px;
-    color: var(--muted);
-    line-height: 1.9;
-    font-weight: 400;
-    max-width: 720px;
-  }
-
-  .inline-code {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px;
-    background: var(--border);
-    color: var(--accent3);
-    padding: 1px 6px;
-    letter-spacing: 0.02em;
-  }
-
-  .proxy-table {
-    border: 1px solid var(--border);
-    overflow: hidden;
-  }
-
-  .proxy-row {
-    display: grid;
-    grid-template-columns: 200px 180px 1fr;
-    gap: 0;
-    border-bottom: 1px solid var(--border);
-    align-items: center;
   }
 
-  .proxy-row:last-child { border-bottom: none; }
-
-  .proxy-row > span {
-    padding: 12px 16px;
-    font-size: 11px;
-    color: var(--muted);
-    line-height: 1.5;
-    border-right: 1px solid var(--border);
-  }
-
-  .proxy-row > span:last-child { border-right: none; }
-
-  .proxy-row-head {
-    background: var(--surface);
-  }
-
-  .proxy-row-head > span {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    padding: 10px 16px;
-  }
-
-  .proxy-attr {
-    color: var(--accent2) !important;
-    font-size: 10px !important;
-    letter-spacing: 0.05em;
-  }
-
-  .proof-step-num {
-    font-size: 9px;
-    color: var(--accent);
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    margin-bottom: 6px;
-  }
-
-  .proof-step-label {
-    font-size: 11px;
-    color: var(--muted);
-    margin-bottom: 0;
-    letter-spacing: 0.04em;
-  }
-
-  .explainer-callout {
-    margin-top: 20px;
-    border: 1px solid rgba(201,168,76,0.25);
-    padding: 16px 20px;
-    font-size: 11px;
-    color: var(--accent);
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    background: rgba(201,168,76,0.04);
-  }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .explainer-callout {
-      border-color: color-mix(in srgb, var(--accent) 25%, transparent);
-      background: color-mix(in srgb, var(--accent) 4%, transparent);
-    }
-  }
-
-  .reading-links {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-  }
-
-  .reading-link {
-    font-size: 11px;
-    color: var(--muted);
-    text-decoration: none;
-    letter-spacing: 0.04em;
-    padding: 12px 16px;
-    border: 1px solid var(--border);
-    transition: all 0.15s;
-    display: block;
-  }
-
-  .reading-link:hover { color: var(--accent); border-color: var(--border2); background: var(--surface); }
-
-  .explainer-footer {
-    padding: 32px 48px;
-    border-top: 1px solid var(--border);
-    background: var(--surface);
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    flex-wrap: wrap;
-  }
-
-  .explainer-footer-label {
-    font-size: 9px;
-    color: var(--muted);
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
+  .project-stats {
+    text-align: right;
     flex-shrink: 0;
   }
-
-  .coming-soon-pills {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .coming-pill {
-    font-size: 9px;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    padding: 6px 12px;
-    border: 1px solid var(--border2);
-    color: var(--muted);
-  }
-
-  /* NAV DROPDOWNS */
-  .nav-dropdown-wrap {
-    position: relative;
-    height: 100%;
-  }
-
-  .nav-dropdown-trigger {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    cursor: pointer;
-  }
-
-  .nav-caret {
-    font-size: 8px;
-    opacity: 0.5;
-    transition: transform 0.2s, opacity 0.2s;
-    display: inline-block;
-    line-height: 1;
-  }
-
-  .nav-dropdown-wrap:hover .nav-caret,
-  .nav-dropdown-wrap:focus-within .nav-caret {
-    transform: rotate(180deg);
-    opacity: 1;
-  }
-
-  .nav-dropdown {
-    position: absolute;
-    top: 100%;
-    left: -1px;
-    min-width: 210px;
-    background: var(--nav-bg);
-    border: 1px solid var(--border2);
-    border-top: 2px solid var(--accent);
-    list-style: none;
-    padding: 4px 0;
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(-6px);
-    transition: opacity 0.18s ease, transform 0.18s ease;
-    backdrop-filter: blur(12px);
-    z-index: 200;
-  }
-
-  .nav-dropdown-wrap:hover .nav-dropdown,
-  .nav-dropdown-wrap:focus-within .nav-dropdown {
-    opacity: 1;
-    pointer-events: all;
-    transform: translateY(0);
-  }
-
-  .nav-dropdown li {
-    height: auto;
-  }
-
-  .nav-dropdown li a {
-    display: block;
-    height: auto;
-    padding: 10px 18px;
+  .stat-label {
     font-size: 10px;
-    color: var(--muted);
-    letter-spacing: 0.1em;
+    letter-spacing: 0.18em;
     text-transform: uppercase;
-    text-decoration: none;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    transition: color 0.15s, background 0.15s, padding-left 0.15s;
-    white-space: nowrap;
-  }
-
-  .nav-dropdown li:last-child a {
-    border-bottom: none;
-  }
-
-  .nav-dropdown li a:hover {
-    color: var(--accent);
-    background: rgba(201,168,76,0.05);
-    padding-left: 24px;
-  }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .nav-dropdown li a:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
-  }
-
-  /* RESPONSIVE */
-  @media (max-width: 900px) {
-    nav { padding: 0 16px; height: 52px; }
-    nav .nav-links { display: none; }
-    .nav-social { display: none; }
-    .nav-github { display: none; }
-    .theme-toggle { width: 30px; height: 30px; font-size: 12px; margin-left: 0; }
-
-    .nav-hamburger {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 5px;
-      width: 36px; height: 36px;
-      border: 1px solid var(--border2);
-      background: transparent;
-      cursor: pointer;
-      padding: 8px;
-      flex-shrink: 0;
-      margin-left: 8px;
-    }
-    .nav-hamburger span {
-      display: block;
-      height: 1px;
-      background: var(--muted);
-      transition: all 0.25s;
-      transform-origin: center;
-    }
-    .nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
-    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
-    .nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
-
-    .mobile-nav {
-      position: fixed;
-      top: 52px; left: 0; right: 0;
-      background: var(--nav-bg);
-      backdrop-filter: blur(16px);
-      border-bottom: 1px solid var(--border2);
-      z-index: 99;
-      max-height: 0;
-      overflow: hidden;
-      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .mobile-nav.open { max-height: calc(100vh - 52px); overflow-y: auto; }
-    .mobile-nav-inner {
-      padding: 8px 0 16px;
-    }
-    .mobile-nav a {
-      display: block;
-      padding: 13px 24px;
-      font-family: 'IBM Plex Mono', monospace;
-      font-size: 11px;
-      color: var(--muted);
-      text-decoration: none;
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      border-bottom: 1px solid var(--border);
-      transition: color 0.15s, background 0.15s;
-    }
-    .mobile-nav a:hover { color: var(--accent); background: rgba(201,168,76,0.04); }
-    @supports (background: color-mix(in srgb, red 1%, transparent)) {
-      .mobile-nav a:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
-    }
-    .mobile-nav a:last-child { border-bottom: none; }
-    .mobile-nav .mobile-section-label {
-      display: block;
-      padding: 10px 24px 4px;
-      font-size: 8px;
-      color: var(--accent);
-      letter-spacing: 0.25em;
-      text-transform: uppercase;
-      border-bottom: none;
-      pointer-events: none;
-      background: none;
-    }
-    .mobile-nav .mobile-sub {
-      padding-left: 36px;
-      font-size: 10px;
-    }
-    .mobile-nav .mobile-social-row {
-      display: flex;
-      gap: 1px;
-      padding: 16px 24px 0;
-      border-top: 1px solid var(--border);
-      margin-top: 8px;
-    }
-    .mobile-nav .mobile-social-row a {
-      flex: 1;
-      text-align: center;
-      border: 1px solid var(--border);
-      border-bottom: 1px solid var(--border);
-      padding: 10px 6px;
-      font-size: 9px;
-    }
-
-    .hero-inner { padding: 0 20px 52px; }
-    .hero-title { font-size: clamp(44px, 12vw, 80px); }
-    .hero-eyebrow { font-size: 9px; letter-spacing: 0.2em; }
-    .hero-sub { font-size: 12px; }
-    .hero-stats { display: none; }
-    .corner { display: none; }
-
-    section { padding: 64px 20px; }
-
-    .about-grid { grid-template-columns: 1fr; gap: 32px; }
-    .method-grid { grid-template-columns: 1fr; gap: 36px; }
-
-    .project-card { padding: 24px 20px; }
-    .project-top { flex-direction: column; gap: 20px; margin-bottom: 28px; }
-    .project-stats { text-align: left; }
-    .project-stats .stat-big { font-size: 52px; }
-    .project-stats .stat-big.good { font-size: 36px; }
-    .project-stats .stat-unit { font-size: 26px; }
-    .project-stats .stat-unit.good { font-size: 18px; }
-    .project-name { font-size: 32px; }
-
-    .terminals-grid { grid-template-columns: 1fr; gap: 10px; }
-    .bias-row { grid-template-columns: 110px 1fr 56px; gap: 10px; }
-    .bias-label { font-size: 9px; }
-
-    .impact-grid { grid-template-columns: 1fr; }
-    .impact-num { font-size: 48px; }
-
-    .roadmap-grid { grid-template-columns: 1fr; }
-    .compare-row { grid-template-columns: 1fr; }
-    .compare-arrow { display: none; }
-
-    footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
-    .projects-header { flex-direction: column; gap: 12px; align-items: flex-start; }
-
-    .section-eyebrow { margin-bottom: 36px; }
-    .hero-watermark span { font-size: clamp(100px, 30vw, 200px); }
-
-    .explainer-header { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
-    .explainer-body { padding: 28px 20px; gap: 36px; }
-    .proxy-row { grid-template-columns: 130px 110px 1fr; }
-    .explainer-footer { padding: 24px 20px; }
-  }
-
-  @media (min-width: 901px) {
-    .nav-hamburger { display: none; }
-    .mobile-nav { display: none; }
-  }
-
-  /* Prevent nav overflow at mid-size screens */
-  @media (min-width: 901px) and (max-width: 1120px) {
-    nav { padding: 0 20px; }
-    .nav-links a { padding: 0 12px; font-size: 9px; }
-    .nav-social-link { padding: 0 12px; font-size: 9px; }
-    .nav-github { padding: 0 12px; font-size: 9px; }
-  }
-
-  @media (max-width: 600px) {
-    .proxy-row { grid-template-columns: 1fr; }
-    .proxy-row > span { border-right: none; border-bottom: 1px solid var(--border); }
-    .proxy-row > span:last-child { border-bottom: none; }
-    .proxy-row-head { display: none; }
-  }
-
-  @media (max-width: 480px) {
-    .hero-title { font-size: clamp(38px, 14vw, 60px); }
-    .about-title { font-size: clamp(28px, 10vw, 40px); }
-    .projects-title { font-size: clamp(28px, 11vw, 44px); }
-    .project-name { font-size: 28px; }
-    .project-stats .stat-big { font-size: 44px; }
-    .project-card { padding: 20px 16px; }
-    section { padding: 52px 16px; }
-    nav { padding: 0 14px; }
-    .bias-row { grid-template-columns: 90px 1fr 48px; gap: 8px; }
-    .terminal-body { padding: 14px 14px; font-size: 10px; }
-  }
-
-  #back-to-top {
-  display: none;
-  position: fixed;
-  bottom: 24px;
-  right: 20px;
-  z-index: 200;
-  width: 40px;
-  height: 40px;
-  background: var(--bg);
-  border: 1px solid var(--accent);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  align-items: center;
-  justify-content: center;
-  }
-
-  #back-to-top.visible {
-  opacity: 1;
-  }
-
-  #back-to-top::before {
-  content: '';
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 8px solid var(--accent);
+    color: var(--muted);
+    margin-bottom: 2px;
   }
-
-  /* back-to-top visible on all screen sizes via JS */
-
-  .search-bar-hint {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 9px;
-    color: var(--terminal-label-color);
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    white-space: nowrap;
-    padding: 0 12px;
-    flex-shrink: 0;
-    pointer-events: none;
-    user-select: none;
-    align-self: center;
-    transition: opacity 0.15s;
+  .stat-big {
+    font-family: var(--serif);
+    font-size: clamp(42px, 4.6vw, 64px);
+    line-height: 1.05;
+    letter-spacing: -0.01em;
   }
+  .stat-big.bad { color: var(--accent); }
+  .stat-big.good { color: var(--accent3); }
+  .stat-unit { font-size: 0.45em; font-style: italic; }
 
-  /* Hide hint while the bar is focused */
-  .search-bar-inner:focus-within .search-bar-hint { opacity: 0; pointer-events: none; }
-  /* Hide hint when there is text (JS adds .has-query to the inner wrap) */
-  .search-bar-inner.has-query .search-bar-hint { display: none; }
-
-  /* Also hide on mobile where space is tight */
-  @media (max-width: 600px) {
-    .search-bar-hint { display: none; }
+  .reduction-badge {
+    display: inline-block;
+    margin-top: 14px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--accent3);
+    border: 1px solid var(--accent3);
+    border-radius: 999px;
+    padding: 6px 14px;
+    max-width: 320px;
   }
 
-  /* SEARCH BAR */
-  .search-bar-wrap {
-    margin-bottom: 40px;
-    position: relative;
+  /* terminals — printed output logs */
+  .terminals-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+    margin-top: 38px;
   }
 
-  .search-bar-inner {
-    display: flex;
-    align-items: stretch;
+  .terminal {
     border: 1px solid var(--border2);
     background: var(--terminal-bg);
-    transition: border-color 0.2s;
-  }
-
-  .search-bar-inner:focus-within {
-    border-color: var(--accent);
+    min-width: 0;
   }
-
-  .search-bar-prefix {
+  .terminal-bar {
     display: flex;
     align-items: center;
-    padding: 0 14px;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 9px 14px;
+    background: var(--terminal-bar-bg);
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+  }
+  .terminal-bar .dot { display: none; }
+  .terminal-label {
     font-size: 10px;
-    color: var(--accent);
-    letter-spacing: 0.1em;
-    border-right: 1px solid var(--border);
-    background: var(--surface);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--terminal-label-color);
     white-space: nowrap;
-    flex-shrink: 0;
-    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-
-  .search-bar-input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-    -webkit-appearance: none;
-    appearance: none;
-    font-family: 'IBM Plex Mono', monospace;
+  .terminal-body {
+    padding: 18px 20px;
+    font-family: var(--mono);
     font-size: 12px;
+    line-height: 2.05;
     color: var(--terminal-text);
-    padding: 14px 18px;
-    caret-color: var(--accent);
-    cursor: text;
-    min-width: 0;
-    width: 100%;
+    overflow-x: auto;
   }
+  .terminal-body > div { white-space: pre; }
+  .t-head { color: var(--t-head-color); }
+  .t-bad { color: #e07856; }
+  .t-good { color: #8fc3a4; }
+  .t-normal { color: var(--terminal-text); opacity: 0.8; }
+  .t-accent { color: #d9b36a; }
 
-  .search-bar-input::placeholder {
-    color: var(--terminal-label-color);
-    font-style: italic;
-    opacity: 1;
+  /* key insight — the marginal note */
+  .key-insight {
+    margin-top: 30px;
+    padding: 24px 28px;
+    background: var(--surface);
+    border-left: 2px solid var(--accent);
   }
-
-  /* Light mode: invert the terminal so text is readable */
-  html[data-theme="light"] .search-bar-inner {
-    background: var(--compare-bg);
+  .key-insight-label {
+    font-size: 10px;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 10px;
   }
-
-  html[data-theme="light"] .search-bar-input {
+  .key-insight p {
+    font-size: 14.5px;
+    line-height: 1.85;
     color: var(--text);
   }
 
-  html[data-theme="light"] .search-bar-input::placeholder {
-    color: var(--muted);
-    opacity: 0.6;
-  }
-
-  html[data-theme="light"] .search-bar-prefix {
-    background: var(--border);
+  .inline-code {
+    font-family: var(--mono);
+    font-size: 0.88em;
+    background: var(--bias-track-bg);
     color: var(--accent);
+    padding: 1px 6px;
+    border-radius: 3px;
   }
 
-  .search-bar-clear {
-    display: none;
+  /* bias bars — the ledger */
+  .bias-bar-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .bias-row {
+    display: flex;
     align-items: center;
-    justify-content: center;
-    width: 44px;
-    background: transparent;
-    border: none;
-    border-left: 1px solid var(--border);
-    color: var(--muted);
-    font-size: 14px;
-    cursor: pointer;
-    transition: color 0.15s, background 0.15s;
+    gap: 16px;
+  }
+  .bias-label {
+    width: 150px;
     flex-shrink: 0;
+    text-align: right;
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted);
   }
-
-  .search-bar-clear:hover { color: var(--accent2); background: rgba(155,35,53,0.06); }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .search-bar-clear:hover { background: color-mix(in srgb, var(--accent2) 6%, transparent); }
+  .bias-track {
+    flex: 1;
+    height: 14px;
+    background: var(--bias-track-bg);
+    overflow: hidden;
+  }
+  .bias-fill { height: 100%; }
+  .bias-fill.bad { background: var(--accent); }
+  .bias-fill.good { background: var(--accent3); }
+  .bias-val {
+    width: 64px;
+    flex-shrink: 0;
+    font-family: var(--mono);
+    font-size: 11.5px;
+    color: var(--text);
   }
-  .search-bar-clear.visible { display: flex; }
 
-  .search-filter-row {
+  /* actions row (injected by JS) */
+  .project-actions {
     display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 12px;
     align-items: center;
+    gap: 10px;
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 1px solid var(--border);
+    flex-wrap: wrap;
   }
-
-  .search-filter-label {
-    font-size: 9px;
+  .project-actions-label {
+    font-size: 10px;
     color: var(--muted);
     letter-spacing: 0.2em;
     text-transform: uppercase;
     margin-right: 4px;
-    flex-shrink: 0;
   }
 
-  .search-filter-btn {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 9px;
+  /* copy + share buttons (injected by JS) */
+  .copy-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--mono);
+    font-size: 9.5px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    padding: 5px 12px;
-    border: 1px solid var(--border2);
+    color: var(--terminal-label-color);
     background: transparent;
-    color: var(--muted);
-    cursor: pointer;
-    transition: all 0.15s;
+    border: 1px solid rgba(255,255,255,0.14);
+    border-radius: 3px;
+    padding: 3px 10px;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+    flex-shrink: 0;
+    white-space: nowrap;
+    line-height: 1.7;
   }
+  .copy-btn:hover { color: #d9b36a; border-color: #d9b36a; }
+  .copy-btn.copied { color: #8fc3a4; border-color: #8fc3a4; }
+  .copy-btn svg { width: 10px; height: 10px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 
-  .search-filter-btn:hover { color: var(--accent); border-color: var(--accent); }
-  .search-filter-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(201,168,76,0.06); }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .search-filter-btn.active { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+  .code-block-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .terminal-bar-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
+
+  .share-audit-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: var(--mono);
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--text);
+    background: transparent;
+    border: 1px solid var(--border2);
+    border-radius: 999px;
+    padding: 8px 18px;
+    transition: color 0.15s, border-color 0.15s, background 0.15s;
+  }
+  .share-audit-btn:hover {
+    color: var(--bg);
+    background: var(--accent);
+    border-color: var(--accent);
+  }
+  .share-audit-btn.shared {
+    color: var(--bg);
+    background: var(--accent3);
+    border-color: var(--accent3);
   }
+  .share-audit-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 
-  .search-count {
-    font-size: 9px;
+  /* ── IMPACT ────────────────────────────────────── */
+  .impact-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-top: 50px;
+    border-top: 1px solid var(--border2);
+    border-bottom: 1px solid var(--border2);
+  }
+  .impact-cell {
+    padding: 44px 36px;
+    border-left: 1px solid var(--border2);
+  }
+  .impact-cell:first-child { border-left: none; padding-left: 0; }
+  .impact-num {
+    font-family: var(--serif);
+    font-size: clamp(64px, 8vw, 116px);
+    line-height: 1;
+    color: var(--white);
+    letter-spacing: -0.02em;
+  }
+  .impact-desc {
+    margin-top: 16px;
+    font-size: 13.5px;
+    line-height: 1.8;
     color: var(--muted);
-    letter-spacing: 0.1em;
-    margin-left: auto;
-    flex-shrink: 0;
-    align-self: center;
-    padding-top: 2px;
+    max-width: 300px;
+  }
+  .impact-footnote {
+    margin-top: 40px;
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: clamp(17px, 1.8vw, 21px);
+    line-height: 1.6;
+    color: var(--text);
+    max-width: 760px;
   }
 
-  .search-count span { color: var(--accent); }
-
-  .search-no-results {
-    display: none;
-    padding: 64px 48px;
-    text-align: center;
-    border: 1px solid var(--border);
-    background: var(--surface);
+  /* ── ROADMAP ───────────────────────────────────── */
+  .roadmap-sub {
+    margin-top: 18px;
+    font-size: 15px;
+    line-height: 1.8;
+    color: var(--muted);
+    max-width: 560px;
   }
 
-  .search-no-results.visible { display: block; }
+  .roadmap-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: clamp(36px, 5vw, 80px);
+    margin-top: 46px;
+  }
 
-  .search-no-results-label {
-    font-size: 9px;
-    color: var(--accent);
-    letter-spacing: 0.3em;
-    text-transform: uppercase;
-    margin-bottom: 12px;
+  .roadmap-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 17px 0;
+    border-bottom: 1px solid var(--border);
   }
 
-  .search-no-results-text {
-    font-size: 12px;
-    color: var(--muted);
-    line-height: 1.7;
+  .roadmap-status {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    margin-top: 6px;
+    flex-shrink: 0;
+  }
+  .roadmap-status.done { background: var(--accent3); }
+  .roadmap-status.soon {
+    background: transparent;
+    border: 1.5px solid var(--accent);
   }
 
-  .search-highlight {
-    background: rgba(201,168,76,0.18);
-    color: var(--accent);
-    border-radius: 0;
+  .roadmap-name {
+    font-size: 14.5px;
+    font-weight: 600;
+    color: var(--white);
+    line-height: 1.4;
   }
-  @supports (background: color-mix(in srgb, red 1%, transparent)) {
-    .search-highlight { background: color-mix(in srgb, var(--accent) 18%, transparent); }
+  .roadmap-meta {
+    margin-top: 4px;
+    font-size: 11px;
+    letter-spacing: 0.04em;
+    line-height: 1.7;
+    color: var(--muted);
   }
 
-  /* hide items that don't match search */
-  .project-card.search-hidden,
-  .explainer-card.search-hidden {
+  /* ── BACK TO TOP ───────────────────────────────── */
+  #back-to-top {
+    position: fixed;
+    bottom: 28px;
+    right: 28px;
+    z-index: 900;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: 1px solid var(--border2);
+    background: var(--bg);
+    color: var(--text);
     display: none;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.25s, transform 0.25s, color 0.15s, border-color 0.15s;
+    box-shadow: 0 10px 26px rgba(20,16,8,0.14);
   }
+  #back-to-top::after { content: '↑'; font-size: 17px; }
+  #back-to-top.visible { opacity: 1; transform: translateY(0); }
+  #back-to-top:hover { color: var(--accent); border-color: var(--accent); }
 
-  /* Accent-bordered terminal (replaces inline color-mix) */
-  .terminal--accent { border-color: var(--accent); opacity: 0.5; }
-  @supports (border-color: color-mix(in srgb, red 1%, red)) {
-    .terminal--accent { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); opacity: 1; }
+  /* ── FOOTER ────────────────────────────────────── */
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    flex-wrap: wrap;
+    padding-block: 44px 52px;
+    padding-inline: max(40px, calc((100vw - 1320px) / 2));
+    border-top: 1px solid var(--border2);
+  }
+  .footer-logo {
+    font-family: var(--serif);
+    font-style: italic;
+    font-size: 26px;
+    color: var(--white);
+  }
+  .footer-logo span { color: var(--accent); }
+  .footer-by {
+    margin-top: 6px;
+    font-size: 10.5px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .footer-links { display: flex; gap: 26px; }
+  .footer-links a {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+    text-decoration: none;
+    transition: color 0.15s;
   }
+  .footer-links a:hover { color: var(--accent); }
 
-  @media (max-width: 900px) {
-    .search-bar-prefix { display: none; }
-    .search-no-results { padding: 40px 20px; }
+  /* ── REVEAL ANIMATION ──────────────────────────── */
+  .reveal {
+    opacity: 0;
+    transform: translateY(18px);
+    transition: opacity 0.7s ease, transform 0.7s ease;
+  }
+  .reveal.visible { opacity: 1; transform: none; }
+  @media (prefers-reduced-motion: reduce) {
+    .reveal { opacity: 1; transform: none; transition: none; }
+  }
+
+  /* ── RESPONSIVE ────────────────────────────────── */
+  @media (max-width: 1080px) {
+    .nav-links, .nav-social { display: none; }
+    .nav-hamburger { display: flex; margin-left: auto; }
+    nav { gap: 16px; }
+    .theme-toggle { margin-left: auto; }
+    .nav-hamburger { margin-left: 0; }
+  }
+
+  @media (max-width: 940px) {
+    .hero-bottom { flex-direction: column; align-items: flex-start; gap: 38px; }
+    .hero-stats { width: 100%; }
+    .hero-stat-box { flex: 1; padding: 0 20px; }
+    .hero-stat-box:first-child { padding-left: 0; border-left: none; }
+    .about-grid, .method-grid { grid-template-columns: 1fr; }
+    .terminals-grid { grid-template-columns: 1fr; }
+    .impact-grid { grid-template-columns: 1fr; border: none; border-top: 1px solid var(--border2); }
+    .impact-cell { border-left: none; border-bottom: 1px solid var(--border2); padding: 34px 0; }
+    .roadmap-grid { grid-template-columns: 1fr; }
+    .project-stats { text-align: left; }
+    .card-bg-num { font-size: 110px; top: -6px; right: 10px; }
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 640px) {
+    nav { padding: 0 20px; }
+    section { padding-left: 20px; padding-right: 20px; }
+    .hero { padding-left: 20px; padding-right: 20px; }
+    .hero-title { font-size: clamp(46px, 13.5vw, 72px); }
+    .hero-stat-box .num { font-size: 34px; }
+    .bias-label { width: 104px; font-size: 9px; }
+    .bias-val { width: 52px; font-size: 10px; }
+    .search-bar-hint { display: none; }
     .search-count { display: none; }
+    .terminal-body { font-size: 11px; }
+    footer { padding: 36px 20px 44px; }
+    .copy-btn { font-size: 8.5px; padding: 2px 8px; }
+    .share-audit-btn { font-size: 9px; padding: 7px 14px; }
   }
-  
+
 </style>
 <link rel="stylesheet" href="assets/explainers.css">
 </head>
@@ -1962,7 +1253,7 @@
 
 <!-- NAV -->
 <nav>
-  <a href="#" class="nav-logo">FAIR_CODE</a>
+  <a href="#" class="nav-logo">Fair Code</a>
   <ul class="nav-links">
     <li><a href="#about">About</a></li>
     <li><a href="#methodology">Method</a></li>
@@ -2017,16 +1308,9 @@
 
 <!-- HERO -->
 <section class="hero" id="home" aria-labelledby="hero-heading">
-  <div class="corner tl"></div>
-  <div class="corner tr"></div>
-  <div class="corner bl"></div>
-  <div class="corner br"></div>
-
-  <div class="hero-watermark"><span>BIAS</span></div>
-
   <div class="hero-inner">
-    <p class="hero-eyebrow">Algorithmic Bias Research · Open Source</p>
-    <h1 id="hero-heading" class="hero-title">THE BIAS<br>IS <span class="hl">REAL.</span><br>SO IS<br>THE <span class="hl">FIX.</span></h1>
+    <p class="hero-eyebrow">Algorithmic bias research · Open source</p>
+    <h1 id="hero-heading" class="hero-title">The bias is <span class="hl">real</span>.<br>So is the <span class="hl">fix</span>.</h1>
     <div class="hero-bottom">
       <p class="hero-sub">AI systems decide your freedom, your job, your future. This project proves the bias is measurable — and shows exactly how to remove it.</p>
       <div class="hero-stats">
@@ -2125,7 +1409,7 @@ <h1 id="hero-heading" class="hero-title">THE BIAS<br>IS <span class="hl">REAL.</
   <div class="section-eyebrow"><span class="num">01</span>About the Project</div>
   <div class="about-grid">
     <div>
-      <h2 id="about-heading" class="about-title">CODE THAT HOLDS ALGORITHMS ACCOUNTABLE</h2>
+      <h2 id="about-heading" class="about-title">Code that holds algorithms accountable</h2>
       <div class="about-quote">
         "AI systems are making decisions about your freedom, your job, and your healthcare. This project proves the bias is real. And it shows exactly how to fix it."
       </div>
@@ -2153,7 +1437,7 @@ <h2 id="about-heading" class="about-title">CODE THAT HOLDS ALGORITHMS ACCOUNTABL
   <div class="section-eyebrow"><span class="num">02</span>Methodology</div>
   <div class="method-grid reveal">
     <div>
-      <h2 id="methodology-heading" class="method-title">THE PIPELINE</h2>
+      <h2 id="methodology-heading" class="method-title">The pipeline</h2>
       <p style="font-size: 12px; color: var(--muted); line-height: 1.9; margin-top: 16px; font-weight: 400;">Every project in this repo follows the same bias detection and mitigation workflow. Reproducible. Transparent. Measurable.</p>
       <div class="code-block">
         <div class="code-block-header">
@@ -2213,14 +1497,14 @@ <h4>Retrain & Re-measure</h4>
 <section id="projects" aria-labelledby="projects-heading">
   <div class="section-eyebrow"><span class="num">03</span>Projects</div>
   <div class="projects-header">
-    <h2 id="projects-heading" class="projects-title">THE EXPERIMENTS</h2>
+    <h2 id="projects-heading" class="projects-title">The experiments</h2>
     <a href="https://github.com/yakew7/Fair-Code" target="_blank" rel="noopener noreferrer" class="gh-badge">↗ View All Code</a>
   </div>
 
   <!-- SEARCH BAR: PROJECTS -->
   <div class="search-bar-wrap" id="projects-search-wrap">
     <div class="search-bar-inner">
-      <span class="search-bar-prefix">$ grep --</span>
+      <span class="search-bar-prefix">⌕</span>
       <input type="text" class="search-bar-input" id="projects-search-input" placeholder="search experiments… e.g. race, hiring, 97%, COMPAS" autocomplete="off" spellcheck="false" aria-label="Search experiments">
       <span class="search-bar-hint" aria-hidden="true">press / to search</span>
       <button class="search-bar-clear" id="projects-search-clear" aria-label="Clear search">✕</button>
@@ -2729,7 +2013,7 @@ <h2 id="projects-heading" class="projects-title">THE EXPERIMENTS</h2>
 <section id="explainers" style="background: var(--surface);" aria-labelledby="explainers-heading">
   <div class="section-eyebrow"><span class="num">04</span>Explainers</div>
   <div class="projects-header">
-    <h2 id="explainers-heading" class="projects-title reveal">THE CONCEPTS</h2>
+    <h2 id="explainers-heading" class="projects-title reveal">The concepts</h2>
     <a href="https://github.com/yakew7/Fair-Code/tree/main/explainers" target="_blank" rel="noopener noreferrer" class="gh-badge">↗ Source markdown</a>
   </div>
 
@@ -2737,7 +2021,7 @@ <h2 id="explainers-heading" class="projects-title reveal">THE CONCEPTS</h2>
 
   <div class="search-bar-wrap" id="explainers-search-wrap" aria-label="Search explainers">
     <div class="search-bar-inner">
-      <span class="search-bar-prefix">$ grep --</span>
+      <span class="search-bar-prefix">⌕</span>
       <input type="text" class="search-bar-input" id="explainers-search-input" placeholder="search concepts… e.g. proxy, SHAP, equalized odds, calibration" autocomplete="off" spellcheck="false" aria-label="Search explainers">
       <span class="search-bar-hint" aria-hidden="true">press / to search</span>
       <button class="search-bar-clear" id="explainers-search-clear" aria-label="Clear search">✕</button>
@@ -2763,7 +2047,7 @@ <h2 id="explainers-heading" class="projects-title reveal">THE CONCEPTS</h2>
 <!-- IMPACT -->
 <section id="impact" style="background: var(--surface);" aria-labelledby="impact-heading">
   <div class="section-eyebrow"><span class="num">05</span>Why This Matters</div>
-  <h2 id="impact-heading" class="impact-title reveal">THESE ARE NOT HYPOTHETICALS</h2>
+  <h2 id="impact-heading" class="impact-title reveal">These are not hypotheticals</h2>
   <div class="impact-grid reveal">
     <div class="impact-cell">
       <div class="impact-num">87%</div>
@@ -2784,7 +2068,7 @@ <h2 id="impact-heading" class="impact-title reveal">THESE ARE NOT HYPOTHETICALS<
 <!-- ROADMAP -->
 <section id="roadmap" aria-labelledby="roadmap-heading">
   <div class="section-eyebrow"><span class="num">06</span>What's Next</div>
-  <h2 id="roadmap-heading" class="roadmap-title reveal">THE ROADMAP</h2>
+  <h2 id="roadmap-heading" class="roadmap-title reveal">The roadmap</h2>
   <p class="roadmap-sub reveal">More datasets, more domains, more bias exposed and fixed. Follow the project on Instagram for updates.</p>
 
   <div class="roadmap-grid reveal">
@@ -2978,7 +2262,7 @@ <h2 id="roadmap-heading" class="roadmap-title reveal">THE ROADMAP</h2>
 <!-- FOOTER -->
 <footer role="contentinfo">
   <div>
-    <div class="footer-logo">FAIR<span>_</span>CODE</div>
+    <div class="footer-logo">Fair Code<span>.</span></div>
     <div class="footer-by">by Yash Kewlani · @thefaircodeproject</div>
   </div>
   <div class="footer-links">
@@ -3034,7 +2318,7 @@ <h2 id="roadmap-heading" class="roadmap-title reveal">THE ROADMAP</h2>
   // Theme toggle
   const toggle = document.getElementById('themeToggle');
   const html = document.documentElement;
-  const saved = localStorage.getItem('fc-theme') || 'dark';
+  const saved = localStorage.getItem('fc-theme') || 'light';
   html.setAttribute('data-theme', saved);
   toggle.textContent = saved === 'light' ? '☾' : '☀';
   toggle.setAttribute('aria-label', saved === 'light' ? 'Switch to dark mode' : 'Switch to light mode');