diff --git a/docs/index.html b/docs/index.html
index 2d34d4d..808b138 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -45,8 +45,8 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 
     <!-- Theme Color -->
-    <meta name="theme-color" content="#0a0e1a" />
-    <meta name="msapplication-TileColor" content="#0a0e1a" />
+    <meta name="theme-color" content="#0a0a0b" />
+    <meta name="msapplication-TileColor" content="#0a0a0b" />
 
     <!-- Security -->
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
@@ -54,13 +54,6 @@
     <meta http-equiv="X-XSS-Protection" content="1; mode=block" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <!-- Preload critical fonts -->
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-      as="style"
-    />
-
     <!-- Canonical URL -->
     <link rel="canonical" href="https://kai.21no.de/" />
 
@@ -100,1086 +93,322 @@
       }
     </script>
 
-    <link
-      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
-
+    <!-- 21no.de shared brand: fonts + design system (served from assets.21no.de) -->
+    <link rel="preconnect" href="https://assets.21no.de" crossorigin />
+    <link rel="stylesheet" href="https://assets.21no.de/fonts/fonts.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/tokens.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/base.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/nav.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/buttons.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/hero.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/cards.css" />
+    <link rel="stylesheet" href="https://assets.21no.de/css/footer.css" />
+
+    <!-- Page-specific styles (kept inline per shared-web-assets convention) -->
     <style>
-      :root {
-        --bg: #0a0e1a;
-        --bg-secondary: #0f1420;
-        --panel: rgba(20, 25, 40, 0.8);
-        --accent: #00d9ff;
-        --accent-secondary: #7c3aed;
-        --accent-glow: rgba(0, 217, 255, 0.3);
-        --warn: #fbbf24;
-        --danger: #ef4444;
-        --success: #10b981;
-        --text-primary: #f8fafc;
-        --text-muted: #94a3b8;
-        --text-dim: #64748b;
-        --border: rgba(148, 163, 184, 0.1);
-        --border-bright: rgba(0, 217, 255, 0.3);
-        --font-mono: "JetBrains Mono", monospace;
-      }
-
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      html {
-        scroll-behavior: smooth;
-      }
-
-      body {
-        margin: 0;
-        background-color: var(--bg);
-        color: var(--text-primary);
-        font-family: "Outfit", sans-serif;
-        line-height: 1.6;
-        overflow-x: hidden;
-        background-image:
-          radial-gradient(circle at 20% 10%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
-          radial-gradient(circle at 80% 80%, rgba(0, 217, 255, 0.06) 0%, transparent 50%),
-          linear-gradient(rgba(148, 163, 184, 0.02) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(148, 163, 184, 0.02) 1px, transparent 1px);
-        background-size:
-          100% 100%,
-          100% 100%,
-          40px 40px,
-          40px 40px;
-        background-attachment: fixed;
-      }
-
-      .container {
-        max-width: 1280px;
-        margin: 0 auto;
-        padding: 0 32;
-      }
-
-      /* --- Navigation --- */
-      nav {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 28px 32px;
-        border-bottom: 1px solid var(--border);
-        backdrop-filter: blur(20px);
-        background: rgba(10, 14, 26, 0.8);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-
-      .logo {
-        font-family: "Outfit", sans-serif;
-        font-weight: 800;
-        font-size: 1.5rem;
-        letter-spacing: -0.5px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .logo-icon {
-        width: 32px;
-        height: 32px;
-        background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
-        border-radius: 6px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      /* Hero terminal demo */
+      .terminal {
+        padding: 24px 22px;
         font-family: var(--font-mono);
-        font-size: 0.9rem;
-        font-weight: 700;
-        color: var(--bg);
-      }
-
-      .logo span {
-        background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
+        font-size: 13.5px;
+        line-height: 1.9;
+        overflow-x: auto;
       }
-
-      .nav-links {
+      .terminal .line {
         display: flex;
-        align-items: center;
-        gap: 32px;
-      }
-
-      .nav-links a {
-        color: var(--text-muted);
-        text-decoration: none;
-        font-size: 0.95rem;
-        font-weight: 500;
-        transition: color 0.2s;
-        position: relative;
-      }
-
-      .nav-links a:hover {
-        color: var(--accent);
-      }
-
-      .nav-links a::after {
-        content: "";
-        position: absolute;
-        bottom: -4px;
-        left: 0;
-        width: 0;
-        height: 2px;
-        background: var(--accent);
-        transition: width 0.3s;
-      }
-
-      .nav-links a:hover::after {
-        width: 100%;
-      }
-
-      /* --- Hero --- */
-      .hero {
-        padding: 80px 0 48px;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 48px;
-        align-items: center;
-        position: relative;
-      }
-
-      .hero::before {
-        content: "";
-        position: absolute;
-        top: -200px;
-        right: -200px;
-        width: 600px;
-        height: 600px;
-        background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
-        pointer-events: none;
-        animation: pulse 8s ease-in-out infinite;
-      }
-
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: 0.3;
-          transform: scale(1);
-        }
-        50% {
-          opacity: 0.6;
-          transform: scale(1.1);
-        }
-      }
-
-      .hero-content {
-        position: relative;
-        z-index: 1;
-      }
-
-      .hero-content h1 {
-        font-size: 4.5rem;
-        margin: 0 0 24px 0;
-        line-height: 1;
-        font-weight: 800;
-        letter-spacing: -3px;
-        background: linear-gradient(135deg, var(--text-primary), var(--accent));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-      }
-
-      .hero-content .subtitle {
-        color: var(--text-muted);
-        font-size: 1.35rem;
-        margin: 0 0 32px 0;
-        line-height: 1.5;
-        font-weight: 400;
-      }
-
-      .status-tag {
-        display: inline-flex;
-        align-items: center;
         gap: 10px;
-        background: rgba(0, 217, 255, 0.08);
-        border: 1px solid var(--border-bright);
-        padding: 8px 16px;
-        border-radius: 8px;
-        color: var(--accent);
-        font-family: var(--font-mono);
-        font-size: 0.75rem;
-        margin-bottom: 32px;
-        font-weight: 600;
-      }
-
-      .status-dot {
-        width: 8px;
-        height: 8px;
-        background: var(--accent);
-        border-radius: 50%;
-        animation: blink 2s ease-in-out infinite;
-      }
-
-      .hero-buttons {
-        display: flex;
-        gap: 12px;
-        margin-top: 24px;
-      }
-
-      .btn-primary {
-        background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
-        color: var(--bg);
-        padding: 16px 32px;
-        text-decoration: none;
-        font-weight: 700;
-        border-radius: 8px;
-        font-size: 1rem;
-        transition:
-          transform 0.2s,
-          box-shadow 0.2s;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .btn-primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 24px var(--accent-glow);
-      }
-
-      .btn-secondary {
-        color: var(--text-primary);
-        padding: 16px 32px;
-        text-decoration: none;
-        font-weight: 600;
-        border-radius: 8px;
-        font-size: 1rem;
-        border: 1px solid var(--border);
-        transition:
-          border-color 0.2s,
-          background 0.2s;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .btn-secondary:hover {
-        border-color: var(--accent);
-        background: rgba(0, 217, 255, 0.05);
-      }
-
-      /* --- Hero Image Placeholder --- */
-      .hero-image-placeholder {
-        background: var(--bg-secondary);
-        border: 1px solid var(--border);
-        border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-        padding: 0;
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        z-index: 1;
-        transform: scale(1.1);
-        overflow: hidden;
+        white-space: pre;
       }
-
-      .hero-image-placeholder .cli-header {
-        background: rgba(0, 0, 0, 0.3);
-        padding: 10px 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid var(--border);
-      }
-
-      .hero-image-placeholder .cli-dots {
-        display: flex;
-        gap: 8px;
-      }
-
-      .hero-image-placeholder .dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: #ef4444;
-      }
-
-      .hero-image-placeholder .dot:nth-child(2) {
-        background: #fbbf24;
-      }
-
-      .hero-image-placeholder .dot:nth-child(3) {
-        background: #10b981;
-      }
-
-      .hero-image-placeholder .cli-title {
-        color: var(--text-dim);
-        font-size: 0.75rem;
-        font-weight: 600;
-        font-family: var(--font-mono);
-      }
-
-      .hero-image-placeholder .cli-body {
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-      }
-
-      /* --- Visual CLI --- */
-      .cli-window {
-        background: var(--bg-secondary);
-        border: 1px solid var(--border);
-        border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-        overflow: hidden;
-        font-family: var(--font-mono);
-        position: relative;
-        z-index: 1;
-      }
-
-      .cli-header {
-        background: rgba(0, 0, 0, 0.3);
-        padding: 14px 20px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid var(--border);
-      }
-
-      .cli-dots {
-        display: flex;
-        gap: 8px;
-      }
-
-      .dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-      }
-
-      .cli-title {
-        color: var(--text-dim);
-        font-size: 0.75rem;
-        font-weight: 600;
-      }
-
-      .cli-body {
-        padding: 28px;
-        font-size: 0.9rem;
-        min-height: 380px;
-        line-height: 1.8;
-      }
-
-      .cli-line {
-        margin-bottom: 12px;
-        display: flex;
-        gap: 12px;
-        align-items: flex-start;
-      }
-
-      .cli-prompt {
+      .terminal .t-prompt {
         color: var(--accent);
         font-weight: 600;
       }
-
-      .cli-comment {
-        color: var(--text-dim);
+      .terminal .t-dim {
+        color: var(--text-tertiary);
       }
-
-      .cli-success {
-        color: var(--success);
+      .terminal .t-green {
+        color: var(--green);
       }
-
-      .cli-route {
+      .terminal .t-accent {
         color: var(--accent);
       }
-
-      .cli-cursor {
-        animation: blink 1s infinite;
-      }
-
-      /* --- Features Grid --- */
-      .features-section {
-        padding: 80px 0;
+      .terminal .t-purple {
+        color: var(--purple);
       }
-
-      .section-header {
-        text-align: center;
-        margin-bottom: 48px;
-      }
-
-      .section-label {
-        font-family: var(--font-mono);
-        font-size: 0.85rem;
-        color: var(--accent);
-        letter-spacing: 2px;
-        display: block;
-        margin-bottom: 16px;
-        text-transform: uppercase;
-        font-weight: 600;
-      }
-
-      .section-title {
-        font-size: 3rem;
-        font-weight: 800;
-        margin: 0 0 16px 0;
-        letter-spacing: -1px;
-      }
-
-      .section-description {
-        color: var(--text-muted);
-        font-size: 1.15rem;
-        max-width: 600px;
-        margin: 0 auto;
-      }
-
-      .features-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 24px;
-      }
-
-      .feature-card {
-        background: var(--panel);
-        border: 1px solid var(--border);
-        padding: 20px;
-        border-radius: 14px;
-        transition: all 0.3s;
-        position: relative;
-        overflow: hidden;
-      }
-
-      .feature-card::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
-        transform: scaleX(0);
-        transition: transform 0.3s;
-      }
-
-      .feature-card:hover {
-        border-color: var(--accent);
-        transform: translateY(-4px);
-        box-shadow: 0 12px 32px rgba(0, 217, 255, 0.15);
-      }
-
-      .feature-card:hover::before {
-        transform: scaleX(1);
-      }
-
-      .feature-icon {
-        width: 48px;
-        height: 48px;
-        background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
-        border-radius: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.5rem;
-        margin-bottom: 12px;
-      }
-
-      .feature-card h3 {
-        margin: 0 0 12px 0;
-        font-size: 1.35rem;
-        font-weight: 700;
-      }
-
-      .feature-card p {
-        margin: 0;
-        font-size: 0.95rem;
-        color: var(--text-muted);
-        line-height: 1.6;
+      .terminal .cursor {
+        display: inline-block;
+        width: 8px;
+        height: 1.05em;
+        background: var(--accent);
+        vertical-align: text-bottom;
+        animation: blink 1.1s step-end infinite;
       }
-
-      /* --- Installation Steps --- */
-      .install-section {
-        padding: 80px 0;
-        background: linear-gradient(180deg, transparent, rgba(0, 217, 255, 0.02), transparent);
+      @keyframes blink {
+        50% {
+          opacity: 0;
+        }
       }
 
+      /* Install steps */
       .steps {
         display: flex;
         flex-direction: column;
-        gap: 20px;
-        margin-top: 40px;
-        max-width: 1000px;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .step-item {
-        position: relative;
-        background: var(--panel);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 20px;
-        transition: all 0.3s;
+        gap: 16px;
+        max-width: 820px;
       }
-
-      .step-item:hover {
-        border-color: var(--accent);
-        transform: translateX(4px);
+      .step {
+        background: var(--bg-card);
+        border: 1px solid var(--border-card);
+        border-radius: var(--radius-lg);
+        padding: 24px;
+        transition: border-color 0.2s, transform 0.2s;
       }
-
-      .step-header {
-        display: flex;
-        align-items: center;
-        gap: 24px;
-        margin-bottom: 20px;
+      .step:hover {
+        border-color: rgba(255, 255, 255, 0.12);
+        transform: translateY(-1px);
       }
-
-      .step-num {
+      .step .step-num {
         font-family: var(--font-mono);
+        font-size: 11px;
+        font-weight: 500;
         color: var(--accent);
-        font-size: 0.8rem;
-        font-weight: 700;
-        letter-spacing: 1px;
-        flex-shrink: 0;
-        min-width: 120px;
+        text-transform: uppercase;
+        letter-spacing: 0.6px;
       }
-
-      .step-title {
-        font-size: 1.25rem;
-        font-weight: 700;
-        margin: 0;
-        flex-shrink: 0;
+      .step h3 {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.3px;
+        margin: 8px 0 6px;
       }
-
-      .step-description {
-        font-size: 0.95rem;
-        color: var(--text-muted);
-        margin: 0 0 20px 0;
+      .step p {
+        font-size: 14px;
+        font-weight: 300;
+        color: var(--text-secondary);
         line-height: 1.6;
+        margin-bottom: 16px;
       }
-
       .step-code {
-        background: var(--bg-secondary);
-        border: 1px solid var(--border);
-        padding: 16px 20px;
-        border-radius: 12px;
-        font-family: var(--font-mono);
-        font-size: 0.85rem;
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
         gap: 16px;
-        transition: border-color 0.2s;
-      }
-
-      .step-code:hover {
-        border-color: var(--accent);
+        background: var(--bg-code);
+        border: 1px solid var(--border-card);
+        border-radius: var(--radius-md);
+        padding: 14px 16px;
       }
-
       .step-code code {
         flex: 1;
+        font-family: var(--font-mono);
+        font-size: 13px;
+        color: var(--text-primary);
         overflow-x: auto;
         white-space: nowrap;
-        color: var(--text-primary);
       }
-
-      .cli-copy {
+      .copy-btn {
+        flex-shrink: 0;
         background: transparent;
-        border: 1px solid var(--border);
-        color: var(--text-muted);
+        border: 1px solid var(--border-card);
+        color: var(--text-tertiary);
         font-family: var(--font-mono);
-        font-size: 0.7rem;
-        padding: 8px 16px;
-        cursor: pointer;
-        border-radius: 6px;
-        transition: all 0.2s;
-        font-weight: 600;
+        font-size: 10px;
+        font-weight: 500;
         text-transform: uppercase;
-        letter-spacing: 0.5px;
-        flex-shrink: 0;
+        letter-spacing: 0.6px;
+        padding: 7px 12px;
+        border-radius: var(--radius-sm);
+        cursor: pointer;
+        transition: all 0.15s;
       }
-
-      .cli-copy:hover {
+      .copy-btn:hover {
         color: var(--text-primary);
-        border-color: var(--accent);
-        background: rgba(0, 217, 255, 0.1);
-      }
-
-      /* --- Architecture Diagram --- */
-      .architecture-section {
-        padding: 80px 0;
+        border-color: rgba(56, 189, 248, 0.4);
+        background: var(--accent-subtle);
       }
 
-      .diagram-box {
-        background: var(--panel);
-        border: 1px solid var(--border);
-        border-radius: 20px;
-        padding: 40px;
-        margin: 40px 0;
+      /* CTA banner */
+      .cta {
         text-align: center;
+        background: var(--bg-card);
+        border: 1px solid var(--border-card);
+        border-radius: var(--radius-lg);
+        padding: 56px 24px;
         position: relative;
         overflow: hidden;
       }
-
-      .diagram-box::before {
+      .cta::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
-        height: 3px;
-        background: linear-gradient(90deg, transparent, var(--accent), var(--accent-secondary), transparent);
-      }
-
-      .diagram-content {
-        max-width: 800px;
-        margin: 0 auto;
-      }
-
-      .diagram-visual {
-        font-family: var(--font-mono);
-        font-size: 0.85rem;
-        line-height: 2;
-        color: var(--text-muted);
-        margin: 32px 0;
-        text-align: left;
-        background: var(--bg-secondary);
-        padding: 32px;
-        border-radius: 12px;
-        border: 1px solid var(--border);
+        height: 2px;
+        background: linear-gradient(90deg, transparent, var(--accent), var(--purple), transparent);
       }
-
-      .diagram-visual .highlight {
-        color: var(--accent);
+      .cta h2 {
+        font-size: clamp(26px, 3vw, 38px);
         font-weight: 700;
-      }
-
-      /* --- Memory Section --- */
-      .memory-section {
-        padding: 80px 0;
-        background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.03), transparent);
-      }
-
-      .memory-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 48px;
-        align-items: center;
-        margin-top: 40px;
-      }
-
-      .memory-content h2 {
-        font-size: 2.75rem;
-        margin: 0 0 24px 0;
-        font-weight: 800;
         letter-spacing: -1px;
-      }
-
-      .memory-content p {
-        color: var(--text-muted);
-        font-size: 1.1rem;
-        line-height: 1.7;
-        margin-bottom: 32px;
-      }
-
-      .memory-list {
-        list-style: none;
-        padding: 0;
-      }
-
-      .memory-list li {
-        color: var(--text-muted);
-        font-size: 0.95rem;
-        font-family: var(--font-mono);
-        margin-bottom: 16px;
-        padding-left: 24px;
-        position: relative;
-      }
-
-      .memory-list li::before {
-        content: "→";
-        position: absolute;
-        left: 0;
-        color: var(--accent);
-        font-weight: 700;
-      }
-
-      .code-preview {
-        background: var(--bg-secondary);
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        padding: 20px;
-        font-family: var(--font-mono);
-        font-size: 0.85rem;
-        line-height: 1.8;
-      }
-
-      .code-comment {
-        color: var(--text-dim);
-        margin-bottom: 16px;
-      }
-
-      .code-key {
-        color: var(--accent);
-      }
-
-      .code-value {
-        color: var(--text-primary);
-      }
-
-      .code-string {
-        color: var(--warn);
-      }
-
-      .code-indent {
-        padding-left: 20px;
-      }
-
-      /* --- Footer --- */
-      footer {
-        padding: 40px 0 24px;
-        border-top: 1px solid var(--border);
-        margin-top: 40px;
-      }
-
-      .footer-content {
-        display: grid;
-        grid-template-columns: 2fr 1fr 1fr;
-        gap: 40px;
-        margin-bottom: 40px;
-      }
-
-      .footer-brand h3 {
-        font-size: 1.5rem;
-        margin: 0 0 16px 0;
-        font-weight: 800;
-      }
-
-      .footer-brand p {
-        color: var(--text-muted);
-        font-size: 0.95rem;
-        line-height: 1.6;
-        margin: 0;
-      }
-
-      .footer-links h4 {
-        font-size: 0.85rem;
-        font-family: var(--font-mono);
-        color: var(--accent);
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        margin: 0 0 20px 0;
-        font-weight: 700;
-      }
-
-      .footer-links ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-      }
-
-      .footer-links li {
+        line-height: 1.2;
         margin-bottom: 12px;
       }
-
-      .footer-links a {
-        color: var(--text-muted);
-        text-decoration: none;
-        font-size: 0.9rem;
-        transition: color 0.2s;
-      }
-
-      .footer-links a:hover {
-        color: var(--accent);
-      }
-
-      .footer-bottom {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-top: 24px;
-        border-top: 1px solid var(--border);
-        font-family: var(--font-mono);
-        font-size: 0.8rem;
-        color: var(--text-dim);
-      }
-
-      .footer-bottom a {
-        color: var(--accent);
-        text-decoration: none;
-        transition: opacity 0.2s;
-      }
-
-      .footer-bottom a:hover {
-        opacity: 0.8;
-      }
-
-      /* --- Responsive --- */
-      @media (max-width: 1024px) {
-        .hero {
-          grid-template-columns: 1fr;
-          gap: 32px;
-        }
-
-        .hero-content h1 {
-          font-size: 3.5rem;
-        }
-
-        .memory-grid {
-          grid-template-columns: 1fr;
-          gap: 32px;
-        }
-
-        .footer-content {
-          grid-template-columns: 1fr;
-          gap: 32px;
-        }
+      .cta h2 .accent {
+        background: linear-gradient(135deg, var(--accent) 0%, #818cf8 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
       }
-
-      @media (max-width: 768px) {
-        .container {
-          padding: 0 24px;
-        }
-
-        /* Stack hero sections and constrain total height so it fits the viewport */
-        .hero {
-          display: flex;
-          flex-direction: column;
-          padding: 20px 0 16px;
-          gap: 16px;
-          max-height: calc(100vh - 56px); /* account roughly for the sticky nav (28px top+bottom) */
-          min-height: 0; /* allow children to shrink */
-          overflow: hidden;
-        }
-
-        .hero-content {
-          z-index: 1;
-          flex: 0 0 auto;
-        }
-
-        .hero-content h1 {
-          font-size: 2.5rem;
-          letter-spacing: -1px;
-          margin-bottom: 8px;
-        }
-
-        /* Make the image placeholder fill remaining space but allow it to shrink */
-        .hero-image-placeholder {
-          flex: 1 1 auto;
-          min-height: 0; /* critical to make inner scroll/overflow work inside flex */
-          max-height: none;
-          transform: none;
-          border-radius: 12px;
-          overflow: hidden;
-        }
-
-        /* Allow the internal CLI body to scroll if its content is too tall */
-        .hero-image-placeholder .cli-body {
-          height: 100%;
-          min-height: 0;
-          overflow: auto;
-          display: block;
-        }
-
-        .hero-image-placeholder img {
-          display: block;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-
-        .hero-content .subtitle {
-          font-size: 1.1rem;
-        }
-
-        .section-title {
-          font-size: 2rem;
-        }
-
-        .nav-links {
-          gap: 16px;
-        }
-
-        .nav-links a {
-          font-size: 0.85rem;
-        }
-
-        .hero-buttons {
-          flex-direction: column;
-        }
-
-        .btn-primary,
-        .btn-secondary {
-          width: 100%;
-          justify-content: center;
-        }
-
-        .features-grid {
-          grid-template-columns: 1fr;
-        }
-
-        .step-item {
-          padding: 24px;
-        }
-
-        .step-code {
-          flex-direction: column;
-          align-items: stretch;
-        }
-
-        .step-code code {
-          white-space: normal;
-          word-break: break-all;
-        }
-
-        .cli-copy {
-          width: 100%;
-          text-align: center;
-        }
+      .cta p {
+        font-size: 17px;
+        font-weight: 300;
+        color: var(--text-secondary);
+        max-width: 640px;
+        margin: 0 auto;
+        line-height: 1.7;
       }
 
-      /* Extra small screens */
-      @media (max-width: 420px) {
-        .hero-image-placeholder {
-          max-height: 40vh;
-        }
+      /* Section heading helper for centered intros */
+      .section-head {
+        max-width: 640px;
+        margin: 0 auto 40px;
+        text-align: center;
       }
-
-      @keyframes blink {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0;
-        }
+      .section-head .lead {
+        margin-left: auto;
+        margin-right: auto;
       }
     </style>
   </head>
   <body>
-    <div class="container">
-      <nav>
-        <div class="logo">
-          <div class="logo-icon">K</div>
-          <span>Kai</span>
-        </div>
+    <!-- Navigation -->
+    <nav class="nav">
+      <div class="nav-inner">
+        <a class="nav-logo" href="/">
+          <img src="assets/logo.svg" alt="Kai logo" />
+          Kai
+        </a>
         <div class="nav-links">
           <a href="#features">Features</a>
-          <a href="#install">Installation</a>
+          <a href="#install">Install</a>
           <a href="#architecture">How It Works</a>
-          <a href="https://github.com/BackendStack21/kai" target="_blank">GitHub ↗</a>
+          <a class="nav-cta" href="https://github.com/BackendStack21/kai" target="_blank" rel="noopener">GitHub</a>
         </div>
-      </nav>
-
-      <header class="hero">
-        <div class="hero-content">
-          <div class="status-tag">
-            <span class="status-dot"></span>
-            <span>Accelerating innovation...</span>
-          </div>
-          <h1>The Universal Brain for OpenCode</h1>
-          <p class="subtitle">
-            Multi-agent orchestration system for OpenCode. Single entry point for intelligent pipelines with persistent
-            project memory.
-          </p>
-          <div class="hero-buttons">
-            <a href="#install" class="btn-primary">
-              Get Started
-              <span>→</span>
-            </a>
-            <a href="https://github.com/BackendStack21/kai" target="_blank" class="btn-secondary">
-              View on GitHub
-              <span>↗</span>
-            </a>
-          </div>
+      </div>
+    </nav>
+
+    <!-- Hero -->
+    <header class="hero">
+      <div class="container">
+        <div class="hero-badge"><span class="dot"></span> Accelerating innovation</div>
+        <h1>The Universal Brain for <span class="accent">OpenCode</span></h1>
+        <p>
+          Multi-agent orchestration for OpenCode. A single entry point for intelligent pipelines with persistent project
+          memory — analyze, route, and execute automatically.
+        </p>
+        <div class="hero-actions">
+          <a href="#install" class="btn btn-primary">Get Started →</a>
+          <a href="https://github.com/BackendStack21/kai" class="btn btn-secondary" target="_blank" rel="noopener"
+            >View on GitHub ↗</a
+          >
+        </div>
+        <div class="hero-stats">
+          <div class="stat"><span class="num">20+</span> specialized agents</div>
+          <div class="stat"><span class="num">&lt;10m</span> fast-track tasks</div>
+          <div class="stat"><span class="num">MIT</span> open source</div>
         </div>
 
-        <div class="hero-image-placeholder">
-          <div class="cli-header">
-            <div class="cli-dots">
-              <div class="dot"></div>
-              <div class="dot"></div>
-              <div class="dot"></div>
-            </div>
+        <div class="code-block">
+          <div class="bar">
+            <span class="dot r"></span>
+            <span class="dot y"></span>
+            <span class="dot g"></span>
+            <span class="title">kai — opencode</span>
           </div>
-          <div class="cli-body">
-            <img
-              src="assets/hero-image.png"
-              alt="Kai Hero Image"
-              style="width: 100%; height: 100%; object-fit: cover; border-radius: 0"
-            />
+          <div class="terminal">
+            <div class="line"><span class="t-prompt">$</span><span>opencode "add rate limiting to the API"</span></div>
+            <div class="line"><span class="t-dim">› analyzing intent &amp; routing…</span></div>
+            <div class="line"><span class="t-accent">→ engineering pipeline</span></div>
+            <div class="line"><span class="t-dim">  @architect</span><span class="t-green">✓ designed</span></div>
+            <div class="line"><span class="t-dim">  @developer</span><span class="t-green">✓ implemented</span></div>
+            <div class="line">
+              <span class="t-dim">  @reviewer @tester @docs</span><span class="t-purple">∥ parallel</span>
+            </div>
+            <div class="line"><span class="t-dim">  @devops</span><span class="t-green">✓ verified</span></div>
+            <div class="line"><span class="t-green">✓ done</span><span class="t-dim">— quality gates passed</span></div>
+            <div class="line"><span class="t-prompt">$</span><span class="cursor"></span></div>
           </div>
         </div>
-      </header>
-
-      <section id="install" class="install-section">
-        <div class="section-header">
-          <span class="section-label">Quick Start</span>
-          <h2 class="section-title">Get Running in Seconds</h2>
-          <p class="section-description">Install Kai agents into OpenCode with one command. No separate CLI needed.</p>
+      </div>
+    </header>
+
+    <!-- Install -->
+    <section id="install" class="section">
+      <div class="container">
+        <div class="section-head">
+          <div class="section-label">Quick Start</div>
+          <h2>Get Running in Seconds</h2>
+          <p class="lead">Install Kai agents into OpenCode with one command. No separate CLI needed.</p>
         </div>
 
         <div class="steps">
-          <div class="step-item">
-            <span class="step-num">01 — INSTALL</span>
-            <h3 class="step-title">Run the Installer</h3>
-            <p class="step-description">
-              Downloads the latest Kai release and configures it as your default OpenCode agent.
-            </p>
+          <div class="step">
+            <span class="step-num">01 — Install</span>
+            <h3>Run the Installer</h3>
+            <p>Downloads the latest Kai release and configures it as your default OpenCode agent.</p>
             <div class="step-code">
               <code id="code1">curl -fsSL https://kai.21no.de/scripts/installer.sh | bash -s -- latest --yes</code>
-              <button class="cli-copy" onclick="copyText('code1')">Copy</button>
+              <button class="copy-btn" onclick="copyText('code1')">Copy</button>
             </div>
           </div>
 
-          <div class="step-item">
-            <span class="step-num">02 — VERIFY</span>
-            <h3 class="step-title">Check Installation</h3>
-            <p class="step-description">Confirm OpenCode is installed and Kai agent definitions are loaded.</p>
+          <div class="step">
+            <span class="step-num">02 — Verify</span>
+            <h3>Check Installation</h3>
+            <p>Confirm OpenCode is installed and Kai agent definitions are loaded.</p>
             <div class="step-code">
               <code id="code2">opencode --version</code>
-              <button class="cli-copy" onclick="copyText('code2')">Copy</button>
+              <button class="copy-btn" onclick="copyText('code2')">Copy</button>
             </div>
           </div>
 
-          <div class="step-item">
-            <span class="step-num">03 — EXECUTE</span>
-            <h3 class="step-title">Start Using Kai</h3>
-            <p class="step-description">
-              Run OpenCode with any task. Kai analyzes, routes, and orchestrates automatically.
-            </p>
+          <div class="step">
+            <span class="step-num">03 — Execute</span>
+            <h3>Start Using Kai</h3>
+            <p>Run OpenCode with any task. Kai analyzes, routes, and orchestrates automatically.</p>
             <div class="step-code">
               <code id="code3">opencode</code>
-              <button class="cli-copy" onclick="copyText('code3')">Copy</button>
+              <button class="copy-btn" onclick="copyText('code3')">Copy</button>
             </div>
           </div>
         </div>
-      </section>
-
-      <section id="features" class="features-section">
-        <div class="section-header">
-          <span class="section-label">Core Capabilities</span>
-          <h2 class="section-title">Built for Autonomous Execution</h2>
-          <p class="section-description">
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section id="features" class="section">
+      <div class="container">
+        <div class="section-head">
+          <div class="section-label">Core Capabilities</div>
+          <h2>Built for Autonomous Execution</h2>
+          <p class="lead">
             Kai operates through OpenCode, orchestrating specialized agents and enforcing quality gates across all
             workflows.
           </p>
         </div>
 
         <div class="features-grid">
-          <div class="feature-card">
-            <div class="feature-icon">🧠</div>
+          <div class="card">
+            <div class="card-icon accent">🧠</div>
             <h3>Intelligent Routing</h3>
             <p>
-              Analyzes intent and automatically routes to the right specialist agents. From quick fixes to complex
+              Analyzes intent and automatically routes to the right specialist agents — from quick fixes to complex
               engineering pipelines.
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">⚡</div>
+          <div class="card">
+            <div class="card-icon purple">⚡</div>
             <h3>Parallel Execution</h3>
             <p>
               Runs @reviewer, @tester, and @docs simultaneously after implementation. Maximum efficiency, minimal wait
@@ -1187,125 +416,75 @@ <h3>Parallel Execution</h3>
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">🔒</div>
+          <div class="card">
+            <div class="card-icon green">🔒</div>
             <h3>Security First</h3>
             <p>
               Enforced deny-lists for dangerous commands. Filesystem boundaries prevent accidental system modifications.
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">📊</div>
+          <div class="card">
+            <div class="card-icon accent">📊</div>
             <h3>Quality Gates</h3>
             <p>
-              Strict validation at every phase. Code quality, test coverage, security scans, and documentation checks.
+              Strict validation at every phase: code quality, test coverage, security scans, and documentation checks.
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">💾</div>
+          <div class="card">
+            <div class="card-icon purple">💾</div>
             <h3>Project Memory</h3>
             <p>
               Persistent .kai/ directory stores conventions, decisions, and failure patterns. Never rediscover context.
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">🎯</div>
+          <div class="card">
+            <div class="card-icon green">🎯</div>
             <h3>Deterministic Output</h3>
             <p>
               Temperature strategy ensures precision. Specialists locked at 0.1 for consistent, predictable results.
             </p>
           </div>
         </div>
-
-        <div
-          style="
-            text-align: center;
-            margin-top: 32px;
-            padding: 32px 24px;
-            background: var(--panel);
-            border: 1px solid var(--border-bright);
-            border-radius: 16px;
-            position: relative;
-            overflow: hidden;
-          "
-        >
-          <div
-            style="
-              position: absolute;
-              top: 0;
-              left: 0;
-              right: 0;
-              height: 3px;
-              background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent));
-            "
-          ></div>
-          <h2
-            style="
-              font-size: 2.5rem;
-              margin: 0 0 12px 0;
-              font-weight: 800;
-              line-height: 1.2;
-              background: linear-gradient(135deg, var(--text-primary), var(--accent));
-              -webkit-background-clip: text;
-              -webkit-text-fill-color: transparent;
-              background-clip: text;
-              display: inline-block;
-              background-size: 100% 100%;
-            "
-          >
-            Use Kai once. You'll never go back.
-          </h2>
-          <p
-            style="
-              font-size: 1.2rem;
-              color: var(--text-muted);
-              margin: 0;
-              max-width: 700px;
-              margin: 0 auto;
-              line-height: 1.6;
-            "
-          >
-            From day one, Kai transforms how you work. No learning curve. No setup friction. Just intelligent
-            orchestration that feels like magic.
-          </p>
-        </div>
-      </section>
-
-      <section id="architecture" class="architecture-section">
-        <div class="section-header">
-          <span class="section-label">How It Works</span>
-          <h2 class="section-title">Single Brain, Multiple Specialists</h2>
-          <p class="section-description">
+      </div>
+    </section>
+
+    <!-- Architecture -->
+    <section id="architecture" class="section">
+      <div class="container">
+        <div class="section-head">
+          <div class="section-label">How It Works</div>
+          <h2>Single Brain, Multiple Specialists</h2>
+          <p class="lead">
             Kai analyzes your request and orchestrates the right specialists. You focus on what to build, Kai handles
             how.
           </p>
         </div>
 
-        <div class="features-grid" style="margin-top: 60px">
-          <div class="feature-card">
+        <div class="features-grid">
+          <div class="card">
             <h3>Fast-Track Team</h3>
             <p>@explorer, @doc-fixer, @quick-reviewer, @dependency-manager. Target: &lt;10 minutes.</p>
           </div>
 
-          <div class="feature-card">
+          <div class="card">
             <h3>Research Team</h3>
             <p>@research for deep investigation, @fact-check for verification. Variable duration based on scope.</p>
           </div>
 
-          <div class="feature-card">
+          <div class="card">
             <h3>Engineering Pipeline</h3>
             <p>@architect → @developer → (@reviewer + @tester + @docs in parallel) → @devops.</p>
           </div>
 
-          <div class="feature-card">
+          <div class="card">
             <h3>Learning Team</h3>
             <p>@postmortem for failure analysis, @refactor-advisor for tech debt detection and health scoring.</p>
           </div>
 
-          <div class="feature-card">
+          <div class="card">
             <h3>Quality Team</h3>
             <p>
               @security-auditor, @performance-optimizer, @integration-specialist, @accessibility-expert. Rigorous
@@ -1313,7 +492,7 @@ <h3>Quality Team</h3>
             </p>
           </div>
 
-          <div class="feature-card">
+          <div class="card">
             <h3>Utility Team</h3>
             <p>
               @executive-summarizer, @jira-writer. Concise briefings for leadership and stakeholders; automated Jira
@@ -1321,34 +500,25 @@ <h3>Utility Team</h3>
             </p>
           </div>
         </div>
-      </section>
-
-      <section
-        class="ecosystem-section"
-        style="
-          padding: 40px 0 32px;
-          background: linear-gradient(180deg, rgba(124, 58, 237, 0.03), transparent, rgba(0, 217, 255, 0.03));
-        "
-      >
-        <div class="section-header">
-          <span class="section-label">Built on OpenCode</span>
-          <h2 class="section-title">Leverage the Entire Ecosystem</h2>
-          <p class="section-description">
+      </div>
+    </section>
+
+    <!-- Ecosystem -->
+    <section id="ecosystem" class="section">
+      <div class="container">
+        <div class="section-head">
+          <div class="section-label">Built on OpenCode</div>
+          <h2>Leverage the Entire Ecosystem</h2>
+          <p class="lead">
             Kai isn't just another tool. It's a complete orchestration layer that harnesses
-            <a
-              href="https://opencode.ai/"
-              target="_blank"
-              style="color: var(--accent); text-decoration: none; font-weight: 600"
-              >OpenCode's</a
-            >
-            powerful agent framework, giving you instant access to specialized agents, persistent memory, and extensible
-            workflows.
+            <a href="https://opencode.ai/" target="_blank" rel="noopener">OpenCode's</a> powerful agent framework —
+            giving you instant access to specialized agents, persistent memory, and extensible workflows.
           </p>
         </div>
 
-        <div class="features-grid" style="margin-top: 32px">
-          <div class="feature-card">
-            <div class="feature-icon">🔌</div>
+        <div class="features-grid">
+          <div class="card">
+            <div class="card-icon accent">🔌</div>
             <h3>Drop-in Integration</h3>
             <p>
               Install once, use everywhere. Kai integrates seamlessly with your existing OpenCode setup. No
@@ -1356,8 +526,8 @@ <h3>Drop-in Integration</h3>
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">🚀</div>
+          <div class="card">
+            <div class="card-icon purple">🚀</div>
             <h3>Instant Productivity</h3>
             <p>
               20+ specialized agents ready to work. From quick fixes to complex engineering pipelines, everything is
@@ -1365,17 +535,17 @@ <h3>Instant Productivity</h3>
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">🧩</div>
+          <div class="card">
+            <div class="card-icon green">🧩</div>
             <h3>Extensible by Design</h3>
             <p>
-              Built on OpenCode's agent framework. Add your own agents, customize workflows, extend capabilities without
-              forking.
+              Built on OpenCode's agent framework. Add your own agents, customize workflows, and extend capabilities
+              without forking.
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">💡</div>
+          <div class="card">
+            <div class="card-icon accent">💡</div>
             <h3>Smart Context</h3>
             <p>
               Persistent .kai/ memory stores conventions, decisions, and patterns. Your projects get smarter with every
@@ -1383,67 +553,63 @@ <h3>Smart Context</h3>
             </p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">⚙️</div>
+          <div class="card">
+            <div class="card-icon purple">⚙️</div>
             <h3>Zero Lock-in</h3>
             <p>Pure OpenCode agents. No proprietary formats, no vendor lock-in. Switch, modify, or remove anytime.</p>
           </div>
 
-          <div class="feature-card">
-            <div class="feature-icon">🌐</div>
+          <div class="card">
+            <div class="card-icon green">🌐</div>
             <h3>Community Driven</h3>
             <p>
-              Open source, MIT licensed. Contribute agents, share workflows, build on a foundation that grows with the
-              community.
+              Open source, MIT licensed. Contribute agents, share workflows, and build on a foundation that grows with
+              the community.
             </p>
           </div>
         </div>
-      </section>
-
-      <footer>
-        <div class="footer-content">
-          <div class="footer-brand">
-            <h3>Kai</h3>
-            <p>
-              Multi-agent orchestration system for OpenCode. Intelligent routing, parallel execution, and persistent
-              project memory.
-            </p>
-          </div>
-
-          <div class="footer-links">
-            <h4>Resources</h4>
-            <ul>
-              <li><a href="https://github.com/BackendStack21/kai">GitHub Repository</a></li>
-              <li><a href="https://github.com/BackendStack21/kai/releases">Releases</a></li>
-              <li><a href="https://github.com/BackendStack21/kai/blob/main/README.md">Documentation</a></li>
-              <li><a href="intro.html#deck">Presentation Deck</a></li>
-              <li><a href="jira-writer-pitch.html">Jira Writer Pitch</a></li>
-            </ul>
-          </div>
-
-          <div class="footer-links">
-            <h4>Community</h4>
-            <ul>
-              <li><a href="https://github.com/BackendStack21/kai/issues">Issues</a></li>
-              <li><a href="https://github.com/BackendStack21/kai/discussions">Discussions</a></li>
-              <li><a href="https://21no.de">21no.de</a></li>
-            </ul>
-          </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="section">
+      <div class="container">
+        <div class="cta">
+          <h2>Use Kai once. <span class="accent">You'll never go back.</span></h2>
+          <p>
+            From day one, Kai transforms how you work. No learning curve. No setup friction. Just intelligent
+            orchestration that feels like magic.
+          </p>
         </div>
-
-        <div class="footer-bottom">
-          <div>© 2026 21no.de — MIT License</div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <div class="social-links">
+          <a href="https://github.com/BackendStack21/kai" target="_blank" rel="noopener">GitHub</a>
+          <a href="https://github.com/BackendStack21/kai/releases" target="_blank" rel="noopener">Releases</a>
+          <a href="https://github.com/BackendStack21/kai/blob/main/README.md" target="_blank" rel="noopener"
+            >Documentation</a
+          >
+          <a href="intro.html#deck">Deck</a>
+          <a href="jira-writer-pitch.html">Jira Writer</a>
+          <a href="https://21no.de" target="_blank" rel="noopener">21no.de</a>
         </div>
-      </footer>
-    </div>
+        <div>© 2026 21no.de — Kai · MIT License</div>
+      </div>
+    </footer>
 
     <script>
       function copyText(id) {
-        const text = document.getElementById(id).innerText;
-        navigator.clipboard.writeText(text);
         const btn = event.target;
-        btn.innerText = "COPIED";
-        setTimeout(() => (btn.innerText = "Copy"), 2000);
+        const text = document.getElementById(id).innerText;
+        navigator.clipboard.writeText(text).then(() => {
+          const original = btn.innerText;
+          btn.innerText = "Copied";
+          setTimeout(() => (btn.innerText = original), 2000);
+        });
       }
     </script>
   </body>