diff --git a/.changeset/beetroot-stack-rebrand.md b/.changeset/beetroot-stack-rebrand.md
new file mode 100644
index 0000000..ec3a2b1
--- /dev/null
+++ b/.changeset/beetroot-stack-rebrand.md
@@ -0,0 +1,11 @@
+---
+"@btravstack/theme": minor
+---
+
+Beetroot Stack rebrand — studied from tanstack.com: a near-neutral black canvas where each package glows in its own accent.
+
+- Near-black canvas (`oklch(13% 0.006 310)`) is the canonical dark-default; the light scheme remains the daylight fallback.
+- Typography: Geist (display 700/800 + body — weight contrast does the branding) + JetBrains Mono replace Montserrat.
+- The multi-accent stack: new `--pkg-amqp` / `--pkg-temporal` / `--pkg-unthrown` / `--pkg-demesne` tokens expose the official per-package accents so the landing (and any consumer) can show the stack in color; the org beetroot pink stays the `--accent` knob for wordmark, links and CTAs.
+- Elevation through surface lightness (no hairline card borders), solid ink hero name (no gradient text), floating hero mark kept as the one character moment, no glow washes.
+- Non-breaking: all semantic tokens keep their names and the one-knob rebrand contract is unchanged — each docs site still overrides only `--accent` with its package color, which is exactly the studied per-library accent system.
diff --git a/.hallmark/log.json b/.hallmark/log.json
new file mode 100644
index 0000000..6a84823
--- /dev/null
+++ b/.hallmark/log.json
@@ -0,0 +1,50 @@
+[
+  {
+    "date": "2026-07-16",
+    "scope": "app",
+    "macrostructure": "Ecosystem Index",
+    "theme": "studied-DNA (source: https://tanstack.com/)",
+    "theme_axes": "dark / geometric-sans / multi-accent (org beetroot + per-package)",
+    "vibe": "neutral black canvas, colorful stack, real numbers",
+    "enrichment": "H9 original gradient mascot (Tier-B, kept)",
+    "nav": "N1b",
+    "footer": "Ft3 index (genuine hub)",
+    "brief": "btravstack org rebrand v5 \u2014 Beetroot Stack, studied from tanstack.com (user's stated inspiration); reworked onto design/beetroot-nocturne (PR #30)"
+  },
+  {
+    "date": "2026-07-16",
+    "scope": "app",
+    "macrostructure": "Catalogue",
+    "theme": "custom",
+    "theme_axes": "light / high-contrast-serif / chromatic-other (beetroot-pink ~353)",
+    "vibe": "botanical atlas, engraved plates, warm ivory, exact",
+    "enrichment": "Tier-B hand-built SVG engravings (plates + full logo set)",
+    "nav": "N9 edge-aligned",
+    "footer": "Ft1 mast-headed",
+    "brief": "btravstack org rebrand v3 \u2014 Beetroot Atlas (LIKED by user; PR #29, branch design/beetroot-atlas)"
+  },
+  {
+    "date": "2026-07-16",
+    "scope": "app",
+    "macrostructure": "Bento Grid",
+    "theme": "custom",
+    "theme_axes": "light / rounded-sans / chromatic-other (beetroot-pink ~353)",
+    "vibe": "warm, rounded, charming beetroot, soft-but-exact",
+    "enrichment": "H9 original gradient mascot (Tier-B, restored)",
+    "nav": "N1b",
+    "footer": "Ft8 marquee",
+    "brief": "btravstack org rebrand v2 \u2014 Beetroot Soft (REJECTED by user; PR #28)"
+  },
+  {
+    "date": "2026-07-16",
+    "scope": "app",
+    "macrostructure": "Manifesto",
+    "theme": "custom",
+    "theme_axes": "light / display-heavy / chromatic-other (beetroot-pink ~353)",
+    "vibe": "beetroot risograph, contract-as-document, raw, technical",
+    "enrichment": "Tier-B hand-built SVG (flat riso logo set)",
+    "nav": "N7 brutal slab",
+    "footer": "Ft4 dense colophon",
+    "brief": "btravstack org rebrand v1 \u2014 Beetroot Riso (REJECTED by user; PR #27)"
+  }
+]
\ No newline at end of file
diff --git a/apps/website/.vitepress/config.ts b/apps/website/.vitepress/config.ts
index 73261e0..6d24505 100644
--- a/apps/website/.vitepress/config.ts
+++ b/apps/website/.vitepress/config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from "vitepress";
 
-const SITE_TITLE = "btravstack";
+const SITE_TITLE = "BtravStack";
 const SITE_DESCRIPTION =
   "Type-safe building blocks for the TypeScript backend: contracts for AMQP & Temporal, typed dependency injection, and errors as values.";
 const SITE_URL = "https://btravstack.github.io";
@@ -46,7 +46,7 @@ export default defineConfig({
       "meta",
       {
         property: "og:image:alt",
-        content: "btravstack — type-safe building blocks for the TypeScript backend",
+        content: "BtravStack — type-safe building blocks for the TypeScript backend",
       },
     ],
 
@@ -59,7 +59,7 @@ export default defineConfig({
       "meta",
       {
         name: "twitter:image:alt",
-        content: "btravstack — type-safe building blocks for the TypeScript backend",
+        content: "BtravStack — type-safe building blocks for the TypeScript backend",
       },
     ],
 
@@ -94,7 +94,7 @@ export default defineConfig({
       JSON.stringify({
         "@context": "https://schema.org",
         "@type": "ItemList",
-        name: "btravstack packages",
+        name: "BtravStack packages",
         itemListElement: [
           {
             "@type": "ListItem",
diff --git a/apps/website/.vitepress/theme/Landing.vue b/apps/website/.vitepress/theme/Landing.vue
index 5c7c877..8486f22 100644
--- a/apps/website/.vitepress/theme/Landing.vue
+++ b/apps/website/.vitepress/theme/Landing.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
 import { useData } from "vitepress";
 
 // Appearance follows the OS by default (VitePress `appearance: true`); this
@@ -29,9 +29,11 @@ const inspirations = [
 ];
 
 interface Project {
+  key: string;
   tag: string;
   name: string;
   pkg: string;
+  npm: string;
   logo: string;
   repoFull: string;
   stars0: number;
@@ -44,7 +46,7 @@ interface Project {
 
 const projects: Project[] = [
   {
-    tag: "Messaging", name: "amqp-contract", pkg: "@amqp-contract/contract",
+    key: "amqp", tag: "Messaging", name: "amqp-contract", pkg: "@amqp-contract/contract", npm: "@amqp-contract/contract",
     logo: "/logos/amqp-contract", repoFull: "btravstack/amqp-contract", stars0: 18,
     blurb: "Type-safe contracts for AMQP & RabbitMQ. Define your exchanges, queues and messages once — get types and runtime validation on both ends.",
     points: ["End-to-end type safety", "Reliable retry with Dead Letter Queues", "AsyncAPI 3.0 generation"],
@@ -52,7 +54,7 @@ const projects: Project[] = [
     repo: "https://github.com/btravstack/amqp-contract", docs: "https://btravstack.github.io/amqp-contract/",
   },
   {
-    tag: "Workflows", name: "temporal-contract", pkg: "@temporal-contract/contract",
+    key: "temporal", tag: "Workflows", name: "temporal-contract", pkg: "@temporal-contract/contract", npm: "@temporal-contract/contract",
     logo: "/logos/temporal-contract", repoFull: "btravstack/temporal-contract", stars0: 7,
     blurb: "Type-safe contracts for Temporal.io. End-to-end types and automatic validation across workflows, activities and clients.",
     points: ["Zod validation at every boundary", "Compile-time implementation checks", "Result / Future error handling"],
@@ -60,7 +62,7 @@ const projects: Project[] = [
     repo: "https://github.com/btravstack/temporal-contract", docs: "https://btravstack.github.io/temporal-contract/",
   },
   {
-    tag: "Errors", name: "unthrown", pkg: "unthrown",
+    key: "unthrown", tag: "Errors", name: "unthrown", pkg: "unthrown", npm: "unthrown",
     logo: "/logos/unthrown", repoFull: "btravstack/unthrown", stars0: 1,
     blurb: "Explicit errors as values — with a separate defect channel for the unexpected. Only a true defect ever throws, and only at unwrap.",
     points: ["Errors as values, typed in E", "A separate defect channel", "Zero runtime dependencies"],
@@ -68,7 +70,7 @@ const projects: Project[] = [
     repo: "https://github.com/btravstack/unthrown", docs: "https://btravstack.github.io/unthrown/",
   },
   {
-    tag: "Injection", name: "demesne", pkg: "demesne",
+    key: "demesne", tag: "Injection", name: "demesne", pkg: "demesne", npm: "demesne",
     logo: "/logos/demesne", repoFull: "btravstack/demesne", stars0: 2,
     blurb: "Type-safe dependency injection. Requirements and construction errors live in the type system — you cannot build until every dependency is wired.",
     points: ["Missing wiring is a compile error", "Failures as one static union", "Scoped resources, LIFO release"],
@@ -80,6 +82,10 @@ const projects: Project[] = [
 const stars = reactive<Record<string, number>>(
   Object.fromEntries(projects.map((p) => [p.repoFull, p.stars0])),
 );
+const totalStars = computed(() => Object.values(stars).reduce((a, b) => a + b, 0));
+// npm downloads (last month, all packages) — real numbers only: shows "—" until fetched.
+const npmDownloads = ref<number | null>(null);
+
 const copied = ref<string | null>(null);
 let timer: ReturnType<typeof setTimeout> | undefined;
 
@@ -90,7 +96,7 @@ function copy(text: string) {
   timer = setTimeout(() => (copied.value = null), 1600);
 }
 
-function formatStars(n: number) {
+function formatCount(n: number) {
   return n >= 1000 ? `${(n / 1000).toFixed(n >= 10000 ? 0 : 1).replace(/\.0$/, "")}k` : String(n);
 }
 
@@ -101,359 +107,443 @@ onMounted(() => {
       .then((d) => { if (typeof d.stargazers_count === "number") stars[p.repoFull] = d.stargazers_count; })
       .catch(() => {});
   }
+  Promise.all(projects.map((p) =>
+    fetch(`https://api.npmjs.org/downloads/point/last-month/${encodeURIComponent(p.npm)}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
+      .then((d) => (typeof d.downloads === "number" ? d.downloads : 0))
+      .catch(() => 0),
+  )).then((counts) => {
+    const sum = counts.reduce((a, b) => a + b, 0);
+    if (sum > 0) npmDownloads.value = sum;
+  }).catch(() => {});
 });
 </script>
 
 <template>
   <div class="btv">
+    <!-- N1b · three-section bar -->
     <header class="btv-head">
       <div class="btv-head-inner">
         <a href="#top" class="btv-brand">
-          <svg viewBox="0 0 100 124" width="26" height="32" fill="none" aria-hidden="true" focusable="false"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"/></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"/><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"/><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"/><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"/></svg>
-          <span class="btv-word"><span class="btv-pink">btrav</span><span>stack</span></span>
+          <svg viewBox="-2 -12 104 148" width="21" height="30" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-6 50 68)"><path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/><path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/><path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/><path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/><g transform="rotate(-38 16 66)"><rect x="4" y="62" width="20" height="9" rx="4.5" fill="#CE3D80"/></g><g transform="rotate(24 84 78)"><rect x="76" y="74" width="18" height="9" rx="4.5" fill="#8E1A52"/></g><path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/><path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/><path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/><circle cx="38" cy="60" r="5.2" fill="#3A0D24"/><circle cx="39.7" cy="58.3" r="1.8" fill="#FFFFFF"/><circle cx="63" cy="60" r="5.2" fill="#3A0D24"/><circle cx="64.7" cy="58.3" r="1.8" fill="#FFFFFF"/><path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/><circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/><circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/><path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/></g></svg>
+          <span class="btv-word"><span class="btv-pink">Btrav</span><span>Stack</span></span>
         </a>
-        <nav class="btv-nav">
-          <a class="navlink nav-hide" href="#philosophy">Philosophy</a>
-          <a class="navlink nav-hide" href="#projects">Projects</a>
-          <a class="navlink nav-hide" href="#ai" style="margin-right:6px">Why now</a>
+        <nav class="btv-links nav-hide" aria-label="Primary">
+          <a class="navlink" href="#packages">The stack</a>
+          <a class="navlink" href="#philosophy">Philosophy</a>
+          <a class="navlink" href="#ai">Why&nbsp;now</a>
+        </nav>
+        <div class="btv-actions">
           <ClientOnly>
             <button type="button" class="btv-toggle" :title="isDark ? 'Switch to light' : 'Switch to dark'" :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'" :aria-pressed="isDark" @click="toggleAppearance">
-              <svg v-if="isDark" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2M12 19.5v2M4.8 4.8l1.4 1.4M17.8 17.8l1.4 1.4M2.5 12h2M19.5 12h2M4.8 19.2 6.2 17.8M17.8 6.2 19.2 4.8"/></svg>
-              <svg v-else width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 1 1 9.5 4 6.4 6.4 0 0 0 20 14.5Z"/></svg>
+              <svg v-if="isDark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4.2"/><path d="M12 2.5v2M12 19.5v2M4.8 4.8l1.4 1.4M17.8 17.8l1.4 1.4M2.5 12h2M19.5 12h2M4.8 19.2 6.2 17.8M17.8 6.2 19.2 4.8"/></svg>
+              <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A8 8 0 1 1 9.5 4 6.4 6.4 0 0 0 20 14.5Z"/></svg>
             </button>
           </ClientOnly>
-          <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="cta-ghost btv-ghost-btn">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><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.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-          GitHub
-          </a>
-        </nav>
+          <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta btv-cta--nav">GitHub</a>
+        </div>
       </div>
     </header>
 
+    <!-- Hero — wordmark-led, mascot beside, real stats beneath -->
     <section id="top" class="btv-hero">
-      <div class="btv-glow"></div>
-      <div class="btv-hero-inner">
-        <div class="btv-float">
-          <svg viewBox="0 0 100 124" width="116" height="144" fill="none" aria-hidden="true" focusable="false"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"/></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"/><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"/><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"/><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"/></svg>
-        </div>
-        <h1 class="btv-title"><span class="btv-pink">btrav</span><span>stack</span></h1>
-        <p class="btv-lead">An expressive, robust TypeScript backend.</p>
-        <p class="btv-sub">A small stack of type-safe building blocks for Node, built on two convictions: a signature should be enough to understand a system, and the fastest error is the best one. Declare the contract once — types, validation and feedback flow everywhere.</p>
-        <div class="btv-cta-row">
-          <a href="#projects" class="cta-primary btv-primary-btn">Explore the packages</a>
-          <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="cta-ghost btv-ghost-cta">
-            <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><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.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-            View on GitHub
-          </a>
+      <div class="btv-hero-grid">
+        <div class="btv-hero-copy">
+          <h1 class="btv-title"><span class="btv-pink">Btrav</span>Stack</h1>
+          <p class="btv-tagline">An expressive, robust <span class="btv-tagline-mark">TypeScript</span> backend.</p>
+          <p class="btv-sub">A small stack of type-safe building blocks for Node, built on two convictions: a signature should be enough to understand a system, and the fastest error is the best one. Declare the contract once — types, validation and feedback flow everywhere.</p>
+          <div class="btv-cta-row">
+            <a href="#packages" class="btv-cta">Browse the stack</a>
+            <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta btv-cta--ghost">View on GitHub <span aria-hidden="true">↗</span></a>
+          </div>
         </div>
-        <div class="btv-pills">
-          <span v-for="p in projects" :key="p.name" class="btv-pill">{{ p.name }}</span>
+        <div class="btv-float">
+          <svg viewBox="-2 -12 104 148" width="131" height="186" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-6 50 68)"><path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/><path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/><path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/><path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/><g transform="rotate(-38 16 66)"><rect x="4" y="62" width="20" height="9" rx="4.5" fill="#CE3D80"/></g><g transform="rotate(24 84 78)"><rect x="76" y="74" width="18" height="9" rx="4.5" fill="#8E1A52"/></g><path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/><path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/><path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/><circle cx="38" cy="60" r="5.2" fill="#3A0D24"/><circle cx="39.7" cy="58.3" r="1.8" fill="#FFFFFF"/><circle cx="63" cy="60" r="5.2" fill="#3A0D24"/><circle cx="64.7" cy="58.3" r="1.8" fill="#FFFFFF"/><path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/><circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/><circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/><path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/></g></svg>
         </div>
       </div>
-    </section>
-
-    <section id="philosophy" class="btv-section btv-narrow">
-      <p class="btv-eyebrow">Why btravstack</p>
-      <h2 class="btv-h2 btv-h2-wide">Expressive to read. Robust to run.</h2>
-      <p class="btv-section-lead">Each package is small, focused and does one thing well — but they share a worldview: expressive code you can understand from its signature alone, and robust code that fails fast enough to learn from.</p>
-      <div class="btv-prin">
-        <div v-for="pr in principles" :key="pr.num" class="btv-prin-card">
-          <div class="btv-prin-chip" aria-hidden="true">{{ pr.num }}</div>
-          <h3 class="btv-prin-title">{{ pr.title }}</h3>
-          <p class="btv-prin-body">{{ pr.body }}</p>
+      <ClientOnly>
+        <div class="btv-stats" role="list" aria-label="Live project numbers">
+          <div class="btv-stat" role="listitem">
+            <span class="btv-stat-n">{{ formatCount(totalStars) }}</span>
+            <span class="btv-stat-l">GitHub stars</span>
+          </div>
+          <div class="btv-stat" role="listitem">
+            <span class="btv-stat-n">{{ npmDownloads === null ? "—" : formatCount(npmDownloads) }}</span>
+            <span class="btv-stat-l">npm downloads / month</span>
+          </div>
+          <div class="btv-stat" role="listitem">
+            <span class="btv-stat-n">4</span>
+            <span class="btv-stat-l">packages, MIT-licensed</span>
+          </div>
         </div>
-      </div>
+      </ClientOnly>
     </section>
 
-    <section id="projects" class="btv-section">
-      <p class="btv-eyebrow">The packages</p>
-      <h2 class="btv-h2" style="margin-bottom:30px">Four libraries, one stack.</h2>
-      <div class="grid-3 btv-projects">
-        <div v-for="p in projects" :key="p.name" class="pcard btv-pcard">
-          <div class="btv-pcard-top">
-            <img :src="`${p.logo}-${isDark ? 'dark' : 'light'}.svg`" width="56" height="56" :alt="`${p.name} logo`" class="btv-logo" />
-            <span class="btv-stars">
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1.3l2.06 4.17 4.6.67-3.33 3.24.78 4.58L8 11.8l-4.11 2.16.78-4.58L1.34 6.14l4.6-.67L8 1.3z"/></svg>
-              {{ formatStars(stars[p.repoFull]) }}
+    <!-- The stack — each package in its own color -->
+    <section id="packages" class="btv-section">
+      <h2 class="btv-h2">Four libraries, one stack.</h2>
+      <p class="btv-section-lead">Messaging, workflows, errors and wiring — four focused packages that compose into one coherent backend.</p>
+      <div class="btv-panels">
+        <article v-for="p in projects" :key="p.name" class="btv-panel" :style="{ '--pkg': `var(--pkg-${p.key})` }">
+          <div class="btv-panel-top">
+            <img :src="`${p.logo}-${isDark ? 'dark' : 'light'}.svg`" width="52" height="52" :alt="`${p.name} logo`" class="btv-logo" />
+            <span class="btv-stars" :title="`${stars[p.repoFull]} GitHub stars`">
+              <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.3l2.06 4.17 4.6.67-3.33 3.24.78 4.58L8 11.8l-4.11 2.16.78-4.58L1.34 6.14l4.6-.67L8 1.3z"/></svg>
+              {{ formatCount(stars[p.repoFull]) }}
             </span>
           </div>
-          <span class="btv-tag">{{ p.tag }}</span>
+          <p class="btv-tag"><span class="btv-dot" aria-hidden="true"></span>{{ p.tag }}</p>
           <h3 class="btv-pname">{{ p.name }}</h3>
           <code class="btv-pkg">{{ p.pkg }}</code>
           <p class="btv-blurb">{{ p.blurb }}</p>
           <ul class="btv-points">
             <li v-for="pt in p.points" :key="pt">
-              <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M2.5 8.5l3 3 8-8" stroke="var(--text-green)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2.5 8.5l3 3 8-8" stroke="var(--text-green)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
               <span>{{ pt }}</span>
             </li>
           </ul>
-          <button type="button" class="codeblk btv-codeblk" :title="`Copy: ${p.install}`" @click="copy(p.install)">
+          <button type="button" class="btv-codeblk" :title="`Copy: ${p.install}`" @click="copy(p.install)">
             <span class="btv-cmd"><span class="btv-dollar">$ </span>{{ p.install }}</span>
-            <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M3.5 10.5h-1A1.5 1.5 0 0 1 1 9V2.5A1.5 1.5 0 0 1 2.5 1H9a1.5 1.5 0 0 1 1.5 1.5v1" stroke="currentColor" stroke-width="1.4"/></svg>
+            <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" stroke="currentColor" stroke-width="1.4"/><path d="M3.5 10.5h-1A1.5 1.5 0 0 1 1 9V2.5A1.5 1.5 0 0 1 2.5 1H9a1.5 1.5 0 0 1 1.5 1.5v1" stroke="currentColor" stroke-width="1.4"/></svg>
           </button>
-          <div class="btv-pcard-foot">
-            <a :href="p.repo" target="_blank" rel="noopener" class="repolink btv-foot-a">
-              <svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor"><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.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-              Repo
-            </a>
-            <a :href="p.docs" target="_blank" rel="noopener" class="repolink btv-foot-a btv-foot-muted">Docs
-              <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M5 3.5h7.5V11M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
-            </a>
+          <div class="btv-panel-links">
+            <a :href="p.docs" target="_blank" rel="noopener" class="btv-link">Docs <span aria-hidden="true">↗</span></a>
+            <a :href="p.repo" target="_blank" rel="noopener" class="btv-link btv-link--quiet">Repo <span aria-hidden="true">↗</span></a>
           </div>
+        </article>
+      </div>
+    </section>
+
+    <!-- Philosophy -->
+    <section id="philosophy" class="btv-section">
+      <h2 class="btv-h2">Expressive to read. Robust to run.</h2>
+      <p class="btv-section-lead">Each package is small, focused and does one thing well — but they share a worldview: expressive code you can understand from its signature alone, and robust code that fails fast enough to learn from.</p>
+      <div class="btv-cols">
+        <div v-for="pr in principles" :key="pr.num" class="btv-col">
+          <p class="btv-num" aria-hidden="true">{{ pr.num }}</p>
+          <h3>{{ pr.title }}</h3>
+          <p>{{ pr.body }}</p>
         </div>
       </div>
     </section>
 
-    <section id="ai" class="btv-section btv-ai">
-      <div class="btv-ai-panel">
-        <p class="btv-eyebrow">In the age of AI</p>
-        <h2 class="btv-h2 btv-ai-h2">Written with AI. Judged by the compiler.</h2>
-        <p class="btv-section-lead">None of this was invented for AI — AI just raised the stakes. When an agent writes the code, expressiveness and fail-fast stop being a matter of taste and become infrastructure.</p>
-        <div class="btv-ai-grid">
-          <div v-for="c in aiCards" :key="c.title" class="btv-ai-card">
-            <h3>{{ c.title }}</h3>
-            <p>{{ c.body }}</p>
-          </div>
+    <!-- Why now -->
+    <section id="ai" class="btv-section">
+      <h2 class="btv-h2">Written with AI. Judged by the compiler.</h2>
+      <p class="btv-section-lead">None of this was invented for AI — AI just raised the stakes. When an agent writes the code, expressiveness and fail-fast stop being a matter of taste and become infrastructure.</p>
+      <div class="btv-ai-grid">
+        <div v-for="c in aiCards" :key="c.title" class="btv-ai-card">
+          <h3>{{ c.title }}</h3>
+          <p>{{ c.body }}</p>
         </div>
       </div>
     </section>
 
-    <section class="btv-section btv-insp">
-      <p class="btv-eyebrow">Inspirations</p>
-      <h2 class="btv-h2 btv-insp-h2">Standing on good shoulders.</h2>
-      <p class="btv-section-lead">btravstack borrows its instincts from the libraries that made TypeScript feel this way in the first place.</p>
-      <div class="btv-insp-grid">
-        <a v-for="i in inspirations" :key="i.name" :href="i.href" target="_blank" rel="noopener" class="pcard btv-insp-card">
-          <span class="btv-insp-name">{{ i.name }}</span>
-          <p class="btv-insp-body">{{ i.body }}</p>
+    <!-- Inspirations -->
+    <section class="btv-section">
+      <h2 class="btv-h2">Standing on good shoulders.</h2>
+      <p class="btv-section-lead">BtravStack borrows its instincts from the libraries that made TypeScript feel this way in the first place.</p>
+      <div class="btv-insp">
+        <a v-for="z in inspirations" :key="z.name" :href="z.href" target="_blank" rel="noopener" class="btv-insp-row">
+          <span class="btv-insp-name">{{ z.name }} <span aria-hidden="true">↗</span></span>
+          <span class="btv-insp-body">{{ z.body }}</span>
         </a>
       </div>
     </section>
 
-    <section class="btv-section btv-cta-wrap">
-      <div class="btv-cta-banner">
-        <h2 class="btv-cta-h2">Build backends you can trust the types of.</h2>
-        <p class="btv-cta-p">Star the projects, open an issue, or just read the docs. Everything is MIT-licensed and built in the open.</p>
-        <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="cta-primary btv-primary-btn">View on GitHub</a>
-      </div>
+    <!-- Closing CTA -->
+    <section class="btv-section btv-close">
+      <h2 class="btv-h2">Build backends you can trust the types of.</h2>
+      <p class="btv-section-lead btv-close-p">Star the projects, open an issue, or just read the docs. Everything is MIT-licensed and built in the open.</p>
+      <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-cta btv-cta--big">View on GitHub <span aria-hidden="true">↗</span></a>
     </section>
 
+    <!-- Ft3 · index footer (genuine hub for the four docs sites) -->
     <footer class="btv-foot">
-      <div class="foot-grid btv-foot-grid">
-        <div>
+      <div class="btv-foot-grid">
+        <div class="btv-foot-brandcol">
           <div class="btv-foot-brand">
-            <svg viewBox="0 0 100 124" width="24" height="30" fill="none" aria-hidden="true" focusable="false"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"/></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"/></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"/><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"/><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"/><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"/></svg>
-            <span class="btv-word btv-foot-word"><span class="btv-pink">btrav</span><span>stack</span></span>
+            <svg viewBox="-2 -12 104 148" width="18" height="25" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-6 50 68)"><path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/><path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/><path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/><path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/><g transform="rotate(-38 16 66)"><rect x="4" y="62" width="20" height="9" rx="4.5" fill="#CE3D80"/></g><g transform="rotate(24 84 78)"><rect x="76" y="74" width="18" height="9" rx="4.5" fill="#8E1A52"/></g><path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/><path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/><path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/><circle cx="38" cy="60" r="5.2" fill="#3A0D24"/><circle cx="39.7" cy="58.3" r="1.8" fill="#FFFFFF"/><circle cx="63" cy="60" r="5.2" fill="#3A0D24"/><circle cx="64.7" cy="58.3" r="1.8" fill="#FFFFFF"/><path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/><circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/><circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/><path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/></g></svg>
+            <span class="btv-word btv-foot-word"><span class="btv-pink">Btrav</span><span>Stack</span></span>
           </div>
           <p class="btv-foot-tag">Type-safe building blocks for the TypeScript backend. Open source, MIT.</p>
         </div>
-        <div class="btv-foot-col">
-          <p class="btv-foot-h">Packages</p>
-          <a class="foot-link" href="https://github.com/btravstack/amqp-contract" target="_blank" rel="noopener">amqp-contract</a>
-          <a class="foot-link" href="https://github.com/btravstack/temporal-contract" target="_blank" rel="noopener">temporal-contract</a>
-          <a class="foot-link" href="https://github.com/btravstack/unthrown" target="_blank" rel="noopener">unthrown</a>
-          <a class="foot-link" href="https://github.com/btravstack/demesne" target="_blank" rel="noopener">demesne</a>
-        </div>
-        <div class="btv-foot-col">
+        <nav class="btv-foot-col" aria-label="Documentation">
           <p class="btv-foot-h">Docs</p>
-          <a class="foot-link" href="https://btravstack.github.io/amqp-contract/" target="_blank" rel="noopener">amqp-contract</a>
-          <a class="foot-link" href="https://btravstack.github.io/temporal-contract/" target="_blank" rel="noopener">temporal-contract</a>
-          <a class="foot-link" href="https://btravstack.github.io/unthrown/" target="_blank" rel="noopener">unthrown</a>
-          <a class="foot-link" href="https://btravstack.github.io/demesne/" target="_blank" rel="noopener">demesne</a>
-        </div>
-        <div class="btv-foot-col">
-          <p class="btv-foot-h">Org</p>
-          <a class="foot-link" href="https://github.com/btravstack" target="_blank" rel="noopener">GitHub</a>
-        </div>
+          <a v-for="p in projects" :key="p.name" :href="p.docs" target="_blank" rel="noopener" class="btv-link btv-link--quiet">{{ p.name }}</a>
+        </nav>
+        <nav class="btv-foot-col" aria-label="Source code">
+          <p class="btv-foot-h">GitHub</p>
+          <a v-for="p in projects" :key="p.name" :href="p.repo" target="_blank" rel="noopener" class="btv-link btv-link--quiet">{{ p.name }}</a>
+          <a href="https://github.com/btravstack" target="_blank" rel="noopener" class="btv-link btv-link--quiet">Organization</a>
+        </nav>
       </div>
       <div class="btv-foot-bottom">
-        <span>MIT © 2026 <a class="foot-link btv-foot-muted2" href="https://github.com/btravers" target="_blank" rel="noopener">Benoit Travers</a></span>
-        <a class="foot-link btv-foot-mono" href="https://github.com/btravers" target="_blank" rel="noopener">@btravers</a>
+        <span>MIT © 2026 <a href="https://github.com/btravers" target="_blank" rel="noopener" class="btv-link btv-link--quiet">Benoit Travers</a></span>
       </div>
     </footer>
 
     <Transition name="btv-toast">
-      <div v-if="copied" class="btv-toast" role="status" aria-live="polite">Copied&nbsp; <span class="btv-pink">{{ copied }}</span></div>
+      <div v-if="copied" class="btv-toast" role="status" aria-live="polite">Copied&nbsp; <span class="btv-toast-cmd">{{ copied }}</span></div>
     </Transition>
   </div>
 </template>
 
 <style scoped>
+/* Hallmark · genre: atmospheric (studied) · macrostructure: Ecosystem Index · design-system: design.md · designed-as-app
+ * theme: studied-DNA (source: https://tanstack.com/) · studied: yes · DNA-source: url + screenshot
+ * observed-DNA: neutral-black canvas · per-library accents · heavy grotesque display · real-stats hero · elevated panels
+ * nav: N1b three-section · footer: Ft3 index (genuine hub for 4 docs sites) · hero: wordmark-led + T4 stat strip (real numbers only)
+ * enrichment: H9 original gradient mascot (Tier-B, kept) — the one character moment
+ * contrast: pass (40–41) · honest: pass (46 — stars live from GitHub, downloads live from npm or "—") · chrome: pass (47)
+ * tokens: pass (48) · responsive: pass (49)
+ * pre-emit critique: P5 H4 E4 S5 R4 V4
+ */
 .btv {
   min-height: 100vh;
-  background: radial-gradient(1100px 560px at 50% -120px, var(--bg-grad), var(--bg) 62%);
+  background: var(--bg);
   color: var(--text);
   font-family: var(--sans);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
 }
 
-/* Landing-local scheme overlays (header/nav washes, pills, footer tint, and the
-   light card rest shadow). NB: in Vue scoped CSS a `:global(html…) .btv` selector
-   compiles to the `html…` element, so we set BOTH schemes on the two html states
-   rather than a default on `.btv` — a `.btv` default would shadow the html-level
-   value for everything inside the landing. Surfaces/text/accent themselves come
-   from the shared tokens (tokens.css). */
-:global(html.dark) .btv {
-  --btv-hover: rgba(255, 255, 255, 0.05);
-  --btv-pill: rgba(255, 255, 255, 0.04);
-  --btv-footer: rgba(0, 0, 0, 0.2);
-  --btv-ai-card: rgba(21, 16, 28, 0.55);
-  --card-rest-shadow: none;   /* dark cards: depth from the fill + hairline */
-  --glow-display: block;      /* pink hero glow — a dark-scheme signature */
-}
-:global(html:not(.dark)) .btv {
-  --btv-hover: rgba(26, 12, 20, 0.05);
-  --btv-pill: rgba(26, 12, 20, 0.035);
-  --btv-footer: rgba(26, 12, 20, 0.025);
-  --btv-ai-card: rgba(255, 255, 255, 0.6);
-  --card-rest-shadow: 0 1px 2px rgba(26, 12, 20, 0.05), 0 16px 32px -24px rgba(26, 12, 20, 0.22);
-  --glow-display: none;       /* on near-white the pink glow reads as a washed
-                                 "livid" cloud behind the wordmark — drop it */
-}
-
-/* general accent highlights (incl. the small copy toast) keep the AA text accent */
-.btv-pink { color: var(--text-accent); }
-/* the large display wordmark (hero / header / footer) stays full brand pink */
-.btv-title .btv-pink,
-.btv-word .btv-pink { color: var(--display-accent); }
-.btv-toggle {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 38px; height: 38px;
-  border: 1px solid var(--border-2); border-radius: 10px;
-  background: transparent; color: var(--muted); cursor: pointer;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-.btv-toggle:hover { color: var(--text); background: var(--btv-hover); }
+.btv-pink { color: var(--display-accent); }
 
-/* Header */
+/* ── N1b · three-section bar ──────────────────────────────────── */
 .btv-head {
   position: sticky; top: 0; z-index: 50;
   backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
   background: var(--glass);
   border-bottom: 1px solid var(--border);
 }
-.btv-head-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
-.btv-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
-.btv-word { font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--text); }
-.btv-nav { display: flex; align-items: center; gap: 4px; }
-.navlink { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 9px; transition: color .15s, background .15s; }
-.navlink:hover { color: var(--text); background: var(--btv-hover); }
-.btv-ghost-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 14px; padding: 9px 15px; border: 1px solid var(--border-2); border-radius: 10px; transition: background .15s, border-color .15s; }
-.cta-ghost:hover { background: var(--btv-hover); border-color: var(--border-2); }
-
-/* Hero */
-.btv-hero { position: relative; text-align: center; padding: 104px 28px 86px; overflow: hidden; }
-.btv-glow { display: var(--glow-display, block); position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 560px; max-width: 90vw; height: 380px; background: radial-gradient(closest-side, rgba(224,88,154,0.30), transparent 72%); filter: blur(8px); animation: glowpulse 6s ease-in-out infinite; pointer-events: none; z-index: 0; }
-.btv-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
-.btv-float { display: inline-flex; animation: floaty 6s ease-in-out infinite; filter: drop-shadow(0 18px 40px rgba(142,26,82,0.45)); }
-.btv-title { margin: 26px 0 0; font-weight: 800; letter-spacing: -2.5px; line-height: 0.95; font-size: clamp(52px, 9vw, 92px); }
-.btv-lead { margin: 22px auto 0; max-width: 560px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; line-height: 1.3; color: var(--text); }
-.btv-sub { margin: 16px auto 0; max-width: 600px; font-size: 17px; line-height: 1.6; color: var(--muted); }
-.btv-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
-.btv-primary-btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: var(--accent); color: var(--accent-contrast); font-weight: 700; font-size: 15.5px; padding: 13px 22px; border-radius: 12px; box-shadow: var(--shadow-accent); transition: filter .15s; }
-.cta-primary:hover { filter: brightness(1.07); }
-.btv-ghost-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 15.5px; padding: 13px 22px; border: 1px solid var(--border-2); border-radius: 12px; transition: background .15s, border-color .15s; }
-.btv-pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 30px; }
-.btv-pill { font-family: var(--mono); font-size: 13px; color: var(--muted); background: var(--btv-pill); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; }
-
-/* Sections */
-.btv-section { max-width: 1180px; margin: 0 auto; padding: 64px 28px 40px; }
-.btv-narrow { padding: 34px 28px 8px; }
-.btv-eyebrow { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-accent); }
-.btv-h2 { margin: 14px 0 0; font-weight: 800; letter-spacing: -1px; line-height: 1.08; font-size: clamp(28px, 4vw, 40px); }
-.btv-h2-wide { max-width: 680px; }
-.btv-section-lead { margin: 16px 0 0; max-width: 640px; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
-
-/* Philosophy — filled cards with a numbered accent chip. */
-.btv-prin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
-.btv-prin-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: var(--card-rest-shadow); }
-.btv-prin-chip { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent-wash-2); border: 1px solid var(--accent-line); color: var(--text-accent); font-family: var(--mono); font-weight: 600; font-size: 15px; }
-.btv-prin-title { margin: 16px 0 0; font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--text); }
-.btv-prin-body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
-
-/* "In the age of AI" — a bordered gradient panel with translucent inner cards. */
-.btv-ai { padding-top: 76px; padding-bottom: 0; }
-.btv-ai-panel { background: linear-gradient(120deg, rgba(142,26,82,0.30), rgba(224,88,154,0.07)); border: 1px solid var(--border-2); border-radius: 24px; padding: 46px 40px; }
-.btv-ai-h2 { max-width: 640px; font-size: clamp(26px, 3.6vw, 36px); }
-.btv-ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
-.btv-ai-card { background: var(--btv-ai-card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
-.btv-ai-card h3 { margin: 0; font-weight: 700; font-size: 17.5px; letter-spacing: -0.3px; color: var(--text); }
-.btv-ai-card p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
-
-/* Inspirations — compact link cards. */
-.btv-insp { padding-top: 64px; padding-bottom: 0; }
-.btv-insp-h2 { font-size: clamp(24px, 3.2vw, 32px); }
-.btv-insp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
-.btv-insp-card { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--card-rest-shadow); }
-.btv-insp-name { font-family: var(--mono); font-weight: 600; font-size: 15.5px; color: var(--text); }
-.btv-insp-body { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
-
-/* Project cards — four across on wide screens ("four libraries, one stack"),
-   two up on tablet, one on mobile (the .grid-3 rule below handles ≤880). */
-.btv-projects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
-@media (max-width: 1080px) { .btv-projects, .btv-insp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-.btv-pcard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 26px; box-shadow: var(--card-rest-shadow); }
-.pcard { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
-.pcard:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: var(--shadow-card); }
-.btv-pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
-.btv-logo { display: block; flex: none; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }
-.btv-tag { display: inline-flex; align-self: flex-start; align-items: center; margin-top: 20px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-accent); background: var(--accent-wash); border: 1px solid var(--accent-line); padding: 5px 10px; border-radius: 999px; }
-.btv-stars { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--faint); }
-.btv-pname { margin: 14px 0 0; font-weight: 800; font-size: 23px; letter-spacing: -0.6px; color: var(--text); }
-.btv-pkg { display: inline-block; margin: 7px 0 0; font-family: var(--mono); font-size: 13px; color: var(--text-accent); background: none; padding: 0; }
-.btv-blurb { margin: 14px 0 0; min-height: 92px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
-.btv-points { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
+.btv-head-inner {
+  max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 62px;
+  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
+}
+.btv-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; justify-self: start; }
+.btv-word { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: var(--tracking-snug); color: var(--text); white-space: nowrap; }
+.btv-links { display: flex; align-items: center; gap: 4px; justify-self: center; }
+.navlink {
+  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14.5px;
+  padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap;
+  transition: color var(--speed-fast) var(--ease), background-color var(--speed-fast) var(--ease);
+}
+.navlink:hover { color: var(--text); background: var(--accent-wash); }
+.navlink:active { color: var(--text-accent); }
+.btv-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
+.btv-toggle {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px;
+  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
+  background: transparent; color: var(--muted); cursor: pointer;
+  transition: color var(--speed-fast) var(--ease), background-color var(--speed-fast) var(--ease);
+}
+.btv-toggle:hover { color: var(--text); background: var(--accent-wash); }
+.btv-toggle:active { transform: translateY(1px); }
+
+/* ── CTAs ─────────────────────────────────────────────────────── */
+.btv-cta {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: var(--accent); color: var(--accent-contrast);
+  font-family: var(--display); font-weight: 700; font-size: 15px;
+  text-decoration: none; white-space: nowrap;
+  padding: 11px 20px; border-radius: var(--radius);
+  transition: background-color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease);
+}
+.btv-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
+.btv-cta:active { background: var(--accent-deep); color: var(--bt-cream); transform: translateY(0); }
+.btv-cta--ghost { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
+.btv-cta--ghost:hover { background: var(--accent-wash); }
+.btv-cta--ghost:active { background: var(--accent-wash-2); color: var(--text); }
+.btv-cta--nav { padding: 8px 15px; font-size: 14px; }
+.btv-cta--big { font-size: 16px; padding: 13px 26px; }
+
+/* ── Hero — wordmark-led + stats ──────────────────────────────── */
+.btv-hero { max-width: var(--container); margin: 0 auto; padding: 64px 24px 84px; }
+.btv-hero-grid {
+  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
+  gap: 40px; align-items: center;
+}
+.btv-title {
+  margin: 0;
+  font-family: var(--display); font-weight: 800;
+  font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-hero);
+  overflow-wrap: anywhere; min-width: 0;
+}
+.btv-tagline { margin: 14px 0 0; font-family: var(--display); font-weight: 600; font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--text); }
+.btv-tagline-mark { color: var(--text-accent); }
+.btv-sub { margin: 16px 0 0; max-width: 58ch; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--muted); }
+.btv-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
+.btv-float {
+  display: inline-flex; justify-self: center;
+  animation: btv-bob 6s var(--ease) infinite;
+  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--accent-deep) 45%, transparent));
+}
+.btv-stats {
+  display: flex; flex-wrap: wrap; gap: 14px 56px;
+  margin-top: 52px; padding-top: 26px;
+  border-top: 1px solid var(--border);
+}
+.btv-stat { display: flex; flex-direction: column; gap: 2px; }
+.btv-stat-n { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--text); }
+.btv-stat-l { font-size: 13px; color: var(--faint); }
+
+/* ── Sections ─────────────────────────────────────────────────── */
+.btv-section { max-width: var(--container); margin: 0 auto; padding: 64px 24px 8px; scroll-margin-top: 76px; }
+.btv-h2 {
+  margin: 0;
+  font-family: var(--display); font-weight: 800;
+  font-size: var(--fs-h2); line-height: 1.15; letter-spacing: var(--tracking-tight);
+  max-width: 26ch; overflow-wrap: anywhere; min-width: 0;
+}
+.btv-section-lead { margin: 12px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--muted); }
+
+/* ── The stack — per-package accent panels ────────────────────── */
+.btv-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
+.btv-panel {
+  display: flex; flex-direction: column;
+  background: var(--card); border-radius: var(--radius-lg); padding: 26px;
+  min-width: 0;
+  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
+}
+.btv-panel:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 32px -12px color-mix(in srgb, var(--pkg) 45%, transparent);
+}
+.btv-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.btv-logo { display: block; flex: none; width: 52px; height: 52px; object-fit: contain; }
+.btv-stars { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--faint); }
+.btv-tag {
+  margin: 16px 0 0; display: flex; align-items: center; gap: 7px;
+  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
+  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
+  color: var(--muted);
+}
+.btv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pkg); flex: none; }
+.btv-pname {
+  margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: 23px;
+  letter-spacing: var(--tracking-snug);
+  color: var(--pkg);
+  overflow-wrap: anywhere; min-width: 0;
+}
+:global(html:not(.dark)) .btv-pname { color: color-mix(in srgb, var(--pkg), #000 30%); }
+.btv-pkg { display: inline-block; margin: 5px 0 0; font-family: var(--mono); font-size: 13px; color: var(--muted); background: none; padding: 0; }
+.btv-blurb { margin: 13px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
+.btv-points { list-style: none; margin: 15px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
 .btv-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--text); }
 .btv-points svg { margin-top: 2px; flex: none; }
-.btv-codeblk { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 12.5px; background: #18121f; border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 11px 13px; color: #f5eff3; cursor: pointer; text-align: left; }
-.codeblk { transition: border-color .15s, background .15s; }
-.codeblk:hover { border-color: rgba(255,255,255,0.18); background: #20182a; }
+.btv-codeblk {
+  margin-top: 20px; width: 100%;
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  font-family: var(--mono); font-size: 12.5px;
+  background: var(--code-bg); color: var(--text);
+  border: 0; border-radius: var(--radius);
+  padding: 12px 14px; cursor: pointer; text-align: left;
+  transition: background-color var(--speed-fast) var(--ease);
+}
+.btv-codeblk:hover { background: color-mix(in srgb, var(--code-bg) 78%, var(--pkg)); }
+.btv-codeblk:active { background: color-mix(in srgb, var(--code-bg) 65%, var(--pkg)); }
 .btv-cmd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.btv-dollar { color: #ee9cc4; user-select: none; }
-.btv-pcard-foot { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
-.btv-foot-a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 14px; }
-.btv-foot-muted { color: var(--muted); }
-.repolink { transition: color .15s; }
-.repolink:hover { color: var(--text-accent); }
-
-/* CTA banner */
-.btv-cta-wrap { padding: 30px 28px 80px; }
-.btv-cta-banner { position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(142,26,82,0.35), rgba(224,88,154,0.12)); border: 1px solid var(--border-2); border-radius: 24px; padding: 46px 40px; text-align: center; }
-.btv-cta-h2 { margin: 0; font-weight: 800; letter-spacing: -0.8px; font-size: clamp(24px, 3.4vw, 34px); color: var(--text); }
-.btv-cta-p { margin: 14px auto 26px; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--muted); }
-
-/* Footer */
-.btv-foot { border-top: 1px solid var(--border); background: var(--btv-footer); }
-.btv-foot-grid { max-width: 1180px; margin: 0 auto; padding: 48px 28px 30px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
-.btv-foot-brand { display: flex; align-items: center; gap: 10px; }
-.btv-foot-word { font-size: 19px; }
-.btv-foot-tag { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--faint); max-width: 240px; }
-.btv-foot-col { display: flex; flex-direction: column; gap: 11px; }
-.btv-foot-h { margin: 0 0 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); font-weight: 700; }
-.foot-link { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .15s; }
-.foot-link:hover { color: var(--text-accent); }
-.btv-foot-bottom { max-width: 1180px; margin: 0 auto; padding: 18px 28px 34px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--faint); }
-.btv-foot-muted2 { color: var(--muted); }
-.btv-foot-mono { font-family: var(--mono); font-size: 12px; color: var(--faint); }
-
-/* Toast */
-.btv-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 80; background: var(--card-soft); border: 1px solid var(--border-2); color: var(--text); font-family: var(--mono); font-size: 13px; padding: 11px 16px; border-radius: 11px; box-shadow: var(--shadow-toast); }
-.btv-toast-enter-active, .btv-toast-leave-active { transition: opacity .2s ease, transform .2s ease; }
+.btv-dollar { color: var(--text-accent); user-select: none; }
+.btv-panel-links { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
+.btv-link {
+  display: inline-flex; align-items: baseline; gap: 5px;
+  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap;
+  transition: color var(--speed-fast) var(--ease);
+}
+.btv-link:hover { color: var(--text-accent); }
+.btv-link:active { color: var(--accent-soft); }
+.btv-link--quiet { color: var(--muted); font-weight: 500; }
+.btv-link--quiet:hover { color: var(--text-accent); }
+
+/* ── Philosophy columns ───────────────────────────────────────── */
+.btv-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
+.btv-col { background: var(--card); border-radius: var(--radius-lg); padding: 22px; }
+.btv-num { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--text-accent); }
+.btv-col h3 { margin: 10px 0 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h4); letter-spacing: var(--tracking-snug); color: var(--text); }
+.btv-col p:last-child { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
+
+/* ── Why now ──────────────────────────────────────────────────── */
+.btv-ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
+.btv-ai-card { background: var(--card-soft); border-radius: var(--radius-lg); padding: 22px; }
+.btv-ai-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 16.5px; letter-spacing: var(--tracking-snug); color: var(--text); }
+.btv-ai-card p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
+
+/* ── Inspirations ─────────────────────────────────────────────── */
+.btv-insp { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.btv-insp-row {
+  display: flex; flex-direction: column; gap: 5px;
+  background: var(--card); border-radius: var(--radius); padding: 16px 18px;
+  text-decoration: none;
+  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
+}
+.btv-insp-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); }
+.btv-insp-name { font-family: var(--mono); font-weight: 500; font-size: 14.5px; color: var(--text-accent); }
+.btv-insp-body { font-size: 14px; line-height: 1.55; color: var(--muted); }
+
+/* ── Close ────────────────────────────────────────────────────── */
+.btv-close { padding-bottom: 88px; }
+.btv-close-p { margin-bottom: 28px; }
+
+/* ── Ft3 · index footer (hub) ─────────────────────────────────── */
+.btv-foot { border-top: 1px solid var(--border); background: var(--card); }
+.btv-foot-grid {
+  max-width: var(--container); margin: 0 auto; padding: 44px 24px 26px;
+  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
+  gap: 32px;
+}
+.btv-foot-brand { display: flex; align-items: center; gap: 9px; }
+.btv-foot-word { font-size: 16px; }
+.btv-foot-tag { margin: 12px 0 0; max-width: 26ch; font-size: 13.5px; line-height: 1.6; color: var(--faint); }
+.btv-foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
+.btv-foot-h { margin: 0 0 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--faint); }
+.btv-foot-col .btv-link { font-size: 13.5px; }
+.btv-foot-bottom {
+  max-width: var(--container); margin: 0 auto; padding: 16px 24px 30px;
+  border-top: 1px solid var(--border);
+  font-size: 13px; color: var(--faint);
+}
+
+/* ── Toast (silent success) ───────────────────────────────────── */
+.btv-toast {
+  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 80;
+  background: var(--card-soft); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius);
+  font-family: var(--mono); font-size: 13px; padding: 11px 16px;
+  box-shadow: var(--shadow-toast);
+}
+.btv-toast-cmd { color: var(--text-accent); }
+.btv-toast-enter-active, .btv-toast-leave-active { transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease); }
 .btv-toast-enter-from, .btv-toast-leave-to { opacity: 0; transform: translate(-50%, 8px); }
 
-@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
-@keyframes glowpulse { 0%, 100% { opacity: .55; } 50% { opacity: .8; } }
+@keyframes btv-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
 
-@media (max-width: 880px) {
-  .grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
-  .btv-prin, .btv-ai-grid, .btv-insp-grid { grid-template-columns: minmax(0, 1fr); }
-  .btv-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
-  .btv-ai-panel { padding: 34px 24px; }
+/* ── Responsive ───────────────────────────────────────────────── */
+@media (max-width: 960px) {
+  .btv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
+  .btv-float { order: -1; justify-self: start; }
+  .btv-float svg { width: 110px; height: 136px; }
+  .btv-panels { grid-template-columns: minmax(0, 1fr); }
+  .btv-cols, .btv-ai-grid { grid-template-columns: minmax(0, 1fr); }
+  .btv-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+}
+@media (max-width: 640px) {
+  .btv-hero { padding: 44px 18px 64px; }
+  .btv-section { padding-left: 18px; padding-right: 18px; }
+  .btv-head-inner { grid-template-columns: auto 1fr; padding: 0 16px; }
+  .btv-actions { justify-self: end; }
+  .btv-stats { gap: 12px 36px; margin-top: 40px; }
+  .btv-insp { grid-template-columns: minmax(0, 1fr); }
+  .btv-foot-grid { grid-template-columns: minmax(0, 1fr); }
 }
 @media (max-width: 560px) {
   .nav-hide { display: none !important; }
-  .btv-foot-grid { grid-template-columns: minmax(0, 1fr) !important; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .btv-float, .btv-glow { animation: none; }
+  .btv-float { animation: none; }
+  .btv-cta, .btv-toggle, .btv-panel, .btv-insp-row, .btv-codeblk { transition: none; }
+  .btv-toast-enter-active, .btv-toast-leave-active { transition: opacity 0.12s var(--ease); }
+  .btv-toast-enter-from, .btv-toast-leave-to { transform: translateX(-50%); }
 }
 </style>
diff --git a/apps/website/public/favicon.svg b/apps/website/public/favicon.svg
index b7615ac..f98ed29 100644
--- a/apps/website/public/favicon.svg
+++ b/apps/website/public/favicon.svg
@@ -1,12 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="248" viewBox="0 0 100 124" fill="none">
-  <g transform="translate(50,30)">
-    <g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g>
-    <g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g>
-    <path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"></path>
-  </g>
-  <path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"></path>
-  <path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"></path>
-  <path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"></path>
-  <path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path>
-  <path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -12 104 148" width="100" height="142" fill="none"><g transform="rotate(-6 50 68)">
+    <!-- springy leaves -->
+    <path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/>
+    <path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/>
+    <path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/>
+    <path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/>
+    
+    <g transform="rotate(-38 16 66)"><rect x="4" y="62" width="20" height="9" rx="4.5" fill="#CE3D80"/></g>
+    <g transform="rotate(24 84 78)"><rect x="76" y="74" width="18" height="9" rx="4.5" fill="#8E1A52"/></g>
+    <!-- chubby body -->
+    <path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/>
+    <path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/>
+    <path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/>
+    <!-- face -->
+    
+    <circle cx="38" cy="60" r="5.2" fill="#3A0D24"/>
+    <circle cx="39.7" cy="58.3" r="1.8" fill="#FFFFFF"/>
+    <circle cx="63" cy="60" r="5.2" fill="#3A0D24"/>
+    <circle cx="64.7" cy="58.3" r="1.8" fill="#FFFFFF"/>
+    <path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <!-- curly tail -->
+    <path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/>
+  </g></svg>
diff --git a/apps/website/public/logos/amqp-contract-dark.svg b/apps/website/public/logos/amqp-contract-dark.svg
index 6f5c947..b4c2412 100644
--- a/apps/website/public/logos/amqp-contract-dark.svg
+++ b/apps/website/public/logos/amqp-contract-dark.svg
@@ -1 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="40 44 120 120" width="120" height="120" fill="none"><defs><linearGradient id="beetBody" x1="0" y1="0" x2="1" y2="0.6"><stop offset="0%" stop-color="#E45A96"></stop><stop offset="55%" stop-color="#B82E6E"></stop><stop offset="100%" stop-color="#7A1646"></stop></linearGradient><linearGradient id="leaf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#54C77B"></stop><stop offset="100%" stop-color="#2C8B4E"></stop></linearGradient><radialGradient id="beetHi" cx="35%" cy="28%" r="55%"><stop offset="0%" stop-color="#fff" stop-opacity="0.5"></stop><stop offset="100%" stop-color="#fff" stop-opacity="0"></stop></radialGradient></defs><g fill="#EFE7D8"><rect x="77" y="50" width="17" height="52" rx="8.5"></rect><rect x="106" y="50" width="17" height="52" rx="8.5"></rect><rect x="64" y="92" width="72" height="64" rx="22"></rect></g><rect x="83" y="112" width="11" height="11" rx="3.5" fill="#B82E6E"></rect><rect x="106" y="112" width="11" height="11" rx="3.5" fill="#B82E6E"></rect><line x1="92" y1="131" x2="108" y2="131" stroke="#B82E6E" stroke-width="3.4" stroke-linecap="round"></line><g transform="translate(100,133) scale(0.85) rotate(19)"><path d="M0,4 C-5.5,-6 -5.5,-18 0,-27 C5.5,-18 5.5,-6 0,4 Z" fill="url(#leaf)" transform="rotate(180)"></path><path d="M0,2 C-5,-6 -5,-16 0,-24 C5,-16 5,-6 0,2 Z" fill="url(#leaf)" transform="rotate(151)"></path><path d="M0,2 C-5,-6 -5,-16 0,-24 C5,-16 5,-6 0,2 Z" fill="url(#leaf)" transform="rotate(209)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="28 6 88 128" width="106" height="122" fill="none">
+  <g transform="rotate(-24 58 76)">
+    <rect x="50" y="22" width="17" height="58" rx="8.5" fill="#FF6600"/>
+    <rect x="54.5" y="30" width="8" height="42" rx="4" fill="#FFB380"/>
+  </g>
+  <rect x="82" y="16" width="17" height="60" rx="8.5" fill="#FF6600"/>
+  <rect x="86.5" y="24" width="8" height="44" rx="4" fill="#FFB380"/>
+  <rect x="40" y="68" width="66" height="56" rx="26" fill="#FF6600"/>
+  <circle cx="60" cy="92" r="4.6" fill="#4A1D00"/>
+  <circle cx="61.4" cy="90.6" r="1.6" fill="#FFFFFF"/>
+  <circle cx="86" cy="92" r="4.6" fill="#4A1D00"/>
+  <circle cx="87.4" cy="90.6" r="1.6" fill="#FFFFFF"/>
+  <path d="M69,100 L73,104 L77,100" stroke="#4A1D00" stroke-width="2.4" fill="none" stroke-linejoin="round" stroke-linecap="round"/>
+  <rect x="67" y="105" width="6" height="8" rx="1.8" fill="#FFFFFF"/>
+  <rect x="73.5" y="105" width="6" height="8" rx="1.8" fill="#FFFFFF"/>
+  <circle cx="49" cy="101" r="4" fill="#EE9CC4" opacity="0.8"/>
+  <circle cx="97" cy="101" r="4" fill="#EE9CC4" opacity="0.8"/>
+  <g stroke="#4A1D00" stroke-width="1.6" opacity="0.55" stroke-linecap="round">
+    <path d="M52,95 L40,92"/><path d="M52,100 L41,102"/>
+    <path d="M94,95 L106,92"/><path d="M94,100 L105,102"/>
+  </g>
+  <g transform="translate(82,112) rotate(30)">
+    <path d="M0,0 C-2,-6 -1,-12 3,-16" stroke="#2C8B4E" stroke-width="2.2" fill="none" stroke-linecap="round"/>
+    <path d="M3,-16 C-1,-19 -2,-25 2,-27 C7,-29 10,-24 9,-20 C8,-17 6,-16 3,-16 Z" fill="#3DAE62"/>
+  </g></svg>
diff --git a/apps/website/public/logos/amqp-contract-light.svg b/apps/website/public/logos/amqp-contract-light.svg
index 2aa8ee6..74ebe82 100644
--- a/apps/website/public/logos/amqp-contract-light.svg
+++ b/apps/website/public/logos/amqp-contract-light.svg
@@ -1 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="40 44 120 120" width="120" height="120" fill="none"><defs><linearGradient id="beetBody" x1="0" y1="0" x2="1" y2="0.6"><stop offset="0%" stop-color="#E45A96"></stop><stop offset="55%" stop-color="#B82E6E"></stop><stop offset="100%" stop-color="#7A1646"></stop></linearGradient><linearGradient id="leaf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#54C77B"></stop><stop offset="100%" stop-color="#2C8B4E"></stop></linearGradient><radialGradient id="beetHi" cx="35%" cy="28%" r="55%"><stop offset="0%" stop-color="#fff" stop-opacity="0.5"></stop><stop offset="100%" stop-color="#fff" stop-opacity="0"></stop></radialGradient></defs><g fill="#B82E6E"><rect x="77" y="50" width="17" height="52" rx="8.5"></rect><rect x="106" y="50" width="17" height="52" rx="8.5"></rect><rect x="64" y="92" width="72" height="64" rx="22"></rect></g><rect x="83" y="112" width="11" height="11" rx="3.5" fill="#F6EEF2"></rect><rect x="106" y="112" width="11" height="11" rx="3.5" fill="#F6EEF2"></rect><line x1="92" y1="131" x2="108" y2="131" stroke="#F6EEF2" stroke-width="3.4" stroke-linecap="round"></line><g transform="translate(100,133) scale(0.85) rotate(19)"><path d="M0,4 C-5.5,-6 -5.5,-18 0,-27 C5.5,-18 5.5,-6 0,4 Z" fill="url(#leaf)" transform="rotate(180)"></path><path d="M0,2 C-5,-6 -5,-16 0,-24 C5,-16 5,-6 0,2 Z" fill="url(#leaf)" transform="rotate(151)"></path><path d="M0,2 C-5,-6 -5,-16 0,-24 C5,-16 5,-6 0,2 Z" fill="url(#leaf)" transform="rotate(209)"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="28 6 88 128" width="106" height="122" fill="none">
+  <g transform="rotate(-24 58 76)">
+    <rect x="50" y="22" width="17" height="58" rx="8.5" fill="#C24E00"/>
+    <rect x="54.5" y="30" width="8" height="42" rx="4" fill="#F2B48C"/>
+  </g>
+  <rect x="82" y="16" width="17" height="60" rx="8.5" fill="#C24E00"/>
+  <rect x="86.5" y="24" width="8" height="44" rx="4" fill="#F2B48C"/>
+  <rect x="40" y="68" width="66" height="56" rx="26" fill="#C24E00"/>
+  <circle cx="60" cy="92" r="4.6" fill="#4A1D00"/>
+  <circle cx="61.4" cy="90.6" r="1.6" fill="#FFFFFF"/>
+  <circle cx="86" cy="92" r="4.6" fill="#4A1D00"/>
+  <circle cx="87.4" cy="90.6" r="1.6" fill="#FFFFFF"/>
+  <path d="M69,100 L73,104 L77,100" stroke="#4A1D00" stroke-width="2.4" fill="none" stroke-linejoin="round" stroke-linecap="round"/>
+  <rect x="67" y="105" width="6" height="8" rx="1.8" fill="#FFFFFF"/>
+  <rect x="73.5" y="105" width="6" height="8" rx="1.8" fill="#FFFFFF"/>
+  <circle cx="49" cy="101" r="4" fill="#EE9CC4" opacity="0.8"/>
+  <circle cx="97" cy="101" r="4" fill="#EE9CC4" opacity="0.8"/>
+  <g stroke="#4A1D00" stroke-width="1.6" opacity="0.55" stroke-linecap="round">
+    <path d="M52,95 L40,92"/><path d="M52,100 L41,102"/>
+    <path d="M94,95 L106,92"/><path d="M94,100 L105,102"/>
+  </g>
+  <g transform="translate(82,112) rotate(30)">
+    <path d="M0,0 C-2,-6 -1,-12 3,-16" stroke="#2C8B4E" stroke-width="2.2" fill="none" stroke-linecap="round"/>
+    <path d="M3,-16 C-1,-19 -2,-25 2,-27 C7,-29 10,-24 9,-20 C8,-17 6,-16 3,-16 Z" fill="#3DAE62"/>
+  </g></svg>
diff --git a/apps/website/public/logos/btravstack-dark.svg b/apps/website/public/logos/btravstack-dark.svg
index 89f4f6c..44db1a4 100644
--- a/apps/website/public/logos/btravstack-dark.svg
+++ b/apps/website/public/logos/btravstack-dark.svg
@@ -1 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="52 52 96 96" width="96" height="96" fill="none"><defs><linearGradient id="beetBody" x1="0" y1="0" x2="1" y2="0.6"><stop offset="0%" stop-color="#E45A96"></stop><stop offset="55%" stop-color="#B82E6E"></stop><stop offset="100%" stop-color="#7A1646"></stop></linearGradient><linearGradient id="leaf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#54C77B"></stop><stop offset="100%" stop-color="#2C8B4E"></stop></linearGradient><radialGradient id="beetHi" cx="35%" cy="28%" r="55%"><stop offset="0%" stop-color="#fff" stop-opacity="0.5"></stop><stop offset="100%" stop-color="#fff" stop-opacity="0"></stop></radialGradient></defs><g transform="translate(100,100) scale(0.66) translate(-50,-62)"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="url(#leaf)"></path></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="url(#leaf)"></path></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="url(#leaf)"></path></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 C62,100 83,77 83,57 C83,42 71,28 50,30 Z" fill="url(#beetBody)"></path><ellipse cx="37" cy="50" rx="9" ry="16" fill="url(#beetHi)"></ellipse><path d="M50,107 C49,114 47,118 44,122" stroke="#5e1038" stroke-width="2.6" stroke-linecap="round"></path><path d="M50,107 C51,114 53,117 56,120" stroke="#5e1038" stroke-width="2.6" stroke-linecap="round"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -12 104 148" width="96" height="137" fill="none"><g transform="rotate(-6 50 68)">
+    <!-- springy leaves -->
+    <path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/>
+    <path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/>
+    <path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/>
+    <path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/>
+    
+    <g transform="rotate(-38 16 66)"><rect x="4" y="62" width="20" height="9" rx="4.5" fill="#CE3D80"/></g>
+    <g transform="rotate(24 84 78)"><rect x="76" y="74" width="18" height="9" rx="4.5" fill="#8E1A52"/></g>
+    <!-- chubby body -->
+    <path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/>
+    <path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/>
+    <path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/>
+    <!-- face -->
+    
+    <circle cx="38" cy="60" r="5.2" fill="#3A0D24"/>
+    <circle cx="39.7" cy="58.3" r="1.8" fill="#FFFFFF"/>
+    <circle cx="63" cy="60" r="5.2" fill="#3A0D24"/>
+    <circle cx="64.7" cy="58.3" r="1.8" fill="#FFFFFF"/>
+    <path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <!-- curly tail -->
+    <path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/>
+  </g></svg>
diff --git a/apps/website/public/logos/btravstack-light.svg b/apps/website/public/logos/btravstack-light.svg
index 89f4f6c..44db1a4 100644
--- a/apps/website/public/logos/btravstack-light.svg
+++ b/apps/website/public/logos/btravstack-light.svg
@@ -1 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="52 52 96 96" width="96" height="96" fill="none"><defs><linearGradient id="beetBody" x1="0" y1="0" x2="1" y2="0.6"><stop offset="0%" stop-color="#E45A96"></stop><stop offset="55%" stop-color="#B82E6E"></stop><stop offset="100%" stop-color="#7A1646"></stop></linearGradient><linearGradient id="leaf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#54C77B"></stop><stop offset="100%" stop-color="#2C8B4E"></stop></linearGradient><radialGradient id="beetHi" cx="35%" cy="28%" r="55%"><stop offset="0%" stop-color="#fff" stop-opacity="0.5"></stop><stop offset="100%" stop-color="#fff" stop-opacity="0"></stop></radialGradient></defs><g transform="translate(100,100) scale(0.66) translate(-50,-62)"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="url(#leaf)"></path></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="url(#leaf)"></path></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="url(#leaf)"></path></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 C62,100 83,77 83,57 C83,42 71,28 50,30 Z" fill="url(#beetBody)"></path><ellipse cx="37" cy="50" rx="9" ry="16" fill="url(#beetHi)"></ellipse><path d="M50,107 C49,114 47,118 44,122" stroke="#5e1038" stroke-width="2.6" stroke-linecap="round"></path><path d="M50,107 C51,114 53,117 56,120" stroke="#5e1038" stroke-width="2.6" stroke-linecap="round"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -12 104 148" width="96" height="137" fill="none"><g transform="rotate(-6 50 68)">
+    <!-- springy leaves -->
+    <path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/>
+    <path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/>
+    <path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/>
+    <path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/>
+    
+    <g transform="rotate(-38 16 66)"><rect x="4" y="62" width="20" height="9" rx="4.5" fill="#CE3D80"/></g>
+    <g transform="rotate(24 84 78)"><rect x="76" y="74" width="18" height="9" rx="4.5" fill="#8E1A52"/></g>
+    <!-- chubby body -->
+    <path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/>
+    <path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/>
+    <path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/>
+    <!-- face -->
+    
+    <circle cx="38" cy="60" r="5.2" fill="#3A0D24"/>
+    <circle cx="39.7" cy="58.3" r="1.8" fill="#FFFFFF"/>
+    <circle cx="63" cy="60" r="5.2" fill="#3A0D24"/>
+    <circle cx="64.7" cy="58.3" r="1.8" fill="#FFFFFF"/>
+    <path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <!-- curly tail -->
+    <path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/>
+  </g></svg>
diff --git a/apps/website/public/logos/demesne-dark.svg b/apps/website/public/logos/demesne-dark.svg
index d8db6ab..76eeeac 100644
--- a/apps/website/public/logos/demesne-dark.svg
+++ b/apps/website/public/logos/demesne-dark.svg
@@ -1 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140" fill="none"><path d="M70,10 L114,24 V62 C114,94 94,114 70,128 C46,114 26,94 26,62 V24 Z" fill="rgba(239,231,216,0.05)" stroke="#EFE7D8" stroke-width="5" stroke-linejoin="round"></path><g transform="translate(70,68) scale(0.52) translate(-50,-63)"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"></path></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"></path><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"></path><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"></path><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="22 -44 96 162" width="92" height="156" fill="none">
+  <!-- peeking beet: leaves, head, eyes — drawn first, rim overlaps its chin -->
+  <g transform="translate(70,0)">
+    <path d="M-3,-16 C-5,-21 -4,-26 -1,-30" stroke="#2C8B4E" stroke-width="2.6" stroke-linecap="round" fill="none"/>
+    <path d="M-1,-30 C-5,-32 -6,-37 -2,-39 C3,-41 5,-36 4,-33 C3,-31 1,-30 -1,-30 Z" fill="#3DAE62"/>
+    <path d="M-8,-15 C-13,-19 -19,-20 -23,-17 C-27,-14 -25,-9 -20,-9 C-15,-9 -11,-12 -8,-15 Z" fill="#2C8B4E"/>
+    <path d="M7,-16 C11,-21 17,-23 21,-20 C25,-17 23,-12 18,-11 C13,-10 9,-13 7,-16 Z" fill="#3DAE62"/>
+    <path d="M0,-18 C-14,-18 -22,-9 -22,2 L22,2 C22,-9 14,-18 0,-18 Z" fill="#CE3D80"/>
+    <path d="M8,-16 C16,-12 22,-6 22,2 L13,2 C13,-5 12,-11 8,-16 Z" fill="#8E1A52" opacity="0.85"/>
+    <circle cx="-9" cy="-5" r="3.8" fill="#3A0D24"/>
+    <circle cx="-7.8" cy="-6.2" r="1.3" fill="#FFFFFF"/>
+    <circle cx="9" cy="-5" r="3.8" fill="#3A0D24"/>
+    <circle cx="10.2" cy="-6.2" r="1.3" fill="#FFFFFF"/>
+  </g>
+  <!-- flat-rim shield -->
+  <path d="M30,2 L110,2 L110,52 C110,82 94,100 70,114 C46,100 30,82 30,52 Z" fill="#B45CE0"/>
+  <path d="M38,10 L102,10 L102,52 C102,76 89,90 70,102 C51,90 38,76 38,52 Z" stroke="#D9A6F2" stroke-width="2.5" fill="none" stroke-linejoin="round"/>
+  <!-- little hands gripping the rim -->
+  <rect x="46" y="-1" width="13" height="8" rx="4" fill="#CE3D80"/>
+  <rect x="81" y="-1" width="13" height="8" rx="4" fill="#CE3D80"/></svg>
diff --git a/apps/website/public/logos/demesne-light.svg b/apps/website/public/logos/demesne-light.svg
index 0301a24..706cb57 100644
--- a/apps/website/public/logos/demesne-light.svg
+++ b/apps/website/public/logos/demesne-light.svg
@@ -1 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="140" height="140" fill="none"><path d="M70,10 L114,24 V62 C114,94 94,114 70,128 C46,114 26,94 26,62 V24 Z" fill="rgba(62,30,50,0.04)" stroke="#3E1E32" stroke-width="5" stroke-linejoin="round"></path><g transform="translate(70,68) scale(0.52) translate(-50,-63)"><g transform="translate(50,34)"><g transform="rotate(-35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><g transform="rotate(35)"><path d="M0,3 C-6,-7 -6,-18 0,-28 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><path d="M0,4 C-7,-8 -7,-20 0,-32 C7,-20 7,-8 0,4 Z" fill="#3DAE62"></path></g><path d="M50,32 C29,30 17,44 17,60 C17,79 37,99 50,107 Z" fill="#CE3D80"></path><path d="M50,32 C71,30 83,44 83,60 C83,79 63,99 50,107 Z" fill="#8E1A52"></path><path d="M31,48 C27,55 27.5,65 32,73" stroke="#EE9CC4" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.55"></path><path d="M46.5,104 C46.5,112 44,118 39,124 C47,120 52.5,112 53.5,104 Z" fill="#8E1A52"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="22 -44 96 162" width="92" height="156" fill="none">
+  <!-- peeking beet: leaves, head, eyes — drawn first, rim overlaps its chin -->
+  <g transform="translate(70,0)">
+    <path d="M-3,-16 C-5,-21 -4,-26 -1,-30" stroke="#2C8B4E" stroke-width="2.6" stroke-linecap="round" fill="none"/>
+    <path d="M-1,-30 C-5,-32 -6,-37 -2,-39 C3,-41 5,-36 4,-33 C3,-31 1,-30 -1,-30 Z" fill="#3DAE62"/>
+    <path d="M-8,-15 C-13,-19 -19,-20 -23,-17 C-27,-14 -25,-9 -20,-9 C-15,-9 -11,-12 -8,-15 Z" fill="#2C8B4E"/>
+    <path d="M7,-16 C11,-21 17,-23 21,-20 C25,-17 23,-12 18,-11 C13,-10 9,-13 7,-16 Z" fill="#3DAE62"/>
+    <path d="M0,-18 C-14,-18 -22,-9 -22,2 L22,2 C22,-9 14,-18 0,-18 Z" fill="#CE3D80"/>
+    <path d="M8,-16 C16,-12 22,-6 22,2 L13,2 C13,-5 12,-11 8,-16 Z" fill="#8E1A52" opacity="0.85"/>
+    <circle cx="-9" cy="-5" r="3.8" fill="#3A0D24"/>
+    <circle cx="-7.8" cy="-6.2" r="1.3" fill="#FFFFFF"/>
+    <circle cx="9" cy="-5" r="3.8" fill="#3A0D24"/>
+    <circle cx="10.2" cy="-6.2" r="1.3" fill="#FFFFFF"/>
+  </g>
+  <!-- flat-rim shield -->
+  <path d="M30,2 L110,2 L110,52 C110,82 94,100 70,114 C46,100 30,82 30,52 Z" fill="#8745A8"/>
+  <path d="M38,10 L102,10 L102,52 C102,76 89,90 70,102 C51,90 38,76 38,52 Z" stroke="#C08BD9" stroke-width="2.5" fill="none" stroke-linejoin="round"/>
+  <!-- little hands gripping the rim -->
+  <rect x="46" y="-1" width="13" height="8" rx="4" fill="#CE3D80"/>
+  <rect x="81" y="-1" width="13" height="8" rx="4" fill="#CE3D80"/></svg>
diff --git a/apps/website/public/logos/temporal-contract-dark.svg b/apps/website/public/logos/temporal-contract-dark.svg
index 374fc70..c39db23 100644
--- a/apps/website/public/logos/temporal-contract-dark.svg
+++ b/apps/website/public/logos/temporal-contract-dark.svg
@@ -1 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="45 47 110 110" width="110" height="110" fill="none"><rect x="64" y="56" width="72" height="10" rx="5" fill="#EFE7D8"></rect><rect x="64" y="138" width="72" height="10" rx="5" fill="#EFE7D8"></rect><path d="M72,66 C72,88 92,98 92,102 C92,106 72,116 72,138 M128,66 C128,88 108,98 108,102 C108,106 128,116 128,138" stroke="#EFE7D8" stroke-width="3.2" fill="none" stroke-linecap="round"></path><circle cx="100" cy="82" r="2.4" fill="#CE3D80"></circle><circle cx="100" cy="90" r="2" fill="#CE3D80"></circle><circle cx="100" cy="97" r="1.5" fill="#CE3D80"></circle><g transform="translate(100,124) scale(0.36) translate(-50,-62)"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"></path></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"></path><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"></path><path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"></path><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="42 26 116 148" width="100" height="128" fill="none">
+  <g transform="rotate(10 100 100)">
+    <rect x="58" y="40" width="84" height="13" rx="6.5" fill="#6B76F2"/>
+    <rect x="58" y="147" width="84" height="13" rx="6.5" fill="#6B76F2"/>
+    <path d="M70,53 C70,77 93,88 93,100 C93,112 70,123 70,147" stroke="#6B76F2" stroke-width="5.5" fill="none" stroke-linecap="round"/>
+    <path d="M130,53 C130,77 107,88 107,100 C107,112 130,123 130,147" stroke="#6B76F2" stroke-width="5.5" fill="none" stroke-linecap="round"/>
+    <circle cx="100" cy="98" r="2.4" fill="#CE3D80"/>
+    <circle cx="99" cy="107" r="2" fill="#CE3D80" opacity="0.85"/>
+    <circle cx="101" cy="115" r="1.7" fill="#CE3D80" opacity="0.7"/>
+    <!-- beet head rising in the bottom bulb, looking up at the falling sand -->
+    <g transform="translate(100,147) scale(0.82)">
+      <path d="M0,-24 C-13,-24 -20,-16 -20,-8 C-20,-3 -18,0 -16,1 L16,1 C18,0 20,-3 20,-8 C20,-16 13,-24 0,-24 Z" fill="#CE3D80"/>
+      <path d="M8,-22 C15,-19 20,-14 20,-8 C20,-4 19,-1 17,1 L10,1 C13,-6 12,-15 8,-22 Z" fill="#8E1A52" opacity="0.85"/>
+      <circle cx="-7" cy="-12" r="3.1" fill="#3A0D24"/>
+      <circle cx="-6" cy="-13" r="1.1" fill="#FFFFFF"/>
+      <circle cx="6" cy="-12" r="3.1" fill="#3A0D24"/>
+      <circle cx="7" cy="-13" r="1.1" fill="#FFFFFF"/>
+      <path d="M-4,-6 Q0,-2.5 4,-6" stroke="#3A0D24" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+      
+    </g>
+  </g></svg>
diff --git a/apps/website/public/logos/temporal-contract-light.svg b/apps/website/public/logos/temporal-contract-light.svg
index 0c88007..7cd4493 100644
--- a/apps/website/public/logos/temporal-contract-light.svg
+++ b/apps/website/public/logos/temporal-contract-light.svg
@@ -1 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="45 47 110 110" width="110" height="110" fill="none"><rect x="64" y="56" width="72" height="10" rx="5" fill="#3E1E32"></rect><rect x="64" y="138" width="72" height="10" rx="5" fill="#3E1E32"></rect><path d="M72,66 C72,88 92,98 92,102 C92,106 72,116 72,138 M128,66 C128,88 108,98 108,102 C108,106 128,116 128,138" stroke="#3E1E32" stroke-width="3.2" fill="none" stroke-linecap="round"></path><circle cx="100" cy="82" r="2.4" fill="#CE3D80"></circle><circle cx="100" cy="90" r="2" fill="#CE3D80"></circle><circle cx="100" cy="97" r="1.5" fill="#CE3D80"></circle><g transform="translate(100,124) scale(0.36) translate(-50,-62)"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"></path></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"></path><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"></path><path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"></path><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="42 26 116 148" width="100" height="128" fill="none">
+  <g transform="rotate(10 100 100)">
+    <rect x="58" y="40" width="84" height="13" rx="6.5" fill="#5058B5"/>
+    <rect x="58" y="147" width="84" height="13" rx="6.5" fill="#5058B5"/>
+    <path d="M70,53 C70,77 93,88 93,100 C93,112 70,123 70,147" stroke="#5058B5" stroke-width="5.5" fill="none" stroke-linecap="round"/>
+    <path d="M130,53 C130,77 107,88 107,100 C107,112 130,123 130,147" stroke="#5058B5" stroke-width="5.5" fill="none" stroke-linecap="round"/>
+    <circle cx="100" cy="98" r="2.4" fill="#CE3D80"/>
+    <circle cx="99" cy="107" r="2" fill="#CE3D80" opacity="0.85"/>
+    <circle cx="101" cy="115" r="1.7" fill="#CE3D80" opacity="0.7"/>
+    <!-- beet head rising in the bottom bulb, looking up at the falling sand -->
+    <g transform="translate(100,147) scale(0.82)">
+      <path d="M0,-24 C-13,-24 -20,-16 -20,-8 C-20,-3 -18,0 -16,1 L16,1 C18,0 20,-3 20,-8 C20,-16 13,-24 0,-24 Z" fill="#CE3D80"/>
+      <path d="M8,-22 C15,-19 20,-14 20,-8 C20,-4 19,-1 17,1 L10,1 C13,-6 12,-15 8,-22 Z" fill="#8E1A52" opacity="0.85"/>
+      <circle cx="-7" cy="-12" r="3.1" fill="#3A0D24"/>
+      <circle cx="-6" cy="-13" r="1.1" fill="#FFFFFF"/>
+      <circle cx="6" cy="-12" r="3.1" fill="#3A0D24"/>
+      <circle cx="7" cy="-13" r="1.1" fill="#FFFFFF"/>
+      <path d="M-4,-6 Q0,-2.5 4,-6" stroke="#3A0D24" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+      
+    </g>
+  </g></svg>
diff --git a/apps/website/public/logos/unthrown-dark.svg b/apps/website/public/logos/unthrown-dark.svg
index b49df8a..09e0d5e 100644
--- a/apps/website/public/logos/unthrown-dark.svg
+++ b/apps/website/public/logos/unthrown-dark.svg
@@ -1 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 46 108 108" width="108" height="108" fill="none"><g transform="translate(100,98) scale(0.56) translate(-50,-62)"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"></path></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"></path><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"></path><path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"></path><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path></g><circle cx="100" cy="100" r="44" fill="none" stroke="#EFE7D8" stroke-width="7"></circle><line x1="69" y1="69" x2="131" y2="131" stroke="#EFE7D8" stroke-width="7" stroke-linecap="round"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="44 44 112 112" width="108" height="108" fill="none">
+  <circle cx="100" cy="100" r="47" stroke="#46B86C" stroke-width="9.5" fill="none"/>
+  <g transform="translate(80,68) scale(0.40)"><g transform="rotate(0 50 68)">
+    <!-- springy leaves -->
+    <path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/>
+    <path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/>
+    <path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/>
+    <path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/>
+    
+    <g transform="rotate(-52 16 62)"><rect x="2" y="58" width="20" height="9" rx="4.5" fill="#CE3D80"/></g>
+    <g transform="rotate(52 84 62)"><rect x="78" y="58" width="20" height="9" rx="4.5" fill="#8E1A52"/></g>
+    <!-- chubby body -->
+    <path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/>
+    <path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/>
+    <path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/>
+    <!-- face -->
+    
+    <path d="M32,59 Q38,65 44,59" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <path d="M57,59 Q63,65 69,59" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <!-- curly tail -->
+    <path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/>
+  </g></g>
+  <path d="M67,67 L133,133" stroke="#46B86C" stroke-width="9.5" stroke-linecap="round"/></svg>
diff --git a/apps/website/public/logos/unthrown-light.svg b/apps/website/public/logos/unthrown-light.svg
index 9d0f2b3..72c5146 100644
--- a/apps/website/public/logos/unthrown-light.svg
+++ b/apps/website/public/logos/unthrown-light.svg
@@ -1 +1,26 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="46 46 108 108" width="108" height="108" fill="none"><g transform="translate(100,98) scale(0.56) translate(-50,-62)"><g transform="translate(50,30)"><g transform="rotate(-33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><g transform="rotate(33)"><path d="M0,3 C-6,-7 -6,-18 0,-27 C6,-18 6,-7 0,3 Z" fill="#2C8B4E"></path></g><path d="M0,5 C-6.5,-7 -6.5,-19 0,-30 C6.5,-19 6.5,-7 0,5 Z" fill="#3DAE62"></path></g><path d="M50,30 C29,28 17,42 17,57 C17,77 38,100 50,107 Z" fill="#CE3D80"></path><path d="M50,30 C71,28 83,42 83,57 C83,77 62,100 50,107 Z" fill="#8E1A52"></path><path d="M30,46 C26,53 27,65 33,74" stroke="#EE9CC4" stroke-width="3.2" stroke-linecap="round" opacity="0.5"></path><path d="M50,107 C49,114 47,118 44,122" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path><path d="M50,107 C51,114 53,117 56,120" stroke="#7A1646" stroke-width="2.6" stroke-linecap="round"></path></g><circle cx="100" cy="100" r="44" fill="none" stroke="#3E1E32" stroke-width="7"></circle><line x1="69" y1="69" x2="131" y2="131" stroke="#3E1E32" stroke-width="7" stroke-linecap="round"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="44 44 112 112" width="108" height="108" fill="none">
+  <circle cx="100" cy="100" r="47" stroke="#348A51" stroke-width="9.5" fill="none"/>
+  <g transform="translate(80,68) scale(0.40)"><g transform="rotate(0 50 68)">
+    <!-- springy leaves -->
+    <path d="M46,34 C44,26 44,18 47,10" stroke="#2C8B4E" stroke-width="3.6" stroke-linecap="round" fill="none"/>
+    <path d="M47,10 C40,7 37,-2 43,-6 C50,-10 56,-3 54,3 C53,7 51,9 47,10 Z" fill="#3DAE62"/>
+    <path d="M41,36 C34,31 26,30 21,34 C16,38 19,45 26,45 C32,45 38,41 41,36 Z" fill="#2C8B4E"/>
+    <path d="M57,34 C62,27 70,24 76,28 C81,32 78,39 71,40 C65,40 60,37 57,34 Z" fill="#3DAE62"/>
+    
+    <g transform="rotate(-52 16 62)"><rect x="2" y="58" width="20" height="9" rx="4.5" fill="#CE3D80"/></g>
+    <g transform="rotate(52 84 62)"><rect x="78" y="58" width="20" height="9" rx="4.5" fill="#8E1A52"/></g>
+    <!-- chubby body -->
+    <path d="M50,32 C28,31 14,45 14,62 C14,81 30,98 44,108 C47,111 48,114 50,116 C52,114 53,111 56,108 C70,98 86,81 86,62 C86,45 72,31 50,32 Z" fill="#CE3D80"/>
+    <path d="M63,35 C76,41 86,50 86,62 C86,79 73,94 58,106 C69,91 78,76 78,62 C78,51 72,42 63,35 Z" fill="#8E1A52" opacity="0.85"/>
+    <path d="M27,47 C23,53 22,61 24,68" stroke="#EE9CC4" stroke-width="3.4" stroke-linecap="round" fill="none" opacity="0.55"/>
+    <!-- face -->
+    
+    <path d="M32,59 Q38,65 44,59" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <path d="M57,59 Q63,65 69,59" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <path d="M41,71 Q50.5,80 60,71" stroke="#3A0D24" stroke-width="3.4" stroke-linecap="round" fill="none"/>
+    <circle cx="29" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <circle cx="72" cy="69" r="4.2" fill="#EE9CC4" opacity="0.75"/>
+    <!-- curly tail -->
+    <path d="M50,116 C49,121 52,124 49,129 C47,132 44,132 43,130" stroke="#8E1A52" stroke-width="2.8" stroke-linecap="round" fill="none"/>
+  </g></g>
+  <path d="M67,67 L133,133" stroke="#348A51" stroke-width="9.5" stroke-linecap="round"/></svg>
diff --git a/design.md b/design.md
new file mode 100644
index 0000000..8d37b71
--- /dev/null
+++ b/design.md
@@ -0,0 +1,150 @@
+# Design — btravstack · "Beetroot Stack" (studied DNA)
+
+A locked design system for the btravstack org (landing + `@btravstack/theme` +
+the four docs sites). Every page redesign reads this file before emitting code.
+Do not regenerate per page — extend or amend this file when the system needs to
+grow.
+
+**The idea.** Studied from the user's stated inspiration. The org is a
+*colorful stack of distinct tools* on a near-neutral black canvas: the
+beetroot pink is the ORG accent (wordmark, links, CTAs, mascot), while each
+package glows in **its own accent** — amqp orange, temporal indigo, unthrown
+green, demesne violet. Weight-contrast typography (one grotesque at 400 vs
+800), elevation through surface lightness, real numbers in the hero, and the
+gradient beetroot mascot as the one character moment.
+
+## Provenance
+
+Extracted from `https://tanstack.com/` on 2026-07-16 as a **public reference
+for the user's own brand** (user-stated inspiration). Sources: page HTML via
+WebFetch + own headless screenshot (so the rhythm pass is covered). The DNA is
+structural — macrostructure, multi-accent model, type roles, stats-hero;
+tokens below are btravstack's own, not the source's. Do not copy TanStack
+copy, artwork, or exact hues.
+
+## Genre
+
+atmospheric (studied register — dark, quiet, confident; no blooms).
+
+## Macrostructure family
+
+- Marketing pages (landing): **Ecosystem Index** — wordmark-led hero with the
+  mascot beside and a **real-stats strip** beneath (live GitHub stars, live
+  npm downloads, package count — never invented numbers), then the stack as
+  per-package-colored elevated panels, philosophy panels, "why now" cluster,
+  inspirations, closing CTA.
+- Docs sites (VitePress content): default VitePress layout wearing the theme
+  tokens — floating hero mark with a subtle halo, elevated feature cards,
+  the site's own package accent everywhere via the one-knob override.
+- Nav: **N1b three-section** — wordmark · centered links · toggle + GitHub.
+- Footer: **Ft3 index** — justified: the landing is a genuine hub for four
+  docs sites. Brand column + Docs column + GitHub column + MIT line. No
+  social row, no Legal filler.
+
+## Theme
+
+**Dark near-black is canonical**; light is the daylight fallback.
+
+| Token | Dark (canonical) | Light |
+| --- | --- | --- |
+| `--bg` (canvas) | `oklch(13% 0.006 310)` ≈ #080709 | `#FAF9FA` |
+| `--card` | `oklch(17% 0.007 310)` — elevation 1 | `#FFFFFF` |
+| `--card-soft` | `oklch(20.5% 0.008 310)` — elevation 2 | `#F0EDF0` |
+| `--text` | `oklch(95% 0.004 310)` | `#1B1218` |
+| `--accent` (org) | **#E0589A** — THE knob | same (text darkens for AA) |
+| `--pkg-amqp` | `#FF6600` | darken 30% at point of use |
+| `--pkg-temporal` | `#6B76F2` | darken 30% at point of use |
+| `--pkg-unthrown` | `#46B86C` | darken 30% at point of use |
+| `--pkg-demesne` | `#B45CE0` | darken 30% at point of use |
+
+**The multi-accent rule (the studied signature).** The canvas and chrome are
+near-neutral; color belongs to the *products*. Package names, category dots
+and panel hover-glows use the package's own accent. The org accent never
+paints package content, and package accents never paint org chrome. Each docs
+site keeps overriding only `--accent` with its package color — that IS this
+system.
+
+**Honest numbers.** The stats strip may only show live-fetched values
+(GitHub API, npm downloads API) or real baselines; unfetched values render
+as `—`, never a made-up figure.
+
+## Typography
+
+- Display + body: **Geist** — weight contrast does the branding (display
+  700/800, tracking −0.03em; body 400/500). Sentence case; never italic
+  headers; never gradient text.
+- Mono (outlier): **JetBrains Mono** — code, identifiers, tags, tabular stats.
+- Wordmark: Geist 800, "btrav" in `--display-accent` + "stack" in ink.
+
+## Spacing / shape
+
+Named px scale in `packages/theme/src/tokens.css` (`--space-1…6`). Corners:
+10–14px cards, 999px only where legacy pills remain. **No hairline card
+borders** — elevation via `--card` / `--card-soft`; 1px rules only as
+page-level dividers (stats strip, footer). Shadows: darkness at rest;
+per-package color glow on package-panel hover only.
+
+## Motion
+
+- Easings: `--ease: cubic-bezier(0.16, 1, 0.3, 1)`; durations ≤ 0.2s.
+- Three primitives: mascot bob (character moment), panel hover lift (+ the
+  package-colored shadow), copy toast. No blooms, no scroll reveals, no
+  marquees. Reduced-motion: bob stops, transitions collapse.
+
+## Microinteractions stance
+
+- Silent success (copy button → small mono toast, 1.6s).
+- Hover tooltips 800ms · focus 0ms. Focus rings instant, 2px accent.
+
+## CTA voice
+
+- Primary: accent-filled rounded rectangle (10px radius), ink text, Geist 700.
+- Secondary: outlined, transparent.
+
+## Logos
+
+The original soft gradient marks stay — mascot, rabbit, hourglass, no-throw,
+shield. They read perfectly on the near-black canvas and each sits inside its
+package-colored panel context.
+
+## What pages MUST share
+
+- The wordmark voice and the one-knob accent architecture.
+- The neutral-canvas / colored-products split (the multi-accent rule).
+- Geist + JetBrains Mono, elevation-not-borders, honest numbers.
+- Exactly one character moment (the floating mascot) per page.
+
+## What pages MAY differ on
+
+- Macrostructure within the family for future marketing pages.
+- Per-site accent hue (docs sites) — that's the system working as designed.
+- Docs sites keep VitePress's functional layout; only the dress is shared.
+
+## Exports
+
+### tokens.css
+The canonical export lives at `packages/theme/src/tokens.css` (published as
+`@btravstack/theme`). It is the single source of truth; do not duplicate here.
+
+### Quick-reference (other projects)
+```css
+:root {
+  --color-paper:   oklch(13% 0.006 310);
+  --color-ink:     oklch(95% 0.004 310);
+  --color-accent:  #E0589A;            /* org */
+  --pkg-amqp:      #FF6600;
+  --pkg-temporal:  #6B76F2;
+  --pkg-unthrown:  #46B86C;
+  --pkg-demesne:   #B45CE0;
+  --font-display:  "Geist", sans-serif; /* 800 for display */
+  --font-body:     "Geist", sans-serif;
+  --font-mono:     "JetBrains Mono", monospace;
+  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
+}
+```
+
+## Notes — anti-patterns not to carry over from the source
+
+- No embedded AI prompt-box gimmick.
+- No partner/sponsor tier walls (no such content).
+- No invented statistics — live APIs or `—`.
diff --git a/packages/theme/src/fonts.css b/packages/theme/src/fonts.css
index 39e3d6d..9e0f4b0 100644
--- a/packages/theme/src/fonts.css
+++ b/packages/theme/src/fonts.css
@@ -1,6 +1,7 @@
 /*
- * btravstack web fonts. Montserrat (display/UI) + JetBrains Mono (code).
- * Loaded from Google Fonts so the system stays zero-asset and portable;
- * the weights here match the --fw-* tokens in tokens.css.
+ * btravstack web fonts — the "Beetroot Stack" pairing (studied DNA).
+ *   Geist          (display 700/800 + body 400/500 — weight contrast does the branding)
+ *   JetBrains Mono (code + labels + tabular stats)
+ * Loaded from Google Fonts so the system stays zero-asset and portable.
  */
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
diff --git a/packages/theme/src/style.css b/packages/theme/src/style.css
index 3afaf6d..86adaaf 100644
--- a/packages/theme/src/style.css
+++ b/packages/theme/src/style.css
@@ -1,13 +1,16 @@
+/* Hallmark · genre: atmospheric · design-system: design.md · designed-as-app
+ * scope: VitePress chrome mapping for all btravstack sites (docs + landing shell)
+ */
+
 /*
- * @btravstack/theme — VitePress style entry.
+ * @btravstack/theme — VitePress style entry ("Beetroot Stack").
  *
  * Maps the btravstack design tokens onto VitePress's own `--vp-*` variables so
  * every btravstack site (the website + the docs sites) shares one look.
  * Because the semantic tokens (--bg, --text, --text-accent, …) flip per scheme
  * in tokens.css, this mapping is written once and adapts automatically:
- *   - dark  → the btravstack plum surfaces, pink links
- *   - light → clean warm-white surfaces, brand darkened to deep beetroot
- *             (--text-accent) so links/headings pass WCAG-AA on white
+ *   - dark  → the near-black stack canvas, per-site accent links (canonical)
+ *   - light → warm near-white surfaces, deep-beet links (WCAG-AA)
  *
  * The `:root:root` selector raises specificity to (0,2,0) so the mapping wins
  * over VitePress's own `:root` / `.dark` defaults regardless of load order.
@@ -38,8 +41,7 @@
   --vp-c-brand-soft: color-mix(in srgb, var(--accent) 16%, transparent);
   --vp-c-brand:      var(--text-accent); /* legacy alias */
 
-  /* Inline code — accent-as-text so it stays readable on the (scheme-aware)
-     code inset: pink on dark, deep beetroot on the light code wash */
+  /* Inline code — accent-as-text on the scheme-aware code inset */
   --vp-code-color: var(--text-accent);
   --vp-code-bg:    var(--code-bg);
 
@@ -65,92 +67,67 @@
   --vp-custom-block-warning-border: var(--accent-line);
   --vp-custom-block-warning-text:   var(--text-accent);
 
-  /* Home hero: gradient name + accent glow behind the logo */
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(120deg, var(--text-accent), var(--accent-soft));
-  --vp-home-hero-image-background-image: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
+  /* Home hero: solid ink name (no gradient text) + a warm bloom that tracks
+     the floating mark wherever the layout places it. */
+  --vp-home-hero-name-color: var(--vp-c-text-1);
+  --vp-home-hero-name-background: none;
+  --vp-home-hero-image-background-image: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
   --vp-home-hero-image-filter: blur(8px);
 }
 
-/* ── Playful flourishes — shared across every btravstack site ───── */
+/* ── Nocturne chrome — shared across every btravstack site ─────── */
+
+/* No horizontal scroll, ever (clip — not hidden — so sticky keeps working). */
+html, body { overflow-x: clip; }
 
-/* Home hero: a gently floating logo. The beetroot glow lives BEHIND the hero
-   image itself (--vp-home-hero-image-background-image, set above) so it tracks
-   the logo wherever the layout places it. We deliberately do NOT add a separate
-   centered ::before glow: the landing page uses its own bespoke layout (not
-   .VPHome), and on the docs sites the default home hero is left-aligned with the
-   image on the right — a hard-centered glow there just floats, disconnected. */
-.VPHome { overflow-x: clip; }
-.VPHero .image-container { animation: btv-floaty 6s ease-in-out infinite; }
+/* Weighty display voice on the big headings. */
+.VPHero .name,
+.VPHero .text { font-family: var(--display); letter-spacing: var(--tracking-hero); }
+.VPHero .name { font-weight: 700; }
+.VPFeature .title { letter-spacing: var(--tracking-snug); }
+.VPNavBar .title { font-weight: 700; }
+
+/* Home hero: the gently floating mark — the one character moment per page. */
+.VPHome { overflow-x: clip; position: relative; }
+.VPHero .image-container { animation: btv-floaty 6s var(--ease) infinite; }
 .VPHero .image-src { filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--accent-deep) 45%, transparent)); }
-@keyframes btv-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
-
-/* Navbar logo: VitePress's 24px mark reads as a speck next to the wordmark.
-   Size it up through VitePress's own variable (--vp-nav-logo-height) rather than
-   overriding `.logo { height }` — VitePress sets the height from a scoped
-   `:deep(.logo)` selector that out-specifies a plain `.VPNavBarTitle .logo`, so
-   the variable is the only reliable lever. Spacing stays on the logo's default
-   margin (no extra `gap`, which would compound with it).
-   Light/dark switching is left to VitePress: with `logo: { light, dark }` per
-   repo, its native .VPImage class toggle already shows the right artwork. */
+@keyframes btv-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
+
+/* Navbar logo sizing via VitePress's own variable. */
 :root:root { --vp-nav-logo-height: 34px; }
 @media (max-width: 768px) { :root:root { --vp-nav-logo-height: 28px; } }
 
-/* Home hero: tighten the display type. (The hero `image:` is one file per repo,
-   set in index.md frontmatter; for a crisp mark in both schemes make it
-   scheme-aware there — hero.image.light / hero.image.dark.) */
-.VPHero .name { letter-spacing: -1.5px; }
-.VPHero .text { letter-spacing: -0.5px; }
-
-/* Feature cards: hairline border + a soft lift on hover, echoing the landing
-   page's package cards; brand-tinted icon chip. */
+/* Feature cards: elevation through lightness + a warm glow on hover. */
 .VPFeature {
-  border: 1px solid var(--vp-c-divider);
+  border: 1px solid transparent;
   border-radius: var(--radius-lg);
-  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
 }
 .VPFeature:hover {
-  transform: translateY(-4px);
-  border-color: var(--vp-c-border);
-  box-shadow: var(--shadow-card);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-accent);
 }
 .VPFeature .icon {
   border-radius: var(--radius) !important;
   background: var(--vp-c-brand-soft) !important;
-  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
+  border: 1px solid var(--accent-line);
 }
-.VPFeature .title { letter-spacing: -0.3px; }
 
-/* Brand buttons: springy hover */
-.VPButton.brand { transition: filter 0.15s, transform 0.15s; }
-.VPButton.brand:hover { filter: brightness(1.07); transform: translateY(-1px); }
+/* Brand buttons: confident pill, quiet press. */
+.VPButton { font-weight: 600; }
+.VPButton.brand { transition: background-color var(--speed-fast) var(--ease), transform var(--speed-fast) var(--ease); }
+.VPButton.brand:hover { transform: translateY(-1px); }
+.VPButton.brand:active { transform: translateY(0); }
 
-/* Rounder, pinker code */
+/* Rounded code + admonitions. */
 .vp-doc :not(pre) > code { border-radius: 7px; }
 .vp-doc div[class*="language-"] { border-radius: var(--radius); }
 .vp-doc .custom-block { border-radius: var(--radius); }
 
-/* ── Home hero: a bigger mark + a large accent glow shape ─────────
-   The default hero only has a small glow hugging the logo; the docs
-   mockups show a broad accent wash bleeding off the top-right. */
-/* position: relative only — the existing `.VPHome { overflow-x: clip }` above
-   handles the glow's horizontal bleed; a full `overflow: clip` here would also
-   clip vertical content like the feature-card hover-lift shadows. */
-.VPHome { position: relative; }
-.VPHome::before {
-  content: "";
-  position: absolute; top: -40px; right: -120px; z-index: 0;
-  width: 620px; height: 620px; max-width: 85vw;
-  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
-  pointer-events: none;
-}
-.VPHome .VPHero,
-.VPHome .VPFeatures { position: relative; z-index: 1; }
+/* Hero mark sizing on docs homes (all project logos are square). */
 @media (min-width: 960px) {
   .VPHero .image-container { width: 340px; height: 340px; }
   .VPHero .image-bg { width: 100%; height: 100%; }
-  /* the mark ships at a small intrinsic size, so stretch it explicitly
-     (all project logos are square) rather than relying on max-width */
   .VPHero .image-src {
     width: 300px;
     height: 300px;
@@ -160,10 +137,17 @@
   }
 }
 
+/* Focus is a first-class state — instant, visible, never animated. */
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  transition: none;
+}
+
 /* ── "Part of btravstack" org-attribution strip (layout-bottom slot) ── */
 .btv-partof {
-  border-top: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
+  border-top: 1px solid var(--border);
+  background: var(--card);
   padding: 16px 24px;
   display: flex;
   justify-content: center;
@@ -176,18 +160,18 @@
   font-weight: 600;
   color: var(--vp-c-text-3);
   text-decoration: none;
-  transition: color 0.15s;
+  transition: color var(--speed-fast) var(--ease);
 }
-.btv-partof-link:hover { color: var(--vp-c-text-2); }
+.btv-partof-link:hover { color: var(--vp-c-text-1); }
 .btv-partof-link:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus);
   outline-offset: 3px;
   border-radius: 4px;
   color: var(--vp-c-text-1);
 }
 .btv-partof-mark { display: inline-flex; line-height: 0; }
 .btv-partof-word { font-weight: 700; letter-spacing: -0.3px; color: var(--vp-c-text-2); }
-.btv-partof-pink { color: var(--bt-pink); }
+.btv-partof-pink { color: var(--text-accent); }
 
 @media (prefers-reduced-motion: reduce) {
   .VPHero .image-container { animation: none; }
diff --git a/packages/theme/src/tokens.css b/packages/theme/src/tokens.css
index 5167a3a..8d34140 100644
--- a/packages/theme/src/tokens.css
+++ b/packages/theme/src/tokens.css
@@ -1,23 +1,33 @@
+/* Hallmark · genre: atmospheric (studied) · macrostructure: Ecosystem Index · design-system: design.md · designed-as-app
+ * theme: studied-DNA (source: https://tanstack.com/) · studied: yes · DNA-source: url + screenshot
+ * paper: oklch(13% 0.006 310) near-neutral black · org accent: #E0589A · per-package accents on neutral canvas
+ * observed-DNA: neutral-black canvas · multi-accent per library · heavy geometric grotesque 800 · real-stats hero
+ * display: Geist 800 · body: Geist 400 · outlier: JetBrains Mono
+ * nav: N1b three-section · footer: Ft3 index (genuine hub) · context: user-provided
+ * pre-emit critique: P5 H4 E4 S5 R4 V4
+ */
+
 /*
- * btravstack design tokens — the single source of truth.
+ * btravstack design tokens — the single source of truth ("Beetroot Stack").
  *
- * Mirrors the btravstack Design System (tokens/colors.css, themes.css,
- * typography.css, spacing.css). Reference the SEMANTIC tokens (--bg, --text,
- * --accent, --text-accent, --radius, --space-*) in app code; the raw --bt-*
- * palette underneath is the provenance, exposed so adapters (e.g. VitePress)
- * can remap freely.
+ * Studied from tanstack.com: a near-neutral black canvas where each package
+ * glows in ITS OWN accent — the org reads as a colorful stack of distinct
+ * tools, not a monochrome brand. The beetroot pink is the ORG accent
+ * (wordmark, links, org CTAs); the per-package accents (amqp orange,
+ * temporal indigo, unthrown green, demesne violet) carry the packages.
+ * Elevation through lightness, weight-contrast typography, real numbers.
  *
- * Dark is the canonical default. The light scheme overrides the semantic
- * tokens; it activates on `:root:not(.dark)` (VitePress's appearance system)
- * as well as an explicit `.light` / `[data-theme="light"]`.
+ * DARK is the canonical default. The light scheme overrides the semantic
+ * tokens; it activates on `:root:not(.dark)` (VitePress's appearance
+ * system) as well as `.light` / `[data-theme=light]`.
  *
- * Fills vs text: keep --accent / --green for FILLS (buttons, glow, washes);
- * use --text-accent / --text-green for COLORED TEXT and icons — light mode
- * darkens those to deep beetroot so links/labels pass WCAG-AA on white.
+ * Fills vs text: keep --accent / --green for FILLS (buttons, washes); use
+ * --text-accent / --text-green for COLORED TEXT and icons — light mode
+ * darkens those for WCAG-AA on white.
  */
 :root {
-  /* ── Brand palette (raw beetroot) ─────────────────────────────── */
-  --bt-pink:      #E0589A;   /* beetroot flesh — primary accent */
+  /* ── Brand palette (raw beetroot + the stack accents) ────────── */
+  --bt-pink:      #E0589A;   /* beetroot flesh — org accent */
   --bt-pink-soft: #EE9CC4;   /* highlight veins */
   --bt-magenta:   #CE3D80;   /* mid root */
   --bt-deep:      #8E1A52;   /* dark root */
@@ -26,60 +36,69 @@
   --bt-leaf-dark: #2C8B4E;   /* side leaves */
   --bt-green:     #46B86C;   /* "success" green (checks) */
   --bt-cream:     #F5EFF3;   /* near-white text */
-  --bt-ink:       #1a0c14;   /* near-black, for text on accent */
+  --bt-ink:       #16060E;   /* near-black, for text on accent */
+
+  /* The stack — official per-package accents (docs sites set these as
+     their own --accent; the landing shows them side by side). */
+  --pkg-amqp:     #FF6600;
+  --pkg-temporal: #6B76F2;
+  --pkg-unthrown: #46B86C;
+  --pkg-demesne:  #B45CE0;
 
-  /* ── Surfaces (dark scheme — the canonical btravstack look) ───── */
-  --bg:        #15101c;
-  --bg-grad:   #1b1326;   /* radial hero glow inner stop */
-  --card:      #1d1726;
-  --card-soft: #241c31;
+  /* ── Surfaces (DARK scheme — canonical: near-neutral black) ──── */
+  --bg:        oklch(13% 0.006 310);   /* ≈ #080709 — the canvas */
+  --bg-grad:   oklch(15% 0.007 310);   /* legacy alias */
+  --card:      oklch(17% 0.007 310);   /* elevation step 1 ≈ #100f12 */
+  --card-soft: oklch(20.5% 0.008 310); /* elevation step 2 ≈ #18161a */
 
-  /* ── Borders / dividers ──────────────────────────────────────── */
-  --border:   rgba(255, 255, 255, 0.08);
-  --border-2: rgba(255, 255, 255, 0.12);
+  /* ── Dividers — subtle; elevation carries structure ──────────── */
+  --border:   color-mix(in srgb, var(--text) 8%, transparent);
+  --border-2: color-mix(in srgb, var(--text) 14%, transparent);
 
   /* ── Text ────────────────────────────────────────────────────── */
-  --text:  #F5EFF3;
-  --muted: #AEA1BC;
-  --faint: #7E7290;
+  --text:  oklch(95% 0.004 310);
+  --muted: oklch(72% 0.006 310);
+  --faint: oklch(58% 0.006 310);
 
-  /* ── Accent — the single brand knob (v1.4.0) ─────────────────────
+  /* ── Org accent — the single brand knob ──────────────────────────
      Set ONE value, `--accent`, and the whole theme rebrands: the deep,
      hover, soft and wash shades below all derive from it via color-mix,
-     so a consumer site needs only `:root { --accent: #FF6600 }`. The
-     beetroot pink here is the default (the btravstack org brand); the
-     docs sites override it with their own accent.
-     (Optional finer knobs: override --text-accent for a hand-tuned
-     light-mode AA link color, or --accent-contrast for ink on the fill.) */
+     so a consumer site needs only `:root:root { --accent: #FF6600 }`.
+     The beetroot pink here is the org default; each docs site overrides
+     it with its package accent — that per-site color IS the studied
+     multi-accent system. */
   --accent:          #E0589A;   /* ← the knob */
-  --accent-contrast: #1a0c14;   /* readable text on an accent fill */
-  --accent-deep:     color-mix(in srgb, var(--accent), #000 42%);  /* deep root — active/press */
-  --accent-hover:    color-mix(in srgb, var(--accent), #000 18%);  /* button hover fill */
-  --accent-soft:     color-mix(in srgb, var(--accent) 62%, #fff);  /* highlight vein / brand-2 */
-  --accent-rgb:      224, 88, 154; /* legacy: prefer color-mix over rgba(var(--accent-rgb),…) */
+  --accent-contrast: #16060E;   /* readable text on an accent fill */
+  --accent-deep:     color-mix(in srgb, var(--accent), #000 42%);  /* active/press */
+  --accent-hover:    color-mix(in srgb, var(--accent), #000 16%);  /* fill hover */
+  --accent-soft:     color-mix(in srgb, var(--accent) 62%, #fff);  /* highlight vein */
+  --accent-rgb:      224, 88, 154; /* legacy: prefer color-mix */
   --green:           #46B86C;
   --green-rgb:       70, 184, 108;
 
-  /* ── Accent-as-TEXT (split from fill; light darkens it for AA) ─── */
-  --text-accent: var(--accent);   /* on dark plum the accent reads fine as text */
+  /* ── Accent-as-TEXT (split from fill; light darkens it for AA) ── */
+  --text-accent: var(--accent);   /* on near-black the accent reads fine as text */
   --text-green:  #46B86C;
 
-  /* Display accent — the accent as the LARGE display wordmark color in
-     both schemes (large text only needs 3:1, so it can stay fully vibrant). */
+  /* Display accent — the accent as the LARGE display wordmark color. */
   --display-accent: var(--accent);
 
-  /* ── Glass (frosted sticky headers) ──────────────────────────── */
-  --glass: rgba(21, 16, 28, 0.66);
+  /* ── Focus — instant, never animated ─────────────────────────── */
+  --focus: var(--accent);
 
-  /* ── Accent washes / lines / code inset ──────────────────────── */
-  --accent-wash:   color-mix(in srgb, var(--accent) 10%, transparent);
-  --accent-wash-2: color-mix(in srgb, var(--accent) 16%, transparent);
-  --accent-line:   color-mix(in srgb, var(--accent) 25%, transparent);
-  --code-bg:       rgba(0, 0, 0, 0.35);   /* inline code inset */
+  /* ── Glass (frosted sticky header) ───────────────────────────── */
+  --glass: color-mix(in srgb, var(--bg) 78%, transparent);
+
+  /* ── Washes / lines / code inset ─────────────────────────────── */
+  --accent-wash:   color-mix(in srgb, var(--accent) 9%, transparent);
+  --accent-wash-2: color-mix(in srgb, var(--accent) 15%, transparent);
+  --accent-line:   color-mix(in srgb, var(--accent) 26%, transparent);
+  --code-bg:       rgba(0, 0, 0, 0.45);   /* inline code inset */
 
-  /* ── Typography: families ────────────────────────────────────── */
-  --sans: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
-  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+  /* ── Typography: families (weight contrast does the branding) ── */
+  --display: 'Geist', 'Segoe UI', system-ui, sans-serif;
+  --sans:    'Geist', 'Segoe UI', system-ui, sans-serif;
+  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
 
   /* ── Typography: weights ─────────────────────────────────────── */
   --fw-medium:    500;
@@ -88,35 +107,35 @@
   --fw-extrabold: 800;
 
   /* ── Typography: display / heading scale (clamped, fluid) ─────── */
-  --fs-hero: clamp(52px, 9vw, 92px);
+  --fs-hero: clamp(44px, 6vw + 10px, 88px);
   --fs-h1:   clamp(34px, 6vw, 56px);
-  --fs-h2:   clamp(28px, 4vw, 40px);
-  --fs-h3:   23px;
-  --fs-h4:   18px;
+  --fs-h2:   clamp(26px, 3.4vw, 36px);
+  --fs-h3:   20px;
+  --fs-h4:   17px;
 
   /* ── Typography: body / UI scale ─────────────────────────────── */
-  --fs-lead:    clamp(20px, 2.6vw, 26px);
+  --fs-lead:    clamp(18px, 2.2vw, 22px);
   --fs-body-lg: 17px;
   --fs-body:    15px;
   --fs-body-sm: 14px;
   --fs-caption: 13px;
-  --fs-eyebrow: 13px;
+  --fs-eyebrow: 12px;
 
   /* ── Typography: tracking + line heights ─────────────────────── */
-  --tracking-hero:    -2.5px;
-  --tracking-tight:   -1px;
-  --tracking-snug:    -0.5px;
-  --tracking-eyebrow: 1.5px;
-  --lh-tight: 1.08;
+  --tracking-hero:    -0.03em;
+  --tracking-tight:   -0.02em;
+  --tracking-snug:    -0.01em;
+  --tracking-eyebrow: 0.08em;
+  --lh-tight: 1.06;
   --lh-snug:  1.3;
   --lh-body:  1.6;
 
   /* ── Radii ───────────────────────────────────────────────────── */
-  --radius-sm:   9px;
-  --radius:      12px;
-  --radius-lg:   16px;
-  --radius-xl:   20px;
-  --radius-2xl:  24px;
+  --radius-sm:   8px;
+  --radius:      10px;
+  --radius-lg:   14px;
+  --radius-xl:   18px;
+  --radius-2xl:  22px;
   --radius-pill: 999px;
 
   /* ── Spacing scale ───────────────────────────────────────────── */
@@ -127,51 +146,50 @@
   --space-5: 22px;
   --space-6: 28px;
 
-  /* ── Shadows ─────────────────────────────────────────────────── */
-  --shadow-card:   0 24px 60px -28px rgba(0, 0, 0, 0.8);
-  --shadow-accent: 0 12px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent);
-  --shadow-toast:  0 18px 40px -16px rgba(0, 0, 0, 0.8);
+  /* ── Shadows — depth from darkness; no glow halos ────────────── */
+  --shadow-card:   0 14px 40px -18px rgba(0, 0, 0, 0.8);
+  --shadow-accent: 0 8px 28px -10px color-mix(in srgb, var(--accent) 40%, transparent);
+  --shadow-toast:  0 14px 36px -14px rgba(0, 0, 0, 0.85);
 
   /* ── Layout & motion ─────────────────────────────────────────── */
   --container:  1180px;
   --speed-fast: 0.15s;
   --speed:      0.2s;
-  --ease:       ease;
+  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /*
- * Light scheme — warm, faintly beetroot-tinted near-whites. Only the semantic
- * tokens flip; the raw --bt-* palette is unchanged. Brand FILLS stay vibrant
- * pink (dark ink on top); accent-as-TEXT darkens to deep beetroot for AA.
+ * Light scheme — neutral near-whites for daylight readers. Only the semantic
+ * tokens flip; the raw palettes never change. Brand FILLS stay vibrant
+ * (dark ink on top); accent-as-TEXT darkens for WCAG-AA on white. Per-package
+ * colors darken via color-mix at the point of use.
  */
 :root:not(.dark),
 [data-theme="light"],
 .light {
-  --bg:        #FBF7F9;
-  --bg-grad:   #FCEDF4;
+  --bg:        #FAF9FA;
+  --bg-grad:   #F4F1F4;
   --card:      #FFFFFF;
-  --card-soft: #F0E6EC;
-
-  --border:   rgba(26, 12, 20, 0.16);
-  --border-2: rgba(26, 12, 20, 0.24);
-
-  --text:  #1F0E18;
-  --muted: #5E5159;   /* ~7.1:1 on white */
-  --faint: #766678;   /* ~5.0:1 on white (was #978996, 3.1:1 — failed AA) */
-
-  /* --accent (the FILL) is NOT overridden here — it stays the site's vibrant
-     accent in both schemes (dark ink sits on top). Only accent-as-TEXT darkens
-     for WCAG-AA on white. */
-  --text-accent: color-mix(in srgb, var(--accent), #000 22%); /* darkened accent, ~AA on white */
-  --text-green:  #15683A;   /* ~5.2:1 on white — affirmative text */
-
-  --accent-wash:   color-mix(in srgb, var(--accent) 12%, transparent);
-  --accent-wash-2: color-mix(in srgb, var(--accent) 16%, transparent);
-  --accent-line:   color-mix(in srgb, var(--accent-deep) 40%, transparent);
-  --glass:         rgba(255, 255, 255, 0.72);
-  --code-bg:       color-mix(in srgb, var(--accent) 8%, #fff);
-
-  --shadow-card:   0 18px 44px -26px color-mix(in srgb, var(--accent-deep) 55%, transparent);
-  --shadow-accent: 0 12px 26px -10px color-mix(in srgb, var(--accent) 45%, transparent);
-  --shadow-toast:  0 18px 40px -16px rgba(40, 16, 30, 0.18);
+  --card-soft: #F0EDF0;
+
+  --border:   rgba(22, 6, 14, 0.12);
+  --border-2: rgba(22, 6, 14, 0.2);
+
+  --text:  #1B1218;
+  --muted: #5D555B;
+  --faint: #766E74;
+
+  --text-accent: color-mix(in srgb, var(--accent), #000 26%); /* AA on white */
+  --text-green:  #15683A;
+  --focus:       color-mix(in srgb, var(--accent), #000 16%);
+
+  --glass: color-mix(in srgb, #ffffff 78%, transparent);
+  --accent-wash:   color-mix(in srgb, var(--accent) 10%, transparent);
+  --accent-wash-2: color-mix(in srgb, var(--accent) 15%, transparent);
+  --accent-line:   color-mix(in srgb, var(--accent-deep) 36%, transparent);
+  --code-bg:       color-mix(in srgb, var(--text) 5%, #fff);
+
+  --shadow-card:   0 14px 36px -22px rgba(22, 6, 14, 0.4);
+  --shadow-accent: 0 8px 24px -10px color-mix(in srgb, var(--accent) 35%, transparent);
+  --shadow-toast:  0 14px 32px -14px rgba(22, 6, 14, 0.25);
 }