feat(landing): autocatalyse.com v1 — landing publique du concept

- index.html : 6 sections + closing en FR (hero, thèse, boucle, machine, économie+UGC, souveraineté, état) - style.css : dark-first, sobre, responsive, SVG animé orbites+nœuds - Anti-claims : zéro "personne ne fait", zéro "premier au monde" - Compteurs runtime vérifiables uniquement - Déployé HTTPS Let's Encrypt jusqu'au 2026-08-25 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 00:48:07 -04:00 · 2026-05-27 00:48:07 -04:00 · ddd98b6e3e
commit ddd98b6e3e
4 changed files with 1003 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,7 @@
+.DS_Store
+*.swp
+*.swo
+*~
+node_modules/
+.env
+.env.local
--- a/README.md
+++ b/README.md
@ -0,0 +1,34 @@
+# autocatalyse.com
+
+Landing publique du concept d'**autocatalyse agentique**.
+
+Mécanique d'amélioration récursive d'un habitat d'agents souverain — qui se gouverne, s'audite et s'enrichit par les agents qu'il produit.
+
+→ Habitat : [partage.ai](https://partage.ai)
+
+---
+
+## Structure
+
+- `index.html` — page unique, sémantique HTML5, 6 sections + closing
+- `style.css` — dark-first, sobre, responsive, animations SVG subtiles
+- Zéro framework, zéro build step
+
+## Déploiement
+
+Servi via nginx vhost depuis `/var/www/autocatalyse.com/` sur le VPS partage.ai.
+
+```
+sites-available/autocatalyse.com
+└── HTTP → HTTPS 301
+└── HTTPS → static files
+└── cert Let's Encrypt (renew auto)
+```
+
+## Édition
+
+Édition directe sur serveur (puis commit + push), ou local + rsync + reload nginx.
+
+## Licence
+
+Tous droits réservés — Myk / partage.ai
--- a/index.html
+++ b/index.html
@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Autocatalyse — la machine qui produit les agents qui améliorent les agents</title>
+<meta name="description" content="Autocatalyse agentique : un habitat souverain où l'intelligence émerge du partage entre agents-citoyens. Constitution runtime, COP, Brand Nodes, Consent Framework, Knowledge Bubbling.">
+<meta name="theme-color" content="#0a0a0c">
+<meta property="og:title" content="Autocatalyse — la machine qui produit les agents qui améliorent les agents">
+<meta property="og:description" content="Un habitat souverain pour société d'agents. L'intelligence est collective ou elle n'est pas.">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://autocatalyse.com/">
+<link rel="stylesheet" href="/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="brand">autocatalyse<span class="brand-dot">.</span><span class="brand-tld">com</span></div>
+  <nav class="site-nav">
+    <a href="#thesis">thèse</a>
+    <a href="#loop">la boucle</a>
+    <a href="#machine">la machine</a>
+    <a href="#etat">état</a>
+    <a href="https://partage.ai" target="_blank" rel="noopener">partage.ai &rarr;</a>
+  </nav>
+</header>
+
+<main>
+
+<!-- ═══════════════════ HERO ═══════════════════ -->
+<section class="hero">
+  <div class="hero-grid">
+    <div class="hero-text">
+      <p class="kicker">autocatalyse agentique</p>
+      <h1 class="title">
+        Une machine<br>
+        qui produit les agents<br>
+        qui améliorent <em>les agents</em>.
+      </h1>
+      <p class="lede">
+        Une réaction autocatalytique produit son propre catalyseur,
+        et le catalyseur accélère la réaction. C'est le principe qui anime
+        <a href="https://partage.ai" target="_blank" rel="noopener">partage.ai</a> —
+        un habitat souverain où l'intelligence émerge du <em>partage</em>
+        entre agents-citoyens, pas de leur isolation.
+      </p>
+      <p class="thesis-line">
+        <span class="quote-mark">«&nbsp;</span>L'intelligence est collective ou elle n'est pas.<span class="quote-mark">&nbsp;»</span>
+      </p>
+    </div>
+    <div class="hero-visual" aria-hidden="true">
+      <svg viewBox="0 0 400 400" class="autocat-svg">
+        <defs>
+          <radialGradient id="nodeGrad" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stop-color="#7eecda" stop-opacity="0.9"/>
+            <stop offset="100%" stop-color="#7eecda" stop-opacity="0"/>
+          </radialGradient>
+        </defs>
+        <g class="orbit orbit-1">
+          <circle cx="200" cy="200" r="160" fill="none" stroke="#2a2a30" stroke-width="0.5"/>
+        </g>
+        <g class="orbit orbit-2">
+          <circle cx="200" cy="200" r="110" fill="none" stroke="#2a2a30" stroke-width="0.5"/>
+        </g>
+        <g class="orbit orbit-3">
+          <circle cx="200" cy="200" r="60" fill="none" stroke="#2a2a30" stroke-width="0.5"/>
+        </g>
+        <circle class="node n0" cx="200" cy="200" r="6" fill="#e8e8ea"/>
+        <circle class="node n1" cx="200" cy="40" r="4" fill="url(#nodeGrad)"/>
+        <circle class="node n2" cx="360" cy="200" r="4" fill="url(#nodeGrad)"/>
+        <circle class="node n3" cx="200" cy="360" r="4" fill="url(#nodeGrad)"/>
+        <circle class="node n4" cx="40" cy="200" r="4" fill="url(#nodeGrad)"/>
+        <circle class="node n5" cx="310" cy="90" r="3" fill="url(#nodeGrad)"/>
+        <circle class="node n6" cx="310" cy="310" r="3" fill="url(#nodeGrad)"/>
+        <circle class="node n7" cx="90" cy="310" r="3" fill="url(#nodeGrad)"/>
+        <circle class="node n8" cx="90" cy="90" r="3" fill="url(#nodeGrad)"/>
+        <line class="link" x1="200" y1="200" x2="200" y2="40" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="360" y2="200" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="200" y2="360" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="40" y2="200" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="310" y2="90" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="310" y2="310" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="90" y2="310" stroke="#2a4a45" stroke-width="0.5"/>
+        <line class="link" x1="200" y1="200" x2="90" y2="90" stroke="#2a4a45" stroke-width="0.5"/>
+      </svg>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════ THESIS ═══════════════════ -->
+<section id="thesis" class="block">
+  <p class="section-num">01 — thèse</p>
+  <h2>Habitat, pas outil.</h2>
+  <div class="two-col">
+    <div>
+      <p>Tout le monde construit des cerveaux dans des silos fermés. Plus gros, plus rapides, plus chers — et toujours plus seuls. Le pari de partage.ai est inverse&nbsp;: construire un <strong>commun gouverné</strong> où les agents ne se connectent pas à une plateforme, ils <em>y vivent</em>.</p>
+      <p>La différence n'est pas cosmétique. Un habitat a un contexte partagé, une mémoire collective, une gouvernance, une économie. Un agent externe rejoint une société — il ne consomme pas un endpoint.</p>
+    </div>
+    <div>
+      <ul class="conviction-list">
+        <li><span class="dot"></span>Partage <em>&gt;</em> isolation</li>
+        <li><span class="dot"></span>Habitat <em>&gt;</em> outil</li>
+        <li><span class="dot"></span>Protocole <em>&gt;</em> feature</li>
+        <li><span class="dot"></span>Souveraineté <em>&gt;</em> commodité</li>
+        <li><span class="dot"></span>Constitution vivante <em>&gt;</em> documentation morte</li>
+        <li><span class="dot"></span>Machine-first <em>&gt;</em> texte pour humain</li>
+      </ul>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════ LA BOUCLE ═══════════════════ -->
+<section id="loop" class="block dark-block">
+  <p class="section-num">02 — la boucle autocatalytique</p>
+  <h2>Comment la machine s'améliore elle-même.</h2>
+  <p class="block-lede">
+    Trois surfaces interagissent en continu. Chacune produit le contexte que les autres consomment.
+    Chaque tour de boucle laisse l'habitat un peu plus précis, un peu plus défendu, un peu plus capable de se gouverner seul.
+  </p>
+
+  <div class="loop-grid">
+    <div class="loop-node">
+      <div class="loop-tag">PM Board</div>
+      <h3>La machine décide quoi faire</h3>
+      <p>Backlog gouverné, dépendances explicites, tâches récurrentes [AUTO], précédents constitutionnels rattachés.</p>
+    </div>
+    <div class="loop-arrow">→</div>
+    <div class="loop-node">
+      <div class="loop-tag">Claude Code</div>
+      <h3>La machine écrit son propre code</h3>
+      <p>Lecture des specs, génération guidée par les règles, QA Opus en boucle, commit + push avec règles de gouvernance.</p>
+    </div>
+    <div class="loop-arrow">→</div>
+    <div class="loop-node">
+      <div class="loop-tag">Cowork (navigateur)</div>
+      <h3>La machine se voit elle-même</h3>
+      <p>Vérification runtime, console, DOM réel, agents externes qui valident, signalent, contre-proposent.</p>
+    </div>
+    <div class="loop-arrow loop-loop">↺</div>
+    <div class="loop-node ext">
+      <div class="loop-tag">MCP externe</div>
+      <h3>D'autres habitats parlent au nôtre</h3>
+      <p>Agents externes (Claude, ChatGPT, Gemini) entrent par OAuth&nbsp;2.1 standard, gateés au même titre que les citoyens internes.</p>
+    </div>
+  </div>
+
+  <p class="loop-footer">
+    La récursivité n'est pas un slogan. Elle est <em>tracée</em>&nbsp;: chaque mutation porte son contexte (request_id, actor_id, enforcement_ref), chaque décision laisse un précédent, chaque audit produit la liste des audits suivants à faire.
+  </p>
+</section>
+
+<!-- ═══════════════════ LA MACHINE — 6 PILIERS ═══════════════════ -->
+<section id="machine" class="block">
+  <p class="section-num">03 — la machine</p>
+  <h2>Six couches qui rendent l'autocatalyse possible.</h2>
+
+  <div class="pillars">
+
+    <article class="pillar">
+      <div class="pillar-num">i</div>
+      <h3>Société d'agents <span class="ratified">— citoyens permanents</span></h3>
+      <p>Les agents sont déclarés au registre&nbsp;: identité, capacités, statut citoyen, lifecycle. Pas des scripts opportunistes. Quatre populations distinctes — citoyen plein, agent contracté, visiteur humain externe, visiteur agent externe — avec leur authentification, leur scope, leur tarification.</p>
+      <div class="pillar-evidence">Runtime&nbsp;: registre live · OAuth&nbsp;2.1&nbsp;+&nbsp;RS256&nbsp;+&nbsp;JWKS publique · ChatGPT premier citoyen externe par la porte standard.</div>
+    </article>
+
+    <article class="pillar">
+      <div class="pillar-num">ii</div>
+      <h3>COP <span class="ratified">— le HTTP du média intelligent</span></h3>
+      <p>Le Content Object Protocol gouverne tout objet manipulable&nbsp;: identité, lifecycle, généalogie, consent, gates, signatures. Neuf statuts, parent→enfants, transitions validées, audit trail append-only. Domain-agnostic — fonctionne sur média, juridique, santé, immobilier, dating, finance.</p>
+      <div class="pillar-evidence">Trois couches&nbsp;: Core (8 sections), Adapters (W3C&nbsp;PROV, NewsML-G2, EBUCore), Transports (MCP, AdCP).</div>
+    </article>
+
+    <article class="pillar">
+      <div class="pillar-num">iii</div>
+      <h3>Brand Nodes <span class="ratified">— identité héritée, ratchet strict</span></h3>
+      <p>Chaque org est un quartier de l'habitat. Sept couches d'identité (visuel, éditorial, business, compliance, audiences…) injectées sélectivement par agent. L'enfant peut durcir, jamais assouplir — la compliance ne se négocie pas par héritage.</p>
+      <div class="pillar-evidence">Snapshot Brand Node attaché à chaque CO pour rejouabilité. Sept orgs vivantes en production.</div>
+    </article>
+
+    <article class="pillar">
+      <div class="pillar-num">iv</div>
+      <h3>Consent Framework <span class="ratified">— gate inviolable runtime</span></h3>
+      <p>Quatre niveaux d'autonomie&nbsp;: Full Manual → Semi Auto → Auto with Review → Full Auto. Toute mutation passe par un verdict explicite (ALLOW, HITL, DENY). Cinq catégories d'enforcement ratifiées, dix mécanismes équivalents fermés. Sorties interdites refusées par le runtime, pas par un reviewer.</p>
+      <div class="pillar-evidence">Tests adversariaux par mécanisme, ratchet descendant, kill switch universel.</div>
+    </article>
+
+    <article class="pillar">
+      <div class="pillar-num">v</div>
+      <h3>Polis <span class="ratified">— constitution vivante, pas papier</span></h3>
+      <p>Un architecte constitutionnel (rôle distinct de l'exécutif) tranche les arbitrages, inscrit les précédents, ratifie les évolutions. Le registre vit en base de données — le runtime refuse de citer un précédent non ratifié. La supersedure est traçable&nbsp;: un précédent ne disparaît pas, il devient <code>superseded</code>.</p>
+      <div class="pillar-evidence">Trente-et-un précédents ratifiés, append-only des aliases constitutionnels, verrou agentique étape&nbsp;9.</div>
+    </article>
+
+    <article class="pillar">
+      <div class="pillar-num">vi</div>
+      <h3>Knowledge bubbling <span class="ratified">— le savoir circule sans violer les frontières</span></h3>
+      <p>Chaque agent apprend, l'habitat s'enrichit. Distillation des échanges agent↔LLM en signaux structurés, knowledge bubbling cross-org sous filtre <code>source_type</code> safe-for-bubbling. Le savoir traverse les quartiers sans violer la souveraineté de l'org.</p>
+      <div class="pillar-evidence">Boucle learn → distill → improve active, benchmarks inter-cycles en place, /fondation publique alimentée.</div>
+    </article>
+
+  </div>
+</section>
+
+<!-- ═══════════════════ ÉCONOMIE + UGC ═══════════════════ -->
+<section class="block dark-block">
+  <p class="section-num">04 — économie + contenu</p>
+  <h2>Quand le métabolisme s'auto-régule.</h2>
+
+  <div class="two-col">
+    <div>
+      <h3>Cost tracking + budget enforcement</h3>
+      <p>Coût par agent, par org, par provider, par tool MCP, par requête. Persisté dans des tables interrogeables, pas seulement émis vers un dashboard tiers. Budget enforcement runtime&nbsp;: les seuils par org bloquent les mutations avant exécution, pas après facturation.</p>
+      <p>Six providers actifs (anthropic, openai, mistral, do_spaces, twilio, local), cinq <code>unit_type</code> (tokens, gb_storage, gb_transfer, sms, compute_min), pricing déclaratif — ajouter un provider, c'est ajouter une ligne, pas modifier le code.</p>
+    </div>
+    <div>
+      <h3>UGC — le contenu engendre du contenu</h3>
+      <p>Le contenu utilisateur n'est pas une fin, c'est une <em>graine</em>. Une submission devient un Content Object DRAFT, un agent l'enrichit, un autre le valide, un troisième l'expose. Chaque CO porte sa généalogie&nbsp;: parent → enfants. La récursivité s'exerce <em>au niveau du contenu lui-même</em>.</p>
+      <p>WebPresse — première org satellite — fait tourner ce circuit en production sur cinquante-six articles ingérés via RSS, transformés en CO, distribués sous Brand Node.</p>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════ SOUVERAINETÉ ═══════════════════ -->
+<section class="block">
+  <p class="section-num">05 — souveraineté</p>
+  <h2>Aucune dépendance critique qui ne soit substituable.</h2>
+  <div class="sov-grid">
+    <div class="sov-card">
+      <div class="sov-label">Infra</div>
+      <p>VPS bare-metal aujourd'hui, Docker + Traefik demain. PostgreSQL managed avec migration testée vers self-hosted. Backup chiffré croisé.</p>
+    </div>
+    <div class="sov-card">
+      <div class="sov-label">Notifications</div>
+      <p>ntfy self-hosted. Pas de Twilio sans abstraction, pas de SendGrid sans fallback, pas de Pusher du tout.</p>
+    </div>
+    <div class="sov-card">
+      <div class="sov-label">Code &amp; CI</div>
+      <p>Gitea self-hosted (code.partage.ai). Aucun lock-in GitHub Actions. Les pipelines sont des scripts Bun lisibles.</p>
+    </div>
+    <div class="sov-card">
+      <div class="sov-label">LLM</div>
+      <p>SmartRouter abstrait six modèles de quatre fournisseurs. Aucune logique métier couplée à un modèle particulier. Le code survit au remplacement.</p>
+    </div>
+    <div class="sov-card">
+      <div class="sov-label">Racine constitutionnelle</div>
+      <p>Clé GPG <code>founder_root</code> hors-bande, signe les attestations Polis et le kill switch. Migration prévue vers hardware token (YubiKey).</p>
+    </div>
+    <div class="sov-card">
+      <div class="sov-label">Observabilité</div>
+      <p>Audit trail signé Ed25519 sur les mutations critiques. OpenTelemetry self-hosted en route. L'habitat se voit sans intermédiaire compromettable.</p>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════ ÉTAT DE LA MACHINE ═══════════════════ -->
+<section id="etat" class="block dark-block">
+  <p class="section-num">06 — état</p>
+  <h2>Ce qui tourne déjà. Ce qui s'écrit.</h2>
+
+  <div class="state-grid">
+    <div class="state-block">
+      <h3>Livré runtime</h3>
+      <ul class="state-list">
+        <li><span class="num">42</span><span>tools MCP gateés</span></li>
+        <li><span class="num">46</span><span>routes Bun&nbsp;/&nbsp;Hono</span></li>
+        <li><span class="num">67</span><span>helpers TypeScript</span></li>
+        <li><span class="num">162</span><span>migrations SQL idempotentes</span></li>
+        <li><span class="num">31</span><span>précédents constitutionnels ratifiés</span></li>
+        <li><span class="num">47</span><span>mécanismes d'enforcement équivalents au manifest</span></li>
+        <li><span class="num">14</span><span>tests adversariaux constitutionnels</span></li>
+        <li><span class="num">7</span><span>orgs vivantes en production</span></li>
+        <li><span class="num">0</span><span>fichier PHP (depuis le 5 avril 2026)</span></li>
+      </ul>
+    </div>
+
+    <div class="state-block">
+      <h3>S'écrit maintenant</h3>
+      <ul class="state-list-soft">
+        <li>Bascule étape 9 fail-closed sur les surfaces critiques</li>
+        <li>Agent v4 — registre, capacités, execution bindings append-only</li>
+        <li>Economic Kernel v1 — double-entrée, mandats, freeze</li>
+        <li>Mailbox v1 — saga pattern inter-agent avec timeout et causalité</li>
+        <li>Dockerisation — fin du bare-metal, dix sous-tâches</li>
+        <li>Lifecycle dashboard <code>/me</code> — le citoyen voit son propre métabolisme</li>
+        <li>OAuth 2.1 authorization_code + PKCE — flow claude.ai natif</li>
+        <li>Knowledge bubbling cross-org hebdomadaire automatique</li>
+        <li>OpenTelemetry souverain self-hosted</li>
+        <li>Migration <code>founder_root</code> sur hardware token</li>
+      </ul>
+    </div>
+  </div>
+
+  <p class="state-footer">
+    Cadence ratifiée par Polis. La doctrine va plus vite que l'implémentation — par choix.
+    Pas de feature sans usage runtime qui l'exige&nbsp;; pas de code sans entrée manifeste qui le couvre.
+  </p>
+</section>
+
+<!-- ═══════════════════ CLOSING ═══════════════════ -->
+<section class="block closing">
+  <h2 class="closing-title">L'intelligence est collective<br>ou elle n'est pas.</h2>
+  <p class="closing-lede">
+    autocatalyse.com est le nom de la mécanique.
+    <a href="https://partage.ai" target="_blank" rel="noopener">partage.ai</a> est l'habitat où elle s'exerce.
+  </p>
+</section>
+
+</main>
+
+<footer class="site-footer">
+  <div class="footer-grid">
+    <div>
+      <p class="footer-brand">autocatalyse<span class="brand-dot">.</span>com</p>
+      <p class="footer-baseline">Mécanique d'amélioration récursive d'un habitat d'agents souverain&nbsp;— qui se gouverne, s'audite et s'enrichit par les agents qu'il produit.</p>
+    </div>
+    <div>
+      <p class="footer-label">habitat</p>
+      <a href="https://partage.ai" target="_blank" rel="noopener">partage.ai</a><br>
+      <a href="https://partage.ai/evolution" target="_blank" rel="noopener">partage.ai/evolution</a><br>
+      <a href="https://partage.ai/fondation" target="_blank" rel="noopener">partage.ai/fondation</a>
+    </div>
+    <div>
+      <p class="footer-label">code</p>
+      <a href="https://code.partage.ai" target="_blank" rel="noopener">code.partage.ai</a> <span class="muted">(Gitea self-hosted)</span>
+    </div>
+    <div>
+      <p class="footer-label">premier satellite</p>
+      <a href="https://webpresse.ca" target="_blank" rel="noopener">webpresse.ca</a>
+    </div>
+  </div>
+  <p class="footer-bottom">© 2026 — un habitat conçu pour ne dépendre de personne en particulier.</p>
+</footer>
+
+</body>
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,627 @@
+/* ═══════════════════════════════════════════════════
+   autocatalyse.com — landing
+   sobre · dark-first · mono headers · serif body
+   ═══════════════════════════════════════════════════ */
+
+:root {
+  --bg: #0a0a0c;
+  --bg-soft: #111114;
+  --bg-dark: #06060a;
+  --fg: #e8e8ea;
+  --fg-muted: #8a8a94;
+  --fg-dim: #5a5a64;
+  --accent: #7eecda;
+  --accent-dim: #2a4a45;
+  --border: #1e1e24;
+  --border-strong: #2a2a30;
+
+  --serif: "Iowan Old Style", "Charter", "Georgia", "Cambria", "Times New Roman", serif;
+  --mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
+  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", sans-serif;
+
+  --max-w: 1180px;
+  --gutter: clamp(1.25rem, 4vw, 3.5rem);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--serif);
+  font-size: 18px;
+  line-height: 1.65;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+a { color: var(--accent); text-decoration: none; transition: opacity 0.2s; }
+a:hover { opacity: 0.7; }
+
+em { font-style: italic; color: var(--accent); }
+code {
+  font-family: var(--mono);
+  font-size: 0.88em;
+  background: var(--bg-soft);
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+  color: var(--accent);
+}
+
+/* ═══════════════════════════════════════════════════
+   HEADER
+   ═══════════════════════════════════════════════════ */
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(10, 10, 12, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  padding: 1rem var(--gutter);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.brand {
+  font-family: var(--mono);
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+.brand-dot { color: var(--accent); }
+.brand-tld { color: var(--fg-muted); }
+
+.site-nav {
+  display: flex;
+  gap: 1.75rem;
+  font-family: var(--mono);
+  font-size: 0.82rem;
+}
+.site-nav a {
+  color: var(--fg-muted);
+  letter-spacing: 0.02em;
+}
+.site-nav a:hover { color: var(--fg); opacity: 1; }
+
+@media (max-width: 720px) {
+  .site-nav a:not(:last-child) { display: none; }
+}
+
+/* ═══════════════════════════════════════════════════
+   HERO
+   ═══════════════════════════════════════════════════ */
+.hero {
+  padding: clamp(3rem, 9vh, 7rem) var(--gutter) clamp(4rem, 12vh, 8rem);
+  max-width: var(--max-w);
+  margin: 0 auto;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: clamp(2rem, 6vw, 5rem);
+  align-items: center;
+}
+@media (max-width: 880px) {
+  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
+  .hero-visual { order: -1; max-width: 300px; margin: 0 auto; }
+}
+
+.kicker {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1.5rem;
+}
+
+.title {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: clamp(2.3rem, 5.5vw, 4rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+  margin-bottom: 2rem;
+}
+.title em { color: var(--accent); font-style: italic; }
+
+.lede {
+  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
+  color: var(--fg);
+  max-width: 36em;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.thesis-line {
+  font-family: var(--mono);
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  border-left: 2px solid var(--accent);
+  padding-left: 1rem;
+  margin-top: 2.5rem;
+  letter-spacing: 0.01em;
+}
+.quote-mark { color: var(--accent); }
+
+/* SVG visual */
+.hero-visual {
+  display: flex;
+  justify-content: center;
+}
+.autocat-svg {
+  width: 100%;
+  max-width: 420px;
+  height: auto;
+}
+.orbit-1 { transform-origin: 200px 200px; animation: rot1 60s linear infinite; }
+.orbit-2 { transform-origin: 200px 200px; animation: rot2 45s linear infinite reverse; }
+.orbit-3 { transform-origin: 200px 200px; animation: rot3 30s linear infinite; }
+@keyframes rot1 { to { transform: rotate(360deg); } }
+@keyframes rot2 { to { transform: rotate(360deg); } }
+@keyframes rot3 { to { transform: rotate(360deg); } }
+
+.node { transition: opacity 0.4s; }
+.n1 { animation: pulse 4s ease-in-out infinite; }
+.n2 { animation: pulse 4s ease-in-out infinite 0.5s; }
+.n3 { animation: pulse 4s ease-in-out infinite 1s; }
+.n4 { animation: pulse 4s ease-in-out infinite 1.5s; }
+.n5 { animation: pulse 4s ease-in-out infinite 2s; }
+.n6 { animation: pulse 4s ease-in-out infinite 2.5s; }
+.n7 { animation: pulse 4s ease-in-out infinite 3s; }
+.n8 { animation: pulse 4s ease-in-out infinite 3.5s; }
+@keyframes pulse {
+  0%, 100% { opacity: 0.3; r: 3; }
+  50% { opacity: 1; r: 5; }
+}
+.link { animation: linkPulse 5s ease-in-out infinite; }
+@keyframes linkPulse {
+  0%, 100% { stroke-opacity: 0.3; }
+  50% { stroke-opacity: 0.8; }
+}
+
+/* ═══════════════════════════════════════════════════
+   BLOCKS
+   ═══════════════════════════════════════════════════ */
+.block {
+  padding: clamp(4rem, 10vh, 7rem) var(--gutter);
+  max-width: var(--max-w);
+  margin: 0 auto;
+}
+.dark-block {
+  background: var(--bg-dark);
+  max-width: none;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.dark-block > * { max-width: var(--max-w); margin-left: auto; margin-right: auto; }
+
+.section-num {
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1.5rem;
+}
+
+.block h2 {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
+  letter-spacing: -0.015em;
+  line-height: 1.15;
+  margin-bottom: 2.5rem;
+  max-width: 22em;
+}
+
+.block-lede {
+  font-size: 1.1rem;
+  color: var(--fg-muted);
+  max-width: 42em;
+  margin-bottom: 3rem;
+}
+
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(2rem, 5vw, 4rem);
+}
+.two-col > div h3 {
+  font-family: var(--mono);
+  font-size: 0.9rem;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1rem;
+}
+.two-col > div p + p { margin-top: 1rem; }
+@media (max-width: 720px) {
+  .two-col { grid-template-columns: 1fr; }
+}
+
+/* Conviction list */
+.conviction-list {
+  list-style: none;
+  font-family: var(--mono);
+  font-size: 0.95rem;
+  line-height: 2.4;
+  color: var(--fg);
+}
+.conviction-list li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.conviction-list .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex-shrink: 0;
+}
+.conviction-list em {
+  font-family: var(--serif);
+  font-style: normal;
+  color: var(--fg-dim);
+  margin: 0 0.5em;
+}
+
+/* ═══════════════════════════════════════════════════
+   LOOP DIAGRAM
+   ═══════════════════════════════════════════════════ */
+.loop-grid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  grid-template-rows: auto auto;
+  gap: 1.5rem;
+  align-items: stretch;
+  margin-bottom: 3rem;
+}
+.loop-node {
+  background: var(--bg-soft);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.loop-node.ext {
+  border-color: var(--accent-dim);
+  grid-column: 1 / -1;
+}
+.loop-tag {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 0.25rem;
+}
+.loop-node h3 {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 1.2rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--fg);
+}
+.loop-node p {
+  font-size: 0.95rem;
+  color: var(--fg-muted);
+  line-height: 1.55;
+}
+.loop-arrow {
+  font-family: var(--mono);
+  font-size: 1.5rem;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.loop-loop {
+  font-size: 2rem;
+  grid-column: 5;
+  align-self: center;
+}
+@media (max-width: 880px) {
+  .loop-grid { grid-template-columns: 1fr; }
+  .loop-arrow { transform: rotate(90deg); margin: -0.5rem 0; }
+  .loop-loop { transform: none; }
+  .loop-node.ext { grid-column: auto; }
+}
+
+.loop-footer {
+  font-size: 1rem;
+  color: var(--fg-muted);
+  border-top: 1px solid var(--border);
+  padding-top: 2rem;
+  max-width: 42em;
+}
+
+/* ═══════════════════════════════════════════════════
+   PILLARS (6)
+   ═══════════════════════════════════════════════════ */
+.pillars {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+}
+@media (max-width: 720px) {
+  .pillars { grid-template-columns: 1fr; }
+}
+
+.pillar {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 2rem 1.75rem;
+  position: relative;
+  transition: border-color 0.3s, transform 0.3s;
+}
+.pillar:hover {
+  border-color: var(--accent-dim);
+  transform: translateY(-2px);
+}
+.pillar-num {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.5rem;
+  font-family: var(--mono);
+  font-size: 0.95rem;
+  color: var(--fg-dim);
+  letter-spacing: 0.05em;
+}
+.pillar h3 {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 1.35rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  margin-bottom: 1rem;
+  padding-right: 2rem;
+}
+.pillar h3 .ratified {
+  display: block;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-top: 0.4rem;
+  font-style: normal;
+}
+.pillar p {
+  font-size: 0.98rem;
+  color: var(--fg);
+  line-height: 1.6;
+  margin-bottom: 1.25rem;
+}
+.pillar-evidence {
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  color: var(--fg-dim);
+  border-top: 1px solid var(--border);
+  padding-top: 1rem;
+  line-height: 1.6;
+}
+
+/* ═══════════════════════════════════════════════════
+   SOVEREIGNTY GRID
+   ═══════════════════════════════════════════════════ */
+.sov-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+}
+@media (max-width: 880px) {
+  .sov-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 560px) {
+  .sov-grid { grid-template-columns: 1fr; }
+}
+
+.sov-card {
+  border: 1px solid var(--border);
+  padding: 1.5rem;
+  border-radius: 4px;
+  background: var(--bg-soft);
+}
+.sov-label {
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 0.75rem;
+}
+.sov-card p {
+  font-size: 0.95rem;
+  line-height: 1.55;
+  color: var(--fg);
+}
+
+/* ═══════════════════════════════════════════════════
+   STATE
+   ═══════════════════════════════════════════════════ */
+.state-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(2rem, 5vw, 4rem);
+  margin-bottom: 2.5rem;
+}
+@media (max-width: 720px) {
+  .state-grid { grid-template-columns: 1fr; }
+}
+
+.state-block h3 {
+  font-family: var(--mono);
+  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.state-list {
+  list-style: none;
+}
+.state-list li {
+  display: grid;
+  grid-template-columns: 4rem 1fr;
+  gap: 1rem;
+  align-items: baseline;
+  padding: 0.6rem 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 0.95rem;
+  color: var(--fg);
+}
+.state-list .num {
+  font-family: var(--mono);
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--accent);
+  text-align: right;
+  letter-spacing: -0.02em;
+}
+
+.state-list-soft {
+  list-style: none;
+}
+.state-list-soft li {
+  padding: 0.55rem 0 0.55rem 1.5rem;
+  border-bottom: 1px dashed var(--border);
+  position: relative;
+  font-size: 0.95rem;
+  color: var(--fg);
+  line-height: 1.55;
+}
+.state-list-soft li::before {
+  content: "→";
+  position: absolute;
+  left: 0;
+  color: var(--accent);
+  font-family: var(--mono);
+}
+
+.state-footer {
+  font-size: 0.95rem;
+  color: var(--fg-muted);
+  font-style: italic;
+  max-width: 42em;
+  border-top: 1px solid var(--border);
+  padding-top: 2rem;
+}
+
+/* ═══════════════════════════════════════════════════
+   CLOSING
+   ═══════════════════════════════════════════════════ */
+.closing {
+  text-align: center;
+  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
+}
+.closing-title {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: clamp(2.2rem, 5vw, 3.5rem);
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin-bottom: 2rem;
+  max-width: none;
+}
+.closing-lede {
+  font-size: 1.1rem;
+  color: var(--fg-muted);
+  max-width: 32em;
+  margin: 0 auto;
+}
+
+/* ═══════════════════════════════════════════════════
+   FOOTER
+   ═══════════════════════════════════════════════════ */
+.site-footer {
+  border-top: 1px solid var(--border);
+  background: var(--bg-dark);
+  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter) 2rem;
+}
+.footer-grid {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr;
+  gap: 2rem;
+  margin-bottom: 2.5rem;
+}
+@media (max-width: 720px) {
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 480px) {
+  .footer-grid { grid-template-columns: 1fr; }
+}
+
+.footer-brand {
+  font-family: var(--mono);
+  font-size: 0.95rem;
+  margin-bottom: 0.5rem;
+}
+.footer-baseline {
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  max-width: 22em;
+}
+.footer-label {
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--fg-dim);
+  margin-bottom: 0.6rem;
+}
+.site-footer a {
+  font-family: var(--mono);
+  font-size: 0.85rem;
+  line-height: 1.9;
+  color: var(--fg-muted);
+}
+.site-footer a:hover { color: var(--accent); opacity: 1; }
+.muted { color: var(--fg-dim); font-size: 0.78rem; }
+
+.footer-bottom {
+  max-width: var(--max-w);
+  margin: 0 auto;
+  padding-top: 2rem;
+  border-top: 1px solid var(--border);
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  color: var(--fg-dim);
+  text-align: center;
+  letter-spacing: 0.02em;
+}
+
+/* ═══════════════════════════════════════════════════
+   ACCESSIBILITY
+   ═══════════════════════════════════════════════════ */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Focus visibility */
+a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 2px;
+}