feat: refactor website homepage

23 files changed, 2022 insertions, 853 deletions

diff --git a/website/assets/agent-icons/amp.svg b/website/assets/agent-icons/amp.svg
new file mode 100644
index 00000000..68848aa9
--- /dev/null
+++ b/website/assets/agent-icons/amp.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Amp</title><path d="M15.087 23.18L12.03 24l-2.097-7.823-5.738 5.738-2.251-2.251 5.718-5.719-7.769-2.082.82-3.057 11.294 3.08 3.08 11.295z" fill="#F34E3F"></path><path d="M19.505 18.762l-3.057.82-2.564-9.573-9.572-2.564.819-3.057 11.295 3.079 3.08 11.295z" fill="#F34E3F"></path><path d="M23.893 14.374l-3.057.82-2.565-9.572L8.7 3.057 9.52 0l11.295 3.08 3.079 11.294z" fill="#F34E3F"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/antigravity.svg b/website/assets/agent-icons/antigravity.svg
new file mode 100644
index 00000000..3ed10ab6
--- /dev/null
+++ b/website/assets/agent-icons/antigravity.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Antigravity</title><mask height="23" id="lobe-icons-antigravity-0-_R_0_" maskUnits="userSpaceOnUse" width="24" x="0" y="1"><path d="M21.751 22.607c1.34 1.005 3.35.335 1.508-1.508C17.73 15.74 18.904 1 12.037 1 5.17 1 6.342 15.74.815 21.1c-2.01 2.009.167 2.511 1.507 1.506 5.192-3.517 4.857-9.714 9.715-9.714 4.857 0 4.522 6.197 9.714 9.715z" fill="#fff"></path></mask><g mask="url(#lobe-icons-antigravity-0-_R_0_)"><g filter="url(#lobe-icons-antigravity-1-_R_0_)"><path d="M-1.018-3.992c-.408 3.591 2.686 6.89 6.91 7.37 4.225.48 7.98-2.043 8.387-5.633.408-3.59-2.686-6.89-6.91-7.37-4.225-.479-7.98 2.043-8.387 5.633z" fill="#FFE432"></path></g><g filter="url(#lobe-icons-antigravity-2-_R_0_)"><path d="M15.269 7.747c1.058 4.557 5.691 7.374 10.348 6.293 4.657-1.082 7.575-5.653 6.516-10.21-1.058-4.556-5.691-7.374-10.348-6.292-4.657 1.082-7.575 5.653-6.516 10.21z" fill="#FC413D"></path></g><g filter="url(#lobe-icons-antigravity-3-_R_0_)"><path d="M-12.443 10.804c1.338 4.703 7.36 7.11 13.453 5.378 6.092-1.733 9.947-6.95 8.61-11.652C8.282-.173 2.26-2.58-3.833-.848-9.925.884-13.78 6.1-12.443 10.804z" fill="#00B95C"></path></g><g filter="url(#lobe-icons-antigravity-4-_R_0_)"><path d="M-12.443 10.804c1.338 4.703 7.36 7.11 13.453 5.378 6.092-1.733 9.947-6.95 8.61-11.652C8.282-.173 2.26-2.58-3.833-.848-9.925.884-13.78 6.1-12.443 10.804z" fill="#00B95C"></path></g><g filter="url(#lobe-icons-antigravity-5-_R_0_)"><path d="M-7.608 14.703c3.352 3.424 9.126 3.208 12.896-.483 3.77-3.69 4.108-9.459.756-12.883C2.69-2.087-3.083-1.871-6.853 1.82c-3.77 3.69-4.108 9.458-.755 12.883z" fill="#00B95C"></path></g><g filter="url(#lobe-icons-antigravity-6-_R_0_)"><path d="M9.932 27.617c1.04 4.482 5.384 7.303 9.7 6.3 4.316-1.002 6.971-5.448 5.93-9.93-1.04-4.483-5.384-7.304-9.7-6.301-4.316 1.002-6.971 5.448-5.93 9.93z" fill="#3186FF"></path></g><g filter="url(#lobe-icons-antigravity-7-_R_0_)"><path d="M2.572-8.185C.392-3.329 2.778 2.472 7.9 4.771c5.122 2.3 11.042.227 13.222-4.63 2.18-4.855-.205-10.656-5.327-12.955-5.122-2.3-11.042-.227-13.222 4.63z" fill="#FBBC04"></path></g><g filter="url(#lobe-icons-antigravity-8-_R_0_)"><path d="M-3.267 38.686c-5.277-2.072 3.742-19.117 5.984-24.83 2.243-5.712 8.34-8.664 13.616-6.592 5.278 2.071 11.533 13.482 9.29 19.195-2.242 5.713-23.613 14.298-28.89 12.227z" fill="#3186FF"></path></g><g filter="url(#lobe-icons-antigravity-9-_R_0_)"><path d="M28.71 17.471c-1.413 1.649-5.1.808-8.236-1.878-3.135-2.687-4.531-6.201-3.118-7.85 1.412-1.649 5.1-.808 8.235 1.878s4.532 6.2 3.119 7.85z" fill="#749BFF"></path></g><g filter="url(#lobe-icons-antigravity-10-_R_0_)"><path d="M18.163 9.077c5.81 3.93 12.502 4.19 14.946.577 2.443-3.612-.287-9.727-6.098-13.658-5.81-3.931-12.502-4.19-14.946-.577-2.443 3.612.287 9.727 6.098 13.658z" fill="#FC413D"></path></g><g filter="url(#lobe-icons-antigravity-11-_R_0_)"><path d="M-.915 2.684c-1.44 3.473-.97 6.967 1.05 7.804 2.02.837 4.824-1.3 6.264-4.772 1.44-3.473.97-6.967-1.05-7.804-2.02-.837-4.824 1.3-6.264 4.772z" fill="#FFEE48"></path></g></g><defs><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="17.587" id="lobe-icons-antigravity-1-_R_0_" width="19.838" x="-3.288" y="-11.917"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="1.117"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="38.565" id="lobe-icons-antigravity-2-_R_0_" width="38.9" x="4.251" y="-13.493"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="5.4"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="36.517" id="lobe-icons-antigravity-3-_R_0_" width="40.955" x="-21.889" y="-10.592"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="4.591"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="36.517" id="lobe-icons-antigravity-4-_R_0_" width="40.955" x="-21.889" y="-10.592"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="4.591"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="36.595" id="lobe-icons-antigravity-5-_R_0_" width="36.632" x="-19.099" y="-10.278"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="4.591"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.087" id="lobe-icons-antigravity-6-_R_0_" width="33.533" x=".981" y="8.758"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="4.363"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="35.276" id="lobe-icons-antigravity-7-_R_0_" width="35.978" x="-6.143" y="-21.659"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="3.954"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="46.523" id="lobe-icons-antigravity-8-_R_0_" width="45.114" x="-11.96" y="-.46"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="3.531"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="24.054" id="lobe-icons-antigravity-9-_R_0_" width="25.094" x="10.485" y=".58"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="3.159"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="30.007" id="lobe-icons-antigravity-10-_R_0_" width="33.508" x="5.833" y="-12.467"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="2.669"></feGaussianBlur></filter><filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="26.151" id="lobe-icons-antigravity-11-_R_0_" width="22.194" x="-8.355" y="-8.876"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur result="effect1_foregroundBlur_977_115" stdDeviation="3.303"></feGaussianBlur></filter></defs></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/claude.svg b/website/assets/agent-icons/claude.svg
new file mode 100644
index 00000000..ed1293c4
--- /dev/null
+++ b/website/assets/agent-icons/claude.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Claude Code</title><path clip-rule="evenodd" d="M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z" fill="#D97757" fill-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/codex-mask.svg b/website/assets/agent-icons/codex-mask.svg
new file mode 100644
index 00000000..a864d063
--- /dev/null
+++ b/website/assets/agent-icons/codex-mask.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z"/></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/codex.svg b/website/assets/agent-icons/codex.svg
new file mode 100644
index 00000000..c77ccfdd
--- /dev/null
+++ b/website/assets/agent-icons/codex.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Codex</title><path d="M19.503 0H4.496A4.496 4.496 0 000 4.496v15.007A4.496 4.496 0 004.496 24h15.007A4.496 4.496 0 0024 19.503V4.496A4.496 4.496 0 0019.503 0z" fill="#fff"></path><path d="M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z" fill="url(#lobe-icons-codex-_R_0_)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-codex-_R_0_" x1="12" x2="12" y1="3" y2="21"><stop stop-color="#B1A7FF"></stop><stop offset=".5" stop-color="#7A9DFF"></stop><stop offset="1" stop-color="#3941FF"></stop></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/cursor.svg b/website/assets/agent-icons/cursor.svg
new file mode 100644
index 00000000..a5b2ee3b
--- /dev/null
+++ b/website/assets/agent-icons/cursor.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/droid.png b/website/assets/agent-icons/droid.png
new file mode 100644
index 00000000..7a2f42b4
--- /dev/null
+++ b/website/assets/agent-icons/droid.png
diff --git a/website/assets/agent-icons/github-copilot.svg b/website/assets/agent-icons/github-copilot.svg
new file mode 100644
index 00000000..3cbf22a5
--- /dev/null
+++ b/website/assets/agent-icons/github-copilot.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>GithubCopilot</title><path d="M19.245 5.364c1.322 1.36 1.877 3.216 2.11 5.817.622 0 1.2.135 1.592.654l.73.964c.21.278.323.61.323.955v2.62c0 .339-.173.669-.453.868C20.239 19.602 16.157 21.5 12 21.5c-4.6 0-9.205-2.583-11.547-4.258-.28-.2-.452-.53-.453-.868v-2.62c0-.345.113-.679.321-.956l.73-.963c.392-.517.974-.654 1.593-.654l.029-.297c.25-2.446.81-4.213 2.082-5.52 2.461-2.54 5.71-2.851 7.146-2.864h.198c1.436.013 4.685.323 7.146 2.864zm-7.244 4.328c-.284 0-.613.016-.962.05-.123.447-.305.85-.57 1.108-1.05 1.023-2.316 1.18-2.994 1.18-.638 0-1.306-.13-1.851-.464-.516.165-1.012.403-1.044.996a65.882 65.882 0 00-.063 2.884l-.002.48c-.002.563-.005 1.126-.013 1.69.002.326.204.63.51.765 2.482 1.102 4.83 1.657 6.99 1.657 2.156 0 4.504-.555 6.985-1.657a.854.854 0 00.51-.766c.03-1.682.006-3.372-.076-5.053-.031-.596-.528-.83-1.046-.996-.546.333-1.212.464-1.85.464-.677 0-1.942-.157-2.993-1.18-.266-.258-.447-.661-.57-1.108-.32-.032-.64-.049-.96-.05zm-2.525 4.013c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zm5 0c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zM7.635 5.087c-1.05.102-1.935.438-2.385.906-.975 1.037-.765 3.668-.21 4.224.405.394 1.17.657 1.995.657h.09c.649-.013 1.785-.176 2.73-1.11.435-.41.705-1.433.675-2.47-.03-.834-.27-1.52-.63-1.813-.39-.336-1.275-.482-2.265-.394zm6.465.394c-.36.292-.6.98-.63 1.813-.03 1.037.24 2.06.675 2.47.968.957 2.136 1.104 2.776 1.11h.044c.825 0 1.59-.263 1.995-.657.555-.556.765-3.187-.21-4.224-.45-.468-1.335-.804-2.385-.906-.99-.088-1.875.058-2.265.394zM12 7.615c-.24 0-.525.015-.84.044.03.16.045.336.06.526l-.001.159a2.94 2.94 0 01-.014.25c.225-.022.425-.027.612-.028h.366c.187 0 .387.006.612.028-.015-.146-.015-.277-.015-.409.015-.19.03-.365.06-.526a9.29 9.29 0 00-.84-.044z"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/grok.svg b/website/assets/agent-icons/grok.svg
new file mode 100644
index 00000000..efb1a618
--- /dev/null
+++ b/website/assets/agent-icons/grok.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Grok</title><path d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/herdr-mask.svg b/website/assets/agent-icons/herdr-mask.svg
new file mode 100644
index 00000000..b3d8b310
--- /dev/null
+++ b/website/assets/agent-icons/herdr-mask.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g fill="white" transform="translate(0 512) scale(.1 -.1)"><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>
\ No newline at end of file
diff --git a/website/assets/agent-icons/hermes.svg b/website/assets/agent-icons/hermes.svg
new file mode 100644
index 00000000..2521a105
--- /dev/null
+++ b/website/assets/agent-icons/hermes.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Hermes Agent</title><path d="M5.938 12.835c.127-.039.285.02.373.143.028.038.036.092.046.14.003.014-.02.033-.04.05-.124-.098-.24-.194-.354-.291-.011-.01-.016-.027-.025-.042zM8.396 9.412c.195-.032.39-.06.588-.05a.54.54 0 01.148.026c.202.071.402.147.601.224.028.01.05.036.075.055l-.013.027a9.203 9.203 0 01-.26-.089c-.115-.038-.213-.077-.315-.098-.25-.05-.25-.046-.292-.014l.574.144c.275.139.55.276.823.417.042.022.09.057.107.098.026.06.063.076.117.072.066-.006.132-.017.213-.027l-.04.086c.051.08.142.02.216.064-.074.13-.247.09-.334.199l.061.074-.12.087c0 .106-.038.168-.306.243l.026.085-.196.042.07.124h-.25l-.007.137c-.081-.01-.161-.018-.244-.027l-.053.123c-.027-.008-.052-.011-.073-.023-.067-.038-.128-.056-.195.006-.019.017-.063.014-.093.008-.026-.006-.05-.029-.07-.042-.11.095-.11.095-.208.003-.057.046-.12.074-.186.011-.063.027-.123-.02-.178-.014-.07.007-.097-.035-.133-.07l-.13.033c-.013-.236-.194-.19-.34-.203.005-.072.05-.092.095-.094a.474.474 0 01.159.022c.164.05.32.12.496.138.203.021.405.029.601-.015.265-.059.52-.149.707-.365.049-.056.083-.127.117-.195.019-.038.02-.084-.02-.116a1.397 1.397 0 00-.382-.217c.024.12-.031.182-.115.221 0 .014-.004.025 0 .03.08.115.084.16-.007.267a1.39 1.39 0 01-.218.211.477.477 0 01-.641-.05 1.36 1.36 0 01-.133-.152c-.078-.107-.076-.108-.033-.236-.165-.08-.128-.226-.104-.364.008-.05.028-.096.049-.163-.04.014-.067.017-.087.032a.897.897 0 00-.316.357c-.007.016-.01.034-.02.047-.012.015-.034.038-.045.035-.02-.006-.037-.027-.05-.045-.008-.012-.007-.032-.012-.057h-.126l.053-.172a14.82 14.82 0 00-.039-.049l.11-.284c-.06.026-.091.044-.124.051-.03.007-.064 0-.095 0 0-.031-.01-.07.004-.092.149-.22.305-.428.593-.476z"></path><path d="M8.06 10.788c-.003-.038-.004-.075.037-.062.016.006.034.048.028.067-.01.04-.038.032-.064-.005z"></path><path clip-rule="evenodd" d="M11.981.009c.226-.012.453-.011.679 0 .247.01.495.024.74.062.401.064.798.157 1.19.273.463.138.92.299 1.356.511a7.31 7.31 0 012.948 2.642c.292.469.536.963.739 1.479.219.556.446 1.11.623 1.683.204.654.329 1.326.458 1.997.097.504.182 1.01.29 1.511.156.722.329 1.44.494 2.16.186.812.4 1.615.63 2.415.102.355.193.713.282 1.072.11.436.202.876.254 1.323.031.278.066.557.073.837a7.56 7.56 0 01-.017.88c-.037.413-.1.818-.226 1.212a5.017 5.017 0 01-.915 1.649l-.13.156.018.023c.043-.023.088-.041.127-.068.2-.138.373-.307.531-.49.4-.46.721-.973.975-1.529a3.59 3.59 0 00.325-1.72c-.024-.424-.097-.834-.3-1.213-.013-.027-.015-.06-.03-.121.05.035.082.048.101.072.107.13.22.258.315.398.33.494.46 1.052.486 1.64a3.75 3.75 0 01-.47 1.97c-.36.655-.887 1.14-1.526 1.506-.193.111-.394.21-.595.308-.157.078-.248.211-.318.365a.522.522 0 00-.033.406.359.359 0 01.013.139c-.005.077-.077.155-.14.162-.054.006-.125-.043-.15-.116a1.206 1.206 0 01-.06-.233c-.04-.314-.155-.6-.308-.87a3.906 3.906 0 00-.73-.91 2.129 2.129 0 00-.897-.524 4.093 4.093 0 00-.692-.131c-.075-.008-.15-.04-.22.01.18.06.363.11.538.18.434.173.82.43 1.18.728.308.255.58.543.794.884.098.155.186.315.227.496.027.123.042.25.067.375.013.062-.002.109-.053.144-.047.033-.122.034-.163-.01a.455.455 0 01-.08-.14c-.03-.073-.038-.159-.078-.225a7.314 7.314 0 00-1.423-1.664c-.16-.137-.329-.26-.537-.323-.376-.114-.753-.203-1.15-.154-.213.025-.427.032-.64.053a1.6 1.6 0 00-.736.278 5.14 5.14 0 00-.834.72c-.329.342-.642.699-.955 1.055-.136.155-.264.319-.314.531a5.227 5.227 0 00-.012.051.096.096 0 01-.09.076h-.31c-.046 0-.082-.048-.072-.094.023-.108.045-.216.07-.324.075-.325.19-.635.368-.917.024-.039.04-.088.104-.08l.01.049.027.077c.28-.435.571-.834.996-1.135.283-.204.584-.378.89-.55a.196.196 0 00-.098-.002c-.162.043-.325.084-.485.134-.402.124-.764.33-1.11.566-.147.1-.298.193-.414.333a7.314 7.314 0 00-1.07 1.767.845.845 0 00-.04.12.075.075 0 01-.072.056h-.494c-.04 0-.062-.051-.036-.082.123-.14.246-.282.377-.415.275-.281.58-.532.777-.884.027-.048.063-.09.095-.135.238-.333.54-.607.818-.902.082-.086.175-.16.26-.24.029-.027.053-.057.079-.085l-.018-.025-.135.041c-.034.017-.07.031-.102.05-.248.144-.494.292-.743.433-.408.23-.825.439-1.209.711-.281.2-.591.358-.889.533-.02.012-.044.015-.08.028-.015-.135.143-.201.108-.336-.033.014-.064.02-.085.038-.111.096-.227.19-.328.296-.148.157-.284.325-.425.488-.125.143-.25.286-.373.431A.153.153 0 019.89 24H8.762a.316.316 0 00.016-.042c.028-.09.085-.172.083-.28-.091-.018-.162.001-.212.077a4.45 4.45 0 00-.136.215c-.01.016-.024.03-.042.03h-.093c-.019 0-.029-.022-.017-.037.071-.088.14-.178.209-.268.001-.002-.006-.012-.012-.024-.014.004-.03.006-.045.013-.176.09-.352.181-.527.274a.363.363 0 01-.168.042H5.202c-.026 0-.039-.036-.019-.053.21-.178.402-.374.558-.605.335-.496.538-1.047.667-1.629.004-.02-.003-.043-.006-.091-.037.048-.059.072-.076.1a1.943 1.943 0 01-.334.415c-.28.258-.59.448-.983.464-.297.012-.588 0-.865-.127-.46-.21-.722-.57-.794-1.072-.025-.17-.017-.171-.182-.219A3.513 3.513 0 011.97 20.6a2.286 2.286 0 01-.808-1.13 3.569 3.569 0 01-.16-1.245c.002-.034.016-.067.024-.1.032.023.046.043.05.066.033.153.059.308.096.46.086.355.257.664.516.92.258.256.571.419.91.532.358.118.717.138 1.07-.016a1.89 1.89 0 00.621-.452c.328-.348.533-.76.648-1.223.009-.034.005-.071.007-.11-.015.006-.026.006-.03.011-.031.05-.064.1-.093.152-.284.502-.679.887-1.196 1.135-.351.17-.718.255-1.11.159a1.607 1.607 0 01-.971-.64 2.006 2.006 0 01-.368-.924 2.903 2.903 0 01.02-.886c.05-.439.466-1.17.742-1.271-.02.063-.035.112-.053.16-.043.116-.097.227-.13.345a1.901 1.901 0 00-.05.82c.033.212.09.416.204.6.147.236.346.407.62.465.11.023.225.014.338.018a.576.576 0 00.386-.131c.164-.128.282-.292.366-.481.168-.375.24-.777.309-1.179.05-.296.093-.594.133-.893.039-.281.071-.563.104-.845.026-.232.048-.464.074-.696.024-.228.052-.455.076-.683.024-.227.047-.455.069-.683.013-.14.022-.28.034-.42l.037-.417c.022-.25.041-.5.065-.748.008-.082-.02-.132-.09-.177a2.46 2.46 0 01-.492-.418c-.1-.109-.188-.228-.282-.342-.035-.042-.056-.097-.116-.118a2.084 2.084 0 00.275.597c.06.092.131.176.196.265.063.086.182.115.234.226-.028.003-.046.01-.06.006a4.74 4.74 0 01-.22-.057 2.71 2.71 0 01-1.287-.819c-.435-.487-.656-1.076-.71-1.723a5.206 5.206 0 01.014-1.06c.072-.602.22-1.186.45-1.745.155-.376.338-.741.526-1.102.205-.393.466-.75.765-1.076.512-.559 1.104-1.024 1.726-1.448.717-.49 1.478-.898 2.277-1.233C8.244.828 8.767.632 9.31.494c.655-.166 1.31-.33 1.982-.415.229-.03.458-.058.688-.07zm-1.847 22.82c-.07.06-.147.111-.207.18-.238.27-.464.549-.668.869l-.044.108a.177.177 0 00.093-.057c.174-.19.351-.378.519-.574.104-.122.195-.255.288-.386.024-.034.03-.08.046-.12l-.027-.02zm1.65-3.695a5.51 5.51 0 00-.653.593l-.37.386a.963.963 0 01-.377.25 1.372 1.372 0 01-.467.09c-.044 0-.087.006-.151.012.028.058.043.097.064.131.15.242.301.482.45.724.136.22.276.438.399.666.068.125.105.267.156.404.077.027.14-.018.202-.048.29-.135.579-.274.867-.412.213-.101.437-.186.636-.31.347-.215.68-.455 1.018-.685.015-.01.026-.028.042-.046-.023-.019-.038-.037-.056-.044-.287-.111-.527-.3-.77-.482a5.319 5.319 0 01-.506-.42 1.757 1.757 0 01-.41-.653c-.019-.049-.045-.095-.075-.156zm-5.847.264c-.06.096-.097.194-.132.293a3.38 3.38 0 01-.555 1.01c-.2.25-.455.412-.762.493-.23.06-.464.076-.7.07-.048-.002-.097.002-.158.005.016.04.021.066.035.085.1.145.23.246.4.295.157.046.316.034.498.023.181-.037.343-.115.485-.234.238-.199.402-.454.536-.732.175-.363.264-.751.342-1.144.01-.053.008-.11.011-.164zm14.945-4.586c.008.029.016.057.027.107.024.155.051.31.072.464.03.219.067.437.078.657.017.344.027.689-.014 1.033-.037.315-.063.633-.116.946a6.153 6.153 0 01-.46 1.518c-.008.018-.01.039-.02.082.047-.03.077-.042.098-.064.085-.083.17-.167.248-.255.271-.305.458-.66.596-1.043.18-.498.228-1.011.145-1.531-.103-.65-.33-1.263-.597-1.881a9.055 9.055 0 00-.024-.055l-.033.022zM5.797 8.29a.26.26 0 00.018.153c.124.251.25.501.379.75.025.049.066.09.03.163-.284.06-.578.119-.88.255.059.038.097.06.132.087.042.032.112.058.09.12-.01.033-.075.048-.117.072.017.01.043.021.067.036.166.102.33.207.447.368.138.192.229.404.188.644-.079.469-.306.85-.69 1.132-.054.04-.106.083-.161.122a.243.243 0 00-.103.245.77.77 0 00.055.195c.083.196.22.35.375.492.083.076.159.164.222.257a.37.37 0 01.025.377c-.023.05-.05.099-.076.148-.03.06-.028.111.022.162.041.042.08.089.112.138.038.058.078.079.147.05a.486.486 0 01.333-.006c.16.046.302.126.444.21.13.077.264.149.4.219.067.035.14.05.219.026.071-.022.124.01.145.076.02.064-.003.108-.074.139-.07.03-.137.063-.209.088-.1.035-.201.073-.314.077-.013-.107.11-.088.127-.159-.206-.126-.643-.145-.801-.034.063.112.035.21-.096.313-.13-.1-.025-.202.002-.3a.209.209 0 00-.249.17c-.015.101.067.216.178.224.108.007.218-.005.326-.012.06-.005.12-.027.199 0-.103.123-.248.127-.357.19.002.05.07.086.019.131-.053.048-.095-.001-.132-.03-.08-.063-.16-.126-.231-.197a.474.474 0 01-.157-.311.52.52 0 00-.043-.172c-.032-.074-.032-.137.033-.19-.018-.03-.028-.053-.045-.072a1.222 1.222 0 01-.196-.369c-.053-.137-.046-.264.048-.381.024-.03.05-.06.064-.095a.664.664 0 00.047-.168c.017-.165-.064-.287-.182-.387-.186-.156-.36-.322-.46-.551-.005-.011-.024-.017-.037-.026-.011.017-.024.027-.025.038-.019.185-.045.37-.052.557-.014.377.058.743.162 1.104.118.41.289.798.488 1.173.267.502.537 1.002.812 1.5.055.098.13.189.208.27.198.202.452.272.724.273.202 0 .404-.006.605-.026.295-.03.59-.073.884-.113.183-.025.365-.057.548-.08.21-.026.38.073.522.21.16.156.305.327.447.5.22.265.397.56.554.867.05.098.07.1.147.03.13-.121.26-.242.394-.36.067-.059.088-.12.067-.213a3.535 3.535 0 01-.085-.796c.002-.157.006-.314.018-.471.015-.224.03-.45.06-.672a59.114 59.114 0 01.362-2.298c.087-.493.182-.984.268-1.477.06-.347.118-.694.162-1.043.034-.273.055-.55.063-.825.011-.332.003-.665.002-.998 0-.077.004-.155-.01-.23-.028-.142-.01-.155-.162-.19a5.826 5.826 0 00-.607-.107c-.146-.018-.207-.053-.221-.19-.006-.049-.025-.098-.041-.146-.009-.025-.024-.048-.046-.09l-.025.264c-.009.096-.029.116-.127.115-.055 0-.11-.008-.164-.008-.476 0-.952-.008-1.426.032-.095.008-.173-.015-.226-.103-.04-.066-.088-.126-.134-.186-.063-.084-.086-.093-.182-.06-.195.068-.388.138-.582.21a2.71 2.71 0 00-.675.394.986.986 0 01-.323.168c-.033.01-.07.008-.127.013.02-.066.024-.114.047-.15.064-.105.135-.205.205-.306.023-.033.049-.063.073-.095l-.015-.023-.201.037c-.146.04-.296.07-.437.122-.148.053-.266.023-.386-.072a3.623 3.623 0 01-.733-.786l-.093-.132zm8.592 8.963l-.147.09c-.22.134-.44.266-.659.402-.093.058-.184.12-.27.188-.085.07-.124.161-.072.272.047.1.093.2.147.294.047.08.124.138.213.147.11.01.228.012.336-.012.217-.05.372-.205.528-.357a.291.291 0 00.087-.308c-.046-.18-.079-.365-.118-.547-.011-.052-.027-.103-.045-.169zm-.257-2.409c-.12.291-.205.597-.325.91-.151.433-.294.87-.435 1.323.036-.01.054-.01.067-.018.261-.16.522-.324.785-.484.054-.033.071-.078.065-.138-.012-.13-.024-.262-.034-.393l-.068-.886c-.008-.103-.02-.206-.029-.31-.009 0-.017-.002-.026-.004zm3.081-8.13l.099.285c.08.231.159.463.24.714l.58 1.952c.187.63.372 1.262.558 1.893.114.382.235.762.343 1.146.072.257.126.519.186.799.044.206.087.413.127.64.034.106.023.226.077.325l.025-.006-.068-.362c-.038-.206-.077-.412-.113-.638-.015-.07-.029-.141-.046-.211-.095-.396-.177-.796-.29-1.187-.196-.685-.413-1.364-.618-2.046-.165-.549-.322-1.1-.488-1.648-.069-.227-.15-.45-.226-.695l-.117-.336c-.037-.107-.075-.216-.115-.322-.04-.106-.084-.21-.127-.314a7.558 7.558 0 01-.027.01zM6.225 14.304c-.063-.001-.115.014-.134.083a.35.35 0 00.41.012 4.533 4.533 0 00-.276-.095zM5.23 11.98c-.026-.027-.057-.048-.075.002-.012.032-.007.07-.01.113.082-.037.082-.037.085-.115zm.062-1.189a.135.135 0 00-.088.056.197.197 0 00-.025.11c.005.152.01.306.026.457a.751.751 0 00.066.218c.061.136.157.167.288.101.055-.027.06-.054.025-.11a4.52 4.52 0 01-.129-.211c-.015-.068-.066-.131-.033-.207.04-.09-.076-.116-.074-.19V10.874c-.003-.038-.006-.087-.056-.083zm-.017-.968a.867.867 0 00-.467.127c-.076.045-.084.07-.05.158.034.087.07.173.115.254.064.117.09.125.21.077a.657.657 0 01.336-.053c.202.022.357.136.504.264l.092.077c.007-.006.014-.013.022-.018-.019-.105-.035-.226-.149-.264-.157-.053-.324-.075-.508-.117l-.24-.005c.24-.169.452-.044.687.009-.063-.115-.153-.147-.23-.193-.082-.05-.17-.092-.25-.144-.06-.037-.12-.08-.072-.172zm10.233.325c-.23-.01-.427.08-.608.211-.034.026-.06.065-.105.117.087.026.15.046.232.065.044-.015.088-.03.13-.046.306-.114.61-.115.904.031.126.063.237.04.366-.005-.02-.031-.03-.054-.045-.071a.986.986 0 00-.448-.273c-.14-.044-.284-.024-.426-.03zM7.99 6.483a.308.308 0 00.002.133c.08.321.156.643.242.962.104.387.27.75.456 1.103.02.037.061.08.098.087a.404.404 0 00.253-.051l-.472-.84c-.23-.448-.405-.92-.579-1.394zM10.397.497c-.2-.008-.405.004-.603.034-.236.035-.47.087-.7.152-.287.08-.569.18-.852.273-.04.013-.074.038-.11.058.028.014.05.018.07.014.287-.068.58-.085.873-.09.134-.002.269.009.402.025.19.024.382.048.57.09.456.104.874.3 1.265.556.464.306.888.66 1.257 1.078.205.232.395.475.56.739.17.274.315.561.449.856.273.601.456 1.232.6 1.876.04.173.07.348.1.524.017.104.065.167.17.19.122.028.2.105.22.251-.003.102-.06.174-.129.24a1.065 1.065 0 00-.268.358.164.164 0 00.083-.039c.08-.086.162-.172.235-.265a.56.56 0 00.13-.333c.009-.05.022-.1.024-.15.007-.124-.017-.15-.143-.168-.025-.004-.049-.014-.073-.015-.082-.007-.125-.063-.137-.131-.033-.198-.004-.355.247-.408.086-.018.174-.03.26-.042.158-.023.315-.053.473-.067.14-.012.19.033.226.167.008.029.018.057.021.087.019.179-.008.225-.141.288-.027.013-.055.024-.078.042a.148.148 0 00-.051.067c-.039.144.073.382.206.445l.673.32c.023.011.05.015.075.023l.018-.026c-.015-.008-.032-.013-.044-.024a2.27 2.27 0 00-.544-.32 4.898 4.898 0 00-.173-.075.203.203 0 01-.126-.191c-.003-.085.045-.154.128-.187l.059-.025c.099-.044.118-.076.112-.187a.384.384 0 00-.008-.063c-.067-.294-.123-.59-.205-.88a9.478 9.478 0 00-.826-2.036 7.465 7.465 0 00-1.39-1.805 4.536 4.536 0 00-1.177-.824 3.656 3.656 0 00-1.016-.328 6.155 6.155 0 00-.712-.074zm6.719 5.955c.01.014.018.028.038.034l-.022-.044-.016.01zM4.103 3.917a.062.062 0 01-.03.012.455.455 0 01-.04.039c-.01.01-.02.02-.045.04l-.363.354c-.088.085-.17.178-.266.253-.284.22-.425.53-.544.855a.132.132 0 00-.007.071c.013.055.033.108.052.168l.074.026c-.017.056-.03.105-.047.152-.058.164-.118.327-.175.491-.005.015.008.036.019.077.08-.175.158-.33.225-.489.228-.544.484-1.074.819-1.561.09-.133.182-.266.283-.401.004-.006.007-.013.022-.03.001-.016.003-.032.015-.04l.008-.017zm12.976 2.408a.023.023 0 01.009.019.073.073 0 00-.006.01.188.188 0 00.007.02l.018.022c.002-.007.007-.016.005-.021-.003-.01-.012-.018-.02-.038a1.331 1.331 0 01-.013-.012zM4.199 4.48c-.003.004-.008.008-.027.014-.005.013-.011.025-.031.047a2.085 2.085 0 01-.124.167c-.048.07-.116.055-.181.041-.134-.028-.228.016-.287.143-.089.187-.187.37-.273.56-.049.108-.11.216-.118.36.081.003.154.007.228.008h.228a2.563 2.563 0 01-.079.264c-.01.052-.022.103-.033.155l.02.004c.018-.046.037-.092.067-.153.066-.142.13-.285.2-.426.02-.04.034-.1.116-.092 0 .043.004.084 0 .124-.005.045-.017.09-.028.143.141.043.086.174.115.269.102-.022.104-.195.248-.144v.205l.017.002.439-1.059c-.13 0-.246-.02-.358.033-.024.011-.058-.001-.108-.004.075-.15.139-.278.211-.417a.128.128 0 01.025-.036c0-.015-.001-.03.008-.038l.006-.02c-.005.006-.01.011-.028.017-.004.012-.009.024-.026.045a.085.085 0 01-.032.033c-.123.157-.09.164-.258.106-.079-.027-.078-.028-.047-.144.028-.046.056-.093.098-.15 0-.016-.001-.032.007-.042L4.2 4.48zm2.073-.67c-.003.006-.007.011-.027.016-.094.125-.194.246-.28.377-.155.238-.301.481-.451.723-.14.224-.345.368-.575.481-.017.008-.04.006-.079.011.012-.059.016-.109.033-.153a6.076 6.076 0 01.229-.518l-.007-.02a.138.138 0 01-.035.025c-.028.05-.055.1-.093.164-.26.424-.443.817-.442.95.024.004.048.011.073.013.177.013.188.007.26-.165.03-.07.077-.12.147-.15l.175-.07c.044-.018.085-.057.146-.032.003.05-.01.11.014.145.042.062.044.125.047.193.002.049.017.098.026.147.029-.034.039-.065.05-.097.142-.39.277-.782.428-1.17.1-.256.22-.504.33-.756.013-.03.013-.067.03-.092V3.81zm3.987-.34c0 .045.01.084.021.123.042.16.094.318.124.48.024.133.023.27.028.406 0 .033-.019.067-.032.11-.094-.058-.047-.158-.106-.215h-.125c-.015.072-.01.152-.046.2-.066.085-.155.154-.236.227-.043.038-.078.018-.103-.025l-.046-.087c-.065.035-.117.069-.172.093-.116.051-.235.095-.35.147-.085.038-.09.053-.07.147.014.075.034.148.047.223.013.072.05.109.123.124.233.05.462.115.657.265.058-.102.058-.102.168-.151.03-.014.06-.03.092-.042.08-.03.115-.017.15.06.023.048.041.098.066.158.06-.14-.042-.267.017-.416.157.18.24.39.375.567a.235.235 0 00.022-.098c.002-.124 0-.247.002-.371 0-.034.013-.067.02-.1l.032-.003c.11.155.13.354.226.52a3.036 3.036 0 00-.01-.392c-.004-.045 0-.074.05-.088.08.036.116.14.215.158-.03-.275-.423-1.137-.798-1.635-.114-.127-.2-.28-.34-.386zm-2.667.696c-.019.034-.03.05-.037.067-.061.185-.125.37-.18.556-.031.105-.087.169-.195.19-.09.019-.178.052-.268.073-.038.009-.089.015-.118-.003-.024-.016-.025-.069-.036-.106-.064.076-.082.087-.17.047-.133-.062-.262-.135-.393-.201-.048-.025-.093-.063-.17-.03-.043.12-.091.25-.137.382-.099.28-.087.242.095.453.046.048.102.03.154.023.054-.009.106-.03.16-.036.13-.013.26-.08.367-.015.204-.064.387-.122.571-.178.05-.015.089.005.114.054.022.042.034.093.082.121.038-.056-.013-.128.063-.178l.14.241-.042-1.46zm.278.358c-.096-.01-.107.01-.11.108-.002.038-.003.078.002.115.03.2.099.386.174.57.002.006.012.01.022.015l.078-.05c.052.036.081.088.153.088.205-.002.41.014.616.012.099-.001.158.042.205.12.018.03.024.077.088.066l-.08-.394c-.05-.195-.085-.395-.172-.589-.057.057-.114.068-.18.046a.72.72 0 00-.135-.028c-.22-.028-.44-.059-.66-.08zm10.254-1.727c.089.163.155.316.139.491-.016.168.026.342-.044.516-.047-.033-.088-.082-.112-.075-.117.035-.164-.057-.227-.115a4.772 4.772 0 01-.286-.29l-.104-.113a4.856 4.856 0 01-.023.019c.035.046.07.093.11.156.04.064.084.127.122.193.034.058.065.118.031.205-.082-.01-.164-.019-.246-.032-.06-.01-.101 0-.124.07-.031.098-.037.096-.15.09.02.042.036.08.057.116.041.074.03.138-.03.196-.06.06-.118.122-.178.181a.175.175 0 01-.185.046c-.222-.061-.447-.113-.67-.174-.032-.009-.063-.04-.086-.068-.03-.04-.052-.087-.08-.13-.044-.07-.09-.138-.136-.207a.18.18 0 00-.014.105c.012.127.03.253.035.38.005.1-.024.12-.121.104-.104-.017-.206-.04-.31-.058-.064-.012-.131-.028-.202.03l.081.208c.09 0 .166-.01.237.002a.819.819 0 01.458.251c.078.083.154.168.241.26l.018-.005c-.004-.006-.008-.013-.01-.04.014-.056-.062-.118.018-.178.031.03.064.057.088.09.058.078.111.159.169.257l.089.141.024-.013a2093.819 2093.819 0 01-.427-.934c.055.007.083.007.108.016.193.07.385.142.577.216.074.028.147.06.219.094.062.028.112.018.157-.033.05-.056.102-.112.154-.167.05-.051.095-.046.132.014.016.025.026.053.04.08.071.138.143.277.217.433l.159.308.025-.011c-.044-.106-.07-.218-.138-.334-.057-.182-.168-.346-.206-.545.136.034.362.326.567.732l.057.074.018-.011a1.563 1.563 0 01-.052-.127c-.046-.145-.097-.29-.136-.436-.022-.083-.036-.173.022-.26l.109.058-.026-.207.027-.016c.022.02.05.036.065.06.073.108.143.22.215.33.01.016.029.029.043.043-.036-.217-.2-.38-.229-.626l.155.112c.014-.166.012-.319.042-.465.032-.158-.023-.297-.063-.445.024.004.036.006.055.025.092.124.183.249.277.371.02.027.05.047.069.087l.04.063.019-.015a.293.293 0 01-.053-.082 27.922 27.922 0 01-.332-.49c-.221-.311-.363-.467-.485-.521zm-6.57.327c-.003.161.092.275.069.415l-.368.087c.09.139.032.237-.052.331-.05.057-.092.122-.143.178-.037.04-.046.078-.018.126l.16.275c.029.048.072.066.128.064.076-.003.152 0 .228-.001.116-.003.216.022.275.137.006.014.02.024.044.052.004-.059-.003-.098.01-.13.016-.04.04-.099.072-.108.084-.023.173-.024.26-.03.013-.001.027.018.04.029l.071.065c.019-.11-.082-.198-.024-.31l.126.04c-.026-.123-.07-.245-.071-.366 0-.123.051-.243.115-.36.107.062.16.156.234.253.183.265.36.533.494.834.165-.078.27.068.407.088-.003-.106-.133-.441-.197-.492a.142.142 0 00-.102-.028c-.06.011-.119.039-.191.063-.025-.039-.056-.078-.077-.122a3.936 3.936 0 00-.473-.783c-.076-.094-.16-.182-.228-.26l-.391.285c-.049.035-.094.03-.132-.017l-.169-.207c-.025-.03-.053-.059-.097-.108z"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/kimi.svg b/website/assets/agent-icons/kimi.svg
new file mode 100644
index 00000000..83878fa2
--- /dev/null
+++ b/website/assets/agent-icons/kimi.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Kimi</title><path d="M21.846 0a1.923 1.923 0 110 3.846H20.15a.226.226 0 01-.227-.226V1.923C19.923.861 20.784 0 21.846 0z" fill="#1783FF"></path><path d="M11.065 11.199l7.257-7.2c.137-.136.06-.41-.116-.41H14.3a.164.164 0 00-.117.051l-7.82 7.756c-.122.12-.302.013-.302-.179V3.82c0-.127-.083-.23-.185-.23H3.186c-.103 0-.186.103-.186.23V19.77c0 .128.083.23.186.23h2.69c.103 0 .186-.102.186-.23v-3.25c0-.069.025-.135.069-.178l2.424-2.406a.158.158 0 01.205-.023l6.484 4.772a7.677 7.677 0 003.453 1.283c.108.012.2-.095.2-.23v-3.06c0-.117-.07-.212-.164-.227a5.028 5.028 0 01-2.027-.807l-5.613-4.064c-.117-.078-.132-.279-.028-.381z" fill="#fff"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/kiro-mask.svg b/website/assets/agent-icons/kiro-mask.svg
new file mode 100644
index 00000000..c01b543b
--- /dev/null
+++ b/website/assets/agent-icons/kiro-mask.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"><path d="M398.554 818.914C316.315 1001.03 491.477 1046.74 620.672 940.156C658.687 1059.66 801.052 970.473 852.234 877.795C964.787 673.567 919.318 465.357 907.64 422.374C827.637 129.443 427.623 128.946 358.8 423.865C342.651 475.544 342.402 534.18 333.458 595.051C328.986 625.86 325.507 645.488 313.83 677.785C306.873 696.424 297.68 712.819 282.773 740.645C259.915 783.881 269.604 867.113 387.87 823.883L399.051 818.914H398.554Z" fill="white"/><path d="M636.123 549.353C603.328 549.353 598.359 510.097 598.359 486.742C598.359 465.623 602.086 448.977 609.293 438.293C615.504 428.852 624.697 424.131 636.123 424.131C647.555 424.131 657.492 428.852 664.447 438.541C672.398 449.474 676.623 466.12 676.623 486.742C676.623 525.998 661.471 549.353 636.375 549.353H636.123Z" fill="black"/><path d="M771.24 549.353C738.445 549.353 733.477 510.097 733.477 486.742C733.477 465.623 737.203 448.977 744.41 438.293C750.621 428.852 759.814 424.131 771.24 424.131C782.672 424.131 792.609 428.852 799.564 438.541C807.516 449.474 811.74 466.12 811.74 486.742C811.74 525.998 796.588 549.353 771.492 549.353H771.24Z" fill="black"/></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/kiro.svg b/website/assets/agent-icons/kiro.svg
new file mode 100644
index 00000000..5fe3cf68
--- /dev/null
+++ b/website/assets/agent-icons/kiro.svg
@@ -0,0 +1,11 @@
+<svg width="1200" height="1200" viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1200" height="1200" rx="260" fill="#9046FF"/>
+<mask id="mask0_1106_4856" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="272" y="202" width="655" height="796">
+<path d="M926.578 202.793H272.637V997.857H926.578V202.793Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1106_4856)">
+<path d="M398.554 818.914C316.315 1001.03 491.477 1046.74 620.672 940.156C658.687 1059.66 801.052 970.473 852.234 877.795C964.787 673.567 919.318 465.357 907.64 422.374C827.637 129.443 427.623 128.946 358.8 423.865C342.651 475.544 342.402 534.18 333.458 595.051C328.986 625.86 325.507 645.488 313.83 677.785C306.873 696.424 297.68 712.819 282.773 740.645C259.915 783.881 269.604 867.113 387.87 823.883L399.051 818.914H398.554Z" fill="white"/>
+<path d="M636.123 549.353C603.328 549.353 598.359 510.097 598.359 486.742C598.359 465.623 602.086 448.977 609.293 438.293C615.504 428.852 624.697 424.131 636.123 424.131C647.555 424.131 657.492 428.852 664.447 438.541C672.398 449.474 676.623 466.12 676.623 486.742C676.623 525.998 661.471 549.353 636.375 549.353H636.123Z" fill="black"/>
+<path d="M771.24 549.353C738.445 549.353 733.477 510.097 733.477 486.742C733.477 465.623 737.203 448.977 744.41 438.293C750.621 428.852 759.814 424.131 771.24 424.131C782.672 424.131 792.609 428.852 799.564 438.541C807.516 449.474 811.74 466.12 811.74 486.742C811.74 525.998 796.588 549.353 771.492 549.353H771.24Z" fill="black"/>
+</g>
+</svg>
diff --git a/website/assets/agent-icons/opencode.svg b/website/assets/agent-icons/opencode.svg
new file mode 100644
index 00000000..9c4cb89e
--- /dev/null
+++ b/website/assets/agent-icons/opencode.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>opencode</title><path d="M16 6H8v12h8V6zm4 16H4V2h16v20z"></path></svg>
\ No newline at end of file
diff --git a/website/assets/agent-icons/pi.svg b/website/assets/agent-icons/pi.svg
new file mode 100644
index 00000000..df44f948
--- /dev/null
+++ b/website/assets/agent-icons/pi.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+  <path fill="#fff" fill-rule="evenodd" d="
+    M165.29 165.29
+    H517.36
+    V400
+    H400
+    V517.36
+    H282.65
+    V634.72
+    H165.29
+    Z
+    M282.65 282.65
+    V400
+    H400
+    V282.65
+    Z
+  "/>
+  <path fill="#fff" d="M517.36 400 H634.72 V634.72 H517.36 Z"/>
+</svg>
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 6783dd5d..72c150e9 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -54,10 +54,6 @@ export default defineConfig({
       title: 'herdr',
       description: 'Terminal-native agent runtime and multiplexer.',
       favicon: '/assets/favicon.png?v=14',
-      logo: {
-        src: './public/assets/logo.svg',
-        alt: 'herdr',
-      },
       social: [
         {
           icon: 'github',
diff --git a/website/css/style.css b/website/css/style.css
index d4a46d8e..979d9bb8 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -10,41 +10,285 @@
 }
 
 :root {
-    --bg: #f7f3ea;
-    --bg-soft: #efe8dc;
-    --paper: #fffdf8;
-    --paper-muted: #f6f0e6;
-    --grass: #e3f3d0;
-    --wool: #fff8e9;
-    --ink: #151a21;
-    --ink-soft: #303944;
-    --muted: #687381;
-    --muted-2: #8a928f;
-    --line: #ded6c8;
-    --line-strong: #c9bdad;
-    --terminal: #151a21;
-    --terminal-2: #202731;
-    --terminal-3: #2a3340;
-    --accent: #1f6f68;
-    --accent-dark: #124d49;
-    --accent-soft: #d9eee9;
-    --blue: #2563eb;
-    --blue-soft: #dce7ff;
-    --green: #2f8a4f;
-    --yellow: #9a6a00;
-    --red: #c43f5f;
-    --shadow: 0 24px 80px rgb(35 29 21 / 0.12);
-    --radius-lg: 28px;
-    --radius-md: 18px;
-    --radius-sm: 12px;
+    --bg: #f0eee9;
+    --bg-elevated: #f5f3ee;
+    --ink: #1a1a18;
+    --ink-soft: #3a3a36;
+    --muted: #6b6b66;
+    --muted-2: #8a8a84;
+    --line: #d8d6d0;
+    --line-strong: #c4c2bb;
+    --terminal: #0c0c0b;
+    --terminal-2: #131312;
+    --accent: #4a9eff;
+    --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+    --green: #2d9f52;
+    --yellow: #b8860b;
+    --red: #c73e3e;
+    --radius-lg: 6px;
+    --radius-md: 4px;
+    --radius-sm: 2px;
     --max: 1160px;
-    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
-        monospace;
-    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-        "Segoe UI", sans-serif;
-}
-
-*,
+    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --term-bg: #1a1d22;
+    --term-sidebar-bg: #15181d;
+    --term-active-bg: #20242c;
+    --term-tab-bg: #20242c;
+    --term-tab-active-bg: #4a9eff;
+    --term-tab-active-text: #0c0c0b;
+    --term-border: #2b3038;
+    --term-text: #c8cdd4;
+    --term-muted: #5a6068;
+    --term-prompt: #4a9eff;
+    --term-cmd: #8ecf7a;
+    --term-str: #e6c060;
+    --term-dim: #6a7078;
+    --term-blue: #4a9eff;
+    --term-green-bright: #7ecf8a;
+    --logo-filter: none;
+    --logo-opacity: 0.72;
+}
+
+[data-palette="herdr"] {
+  --bg: #0c0c0b; --bg-elevated: #131312; --ink: #f0ece0; --ink-soft: #dedad0;
+  --muted: #8a8a80; --muted-2: #5c5c55; --line: #252522; --line-strong: #2e2e2b;
+  --terminal: #0c0c0b; --terminal-2: #131312; --accent: #4a9eff;
+  --green: #52c97a; --yellow: #e6b84a; --red: #e05a5a;
+  --term-bg: #0c0c0b; --term-sidebar-bg: #131312; --term-active-bg: #191918;
+  --term-tab-bg: #191918; --term-tab-active-bg: #4a9eff; --term-tab-active-text: #0c0c0b;
+  --term-border: #252522; --term-text: #dedad0; --term-muted: #5c5c55;
+  --term-prompt: #4a9eff; --term-cmd: #52c97a; --term-str: #e6b84a;
+  --term-dim: #8a8a80; --term-blue: #4a9eff; --term-green-bright: #52c97a;
+}
+[data-palette="taat"] {
+  --bg: #0c0c0b; --bg-elevated: #111110; --ink: #f0ece0; --ink-soft: #e2ddd0;
+  --muted: #6a6a62; --muted-2: #4a4a44; --line: #252522; --line-strong: #2a2a26;
+  --terminal: #0c0c0b; --terminal-2: #111110; --accent: #4a9eff;
+  --green: #4a9e6a; --yellow: #c4a84a; --red: #c46a6a;
+  --term-bg: #0c0c0b; --term-sidebar-bg: #111110; --term-active-bg: #161614;
+  --term-tab-bg: #161614; --term-tab-active-bg: #4a9eff; --term-tab-active-text: #0c0c0b;
+  --term-border: #252522; --term-text: #e2ddd0; --term-muted: #4a4a44;
+  --term-prompt: #4a9eff; --term-cmd: #4a9e6a; --term-str: #c4a84a;
+  --term-dim: #6a6a62; --term-blue: #4a9eff; --term-green-bright: #4a9e6a;
+}
+[data-palette="catppuccin"] {
+  --bg: #11111b; --bg-elevated: #181825; --ink: #f5e0dc; --ink-soft: #cdd6f4;
+  --muted: #9399b2; --muted-2: #6c7086; --line: #313244; --line-strong: #45475a;
+  --terminal: #11111b; --terminal-2: #181825; --accent: #89b4fa;
+  --green: #a6e3a1; --yellow: #f9e2af; --red: #f38ba8;
+  --term-bg: #11111b; --term-sidebar-bg: #181825; --term-active-bg: #1e1e2e;
+  --term-tab-bg: #1e1e2e; --term-tab-active-bg: #89b4fa; --term-tab-active-text: #11111b;
+  --term-border: #313244; --term-text: #cdd6f4; --term-muted: #6c7086;
+  --term-prompt: #89b4fa; --term-cmd: #a6e3a1; --term-str: #f9e2af;
+  --term-dim: #9399b2; --term-blue: #89b4fa; --term-green-bright: #a6e3a1;
+}
+[data-palette="catppuccin-latte"] {
+  --bg: #eff1f5; --bg-elevated: #e6e9ef; --ink: #1e1e2e; --ink-soft: #4c4f69;
+  --muted: #6c6f85; --muted-2: #9ca0b0; --line: #ccd0da; --line-strong: #bcc0cc;
+  --terminal: #eff1f5; --terminal-2: #e6e9ef; --accent: #1e66f5;
+  --green: #40a02b; --yellow: #df8e1d; --red: #d20f39;
+  --term-bg: #eff1f5; --term-sidebar-bg: #e6e9ef; --term-active-bg: #dce0e8;
+  --term-tab-bg: #dce0e8; --term-tab-active-bg: #1e66f5; --term-tab-active-text: #eff1f5;
+  --term-border: #ccd0da; --term-text: #4c4f69; --term-muted: #9ca0b0;
+  --term-prompt: #1e66f5; --term-cmd: #40a02b; --term-str: #df8e1d;
+  --term-dim: #6c6f85; --term-blue: #1e66f5; --term-green-bright: #40a02b;
+}
+[data-palette="terminal"] {
+  --bg: #000000; --bg-elevated: #080808; --ink: #ffffff; --ink-soft: #d8d8d8;
+  --muted: #888888; --muted-2: #555555; --line: #1a1a1a; --line-strong: #2a2a2a;
+  --terminal: #000000; --terminal-2: #080808; --accent: #4a9eff;
+  --green: #55d66b; --yellow: #e6d55a; --red: #ff6b6b;
+  --term-bg: #000000; --term-sidebar-bg: #080808; --term-active-bg: #101010;
+  --term-tab-bg: #101010; --term-tab-active-bg: #4a9eff; --term-tab-active-text: #000000;
+  --term-border: #1a1a1a; --term-text: #d8d8d8; --term-muted: #555555;
+  --term-prompt: #4a9eff; --term-cmd: #55d66b; --term-str: #e6d55a;
+  --term-dim: #888888; --term-blue: #4a9eff; --term-green-bright: #55d66b;
+}
+[data-palette="tokyo-night"] {
+  --bg: #1a1b26; --bg-elevated: #202331; --ink: #d5dcff; --ink-soft: #c0caf5;
+  --muted: #737aa2; --muted-2: #565f89; --line: #2f3549; --line-strong: #414868;
+  --terminal: #1a1b26; --terminal-2: #202331; --accent: #7aa2f7;
+  --green: #9ece6a; --yellow: #e0af68; --red: #f7768e;
+  --term-bg: #1a1b26; --term-sidebar-bg: #202331; --term-active-bg: #24283b;
+  --term-tab-bg: #24283b; --term-tab-active-bg: #7aa2f7; --term-tab-active-text: #1a1b26;
+  --term-border: #2f3549; --term-text: #c0caf5; --term-muted: #565f89;
+  --term-prompt: #7aa2f7; --term-cmd: #9ece6a; --term-str: #e0af68;
+  --term-dim: #737aa2; --term-blue: #7aa2f7; --term-green-bright: #9ece6a;
+}
+[data-palette="tokyo-night-day"] {
+  --bg: #e1e2e7; --bg-elevated: #d8d9e0; --ink: #1f2f66; --ink-soft: #3760bf;
+  --muted: #68709a; --muted-2: #8990b3; --line: #b6bbd1; --line-strong: #a8aecb;
+  --terminal: #e1e2e7; --terminal-2: #d8d9e0; --accent: #2e7de9;
+  --green: #587539; --yellow: #8c6c3e; --red: #f52a65;
+  --term-bg: #e1e2e7; --term-sidebar-bg: #d8d9e0; --term-active-bg: #c4c8da;
+  --term-tab-bg: #c4c8da; --term-tab-active-bg: #2e7de9; --term-tab-active-text: #e1e2e7;
+  --term-border: #b6bbd1; --term-text: #3760bf; --term-muted: #8990b3;
+  --term-prompt: #2e7de9; --term-cmd: #587539; --term-str: #8c6c3e;
+  --term-dim: #68709a; --term-blue: #2e7de9; --term-green-bright: #587539;
+}
+[data-palette="dracula"] {
+  --bg: #282a36; --bg-elevated: #303241; --ink: #ffffff; --ink-soft: #f8f8f2;
+  --muted: #8a91b4; --muted-2: #6272a4; --line: #44475a; --line-strong: #6272a4;
+  --terminal: #282a36; --terminal-2: #303241; --accent: #bd93f9;
+  --green: #50fa7b; --yellow: #f1fa8c; --red: #ff5555;
+  --term-bg: #282a36; --term-sidebar-bg: #303241; --term-active-bg: #383a4a;
+  --term-tab-bg: #383a4a; --term-tab-active-bg: #bd93f9; --term-tab-active-text: #282a36;
+  --term-border: #44475a; --term-text: #f8f8f2; --term-muted: #6272a4;
+  --term-prompt: #bd93f9; --term-cmd: #50fa7b; --term-str: #f1fa8c;
+  --term-dim: #8a91b4; --term-blue: #bd93f9; --term-green-bright: #50fa7b;
+}
+[data-palette="nord"] {
+  --bg: #2e3440; --bg-elevated: #343b49; --ink: #ffffff; --ink-soft: #eceff4;
+  --muted: #8792a8; --muted-2: #5f6a80; --line: #434c5e; --line-strong: #4c566a;
+  --terminal: #2e3440; --terminal-2: #343b49; --accent: #88c0d0;
+  --green: #a3be8c; --yellow: #ebcb8b; --red: #bf616a;
+  --term-bg: #2e3440; --term-sidebar-bg: #343b49; --term-active-bg: #3b4252;
+  --term-tab-bg: #3b4252; --term-tab-active-bg: #88c0d0; --term-tab-active-text: #2e3440;
+  --term-border: #434c5e; --term-text: #eceff4; --term-muted: #5f6a80;
+  --term-prompt: #88c0d0; --term-cmd: #a3be8c; --term-str: #ebcb8b;
+  --term-dim: #8792a8; --term-blue: #88c0d0; --term-green-bright: #a3be8c;
+}
+[data-palette="gruvbox"] {
+  --bg: #282828; --bg-elevated: #32302f; --ink: #fbf1c7; --ink-soft: #ebdbb2;
+  --muted: #a89984; --muted-2: #928374; --line: #504945; --line-strong: #665c54;
+  --terminal: #282828; --terminal-2: #32302f; --accent: #d79921;
+  --green: #b8bb26; --yellow: #fabd2f; --red: #fb4934;
+  --term-bg: #282828; --term-sidebar-bg: #32302f; --term-active-bg: #3c3836;
+  --term-tab-bg: #3c3836; --term-tab-active-bg: #d79921; --term-tab-active-text: #282828;
+  --term-border: #504945; --term-text: #ebdbb2; --term-muted: #928374;
+  --term-prompt: #d79921; --term-cmd: #b8bb26; --term-str: #fabd2f;
+  --term-dim: #a89984; --term-blue: #d79921; --term-green-bright: #b8bb26;
+}
+[data-palette="gruvbox-light"] {
+  --bg: #fbf1c7; --bg-elevated: #f2e5bc; --ink: #282828; --ink-soft: #3c3836;
+  --muted: #665c54; --muted-2: #928374; --line: #d5c4a1; --line-strong: #bdae93;
+  --terminal: #fbf1c7; --terminal-2: #f2e5bc; --accent: #076678;
+  --green: #79740e; --yellow: #b57614; --red: #9d0006;
+  --term-bg: #fbf1c7; --term-sidebar-bg: #f2e5bc; --term-active-bg: #ebdbb2;
+  --term-tab-bg: #ebdbb2; --term-tab-active-bg: #076678; --term-tab-active-text: #fbf1c7;
+  --term-border: #d5c4a1; --term-text: #3c3836; --term-muted: #928374;
+  --term-prompt: #076678; --term-cmd: #79740e; --term-str: #b57614;
+  --term-dim: #665c54; --term-blue: #076678; --term-green-bright: #79740e;
+}
+[data-palette="one-dark"] {
+  --bg: #282c34; --bg-elevated: #2c313a; --ink: #d7dae0; --ink-soft: #abb2bf;
+  --muted: #7f848e; --muted-2: #5c6370; --line: #3e4451; --line-strong: #4b5263;
+  --terminal: #282c34; --terminal-2: #2c313a; --accent: #61afef;
+  --green: #98c379; --yellow: #e5c07b; --red: #e06c75;
+  --term-bg: #282c34; --term-sidebar-bg: #2c313a; --term-active-bg: #323842;
+  --term-tab-bg: #323842; --term-tab-active-bg: #61afef; --term-tab-active-text: #282c34;
+  --term-border: #3e4451; --term-text: #abb2bf; --term-muted: #5c6370;
+  --term-prompt: #61afef; --term-cmd: #98c379; --term-str: #e5c07b;
+  --term-dim: #7f848e; --term-blue: #61afef; --term-green-bright: #98c379;
+}
+[data-palette="one-light"] {
+  --bg: #fafafa; --bg-elevated: #f5f5f6; --ink: #202228; --ink-soft: #383a42;
+  --muted: #686b77; --muted-2: #a0a1a7; --line: #e5e5e6; --line-strong: #d5d7de;
+  --terminal: #fafafa; --terminal-2: #f5f5f6; --accent: #4078f2;
+  --green: #50a14f; --yellow: #c18401; --red: #e45649;
+  --term-bg: #fafafa; --term-sidebar-bg: #f5f5f6; --term-active-bg: #f0f0f1;
+  --term-tab-bg: #f0f0f1; --term-tab-active-bg: #4078f2; --term-tab-active-text: #fafafa;
+  --term-border: #e5e5e6; --term-text: #383a42; --term-muted: #a0a1a7;
+  --term-prompt: #4078f2; --term-cmd: #50a14f; --term-str: #c18401;
+  --term-dim: #686b77; --term-blue: #4078f2; --term-green-bright: #50a14f;
+}
+[data-palette="solarized"] {
+  --bg: #002b36; --bg-elevated: #073642; --ink: #eee8d5; --ink-soft: #93a1a1;
+  --muted: #839496; --muted-2: #586e75; --line: #164a57; --line-strong: #586e75;
+  --terminal: #002b36; --terminal-2: #073642; --accent: #268bd2;
+  --green: #859900; --yellow: #b58900; --red: #dc322f;
+  --term-bg: #002b36; --term-sidebar-bg: #073642; --term-active-bg: #0b3d4a;
+  --term-tab-bg: #0b3d4a; --term-tab-active-bg: #268bd2; --term-tab-active-text: #002b36;
+  --term-border: #164a57; --term-text: #93a1a1; --term-muted: #586e75;
+  --term-prompt: #268bd2; --term-cmd: #859900; --term-str: #b58900;
+  --term-dim: #839496; --term-blue: #268bd2; --term-green-bright: #859900;
+}
+[data-palette="solarized-light"] {
+  --bg: #fdf6e3; --bg-elevated: #eee8d5; --ink: #073642; --ink-soft: #657b83;
+  --muted: #586e75; --muted-2: #93a1a1; --line: #d6ceb8; --line-strong: #93a1a1;
+  --terminal: #fdf6e3; --terminal-2: #eee8d5; --accent: #268bd2;
+  --green: #859900; --yellow: #b58900; --red: #dc322f;
+  --term-bg: #fdf6e3; --term-sidebar-bg: #eee8d5; --term-active-bg: #e6dec8;
+  --term-tab-bg: #e6dec8; --term-tab-active-bg: #268bd2; --term-tab-active-text: #fdf6e3;
+  --term-border: #d6ceb8; --term-text: #657b83; --term-muted: #93a1a1;
+  --term-prompt: #268bd2; --term-cmd: #859900; --term-str: #b58900;
+  --term-dim: #586e75; --term-blue: #268bd2; --term-green-bright: #859900;
+}
+[data-palette="kanagawa"] {
+  --bg: #1f1f28; --bg-elevated: #252532; --ink: #f3ead3; --ink-soft: #dcd7ba;
+  --muted: #8f8d80; --muted-2: #727169; --line: #363646; --line-strong: #54546d;
+  --terminal: #1f1f28; --terminal-2: #252532; --accent: #7e9cd8;
+  --green: #76946a; --yellow: #c0a36e; --red: #c34043;
+  --term-bg: #1f1f28; --term-sidebar-bg: #252532; --term-active-bg: #2a2a37;
+  --term-tab-bg: #2a2a37; --term-tab-active-bg: #7e9cd8; --term-tab-active-text: #1f1f28;
+  --term-border: #363646; --term-text: #dcd7ba; --term-muted: #727169;
+  --term-prompt: #7e9cd8; --term-cmd: #76946a; --term-str: #c0a36e;
+  --term-dim: #8f8d80; --term-blue: #7e9cd8; --term-green-bright: #76946a;
+}
+[data-palette="kanagawa-lotus"] {
+  --bg: #f2ecbc; --bg-elevated: #e5ddb0; --ink: #2a2a37; --ink-soft: #545464;
+  --muted: #77736a; --muted-2: #a09cac; --line: #cbcbd1; --line-strong: #b7b2a0;
+  --terminal: #f2ecbc; --terminal-2: #e5ddb0; --accent: #4d699b;
+  --green: #6f894e; --yellow: #77713f; --red: #c84053;
+  --term-bg: #f2ecbc; --term-sidebar-bg: #e5ddb0; --term-active-bg: #dcd5ac;
+  --term-tab-bg: #dcd5ac; --term-tab-active-bg: #4d699b; --term-tab-active-text: #f2ecbc;
+  --term-border: #cbcbd1; --term-text: #545464; --term-muted: #a09cac;
+  --term-prompt: #4d699b; --term-cmd: #6f894e; --term-str: #77713f;
+  --term-dim: #77736a; --term-blue: #4d699b; --term-green-bright: #6f894e;
+}
+[data-palette="rose-pine"] {
+  --bg: #191724; --bg-elevated: #1f1d2e; --ink: #f4f0ff; --ink-soft: #e0def4;
+  --muted: #908caa; --muted-2: #6e6a86; --line: #312f45; --line-strong: #403d52;
+  --terminal: #191724; --terminal-2: #1f1d2e; --accent: #c4a7e7;
+  --green: #9ccfd8; --yellow: #f6c177; --red: #eb6f92;
+  --term-bg: #191724; --term-sidebar-bg: #1f1d2e; --term-active-bg: #26233a;
+  --term-tab-bg: #26233a; --term-tab-active-bg: #c4a7e7; --term-tab-active-text: #191724;
+  --term-border: #312f45; --term-text: #e0def4; --term-muted: #6e6a86;
+  --term-prompt: #c4a7e7; --term-cmd: #9ccfd8; --term-str: #f6c177;
+  --term-dim: #908caa; --term-blue: #c4a7e7; --term-green-bright: #9ccfd8;
+}
+[data-palette="rose-pine-dawn"] {
+  --bg: #faf4ed; --bg-elevated: #f2e9e1; --ink: #191724; --ink-soft: #464261;
+  --muted: #797593; --muted-2: #9893a5; --line: #e6ded7; --line-strong: #d8d0ca;
+  --terminal: #faf4ed; --terminal-2: #f2e9e1; --accent: #907aa9;
+  --green: #56949f; --yellow: #ea9d34; --red: #b4637a;
+  --term-bg: #faf4ed; --term-sidebar-bg: #f2e9e1; --term-active-bg: #fffaf3;
+  --term-tab-bg: #fffaf3; --term-tab-active-bg: #907aa9; --term-tab-active-text: #faf4ed;
+  --term-border: #e6ded7; --term-text: #464261; --term-muted: #9893a5;
+  --term-prompt: #907aa9; --term-cmd: #56949f; --term-str: #ea9d34;
+  --term-dim: #797593; --term-blue: #907aa9; --term-green-bright: #56949f;
+}
+[data-palette="vesper"] {
+  --bg: #101010; --bg-elevated: #1a1a1a; --ink: #ffffff; --ink-soft: #ffffff;
+  --muted: #7e7e7e; --muted-2: #5c5c5c; --line: #282828; --line-strong: #343434;
+  --terminal: #101010; --terminal-2: #1a1a1a; --accent: #ffc799;
+  --green: #99ffe4; --yellow: #ffc799; --red: #ff8080;
+  --term-bg: #101010; --term-sidebar-bg: #1a1a1a; --term-active-bg: #232323;
+  --term-tab-bg: #232323; --term-tab-active-bg: #ffc799; --term-tab-active-text: #101010;
+  --term-border: #282828; --term-text: #ffffff; --term-muted: #5c5c5c;
+  --term-prompt: #ffc799; --term-cmd: #99ffe4; --term-str: #ffc799;
+  --term-dim: #7e7e7e; --term-blue: #ffc799; --term-green-bright: #99ffe4;
+}
+
+[data-palette="herdr"],
+[data-palette="taat"],
+[data-palette="catppuccin"],
+[data-palette="terminal"],
+[data-palette="tokyo-night"],
+[data-palette="dracula"],
+[data-palette="nord"],
+[data-palette="gruvbox"],
+[data-palette="one-dark"],
+[data-palette="solarized"],
+[data-palette="kanagawa"],
+[data-palette="rose-pine"],
+[data-palette="vesper"] {
+  --logo-filter: invert(1) hue-rotate(180deg) brightness(1.08) contrast(0.9) saturate(1.05);
+  --logo-opacity: 0.72;
+}
+
+*, 
 *::before,
 *::after {
     box-sizing: border-box;
@@ -53,8 +297,9 @@
 html {
     background: var(--bg);
     color: var(--ink);
-    font-family: var(--sans);
+    font-family: var(--body);
     font-size: 16px;
+    line-height: 1.65;
     -webkit-font-smoothing: antialiased;
     scroll-behavior: smooth;
 }
@@ -62,23 +307,7 @@ html {
 body {
     margin: 0;
     min-width: 320px;
-    background:
-        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 {
-    content: "";
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    opacity: 0.35;
-    background-image:
-        linear-gradient(rgb(21 26 33 / 0.05) 1px, transparent 1px),
-        linear-gradient(90deg, rgb(21 26 33 / 0.05) 1px, transparent 1px);
-    background-size: 48px 48px;
-    mask-image: linear-gradient(180deg, black, transparent 70%);
+    background: var(--bg);
 }
 
 img,
@@ -98,7 +327,7 @@ a {
 }
 
 a:hover {
-    color: var(--accent-dark);
+    color: var(--accent);
 }
 
 code,
@@ -116,9 +345,9 @@ samp {
     position: sticky;
     top: 0;
     z-index: 20;
-    backdrop-filter: blur(18px);
-    background: rgb(247 243 234 / 0.78);
-    border-bottom: 1px solid rgb(222 214 200 / 0.7);
+    backdrop-filter: blur(12px);
+    background: color-mix(in srgb, var(--bg) 92%, transparent);
+    border-bottom: 1px solid var(--line);
 }
 
 .nav {
@@ -134,36 +363,43 @@ samp {
 .brand {
     display: inline-flex;
     align-items: center;
-    gap: 0.65rem;
+    gap: 0.55rem;
     font-family: var(--mono);
     font-weight: 700;
     letter-spacing: -0.04em;
     color: var(--ink);
 }
 
-.brand img {
-    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 {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
     cursor: context-menu;
 }
 
+.brand-logo::before {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--ink);
+    -webkit-mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+    mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+}
+
 .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);
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
 }
 
 .logo-menu a,
@@ -171,13 +407,13 @@ samp {
     display: block;
     width: 100%;
     border: 0;
-    border-radius: 11px;
+    border-radius: var(--radius-sm);
     background: transparent;
     color: var(--ink-soft);
-    padding: 0.62rem 0.7rem;
+    padding: 0.5rem 0.65rem;
     font: inherit;
-    font-size: 0.9rem;
-    font-weight: 700;
+    font-size: 0.85rem;
+    font-weight: 600;
     text-align: left;
     cursor: pointer;
 }
@@ -185,7 +421,7 @@ samp {
 .logo-menu a:hover,
 .logo-menu button:hover {
     background: var(--accent-soft);
-    color: var(--accent-dark);
+    color: var(--accent);
 }
 
 .nav-links {
@@ -193,38 +429,302 @@ samp {
     align-items: center;
     gap: 1.25rem;
     color: var(--muted);
-    font-size: 0.92rem;
+    font-size: 0.9rem;
+    font-family: var(--mono);
 }
 
 .nav-links a,
 .footer a,
 .inline-links a {
-    transition:
-        color 0.16s ease,
-        border-color 0.16s ease,
-        background 0.16s ease;
+    transition: color 0.15s ease;
 }
 
 .nav-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 2.3rem;
-    padding: 0 1rem;
+    height: 2.1rem;
+    padding: 0 0.9rem;
     border: 1px solid var(--line-strong);
-    border-radius: 999px;
-    background: rgb(255 253 248 / 0.74);
+    border-radius: var(--radius-md);
+    background: transparent;
     color: var(--ink-soft);
-    font-size: 0.9rem;
-    font-weight: 650;
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    font-weight: 600;
 }
 
 .nav-cta:hover {
     border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-soft);
+}
+
+.theme-hint {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 30;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.45rem 0.7rem;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-md);
+    background: color-mix(in srgb, var(--bg) 92%, transparent);
+    backdrop-filter: blur(8px);
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color 0.12s ease, color 0.12s ease;
+}
+
+.theme-hint::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    border: 1px solid var(--accent);
+    border-radius: calc(var(--radius-md) + 4px);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.theme-hint:not(.is-seen)::after {
+    animation: theme-hint-pulse 3.6s ease-in-out infinite;
+}
+
+.theme-hint:not(.is-seen) .theme-hint-dot {
+    animation: theme-hint-dot 3.6s ease-in-out infinite;
+}
+
+.theme-hint:hover {
+    border-color: var(--accent);
+    color: var(--accent);
     background: var(--accent-soft);
 }
 
-.hero,
+.theme-hint-dot {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: conic-gradient(var(--accent) 25%, var(--green) 25% 50%, var(--yellow) 50% 75%, var(--red) 75%);
+    flex: 0 0 auto;
+}
+
+.theme-hint-key {
+    color: var(--muted-2);
+    font-size: 0.65rem;
+}
+
+.theme-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(1px);
+}
+
+.theme-overlay[hidden] {
+    display: none;
+}
+
+.theme-overlay-panel {
+    width: min(480px, calc(100vw - 2rem));
+    max-height: calc(100vh - 4rem);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 2px solid var(--accent);
+    border-radius: 2px;
+    background: var(--term-bg);
+    font-family: var(--mono);
+    color: var(--term-text);
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
+}
+
+.theme-overlay-title {
+    padding: 0.7rem 1rem 0.2rem;
+    color: var(--term-text);
+    font-size: 0.92rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+}
+
+.theme-overlay-tabs {
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
+    padding: 0.2rem 1rem 0.6rem;
+    border-bottom: 1px solid var(--term-border);
+    color: var(--term-muted);
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.theme-overlay-tabs span {
+    padding: 0.2rem 0.5rem;
+    border-radius: 1px;
+}
+
+.theme-overlay-tabs span.active {
+    background: var(--accent);
+    color: var(--term-tab-active-text);
+}
+
+.theme-overlay-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.8rem 0.6rem;
+    scrollbar-width: thin;
+    scrollbar-color: var(--term-border) transparent;
+}
+
+.theme-overlay-list::-webkit-scrollbar {
+    width: 5px;
+}
+
+.theme-overlay-list::-webkit-scrollbar-thumb {
+    background: var(--term-border);
+    border-radius: 1px;
+}
+
+.theme-sep {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.3rem 0.8rem;
+    margin-top: 0.3rem;
+    color: var(--term-muted);
+    font-family: inherit;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: lowercase;
+    pointer-events: none;
+    user-select: none;
+}
+
+.theme-sep:first-child {
+    margin-top: 0;
+}
+
+.theme-sep::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--term-border);
+    opacity: 0.6;
+}
+
+.theme-overlay-list button {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.35rem 0.8rem;
+    border: 0;
+    border-radius: 1px;
+    background: transparent;
+    color: var(--term-text);
+    font-family: inherit;
+    font-size: 0.82rem;
+    font-weight: 400;
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+    line-height: 1.5;
+}
+
+.theme-overlay-list button::before {
+    content: "";
+    display: inline-block;
+    width: 0.9rem;
+    flex: 0 0 auto;
+    text-align: center;
+}
+
+.theme-overlay-list button:hover,
+.theme-overlay-list button:focus-visible {
+    outline: none;
+    background: var(--term-active-bg);
+    color: var(--term-text);
+}
+
+.theme-overlay-list button[aria-selected="true"] {
+    background: var(--term-active-bg);
+    color: var(--term-text);
+    font-weight: 700;
+}
+
+.theme-overlay-list button[aria-selected="true"]::before {
+    content: "▸";
+    color: var(--term-text);
+    font-size: 0.7rem;
+}
+
+.theme-overlay-list button[aria-selected="true"]::after {
+    content: "✓";
+    margin-left: auto;
+    color: var(--term-text);
+    font-size: 0.78rem;
+    font-weight: 400;
+}
+
+.theme-overlay-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.55rem 1rem;
+    border-top: 1px solid var(--term-border);
+    color: var(--term-muted);
+    font-size: 0.72rem;
+    font-weight: 400;
+}
+
+.theme-overlay-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.theme-overlay-footer .key {
+    color: var(--term-muted);
+    font-weight: 700;
+}
+
+.theme-apply-btn {
+    display: inline-block;
+    padding: 0.15rem 0.5rem;
+    background: var(--accent);
+    color: var(--term-tab-active-text);
+    font-weight: 700;
+    border-radius: 1px;
+}
+
+.theme-close-btn {
+    border: 0;
+    border-radius: 1px;
+    background: var(--term-active-bg);
+    color: var(--term-muted);
+    padding: 0.15rem 0.5rem;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.theme-close-btn:hover,
+.theme-close-btn:focus-visible {
+    outline: none;
+    color: var(--term-text);
+    background: var(--term-border);
+}
+
 .section,
 .demo-section,
 .footer,
@@ -236,41 +736,54 @@ samp {
 
 .hero {
     position: relative;
-    max-width: 1280px;
     display: grid;
-    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;
+    grid-template-columns: 1fr 1fr;
+    min-height: calc(100vh - 56px);
+    border-bottom: 1px solid var(--line);
 }
 
-.hero-copy,
-.hero-product-shot {
+.hero-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 4rem 3rem 4rem 2.5rem;
+    border-right: 1px solid var(--line);
+}
+
+.hero-right {
     position: relative;
-    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 2.5rem;
+    background: var(--bg-elevated);
+    overflow: hidden;
 }
 
-.hero-pasture {
+.hero-right::before {
+    content: '';
     position: absolute;
     inset: 0;
-    z-index: 0;
-    overflow: hidden;
+    background-image:
+        linear-gradient(var(--line) 1px, transparent 1px),
+        linear-gradient(90deg, var(--line) 1px, transparent 1px);
+    background-size: 32px 32px;
+    opacity: 0.4;
     pointer-events: none;
-    user-select: none;
 }
 
-.hero-pasture .sheep-el {
+.hero-right::after {
+    content: '';
     position: absolute;
-    margin: 0;
-    font-family: var(--mono);
-    font-weight: 700;
-    line-height: 1.08;
-    white-space: pre;
+    inset: 0;
+    background: radial-gradient(ellipse at center, transparent 35%, var(--bg-elevated) 80%);
     pointer-events: none;
-    user-select: none;
-    will-change: transform;
+}
+
+.hero-copy,
+.hero-product-shot {
+    position: relative;
+    z-index: 1;
 }
 
 .eyebrow,
@@ -278,10 +791,11 @@ samp {
     margin: 0 0 1rem;
     display: inline-flex;
     align-items: center;
-    gap: 0.55rem;
-    color: var(--accent-dark);
-    font-size: 0.78rem;
-    font-weight: 750;
+    gap: 0.5rem;
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
 }
@@ -291,25 +805,28 @@ samp {
 .final-cta h2 {
     margin: 0;
     color: var(--ink);
-    letter-spacing: -0.065em;
-    line-height: 0.97;
+    letter-spacing: -0.04em;
+    line-height: 1.05;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .hero h1 {
     max-width: 760px;
-    font-size: clamp(3.2rem, 6.4vw, 5.7rem);
+    font-size: clamp(2.6rem, 5.5vw, 4.6rem);
 }
 
 .hero-lede {
-    max-width: 690px;
-    margin: 1.5rem 0 0;
+    max-width: 520px;
+    margin: 1.25rem 0 0;
     color: var(--ink-soft);
-    font-size: clamp(1.08rem, 2vw, 1.35rem);
+    font-size: clamp(1rem, 1.8vw, 1.2rem);
     line-height: 1.6;
 }
 
 .state {
-    font-weight: 750;
+    font-weight: 600;
+    font-family: var(--mono);
 }
 
 .state.blocked {
@@ -321,13 +838,13 @@ samp {
 }
 
 .state.done {
-    color: var(--blue);
+    color: var(--green);
 }
 
 .status-dot {
     display: inline-block;
-    width: 0.58rem;
-    height: 0.58rem;
+    width: 0.5rem;
+    height: 0.5rem;
     border-radius: 50%;
     flex: 0 0 auto;
 }
@@ -337,22 +854,22 @@ samp {
 }
 
 .dot-working {
-    background: #d89a00;
+    background: var(--yellow);
 }
 
 .dot-done {
-    background: var(--blue);
+    background: var(--green);
 }
 
 .dot-idle {
-    background: var(--green);
+    background: var(--muted);
 }
 
 .hero-actions {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.8rem;
-    margin-top: 2rem;
+    gap: 0.6rem;
+    margin-top: 1.75rem;
 }
 
 .hero-actions.center {
@@ -363,49 +880,53 @@ samp {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 3rem;
-    padding: 0.8rem 1.15rem;
-    border-radius: 999px;
-    font-weight: 750;
+    min-height: 2.6rem;
+    padding: 0.6rem 1.1rem;
+    border-radius: var(--radius-md);
+    font-family: var(--mono);
+    font-weight: 600;
+    font-size: 0.9rem;
     border: 1px solid transparent;
+    transition: all 0.12s ease;
 }
 
 .button-primary {
     background: var(--ink);
-    color: #fffdf8;
-    box-shadow: 0 18px 46px rgb(21 26 33 / 0.18);
+    color: var(--bg);
 }
 
 .button-primary:hover {
-    background: var(--accent-dark);
-    color: #fffdf8;
+    background: var(--accent);
+    color: #fff;
 }
 
 .button-secondary {
-    background: rgb(255 253 248 / 0.74);
+    background: transparent;
     border-color: var(--line-strong);
     color: var(--ink-soft);
 }
 
 .button-secondary:hover {
-    background: var(--accent-soft);
     border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-soft);
 }
 
 .install-panel {
-    max-width: 650px;
-    margin-top: 1rem;
+    max-width: 520px;
+    margin-top: 1.25rem;
 }
 
 .install-methods {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 0.42rem;
-    padding-left: 0.15rem;
+    gap: 0.35rem;
+    padding-left: 0.1rem;
     color: var(--muted);
-    font-size: 0.86rem;
-    font-weight: 800;
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    font-weight: 600;
 }
 
 .install-method {
@@ -414,7 +935,8 @@ samp {
     color: var(--muted);
     cursor: pointer;
     padding: 0;
-    font-weight: 800;
+    font-family: var(--mono);
+    font-weight: 600;
 }
 
 .install-method:hover,
@@ -431,13 +953,13 @@ samp {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-items: center;
-    gap: 0.75rem;
-    margin-top: 0.65rem;
-    padding: 0.82rem 0.9rem;
-    border-radius: 999px;
-    background: var(--terminal);
-    color: #eaf1f8;
-    box-shadow: 0 18px 54px rgb(21 26 33 / 0.18);
+    gap: 0.6rem;
+    margin-top: 0.5rem;
+    padding: 0.7rem 0.85rem;
+    border-radius: var(--radius-md);
+    background: var(--term-bg);
+    color: var(--term-text);
+    border: 1px solid var(--term-border);
 }
 
 .install-card code {
@@ -446,11 +968,11 @@ samp {
     overflow-y: hidden;
     white-space: nowrap;
     scrollbar-width: none;
-    font-size: 0.86rem;
+    font-size: 0.82rem;
 }
 
 .install-card code.is-compact {
-    font-size: clamp(0.68rem, 1.15vw, 0.8rem);
+    font-size: clamp(0.65rem, 1.1vw, 0.78rem);
 }
 
 .install-card code::-webkit-scrollbar {
@@ -458,45 +980,45 @@ samp {
 }
 
 .prompt {
-    color: #67d7ca;
+    color: var(--accent);
     font-family: var(--mono);
     font-weight: 700;
 }
 
 .install-card button {
-    border: 1px solid rgb(255 255 255 / 0.14);
-    border-radius: 999px;
-    background: rgb(255 255 255 / 0.07);
-    color: #d8e3ed;
+    border: 1px solid var(--term-border);
+    border-radius: var(--radius-sm);
+    background: var(--term-active-bg);
+    color: var(--term-text);
     cursor: pointer;
-    padding: 0.42rem 0.75rem;
-    font-size: 0.75rem;
-    font-weight: 700;
+    padding: 0.3rem 0.65rem;
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    font-weight: 600;
 }
 
 .install-card button:hover {
-    background: rgb(255 255 255 / 0.14);
+    background: var(--accent-soft);
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
 .hero-note {
-    margin: 1rem 0 0;
-    color: var(--muted);
-    font-size: 0.9rem;
+    margin: 0.75rem 0 0;
+    color: var(--muted-2);
+    font-size: 0.82rem;
+    font-family: var(--mono);
 }
 
 .hero-product-shot {
     margin: 0;
-    transform: rotate(1.1deg);
 }
 
 .hero-product-shell {
     overflow: hidden;
     border-radius: var(--radius-lg);
     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);
+    border: 1px solid var(--line-strong);
 }
 
 .hero-product-shell img {
@@ -506,10 +1028,11 @@ samp {
 }
 
 .hero-product-shot figcaption {
-    margin-top: 0.85rem;
+    margin-top: 0.6rem;
     color: var(--muted);
-    font-size: 0.84rem;
+    font-size: 0.78rem;
     text-align: center;
+    font-family: var(--mono);
 }
 
 .herdr-ui-mock {
@@ -518,31 +1041,29 @@ samp {
     overflow: hidden;
     aspect-ratio: 2560 / 1401;
     border-radius: var(--radius-lg);
-    background: #20262f;
-    color: #b9c3d0;
+    background: var(--term-bg);
+    color: var(--term-muted);
     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);
+    border: 1px solid var(--term-border);
 }
 
 .mock-sidebar {
     display: flex;
     flex-direction: column;
     min-width: 0;
-    border-right: 1px solid #2b333f;
-    background: #1c222b;
+    border-right: 1px solid var(--term-border);
+    background: var(--term-sidebar-bg);
 }
 
 .mock-sidebar-title {
     padding: 0.5rem 0.7rem;
-    color: #727d8d;
+    color: var(--term-muted);
     font-weight: 700;
+    font-family: var(--mono);
 }
 
 .mock-space {
@@ -551,18 +1072,18 @@ samp {
     gap: 0.45rem;
     align-items: start;
     padding: 0.55rem 0.7rem;
-    color: #aeb8c6;
+    color: var(--term-dim);
 }
 
 .mock-space.active {
-    background: #282f3a;
+    background: var(--term-active-bg);
 }
 
 .mock-space strong,
 .mock-agent strong {
     display: block;
     overflow: hidden;
-    color: #c8d1dd;
+    color: var(--term-text);
     font-weight: 700;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -573,13 +1094,13 @@ samp {
     display: block;
     overflow: hidden;
     margin-top: 0.16rem;
-    color: #6e7788;
+    color: var(--term-muted);
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
 .mock-space.active small {
-    color: #d676ff;
+    color: var(--accent);
 }
 
 .mock-dot {
@@ -594,18 +1115,26 @@ samp {
     min-height: 4rem;
 }
 
+.herdr-ui-mock .mock-sidebar-spacer {
+    flex: 0 0 5.2rem;
+    min-height: 0;
+}
+
 .mock-sidebar-row,
 .mock-agent-title {
     display: flex;
     justify-content: space-between;
     padding: 0.45rem 0.7rem;
-    border-top: 1px solid #2b333f;
-    color: #727d8d;
+    color: var(--term-muted);
     font-weight: 700;
+    font-family: var(--mono);
+}
+
+.mock-sidebar-row {
+    border-bottom: 1px solid var(--term-border);
 }
 
 .mock-agent-title {
-    border-top: 0;
     text-transform: lowercase;
 }
 
@@ -617,7 +1146,7 @@ samp {
 }
 
 .mock-agent > span {
-    color: #a6e3a1;
+    color: var(--term-green-bright);
     line-height: 1.1;
 }
 
@@ -627,17 +1156,17 @@ samp {
 
 .mock-agent.working > span,
 .mock-agent.working small {
-    color: #f4c76e;
+    color: var(--term-str);
 }
 
 .mock-agent.blocked > span,
 .mock-agent.blocked small {
-    color: #f07187;
+    color: var(--red);
 }
 
 .mock-agent.done > span,
 .mock-agent.done small {
-    color: #5ec8d8;
+    color: var(--accent);
 }
 
 .mock-main {
@@ -650,19 +1179,19 @@ samp {
     display: flex;
     align-items: center;
     height: 1.35rem;
-    background: #282f3a;
-    color: #6f7888;
+    background: var(--term-tab-bg);
+    color: var(--term-muted);
 }
 
 .mock-tabs span {
     min-width: 4.6rem;
     padding: 0.24rem 0.7rem;
-    border-right: 1px solid #252c36;
+    border-right: 1px solid var(--term-border);
 }
 
 .mock-tabs span.active {
-    background: #66b9f2;
-    color: #111820;
+    background: var(--term-tab-active-bg);
+    color: var(--term-tab-active-text);
     font-weight: 800;
 }
 
@@ -681,90 +1210,90 @@ samp {
 .mock-pane {
     min-width: 0;
     overflow: hidden;
-    border: 1px solid #58616f;
-    background: #20262f;
+    border: 1px solid var(--term-border);
+    background: var(--term-bg);
     padding: 0.75rem;
 }
 
 .mock-pane.focused {
-    border: 2px solid #61b7f4;
+    border: 2px solid var(--term-tab-active-bg);
     padding: calc(0.75rem - 1px);
 }
 
 .mock-prompt {
     margin-bottom: 0.25rem;
-    color: #67c7ff;
+    color: var(--term-prompt);
     font-size: 1.08em;
     font-weight: 700;
 }
 
 .mock-prompt em {
-    color: #8b929f;
+    color: var(--term-dim);
     font-style: normal;
     font-weight: 500;
 }
 
 .mock-pane b {
-    color: #d276ff;
+    color: var(--accent);
 }
 
 .herdr-ui-mock .cmd {
-    color: #9ed987;
+    color: var(--term-cmd);
 }
 
 .herdr-ui-mock .str {
-    color: #f4c76e;
+    color: var(--term-str);
 }
 
 .herdr-ui-mock pre {
     margin: 0.55rem 0 0.75rem;
-    color: #c3ccd7;
+    color: var(--term-text);
     white-space: pre;
 }
 
 .herdr-ui-mock .dim,
 .herdr-ui-mock .time {
-    color: #818b9a;
+    color: var(--term-dim);
 }
 
 .herdr-ui-mock .blue,
 .herdr-ui-mock .url-line span {
-    color: #5ec8ff;
+    color: var(--term-blue);
 }
 
 .herdr-ui-mock .green {
-    color: #a6e3a1;
+    color: var(--term-green-bright);
 }
 
 .herdr-ui-mock .badge {
     display: inline-block;
-    padding: 0.12rem 0.5rem;
-    background: #95d581;
-    color: #49605a;
+    padding: 0.1rem 0.45rem;
+    background: var(--term-green-bright);
+    color: var(--term-bg);
     font-weight: 800;
 }
 
 .cursor {
     display: inline-block;
-    width: 0.45rem;
-    height: 0.95rem;
-    background: #c8d1dd;
-    vertical-align: -0.16rem;
+    width: 0.4rem;
+    height: 0.85rem;
+    background: var(--term-text);
+    vertical-align: -0.14rem;
 }
 
 .demo-section {
     padding-top: 0;
-    padding-bottom: 6rem;
+    padding-bottom: 5rem;
 }
 
 .demo-video {
     width: 100%;
     overflow: hidden;
     aspect-ratio: 16 / 9;
-    border-radius: 28px;
+    border-radius: var(--radius-lg);
     background: var(--terminal);
     object-fit: cover;
-    box-shadow: var(--shadow), 0 0 0 1px rgb(21 26 33 / 0.08);
+    border: 1px solid var(--line-strong);
 }
 
 .logo-cloud {
@@ -775,57 +1304,66 @@ samp {
 }
 
 .logo-cloud-heading {
-    margin-bottom: 0.9rem;
+    margin-bottom: 0.8rem;
     text-align: center;
 }
 
 .logo-cloud-heading .section-kicker {
-    margin-bottom: 0.45rem;
+    margin-bottom: 0.4rem;
 }
 
 .logo-cloud-heading h2 {
     margin: 0;
-    color: var(--ink-soft);
-    font-size: clamp(1.05rem, 2vw, 1.35rem);
+    color: var(--muted);
+    font-size: clamp(1rem, 2vw, 1.25rem);
     line-height: 1.25;
-    letter-spacing: -0.035em;
+    letter-spacing: -0.02em;
+    font-family: var(--body);
+    font-weight: 400;
 }
 
 .logo-marquee {
     position: relative;
     overflow: hidden;
-    background: radial-gradient(ellipse at center, rgb(201 189 173 / 0.28) 0%, rgb(201 189 173 / 0.16) 36%, transparent 72%);
-    -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
-    mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
+    border-top: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    padding: 0.5rem 0;
 }
 
 .logo-track {
     display: flex;
     width: max-content;
-    animation: logo-marquee 22s linear infinite;
+    animation: logo-marquee 24s linear infinite;
 }
 
 .logo-row {
     display: flex;
     flex: 0 0 auto;
-    gap: 0.65rem;
-    padding: 0.45rem 0.325rem;
+    gap: 0.5rem;
+    padding: 0.25rem 0.25rem;
 }
 
 .logo-card {
-    width: 150px;
-    height: 58px;
+    width: 140px;
+    height: 50px;
     display: grid;
     place-items: center;
-    padding: 0.5rem 0.85rem;
-    color: var(--ink-soft);
+    padding: 0.4rem 0.75rem;
+    color: var(--muted);
 }
 
 .logo-card img {
     width: auto;
-    height: 32px;
-    max-width: 116px;
+    height: 26px;
+    max-width: 110px;
     object-fit: contain;
+    opacity: var(--logo-opacity);
+    filter: var(--logo-filter);
+    transition: opacity 0.2s, filter 0.2s;
+}
+
+.logo-card img:hover {
+    opacity: 0.95;
 }
 
 .logo-card span {
@@ -838,14 +1376,42 @@ samp {
     }
 }
 
-.section {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-    border-top: 1px solid rgb(201 189 173 / 0.68);
+@keyframes theme-hint-pulse {
+    0%, 70%, 100% {
+        opacity: 0;
+        transform: scale(1);
+    }
+    78% {
+        opacity: 0.45;
+        transform: scale(1.06);
+    }
+    88% {
+        opacity: 0;
+        transform: scale(1.13);
+    }
+}
+
+@keyframes theme-hint-dot {
+    0%, 70%, 100% {
+        transform: translateX(0);
+    }
+    78% {
+        transform: translateX(2px);
+    }
+    86% {
+        transform: translateX(0);
+    }
+}
+
+.section,
+.awareness-section {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    border-top: 1px solid var(--line);
 }
 
 .intro-section {
-    padding-top: 3rem;
+    padding-top: 2.5rem;
 }
 
 .intro-section .section-heading-wide h2 {
@@ -855,38 +1421,38 @@ samp {
 .contrast-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.85rem;
-    margin-top: 2rem;
+    gap: 0.75rem;
+    margin-top: 1.75rem;
 }
 
 .contrast-grid article {
-    min-height: 150px;
-    padding: 1.1rem;
+    min-height: 140px;
+    padding: 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);
+    background: transparent;
 }
 
 .contrast-grid span {
     display: block;
-    color: var(--accent-dark);
+    color: var(--accent);
     font-family: var(--mono);
-    font-size: 0.74rem;
+    font-size: 0.68rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
 }
 
 .contrast-grid p {
-    margin: 0.85rem 0 0;
+    margin: 0.7rem 0 0;
     color: var(--ink-soft);
-    line-height: 1.6;
+    line-height: 1.55;
+    font-size: 0.95rem;
 }
 
 .section-heading,
 .section-heading-wide {
-    margin-bottom: 2rem;
+    margin-bottom: 1.75rem;
 }
 
 .section-heading h2,
@@ -894,13 +1460,15 @@ samp {
 .feature-copy h2,
 .api-copy h2,
 .final-cta h2 {
-    font-size: clamp(2.1rem, 4.8vw, 4.4rem);
-    max-width: 880px;
+    font-size: clamp(1.8rem, 4vw, 3.2rem);
+    max-width: 800px;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .section-heading-wide {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.52fr);
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
     gap: 2.5rem;
     align-items: end;
 }
@@ -910,15 +1478,15 @@ samp {
 .api-copy p,
 .final-cta p {
     margin: 0;
-    color: var(--ink-soft);
-    font-size: 1.05rem;
-    line-height: 1.75;
+    color: var(--muted);
+    font-size: 1rem;
+    line-height: 1.65;
 }
 
 .pillar-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 .pillar-card,
@@ -926,44 +1494,46 @@ samp {
 .awareness-card {
     border: 1px solid var(--line);
     border-radius: var(--radius-md);
-    background: rgb(255 253 248 / 0.74);
-    box-shadow: 0 16px 50px rgb(35 29 21 / 0.06);
+    background: transparent;
 }
 
 .pillar-card {
-    min-height: 235px;
-    padding: 1.35rem;
+    min-height: 220px;
+    padding: 1.25rem;
     display: flex;
     flex-direction: column;
 }
 
 .card-index {
     width: fit-content;
-    border-radius: 999px;
+    border-radius: var(--radius-sm);
     background: var(--accent-soft);
-    color: var(--accent-dark);
-    padding: 0.26rem 0.55rem;
+    color: var(--accent);
+    padding: 0.2rem 0.5rem;
     font-family: var(--mono);
-    font-size: 0.72rem;
+    font-size: 0.68rem;
     font-weight: 700;
 }
 
 .pillar-card h3,
 .access-card h3,
 .awareness-card h3 {
-    margin: 1.25rem 0 0;
+    margin: 1rem 0 0;
     color: var(--ink);
-    letter-spacing: -0.04em;
-    line-height: 1.08;
-    font-size: 1.45rem;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    font-size: 1.2rem;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .pillar-card p,
 .access-card p,
 .awareness-card p {
-    margin: 0.9rem 0 0;
+    margin: 0.75rem 0 0;
     color: var(--muted);
-    line-height: 1.65;
+    line-height: 1.6;
+    font-size: 0.95rem;
 }
 
 .feature-split,
@@ -986,70 +1556,143 @@ samp {
 
 .feature-copy p,
 .api-copy p {
-    margin-top: 1.3rem;
+    margin-top: 1.1rem;
 }
 
 .check-list {
     list-style: none;
-    margin: 1.4rem 0 0;
+    margin: 1.2rem 0 0;
     padding: 0;
     display: grid;
-    gap: 0.7rem;
-    color: var(--ink-soft);
+    gap: 0.6rem;
+    color: var(--muted);
+    font-size: 0.95rem;
 }
 
 .check-list li {
     position: relative;
-    padding-left: 1.55rem;
+    padding-left: 1.4rem;
 }
 
 .check-list li::before {
-    content: "✓";
+    content: "→";
     position: absolute;
     left: 0;
     color: var(--accent);
-    font-weight: 800;
+    font-family: var(--mono);
+    font-weight: 700;
 }
 
-.screenshot-card {
+.feature-mock {
     margin: 0;
     overflow: hidden;
     border-radius: var(--radius-lg);
-    background: var(--terminal);
-    box-shadow: var(--shadow);
-    border: 1px solid rgb(21 26 33 / 0.1);
+    background: var(--term-bg);
+    border: 1px solid var(--term-border);
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    line-height: 1.5;
+    color: var(--term-muted);
+    pointer-events: none;
+    user-select: none;
+    min-height: 380px;
+    display: flex;
+    flex-direction: column;
 }
 
-.screenshot-card img {
-    width: 100%;
-    height: auto;
+.feature-mock-panes {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0.45rem;
+    padding: 0.55rem;
+    flex: 1;
+}
+
+.feature-mock .mock-pane {
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid var(--term-border);
+    background: var(--term-bg);
+    padding: 0.75rem;
+}
+
+.feature-mock .mock-pane.focused {
+    border: 2px solid var(--term-tab-active-bg);
+    padding: calc(0.75rem - 1px);
+}
+
+.feature-mock .mock-prompt {
+    margin-bottom: 0.35rem;
+    color: var(--term-prompt);
+    font-size: 1.05em;
+    font-weight: 700;
+}
+
+.feature-mock .mock-prompt em {
+    color: var(--term-dim);
+    font-style: normal;
+    font-weight: 500;
+}
+
+.feature-mock b {
+    color: var(--accent);
+}
+
+.feature-mock .cmd {
+    color: var(--term-cmd);
+}
+
+.feature-mock .str {
+    color: var(--term-str);
+}
+
+.feature-mock .dim,
+.feature-mock .time {
+    color: var(--term-dim);
+}
+
+.feature-mock .green {
+    color: var(--term-green-bright);
+}
+
+.feature-mock .red {
+    color: var(--red);
+}
+
+.feature-mock .cursor {
+    display: inline-block;
+    width: 0.4rem;
+    height: 0.85rem;
+    background: var(--term-text);
+    vertical-align: -0.14rem;
 }
 
 .access-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 .access-card {
     position: relative;
     display: flex;
     flex-direction: column;
-    min-height: 360px;
+    min-height: 340px;
     overflow: hidden;
-    padding: 1.25rem;
+    padding: 1.1rem;
+    background: var(--bg-elevated);
 }
 
 .access-card::before {
     content: "";
     position: absolute;
     inset: 0 0 auto;
-    height: 4px;
+    height: 3px;
     background: var(--accent);
 }
 
 .access-card:nth-child(2)::before {
-    background: var(--blue);
+    background: var(--green);
 }
 
 .access-card:nth-child(3)::before {
@@ -1057,33 +1700,32 @@ samp {
 }
 
 .access-label {
-    color: var(--accent-dark);
-    font-size: 0.72rem;
-    font-weight: 800;
+    color: var(--accent);
+    font-family: var(--mono);
+    font-size: 0.68rem;
+    font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
 }
 
 .access-card h3 {
-    margin-top: 1rem;
+    margin-top: 0.85rem;
 }
 
 .access-card p {
-    margin-top: 0.85rem;
+    margin-top: 0.7rem;
 }
 
 .access-card pre {
     margin: auto 0 0;
-    padding: 1rem;
+    padding: 0.85rem;
     overflow: auto;
-    border-radius: 14px;
-    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);
+    border-radius: var(--radius-sm);
+    background: var(--term-bg);
+    color: var(--term-text);
+    font-size: 0.78rem;
+    line-height: 1.5;
+    border: 1px solid var(--term-border);
 }
 
 .mobile-proof {
@@ -1098,24 +1740,29 @@ samp {
     margin: 0;
     max-width: 620px;
     color: var(--ink);
-    font-size: clamp(2rem, 4vw, 3.5rem);
-    letter-spacing: -0.06em;
-    line-height: 0.98;
+    font-size: clamp(1.7rem, 3.5vw, 2.8rem);
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .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;
+    margin: 1rem 0 0;
+    max-width: 480px;
+    color: var(--muted);
+    font-size: 0.95rem;
+    line-height: 1.6;
 }
 
 .mobile-shots {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 230px));
-    justify-content: end;
-    gap: 1rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.85rem;
+    padding: 0.9rem;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--bg-elevated);
 }
 
 .mobile-proof figure {
@@ -1124,32 +1771,33 @@ samp {
 }
 
 .mobile-proof img {
-    aspect-ratio: 9 / 18;
     width: 100%;
+    height: 340px;
     object-fit: cover;
     object-position: top;
-    border-radius: 24px;
-    border: 8px solid var(--terminal);
-    box-shadow: 0 24px 70px rgb(21 26 33 / 0.18);
+    border-radius: var(--radius-md);
+    border: 5px solid var(--term-bg);
+    background: var(--term-bg);
 }
 
 .mobile-proof figcaption {
-    margin-top: 0.7rem;
+    margin-top: 0.5rem;
     color: var(--muted);
-    font-size: 0.85rem;
+    font-size: 0.78rem;
+    font-family: var(--mono);
 }
 
 .mobile-shout {
     grid-column: 1 / -1;
-    margin: 0.2rem 0 0;
+    margin: 0.1rem 0 0;
     color: var(--muted);
-    font-size: 0.82rem;
+    font-size: 0.78rem;
     text-align: center;
 }
 
 .mobile-shout a {
-    color: var(--ink-soft);
-    border-bottom: 1px solid var(--line-strong);
+    color: var(--muted);
+    border-bottom: 1px solid var(--line);
 }
 
 .mobile-shout a:hover {
@@ -1164,131 +1812,182 @@ samp {
 .inline-links {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.8rem;
-    margin-top: 1.5rem;
+    gap: 0.6rem;
+    margin-top: 1.25rem;
 }
 
 .inline-links a {
     border: 1px solid var(--line-strong);
-    border-radius: 999px;
-    padding: 0.62rem 0.85rem;
-    color: var(--ink-soft);
-    font-weight: 700;
+    border-radius: var(--radius-md);
+    padding: 0.5rem 0.75rem;
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    font-weight: 600;
 }
 
 .inline-links a:hover {
     border-color: var(--accent);
+    color: var(--accent);
     background: var(--accent-soft);
 }
 
 .code-card {
     min-width: 0;
     border-radius: var(--radius-lg);
-    background: var(--terminal);
-    box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / 0.08);
+    background: var(--term-bg);
+    border: 1px solid var(--line-strong);
     overflow: hidden;
 }
 
 .code-card pre {
     margin: 0;
-    padding: 1.35rem;
-    color: #d8e3ed;
+    padding: 1.15rem;
+    color: var(--term-text);
     overflow: auto;
     font-size: 0.82rem;
-    line-height: 1.8;
+    line-height: 1.75;
 }
 
-.comment {
-    color: #788697;
+.code-card .comment {
+    color: var(--term-muted);
 }
 
-.cmd {
-    color: #67d7ca;
+.code-card .cmd {
+    color: var(--term-prompt);
     font-weight: 700;
 }
 
-.flag {
-    color: #8eb3ff;
+.code-card .flag {
+    color: var(--term-str);
 }
 
-.str {
-    color: #f4cf88;
+.code-card .str {
+    color: var(--term-cmd);
 }
 
 .awareness-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 .awareness-card {
     display: flex;
     flex-direction: column;
-    padding: 1.25rem;
+    padding: 1.1rem;
 }
 
-.awareness-card img {
+.awareness-mock {
     width: 100%;
-    height: 320px;
-    object-fit: contain;
-    border-radius: 16px;
-    background: var(--terminal);
-    padding: 1rem;
+    height: 240px;
+    margin: 0;
+    overflow: hidden;
+    border-radius: var(--radius-sm);
+    background: var(--term-bg);
+    border: 1px solid var(--term-border);
+    font-family: var(--mono);
+    font-size: 0.68rem;
+    line-height: 1.4;
+    color: var(--term-muted);
+    pointer-events: none;
+    user-select: none;
+}
+
+.awareness-mock .mock-sidebar {
+    height: 100%;
+    border-right: none;
+    background: var(--term-sidebar-bg);
+}
+
+.awareness-mock .mock-sidebar-title {
+    padding: 0.6rem 0.85rem;
+    font-size: 0.72rem;
+}
+
+.awareness-mock .mock-space {
+    padding: 0.5rem 0.85rem;
+    gap: 0.5rem;
+    font-size: 0.72rem;
+}
+
+.awareness-mock .mock-agent {
+    padding: 0.4rem 0.85rem;
+    gap: 0.45rem;
+    font-size: 0.72rem;
+}
+
+.awareness-mock .mock-agent-title {
+    padding: 0.5rem 0.85rem;
+    font-size: 0.72rem;
+}
+
+.awareness-mock .mock-dot {
+    width: 0.42rem;
+    height: 0.42rem;
+    margin-top: 0.2rem;
+}
+
+.awareness-mock .mock-sidebar-spacer {
+    min-height: 2rem;
 }
 
 .awareness-card p {
-    margin-top: 0.85rem;
+    margin-top: 0.75rem;
 }
 
 .state-legend {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.75rem;
+    gap: 0.6rem;
     margin-top: 1rem;
 }
 
 .state-legend span {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.4rem;
     border: 1px solid var(--line);
-    border-radius: 999px;
-    background: rgb(255 253 248 / 0.65);
-    color: var(--ink-soft);
-    padding: 0.5rem 0.75rem;
-    font-size: 0.9rem;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--muted);
+    padding: 0.4rem 0.65rem;
+    font-size: 0.82rem;
+    font-family: var(--mono);
 }
 
 .table-wrap {
     overflow: auto;
     border: 1px solid var(--line);
     border-radius: var(--radius-md);
-    background: rgb(255 253 248 / 0.76);
-    box-shadow: 0 16px 50px rgb(35 29 21 / 0.06);
+    background: transparent;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
-    min-width: 720px;
+    min-width: 680px;
 }
 
 th,
 td {
-    padding: 1rem;
+    padding: 0.85rem 1rem;
     border-bottom: 1px solid var(--line);
     text-align: left;
 }
 
 th {
     color: var(--muted);
-    font-size: 0.75rem;
-    letter-spacing: 0.12em;
+    font-size: 0.68rem;
+    font-family: var(--mono);
+    letter-spacing: 0.1em;
     text-transform: uppercase;
+    font-weight: 700;
 }
 
 td {
     color: var(--ink-soft);
+    font-size: 0.92rem;
 }
 
 tr:last-child td {
@@ -1297,45 +1996,75 @@ tr:last-child td {
 
 th:last-child,
 td:last-child {
-    color: var(--accent-dark);
-    font-weight: 800;
-    background: rgb(217 238 233 / 0.5);
+    color: var(--accent);
+    font-weight: 700;
+    background: var(--accent-soft);
 }
 
 .compare-cards {
     display: none;
 }
 
-.integration-grid {
+.agent-grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 0.75rem;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 0.6rem;
 }
 
-.integration-grid span {
-    display: flex;
+.agent-card {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 4.5rem;
+    gap: 0.5rem;
+    min-height: 3rem;
+    padding: 0.65rem 0.75rem;
     border: 1px solid var(--line);
-    border-radius: 18px;
-    background: rgb(255 253 248 / 0.76);
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
     color: var(--ink-soft);
-    font-weight: 750;
-    box-shadow: 0 12px 36px rgb(35 29 21 / 0.05);
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    font-weight: 600;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
 }
 
+.agent-card .agent-icon {
+    display: inline-block;
+    width: 1.15rem;
+    height: 1.15rem;
+    flex: 0 0 auto;
+    background-color: currentColor;
+    opacity: 0.9;
+    -webkit-mask-image: var(--agent-icon);
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-image: var(--agent-icon);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+}
+
+.agent-more {
+    color: var(--accent);
+    background: var(--accent-soft);
+    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
+}
+
+
 .integration-note {
-    max-width: 720px;
-    margin: 1.3rem 0 0;
-    color: var(--ink-soft);
-    font-size: 1.02rem;
-    line-height: 1.7;
+    max-width: 680px;
+    margin: 1.1rem 0 0;
+    color: var(--muted);
+    font-size: 0.95rem;
+    line-height: 1.6;
 }
 
 .integration-note a {
-    color: var(--accent-dark);
-    font-weight: 800;
+    color: var(--accent);
+    font-weight: 700;
     text-decoration: underline;
     text-decoration-thickness: 0.08em;
     text-underline-offset: 0.18em;
@@ -1343,17 +2072,13 @@ td:last-child {
 
 .final-cta {
     margin-top: 2rem;
-    margin-bottom: 5rem;
-    padding-top: 4rem;
-    padding-bottom: 4rem;
+    margin-bottom: 4rem;
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
     text-align: center;
-    border-radius: 36px;
-    background:
-        radial-gradient(circle at 18% 20%, rgb(103 215 202 / 0.2), transparent 22rem),
-        radial-gradient(circle at 82% 0%, rgb(37 99 235 / 0.16), transparent 20rem),
-        var(--paper);
+    border-radius: var(--radius-lg);
+    background: transparent;
     border: 1px solid var(--line);
-    box-shadow: var(--shadow);
 }
 
 .final-cta .section-kicker {
@@ -1362,23 +2087,25 @@ td:last-child {
 
 .final-cta h2 {
     margin-inline: auto;
-    max-width: 760px;
+    max-width: 680px;
 }
 
 .final-cta p {
-    max-width: 620px;
-    margin: 1.2rem auto 0;
+    max-width: 560px;
+    margin: 1rem auto 0;
 }
 
 .footer {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
+    padding-top: 1.75rem;
+    padding-bottom: 1.75rem;
     border-top: 1px solid var(--line);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     color: var(--muted);
+    font-size: 0.85rem;
+    font-family: var(--mono);
 }
 
 .footer div {
@@ -1386,74 +2113,80 @@ td:last-child {
     flex-wrap: wrap;
     gap: 1rem;
     justify-content: flex-end;
-    font-size: 0.9rem;
 }
 
 .compare-hero {
-    grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 0.75fr);
+    max-width: var(--max);
+    min-height: auto;
+    margin: 0 auto;
+    padding: 5rem 1.25rem;
+    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
+    gap: 2rem;
     align-items: center;
+    border-bottom: 0;
+}
+
+.compare-hero .hero-copy {
+    max-width: 640px;
+}
+
+.compare-hero h1 {
+    font-size: clamp(2.4rem, 5vw, 4rem);
 }
 
 .compare-claim-card {
-    border: 1px solid var(--line-strong);
+    border: 1px solid var(--line);
     border-radius: var(--radius-lg);
-    background:
-        radial-gradient(circle at 22% 0%, rgb(103 215 202 / 0.2), transparent 18rem),
-        rgb(255 253 248 / 0.82);
-    box-shadow: var(--shadow);
-    padding: clamp(1.35rem, 3vw, 2rem);
+    background: transparent;
+    padding: clamp(1.25rem, 3vw, 1.75rem);
 }
 
 .compare-claim-card h2 {
     margin: 0;
     color: var(--ink);
-    font-size: clamp(1.85rem, 3vw, 2.85rem);
-    letter-spacing: -0.055em;
-    line-height: 1.04;
+    font-size: clamp(1.6rem, 3vw, 2.4rem);
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .compare-checks {
     list-style: none;
-    margin: 1.25rem 0 0;
+    margin: 1.1rem 0 0;
     padding: 0;
     display: grid;
-    gap: 0.65rem;
+    gap: 0.55rem;
 }
 
 .compare-checks li {
     position: relative;
-    padding-left: 1.65rem;
-    color: var(--ink-soft);
-    line-height: 1.5;
+    padding-left: 1.4rem;
+    color: var(--muted);
+    line-height: 1.45;
+    font-size: 0.92rem;
 }
 
 .compare-checks li::before {
-    content: "✓";
+    content: "→";
     position: absolute;
     left: 0;
-    top: 0.05rem;
-    display: inline-grid;
-    place-items: center;
-    width: 1.05rem;
-    height: 1.05rem;
-    border-radius: 999px;
-    background: var(--accent-soft);
-    color: var(--accent-dark);
-    font-size: 0.72rem;
-    font-weight: 900;
+    color: var(--accent);
+    font-family: var(--mono);
+    font-weight: 700;
 }
 
 .compare-section .section-heading-wide a,
 .compare-stack-section .section-heading-wide a {
-    color: var(--accent-dark);
-    font-weight: 800;
+    color: var(--accent);
+    font-weight: 700;
     text-decoration: underline;
     text-decoration-thickness: 0.08em;
     text-underline-offset: 0.18em;
 }
 
 .comparison-matrix table {
-    min-width: 980px;
+    min-width: 900px;
 }
 
 .comparison-matrix th:last-child,
@@ -1465,134 +2198,135 @@ td:last-child {
 
 .comparison-matrix th:nth-child(2),
 .comparison-matrix td:nth-child(2) {
-    color: var(--accent-dark);
-    font-weight: 850;
-    background: rgb(217 238 233 / 0.54);
+    color: var(--accent);
+    font-weight: 700;
+    background: var(--accent-soft);
 }
 
 .comparison-matrix td:first-child {
     color: var(--ink);
-    font-weight: 760;
+    font-weight: 600;
 }
 
 .differ-grid {
     display: grid;
-    grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.12fr);
-    gap: 1rem;
+    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
+    gap: 0.75rem;
     align-items: stretch;
 }
 
 .intersection-card,
 .differ-list article {
     border: 1px solid var(--line);
-    background: rgb(255 253 248 / 0.74);
-    box-shadow: 0 16px 50px rgb(35 29 21 / 0.06);
+    background: transparent;
 }
 
 .intersection-card {
-    border-color: var(--line-strong);
     border-radius: var(--radius-lg);
-    padding: clamp(1.4rem, 3vw, 2rem);
-    background:
-        radial-gradient(circle at 18% 0%, rgb(103 215 202 / 0.2), transparent 18rem),
-        radial-gradient(circle at 100% 100%, rgb(37 99 235 / 0.1), transparent 16rem),
-        rgb(255 253 248 / 0.84);
+    padding: clamp(1.25rem, 3vw, 1.75rem);
 }
 
 .intersection-card h3 {
-    margin: 1.2rem 0 0;
+    margin: 1rem 0 0;
     color: var(--ink);
-    font-size: clamp(2rem, 4vw, 3.35rem);
-    letter-spacing: -0.06em;
-    line-height: 1;
+    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .intersection-card p {
-    margin: 1.15rem 0 0;
-    color: var(--ink-soft);
-    font-size: 1.05rem;
-    line-height: 1.75;
+    margin: 1rem 0 0;
+    color: var(--muted);
+    font-size: 0.95rem;
+    line-height: 1.65;
 }
 
 .intersection-pills {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.55rem;
-    margin-top: 1.45rem;
+    gap: 0.45rem;
+    margin-top: 1.2rem;
 }
 
 .intersection-pills span {
-    border: 1px solid rgb(31 111 104 / 0.18);
-    border-radius: 999px;
-    background: var(--accent-soft);
-    color: var(--accent-dark);
-    padding: 0.45rem 0.65rem;
-    font-size: 0.78rem;
-    font-weight: 800;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--accent);
+    padding: 0.3rem 0.55rem;
+    font-size: 0.72rem;
+    font-family: var(--mono);
+    font-weight: 700;
 }
 
 .differ-list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1rem;
+    gap: 0.75rem;
 }
 
 .differ-list article {
-    min-height: 210px;
+    min-height: 190px;
     border-radius: var(--radius-md);
-    padding: 1.2rem;
+    padding: 1.1rem;
 }
 
 .differ-list article span {
     display: block;
-    color: var(--accent-dark);
+    color: var(--accent);
     font-family: var(--mono);
-    font-size: 0.72rem;
-    font-weight: 750;
+    font-size: 0.68rem;
+    font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
 }
 
 .differ-list article h3 {
-    margin: 1rem 0 0;
+    margin: 0.85rem 0 0;
     color: var(--ink);
-    font-size: 1.32rem;
-    letter-spacing: -0.04em;
-    line-height: 1.1;
+    font-size: 1.15rem;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+    font-family: var(--mono);
+    font-weight: 400;
 }
 
 .differ-list article p {
-    margin: 0.85rem 0 0;
+    margin: 0.7rem 0 0;
     color: var(--muted);
-    line-height: 1.65;
+    line-height: 1.6;
+    font-size: 0.92rem;
 }
 
 .one-liner-list {
     display: grid;
-    gap: 0.75rem;
+    gap: 0.6rem;
 }
 
 .one-liner-list article {
     display: grid;
-    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
+    grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
     gap: 1rem;
     align-items: start;
-    padding: 1rem 1.1rem;
+    padding: 0.85rem 1rem;
     border: 1px solid var(--line);
-    border-radius: 18px;
-    background: rgb(255 253 248 / 0.72);
-    box-shadow: 0 12px 34px rgb(35 29 21 / 0.04);
+    border-radius: var(--radius-md);
+    background: transparent;
 }
 
 .one-liner-list strong {
-    color: var(--accent-dark);
+    color: var(--accent);
     font-family: var(--mono);
-    font-size: 0.86rem;
+    font-size: 0.8rem;
+    font-weight: 700;
 }
 
 .one-liner-list span {
-    color: var(--ink-soft);
-    line-height: 1.65;
+    color: var(--muted);
+    line-height: 1.55;
+    font-size: 0.92rem;
 }
 
 .compare-final-cta {
@@ -1600,20 +2334,28 @@ td:last-child {
 }
 
 @media (max-width: 980px) {
-    .hero,
-    .feature-split,
-    .api-section,
-    .section-heading-wide {
+    .hero {
         grid-template-columns: 1fr;
     }
 
-    .hero {
-        padding-top: 4.5rem;
+    .hero-left {
+        padding: 3rem 2rem;
+        border-right: none;
+        border-bottom: 1px solid var(--line);
+    }
+
+    .hero-right {
+        padding: 3rem 2rem;
     }
 
     .hero-product-shot {
-        transform: none;
-        max-width: 760px;
+        max-width: 720px;
+    }
+
+    .feature-split,
+    .api-section,
+    .section-heading-wide {
+        grid-template-columns: 1fr;
     }
 
     .pillar-grid,
@@ -1621,9 +2363,16 @@ td:last-child {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
-    .access-grid,
-    .integration-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+    .access-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .agent-grid {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .agent-card:nth-child(8) {
+        grid-column-start: auto;
     }
 
     .mobile-proof,
@@ -1632,7 +2381,8 @@ td:last-child {
     }
 
     .mobile-shots {
-        justify-content: center;
+        max-width: 720px;
+        margin-inline: auto;
     }
 
     .intersection-card {
@@ -1649,8 +2399,8 @@ td:last-child {
         display: none;
     }
 
-    .hero,
     .section,
+    .awareness-section,
     .demo-section,
     .logo-cloud,
     .footer,
@@ -1658,22 +2408,28 @@ td:last-child {
         padding-inline: 1rem;
     }
 
+    .hero-left {
+        padding: 2.5rem 1.25rem;
+    }
+
+    .hero-right {
+        padding: 2rem 1.25rem;
+    }
+
     .hero {
-        padding-top: 3.25rem;
-        padding-bottom: 2.5rem;
-        gap: 2rem;
+        min-height: auto;
     }
 
     .hero h1 {
-        font-size: clamp(2.65rem, 13.2vw, 3.65rem);
+        font-size: clamp(2.2rem, 11vw, 3rem);
     }
 
     .hero-lede {
-        font-size: 1rem;
+        font-size: 0.95rem;
     }
 
     .install-card {
-        border-radius: 18px;
+        border-radius: var(--radius-md);
         grid-template-columns: auto minmax(0, 1fr);
     }
 
@@ -1683,30 +2439,31 @@ td:last-child {
     }
 
     .demo-section {
-        padding-bottom: 4rem;
+        padding-bottom: 3rem;
     }
 
     .demo-video {
-        border-radius: 18px;
+        border-radius: var(--radius-md);
     }
 
     .logo-cloud {
-        padding-bottom: 3rem;
+        padding-bottom: 2.5rem;
     }
 
     .logo-card {
-        width: 132px;
-        height: 54px;
+        width: 120px;
+        height: 46px;
     }
 
     .logo-card img {
-        height: 28px;
-        max-width: 100px;
+        height: 24px;
+        max-width: 92px;
     }
 
-    .section {
-        padding-top: 4rem;
-        padding-bottom: 4rem;
+    .section,
+    .awareness-section {
+        padding-top: 3rem;
+        padding-bottom: 3rem;
     }
 
     .section-heading h2,
@@ -1714,72 +2471,77 @@ td:last-child {
     .feature-copy h2,
     .api-copy h2,
     .final-cta h2 {
-        font-size: clamp(2rem, 11vw, 3rem);
+        font-size: clamp(1.6rem, 10vw, 2.4rem);
     }
 
     .pillar-grid,
     .contrast-grid,
     .access-grid,
     .awareness-grid,
-    .integration-grid,
     .differ-list {
         grid-template-columns: 1fr;
     }
 
+    .agent-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .compare-section .table-wrap {
         display: none;
     }
 
     .compare-cards {
         display: grid;
-        gap: 0.75rem;
+        gap: 0.6rem;
     }
 
     .compare-cards article {
         display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
-        gap: 0.5rem;
-        padding: 1rem;
+        gap: 0.4rem;
+        padding: 0.85rem;
         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);
+        background: transparent;
     }
 
     .compare-cards h3 {
         grid-column: 1 / -1;
-        margin: 0 0 0.25rem;
+        margin: 0 0 0.2rem;
         color: var(--ink);
-        font-size: 1.05rem;
-        letter-spacing: -0.04em;
+        font-size: 0.95rem;
+        letter-spacing: -0.02em;
+        font-family: var(--mono);
     }
 
     .compare-cards span {
         display: grid;
-        gap: 0.25rem;
-        padding: 0.65rem 0.55rem;
-        border-radius: 14px;
-        background: var(--paper-muted);
+        gap: 0.2rem;
+        padding: 0.55rem 0.45rem;
+        border-radius: var(--radius-sm);
+        background: var(--bg-elevated);
         color: var(--muted);
-        font-size: 0.72rem;
-        font-weight: 800;
+        font-size: 0.65rem;
+        font-weight: 700;
         text-align: center;
         text-transform: uppercase;
+        font-family: var(--mono);
     }
 
     .compare-cards b {
         color: var(--ink-soft);
-        font-size: 0.9rem;
+        font-size: 0.82rem;
         text-transform: none;
+        font-weight: 600;
     }
 
     .compare-cards .herdr {
         background: var(--accent-soft);
-        color: var(--accent-dark);
+        color: var(--accent);
     }
 
     .compare-cards .herdr b {
-        color: var(--accent-dark);
+        color: var(--accent);
     }
 
     .one-liner-list article {
@@ -1791,11 +2553,7 @@ td:last-child {
     }
 
     .pillar-card p {
-        margin-top: 1rem;
-    }
-
-    .screenshot-card img {
-        height: auto;
+        margin-top: 0.85rem;
     }
 
     .access-card {
@@ -1803,12 +2561,16 @@ td:last-child {
     }
 
     .mobile-shots {
-        grid-template-columns: minmax(0, 230px);
+        grid-template-columns: 1fr;
+    }
+
+    .mobile-proof img {
+        height: 300px;
     }
 
     .final-cta {
-        border-radius: 24px;
-        margin-bottom: 3rem;
+        border-radius: var(--radius-md);
+        margin-bottom: 2.5rem;
     }
 
     .footer {
@@ -1830,35 +2592,103 @@ td:last-child {
         width: 100%;
     }
 
+    .hero-right {
+        order: -1;
+        display: flex;
+        padding: 1.25rem 1rem 1.5rem;
+        border-bottom: 1px solid var(--line);
+        border-top: 0;
+    }
+
+    .hero-left {
+        border-bottom: none;
+    }
+
     .hero-product-shot {
-        display: none;
+        width: 100%;
+    }
+
+    .hero-product-shot figcaption {
+        display: block;
+        margin-top: 0.45rem;
+        font-size: 0.68rem;
+    }
+
+    .herdr-ui-mock {
+        grid-template-columns: 96px minmax(0, 1fr);
+        aspect-ratio: 16 / 10;
+        font-size: 0.38rem;
+        border-radius: var(--radius-md);
+    }
+
+    .mock-sidebar-title,
+    .mock-sidebar-row,
+    .mock-agent-title {
+        padding: 0.28rem 0.45rem;
+    }
+
+    .mock-space {
+        gap: 0.3rem;
+        padding: 0.3rem 0.45rem;
+    }
+
+    .mock-agent {
+        gap: 0.3rem;
+        padding: 0.24rem 0.45rem;
     }
 
-    .hero-pasture {
+    .herdr-ui-mock .mock-sidebar-spacer {
+        flex: 0 0 0.35rem;
+    }
+
+    .mock-tabs {
+        height: 1.05rem;
+    }
+
+    .mock-tabs span {
+        min-width: 2.8rem;
+        padding: 0.15rem 0.4rem;
+    }
+
+    .mock-panes {
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: 0.35rem;
+    }
+
+    .mock-pane {
+        padding: 0.45rem;
+    }
+
+    .mock-pane.focused {
+        padding: calc(0.45rem - 1px);
+    }
+
+    .mock-pane:nth-child(2) {
         display: none;
     }
 
-    .hero-product-shot figcaption {
-        font-size: 0.78rem;
+    .mock-pane pre {
+        margin: 0.35rem 0 0.45rem;
     }
 
     .logo-card {
-        width: 118px;
+        width: 110px;
     }
 
     .logo-card img {
-        height: 26px;
-        max-width: 92px;
+        height: 22px;
+        max-width: 88px;
     }
 
     .mobile-proof,
     .mobile-shots {
-        gap: 0.65rem;
+        gap: 0.55rem;
     }
 
     .mobile-proof img {
-        border-width: 5px;
-        border-radius: 18px;
+        height: 260px;
+        border-width: 4px;
     }
 }
 
@@ -1870,4 +2700,8 @@ td:last-child {
         animation-duration: 0.001ms !important;
         animation-iteration-count: 1 !important;
     }
+
+    .theme-hint::after {
+        display: none;
+    }
 }
diff --git a/website/index.html b/website/index.html
index 79e350fe..53ca28aa 100644
--- a/website/index.html
+++ b/website/index.html
@@ -8,7 +8,7 @@
             name="description"
             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" />
+        <meta name="theme-color" content="#f0eee9" />
         <link rel="canonical" href="https://herdr.dev/" />
 
         <meta property="og:type" content="website" />
@@ -48,13 +48,22 @@
             type="font/woff2"
             crossorigin
         />
-        <link rel="stylesheet" href="/css/style.css?v=19" />
+        <script>
+            (function () {
+                var saved = localStorage.getItem("herdr-palette");
+                var system = window.matchMedia("(prefers-color-scheme: dark)").matches
+                    ? "tokyo-night"
+                    : "tokyo-night-day";
+                document.documentElement.setAttribute("data-palette", saved || system);
+            })();
+        </script>
+        <link rel="stylesheet" href="/css/style.css?v=20" />
     </head>
     <body>
         <header class="site-header">
             <nav class="nav" aria-label="Primary navigation">
                 <a class="brand" href="/" aria-label="Herdr home">
-                    <img class="brand-logo" src="/assets/logo.svg" alt="" />
+                    <span class="brand-logo" aria-hidden="true"></span>
                     <span>herdr</span>
                 </a>
                 <div class="nav-links">
@@ -64,14 +73,16 @@
                     <a href="/docs/socket-api/">API</a>
                     <a href="https://github.com/ogulcancelik/herdr">GitHub</a>
                 </div>
-                <a class="nav-cta" href="/docs/install/">Install</a>
+                <div class="nav-tools">
+                    <a class="nav-cta" href="/docs/install/">Install</a>
+                </div>
             </nav>
         </header>
 
         <main>
             <section class="hero" id="hero">
-                <div class="hero-pasture" aria-hidden="true"></div>
-                <div class="hero-copy">
+                <div class="hero-left">
+                    <div class="hero-copy">
                     <p class="eyebrow">
                         <span class="status-dot dot-done"></span>
                         Terminal-native agent runtime
@@ -133,7 +144,9 @@
                         binary · no Electron
                     </p>
                 </div>
+                </div>
 
+                <div class="hero-right">
                 <figure class="hero-product-shot">
                     <div
                         class="herdr-ui-mock"
@@ -158,7 +171,7 @@
                             <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 working"><span class="braille-spinner"></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>
@@ -202,20 +215,7 @@
                         The whole herd in one terminal.
                     </figcaption>
                 </figure>
-            </section>
-
-            <section class="demo-section" aria-label="Herdr demo">
-                <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>
+                </div>
             </section>
 
             <section class="logo-cloud" aria-labelledby="logo-cloud-title">
@@ -425,12 +425,33 @@
                         <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 class="feature-mock" role="img" aria-label="Herdr showing split terminal panes">
+                    <div class="mock-panes feature-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">just</span> <span class="str">test</span></div>
+                            <div class="dim">cargo nextest run</div>
+                            <div><span class="time">02:14:22</span> <span class="green">PASS</span> app::state::tests</div>
+                            <div><span class="time">02:14:23</span> <span class="green">PASS</span> platform::pty::tests</div>
+                            <div><span class="time">02:14:24</span> <span class="green">PASS</span> protocol::wire::tests</div>
+                            <br />
+                            <div><span class="green">3 passed</span> · 0 failed · 0.8s</div>
+                            <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</span> <em>master</em></div>
+                            <div><b>❯</b> <span class="cmd">git</span> <span class="str">status</span></div>
+                            <div class="dim">On branch master</div>
+                            <div>Your branch is up to date.</div>
+                            <br />
+                            <div class="dim">Changes not staged:</div>
+                            <div><span class="red">M</span> src/app/state.rs</div>
+                            <div><span class="green">??</span> docs/next/</div>
+                            <br />
+                            <div class="dim">2 files changed, 14 insertions</div>
+                        </div>
+                    </div>
                 </figure>
             </section>
 
@@ -588,30 +609,52 @@ $ herdr</code></pre>
                     <h2>Keep the herd in sight.</h2>
                 </div>
                 <div class="awareness-grid">
-                    <article class="awareness-card">
-                        <img
-                            src="/assets/sidebar-workspaces-v2.png"
-                            alt="Herdr workspace sidebar state"
-                            loading="lazy"
-                        />
-                        <h3>Workspace rollups</h3>
-                        <p>
-                            Each workspace rolls up to its most urgent agent
-                            state, so the whole session is scannable.
-                        </p>
-                    </article>
-                    <article class="awareness-card">
-                        <img
-                            src="/assets/sidebar-agents-v2.png"
-                            alt="Herdr agent sidebar state"
-                            loading="lazy"
-                        />
-                        <h3>Agent list</h3>
-                        <p>
-                            See which agents are blocked, working, done, idle, or
-                            unknown without opening every pane.
-                        </p>
-                    </article>
+                        <article class="awareness-card">
+                            <figure class="awareness-mock" role="img" aria-label="Herdr workspace sidebar showing state rollups">
+                                <div class="mock-sidebar">
+                                    <div class="mock-sidebar-title">spaces</div>
+                                    <div class="mock-space active">
+                                        <span class="mock-dot dot-done"></span>
+                                        <div><strong>herdr</strong><small>master</small></div>
+                                    </div>
+                                    <div class="mock-space">
+                                        <span class="mock-dot dot-working"></span>
+                                        <div><strong>llm-proxy</strong><small>master</small></div>
+                                    </div>
+                                    <div class="mock-space">
+                                        <span class="mock-dot dot-blocked"></span>
+                                        <div><strong>docs-site</strong><small>docs/palette</small></div>
+                                    </div>
+                                    <div class="mock-space">
+                                        <span class="mock-dot dot-idle"></span>
+                                        <div><strong>qmp</strong><small>autoresearch/…</small></div>
+                                    </div>
+                                    <div class="mock-sidebar-spacer"></div>
+                                </div>
+                            </figure>
+                            <h3>Workspace rollups</h3>
+                            <p>
+                                Each workspace rolls up to its most urgent agent
+                                state, so the whole session is scannable.
+                            </p>
+                        </article>
+                        <article class="awareness-card">
+                            <figure class="awareness-mock" role="img" aria-label="Herdr agent list showing states">
+                                <div class="mock-sidebar">
+                                    <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 class="braille-spinner"></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>
+                                    <div class="mock-sidebar-spacer"></div>
+                                </div>
+                            </figure>
+                            <h3>Agent list</h3>
+                            <p>
+                                See which agents are blocked, working, done, idle, or
+                                unknown without opening every pane.
+                            </p>
+                        </article>
                 </div>
                 <div class="state-legend">
                     <span><i class="status-dot dot-blocked"></i>blocked</span>
@@ -627,15 +670,21 @@ $ herdr</code></pre>
                     <p class="section-kicker">Integrations</p>
                     <h2>Bring your existing agents into the herd.</h2>
                 </div>
-                <div class="integration-grid">
-                    <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 class="agent-grid" aria-label="Supported agents">
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/pi.svg')"></span><span>Pi</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/claude.svg')"></span><span>Claude Code</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/codex-mask.svg')"></span><span>Codex</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/droid.png')"></span><span>Droid</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/amp.svg')"></span><span>Amp</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/opencode.svg')"></span><span>OpenCode</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/grok.svg')"></span><span>Grok CLI</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/hermes.svg')"></span><span>Hermes</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/cursor.svg')"></span><span>Cursor</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/antigravity.svg')"></span><span>Antigravity</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/kimi.svg')"></span><span>Kimi</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/kiro-mask.svg')"></span><span>Kiro</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/github-copilot.svg')"></span><span>Copilot</span></div>
+                    <div class="agent-card agent-more"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/herdr-mask.svg')"></span><span>more soon</span></div>
                 </div>
                 <p class="integration-note">
                     Any terminal agent works in Herdr. Use the Herdr API to add
@@ -665,7 +714,7 @@ $ herdr</code></pre>
 
         <footer class="footer">
             <a class="brand" href="/" aria-label="Herdr home">
-                <img class="brand-logo" src="/assets/logo.svg" alt="" />
+                <span class="brand-logo" aria-hidden="true"></span>
                 <span>herdr</span>
             </a>
             <div>
@@ -686,8 +735,176 @@ $ herdr</code></pre>
             <button type="button" id="copy-logo-url">Copy SVG URL</button>
         </div>
 
+        <div class="theme-hint" id="theme-hint" title="Press / or t to switch theme">
+            <span class="theme-hint-dot"></span>
+            <span class="theme-hint-label" id="theme-hint-label">light</span>
+            <span class="theme-hint-key">[/]</span>
+        </div>
+
+        <div class="theme-overlay" id="theme-overlay" hidden>
+            <div class="theme-overlay-panel" role="dialog" aria-label="Theme switcher" aria-modal="true">
+                <div class="theme-overlay-title">settings</div>
+                <div class="theme-overlay-tabs">
+                    <span class="active">theme</span>
+                </div>
+                <div class="theme-overlay-list" id="theme-overlay-list" role="listbox" aria-label="Themes">
+                    <div class="theme-sep"><span>dark</span></div>
+                    <button type="button" role="option" data-value="catppuccin">catppuccin</button>
+                    <button type="button" role="option" data-value="terminal">terminal</button>
+                    <button type="button" role="option" data-value="tokyo-night">tokyo night</button>
+                    <button type="button" role="option" data-value="dracula">dracula</button>
+                    <button type="button" role="option" data-value="nord">nord</button>
+                    <button type="button" role="option" data-value="gruvbox">gruvbox</button>
+                    <button type="button" role="option" data-value="one-dark">one dark</button>
+                    <button type="button" role="option" data-value="solarized">solarized</button>
+                    <button type="button" role="option" data-value="kanagawa">kanagawa</button>
+                    <button type="button" role="option" data-value="rose-pine">rose pine</button>
+                    <button type="button" role="option" data-value="vesper">vesper</button>
+                    <div class="theme-sep"><span>light</span></div>
+                    <button type="button" role="option" data-value="catppuccin-latte">catppuccin latte</button>
+                    <button type="button" role="option" data-value="tokyo-night-day">tokyo day</button>
+                    <button type="button" role="option" data-value="gruvbox-light">gruvbox light</button>
+                    <button type="button" role="option" data-value="one-light">one light</button>
+                    <button type="button" role="option" data-value="solarized-light">solarized light</button>
+                    <button type="button" role="option" data-value="kanagawa-lotus">kanagawa lotus</button>
+                    <button type="button" role="option" data-value="rose-pine-dawn">rose pine dawn</button>
+                </div>
+                <div class="theme-overlay-footer">
+                    <span class="theme-overlay-hints"><span class="key">↑↓</span> select</span>
+                    <span class="theme-overlay-actions"><span class="theme-apply-btn">↵ apply</span><button class="theme-close-btn" type="button" id="theme-close-btn">esc close</button></span>
+                </div>
+            </div>
+        </div>
+
         <script>
             (function () {
+                var overlay = document.getElementById("theme-overlay");
+                var list = document.getElementById("theme-overlay-list");
+                var hintLabel = document.getElementById("theme-hint-label");
+                if (!overlay || !list) return;
+
+                var options = Array.prototype.slice.call(list.querySelectorAll("[role='option']"));
+                var media = window.matchMedia("(prefers-color-scheme: dark)");
+                var saved = localStorage.getItem("herdr-palette") || "";
+                var committed = saved || defaultPalette();
+
+                function defaultPalette() {
+                    return media.matches ? "tokyo-night" : "tokyo-night-day";
+                }
+
+                function setPalette(value) {
+                    document.documentElement.setAttribute("data-palette", value || defaultPalette());
+                }
+
+                function updateUI(value) {
+                    var activeValue = value || defaultPalette();
+                    options.forEach(function (opt) {
+                        var selected = opt.dataset.value === activeValue;
+                        opt.setAttribute("aria-selected", String(selected));
+                    });
+                    var active = options.find(function (o) { return o.dataset.value === activeValue; });
+                    if (hintLabel && active) hintLabel.textContent = active.textContent.trim();
+                }
+
+                function openOverlay() {
+                    overlay.hidden = false;
+                    document.body.style.overflow = "hidden";
+                    committed = localStorage.getItem("herdr-palette") || defaultPalette();
+                    updateUI(committed);
+                    var active = list.querySelector("[aria-selected='true']") || options[0];
+                    if (active) active.focus();
+                }
+
+                function closeOverlay() {
+                    overlay.hidden = true;
+                    document.body.style.overflow = "";
+                }
+
+                function toggleOverlay() {
+                    if (overlay.hidden) openOverlay();
+                    else closeOverlay();
+                }
+
+                function preview(index) {
+                    if (index < 0 || index >= options.length) return;
+                    setPalette(options[index].dataset.value);
+                    updateUI(options[index].dataset.value);
+                    options[index].focus();
+                }
+
+                function commit(value) {
+                    setPalette(value);
+                    localStorage.setItem("herdr-palette", value);
+                    updateUI(value);
+                    closeOverlay();
+                }
+
+                function revert() {
+                    setPalette(committed);
+                    updateUI(committed);
+                    closeOverlay();
+                }
+
+                media.addEventListener("change", function () {
+                    if (!localStorage.getItem("herdr-palette")) {
+                        setPalette("");
+                        updateUI("");
+                    }
+                });
+
+                options.forEach(function (opt, idx) {
+                    opt.addEventListener("click", function () {
+                        commit(opt.dataset.value);
+                    });
+                    opt.addEventListener("mouseenter", function () {
+                        preview(idx);
+                    });
+                });
+
+                document.addEventListener("keydown", function (e) {
+                    if ((e.key === "t" || e.key === "/") && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                        var tag = document.activeElement && document.activeElement.tagName;
+                        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+                        e.preventDefault();
+                        toggleOverlay();
+                        return;
+                    }
+                    if (overlay.hidden) return;
+                    var current = document.activeElement;
+                    var idx = options.indexOf(current);
+                    if (e.key === "ArrowDown") {
+                        e.preventDefault();
+                        var nextIdx = idx >= 0 ? Math.min(options.length - 1, idx + 1) : 0;
+                        preview(nextIdx);
+                    } else if (e.key === "ArrowUp") {
+                        e.preventDefault();
+                        var prevIdx = idx >= 0 ? Math.max(0, idx - 1) : options.length - 1;
+                        preview(prevIdx);
+                    } else if (e.key === "Enter" && idx >= 0) {
+                        e.preventDefault();
+                        commit(options[idx].dataset.value);
+                    } else if (e.key === "Escape") {
+                        e.preventDefault();
+                        revert();
+                    }
+                });
+
+                var themeHint = document.getElementById("theme-hint");
+                if (localStorage.getItem("herdr-theme-hint-seen") === "1") {
+                    themeHint.classList.add("is-seen");
+                }
+                themeHint.addEventListener("mouseenter", function () {
+                    localStorage.setItem("herdr-theme-hint-seen", "1");
+                    themeHint.classList.add("is-seen");
+                }, { once: true });
+                themeHint.addEventListener("click", toggleOverlay);
+                document.getElementById("theme-close-btn").addEventListener("click", revert);
+
+                setPalette(saved);
+                updateUI(saved);
+            })();
+
+            (function () {
                 var menu = document.getElementById("logo-menu");
                 var copyButton = document.getElementById("copy-logo-url");
                 var logos = document.querySelectorAll(".brand-logo");
@@ -770,135 +987,6 @@ $ herdr</code></pre>
             })();
 
             (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 copyButton = document.getElementById("copy-btn");
                 var command = document.getElementById("install-cmd");
                 var methods = Array.prototype.slice.call(
@@ -936,6 +1024,22 @@ $ herdr</code></pre>
                     }
                 });
             })();
+
+            (function () {
+                var frames = ["⠋","⠙","⠹","⠸","⠼","⠴","⠦","⠧","⠇","⠏"];
+                var els = document.querySelectorAll(".braille-spinner");
+                if (!els.length) return;
+                var states = Array.prototype.map.call(els, function () { return 0; });
+                els.forEach(function (el, idx) {
+                    el.textContent = frames[0];
+                });
+                setInterval(function () {
+                    els.forEach(function (el, idx) {
+                        states[idx] = (states[idx] + 1) % frames.length;
+                        el.textContent = frames[states[idx]];
+                    });
+                }, 80);
+            })();
         </script>
     </body>
 </html>
diff --git a/website/src/components/SiteTitle.astro b/website/src/components/SiteTitle.astro
index 04839c38..ee979e9d 100644
--- a/website/src/components/SiteTitle.astro
+++ b/website/src/components/SiteTitle.astro
@@ -1,37 +1,11 @@
 ---
-import { logos } from 'virtual:starlight/user-images';
-import config from 'virtual:starlight/user-config';
-
 const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 ---
 
 <div class="title-row sl-flex">
   <a href={siteTitleHref} class="site-title sl-flex">
-    {
-      config.logo && logos.dark && (
-        <>
-          <img
-            class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
-            alt={config.logo.alt}
-            src={logos.dark.src}
-            width={logos.dark.width}
-            height={logos.dark.height}
-          />
-          {!('src' in config.logo) && (
-            <img
-              class="dark:sl-hidden print:block"
-              alt={config.logo.alt}
-              src={logos.light?.src}
-              width={logos.light?.width}
-              height={logos.light?.height}
-            />
-          )}
-        </>
-      )
-    }
-    <span class:list={{ 'sr-only': config.logo?.replacesTitle }} translate="no">
-      {siteTitle}
-    </span>
+    <span class="docs-brand-logo" aria-hidden="true"></span>
+    <span translate="no">{siteTitle}</span>
   </a>
   <nav class="title-nav" aria-label="Primary">
     <a href="/docs/">Docs</a>
@@ -41,32 +15,47 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
 <style>
   @layer starlight.core {
     .title-row {
-      align-items: baseline;
+      align-items: center;
       gap: 1rem;
       min-width: 0;
     }
 
     .site-title {
-      align-items: baseline;
-      gap: var(--sl-nav-gap);
+      align-items: center;
+      gap: 0.55rem;
+      font-family: var(--sl-font-mono);
       font-size: var(--sl-text-h4);
-      font-weight: 600;
-      color: var(--sl-color-text-accent);
+      font-weight: 700;
+      letter-spacing: -0.04em;
+      color: var(--sl-color-white);
       text-decoration: none;
       white-space: nowrap;
       min-width: 0;
+      transition: color 120ms ease;
     }
 
-    span {
-      overflow: hidden;
+    .docs-brand-logo {
+      position: relative;
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      flex: 0 0 auto;
+      border: 1px solid var(--sl-color-hairline);
+      border-radius: 4px;
+      background: var(--sl-color-bg-nav);
     }
 
-    img {
-      height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
-      width: auto;
-      max-width: 100%;
-      object-fit: contain;
-      object-position: 0 50%;
+    .docs-brand-logo::before {
+      content: "";
+      position: absolute;
+      inset: 2px;
+      background: var(--sl-color-white);
+      -webkit-mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+      mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+    }
+
+    span:not(.docs-brand-logo) {
+      overflow: hidden;
     }
 
     .title-nav {
@@ -79,15 +68,11 @@ const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
     }
 
     .title-nav a {
-      color: var(--sl-color-text-accent);
+      color: var(--sl-color-white);
       text-decoration: none;
       transition: color 120ms ease;
     }
 
-    .site-title {
-      transition: color 120ms ease;
-    }
-
     .site-title:hover,
     .title-nav a:hover {
       color: var(--sl-color-accent-high);
diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index fd7e9ecb..20ea24af 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -5,7 +5,7 @@ template: splash
 hero:
   tagline: "One terminal for the whole herd: real panes, persistent sessions, SSH attach, state awareness, and CLI/socket orchestration."
   image:
-    file: ../../../public/assets/logo.svg
+    html: '<span class="docs-hero-logo" aria-hidden="true"></span>'
   actions:
     - text: Install Herdr
       link: /docs/install/
diff --git a/website/src/pages/compare.astro b/website/src/pages/compare.astro
index 531c2c19..2baf7b30 100644
--- a/website/src/pages/compare.astro
+++ b/website/src/pages/compare.astro
@@ -8,7 +8,7 @@
             name="description"
             content="Compare Herdr with tmux, Zellij, cmux, Warp, Solo, Conductor, Emdash, and Superset. See where terminal multiplexers, agent terminals, process dashboards, and worktree orchestrators differ."
         />
-        <meta name="theme-color" content="#f7f3ea" />
+        <meta name="theme-color" content="#f0eee9" />
         <link rel="canonical" href="https://herdr.dev/compare/" />
 
         <meta property="og:type" content="website" />
@@ -36,13 +36,22 @@
         <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon.png?v=14" />
         <link rel="apple-touch-icon" href="/assets/logo.png" />
         <link rel="preload" href="/assets/jbm.woff2" as="font" type="font/woff2" crossorigin />
-        <link rel="stylesheet" href="/css/style.css?v=compare1" />
+        <script>
+            (function () {
+                var saved = localStorage.getItem("herdr-palette");
+                var system = window.matchMedia("(prefers-color-scheme: dark)").matches
+                    ? "tokyo-night"
+                    : "tokyo-night-day";
+                document.documentElement.setAttribute("data-palette", saved || system);
+            })();
+        </script>
+        <link rel="stylesheet" href="/css/style.css?v=compare2" />
     </head>
     <body>
         <header class="site-header">
             <nav class="nav" aria-label="Primary navigation">
                 <a class="brand" href="/" aria-label="Herdr home">
-                    <img class="brand-logo" src="/assets/logo.svg" alt="" />
+                    <span class="brand-logo" aria-hidden="true"></span>
                     <span>herdr</span>
                 </a>
                 <div class="nav-links">
@@ -250,7 +259,7 @@
 
         <footer class="footer">
             <a class="brand" href="/" aria-label="Herdr home">
-                <img class="brand-logo" src="/assets/logo.svg" alt="" />
+                <span class="brand-logo" aria-hidden="true"></span>
                 <span>herdr</span>
             </a>
             <div>
@@ -262,5 +271,163 @@
                 <a href="mailto:hey@herdr.dev">hey@herdr.dev</a>
             </div>
         </footer>
+
+        <div class="theme-hint" id="theme-hint" title="Press / or t to switch theme">
+            <span class="theme-hint-dot"></span>
+            <span class="theme-hint-label" id="theme-hint-label">light</span>
+            <span class="theme-hint-key">[/]</span>
+        </div>
+
+        <div class="theme-overlay" id="theme-overlay" hidden>
+            <div class="theme-overlay-panel" role="dialog" aria-label="Theme switcher" aria-modal="true">
+                <div class="theme-overlay-title">settings</div>
+                <div class="theme-overlay-tabs"><span class="active">theme</span></div>
+                <div class="theme-overlay-list" id="theme-overlay-list" role="listbox" aria-label="Themes">
+                    <div class="theme-sep"><span>dark</span></div>
+                    <button type="button" role="option" data-value="catppuccin">catppuccin</button>
+                    <button type="button" role="option" data-value="terminal">terminal</button>
+                    <button type="button" role="option" data-value="tokyo-night">tokyo night</button>
+                    <button type="button" role="option" data-value="dracula">dracula</button>
+                    <button type="button" role="option" data-value="nord">nord</button>
+                    <button type="button" role="option" data-value="gruvbox">gruvbox</button>
+                    <button type="button" role="option" data-value="one-dark">one dark</button>
+                    <button type="button" role="option" data-value="solarized">solarized</button>
+                    <button type="button" role="option" data-value="kanagawa">kanagawa</button>
+                    <button type="button" role="option" data-value="rose-pine">rose pine</button>
+                    <button type="button" role="option" data-value="vesper">vesper</button>
+                    <div class="theme-sep"><span>light</span></div>
+                    <button type="button" role="option" data-value="catppuccin-latte">catppuccin latte</button>
+                    <button type="button" role="option" data-value="tokyo-night-day">tokyo day</button>
+                    <button type="button" role="option" data-value="gruvbox-light">gruvbox light</button>
+                    <button type="button" role="option" data-value="one-light">one light</button>
+                    <button type="button" role="option" data-value="solarized-light">solarized light</button>
+                    <button type="button" role="option" data-value="kanagawa-lotus">kanagawa lotus</button>
+                    <button type="button" role="option" data-value="rose-pine-dawn">rose pine dawn</button>
+                </div>
+                <div class="theme-overlay-footer">
+                    <span class="theme-overlay-hints"><span class="key">↑↓</span> select</span>
+                    <span class="theme-overlay-actions"><span class="theme-apply-btn">↵ apply</span><button class="theme-close-btn" type="button" id="theme-close-btn">esc close</button></span>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            (function () {
+                var overlay = document.getElementById("theme-overlay");
+                var list = document.getElementById("theme-overlay-list");
+                var hintLabel = document.getElementById("theme-hint-label");
+                if (!overlay || !list) return;
+                var options = Array.prototype.slice.call(list.querySelectorAll("[role='option']"));
+                var media = window.matchMedia("(prefers-color-scheme: dark)");
+                var saved = localStorage.getItem("herdr-palette") || "";
+                var committed = saved || defaultPalette();
+
+                function defaultPalette() {
+                    return media.matches ? "tokyo-night" : "tokyo-night-day";
+                }
+
+                function setPalette(value) {
+                    document.documentElement.setAttribute("data-palette", value || defaultPalette());
+                }
+
+                function updateUI(value) {
+                    var activeValue = value || defaultPalette();
+                    options.forEach(function (opt) {
+                        opt.setAttribute("aria-selected", String(opt.dataset.value === activeValue));
+                    });
+                    var active = options.find(function (opt) { return opt.dataset.value === activeValue; });
+                    if (hintLabel && active) hintLabel.textContent = active.textContent.trim();
+                }
+
+                function openOverlay() {
+                    overlay.hidden = false;
+                    document.body.style.overflow = "hidden";
+                    committed = localStorage.getItem("herdr-palette") || defaultPalette();
+                    updateUI(committed);
+                    var active = list.querySelector("[aria-selected='true']") || options[0];
+                    if (active) active.focus();
+                }
+
+                function closeOverlay() {
+                    overlay.hidden = true;
+                    document.body.style.overflow = "";
+                }
+
+                function toggleOverlay() {
+                    if (overlay.hidden) openOverlay();
+                    else closeOverlay();
+                }
+
+                function preview(index) {
+                    if (index < 0 || index >= options.length) return;
+                    setPalette(options[index].dataset.value);
+                    updateUI(options[index].dataset.value);
+                    options[index].focus();
+                }
+
+                function commit(value) {
+                    setPalette(value);
+                    localStorage.setItem("herdr-palette", value);
+                    updateUI(value);
+                    closeOverlay();
+                }
+
+                function revert() {
+                    setPalette(committed);
+                    updateUI(committed);
+                    closeOverlay();
+                }
+
+                media.addEventListener("change", function () {
+                    if (!localStorage.getItem("herdr-palette")) {
+                        setPalette("");
+                        updateUI("");
+                    }
+                });
+
+                options.forEach(function (opt, idx) {
+                    opt.addEventListener("click", function () { commit(opt.dataset.value); });
+                    opt.addEventListener("mouseenter", function () { preview(idx); });
+                });
+
+                document.addEventListener("keydown", function (e) {
+                    if ((e.key === "t" || e.key === "/") && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                        var tag = document.activeElement && document.activeElement.tagName;
+                        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+                        e.preventDefault();
+                        toggleOverlay();
+                        return;
+                    }
+                    if (overlay.hidden) return;
+                    var idx = options.indexOf(document.activeElement);
+                    if (e.key === "ArrowDown") {
+                        e.preventDefault();
+                        preview(idx >= 0 ? Math.min(options.length - 1, idx + 1) : 0);
+                    } else if (e.key === "ArrowUp") {
+                        e.preventDefault();
+                        preview(idx >= 0 ? Math.max(0, idx - 1) : options.length - 1);
+                    } else if (e.key === "Enter" && idx >= 0) {
+                        e.preventDefault();
+                        commit(options[idx].dataset.value);
+                    } else if (e.key === "Escape") {
+                        e.preventDefault();
+                        revert();
+                    }
+                });
+
+                var themeHint = document.getElementById("theme-hint");
+                if (localStorage.getItem("herdr-theme-hint-seen") === "1") {
+                    themeHint.classList.add("is-seen");
+                }
+                themeHint.addEventListener("mouseenter", function () {
+                    localStorage.setItem("herdr-theme-hint-seen", "1");
+                    themeHint.classList.add("is-seen");
+                }, { once: true });
+                themeHint.addEventListener("click", toggleOverlay);
+                document.getElementById("theme-close-btn").addEventListener("click", revert);
+                setPalette(saved);
+                updateUI(saved);
+            })();
+        </script>
     </body>
 </html>
diff --git a/website/src/styles/starlight.css b/website/src/styles/starlight.css
index 1120e31b..0747bcc4 100644
--- a/website/src/styles/starlight.css
+++ b/website/src/styles/starlight.css
@@ -14,88 +14,124 @@
   --sl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --sl-content-width: 54rem;
   --sl-sidebar-width: 18.5rem;
-  --sl-color-accent-low: #123c37;
-  --sl-color-accent: #42cabb;
-  --sl-color-accent-high: #d9fff8;
-  --sl-color-white: #f8fbff;
-  --sl-color-gray-1: #e8edf2;
-  --sl-color-gray-2: #c7d0d9;
-  --sl-color-gray-3: #93a0ad;
-  --sl-color-gray-4: #62707f;
-  --sl-color-gray-5: #34404c;
-  --sl-color-gray-6: #202833;
-  --sl-color-black: #10151c;
-  --sl-color-bg: #10151c;
-  --sl-color-bg-nav: #151b23;
-  --sl-color-bg-sidebar: #151b23;
-  --sl-color-bg-inline-code: #202833;
-  --sl-color-hairline: #25303b;
-  --sl-color-hairline-light: #34404c;
+}
+
+:root,
+:root[data-theme="dark"] {
+  --sl-color-accent-low: #26314f;
+  --sl-color-accent: #7aa2f7;
+  --sl-color-accent-high: #a9c2ff;
+  --sl-color-white: #d5dcff;
+  --sl-color-gray-1: #c0caf5;
+  --sl-color-gray-2: #a9b1d6;
+  --sl-color-gray-3: #737aa2;
+  --sl-color-gray-4: #565f89;
+  --sl-color-gray-5: #414868;
+  --sl-color-gray-6: #2f3549;
+  --sl-color-gray-7: #24283b;
+  --sl-color-black: #1a1b26;
+  --sl-color-bg: #1a1b26;
+  --sl-color-bg-nav: #202331;
+  --sl-color-bg-sidebar: #202331;
+  --sl-color-bg-inline-code: #24283b;
+  --sl-color-hairline: #2f3549;
+  --sl-color-hairline-light: #414868;
 }
 
 :root[data-theme="light"] {
-  --sl-color-accent-low: #d7f1ed;
-  --sl-color-accent: #1f6f68;
-  --sl-color-accent-high: #0f3f3b;
-  --sl-color-white: #151a21;
-  --sl-color-gray-1: #26313c;
-  --sl-color-gray-2: #40505d;
-  --sl-color-gray-3: #687381;
-  --sl-color-gray-4: #8d989f;
-  --sl-color-gray-5: #d4cabd;
-  --sl-color-gray-6: #eee7dc;
-  --sl-color-gray-7: #f7f3ea;
-  --sl-color-black: #fffdf8;
-  --sl-color-bg: #f7f3ea;
-  --sl-color-bg-nav: #fffdf8;
-  --sl-color-bg-sidebar: #fffdf8;
-  --sl-color-bg-inline-code: #eee7dc;
-  --sl-color-hairline: #ded6c8;
-  --sl-color-hairline-light: #c9bdad;
+  --sl-color-accent-low: #c4c8da;
+  --sl-color-accent: #2e7de9;
+  --sl-color-accent-high: #1f2f66;
+  --sl-color-white: #1f2f66;
+  --sl-color-gray-1: #3760bf;
+  --sl-color-gray-2: #68709a;
+  --sl-color-gray-3: #8990b3;
+  --sl-color-gray-4: #a8aecb;
+  --sl-color-gray-5: #b6bbd1;
+  --sl-color-gray-6: #c4c8da;
+  --sl-color-gray-7: #d8d9e0;
+  --sl-color-black: #e1e2e7;
+  --sl-color-bg: #e1e2e7;
+  --sl-color-bg-nav: #d8d9e0;
+  --sl-color-bg-sidebar: #d8d9e0;
+  --sl-color-bg-inline-code: #c4c8da;
+  --sl-color-hairline: #b6bbd1;
+  --sl-color-hairline-light: #a8aecb;
 }
 
 .site-title {
   font-family: var(--sl-font-mono);
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: -0.04em;
 }
 
+.docs-brand-logo {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 4px;
+  background: var(--sl-color-bg-nav);
+}
+
+.docs-brand-logo::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  background: var(--sl-color-white);
+  -webkit-mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+  mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+}
+
+.docs-hero-logo {
+  display: block;
+  width: min(20rem, 62vw);
+  aspect-ratio: 1;
+  background: var(--sl-color-white);
+  -webkit-mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+  mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
+}
+
 .sl-markdown-content {
   font-size: 1rem;
-  line-height: 1.75;
+  line-height: 1.65;
 }
 
 .sl-markdown-content h1,
 .hero h1 {
-  letter-spacing: -0.055em;
-  line-height: 0.98;
-  font-size: clamp(2.4rem, 5vw, 4.2rem);
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  font-weight: 400;
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  font-family: var(--sl-font-mono);
 }
 
 .sl-markdown-content h2 {
-  margin-top: 2.6rem;
-  letter-spacing: -0.035em;
+  margin-top: 2.4rem;
+  letter-spacing: -0.02em;
+  font-family: var(--sl-font-mono);
+  font-weight: 400;
 }
 
 .sl-markdown-content h3 {
-  letter-spacing: -0.025em;
+  letter-spacing: -0.01em;
+  font-family: var(--sl-font-mono);
+  font-weight: 400;
 }
 
 .sl-markdown-content > p:first-child {
-  font-size: 1.08rem;
+  font-size: 1.05rem;
   color: var(--sl-color-gray-1);
 }
 
 #starlight__sidebar a[aria-current="page"] {
-  background: color-mix(in srgb, var(--sl-color-accent) 13%, transparent);
+  background: color-mix(in srgb, var(--sl-color-accent) 8%, transparent);
   color: var(--sl-color-accent-high);
   box-shadow: inset 2px 0 0 var(--sl-color-accent);
 }
 
-:root[data-theme="light"] #starlight__sidebar a[aria-current="page"] {
-  color: var(--sl-color-accent-high);
-}
-
 .mobile-doc-shots {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
@@ -111,7 +147,7 @@
   display: block;
   width: 100%;
   border: 1px solid var(--sl-color-hairline);
-  border-radius: 1rem;
+  border-radius: 4px;
 }
 
 .mobile-doc-shots figcaption {
@@ -124,17 +160,19 @@
 .sl-markdown-content a:not(:where(.not-content *)) {
   text-decoration-thickness: 1px;
   text-underline-offset: 0.18em;
+  color: var(--sl-color-accent);
 }
 
 .sl-markdown-content code:not(:where(.not-content *)) {
   border: 1px solid var(--sl-color-hairline);
-  border-radius: 0.35rem;
+  border-radius: 2px;
   font-size: 0.88em;
+  background: var(--sl-color-bg-inline-code);
 }
 
 .sl-markdown-content pre {
   border: 1px solid var(--sl-color-hairline);
-  border-radius: 0.85rem;
+  border-radius: 4px;
 }
 
 .expressive-code {
@@ -143,7 +181,7 @@
 
 .expressive-code .frame {
   border: 1px solid var(--sl-color-hairline) !important;
-  border-radius: 0.85rem !important;
+  border-radius: 4px !important;
   box-shadow: none !important;
   overflow: hidden;
 }
@@ -169,8 +207,9 @@
 .sl-markdown-content .card {
   border-color: var(--sl-color-hairline);
   background:
-    linear-gradient(180deg, color-mix(in srgb, var(--sl-color-accent) 5%, transparent), transparent 58%),
+    linear-gradient(180deg, color-mix(in srgb, var(--sl-color-accent) 4%, transparent), transparent 58%),
     var(--sl-color-black);
+  border-radius: 4px;
 }
 
 .sl-markdown-content .card .title {
@@ -179,5 +218,5 @@
 
 .hero img {
   image-rendering: auto;
-  filter: drop-shadow(0 20px 50px rgb(31 111 104 / 0.18));
+  border-radius: 4px;
 }