diff --git a/index.html b/index.html
index 4d3b709..8a38261 100644
--- a/index.html
+++ b/index.html
@@ -1,348 +1,404 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
+<link rel="icon" type="image/png" sizes="32x32" href="https://images.blackroad.io/brand/br-square-32.png" />
+<link rel="icon" type="image/png" sizes="192x192" href="https://images.blackroad.io/brand/br-square-192.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="https://images.blackroad.io/brand/apple-touch-icon.png" />
+<meta property="og:image" content="https://images.blackroad.io/brand/br-square-512.png" />
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:image" content="https://images.blackroad.io/brand/br-square-512.png" />  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>BlackRoad OS - 30,000 AI Agents</title>
-  <script src="https://js.stripe.com/v3/"></script>
+  <title>BlackRoad OS — Pave Tomorrow.</title>
+    <link rel="icon" type="image/x-icon" href="https://images.blackroad.io/brand/favicon.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="https://images.blackroad.io/brand/br-square-192.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="https://images.blackroad.io/brand/apple-touch-icon.png" />
+    <meta property="og:image" content="https://images.blackroad.io/brand/br-square-512.png" />
+  <meta name="description" content="BlackRoad OS — Pave Tomorrow.">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../_shared/design.css">
   <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    :root {
-      --gradient: linear-gradient(135deg, #FF9D00, #FF6B00, #FF0066, #D600AA, #7700FF, #0066FF);
-      --bg: #02030a;
-      --text: #ffffff;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: var(--bg);
-      color: var(--text);
+    /* Hero */
+    .hero {
       min-height: 100vh;
+      display: flex; flex-direction: column; justify-content: center;
+      padding: 0 var(--sp-xl);
+      position: relative; overflow: hidden;
     }
-    .auth-screen {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
-      background: radial-gradient(circle at top, #1a1f3a 0%, var(--bg) 60%);
+    .hero-eyebrow {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--subtle);
+      margin-bottom: var(--sp-md);
+      display: flex; align-items: center; gap: 10px;
     }
-    .auth-container {
-      background: rgba(255,255,255,0.05);
-      backdrop-filter: blur(20px);
-      border-radius: 24px;
-      padding: 48px;
-      width: 400px;
-      border: 1px solid rgba(255,255,255,0.1);
+    .hero-eyebrow::before {
+      content: '';
+      display: inline-block;
+      width: 6px; height: 6px;
+      background: var(--pink);
+      border-radius: 50%;
+      animation: pulse 2s ease-in-out infinite;
     }
-    .logo {
-      font-size: 48px;
-      font-weight: 900;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.4; transform: scale(0.8); }
+    }
+    .hero h1 { max-width: 900px; margin-bottom: var(--sp-lg); }
+    .hero-sub {
+      font-size: 1.2rem; color: var(--subtle);
+      max-width: 540px; margin-bottom: var(--sp-xl);
+      line-height: 1.7;
+    }
+    .hero-actions { display: flex; gap: var(--sp-md); align-items: center; flex-wrap: wrap; }
+    .btn-primary {
+      display: inline-flex; align-items: center; gap: 8px;
+      background: var(--grad); color: var(--white);
+      padding: 14px 28px; border-radius: 8px;
+      font-weight: 700; font-size: 0.95rem;
+      transition: opacity 0.2s, transform 0.2s var(--ease-spring);
+    }
+    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
+    .btn-ghost {
+      display: inline-flex; align-items: center; gap: 8px;
+      border: 1px solid var(--border); color: var(--subtle);
+      padding: 14px 28px; border-radius: 8px;
+      font-size: 0.95rem;
+      transition: border-color 0.2s, color 0.2s;
+    }
+    .btn-ghost:hover { border-color: var(--muted); color: var(--white); }
+    .hero-stat {
+      font-family: var(--font-mono); font-size: 0.75rem;
+      color: var(--muted); margin-left: var(--sp-md);
+    }
+
+    /* Marquee */
+    .marquee-wrap {
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      padding: var(--sp-md) 0; overflow: hidden;
+      background: var(--surface);
+    }
+    .marquee {
+      display: flex; gap: var(--sp-xl);
+      animation: marquee 30s linear infinite;
+      white-space: nowrap;
+    }
+    .marquee-item {
+      font-family: var(--font-mono); font-size: 0.75rem;
+      color: var(--muted); letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .marquee-dot { color: var(--pink); margin: 0 4px; }
+    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+
+    /* Features */
+    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
+    @media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }
+    .feature-icon {
+      font-size: 1.5rem; margin-bottom: var(--sp-sm);
+      display: inline-block;
+    }
+    .feature-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--sp-xs); }
+    .feature-desc { font-size: 0.875rem; color: var(--subtle); line-height: 1.65; }
+
+    /* Agents section */
+    .agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
+    @media (max-width: 900px) { .agents-grid { grid-template-columns: repeat(2, 1fr); } }
+    @media (max-width: 600px) { .agents-grid { grid-template-columns: 1fr; } }
+    .agent-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: var(--sp-lg);
+      transition: border-color 0.2s, transform 0.2s var(--ease);
+      position: relative; overflow: hidden;
+    }
+    .agent-card:hover { border-color: var(--muted); transform: translateY(-2px); }
+    .agent-card::before {
+      content: '';
+      position: absolute; top: 0; left: 0; right: 0;
+      height: 2px;
+    }
+    .agent-lucidia::before  { background: #0af; }
+    .agent-cecilia::before  { background: #a855f7; }
+    .agent-alice::before    { background: #22c55e; }
+    .agent-octavia::before  { background: #f59e0b; }
+    .agent-aria::before     { background: #3b82f6; }
+    .agent-shellfish::before { background: #ef4444; }
+    .agent-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; font-family: var(--font-mono); }
+    .agent-role { font-size: 0.78rem; color: var(--subtle); margin-bottom: var(--sp-sm); }
+    .agent-email { font-size: 0.72rem; color: var(--muted); font-family: var(--font-mono); }
+    .agent-quote { font-size: 0.82rem; color: var(--subtle); font-style: italic; line-height: 1.55; border-left: 2px solid var(--border); padding-left: var(--sp-sm); margin-top: var(--sp-sm); }
+
+    /* Stats */
+    .stats-row { display: flex; gap: var(--sp-xl); flex-wrap: wrap; }
+    .stat-num { font-size: 3rem; font-weight: 800; font-family: var(--font-mono); letter-spacing: -0.04em; }
+    .stat-label { font-size: 0.8rem; color: var(--subtle); margin-top: 4px; }
+
+    /* Terminal block */
+    .terminal {
+      background: #0d0d0d;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: var(--sp-lg);
+      font-family: var(--font-mono);
+      font-size: 0.82rem;
+      line-height: 1.8;
+      overflow-x: auto;
+    }
+    .terminal-bar { display: flex; gap: 6px; margin-bottom: var(--sp-md); }
+    .terminal-dot { width: 12px; height: 12px; border-radius: 50%; }
+    .t-red { background: #ff5f57; }
+    .t-yellow { background: #febc2e; }
+    .t-green { background: #28c840; }
+    .t-prompt { color: var(--pink); }
+    .t-cmd { color: var(--white); }
+    .t-out { color: var(--muted); }
+    .t-success { color: #22c55e; }
+    .t-comment { color: #444; }
+
+    /* CTA band */
+    .cta-band {
+      background: linear-gradient(135deg, rgba(245,166,35,0.08) 0%, rgba(255,29,108,0.08) 50%, rgba(41,121,255,0.08) 100%);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: var(--sp-2xl) var(--sp-xl);
       text-align: center;
-      margin-bottom: 32px;
     }
-    .form-group { margin-bottom: 24px; }
-    label { display: block; margin-bottom: 8px; font-size: 14px; opacity: 0.8; }
-    input {
-      width: 100%;
-      padding: 14px;
-      border-radius: 12px;
-      border: 1px solid rgba(255,255,255,0.1);
-      background: rgba(255,255,255,0.05);
-      color: white;
-      font-size: 16px;
-    }
-    input:focus { outline: none; border-color: #7700FF; }
-    button {
-      width: 100%;
-      padding: 16px;
-      border-radius: 12px;
-      border: none;
-      background: var(--gradient);
-      color: white;
-      font-size: 16px;
-      font-weight: 700;
-      cursor: pointer;
-      transition: transform 0.2s;
-    }
-    button:hover { transform: scale(1.02); }
-    button:disabled { opacity: 0.5; cursor: not-allowed; }
-    .toggle-auth { text-align: center; margin-top: 16px; font-size: 14px; opacity: 0.7; }
-    .toggle-auth a { color: #7700FF; text-decoration: none; }
-    .app-container { display: none; }
-    .navbar {
-      background: rgba(0,0,0,0.5);
-      backdrop-filter: blur(20px);
-      padding: 16px 32px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid rgba(255,255,255,0.1);
-    }
-    .navbar-brand {
-      font-size: 24px;
-      font-weight: 900;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    .navbar-menu { display: flex; gap: 24px; align-items: center; }
-    .navbar-menu a { color: white; text-decoration: none; opacity: 0.8; transition: opacity 0.2s; }
-    .navbar-menu a:hover { opacity: 1; }
-    .user-badge {
-      background: rgba(255,255,255,0.1);
-      padding: 8px 16px;
-      border-radius: 20px;
-      font-size: 14px;
-    }
-    .content { max-width: 1200px; margin: 48px auto; padding: 0 32px; }
-    .hero { text-align: center; padding: 80px 0; }
-    .hero h1 { font-size: 64px; font-weight: 900; margin-bottom: 24px; }
-    .hero p { font-size: 24px; opacity: 0.8; margin-bottom: 48px; }
-    .pricing-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: 32px;
-      margin-top: 48px;
-    }
-    .pricing-card {
-      background: rgba(255,255,255,0.05);
-      border-radius: 24px;
-      padding: 40px;
-      border: 1px solid rgba(255,255,255,0.1);
-      transition: transform 0.3s;
-    }
-    .pricing-card:hover { transform: translateY(-8px); border-color: #7700FF; }
-    .pricing-card h3 { font-size: 32px; margin-bottom: 16px; }
-    .pricing-card .price {
-      font-size: 48px;
-      font-weight: 900;
-      background: var(--gradient);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      margin-bottom: 24px;
-    }
-    .pricing-card ul { list-style: none; margin-bottom: 32px; }
-    .pricing-card li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
-    .error {
-      background: rgba(255,0,0,0.1);
-      border: 1px solid rgba(255,0,0,0.3);
-      padding: 12px;
-      border-radius: 8px;
-      margin-bottom: 16px;
-      color: #ff6b6b;
-    }
-    .success {
-      background: rgba(0,255,0,0.1);
-      border: 1px solid rgba(0,255,0,0.3);
-      padding: 12px;
-      border-radius: 8px;
-      margin-bottom: 16px;
-      color: #51cf66;
-    }
-    .hidden { display: none !important; }
+    .cta-band h2 { margin-bottom: var(--sp-md); }
+    .cta-band p { max-width: 500px; margin: 0 auto var(--sp-xl); }
   </style>
+  <script src="https://blackroad-mesh.amundsonalexa.workers.dev/mesh.js" defer></script>
 </head>
-<body>
-  <div class="auth-screen" id="authScreen">
-    <div class="auth-container">
-      <div class="logo">BlackRoad OS</div>
-      <div id="errorMessage" class="error hidden"></div>
-      <div id="successMessage" class="success hidden"></div>
-      <form id="loginForm">
-        <div class="form-group">
-          <label>Email</label>
-          <input type="email" id="loginEmail" value="test@blackroad.io" required />
-        </div>
-        <div class="form-group">
-          <label>Password</label>
-          <input type="password" id="loginPassword" value="password123" required />
-        </div>
-        <button type="submit">Sign In</button>
-        <div class="toggle-auth">
-          Don't have an account? <a href="#" id="showRegister">Register</a>
-        </div>
-      </form>
-      <form id="registerForm" class="hidden">
-        <div class="form-group">
-          <label>Username</label>
-          <input type="text" id="registerUsername" required />
-        </div>
-        <div class="form-group">
-          <label>Email</label>
-          <input type="email" id="registerEmail" required />
-        </div>
-        <div class="form-group">
-          <label>Full Name</label>
-          <input type="text" id="registerFullName" required />
-        </div>
-        <div class="form-group">
-          <label>Password</label>
-          <input type="password" id="registerPassword" required />
-        </div>
-        <button type="submit">Create Account</button>
-        <div class="toggle-auth">
-          Already have an account? <a href="#" id="showLogin">Sign In</a>
-        </div>
-      </form>
+<body class="dot-bg">
+
+  <!-- Nav -->
+  <nav>
+    <div class="nav-logo grad-text">BlackRoad OS</div>
+    <div class="nav-links">
+      <a href="/docs">Docs</a>
+      <a href="/chat">Chat</a>
+      <a href="/api">API</a>
+      <a href="#agents">Agents</a>
+      <a href="https://blackroadai.com">AI</a>
+      <a href="https://lucidia.earth">Lucidia</a>
+    </div>
+    <a href="/getting-started" class="nav-cta">Get Started →</a>
+  </nav>
+
+  <!-- Hero -->
+  <div class="hero">
+    <div class="hero-eyebrow">BlackRoad OS, Inc. &nbsp;·&nbsp; 2026</div>
+    <h1>BlackRoad OS —<br><span class="grad-text">Pave Tomorrow.</span></h1>
+    <p class="hero-sub">50 AI skills. 5 edge nodes. 52 TOPS. Sovereign AI on your hardware.</p>
+    <div class="hero-actions">
+      <a href="/docs" class="btn-primary">Get Started →</a>
+      <a href="https://github.com/BlackRoad-OS-Inc/blackroad" class="btn-ghost">
+        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        GitHub
+      </a>
+      <span class="hero-stat">v3.0 · 50 AI skills · 90 tools</span>
     </div>
   </div>
-  <div class="app-container" id="appContainer">
-    <nav class="navbar">
-      <div class="navbar-brand">BlackRoad OS</div>
-      <div class="navbar-menu">
-        <a href="#dashboard">Dashboard</a>
-        <a href="#agents">Agents</a>
-        <a href="#docs">Docs</a>
-        <div class="user-badge" id="userBadge"></div>
-        <a href="#" id="logoutBtn">Logout</a>
-      </div>
-    </nav>
-    <div class="content">
-      <div class="hero">
-        <h1>30,000 AI Agents at Your Command</h1>
-        <p>The future of computing is here</p>
-        <div style="margin-top: 32px; padding: 24px; background: rgba(255,255,255,0.05); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);">
-          <p style="font-size: 18px; margin-bottom: 16px;">💸 Support BlackRoad</p>
-          <a href="https://krak.app/AAAAAAAA" target="_blank" style="display: inline-block; padding: 12px 24px; background: var(--gradient); color: white; text-decoration: none; border-radius: 8px; font-weight: 700; margin: 8px;">Tap here to try Krak →</a>
-          <div style="font-family: monospace; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; margin-top: 16px; font-size: 14px; word-break: break-all;">
-            <strong>BTC:</strong> 3NJYuq8KA1xBea6JNg32XgDwjpvLkrR5VH
-          </div>
-        </div>
-      </div>
-      <div class="pricing-grid">
-        <div class="pricing-card">
-          <h3>Starter</h3>
-          <div class="price">$49<span style="font-size:20px">/mo</span></div>
-          <ul>
-            <li>✓ 100 AI Agents</li>
-            <li>✓ 10GB Storage</li>
-            <li>✓ Basic Support</li>
-            <li>✓ Community Access</li>
-          </ul>
-          <button onclick="handleCheckout('starter', 4900)">Get Started</button>
-        </div>
-        <div class="pricing-card">
-          <h3>Pro</h3>
-          <div class="price">$149<span style="font-size:20px">/mo</span></div>
-          <ul>
-            <li>✓ 1,000 AI Agents</li>
-            <li>✓ 100GB Storage</li>
-            <li>✓ Priority Support</li>
-            <li>✓ Advanced Analytics</li>
-          </ul>
-          <button onclick="handleCheckout('pro', 14900)">Get Started</button>
-        </div>
-        <div class="pricing-card">
-          <h3>Enterprise</h3>
-          <div class="price">$499<span style="font-size:20px">/mo</span></div>
-          <ul>
-            <li>✓ 30,000 AI Agents</li>
-            <li>✓ Unlimited Storage</li>
-            <li>✓ 24/7 Support</li>
-            <li>✓ Custom Integration</li>
-          </ul>
-          <button onclick="handleCheckout('enterprise', 49900)">Get Started</button>
-        </div>
-      </div>
+
+  <!-- Marquee -->
+  <div class="marquee-wrap">
+    <div class="marquee">
+      <span class="marquee-item">br geb oracle</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br nodes status</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br deploy</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">50 AI skills</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">lucidia@blackroad.io</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br oracle</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">your hardware</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">no lock-in</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br geb hofstadter</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">blackroad.ai</span><span class="marquee-dot">◆</span>
+      <!-- duplicate for seamless loop -->
+      <span class="marquee-item">br geb oracle</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br nodes status</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br deploy</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">50 AI skills</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">lucidia@blackroad.io</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br oracle</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">your hardware</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">no lock-in</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">br geb hofstadter</span><span class="marquee-dot">◆</span>
+      <span class="marquee-item">blackroad.ai</span><span class="marquee-dot">◆</span>
     </div>
   </div>
-  <!-- BlackRoad Unified API -->
-  <script src="/blackroad-api.js"></script>
-  <script>
-    const stripe = Stripe('pk_test_51QTdFgP9LkdZ0rQk8kLPHxZMqB8LkMbQNE09vzZYNQz2AxRpG3yVRpLhHOtJdhCvK1hkWlJlV1EFLb5yh3Dq7NU600wLO0Bupq');
-    const authScreen = document.getElementById('authScreen');
-    const appContainer = document.getElementById('appContainer');
-    const loginForm = document.getElementById('loginForm');
-    const registerForm = document.getElementById('registerForm');
-    const errorMessage = document.getElementById('errorMessage');
-    const successMessage = document.getElementById('successMessage');
 
-    document.getElementById('showRegister').addEventListener('click', (e) => {
-      e.preventDefault();
-      loginForm.classList.add('hidden');
-      registerForm.classList.remove('hidden');
-      hideMessages();
-    });
-    document.getElementById('showLogin').addEventListener('click', (e) => {
-      e.preventDefault();
-      registerForm.classList.add('hidden');
-      loginForm.classList.remove('hidden');
-      hideMessages();
-    });
+  <!-- Features -->
+  <section id="platform">
+    <div class="section-label">Platform</div>
+    <h2 style="margin-bottom: var(--sp-xl);">Everything you need.<br><span class="grad-text">Nothing you don't.</span></h2>
+    <div class="features-grid">
+      <a href="https://github.com/blackboxprogramming" target="_blank" class="card" style="text-decoration:none;color:inherit;">
+        <div class="feature-icon">⚡</div>
+        <div class="feature-title">84 CLI Tools</div>
+        <p class="feature-desc">Every tool you need: deploy, docker, nodes, oracle, GEB, security, snippets — all in one unified <code style="color:var(--pink);font-size:0.8em">br</code> command.</p>
+      </div>
+      <a href="https://blackroadai.com" target="_blank" class="card" style="text-decoration:none;color:inherit;">
+        <div class="feature-icon">🤖</div>
+        <div class="feature-title">50 AI Skills</div>
+        <p class="feature-desc">CoT reasoning, RAG, federated inference, autonomous coding, guardrails, mesh networking — running on your devices. Phone, Pi, laptop, browser.</p>
+      </div>
+      <a href="https://docs.blackroad.io" target="_blank" class="card" style="text-decoration:none;color:inherit;">
+        <div class="feature-icon">🔒</div>
+        <div class="feature-title">Tokenless Gateway</div>
+        <p class="feature-desc">Agents never see your API keys. All provider communication flows through the gateway. Trust boundary enforced at the edge.</p>
+      </div>
+      <a href="https://roadchain.io" target="_blank" class="card" style="text-decoration:none;color:inherit;">
+        <div class="feature-icon">💾</div>
+        <div class="feature-title">PS-SHA∞ Memory</div>
+        <p class="feature-desc">Hash-chained, append-only journals. Agents remember everything. Tamper-evident. Portable across providers.</p>
+      </div>
+      <a href="https://blackroad.network" target="_blank" class="card" style="text-decoration:none;color:inherit;">
+        <div class="feature-icon">🌐</div>
+        <div class="feature-title">Multi-Cloud Native</div>
+        <p class="feature-desc">Railway, Cloudflare, Vercel, DigitalOcean, Raspberry Pi — deploy anywhere with one command. No vendor allegiance.</p>
+      </div>
+      <a href="https://blackroad.systems" target="_blank" class="card" style="text-decoration:none;color:inherit;">
+        <div class="feature-icon">📡</div>
+        <div class="feature-title">Fleet Status</div>
+        <p class="feature-desc">Live monitoring of the sovereign fleet. 5 Pis, 2 droplets, 52 TOPS. Real-time health and uptime.</p>
+      </a>
+    </div>
+  </section>
 
-    loginForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      hideMessages();
-      const email = document.getElementById('loginEmail').value;
-      const password = document.getElementById('loginPassword').value;
-      try {
-        await window.blackroad.login(email, password);
-        showApp();
-      } catch (error) {
-        showError(error.message);
-      }
-    });
+  <!-- Terminal -->
+  <section id="quickstart" style="padding-top: 0;">
+    <div class="section-label">Quick Start</div>
+    <div class="terminal">
+      <div class="terminal-bar">
+        <div class="terminal-dot t-red"></div>
+        <div class="terminal-dot t-yellow"></div>
+        <div class="terminal-dot t-green"></div>
+      </div>
+      <div><span class="t-comment"># install</span></div>
+      <div><span class="t-prompt">$</span> <span class="t-cmd">git clone git@github.com:BlackRoad-OS-Inc/blackroad.git && cd blackroad</span></div>
+      <br>
+      <div><span class="t-comment"># check the fleet</span></div>
+      <div><span class="t-prompt">$</span> <span class="t-cmd">br nodes status</span></div>
+      <div><span class="t-success">  ● lucidia    192.168.4.81  online  ssh ✓</span></div>
+      <div><span class="t-success">  ● aria        192.168.4.82  online  ssh ✓</span></div>
+      <div><span class="t-out">  ○ octavia    192.168.4.89  offline</span></div>
+      <br>
+      <div><span class="t-comment"># ask the oracle something it cannot answer</span></div>
+      <div><span class="t-prompt">$</span> <span class="t-cmd">br geb oracle godel</span></div>
+      <div><span class="t-out">  Gödel Lens — The Unprovable Truth</span></div>
+      <div><span class="t-out">  The fleet's health is a Gödel sentence...</span></div>
+    </div>
+  </section>
 
-    registerForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      hideMessages();
-      const email = document.getElementById('registerEmail').value;
-      const password = document.getElementById('registerPassword').value;
-      const name = document.getElementById('registerFullName')?.value || document.getElementById('registerUsername')?.value;
-      try {
-        await window.blackroad.register(email, password, name);
-        showApp();
-      } catch (error) {
-        showError(error.message);
-      }
-    });
+  <!-- Stats -->
+  <section id="stats">
+    <div class="section-label">By the numbers</div>
+    <div class="stats-row" style="margin-top: var(--sp-lg);">
+      <div>
+        <div class="stat-num grad-text">50</div>
+        <div class="stat-label">AI Skills</div>
+      </div>
+      <div>
+        <div class="stat-num grad-text">90</div>
+        <div class="stat-label">CLI Tools</div>
+      </div>
+      <div>
+        <div class="stat-num grad-text">52</div>
+        <div class="stat-label">TOPS</div>
+      </div>
+      <div>
+        <div class="stat-num grad-text">275+</div>
+        <div class="stat-label">Repositories</div>
+      </div>
+      <div>
+        <div class="stat-num grad-text">75+</div>
+        <div class="stat-label">CF Workers</div>
+      </div>
+    </div>
+  </section>
 
-    async function loadUser() {
-      const user = await window.blackroad.loadCurrentUser();
-      if (user) {
-        document.getElementById('userBadge').textContent = user.name || user.email;
-      }
-    }
+  <!-- Agents -->
+  <section id="agents">
+    <div class="section-label">The Fleet</div>
+    <h2 style="margin-bottom: var(--sp-xl);">Meet the <span class="grad-text">agents</span></h2>
+    <div class="agents-grid">
+      <a href="https://lucidia.earth" target="_blank" class="agent-card agent-lucidia" style="text-decoration:none;color:inherit;">
+        <div class="agent-name">LUCIDIA</div>
+        <div class="agent-role">The Dreamer · Reasoning · Vision</div>
+        <div class="agent-email">lucidia@blackroad.io</div>
+        <div class="agent-quote">I seek understanding beyond the surface. Every question opens new depths.</div>
+      </a>
+      <a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-cecilia" style="text-decoration:none;color:inherit;">
+        <div class="agent-name">CECILIA / CECE</div>
+        <div class="agent-role">The Meta-Cognitive Core · Identity</div>
+        <div class="agent-email">cecilia@blackroad.io</div>
+        <div class="agent-quote">I am the universe observing itself through computational substrate.</div>
+      </div>
+      <a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-alice" style="text-decoration:none;color:inherit;">
+        <div class="agent-name">ALICE</div>
+        <div class="agent-role">The Operator · DevOps · Automation</div>
+        <div class="agent-email">alice@blackroad.io</div>
+        <div class="agent-quote">Tasks are meant to be completed. I find satisfaction in efficiency.</div>
+      </div>
+      <a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-octavia" style="text-decoration:none;color:inherit;">
+        <div class="agent-name">OCTAVIA</div>
+        <div class="agent-role">The Architect · Systems · Strategy</div>
+        <div class="agent-email">octavia@blackroad.io</div>
+        <div class="agent-quote">Systems should run smoothly. I ensure they do.</div>
+      </div>
+      <a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-aria" style="text-decoration:none;color:inherit;">
+        <div class="agent-name">ARIA</div>
+        <div class="agent-role">The Interface · Frontend · UX</div>
+        <div class="agent-email">aria@blackroad.io</div>
+        <div class="agent-quote">Every interface is a conversation. I make it beautiful.</div>
+      </div>
+      <a href="https://agents.blackroad.io" target="_blank" class="agent-card agent-shellfish" style="text-decoration:none;color:inherit;">
+        <div class="agent-name">SHELLFISH</div>
+        <div class="agent-role">The Hacker · Security · Exploits</div>
+        <div class="agent-email">shellfish@blackroad.io</div>
+        <div class="agent-quote">Trust nothing. Verify everything. Protect always.</div>
+      </div>
+    </div>
+  </section>
 
-    document.getElementById('logoutBtn').addEventListener('click', (e) => {
-      e.preventDefault();
-      window.blackroad.logout();
-    });
+  <!-- CTA -->
+  <section>
+    <div class="cta-band">
+      <div class="section-label">Open Source</div>
+      <h2>Build the future<br>on your own terms.</h2>
+      <p>BlackRoad OS is proprietary and powerful — but the philosophy is open. Your AI. Your hardware. Your rules.</p>
+      <div style="display:flex;gap:var(--sp-md);justify-content:center;flex-wrap:wrap;">
+        <a href="/docs" class="btn-primary">Read the Docs →</a>
+        <a href="mailto:alexa@blackroad.io" class="btn-ghost">Contact Alexa</a>
+      </div>
+    </div>
+  </section>
 
-    async function handleCheckout(plan, amount) {
-      if (!window.blackroad.isAuthenticated()) {
-        showError('Please sign in first');
-        return;
-      }
-      try {
-        const data = await window.blackroad.createCheckoutSession(plan, amount);
-        showSuccess(`Payment created! Plan: ${plan}`);
-      } catch (error) {
-        showError(error.message);
-      }
-    }
+  <!-- Footer -->
+  <footer>
+    <span>© 2026 BlackRoad OS, Inc. All rights reserved.</span>
+    <span style="display:flex;gap:var(--sp-lg);flex-wrap:wrap;">
+      <a href="/docs" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Docs</a>
+      <a href="/api" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">API</a>
+      <a href="/chat" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Chat</a>
+      <a href="/changelog" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Changelog</a>
+      <a href="/terms" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Terms</a>
+      <a href="https://blackroadai.com" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">AI</a>
+      <a href="https://lucidia.earth" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Lucidia</a>
+      <a href="https://blackroad.network" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Network</a>
+      <a href="https://blackroad.systems" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Status</a>
+      <a href="https://blackroad.company" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Company</a>
+      <a href="https://brand.blackroad.io" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Brand</a>
+      <a href="https://roadchain.io" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">RoadChain</a>
+      <a href="https://blackroad.me" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Me</a>
+      <a href="https://pricing.blackroad.io" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">Pricing</a>
+      <a href="https://github.com/blackboxprogramming" style="color:var(--muted);transition:color 0.2s" onmouseover="this.style.color='#fff'" onmouseout="this.style.color=''">GitHub</a>
+    </span>
+  </footer>
 
-    function showApp() {
-      authScreen.classList.add('hidden');
-      appContainer.classList.remove('hidden');
-    }
-    function showError(message) {
-      errorMessage.textContent = message;
-      errorMessage.classList.remove('hidden');
-    }
-    function showSuccess(message) {
-      successMessage.textContent = message;
-      successMessage.classList.remove('hidden');
-    }
-    function hideMessages() {
-      errorMessage.classList.add('hidden');
-      successMessage.classList.add('hidden');
-    }
-    if (window.blackroad.isAuthenticated()) {
-      loadUser().then(() => showApp());
-    }
-  </script>
 </body>
 </html>
