diff --git a/landing/favicon.svg b/landing/favicon.svg
new file mode 100644
index 0000000..13b8b19
--- /dev/null
+++ b/landing/favicon.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4a9eff;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="12" fill="url(#grad1)"/>
+  <path d="M18 22 L32 12 L46 22 L46 42 L32 52 L18 42 Z" fill="white" opacity="0.9"/>
+  <circle cx="32" cy="32" r="6" fill="#0a0a0f"/>
+</svg>
diff --git a/landing/index.html b/landing/index.html
index 0f42318..5686a2c 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Speckl — Spec-First Development with Dark Provenance</title>
   <meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is a specification-first development system for regulated industries.">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="canonical" href="https://speckl.scoble.me/">
+  <meta property="og:title" content="Speckl — Spec-First Development with Dark Provenance">
+  <meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://speckl.scoble.me/">
+  <meta property="og:image" content="https://speckl.scoble.me/docs/diagrams/architecture.svg">
   <style>
     :root {
       --bg: #0a0a0f;
@@ -116,6 +123,15 @@
     .code-block .st { color: #f1fa8c; }
     .code-block .cm { color: #6272a4; }
 
+    .diagram-container { margin: 2rem 0; }
+    .diagram-container h3 {
+      text-align: center;
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--text);
+    }
+
     .philosophy-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
@@ -161,6 +177,17 @@
       .roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
       .roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
     }
+
+    @media (max-width: 375px) {
+      .hero { padding: 4rem 1rem 3rem; }
+      .hero h1 { font-size: 2rem; }
+      .hero-tagline { font-size: 1rem; }
+      .btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
+      section { padding: 3.5rem 1rem; }
+      .code-block { padding: 1rem; }
+      .code-block pre { font-size: 0.8rem; }
+      h2 { font-size: 1.5rem; }
+    }
   </style>
 </head>
 <body>
@@ -172,6 +199,7 @@
     <div class="hero-cta">
       <a href="https://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
       <a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
+      <a href="https://discord.gg/scbJjGQx" class="btn btn-secondary">Join Discord Community</a>
     </div>
   </div>
 </header>
@@ -180,6 +208,45 @@
   <h2>What is Speckl?</h2>
   <p>Speckl is a multi-agent software development system where the primary artifact is the <em>specification</em>, not the code. Every behavior traces back to its source of intent — automatically.</p>
   
+  <div class="diagram-container">
+    <h3>System Architecture</h3>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
+      <defs>
+        <marker id="arr" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#3b82f6">
+          <polygon points="0 0, 10 3.5, 0 7"/>
+        </marker>
+      </defs>
+      <!-- Orchestrator -->
+      <rect x="170" y="15" width="260" height="65" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>
+      <text x="300" y="45" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="15" font-weight="bold">Orchestrator</text>
+      <text x="300" y="63" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="11">Accepts Specks, decomposes tasks</text>
+      <!-- Arrow: Orchestrator → Team Lead Verification -->
+      <line x1="220" y1="80" x2="165" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
+      <!-- Arrow: Orchestrator → Team Lead Codegen -->
+      <line x1="380" y1="80" x2="435" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
+      <!-- Team Lead: Verification -->
+      <rect x="60" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="2"/>
+      <text x="165" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
+      <text x="165" y="197" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="12">Verification</text>
+      <!-- Team Lead: Codegen -->
+      <rect x="330" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="2"/>
+      <text x="435" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
+      <text x="435" y="197" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="12">Codegen</text>
+      <!-- Arrow: Team Lead Verification → Z3 SME -->
+      <line x1="165" y1="210" x2="165" y2="250" stroke="#f59e0b" stroke-width="2" marker-end="url(#arr)"/>
+      <!-- Arrow: Team Lead Codegen → TypeScript SME -->
+      <line x1="435" y1="210" x2="435" y2="250" stroke="#10b981" stroke-width="2" marker-end="url(#arr)"/>
+      <!-- SME: Z3 -->
+      <rect x="60" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="1.5"/>
+      <text x="165" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Z3 SME</text>
+      <text x="165" y="295" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="11">(verify)</text>
+      <!-- SME: TypeScript -->
+      <rect x="330" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="1.5"/>
+      <text x="435" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">TypeScript SME</text>
+      <text x="435" y="295" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="11">(emit)</text>
+    </svg>
+  </div>
+  
   <div class="features">
     <div class="feature-card">
       <h3>🎯 Specification-First</h3>