17 files changed, 1022 insertions, 373 deletions

diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100644
index 00000000..23057315
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,6 @@
+<svg role="img" aria-label="Herdr logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+  <rect width="512" height="512" fill="#d9dad8"/>
+  <g fill="#303438" transform="translate(0 512) scale(.1 -.1)" stroke="none">
+    <path d="M2794 3710 c-129 -33 -299 -135 -359 -214 -21 -28 -26 -42 -21 -63 9 -38 154 -178 199 -192 32 -11 41 -9 104 23 171 86 354 70 475 -43 150 -138 150 -379 0 -511 -107 -95 -278 -94 -386 2 l-46 40 -11 -29 c-16 -40 -14 -122 4 -164 60 -144 264 -222 452 -174 360 92 559 494 430 868 -36 103 -81 173 -175 267 -71 72 -100 93 -180 132 -52 26 -127 54 -167 62 -96 21 -230 20 -319 -4z M2183 3695 c-116 -32 -221 -108 -273 -199 -17 -28 -30 -54 -30 -58 0 -4 20 1 45 12 66 28 220 68 294 76 64 7 65 7 137 83 40 41 71 77 69 79 -2 2 -21 8 -42 13 -55 12 -140 10 -200 -6z M2212 3388 c-159 -22 -390 -122 -559 -241 -299 -210 -585 -600 -609 -828 -12 -118 40 -251 125 -318 96 -76 178 -98 426 -116 110 -8 224 -21 254 -29 125 -34 230 -115 272 -211 11 -24 24 -81 30 -127 20 -170 65 -271 166 -374 34 -35 63 -65 63 -67 0 -1 -10 -27 -22 -57 -29 -76 -37 -259 -14 -350 42 -170 158 -318 311 -397 44 -23 98 -46 120 -52 22 -6 45 -14 51 -18 5 -5 15 -48 22 -96 6 -48 14 -92 17 -97 4 -6 415 -10 1131 -10 l1124 0 0 1584 0 1585 -55 -19 c-84 -29 -143 -68 -232 -154 l-83 -78 -54 49 c-111 102 -233 151 -391 160 -113 6 -199 -10 -298 -54 l-60 -27 -26 34 c-37 51 -120 134 -127 128 -3 -4 0 -34 7 -67 17 -89 7 -268 -21 -356 -103 -328 -377 -545 -688 -545 -161 0 -273 41 -373 137 -37 35 -66 75 -85 116 -79 173 -8 407 124 407 44 0 68 -14 117 -66 74 -78 167 -82 238 -9 60 62 72 147 33 231 -42 90 -120 130 -238 122 -50 -4 -85 -14 -131 -37 -89 -45 -122 -52 -176 -40 -92 20 -262 163 -302 253 -11 25 -21 45 -22 45 -1 -1 -30 -6 -65 -11z m-256 -505 c115 -88 129 -102 132 -131 2 -18 -2 -40 -9 -49 -7 -8 -69 -55 -138 -105 -103 -73 -130 -88 -151 -83 -35 8 -51 34 -48 74 3 31 12 42 83 92 44 31 80 61 82 66 1 4 -30 31 -69 58 -39 28 -77 56 -85 63 -18 19 -16 72 4 94 32 35 63 23 199 -79z m528 -88 c23 -24 28 -52 14 -82 l-13 -28 -141 -3 c-130 -2 -142 -1 -158 17 -23 26 -24 66 -1 91 16 18 32 20 151 20 105 0 136 -3 148 -15z"/>
+  </g>
+</svg>
diff --git a/website/assets/favicon.png b/website/assets/favicon.png
new file mode 100644
index 00000000..a1d7a4eb
--- /dev/null
+++ b/website/assets/favicon.png
diff --git a/website/assets/favicon.svg b/website/assets/favicon.svg
new file mode 100644
index 00000000..23057315
--- /dev/null
+++ b/website/assets/favicon.svg
@@ -0,0 +1,6 @@
+<svg role="img" aria-label="Herdr logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+  <rect width="512" height="512" fill="#d9dad8"/>
+  <g fill="#303438" transform="translate(0 512) scale(.1 -.1)" stroke="none">
+    <path d="M2794 3710 c-129 -33 -299 -135 -359 -214 -21 -28 -26 -42 -21 -63 9 -38 154 -178 199 -192 32 -11 41 -9 104 23 171 86 354 70 475 -43 150 -138 150 -379 0 -511 -107 -95 -278 -94 -386 2 l-46 40 -11 -29 c-16 -40 -14 -122 4 -164 60 -144 264 -222 452 -174 360 92 559 494 430 868 -36 103 -81 173 -175 267 -71 72 -100 93 -180 132 -52 26 -127 54 -167 62 -96 21 -230 20 -319 -4z M2183 3695 c-116 -32 -221 -108 -273 -199 -17 -28 -30 -54 -30 -58 0 -4 20 1 45 12 66 28 220 68 294 76 64 7 65 7 137 83 40 41 71 77 69 79 -2 2 -21 8 -42 13 -55 12 -140 10 -200 -6z M2212 3388 c-159 -22 -390 -122 -559 -241 -299 -210 -585 -600 -609 -828 -12 -118 40 -251 125 -318 96 -76 178 -98 426 -116 110 -8 224 -21 254 -29 125 -34 230 -115 272 -211 11 -24 24 -81 30 -127 20 -170 65 -271 166 -374 34 -35 63 -65 63 -67 0 -1 -10 -27 -22 -57 -29 -76 -37 -259 -14 -350 42 -170 158 -318 311 -397 44 -23 98 -46 120 -52 22 -6 45 -14 51 -18 5 -5 15 -48 22 -96 6 -48 14 -92 17 -97 4 -6 415 -10 1131 -10 l1124 0 0 1584 0 1585 -55 -19 c-84 -29 -143 -68 -232 -154 l-83 -78 -54 49 c-111 102 -233 151 -391 160 -113 6 -199 -10 -298 -54 l-60 -27 -26 34 c-37 51 -120 134 -127 128 -3 -4 0 -34 7 -67 17 -89 7 -268 -21 -356 -103 -328 -377 -545 -688 -545 -161 0 -273 41 -373 137 -37 35 -66 75 -85 116 -79 173 -8 407 124 407 44 0 68 -14 117 -66 74 -78 167 -82 238 -9 60 62 72 147 33 231 -42 90 -120 130 -238 122 -50 -4 -85 -14 -131 -37 -89 -45 -122 -52 -176 -40 -92 20 -262 163 -302 253 -11 25 -21 45 -22 45 -1 -1 -30 -6 -65 -11z m-256 -505 c115 -88 129 -102 132 -131 2 -18 -2 -40 -9 -49 -7 -8 -69 -55 -138 -105 -103 -73 -130 -88 -151 -83 -35 8 -51 34 -48 74 3 31 12 42 83 92 44 31 80 61 82 66 1 4 -30 31 -69 58 -39 28 -77 56 -85 63 -18 19 -16 72 4 94 32 35 63 23 199 -79z m528 -88 c23 -24 28 -52 14 -82 l-13 -28 -141 -3 c-130 -2 -142 -1 -158 17 -23 26 -24 66 -1 91 16 18 32 20 151 20 105 0 136 -3 148 -15z"/>
+  </g>
+</svg>
diff --git a/website/assets/hero-screenshot.png b/website/assets/hero-screenshot.png
deleted file mode 100644
index f1c09c1a..00000000
--- a/website/assets/hero-screenshot.png
+++ /dev/null
diff --git a/website/assets/hero-session.png b/website/assets/hero-session.png
new file mode 100644
index 00000000..eec11b78
--- /dev/null
+++ b/website/assets/hero-session.png
diff --git a/website/assets/logo.svg b/website/assets/logo.svg
new file mode 100644
index 00000000..23057315
--- /dev/null
+++ b/website/assets/logo.svg
@@ -0,0 +1,6 @@
+<svg role="img" aria-label="Herdr logo" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+  <rect width="512" height="512" fill="#d9dad8"/>
+  <g fill="#303438" transform="translate(0 512) scale(.1 -.1)" stroke="none">
+    <path d="M2794 3710 c-129 -33 -299 -135 -359 -214 -21 -28 -26 -42 -21 -63 9 -38 154 -178 199 -192 32 -11 41 -9 104 23 171 86 354 70 475 -43 150 -138 150 -379 0 -511 -107 -95 -278 -94 -386 2 l-46 40 -11 -29 c-16 -40 -14 -122 4 -164 60 -144 264 -222 452 -174 360 92 559 494 430 868 -36 103 -81 173 -175 267 -71 72 -100 93 -180 132 -52 26 -127 54 -167 62 -96 21 -230 20 -319 -4z M2183 3695 c-116 -32 -221 -108 -273 -199 -17 -28 -30 -54 -30 -58 0 -4 20 1 45 12 66 28 220 68 294 76 64 7 65 7 137 83 40 41 71 77 69 79 -2 2 -21 8 -42 13 -55 12 -140 10 -200 -6z M2212 3388 c-159 -22 -390 -122 -559 -241 -299 -210 -585 -600 -609 -828 -12 -118 40 -251 125 -318 96 -76 178 -98 426 -116 110 -8 224 -21 254 -29 125 -34 230 -115 272 -211 11 -24 24 -81 30 -127 20 -170 65 -271 166 -374 34 -35 63 -65 63 -67 0 -1 -10 -27 -22 -57 -29 -76 -37 -259 -14 -350 42 -170 158 -318 311 -397 44 -23 98 -46 120 -52 22 -6 45 -14 51 -18 5 -5 15 -48 22 -96 6 -48 14 -92 17 -97 4 -6 415 -10 1131 -10 l1124 0 0 1584 0 1585 -55 -19 c-84 -29 -143 -68 -232 -154 l-83 -78 -54 49 c-111 102 -233 151 -391 160 -113 6 -199 -10 -298 -54 l-60 -27 -26 34 c-37 51 -120 134 -127 128 -3 -4 0 -34 7 -67 17 -89 7 -268 -21 -356 -103 -328 -377 -545 -688 -545 -161 0 -273 41 -373 137 -37 35 -66 75 -85 116 -79 173 -8 407 124 407 44 0 68 -14 117 -66 74 -78 167 -82 238 -9 60 62 72 147 33 231 -42 90 -120 130 -238 122 -50 -4 -85 -14 -131 -37 -89 -45 -122 -52 -176 -40 -92 20 -262 163 -302 253 -11 25 -21 45 -22 45 -1 -1 -30 -6 -65 -11z m-256 -505 c115 -88 129 -102 132 -131 2 -18 -2 -40 -9 -49 -7 -8 -69 -55 -138 -105 -103 -73 -130 -88 -151 -83 -35 8 -51 34 -48 74 3 31 12 42 83 92 44 31 80 61 82 66 1 4 -30 31 -69 58 -39 28 -77 56 -85 63 -18 19 -16 72 4 94 32 35 63 23 199 -79z m528 -88 c23 -24 28 -52 14 -82 l-13 -28 -141 -3 c-130 -2 -142 -1 -158 17 -23 26 -24 66 -1 91 16 18 32 20 151 20 105 0 136 -3 148 -15z"/>
+  </g>
+</svg>
diff --git a/website/assets/og-card-v2.png b/website/assets/og-card-v2.png
index 42edffee..b07c660b 100644
--- a/website/assets/og-card-v2.png
+++ b/website/assets/og-card-v2.png
diff --git a/website/assets/og-card.png b/website/assets/og-card.png
index 85d4e602..b07c660b 100644
--- a/website/assets/og-card.png
+++ b/website/assets/og-card.png
diff --git a/website/assets/sidebar-agents.png b/website/assets/sidebar-agents.png
index 06e03fb2..e858e334 100644
--- a/website/assets/sidebar-agents.png
+++ b/website/assets/sidebar-agents.png
diff --git a/website/assets/sidebar-workspaces.png b/website/assets/sidebar-workspaces.png
index 2d5aa629..e2ef0c3e 100644
--- a/website/assets/sidebar-workspaces.png
+++ b/website/assets/sidebar-workspaces.png
diff --git a/website/assets/terminal-panes.png b/website/assets/terminal-panes.png
new file mode 100644
index 00000000..dbaa8fb9
--- /dev/null
+++ b/website/assets/terminal-panes.png
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 82fd4ee6..4d34b7a4 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -52,10 +52,10 @@ export default defineConfig({
   integrations: [
     starlight({
       title: 'herdr',
-      description: 'Terminal multiplexer for AI coding agents.',
-      favicon: '/assets/logo.png',
+      description: 'Terminal-native agent runtime and multiplexer.',
+      favicon: '/assets/favicon.png',
       logo: {
-        src: './public/assets/logo.png',
+        src: './public/assets/logo.svg',
         alt: 'herdr',
       },
       social: [
diff --git a/website/css/style.css b/website/css/style.css
index 44e9516e..73fa272a 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -14,6 +14,8 @@
     --bg-soft: #efe8dc;
     --paper: #fffdf8;
     --paper-muted: #f6f0e6;
+    --grass: #e3f3d0;
+    --wool: #fff8e9;
     --ink: #151a21;
     --ink-soft: #303944;
     --muted: #687381;
@@ -61,9 +63,9 @@ body {
     margin: 0;
     min-width: 320px;
     background:
-        radial-gradient(circle at 10% 0%, rgb(31 111 104 / 0.16), transparent 30rem),
-        radial-gradient(circle at 90% 4rem, rgb(37 99 235 / 0.12), transparent 28rem),
-        linear-gradient(180deg, #fbf8f1 0%, var(--bg) 24rem);
+        radial-gradient(circle at 12% 0%, rgb(47 138 79 / 0.17), transparent 30rem),
+        radial-gradient(circle at 92% 4rem, rgb(37 99 235 / 0.1), transparent 28rem),
+        linear-gradient(180deg, #fbf8f1 0%, var(--bg) 36rem, var(--grass) 100%);
 }
 
 body::before {
@@ -140,10 +142,50 @@ samp {
 }
 
 .brand img {
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-    box-shadow: 0 8px 24px rgb(21 26 33 / 0.12);
+    width: 38px;
+    height: 38px;
+    border: 1px solid rgb(201 189 173 / 0.76);
+    border-radius: 13px;
+    background: #d9dad8;
+    box-shadow: 0 10px 28px rgb(21 26 33 / 0.13);
+}
+
+.brand-logo {
+    cursor: context-menu;
+}
+
+.logo-menu {
+    position: fixed;
+    z-index: 1000;
+    min-width: 170px;
+    padding: 0.35rem;
+    border: 1px solid var(--line-strong);
+    border-radius: 16px;
+    background: rgb(255 253 248 / 0.96);
+    box-shadow: 0 22px 70px rgb(21 26 33 / 0.18);
+    backdrop-filter: blur(14px);
+}
+
+.logo-menu a,
+.logo-menu button {
+    display: block;
+    width: 100%;
+    border: 0;
+    border-radius: 11px;
+    background: transparent;
+    color: var(--ink-soft);
+    padding: 0.62rem 0.7rem;
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-align: left;
+    cursor: pointer;
+}
+
+.logo-menu a:hover,
+.logo-menu button:hover {
+    background: var(--accent-soft);
+    color: var(--accent-dark);
 }
 
 .nav-links {
@@ -193,12 +235,42 @@ samp {
 }
 
 .hero {
+    position: relative;
+    max-width: 1280px;
     display: grid;
-    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
+    grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.22fr);
     gap: 3.25rem;
     align-items: center;
     padding-top: 6.25rem;
     padding-bottom: 3.75rem;
+    overflow: hidden;
+}
+
+.hero-copy,
+.hero-product-shot {
+    position: relative;
+    z-index: 1;
+}
+
+.hero-pasture {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+    user-select: none;
+}
+
+.hero-pasture .sheep-el {
+    position: absolute;
+    margin: 0;
+    font-family: var(--mono);
+    font-weight: 700;
+    line-height: 1.08;
+    white-space: pre;
+    pointer-events: none;
+    user-select: none;
+    will-change: transform;
 }
 
 .eyebrow,
@@ -225,7 +297,7 @@ samp {
 
 .hero h1 {
     max-width: 760px;
-    font-size: clamp(3.2rem, 8vw, 6.7rem);
+    font-size: clamp(3.2rem, 6.4vw, 5.7rem);
 }
 
 .hero-lede {
@@ -368,182 +440,287 @@ samp {
     font-size: 0.9rem;
 }
 
-.hero-panel {
+.hero-product-shot {
+    margin: 0;
+    transform: rotate(1.1deg);
+}
+
+.hero-product-shell {
+    overflow: hidden;
     border-radius: var(--radius-lg);
-    background:
-        linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent),
-        var(--terminal);
-    color: #d8e3ed;
-    padding: 1rem;
-    box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.08);
-    transform: rotate(1.25deg);
+    background: var(--terminal);
+    box-shadow:
+        var(--shadow),
+        0 0 0 1px rgb(21 26 33 / 0.1),
+        0 36px 120px rgb(21 26 33 / 0.18);
+}
+
+.hero-product-shell img {
+    width: 100%;
+    aspect-ratio: 2560 / 1401;
+    object-fit: cover;
 }
 
-.panel-chrome {
+.hero-product-shot figcaption {
+    margin-top: 0.85rem;
+    color: var(--muted);
+    font-size: 0.84rem;
+    text-align: center;
+}
+
+.herdr-ui-mock {
+    display: grid;
+    grid-template-columns: minmax(120px, 17%) minmax(0, 1fr);
+    overflow: hidden;
+    aspect-ratio: 2560 / 1401;
+    border-radius: var(--radius-lg);
+    background: #20262f;
+    color: #b9c3d0;
+    font-family: var(--mono);
+    font-size: clamp(0.44rem, 0.72vw, 0.64rem);
+    line-height: 1.38;
+    pointer-events: none;
+    user-select: none;
+    box-shadow:
+        var(--shadow),
+        0 0 0 1px rgb(21 26 33 / 0.1),
+        0 36px 120px rgb(21 26 33 / 0.18);
+}
+
+.mock-sidebar {
     display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-right: 1px solid #2b333f;
+    background: #1c222b;
+}
+
+.mock-sidebar-title {
+    padding: 0.5rem 0.7rem;
+    color: #727d8d;
+    font-weight: 700;
+}
+
+.mock-space {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
     gap: 0.45rem;
-    padding: 0.2rem 0.2rem 0.9rem;
+    align-items: start;
+    padding: 0.55rem 0.7rem;
+    color: #aeb8c6;
 }
 
-.panel-chrome span {
-    width: 0.72rem;
-    height: 0.72rem;
-    border-radius: 50%;
-    background: #45515f;
+.mock-space.active {
+    background: #282f3a;
+}
+
+.mock-space strong,
+.mock-agent strong {
+    display: block;
+    overflow: hidden;
+    color: #c8d1dd;
+    font-weight: 700;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.mock-space small,
+.mock-agent small {
+    display: block;
+    overflow: hidden;
+    margin-top: 0.16rem;
+    color: #6e7788;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.panel-chrome span:nth-child(1) {
-    background: #ee6a72;
+.mock-space.active small {
+    color: #d676ff;
 }
 
-.panel-chrome span:nth-child(2) {
-    background: #e4b64b;
+.mock-dot {
+    width: 0.38rem;
+    height: 0.38rem;
+    margin-top: 0.25rem;
+    border-radius: 50%;
 }
 
-.panel-chrome span:nth-child(3) {
-    background: #5cc071;
+.mock-sidebar-spacer {
+    flex: 1;
+    min-height: 4rem;
 }
 
-.panel-title {
+.mock-sidebar-row,
+.mock-agent-title {
     display: flex;
     justify-content: space-between;
-    gap: 1rem;
-    padding: 0.7rem 0.85rem;
-    border-radius: 14px;
-    background: var(--terminal-2);
-    font-family: var(--mono);
-    font-size: 0.82rem;
+    padding: 0.45rem 0.7rem;
+    border-top: 1px solid #2b333f;
+    color: #727d8d;
+    font-weight: 700;
 }
 
-.panel-title span:last-child {
-    color: #8fa0b2;
+.mock-agent-title {
+    border-top: 0;
+    text-transform: lowercase;
 }
 
-.workspace-list,
-.agent-list {
-    margin-top: 0.9rem;
-    border: 1px solid rgb(255 255 255 / 0.08);
-    border-radius: 18px;
-    overflow: hidden;
+.mock-agent {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.4rem;
+    padding: 0.38rem 0.7rem;
 }
 
-.workspace {
+.mock-agent > span {
+    color: #a6e3a1;
+    line-height: 1.1;
+}
+
+.mock-agent > div {
+    min-width: 0;
+}
+
+.mock-agent.working > span,
+.mock-agent.working small {
+    color: #f4c76e;
+}
+
+.mock-agent.blocked > span,
+.mock-agent.blocked small {
+    color: #f07187;
+}
+
+.mock-agent.done > span,
+.mock-agent.done small {
+    color: #5ec8d8;
+}
+
+.mock-main {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto minmax(0, 1fr);
+    min-width: 0;
+}
+
+.mock-tabs {
+    display: flex;
     align-items: center;
-    gap: 0.72rem;
-    padding: 0.82rem 0.9rem;
-    border-bottom: 1px solid rgb(255 255 255 / 0.07);
-    font-family: var(--mono);
-    font-size: 0.82rem;
+    height: 1.35rem;
+    background: #282f3a;
+    color: #6f7888;
 }
 
-.workspace:last-child {
-    border-bottom: 0;
+.mock-tabs span {
+    min-width: 4.6rem;
+    padding: 0.24rem 0.7rem;
+    border-right: 1px solid #252c36;
 }
 
-.workspace.active {
-    background: rgb(103 215 202 / 0.08);
+.mock-tabs span.active {
+    background: #66b9f2;
+    color: #111820;
+    font-weight: 800;
 }
 
-.number {
-    color: #788697;
+.mock-tabs span:last-child {
+    min-width: 2rem;
 }
 
-.label {
+.mock-panes {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0.45rem;
+    min-height: 0;
+    padding: 0.45rem;
+}
+
+.mock-pane {
+    min-width: 0;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    border: 1px solid #58616f;
+    background: #20262f;
+    padding: 0.75rem;
 }
 
-.status-pill {
-    border-radius: 999px;
-    padding: 0.18rem 0.48rem;
-    font-size: 0.68rem;
+.mock-pane.focused {
+    border: 2px solid #61b7f4;
+    padding: calc(0.75rem - 1px);
+}
+
+.mock-prompt {
+    margin-bottom: 0.25rem;
+    color: #67c7ff;
+    font-size: 1.08em;
     font-weight: 700;
 }
 
-.pill-blocked {
-    color: #ffd9e1;
-    background: rgb(196 63 95 / 0.28);
+.mock-prompt em {
+    color: #8b929f;
+    font-style: normal;
+    font-weight: 500;
 }
 
-.pill-working {
-    color: #ffecc0;
-    background: rgb(216 154 0 / 0.22);
+.mock-pane b {
+    color: #d276ff;
 }
 
-.pill-done {
-    color: #dce7ff;
-    background: rgb(37 99 235 / 0.26);
+.herdr-ui-mock .cmd {
+    color: #9ed987;
 }
 
-.agent-list {
-    padding: 0.9rem;
-    color: #c6d1dd;
-    font-family: var(--mono);
-    font-size: 0.8rem;
+.herdr-ui-mock .str {
+    color: #f4c76e;
 }
 
-.agent-list p {
-    margin: 0 0 0.7rem;
-    color: #8fa0b2;
-    font-family: var(--sans);
-    font-size: 0.72rem;
-    font-weight: 750;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
+.herdr-ui-mock pre {
+    margin: 0.55rem 0 0.75rem;
+    color: #c3ccd7;
+    white-space: pre;
 }
 
-.agent-list div {
-    display: flex;
-    align-items: center;
-    gap: 0.55rem;
-    padding: 0.35rem 0;
+.herdr-ui-mock .dim,
+.herdr-ui-mock .time {
+    color: #818b9a;
 }
 
-.terminal-line {
-    margin-top: 0.9rem;
-    padding: 0.82rem 0.9rem;
-    border-radius: 14px;
-    background: #0f1319;
-    color: #a8b4c2;
-    font-family: var(--mono);
-    font-size: 0.72rem;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.herdr-ui-mock .blue,
+.herdr-ui-mock .url-line span {
+    color: #5ec8ff;
 }
 
-.demo-section {
-    padding-top: 0;
-    padding-bottom: 6rem;
+.herdr-ui-mock .green {
+    color: #a6e3a1;
 }
 
-.demo-frame {
-    position: relative;
-    overflow: hidden;
-    border-radius: 30px;
-    background: var(--terminal);
-    box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08);
+.herdr-ui-mock .badge {
+    display: inline-block;
+    padding: 0.12rem 0.5rem;
+    background: #95d581;
+    color: #49605a;
+    font-weight: 800;
 }
 
-.demo-frame::before {
-    content: "";
-    display: block;
-    height: 2.4rem;
-    background:
-        radial-gradient(circle at 1.4rem 50%, #ee6a72 0 0.38rem, transparent 0.4rem),
-        radial-gradient(circle at 2.65rem 50%, #e4b64b 0 0.38rem, transparent 0.4rem),
-        radial-gradient(circle at 3.9rem 50%, #5cc071 0 0.38rem, transparent 0.4rem),
-        var(--terminal-2);
-    border-bottom: 1px solid rgb(255 255 255 / 0.08);
+.cursor {
+    display: inline-block;
+    width: 0.45rem;
+    height: 0.95rem;
+    background: #c8d1dd;
+    vertical-align: -0.16rem;
+}
+
+.demo-section {
+    padding-top: 0;
+    padding-bottom: 6rem;
 }
 
-.demo-frame video {
+.demo-video {
     width: 100%;
+    overflow: hidden;
     aspect-ratio: 16 / 9;
+    border-radius: 28px;
+    background: var(--terminal);
     object-fit: cover;
+    box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08);
 }
 
 .section {
@@ -556,6 +733,42 @@ samp {
     padding-top: 3rem;
 }
 
+.intro-section .section-heading-wide h2 {
+    max-width: 760px;
+}
+
+.contrast-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.85rem;
+    margin-top: 2rem;
+}
+
+.contrast-grid article {
+    min-height: 150px;
+    padding: 1.1rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    background: rgb(255 253 248 / 0.64);
+    box-shadow: 0 16px 50px rgb(35 29 21 / 0.05);
+}
+
+.contrast-grid span {
+    display: block;
+    color: var(--accent-dark);
+    font-family: var(--mono);
+    font-size: 0.74rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.contrast-grid p {
+    margin: 0.85rem 0 0;
+    color: var(--ink-soft);
+    line-height: 1.6;
+}
+
 .section-heading,
 .section-heading-wide {
     margin-bottom: 2rem;
@@ -603,7 +816,7 @@ samp {
 }
 
 .pillar-card {
-    min-height: 270px;
+    min-height: 235px;
     padding: 1.35rem;
     display: flex;
     flex-direction: column;
@@ -633,7 +846,7 @@ samp {
 .pillar-card p,
 .access-card p,
 .awareness-card p {
-    margin: auto 0 0;
+    margin: 0.9rem 0 0;
     color: var(--muted);
     line-height: 1.65;
 }
@@ -694,9 +907,7 @@ samp {
 
 .screenshot-card img {
     width: 100%;
-    height: 430px;
-    object-fit: cover;
-    object-position: 52% 42%;
+    height: auto;
 }
 
 .access-grid {
@@ -706,9 +917,30 @@ samp {
 }
 
 .access-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 360px;
+    overflow: hidden;
     padding: 1.25rem;
 }
 
+.access-card::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto;
+    height: 4px;
+    background: var(--accent);
+}
+
+.access-card:nth-child(2)::before {
+    background: var(--blue);
+}
+
+.access-card:nth-child(3)::before {
+    background: var(--yellow);
+}
+
 .access-label {
     color: var(--accent-dark);
     font-size: 0.72rem;
@@ -726,22 +958,49 @@ samp {
 }
 
 .access-card pre {
-    margin: 1.2rem 0 0;
+    margin: auto 0 0;
     padding: 1rem;
     overflow: auto;
     border-radius: 14px;
-    background: var(--terminal);
+    background:
+        linear-gradient(90deg, rgb(103 215 202 / 0.12), transparent 42%),
+        var(--terminal);
     color: #d8e3ed;
     font-size: 0.82rem;
     line-height: 1.55;
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
 }
 
 .mobile-proof {
     display: grid;
+    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
+    align-items: center;
+    gap: 2rem;
+    margin-top: 2.4rem;
+}
+
+.mobile-copy h3 {
+    margin: 0;
+    max-width: 620px;
+    color: var(--ink);
+    font-size: clamp(2rem, 4vw, 3.5rem);
+    letter-spacing: -0.06em;
+    line-height: 0.98;
+}
+
+.mobile-copy p:not(.section-kicker) {
+    margin: 1.1rem 0 0;
+    max-width: 520px;
+    color: var(--ink-soft);
+    font-size: 1.02rem;
+    line-height: 1.7;
+}
+
+.mobile-shots {
+    display: grid;
     grid-template-columns: repeat(2, minmax(0, 230px));
-    justify-content: center;
+    justify-content: end;
     gap: 1rem;
-    margin-top: 2rem;
 }
 
 .mobile-proof figure {
@@ -830,12 +1089,14 @@ samp {
 }
 
 .awareness-card {
+    display: flex;
+    flex-direction: column;
     padding: 1.25rem;
 }
 
 .awareness-card img {
     width: 100%;
-    min-height: 220px;
+    height: 320px;
     object-fit: contain;
     border-radius: 16px;
     background: var(--terminal);
@@ -908,13 +1169,16 @@ td:last-child {
     background: rgb(217 238 233 / 0.5);
 }
 
+.compare-cards {
+    display: none;
+}
+
 .integration-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 0.75rem;
 }
 
-.integration-grid a,
 .integration-grid span {
     display: flex;
     align-items: center;
@@ -928,9 +1192,20 @@ td:last-child {
     box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
 }
 
-.integration-grid a:hover {
-    border-color: var(--accent);
-    background: var(--accent-soft);
+.integration-note {
+    max-width: 720px;
+    margin: 1.3rem 0 0;
+    color: var(--ink-soft);
+    font-size: 1.02rem;
+    line-height: 1.7;
+}
+
+.integration-note a {
+    color: var(--accent-dark);
+    font-weight: 800;
+    text-decoration: underline;
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.18em;
 }
 
 .final-cta {
@@ -993,12 +1268,13 @@ td:last-child {
         padding-top: 4.5rem;
     }
 
-    .hero-panel {
+    .hero-product-shot {
         transform: none;
-        max-width: 620px;
+        max-width: 760px;
     }
 
-    .pillar-grid {
+    .pillar-grid,
+    .contrast-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
@@ -1006,6 +1282,14 @@ td:last-child {
     .integration-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
+
+    .mobile-proof {
+        grid-template-columns: 1fr;
+    }
+
+    .mobile-shots {
+        justify-content: center;
+    }
 }
 
 @media (max-width: 720px) {
@@ -1032,7 +1316,7 @@ td:last-child {
     }
 
     .hero h1 {
-        font-size: clamp(3rem, 17vw, 4.2rem);
+        font-size: clamp(2.65rem, 13.2vw, 3.65rem);
     }
 
     .hero-lede {
@@ -1053,8 +1337,8 @@ td:last-child {
         padding-bottom: 4rem;
     }
 
-    .demo-frame {
-        border-radius: 20px;
+    .demo-video {
+        border-radius: 18px;
     }
 
     .section {
@@ -1071,12 +1355,69 @@ td:last-child {
     }
 
     .pillar-grid,
+    .contrast-grid,
     .access-grid,
     .awareness-grid,
     .integration-grid {
         grid-template-columns: 1fr;
     }
 
+    .compare-section .table-wrap {
+        display: none;
+    }
+
+    .compare-cards {
+        display: grid;
+        gap: 0.75rem;
+    }
+
+    .compare-cards article {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.5rem;
+        padding: 1rem;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-md);
+        background: rgb(255 253 248 / 0.76);
+        box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
+    }
+
+    .compare-cards h3 {
+        grid-column: 1 / -1;
+        margin: 0 0 0.25rem;
+        color: var(--ink);
+        font-size: 1.05rem;
+        letter-spacing: -0.04em;
+    }
+
+    .compare-cards span {
+        display: grid;
+        gap: 0.25rem;
+        padding: 0.65rem 0.55rem;
+        border-radius: 14px;
+        background: var(--paper-muted);
+        color: var(--muted);
+        font-size: 0.72rem;
+        font-weight: 800;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    .compare-cards b {
+        color: var(--ink-soft);
+        font-size: 0.9rem;
+        text-transform: none;
+    }
+
+    .compare-cards .herdr {
+        background: var(--accent-soft);
+        color: var(--accent-dark);
+    }
+
+    .compare-cards .herdr b {
+        color: var(--accent-dark);
+    }
+
     .pillar-card {
         min-height: auto;
     }
@@ -1086,11 +1427,15 @@ td:last-child {
     }
 
     .screenshot-card img {
-        height: 300px;
+        height: auto;
     }
 
-    .mobile-proof {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+    .access-card {
+        min-height: auto;
+    }
+
+    .mobile-shots {
+        grid-template-columns: minmax(0, 230px);
     }
 
     .final-cta {
@@ -1117,17 +1462,20 @@ td:last-child {
         width: 100%;
     }
 
-    .hero-panel {
-        margin-inline: -0.2rem;
+    .hero-product-shot {
+        display: none;
     }
 
-    .workspace,
-    .agent-list,
-    .terminal-line {
-        font-size: 0.72rem;
+    .hero-pasture {
+        display: none;
     }
 
-    .mobile-proof {
+    .hero-product-shot figcaption {
+        font-size: 0.78rem;
+    }
+
+    .mobile-proof,
+    .mobile-shots {
         gap: 0.65rem;
     }
 
@@ -1142,5 +1490,7 @@ td:last-child {
     *::before,
     *::after {
         scroll-behavior: auto !important;
+        animation-duration: 0.001ms !important;
+        animation-iteration-count: 1 !important;
     }
 }
diff --git a/website/favicon.ico b/website/favicon.ico
new file mode 100644
index 00000000..2ba18484
--- /dev/null
+++ b/website/favicon.ico
diff --git a/website/index.html b/website/index.html
index 935a8528..515c58ea 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,20 +3,20 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>Herdr — terminal multiplexer for AI agents</title>
+        <title>Herdr — one terminal for the whole herd</title>
         <meta
             name="description"
-            content="Terminal-native agent multiplexer for coding agents. Persistent sessions, SSH attach, real terminal panes, mouse-native control, and a CLI/socket API for orchestration."
+            content="Terminal-native agent runtime and multiplexer. Run AI coding agents in real panes, detach and reattach, SSH in, see state, and orchestrate through the CLI/socket API."
         />
         <meta name="theme-color" content="#f7f3ea" />
         <link rel="canonical" href="https://herdr.dev/" />
 
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content="Herdr" />
-        <meta property="og:title" content="Herdr — terminal multiplexer for AI agents" />
+        <meta property="og:title" content="Herdr — one terminal for the whole herd" />
         <meta
             property="og:description"
-            content="Persistent terminal workspaces for coding agents. Detach, reattach, SSH in, and keep every agent visible."
+            content="Terminal-native agent runtime and multiplexer. Detach, reattach, SSH in, and keep every agent visible."
         />
         <meta property="og:url" content="https://herdr.dev/" />
         <meta
@@ -25,19 +25,22 @@
         />
         <meta property="og:image:width" content="1200" />
         <meta property="og:image:height" content="630" />
+        <meta property="og:image:alt" content="Herdr — One terminal. The whole herd." />
 
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Herdr — terminal multiplexer for AI agents" />
+        <meta name="twitter:title" content="Herdr — one terminal for the whole herd" />
         <meta
             name="twitter:description"
-            content="Persistent terminal workspaces for coding agents. Detach, reattach, SSH in, and keep every agent visible."
+            content="Terminal-native agent runtime and multiplexer. Detach, reattach, SSH in, and keep every agent visible."
         />
         <meta
             name="twitter:image"
             content="https://herdr.dev/assets/og-card-v2.png"
         />
+        <meta name="twitter:image:alt" content="Herdr — One terminal. The whole herd." />
 
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon.png" />
         <link rel="apple-touch-icon" href="/assets/logo.png" />
         <link
             rel="preload"
@@ -46,13 +49,13 @@
             type="font/woff2"
             crossorigin
         />
-        <link rel="stylesheet" href="/css/style.css?v=2c64f1d0" />
+        <link rel="stylesheet" href="/css/style.css?v=3f0e9b12" />
     </head>
     <body>
         <header class="site-header">
             <nav class="nav" aria-label="Primary navigation">
                 <a class="brand" href="/" aria-label="Herdr home">
-                    <img src="/assets/logo.png" alt="" />
+                    <img class="brand-logo" src="/assets/logo.svg" alt="" />
                     <span>herdr</span>
                 </a>
                 <div class="nav-links">
@@ -67,23 +70,25 @@
 
         <main>
             <section class="hero" id="hero">
+                <div class="hero-pasture" aria-hidden="true"></div>
                 <div class="hero-copy">
                     <p class="eyebrow">
                         <span class="status-dot dot-done"></span>
-                        Open source · 1k+ GitHub stars
+                        Terminal-native agent runtime
                     </p>
-                    <h1>The terminal multiplexer for AI agents.</h1>
+                    <h1>One terminal. The whole herd.</h1>
                     <p class="hero-lede">
-                        Run Pi, Claude Code, Codex, OpenCode, and other agents
-                        in real terminal panes. See what is
+                        Herdr is an agent runtime that runs inside your terminal.
+                        Keep your shell, SSH setup, fonts, and keybinds; add
+                        tmux-style persistence, mouse-native panes,
                         <span class="state blocked">blocked</span>,
                         <span class="state working">working</span>, and
-                        <span class="state done">done</span>. Detach, SSH back
-                        in, and keep every agent running.
+                        <span class="state done">done</span> agent state, and an
+                        API agents can drive.
                     </p>
                     <div class="hero-actions">
-                        <a class="button button-primary" href="/docs/install/"
-                            >Install Herdr</a
+                        <a class="button button-primary" href="/docs/quick-start/"
+                            >Quick start</a
                         >
                         <a class="button button-secondary" href="/docs/"
                             >Read the docs</a
@@ -97,161 +102,290 @@
                         <button id="copy-btn" type="button">Copy</button>
                     </div>
                     <p class="hero-note">
-                        Linux and macOS · single Rust binary · no Electron ·
-                        works inside tmux
+                        Real terminal panes · mouse and keyboard native · single
+                        Rust binary · Linux and macOS · no Electron
                     </p>
                 </div>
 
-                <aside class="hero-panel" aria-label="Herdr agent overview">
-                    <div class="panel-chrome">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>
-                    <div class="panel-title">
-                        <span>herdr</span>
-                        <span>agent state</span>
-                    </div>
-                    <div class="workspace-list">
-                        <div class="workspace active">
-                            <span class="number">1</span>
-                            <span class="label">api</span>
-                            <span class="status-pill pill-blocked">blocked</span>
-                        </div>
-                        <div class="workspace">
-                            <span class="number">2</span>
-                            <span class="label">docs-site</span>
-                            <span class="status-pill pill-working">working</span>
-                        </div>
-                        <div class="workspace">
-                            <span class="number">3</span>
-                            <span class="label">release</span>
-                            <span class="status-pill pill-done">done</span>
-                        </div>
-                    </div>
-                    <div class="agent-list">
-                        <p>agents</p>
-                        <div>
-                            <span class="status-dot dot-blocked"></span>
-                            claude-code needs approval
-                        </div>
-                        <div>
-                            <span class="status-dot dot-working"></span>
-                            codex running tests
-                        </div>
-                        <div>
-                            <span class="status-dot dot-done"></span>
-                            pi finished review
-                        </div>
-                    </div>
-                    <div class="terminal-line">
-                        <span class="prompt">$</span>
-                        <span>herdr wait agent-status 1-2 --status done</span>
+                <figure class="hero-product-shot">
+                    <div
+                        class="herdr-ui-mock"
+                        role="img"
+                        aria-label="Stylized Herdr session with spaces, tabs, agent states, terminal panes, and a local docs server"
+                    >
+                        <aside class="mock-sidebar">
+                            <div class="mock-sidebar-title">spaces</div>
+                            <div class="mock-space active">
+                                <span class="mock-dot dot-idle"></span>
+                                <div><strong>herdr</strong><small>master</small></div>
+                            </div>
+                            <div class="mock-space">
+                                <span class="mock-dot dot-blocked"></span>
+                                <div><strong>llm-proxy</strong><small>master</small></div>
+                            </div>
+                            <div class="mock-space">
+                                <span class="mock-dot dot-done"></span>
+                                <div><strong>qmp</strong><small>autoresearch/qmp-ra…</small></div>
+                            </div>
+                            <div class="mock-sidebar-spacer"></div>
+                            <div class="mock-sidebar-row"><span>new</span><span>menu</span></div>
+                            <div class="mock-agent-title"><span>agents</span><span>all</span></div>
+                            <div class="mock-agent"><span>✓</span><div><strong>doc</strong><small>idle · pi</small></div></div>
+                            <div class="mock-agent working"><span>⠴</span><div><strong>custom-row</strong><small>working · pi</small></div></div>
+                            <div class="mock-agent blocked"><span>◉</span><div><strong>llm-proxy</strong><small>blocked · claude</small></div></div>
+                            <div class="mock-agent done"><span>●</span><div><strong>qmp</strong><small>done · codex</small></div></div>
+                        </aside>
+                        <section class="mock-main">
+                            <div class="mock-tabs">
+                                <span>doc</span><span>custom-row</span><span class="active">herdr</span><span>+</span>
+                            </div>
+                            <div class="mock-panes">
+                                <div class="mock-pane focused">
+                                    <div class="mock-prompt"><span>~/Projects/herdr</span> <em>master</em></div>
+                                    <div><b>❯</b> <span class="cmd">printf</span> <span class="str">"one terminal. the whole herd.\n"</span> | <span class="cmd">cowsay</span></div>
+                                    <pre>-------------------------------
+&lt; one terminal. the whole herd. &gt;
+-------------------------------
+        \   ^__^
+         \  (oo)\_______
+            (__)\       )\/\
+                ||----w |
+                ||     ||</pre>
+                                    <div class="mock-prompt"><span>~/Projects/herdr</span> <em>master</em></div>
+                                    <div><b>❯</b> <span class="cursor"></span></div>
+                                </div>
+                                <div class="mock-pane">
+                                    <div class="mock-prompt"><span>~/Projects/herdr-worktrees/docs-site/website</span> <em>docs-site*</em></div>
+                                    <div><b>❯</b> <span class="cmd">bun</span> run dev</div>
+                                    <div class="dim">$ node scripts/prepare-docs.mjs && astro dev</div>
+                                    <div><span class="time">02:10:44</span> <span class="blue">[types]</span> Generated 0ms</div>
+                                    <div><span class="time">02:10:44</span> <span class="blue">[content]</span> Synced content</div>
+                                    <br />
+                                    <div><span class="badge">astro</span> <span class="green">v5.18.1</span> ready in 668 ms</div>
+                                    <br />
+                                    <div class="url-line">┃ Local&nbsp;&nbsp; <span>http://localhost:4321/</span></div>
+                                    <div class="dim">  Network&nbsp; use --host to expose</div>
+                                    <br />
+                                    <div><span class="time">02:10:44</span> <span class="green">watching for file changes...</span></div>
+                                </div>
+                            </div>
+                        </section>
                     </div>
-                </aside>
+                    <figcaption>
+                        The whole herd in one terminal.
+                    </figcaption>
+                </figure>
             </section>
 
             <section class="demo-section" aria-label="Herdr demo">
-                <div class="demo-frame">
-                    <video
-                        autoplay
-                        muted
-                        loop
-                        playsinline
-                        preload="auto"
-                        poster="/assets/hero-screenshot.png"
-                    >
-                        <source src="/assets/demo-v2.mp4" type="video/mp4" />
-                    </video>
-                </div>
+                <video
+                    class="demo-video"
+                    autoplay
+                    muted
+                    loop
+                    playsinline
+                    preload="auto"
+                    poster="/assets/hero-session.png"
+                >
+                    <source src="/assets/demo-v2.mp4" type="video/mp4" />
+                </video>
             </section>
 
             <section class="section intro-section">
-                <p class="section-kicker">Why Herdr exists</p>
+                <p class="section-kicker">The missing layer</p>
                 <div class="section-heading-wide">
                     <h2>
-                        Coding agents moved into the terminal. The terminal
-                        needs an agent-aware control plane.
+                        Keep your terminal. Add the control surface.
                     </h2>
                     <p>
-                        Herdr is not a GUI wrapper around agents. It keeps the
-                        agent's own terminal alive, adds workspace structure,
-                        and exposes the same control surface to humans, scripts,
-                        and agents.
+                        Desktop agent terminals give you app UI. tmux gives you
+                        persistence. Herdr sits between them: a lightweight TUI
+                        process with real terminal panes, clickable layout,
+                        agent state, detach/reattach, remote attach, and a
+                        runtime API.
+                    </p>
+                </div>
+                <div class="contrast-grid" aria-label="What Herdr is not">
+                    <article>
+                        <span>not a terminal emulator</span>
+                        <p>Use Ghostty, Kitty, iTerm, Alacritty, or any terminal you already trust.</p>
+                    </article>
+                    <article>
+                        <span>not a browser dashboard</span>
+                        <p>No web view, hosted control plane, account, or reconstructed chat surface.</p>
+                    </article>
+                    <article>
+                        <span>more than tmux for agents</span>
+                        <p>Persistence plus mouse-native panes, state rollups, and commands agents can call.</p>
+                    </article>
+                </div>
+            </section>
+
+            <section class="section compare-section">
+                <div class="section-heading">
+                    <p class="section-kicker">Positioning</p>
+                    <h2>The terminal-native control layer.</h2>
+                </div>
+                <div class="table-wrap">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Capability</th>
+                                <th>tmux</th>
+                                <th>GUI agent managers</th>
+                                <th>Herdr</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Persistent sessions</td>
+                                <td>✓</td>
+                                <td>—</td>
+                                <td>✓</td>
+                            </tr>
+                            <tr>
+                                <td>Remote SSH attach</td>
+                                <td>✓</td>
+                                <td>limited</td>
+                                <td>✓</td>
+                            </tr>
+                            <tr>
+                                <td>Real terminal panes</td>
+                                <td>✓</td>
+                                <td>—</td>
+                                <td>✓</td>
+                            </tr>
+                            <tr>
+                                <td>Mouse-native TUI</td>
+                                <td>—</td>
+                                <td>✓</td>
+                                <td>✓</td>
+                            </tr>
+                            <tr>
+                                <td>Agent state awareness</td>
+                                <td>—</td>
+                                <td>✓</td>
+                                <td>✓</td>
+                            </tr>
+                            <tr>
+                                <td>Agents can orchestrate it</td>
+                                <td>—</td>
+                                <td>limited</td>
+                                <td>✓</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="compare-cards" aria-label="Mobile comparison">
+                    <article>
+                        <h3>Persistent sessions</h3>
+                        <span>tmux <b>✓</b></span>
+                        <span>apps <b>—</b></span>
+                        <span class="herdr">Herdr <b>✓</b></span>
+                    </article>
+                    <article>
+                        <h3>Remote SSH attach</h3>
+                        <span>tmux <b>✓</b></span>
+                        <span>apps <b>limited</b></span>
+                        <span class="herdr">Herdr <b>✓</b></span>
+                    </article>
+                    <article>
+                        <h3>Real terminal panes</h3>
+                        <span>tmux <b>✓</b></span>
+                        <span>apps <b>—</b></span>
+                        <span class="herdr">Herdr <b>✓</b></span>
+                    </article>
+                    <article>
+                        <h3>Mouse-native TUI</h3>
+                        <span>tmux <b>—</b></span>
+                        <span>apps <b>✓</b></span>
+                        <span class="herdr">Herdr <b>✓</b></span>
+                    </article>
+                    <article>
+                        <h3>Agent state awareness</h3>
+                        <span>tmux <b>—</b></span>
+                        <span>apps <b>✓</b></span>
+                        <span class="herdr">Herdr <b>✓</b></span>
+                    </article>
+                    <article>
+                        <h3>Agents can orchestrate it</h3>
+                        <span>tmux <b>—</b></span>
+                        <span>apps <b>limited</b></span>
+                        <span class="herdr">Herdr <b>✓</b></span>
+                    </article>
+                </div>
+            </section>
+
+            <section class="section feature-split">
+                <div class="feature-copy">
+                    <p class="section-kicker">Your terminal</p>
+                    <h2>Same shell, same keybinds, real panes.</h2>
+                    <p>
+                        Herdr does not replace your terminal or wrap agents in a
+                        reconstructed chat view. It runs real processes in PTYs,
+                        then adds layout, click targets, state, persistence, and
+                        automation around them.
                     </p>
+                    <ul class="check-list">
+                        <li>Use the mouse for panes, tabs, workspaces, and menus.</li>
+                        <li>Keep your terminal fonts, shortcuts, SSH, and shell setup.</li>
+                        <li>Stay keyboard-first, or disable mouse input entirely.</li>
+                    </ul>
                 </div>
+                <figure class="screenshot-card">
+                    <img
+                        src="/assets/terminal-panes.png"
+                        alt="Herdr showing real terminal panes side by side"
+                        loading="lazy"
+                    />
+                </figure>
             </section>
 
             <section class="section pillars" aria-labelledby="pillars-title">
                 <div class="section-heading">
                     <p class="section-kicker">Core pillars</p>
-                    <h2 id="pillars-title">The parts other tools rarely combine.</h2>
+                    <h2 id="pillars-title">Why terminal users switch.</h2>
                 </div>
                 <div class="pillar-grid">
                     <article class="pillar-card">
                         <span class="card-index">01</span>
-                        <h3>Detach and reattach</h3>
+                        <h3>Survives disconnects</h3>
                         <p>
-                            Herdr runs panes in a background session server. Quit
-                            the client, close the terminal, and come back to the
-                            same agents later.
+                            Panes keep running in a background session server.
+                            Close the terminal, lose SSH, or detach on purpose;
+                            come back to the same herd later.
                         </p>
                     </article>
                     <article class="pillar-card">
                         <span class="card-index">02</span>
-                        <h3>Attach over SSH</h3>
+                        <h3>Runs where code lives</h3>
                         <p>
-                            Run Herdr where the code and credentials live. SSH
-                            into the server and attach, or use Herdr as a thin
-                            client to a remote host.
+                            Use Herdr locally, inside any SSH session, or as a
+                            thin client to a remote host. Keep credentials and
+                            repos on the machine doing the work.
                         </p>
                     </article>
                     <article class="pillar-card">
                         <span class="card-index">03</span>
-                        <h3>Real terminal panes</h3>
+                        <h3>Mouse-native TUI</h3>
                         <p>
-                            Every pane is a real terminal. Click panes, tabs,
-                            workspaces, and agents; drag borders; select text;
-                            use right-click menus.
+                            Click panes, tabs, workspaces, and agents. Drag
+                            borders, select text, use right-click menus, then
+                            stay on the keyboard whenever that is faster.
                         </p>
                     </article>
                     <article class="pillar-card">
                         <span class="card-index">04</span>
-                        <h3>State and API orchestration</h3>
+                        <h3>Agents can drive it</h3>
                         <p>
-                            The sidebar shows agent state. The CLI and socket API
-                            let agents create panes, run commands, read output,
-                            and wait for changes.
+                            The CLI and socket API let agents create panes, run
+                            commands, read output, wait for changes, and operate
+                            their workspace without hand-shuffled terminals.
                         </p>
                     </article>
                 </div>
             </section>
 
-            <section class="section feature-split">
-                <div class="feature-copy">
-                    <p class="section-kicker">Terminal-native</p>
-                    <h2>See the agent's terminal, not a reconstructed chat view.</h2>
-                    <p>
-                        GUI agent managers can summarize what an agent is doing.
-                        Herdr shows the actual process in the actual terminal and
-                        adds the missing layer: persistence, layout, mouse
-                        controls, state awareness, and automation hooks.
-                    </p>
-                    <ul class="check-list">
-                        <li>No web dashboard or Electron shell.</li>
-                        <li>No vendor-specific wrapped terminal view.</li>
-                        <li>No new account or hosted control plane.</li>
-                    </ul>
-                </div>
-                <figure class="screenshot-card">
-                    <img
-                        src="/assets/hero-screenshot.png"
-                        alt="Herdr running multiple coding agents in terminal panes"
-                        loading="lazy"
-                    />
-                </figure>
-            </section>
-
             <section class="section access-section">
                 <div class="section-heading">
                     <p class="section-kicker">Local or remote</p>
@@ -289,33 +423,44 @@ $ herdr</code></pre>
                     </article>
                 </div>
                 <div class="mobile-proof">
-                    <figure>
-                        <img
-                            src="/assets/mobile-terminal.jpeg"
-                            alt="Herdr terminal view over SSH on a phone"
-                            loading="lazy"
-                        />
-                        <figcaption>terminal view over SSH</figcaption>
-                    </figure>
-                    <figure>
-                        <img
-                            src="/assets/mobile-switcher.jpeg"
-                            alt="Herdr responsive switcher on a phone"
-                            loading="lazy"
-                        />
-                        <figcaption>responsive switcher</figcaption>
-                    </figure>
+                    <div class="mobile-copy">
+                        <p class="section-kicker">Responsive TUI</p>
+                        <h3>Mobile-first when the terminal gets small.</h3>
+                        <p>
+                            Herdr stays usable over SSH from a phone or tablet.
+                            The terminal view remains real, while narrow screens
+                            get a switcher built for touch-sized decisions.
+                        </p>
+                    </div>
+                    <div class="mobile-shots">
+                        <figure>
+                            <img
+                                src="/assets/mobile-terminal.jpeg"
+                                alt="Herdr terminal view over SSH on a phone"
+                                loading="lazy"
+                            />
+                            <figcaption>terminal over SSH</figcaption>
+                        </figure>
+                        <figure>
+                            <img
+                                src="/assets/mobile-switcher.jpeg"
+                                alt="Herdr responsive switcher on a phone"
+                                loading="lazy"
+                            />
+                            <figcaption>responsive switcher</figcaption>
+                        </figure>
+                    </div>
                 </div>
             </section>
 
             <section class="section api-section">
                 <div class="api-copy">
-                    <p class="section-kicker">For agents and scripts</p>
-                    <h2>The UI is also an API.</h2>
+                    <p class="section-kicker">Runtime surface</p>
+                    <h2>The UI is also a control surface.</h2>
                     <p>
                         Herdr exposes workspace, tab, pane, output, and wait
                         operations through a CLI and newline-delimited JSON
-                        socket API. Agents can orchestrate their own workspace
+                        socket API. Agents can operate their own workspace
                         instead of asking you to shuffle terminals by hand.
                     </p>
                     <div class="inline-links">
@@ -342,7 +487,7 @@ $ herdr</code></pre>
             <section class="section awareness-section">
                 <div class="section-heading">
                     <p class="section-kicker">Agent awareness</p>
-                    <h2>Stop checking panes one by one.</h2>
+                    <h2>Keep the herd in sight.</h2>
                 </div>
                 <div class="awareness-grid">
                     <article class="awareness-card">
@@ -378,86 +523,36 @@ $ herdr</code></pre>
                 </div>
             </section>
 
-            <section class="section compare-section">
-                <div class="section-heading">
-                    <p class="section-kicker">Positioning</p>
-                    <h2>What Herdr combines.</h2>
-                </div>
-                <div class="table-wrap">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Capability</th>
-                                <th>tmux</th>
-                                <th>GUI agent managers</th>
-                                <th>Herdr</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>Persistent sessions</td>
-                                <td>✓</td>
-                                <td>—</td>
-                                <td>✓</td>
-                            </tr>
-                            <tr>
-                                <td>Remote SSH attach</td>
-                                <td>✓</td>
-                                <td>limited</td>
-                                <td>✓</td>
-                            </tr>
-                            <tr>
-                                <td>Real terminal panes</td>
-                                <td>✓</td>
-                                <td>—</td>
-                                <td>✓</td>
-                            </tr>
-                            <tr>
-                                <td>Mouse-native TUI</td>
-                                <td>—</td>
-                                <td>✓</td>
-                                <td>✓</td>
-                            </tr>
-                            <tr>
-                                <td>Agent state awareness</td>
-                                <td>—</td>
-                                <td>✓</td>
-                                <td>✓</td>
-                            </tr>
-                            <tr>
-                                <td>Agents can orchestrate it</td>
-                                <td>—</td>
-                                <td>limited</td>
-                                <td>✓</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
 
             <section class="section integrations-section">
                 <div class="section-heading">
                     <p class="section-kicker">Integrations</p>
-                    <h2>Works with the agents you already run.</h2>
+                    <h2>Bring your existing agents into the herd.</h2>
                 </div>
                 <div class="integration-grid">
-                    <a href="/docs/integrations/#pi">Pi</a>
-                    <a href="/docs/integrations/#claude-code">Claude Code</a>
-                    <a href="/docs/integrations/#codex">Codex</a>
-                    <a href="/docs/integrations/#opencode">OpenCode</a>
+                    <span>Pi</span>
+                    <span>Claude Code</span>
+                    <span>Codex</span>
+                    <span>OpenCode</span>
                     <span>Droid</span>
                     <span>Amp</span>
                     <span>Grok CLI</span>
                     <span>Gemini CLI</span>
                 </div>
+                <p class="integration-note">
+                    Any terminal agent works in Herdr. Use the Herdr API to add
+                    richer state, orchestration, and custom workflows;
+                    <a href="/docs/integrations/">see example integrations</a>
+                    or build your own for anything.
+                </p>
             </section>
 
             <section class="final-cta">
-                <p class="section-kicker">Start small</p>
+                <p class="section-kicker">Start the herd</p>
                 <h2>Install Herdr, run two agents, detach once.</h2>
                 <p>
-                    The value shows up the first time work keeps running after
-                    your terminal disappears.
+                    The value shows up the first time the herd keeps running
+                    after your terminal disappears.
                 </p>
                 <div class="hero-actions center">
                     <a class="button button-primary" href="/docs/install/"
@@ -472,7 +567,7 @@ $ herdr</code></pre>
 
         <footer class="footer">
             <a class="brand" href="/" aria-label="Herdr home">
-                <img src="/assets/logo.png" alt="" />
+                <img class="brand-logo" src="/assets/logo.svg" alt="" />
                 <span>herdr</span>
             </a>
             <div>
@@ -485,8 +580,193 @@ $ herdr</code></pre>
             </div>
         </footer>
 
+        <div class="logo-menu" id="logo-menu" hidden>
+            <a href="/assets/logo.svg" download="herdr-logo.svg">Download SVG</a>
+            <a href="/assets/logo.png" download="herdr-logo.png">Download PNG</a>
+            <button type="button" id="copy-logo-url">Copy SVG URL</button>
+        </div>
+
         <script>
             (function () {
+                var menu = document.getElementById("logo-menu");
+                var copyButton = document.getElementById("copy-logo-url");
+                var logos = document.querySelectorAll(".brand-logo");
+                if (!menu || !logos.length) return;
+
+                function hideMenu() {
+                    menu.hidden = true;
+                }
+
+                function showMenu(event) {
+                    event.preventDefault();
+                    menu.hidden = false;
+                    var menuWidth = menu.offsetWidth;
+                    var menuHeight = menu.offsetHeight;
+                    var left = Math.min(event.clientX, window.innerWidth - menuWidth - 12);
+                    var top = Math.min(event.clientY, window.innerHeight - menuHeight - 12);
+                    menu.style.left = Math.max(12, left) + "px";
+                    menu.style.top = Math.max(12, top) + "px";
+                }
+
+                logos.forEach(function (logo) {
+                    logo.addEventListener("contextmenu", showMenu);
+                });
+
+                document.addEventListener("click", function (event) {
+                    if (!menu.contains(event.target)) hideMenu();
+                });
+                document.addEventListener("keydown", function (event) {
+                    if (event.key === "Escape") hideMenu();
+                });
+                window.addEventListener("scroll", hideMenu, { passive: true });
+                window.addEventListener("resize", hideMenu);
+
+                if (copyButton) {
+                    copyButton.addEventListener("click", async function () {
+                        var url = new URL("/assets/logo.svg", window.location.href).href;
+                        try {
+                            await navigator.clipboard.writeText(url);
+                            copyButton.textContent = "Copied";
+                            setTimeout(function () {
+                                copyButton.textContent = "Copy SVG URL";
+                            }, 1500);
+                        } catch (error) {
+                            window.prompt("Copy logo URL", url);
+                        }
+                    });
+                }
+            })();
+
+            (function () {
+                var hero = document.getElementById("hero");
+                var pasture = hero && hero.querySelector(".hero-pasture");
+                var reduceMotion = window.matchMedia(
+                    "(prefers-reduced-motion: reduce)",
+                ).matches;
+
+                if (hero && pasture && !reduceMotion) {
+                    var sheepRight = [
+                        ["    ,ww", "   wWWWWWWW)", "   `WWWWWW'", "    /I  I\\"],
+                        ["    ,ww", "   wWWWWWWW)", "   `WWWWWW'", "    I\\ /I "],
+                    ];
+                    var sheepLeft = [
+                        ["  ww,", "(WWWWWWWw", " 'WWWWWW`", "  /I  I\\"],
+                        ["  ww,", "(WWWWWWWw", " 'WWWWWW`", "  I\\ /I "],
+                    ];
+                    var colors = [
+                        "31,111,104",
+                        "37,99,235",
+                        "21,26,33",
+                        "154,106,0",
+                    ];
+
+                    var heroWidth = hero.offsetWidth;
+                    var heroHeight = hero.offsetHeight;
+                    var heroRect = hero.getBoundingClientRect();
+                    var mouseX = -9999;
+                    var mouseY = -9999;
+                    var flock = [];
+                    var count = window.matchMedia("(max-width: 900px)").matches
+                        ? 8
+                        : 16;
+
+                    document.addEventListener("mousemove", function (event) {
+                        mouseX = event.clientX - heroRect.left;
+                        mouseY = event.clientY - heroRect.top;
+                    });
+                    document.addEventListener("mouseleave", function () {
+                        mouseX = -9999;
+                        mouseY = -9999;
+                    });
+                    window.addEventListener("resize", function () {
+                        heroWidth = hero.offsetWidth;
+                        heroHeight = hero.offsetHeight;
+                        heroRect = hero.getBoundingClientRect();
+                    });
+                    window.addEventListener("scroll", function () {
+                        heroRect = hero.getBoundingClientRect();
+                    });
+
+                    for (var i = 0; i < count; i += 1) {
+                        var sheep = document.createElement("pre");
+                        sheep.className = "sheep-el";
+                        var color = colors[i % colors.length];
+                        var opacity = 0.045 + Math.random() * 0.045;
+                        var size = 8.5 + Math.random() * 4.5;
+                        sheep.style.cssText =
+                            "font-size:" +
+                            size +
+                            "px;color:rgba(" +
+                            color +
+                            "," +
+                            opacity +
+                            ")";
+                        pasture.appendChild(sheep);
+
+                        flock.push({
+                            el: sheep,
+                            x: Math.random() * heroWidth,
+                            y: 24 + Math.random() * Math.max(heroHeight - 64, 120),
+                            dir: Math.random() > 0.5 ? 1 : -1,
+                            speed: 0.08 + Math.random() * 0.2,
+                            frame: 0,
+                            frameTime: 0,
+                            frameInterval: 420 + Math.random() * 320,
+                            shoveX: 0,
+                            shoveY: 0,
+                        });
+                    }
+
+                    var lastFrame = 0;
+                    function tick(timestamp) {
+                        var delta = Math.min(timestamp - lastFrame, 100);
+                        lastFrame = timestamp;
+
+                        for (var i = 0; i < flock.length; i += 1) {
+                            var sheep = flock[i];
+                            sheep.frameTime += delta;
+                            if (sheep.frameTime > sheep.frameInterval) {
+                                sheep.frameTime = 0;
+                                sheep.frame ^= 1;
+                            }
+
+                            var dx = sheep.x - mouseX;
+                            var dy = sheep.y - mouseY;
+                            var distance = Math.sqrt(dx * dx + dy * dy);
+                            if (distance < 150 && distance > 1) {
+                                var force = (1 - distance / 150) * 0.48;
+                                sheep.shoveX += (dx / distance) * force;
+                                sheep.shoveY += (dy / distance) * force;
+                            }
+
+                            sheep.x += sheep.shoveX;
+                            sheep.y += sheep.shoveY;
+                            sheep.shoveX *= 0.965;
+                            sheep.shoveY *= 0.965;
+                            sheep.x += sheep.dir * sheep.speed * (delta / 16);
+
+                            if (sheep.dir > 0 && sheep.x > heroWidth + 120) sheep.x = -120;
+                            if (sheep.dir < 0 && sheep.x < -120) sheep.x = heroWidth + 120;
+                            if (sheep.y < -48) sheep.y = heroHeight + 24;
+                            if (sheep.y > heroHeight + 48) sheep.y = -24;
+
+                            var frames = sheep.dir > 0 ? sheepRight : sheepLeft;
+                            sheep.el.textContent = frames[sheep.frame].join("\n");
+                            sheep.el.style.transform =
+                                "translate3d(" + sheep.x + "px," + sheep.y + "px,0)";
+                        }
+
+                        requestAnimationFrame(tick);
+                    }
+
+                    requestAnimationFrame(function (timestamp) {
+                        lastFrame = timestamp;
+                        tick(timestamp);
+                    });
+                }
+            })();
+
+            (function () {
                 var button = document.getElementById("copy-btn");
                 var command = document.getElementById("install-cmd");
                 if (!button || !command) return;
diff --git a/website/scripts/prepare-docs.mjs b/website/scripts/prepare-docs.mjs
index bfd8bff4..1cc2da42 100644
--- a/website/scripts/prepare-docs.mjs
+++ b/website/scripts/prepare-docs.mjs
@@ -16,6 +16,7 @@ async function preparePublicAssets() {
     'latest.json',
     'robots.txt',
     'sitemap.xml',
+    'favicon.ico',
     '_headers',
     '_redirects',
   ]) {
diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index 2e7ecd5e..9cdf9273 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -1,11 +1,11 @@
 ---
 title: Herdr documentation
-description: Terminal multiplexer for AI coding agents.
+description: Terminal-native agent runtime and multiplexer.
 template: splash
 hero:
-  tagline: Run agents in real terminal panes, keep sessions alive, attach over SSH, and orchestrate everything from the CLI or socket API.
+  tagline: "One terminal for the whole herd: real panes, persistent sessions, SSH attach, state awareness, and CLI/socket orchestration."
   image:
-    file: ../../../public/assets/logo.png
+    file: ../../../public/assets/logo.svg
   actions:
     - text: Install Herdr
       link: /docs/install/
@@ -16,14 +16,14 @@ hero:
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
-Herdr is a terminal-native agent multiplexer. It gives AI coding agents persistent terminal workspaces with panes, tabs, mouse control, state awareness, and an API that agents can use themselves.
+Herdr is a terminal-native agent runtime and multiplexer. It gives the whole herd persistent terminal workspaces with panes, tabs, mouse control, state awareness, and an API that agents can use themselves.
 
 ```bash
 curl -fsSL https://herdr.dev/install.sh | sh
 herdr
 ```
 
-## Core model
+## Core runtime
 
 <CardGrid>
   <Card title="Detach and reattach">
@@ -41,7 +41,7 @@ herdr
 
     [Learn concepts →](/docs/concepts/)
   </Card>
-  <Card title="State and orchestration">
+  <Card title="Runtime API">
     See agent status in the sidebar and drive workspaces, tabs, panes, waits, and output reads through the CLI or socket API.
 
     [Read the API guide →](/docs/socket-api/)