design: add line-based icon system, integrate into homepage + ecosystem

- Add Icon.svelte with 9 thin-line SVG glyphs (compute, identity,
  capital, shield, voice, lock, arrow-right, check, signal)
- Integrate icons into homepage product cards (top-right, ghost→violet on hover)
- Integrate icons into ecosystem pillar headers (violet accent)
- Update CLAUDE.md: mark all redesign items complete, consolidate remaining
  work to external/blocked items only

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ccross2

CLAUDE.md

@@ -302,35 +302,31 @@ Script is at `scripts/generate-og.js`. Run it after any brand or copy changes th
 - `esver.computer` has no standalone landing page — product page lives at `sovren.software/esver`
 - MrHaven SDK not yet documented on the site (removed SDK mention from CTA until ready)
 - No visual that shows the three products converging (convergence story is text-only)
-- OG image (`static/og-image.png`) not yet regenerated after schematic magitek redesign — run `npm run generate-og`
 - `augmentum.computer` → `esver.computer` DNS redirect not yet configured (Namecheap/Cloudflare)
 - Brevo welcome email template still references Augmentum OS in body text — update in Brevo dashboard
-- Dark mode tokens present but unpolished — light-mode first
 
 ## Remaining Work
 
-### Redesign — Next Session
-- [ ] Schematic SVG diagrams (system architecture, trifecta, signal paths)
-- [ ] Line-based icon/glyph system
-- [ ] Dark mode polish (token tuning, visual QA)
-- [ ] Motion system (line tracing, reveal animations)
-- [ ] Regenerate OG image with new colors: `npm run generate-og`
-
-### Pre-Existing
+### External / Blocked (cannot complete from this repo)
 - [ ] DNS forwarding: `augmentum.computer` → `esver.computer` (Namecheap or Cloudflare forwarding)
 - [ ] Build standalone `esver.computer` product landing page
 - [ ] Update Brevo welcome email template body text (Augmentum OS → Esver OS)
 - [ ] Blog/article platform for the two-article launch sequence
 - [ ] MrHaven SDK section on the MrHaven page (when SDK docs exist)
-- [ ] Visual convergence diagram on Ecosystem page
 - [ ] X profile update (currently MrHaven-branded)
 - [ ] Cloudflare Transform Rules for CDN-level security headers (see `SECURITY.md`)
 
 ### Completed
 - [x] Schematic magitek editorial redesign — full visual system rewrite (2026-03-15)
 - [x] Three.js + GSAP removed, panel/tag system added, violet accent (2026-03-15)
-- [x] StatusBar component added (2026-03-15)
-- [x] Nav restyled: solid bg, // separators, SYS:LIGHT/SYS:DARK, violet active (2026-03-15)
+- [x] StatusBar component, Nav restyled (2026-03-15)
+- [x] SVG diagrams: StackDiagram + TrifectaDiagram (2026-03-15)
+- [x] Line-based icon/glyph system: Icon.svelte with 9 glyphs (2026-03-15)
+- [x] Dark mode polish: refined token tuning (2026-03-15)
+- [x] Motion system: reveal.js + CSS scroll reveals (2026-03-15)
+- [x] OG image regenerated with schematic magitek palette (2026-03-15)
+- [x] Visual convergence diagram on homepage (2026-03-15)
+- [x] manifest.webmanifest theme-color updated (2026-03-15)
 - [x] Favicon suite, Web app manifest, OG image (2026-02-26)
 - [x] Open Graph + Twitter Card + Canonical URLs on all pages (2026-02-26)
 - [x] Security headers, skip-nav, aria-labels, prefers-reduced-motion (2026-02-26)

src/lib/Icon.svelte

@@ -0,0 +1,76 @@
+<!--
+  Line-based icon/glyph system.
+  Usage: <Icon name="compute" size={20} />
+  All icons are thin-line SVGs that match the schematic aesthetic.
+-->
+<script>
+  /** @type {string} */
+  export let name;
+  /** @type {number} */
+  export let size = 20;
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="square"
+  stroke-linejoin="miter"
+  aria-hidden="true"
+  class="icon"
+>
+  {#if name === 'compute'}
+    <!-- Terminal/command: monitor with prompt -->
+    <rect x="3" y="4" width="18" height="14" rx="0" />
+    <line x1="3" y1="20" x2="21" y2="20" />
+    <polyline points="8,10 10,12 8,14" />
+    <line x1="12" y1="14" x2="16" y2="14" />
+  {:else if name === 'identity'}
+    <!-- Face/biometric: simplified face outline -->
+    <circle cx="12" cy="10" r="6" />
+    <path d="M4 20 C4 16 8 14 12 14 C16 14 20 16 20 20" />
+  {:else if name === 'capital'}
+    <!-- Vault/lock: safe with keyhole -->
+    <rect x="4" y="4" width="16" height="16" rx="0" />
+    <rect x="6" y="6" width="12" height="12" rx="0" />
+    <circle cx="12" cy="11" r="2" />
+    <line x1="12" y1="13" x2="12" y2="15" />
+  {:else if name === 'shield'}
+    <!-- Shield: security perimeter -->
+    <path d="M12 3 L20 7 L20 13 C20 17 16 20 12 21 C8 20 4 17 4 13 L4 7 Z" />
+  {:else if name === 'voice'}
+    <!-- Microphone: voice interface -->
+    <rect x="9" y="3" width="6" height="10" rx="0" />
+    <path d="M5 11 C5 15 8 18 12 18 C16 18 19 15 19 11" />
+    <line x1="12" y1="18" x2="12" y2="22" />
+    <line x1="8" y1="22" x2="16" y2="22" />
+  {:else if name === 'lock'}
+    <!-- Lock: encrypted/secured -->
+    <rect x="5" y="11" width="14" height="10" rx="0" />
+    <path d="M8 11 L8 7 C8 4.5 9.8 3 12 3 C14.2 3 16 4.5 16 7 L16 11" />
+    <circle cx="12" cy="16" r="1.5" />
+  {:else if name === 'arrow-right'}
+    <!-- Arrow right -->
+    <line x1="4" y1="12" x2="20" y2="12" />
+    <polyline points="14,6 20,12 14,18" />
+  {:else if name === 'check'}
+    <!-- Checkmark -->
+    <polyline points="4,12 9,17 20,6" />
+  {:else if name === 'signal'}
+    <!-- Signal/operational: broadcast waves -->
+    <circle cx="12" cy="12" r="2" />
+    <path d="M8 8 A6 6 0 0 1 16 8" />
+    <path d="M5 5 A10 10 0 0 1 19 5" />
+  {/if}
+</svg>
+
+<style>
+  .icon {
+    display: inline-block;
+    vertical-align: middle;
+    flex-shrink: 0;
+  }
+</style>

src/routes/+page.svelte

@@ -11,26 +11,30 @@
 
 <script>
   import StackDiagram from '$lib/StackDiagram.svelte';
+  import Icon from '$lib/Icon.svelte';
   import { reveal } from '$lib/reveal.js';
 
   const products = [
     {
       number: '01',
       category: 'OS',
+      icon: 'compute',
       name: 'ESVER OS',
       href: '/esver',
       description: 'Voice-native command interface. Biometric-secured access. Local AI co-pilot. Declarative NixOS substrate. UX, privacy, and security — none sacrificed.',
     },
     {
       number: '02',
       category: 'IDENTITY',
+      icon: 'identity',
       name: 'VISAGE',
       href: '/visage',
       description: 'Linux face authentication via PAM. ONNX inference runs entirely on-device — no cloud enrollment, no biometric database. Open source, MIT licensed.',
     },
     {
       number: '03',
       category: 'FINANCE',
+      icon: 'capital',
       name: 'MR. HAVEN',
       href: '/mrhaven',
       description: 'Non-custodial USDC time vault on Base L2. Set conditions, name beneficiaries, define schedules — or designate autonomous agents as recipients. Smart contract executes regardless of who holds the keys.',
@@ -58,7 +62,10 @@
     <div class="product-grid">
       {#each products as p, i}
         <a href={p.href} class="product-card reveal reveal-delay-{i + 1}" use:reveal>
-          <span class="product-num">{p.number}</span>
+          <div class="product-top">
+            <span class="product-num">{p.number}</span>
+            <span class="product-icon"><Icon name={p.icon} size={18} /></span>
+          </div>
           <span class="product-label tag">{p.category}</span>
           <h3 class="product-name">{p.name}</h3>
           <p class="product-desc">{p.description}</p>
@@ -206,12 +213,27 @@
     background: var(--accent-surface);
   }
 
+  .product-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .product-num {
     font-size: var(--fs-label);
     letter-spacing: var(--ls-wider);
     color: var(--accent);
   }
 
+  .product-icon {
+    color: var(--text-ghost);
+    transition: color var(--transition-fast);
+  }
+
+  .product-card:hover .product-icon {
+    color: var(--accent);
+  }
+
   .product-label {
     align-self: flex-start;
   }

src/routes/ecosystem/+page.svelte

@@ -11,26 +11,30 @@
 
 <script>
   import TrifectaDiagram from '$lib/TrifectaDiagram.svelte';
+  import Icon from '$lib/Icon.svelte';
   import { reveal } from '$lib/reveal.js';
 
   const pillars = [
     {
       num: '01',
       domain: 'COMPUTING',
+      icon: 'compute',
       title: 'THE MACHINE IS A COMMAND CENTER, NOT A SUBSCRIPTION.',
       desc: 'An operating system that serves the vendor is not yours. Esver OS is built on the trifecta: UX that does not demand technical sacrifice, privacy that is architectural rather than cosmetic, and security that is the perimeter of your authority. Voice-native interface. Local AI co-pilot. Biometric-secured sessions. Declarative NixOS substrate. None of these properties trade off against the others. That is the point.',
       link: { label: 'ESVER OS →', href: '/esver' }
     },
     {
       num: '02',
       domain: 'IDENTITY',
+      icon: 'identity',
       title: 'YOU ARE NOT A ROW IN A DATABASE.',
       desc: 'Biometrics should never leave the hardware they were captured on. Verification is a local cryptographic process, not a cloud API call. If a system requires your face to authenticate, it must prove it cannot steal it.',
       link: { label: 'VISAGE →', href: '/visage' }
     },
     {
       num: '03',
       domain: 'CAPITAL',
+      icon: 'capital',
       title: 'NO HUMANS IN THE LOOP.',
       desc: 'Assets require custody or cryptography. We choose cryptography. A programmable vault should execute rules without hesitation, without exception, and without permission from a compliance department.',
       link: { label: 'MR. HAVEN →', href: '/mrhaven' }
@@ -77,6 +81,7 @@
         <div class="pillar panel reveal" use:reveal>
           <div class="pillar-header">
             <span class="pillar-n">{p.num}</span>
+            <span class="pillar-icon"><Icon name={p.icon} size={24} /></span>
             <span class="pillar-domain tag--accent">{p.domain}</span>
           </div>
           <div class="pillar-body">
@@ -249,6 +254,11 @@
     color: var(--accent);
   }
 
+  .pillar-icon {
+    color: var(--accent);
+    opacity: 0.5;
+  }
+
   .pillar-domain {
     font-size: var(--fs-btn);
     font-weight: var(--fw-bold);