From a9c67dc2b588a8fe1ba2f371df15af174976c10d Mon Sep 17 00:00:00 2001
From: Christian Dassy <18606875+inxbit@users.noreply.github.com>
Date: Sun, 31 May 2026 02:21:39 -0400
Subject: [PATCH 1/3] Redesign website and align logo/README branding

Rebuild the docs/ landing page around a small live highlighting
engine that powers an animated hero terminal, a raw/highlighted
compare slider, and interactive profile tabs. Mono-forward visual
system, no dependencies or network requests.

Add a faithful prism+terminal logo mark (square, used as favicon)
and a prism+rays lockup for the header/footer wordmark.

Switch the logo wordmark, taglines, and demo headings from Inter to
the mono brand stack across docs/ and .github/, and bump the README
image cache-busters so GitHub serves the updated SVGs.
---
 .github/assets/prismtty-logo.svg              |    6 +-
 .github/assets/prismtty-profile-switching.svg |    2 +-
 .github/assets/prismtty-terminal-demo.svg     |    2 +-
 README.md                                     |    6 +-
 docs/assets/prismtty-lockup.svg               |   37 +
 docs/assets/prismtty-logo.svg                 |    6 +-
 docs/assets/prismtty-mark.svg                 |   22 +
 docs/assets/prismtty-profile-switching.svg    |    2 +-
 docs/assets/prismtty-terminal-demo.svg        |    2 +-
 docs/index.html                               |  252 ++--
 docs/script.js                                |  344 +++++-
 docs/styles.css                               | 1086 +++++++++--------
 12 files changed, 1104 insertions(+), 663 deletions(-)
 create mode 100644 docs/assets/prismtty-lockup.svg
 create mode 100644 docs/assets/prismtty-mark.svg

diff --git a/.github/assets/prismtty-logo.svg b/.github/assets/prismtty-logo.svg
index 85fa943..f50a6a3 100644
--- a/.github/assets/prismtty-logo.svg
+++ b/.github/assets/prismtty-logo.svg
@@ -42,13 +42,13 @@
   <path d="M127 153 L144 141 L127 129" fill="none" stroke="#22d3ee" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M157 160 H196" stroke="#a3e635" stroke-width="7" stroke-linecap="round"/>
 
-  <text x="470" y="128" fill="#f8fafc" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="78" font-weight="800" letter-spacing="0">
+  <text x="470" y="126" fill="#f8fafc" font-family="'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace" font-size="74" font-weight="700" letter-spacing="-2">
     Prism<tspan fill="#22d3ee">TTY</tspan>
   </text>
-  <text x="474" y="170" fill="#94a3b8" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="24" letter-spacing="0">
+  <text x="474" y="168" fill="#94a3b8" font-family="'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace" font-size="22" letter-spacing="0">
     terminal output highlighting
   </text>
-  <text x="474" y="206" fill="#64748b" font-family="SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace" font-size="18" letter-spacing="0">
+  <text x="474" y="202" fill="#64748b" font-family="'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace" font-size="17" letter-spacing="0">
     network / unix profiles
   </text>
 </svg>
diff --git a/.github/assets/prismtty-profile-switching.svg b/.github/assets/prismtty-profile-switching.svg
index 92e31d5..1e1685d 100644
--- a/.github/assets/prismtty-profile-switching.svg
+++ b/.github/assets/prismtty-profile-switching.svg
@@ -9,7 +9,7 @@
     <style>
       .mono { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 21px; }
       .small { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 16px; }
-      .label { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: 18px; font-weight: 700; }
+      .label { font-family: 'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; }
       .fg { fill: #e5e7eb; }
       .muted { fill: #94a3b8; }
       .dim { fill: #64748b; }
diff --git a/.github/assets/prismtty-terminal-demo.svg b/.github/assets/prismtty-terminal-demo.svg
index 8a0adea..8e254a9 100644
--- a/.github/assets/prismtty-terminal-demo.svg
+++ b/.github/assets/prismtty-terminal-demo.svg
@@ -14,7 +14,7 @@
     <style>
       .mono { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 22px; }
       .small { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 16px; }
-      .label { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: 18px; font-weight: 800; }
+      .label { font-family: 'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; }
       .muted { fill: #64748b; }
       .dim { fill: #94a3b8; }
       .fg { fill: #e5e7eb; }
diff --git a/README.md b/README.md
index e820a23..f921706 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # PrismTTY
 
 <p align="center">
-  <img src=".github/assets/prismtty-logo.svg?v=20260513b" alt="PrismTTY" width="760">
+  <img src=".github/assets/prismtty-logo.svg?v=20260531" alt="PrismTTY" width="760">
 </p>
 
 <p align="center">
@@ -23,7 +23,7 @@ Current version: `1.0.9`.
 
 ## Quick Demo
 
-![Animated PrismTTY terminal demo](.github/assets/prismtty-terminal-demo.svg?v=20260514)
+![Animated PrismTTY terminal demo](.github/assets/prismtty-terminal-demo.svg?v=20260531)
 
 ## Preview
 
@@ -31,7 +31,7 @@ Synthetic terminal previews using documentation-only hostnames and addresses:
 
 ![Highlighted PrismTTY terminal output](.github/assets/prismtty-terminal-preview.svg?v=20260513)
 
-![Dynamic PrismTTY profile switching](.github/assets/prismtty-profile-switching.svg?v=20260513b)
+![Dynamic PrismTTY profile switching](.github/assets/prismtty-profile-switching.svg?v=20260531)
 
 ## What This Is / What This Is Not
 
diff --git a/docs/assets/prismtty-lockup.svg b/docs/assets/prismtty-lockup.svg
new file mode 100644
index 0000000..8294d28
--- /dev/null
+++ b/docs/assets/prismtty-lockup.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 44 378 168" role="img" aria-label="PrismTTY">
+  <defs>
+    <linearGradient id="lk-cyan" x1="0" x2="1" y1="0" y2="0">
+      <stop offset="0" stop-color="#22d3ee" stop-opacity="0.9"/>
+      <stop offset="1" stop-color="#22d3ee" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="lk-green" x1="0" x2="1" y1="0" y2="0">
+      <stop offset="0" stop-color="#a3e635" stop-opacity="0.85"/>
+      <stop offset="1" stop-color="#a3e635" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="lk-pink" x1="0" x2="1" y1="0" y2="0">
+      <stop offset="0" stop-color="#f472b6" stop-opacity="0.78"/>
+      <stop offset="1" stop-color="#f472b6" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="lk-prism" x1="70" x2="250" y1="45" y2="215" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f8fafc"/>
+      <stop offset="0.45" stop-color="#67e8f9"/>
+      <stop offset="1" stop-color="#a78bfa"/>
+    </linearGradient>
+    <linearGradient id="lk-term" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#1f2937"/>
+      <stop offset="1" stop-color="#020617"/>
+    </linearGradient>
+  </defs>
+  <path d="M254 89 L435 50 L435 82 L254 112 Z" fill="url(#lk-cyan)"/>
+  <path d="M258 123 L450 117 L450 147 L258 146 Z" fill="url(#lk-green)"/>
+  <path d="M254 158 L435 206 L435 176 L254 136 Z" fill="url(#lk-pink)"/>
+  <path d="M88 202 L166 54 L252 202 Z" fill="none" stroke="url(#lk-prism)" stroke-width="14" stroke-linejoin="round"/>
+  <path d="M166 54 L166 202" stroke="#67e8f9" stroke-width="6" stroke-linecap="round" opacity="0.9"/>
+  <path d="M88 202 L166 132 L252 202" fill="none" stroke="#c084fc" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0.85"/>
+  <rect x="104" y="111" width="116" height="72" rx="10" fill="url(#lk-term)" stroke="#334155" stroke-width="3"/>
+  <circle cx="122" cy="128" r="4" fill="#ef4444"/>
+  <circle cx="136" cy="128" r="4" fill="#f59e0b"/>
+  <circle cx="150" cy="128" r="4" fill="#22c55e"/>
+  <path d="M127 153 L144 141 L127 129" fill="none" stroke="#22d3ee" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M157 160 H196" stroke="#a3e635" stroke-width="7" stroke-linecap="round"/>
+</svg>
diff --git a/docs/assets/prismtty-logo.svg b/docs/assets/prismtty-logo.svg
index 85fa943..f50a6a3 100644
--- a/docs/assets/prismtty-logo.svg
+++ b/docs/assets/prismtty-logo.svg
@@ -42,13 +42,13 @@
   <path d="M127 153 L144 141 L127 129" fill="none" stroke="#22d3ee" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M157 160 H196" stroke="#a3e635" stroke-width="7" stroke-linecap="round"/>
 
-  <text x="470" y="128" fill="#f8fafc" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="78" font-weight="800" letter-spacing="0">
+  <text x="470" y="126" fill="#f8fafc" font-family="'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace" font-size="74" font-weight="700" letter-spacing="-2">
     Prism<tspan fill="#22d3ee">TTY</tspan>
   </text>
-  <text x="474" y="170" fill="#94a3b8" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif" font-size="24" letter-spacing="0">
+  <text x="474" y="168" fill="#94a3b8" font-family="'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace" font-size="22" letter-spacing="0">
     terminal output highlighting
   </text>
-  <text x="474" y="206" fill="#64748b" font-family="SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace" font-size="18" letter-spacing="0">
+  <text x="474" y="202" fill="#64748b" font-family="'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace" font-size="17" letter-spacing="0">
     network / unix profiles
   </text>
 </svg>
diff --git a/docs/assets/prismtty-mark.svg b/docs/assets/prismtty-mark.svg
new file mode 100644
index 0000000..fc4cfa9
--- /dev/null
+++ b/docs/assets/prismtty-mark.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 38 180 180" role="img" aria-label="PrismTTY">
+  <defs>
+    <linearGradient id="pm-prism" x1="70" x2="250" y1="45" y2="215" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#f8fafc"/>
+      <stop offset="0.45" stop-color="#67e8f9"/>
+      <stop offset="1" stop-color="#a78bfa"/>
+    </linearGradient>
+    <linearGradient id="pm-term" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#1f2937"/>
+      <stop offset="1" stop-color="#020617"/>
+    </linearGradient>
+  </defs>
+  <path d="M88 202 L166 54 L252 202 Z" fill="none" stroke="url(#pm-prism)" stroke-width="14" stroke-linejoin="round"/>
+  <path d="M166 54 L166 202" stroke="#67e8f9" stroke-width="6" stroke-linecap="round" opacity="0.9"/>
+  <path d="M88 202 L166 132 L252 202" fill="none" stroke="#c084fc" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" opacity="0.85"/>
+  <rect x="104" y="111" width="116" height="72" rx="10" fill="url(#pm-term)" stroke="#334155" stroke-width="3"/>
+  <circle cx="122" cy="128" r="4" fill="#ef4444"/>
+  <circle cx="136" cy="128" r="4" fill="#f59e0b"/>
+  <circle cx="150" cy="128" r="4" fill="#22c55e"/>
+  <path d="M127 153 L144 141 L127 129" fill="none" stroke="#22d3ee" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M157 160 H196" stroke="#a3e635" stroke-width="7" stroke-linecap="round"/>
+</svg>
diff --git a/docs/assets/prismtty-profile-switching.svg b/docs/assets/prismtty-profile-switching.svg
index 92e31d5..1e1685d 100644
--- a/docs/assets/prismtty-profile-switching.svg
+++ b/docs/assets/prismtty-profile-switching.svg
@@ -9,7 +9,7 @@
     <style>
       .mono { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 21px; }
       .small { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 16px; }
-      .label { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: 18px; font-weight: 700; }
+      .label { font-family: 'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; }
       .fg { fill: #e5e7eb; }
       .muted { fill: #94a3b8; }
       .dim { fill: #64748b; }
diff --git a/docs/assets/prismtty-terminal-demo.svg b/docs/assets/prismtty-terminal-demo.svg
index 8a0adea..8e254a9 100644
--- a/docs/assets/prismtty-terminal-demo.svg
+++ b/docs/assets/prismtty-terminal-demo.svg
@@ -14,7 +14,7 @@
     <style>
       .mono { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 22px; }
       .small { font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 16px; }
-      .label { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; font-size: 18px; font-weight: 800; }
+      .label { font-family: 'Berkeley Mono', 'JetBrains Mono', 'Cascadia Code', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; }
       .muted { fill: #64748b; }
       .dim { fill: #94a3b8; }
       .fg { fill: #e5e7eb; }
diff --git a/docs/index.html b/docs/index.html
index f86e5d0..51dfec7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>PrismTTY - Terminal Output Highlighting</title>
+    <title>PrismTTY — Terminal Output Highlighting</title>
     <meta
       name="description"
       content="PrismTTY makes dense SSH, network-device, and Unix/Linux terminal output easier to scan in real time."
@@ -17,65 +17,79 @@
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:image" content="https://prismtty.com/assets/prismtty-social-card.png">
     <link rel="canonical" href="https://prismtty.com/">
-    <link rel="preload" as="image" href="assets/prismtty-terminal-demo.svg">
+    <link rel="icon" href="assets/prismtty-mark.svg" type="image/svg+xml">
     <link rel="stylesheet" href="styles.css">
     <script src="script.js" defer></script>
   </head>
   <body>
+    <div class="grain" aria-hidden="true"></div>
+
     <header class="site-header" data-site-header>
       <a class="brand" href="#top" aria-label="PrismTTY home">
-        <span class="brand-mark" aria-hidden="true"></span>
-        <span>PrismTTY</span>
+        <img class="brand-logo" src="assets/prismtty-lockup.svg" alt="" width="68" height="30">
+        <span class="brand-name">Prism<span class="tty">TTY</span></span>
       </a>
       <nav class="site-nav" aria-label="Primary navigation">
-        <a href="#preview">Preview</a>
-        <a href="#scope">Scope</a>
+        <a href="#preview">Demo</a>
+        <a href="#compare">Compare</a>
         <a href="#profiles">Profiles</a>
-        <a href="#feedback">Feedback</a>
         <a href="#install">Install</a>
-        <a href="https://github.com/inxbit/prismtty">GitHub</a>
+        <a class="nav-external" href="https://github.com/inxbit/prismtty">GitHub ↗</a>
       </nav>
     </header>
 
     <main id="top">
       <section class="hero" aria-labelledby="hero-title">
-        <div class="hero-beams" aria-hidden="true">
-          <span></span>
-          <span></span>
-          <span></span>
+        <div class="hero-bg" aria-hidden="true">
+          <span class="beam beam-cyan"></span>
+          <span class="beam beam-green"></span>
+          <span class="beam beam-pink"></span>
         </div>
+
         <div class="hero-copy">
-          <img class="hero-logo" src="assets/prismtty-logo.svg" alt="PrismTTY">
-          <p class="eyebrow">Network and Unix terminal highlighting</p>
-          <h1 id="hero-title">Readable network output, live in your terminal.</h1>
+          <p class="eyebrow">// network &amp; unix terminal highlighting</p>
+          <h1 id="hero-title">Readable output,<br><span class="spectrum-text">live in your terminal.</span></h1>
           <p class="hero-lede">
-            PrismTTY wraps shells, SSH sessions, pipes, and logs with fast PCRE2-powered
-            highlighting tuned for network devices and Unix administration.
+            PrismTTY wraps shells, SSH sessions, pipes, and logs with fast
+            PCRE2-powered highlighting tuned for network devices and Unix
+            administration. No login. No agent. Just signal.
           </p>
-          <div class="hero-actions" aria-label="Primary actions">
+          <div class="hero-actions">
             <a class="button primary" href="#install">Install PrismTTY</a>
-            <a class="button secondary" href="https://github.com/inxbit/prismtty">View on GitHub</a>
+            <a class="button ghost" href="https://github.com/inxbit/prismtty">View source ↗</a>
           </div>
           <dl class="hero-facts" aria-label="Project highlights">
             <div>
               <dt>Profiles</dt>
-              <dd>9 built in</dd>
+              <dd>9 <span>built&nbsp;in</span></dd>
             </div>
             <div>
-              <dt>Current</dt>
+              <dt>Latest</dt>
               <dd>v1.0.9</dd>
             </div>
             <div>
               <dt>Engine</dt>
               <dd>PCRE2</dd>
             </div>
+            <div>
+              <dt>License</dt>
+              <dd>MIT</dd>
+            </div>
           </dl>
         </div>
-        <figure class="hero-preview" id="preview">
-          <img
-            src="assets/prismtty-terminal-demo.svg"
-            alt="Animated synthetic terminal session highlighted by PrismTTY, showing profile detection, interfaces, addresses, status, and syslog severity."
-          >
+
+        <figure class="terminal hero-terminal" id="preview">
+          <div class="terminal-bar">
+            <span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
+            <span class="terminal-title" data-terminal-title>ptty ssh edge-sw1.example.net</span>
+            <span class="terminal-badge" data-terminal-badge>● live</span>
+          </div>
+          <div class="terminal-body" data-terminal aria-hidden="true"></div>
+          <figcaption class="sr-only">
+            A live terminal session: PrismTTY wraps an SSH connection to a switch and
+            highlights interfaces in amber, IP addresses in cyan, link state in green and
+            pink, and syslog severity in violet.
+          </figcaption>
         </figure>
       </section>
 
@@ -90,26 +104,57 @@ <h1 id="hero-title">Readable network output, live in your terminal.</h1>
         </div>
         <div class="command-line">
           <span class="prompt">$</span>
-          <code>prismtty --reload</code>
+          <code>ptty /bin/zsh</code>
+        </div>
+      </section>
+
+      <section class="section compare-section" id="compare" aria-labelledby="compare-title">
+        <div class="section-heading compact">
+          <p class="eyebrow">// the difference</p>
+          <h2 id="compare-title">Drag the seam. Watch the noise turn into signal.</h2>
+          <p class="section-sub">
+            Same <code>show tech</code> dump, same monospace, same screen. The only thing
+            that changed is where your eyes land first.
+          </p>
+        </div>
+
+        <div class="compare" data-compare>
+          <pre class="compare-pane compare-raw" data-compare-raw aria-hidden="true"></pre>
+          <pre class="compare-pane compare-hl" data-compare-hl aria-hidden="true"></pre>
+          <div class="compare-divider" data-compare-divider aria-hidden="true">
+            <span class="compare-knob">⇄</span>
+          </div>
+          <label class="sr-only" for="compare-range">Reveal PrismTTY highlighting</label>
+          <input
+            class="compare-range"
+            id="compare-range"
+            type="range"
+            min="0"
+            max="100"
+            value="58"
+            data-compare-range
+          >
+          <span class="compare-tag compare-tag-left" aria-hidden="true">raw</span>
+          <span class="compare-tag compare-tag-right" aria-hidden="true">prismtty</span>
         </div>
       </section>
 
       <section class="section scope-section" id="scope" aria-labelledby="scope-title">
         <div class="section-heading compact">
-          <p class="eyebrow">Scope</p>
+          <p class="eyebrow">// scope</p>
           <h2 id="scope-title">Live terminal highlighting, not device management.</h2>
         </div>
         <div class="scope-grid">
-          <article class="scope-panel">
-            <h3>What this is</h3>
+          <article class="scope-panel scope-yes">
+            <h3><span class="scope-tick" aria-hidden="true">+</span> What this is</h3>
             <p>
               PrismTTY highlights output already flowing through shells, SSH sessions,
               pipes, and logs. It adds terminal color for prompts, interfaces, addresses,
               protocol state, counters, severity, and common vendor terms.
             </p>
           </article>
-          <article class="scope-panel">
-            <h3>What this is not</h3>
+          <article class="scope-panel scope-no">
+            <h3><span class="scope-tick" aria-hidden="true">−</span> What this is not</h3>
             <p>
               It is not an NMS, a configuration management tool, a source of truth,
               a SIEM, a log platform, or a device inventory system. It does not log in,
@@ -119,9 +164,9 @@ <h3>What this is not</h3>
         </div>
       </section>
 
-      <section class="section section-grid" aria-labelledby="features-title">
+      <section class="section features-section" aria-labelledby="features-title">
         <div class="section-heading">
-          <p class="eyebrow">Built for real terminal work</p>
+          <p class="eyebrow">// built for real terminal work</p>
           <h2 id="features-title">Color where operators need signal.</h2>
         </div>
         <div class="feature-grid">
@@ -152,61 +197,50 @@ <h3>ChromaTerm-compatible rules</h3>
         </div>
       </section>
 
-      <section class="section split-section" id="profiles" aria-labelledby="profiles-title">
-        <div class="media-panel">
-          <img
-            src="assets/prismtty-profile-switching.svg"
-            alt="Synthetic session showing PrismTTY switching from linux-unix to fortinet and then juniper profiles."
-          >
-        </div>
-        <div class="section-copy">
-          <p class="eyebrow">Dynamic profile switching</p>
+      <section class="section profiles-section" id="profiles" aria-labelledby="profiles-title">
+        <div class="section-heading compact">
+          <p class="eyebrow">// dynamic profile switching</p>
           <h2 id="profiles-title">One wrapped shell follows changing device context.</h2>
-          <p>
-            PrismTTY observes login banners, prompts, and typed remote-jump commands.
-            It can move from a local Unix shell into network device sessions while keeping
-            normal command output from churning the selected profile.
+          <p class="section-sub">
+            PrismTTY watches login banners, prompts, and remote-jump commands, then
+            re-colors the same kind of output the way each vendor expects. Pick a profile:
           </p>
-          <div class="profile-list" aria-label="Built-in profiles">
-            <span>generic</span>
-            <span>linux-unix</span>
-            <span>cisco</span>
-            <span>juniper</span>
-            <span>fortinet</span>
-            <span>palo-alto</span>
-            <span>arista</span>
-            <span>arubacx</span>
-            <span>versa</span>
-          </div>
         </div>
-      </section>
 
-      <section class="section feedback-section" id="feedback" aria-labelledby="feedback-title">
-        <div class="section-heading compact">
-          <p class="eyebrow">Feedback wanted</p>
-          <h2 id="feedback-title">Profile coverage gets better with real-world testing.</h2>
+        <div class="profiles-demo" data-profiles>
+          <div class="profile-tabs" role="tablist" aria-label="Built-in profiles">
+            <button class="profile-tab" role="tab" data-profile="cisco" aria-selected="true">cisco</button>
+            <button class="profile-tab" role="tab" data-profile="juniper" aria-selected="false">juniper</button>
+            <button class="profile-tab" role="tab" data-profile="fortinet" aria-selected="false">fortinet</button>
+            <button class="profile-tab" role="tab" data-profile="arista" aria-selected="false">arista</button>
+            <button class="profile-tab" role="tab" data-profile="linux-unix" aria-selected="false">linux-unix</button>
+          </div>
+          <div class="terminal profile-terminal">
+            <div class="terminal-bar">
+              <span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
+              <span class="terminal-title" data-profile-title></span>
+            </div>
+            <div class="terminal-body" data-profile-body aria-live="polite"></div>
+          </div>
         </div>
-        <p class="feedback-copy">
-          Testing help is especially useful across the built-in profile set and custom
-          profile files for other vendors, appliances, and terminal workflows.
-        </p>
-        <div class="feedback-list" aria-label="Profiles and vendors wanted for testing">
-          <span>Cisco IOS / IOS XE / IOS XR / NX-OS / ASA</span>
-          <span>Juniper Junos</span>
-          <span>Fortinet FortiGate / FortiOS</span>
-          <span>Palo Alto PAN-OS</span>
-          <span>Arista EOS</span>
-          <span>Aruba CX</span>
-          <span>Versa</span>
-          <span>Linux / Unix</span>
-          <span>Custom vendor profiles</span>
+
+        <div class="profile-list" aria-label="All built-in profiles">
+          <span>generic</span>
+          <span>linux-unix</span>
+          <span>cisco</span>
+          <span>juniper</span>
+          <span>fortinet</span>
+          <span>palo-alto</span>
+          <span>arista</span>
+          <span>arubacx</span>
+          <span>versa</span>
         </div>
       </section>
 
       <section class="section install-section" id="install" aria-labelledby="install-title">
         <div class="section-heading compact">
-          <p class="eyebrow">Install</p>
-          <h2 id="install-title">Get PrismTTY from Homebrew, Cargo, or GitHub releases.</h2>
+          <p class="eyebrow">// install</p>
+          <h2 id="install-title">Up and highlighting in one line.</h2>
         </div>
         <div class="install-grid">
           <article class="install-card">
@@ -232,40 +266,70 @@ <h3>Start a wrapped shell</h3>
           </article>
         </div>
         <div class="install-links">
-          <a href="https://crates.io/crates/prismtty">crates.io package</a>
-          <a href="https://github.com/inxbit/prismtty/releases">GitHub releases</a>
-          <a href="https://github.com/inxbit/homebrew-tap">Homebrew tap</a>
+          <a href="https://crates.io/crates/prismtty">crates.io package ↗</a>
+          <a href="https://github.com/inxbit/prismtty/releases">GitHub releases ↗</a>
+          <a href="https://github.com/inxbit/homebrew-tap">Homebrew tap ↗</a>
         </div>
       </section>
 
       <section class="section workflow-section" aria-labelledby="workflow-title">
         <div class="section-heading compact">
-          <p class="eyebrow">Workflow</p>
+          <p class="eyebrow">// workflow</p>
           <h2 id="workflow-title">Designed to sit between you and noisy output.</h2>
         </div>
-        <div class="workflow">
-          <div class="workflow-step">
+        <ol class="workflow">
+          <li class="workflow-step">
             <span class="step-number">1</span>
             <h3>Wrap the session</h3>
             <p>Run <code>ptty</code> around a shell, SSH command, or console tool.</p>
-          </div>
-          <div class="workflow-step">
+          </li>
+          <li class="workflow-step">
             <span class="step-number">2</span>
             <h3>Detect context</h3>
-            <p>Use built-in profile hints to recognize Unix and vendor prompts.</p>
-          </div>
-          <div class="workflow-step">
+            <p>Built-in profile hints recognize Unix and vendor prompts on the fly.</p>
+          </li>
+          <li class="workflow-step">
             <span class="step-number">3</span>
             <h3>Highlight output</h3>
-            <p>Render addresses, interfaces, state, counters, and severity in place.</p>
-          </div>
+            <p>Addresses, interfaces, state, counters, and severity, colored in place.</p>
+          </li>
+        </ol>
+      </section>
+
+      <section class="section feedback-section" id="feedback" aria-labelledby="feedback-title">
+        <div class="section-heading compact">
+          <p class="eyebrow">// feedback wanted</p>
+          <h2 id="feedback-title">Profile coverage gets better with real-world testing.</h2>
+        </div>
+        <p class="section-sub feedback-copy">
+          Testing help is especially useful across the built-in profile set and custom
+          profile files for other vendors, appliances, and terminal workflows.
+        </p>
+        <div class="feedback-list" aria-label="Profiles and vendors wanted for testing">
+          <span>Cisco IOS / IOS XE / IOS XR / NX-OS / ASA</span>
+          <span>Juniper Junos</span>
+          <span>Fortinet FortiGate / FortiOS</span>
+          <span>Palo Alto PAN-OS</span>
+          <span>Arista EOS</span>
+          <span>Aruba CX</span>
+          <span>Versa</span>
+          <span>Linux / Unix</span>
+          <span>Custom vendor profiles</span>
         </div>
       </section>
     </main>
 
     <footer class="site-footer">
-      <span>PrismTTY is MIT licensed.</span>
-      <a href="https://github.com/inxbit/prismtty/blob/main/README.md">Read the docs</a>
+      <div class="footer-brand">
+        <img class="brand-logo" src="assets/prismtty-lockup.svg" alt="" width="54" height="24">
+        <span>Prism<span class="tty">TTY</span></span>
+      </div>
+      <p class="footer-note">MIT licensed · clean-room profiles · no telemetry.</p>
+      <nav class="footer-links" aria-label="Footer">
+        <a href="https://github.com/inxbit/prismtty/blob/main/README.md">Docs</a>
+        <a href="https://github.com/inxbit/prismtty">GitHub ↗</a>
+        <a href="https://crates.io/crates/prismtty">crates.io ↗</a>
+      </nav>
     </footer>
   </body>
 </html>
diff --git a/docs/script.js b/docs/script.js
index 0589ef6..dd8bc2c 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,50 +1,312 @@
-const copyButtons = document.querySelectorAll('[data-copy]');
+/* PrismTTY site — a miniature of what the tool does.
+   One small rule-based highlighter feeds three surfaces:
+   the animated hero terminal, the raw/highlighted compare slider,
+   and the interactive profile tabs. No dependencies. */
 
-copyButtons.forEach((button) => {
-  const originalText = button.textContent;
+(() => {
+  'use strict';
 
-  button.addEventListener('click', async () => {
-    const value = button.getAttribute('data-copy');
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const ESC = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
+  const esc = (s) => s.replace(/[&<>]/g, (c) => ESC[c]);
+  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+  const rand = (a, b) => a + Math.floor(Math.random() * (b - a));
 
-    try {
-      await navigator.clipboard.writeText(value);
-      button.textContent = 'Copied';
-    } catch {
-      button.textContent = 'Select';
-    }
+  /* ---- the highlight rules (mirror PrismTTY's token families) ---- */
+  const RULES = [
+    { cls: 'sev', re: /%[A-Z][A-Z0-9_]*-\d+-[A-Z0-9_]+/g },
+    {
+      cls: 'iface',
+      re: /\b(?:TenGigabitEthernet|GigabitEthernet|FastEthernet|Port-channel|Management|Loopback|Ethernet|Vlan|Mgmt|Gi|Te|Fa|Eth|Po|Lo|ge-|xe-|et-|fe-|ae|port\d+|em\d+|eth\d+|wg\d+)(?:[\d/.:]+)?\b/g,
+    },
+    { cls: 'ip', re: /\b\d{1,3}(?:\.\d{1,3}){3}(?:\/\d{1,2})?\b/g },
+    { cls: 'up', re: /\b(?:up|connected|active|established|enabled)\b/gi },
+    { cls: 'down', re: /\b(?:down|notconnect|disabled|err-disabled|inactive)\b/gi },
+  ];
 
-    window.setTimeout(() => {
-      button.textContent = originalText;
-    }, 1600);
-  });
-});
-
-const header = document.querySelector('[data-site-header]');
-const navLinks = [...document.querySelectorAll('.site-nav a[href^="#"]')];
-const sections = navLinks
-  .map((link) => document.querySelector(link.getAttribute('href')))
-  .filter(Boolean);
-
-if (header && sections.length > 0 && 'IntersectionObserver' in window) {
-  const observer = new IntersectionObserver(
-    (entries) => {
-      const visible = entries
-        .filter((entry) => entry.isIntersecting)
-        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
-
-      if (!visible) {
-        return;
+  // Apply rules to one line; first match wins on overlap (PrismTTY's exclusive model).
+  function highlight(line) {
+    const marks = [];
+    for (const { cls, re } of RULES) {
+      re.lastIndex = 0;
+      let m;
+      while ((m = re.exec(line))) {
+        if (m[0].length === 0) { re.lastIndex++; continue; }
+        marks.push({ start: m.index, end: m.index + m[0].length, cls });
       }
+    }
+    marks.sort((a, b) => a.start - b.start || b.end - a.end);
 
-      navLinks.forEach((link) => {
-        link.classList.toggle('is-active', link.getAttribute('href') === `#${visible.target.id}`);
-      });
+    let out = '';
+    let pos = 0;
+    for (const mk of marks) {
+      if (mk.start < pos) continue;
+      out += esc(line.slice(pos, mk.start));
+      out += `<span class="hl-${mk.cls}">${esc(line.slice(mk.start, mk.end))}</span>`;
+      pos = mk.end;
+    }
+    out += esc(line.slice(pos));
+    return out;
+  }
+
+  // A "line" is either an output string or an input {p: prompt, c: command}.
+  const blank = (s) => s === '' ? '&nbsp;' : s;
+
+  function lineHTML(line) {
+    if (typeof line === 'string') return `<span class="tline">${blank(highlight(line))}</span>`;
+    return `<span class="tline"><span class="hl-host">${esc(line.p)}</span><span class="t-cmd">${esc(line.c)}</span></span>`;
+  }
+  function rawHTML(line) {
+    const text = typeof line === 'string' ? line : line.p + line.c;
+    return `<span class="tline">${esc(blank(text))}</span>`;
+  }
+  const render = (lines, fn) => lines.map(fn).join('');
+
+  /* ---- sample sessions ---- */
+  const HERO = [
+    { p: 'ops@workstation%', c: ' ptty ssh edge-sw1.example.net' },
+    'Connected to edge-sw1.example.net.',
+    { p: 'edge-sw1#', c: 'show ip interface brief' },
+    'Interface              IP-Address      OK? Method Status    Protocol',
+    'GigabitEthernet1/0/1   192.0.2.10      YES manual up        up',
+    'GigabitEthernet1/0/2   198.51.100.42   YES manual down      down',
+    'Vlan10                 203.0.113.1     YES manual up        up',
+    { p: 'edge-sw1#', c: 'show logging | include LINK' },
+    '%LINK-3-UPDOWN: Interface GigabitEthernet1/0/2, changed state to down',
+  ];
+
+  const COMPARE = [
+    { p: 'edge-sw1#', c: 'show interfaces status' },
+    'Port      Name        Status       Vlan    Duplex  Speed Type',
+    'Gi1/0/1   uplink-a    connected    trunk     full    1000 1000BaseTX',
+    'Gi1/0/2   uplink-b    notconnect   trunk     full    1000 1000BaseTX',
+    'Gi1/0/3   ap-floor2   connected    20        full    1000 1000BaseTX',
+    'Te1/1/1   core-spine  connected    trunk     full   10000 10GBase-SR',
+    '',
+    { p: 'edge-sw1#', c: 'show ip interface brief | exclude unassigned' },
+    'Interface              IP-Address      OK? Status    Protocol',
+    'GigabitEthernet1/0/1   192.0.2.10      YES up        up',
+    'GigabitEthernet1/0/2   198.51.100.42   YES down      down',
+    'Vlan10                 203.0.113.1     YES up        up',
+    '',
+    '%LINK-3-UPDOWN: Interface GigabitEthernet1/0/2, changed state to down',
+    '%LINEPROTO-5-UPDOWN: Line protocol on Gi1/0/2, changed state to down',
+  ];
+
+  const PROFILES = {
+    cisco: {
+      title: 'ptty ssh edge-sw1.example.net',
+      lines: [
+        { p: 'edge-sw1#', c: 'show ip interface brief' },
+        'Interface              IP-Address      OK? Status    Protocol',
+        'GigabitEthernet1/0/1   192.0.2.10      YES up        up',
+        'GigabitEthernet1/0/2   198.51.100.42   YES down      down',
+        'Vlan10                 203.0.113.1     YES up        up',
+        '',
+        '%LINK-3-UPDOWN: Interface Gi1/0/2, changed state to down',
+      ],
     },
-    {
-      rootMargin: '-20% 0px -62% 0px',
-      threshold: [0.1, 0.25, 0.5],
+    juniper: {
+      title: 'ptty ssh core-rtr.example.net',
+      lines: [
+        { p: 'netops@core-rtr>', c: ' show interfaces terse' },
+        'Interface               Admin Link Proto    Local',
+        'ge-0/0/0                up    up',
+        'ge-0/0/0.0              up    up   inet     192.0.2.2/31',
+        'ge-0/0/1                up    down',
+        'ae0.0                   up    up   inet     203.0.113.9/30',
+        'xe-0/1/0.0              up    up   inet     198.51.100.1/30',
+      ],
+    },
+    fortinet: {
+      title: 'ptty ssh fw-edge.example.net',
+      lines: [
+        { p: 'fw-edge #', c: 'get system interface physical' },
+        '== [ port1 ]',
+        'name: port1   mode: static   ip: 192.0.2.1 255.255.255.0     status: up',
+        '== [ port2 ]',
+        'name: port2   mode: dhcp     ip: 0.0.0.0 0.0.0.0             status: down',
+        '== [ port3 ]',
+        'name: port3   mode: static   ip: 198.51.100.1 255.255.255.0  status: up',
+      ],
+    },
+    arista: {
+      title: 'ptty ssh spine1.example.net',
+      lines: [
+        { p: 'spine1>', c: 'show ip interface brief' },
+        'Interface       IP Address       Status     Protocol   MTU',
+        'Ethernet1       10.0.0.1/31      up         up         1500',
+        'Ethernet2       10.0.0.3/31      down       down       1500',
+        'Ethernet3       10.0.1.1/31      up         up         9214',
+        'Management1     192.0.2.50/24    up         up         1500',
+      ],
     },
-  );
+    'linux-unix': {
+      title: 'ptty /bin/zsh',
+      lines: [
+        { p: 'ops@workstation%', c: ' ip -br addr show' },
+        'lo               UNKNOWN        127.0.0.1/8',
+        'eth0             UP             192.0.2.15/24',
+        'eth1             DOWN',
+        'wg0              UNKNOWN        10.8.0.2/24',
+        { p: 'ops@workstation%', c: ' systemctl is-active nginx' },
+        'active',
+      ],
+    },
+  };
+
+  /* ---- 1. animated hero terminal ---- */
+  async function runHero() {
+    const body = document.querySelector('[data-terminal]');
+    if (!body) return;
+
+    if (reduceMotion) {
+      body.innerHTML = render(HERO, lineHTML);
+      return;
+    }
+
+    while (true) {
+      body.innerHTML = '';
+      for (const line of HERO) {
+        const el = document.createElement('span');
+        el.className = 'tline';
+        body.appendChild(el);
+
+        if (typeof line === 'object' && line.c) {
+          el.innerHTML = `<span class="hl-host">${esc(line.p)}</span><span class="t-cmd"></span><span class="cursor">.</span>`;
+          const cmd = el.querySelector('.t-cmd');
+          for (const ch of line.c) {
+            cmd.append(ch);
+            await sleep(rand(26, 64));
+          }
+          el.querySelector('.cursor').remove();
+          await sleep(440);
+        } else {
+          el.innerHTML = blank(highlight(line));
+          await sleep(line === '' ? 70 : 150);
+        }
+      }
+      const tail = document.createElement('span');
+      tail.className = 'tline';
+      tail.innerHTML = '<span class="hl-host">edge-sw1#</span><span class="cursor">.</span>';
+      body.appendChild(tail);
+      await sleep(5200);
+    }
+  }
+
+  /* ---- 2. raw / highlighted compare slider ---- */
+  function initCompare() {
+    const wrap = document.querySelector('[data-compare]');
+    if (!wrap) return;
+    const raw = wrap.querySelector('[data-compare-raw]');
+    const hl = wrap.querySelector('[data-compare-hl]');
+    const range = wrap.querySelector('[data-compare-range]');
+
+    raw.innerHTML = render(COMPARE, rawHTML);
+    hl.innerHTML = render(COMPARE, lineHTML);
+
+    const setPos = (v) => wrap.style.setProperty('--pos', `${v}%`);
+    setPos(range.value);
+    range.addEventListener('input', () => setPos(range.value));
+  }
+
+  /* ---- 3. interactive profile tabs ---- */
+  function initProfiles() {
+    const root = document.querySelector('[data-profiles]');
+    if (!root) return;
+    const tabs = [...root.querySelectorAll('.profile-tab')];
+    const body = root.querySelector('[data-profile-body]');
+    const title = root.querySelector('[data-profile-title]');
+
+    const show = (key) => {
+      const data = PROFILES[key];
+      if (!data) return;
+      const paint = () => {
+        body.innerHTML = render(data.lines, lineHTML);
+        title.textContent = data.title;
+        body.classList.remove('is-swapping');
+      };
+      if (reduceMotion) { paint(); return; }
+      body.classList.add('is-swapping');
+      setTimeout(paint, 150);
+    };
+
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        tabs.forEach((t) => t.setAttribute('aria-selected', String(t === tab)));
+        show(tab.dataset.profile);
+      });
+    });
+
+    show(tabs.find((t) => t.getAttribute('aria-selected') === 'true')?.dataset.profile || 'cisco');
+  }
+
+  /* ---- copy buttons ---- */
+  function initCopy() {
+    document.querySelectorAll('[data-copy]').forEach((btn) => {
+      const original = btn.textContent;
+      btn.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(btn.dataset.copy);
+          btn.textContent = 'Copied ✓';
+        } catch {
+          btn.textContent = 'Select all';
+        }
+        btn.classList.add('copied');
+        setTimeout(() => {
+          btn.textContent = original;
+          btn.classList.remove('copied');
+        }, 1600);
+      });
+    });
+  }
+
+  /* ---- scroll reveal ---- */
+  function initReveal() {
+    const targets = document.querySelectorAll('.section, .command-band');
+    if (reduceMotion || !('IntersectionObserver' in window)) return;
+    targets.forEach((el) => el.classList.add('reveal'));
+    const io = new IntersectionObserver(
+      (entries, obs) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add('is-in');
+            obs.unobserve(e.target);
+          }
+        });
+      },
+      { rootMargin: '0px 0px -12% 0px', threshold: 0.08 }
+    );
+    targets.forEach((el) => io.observe(el));
+  }
+
+  /* ---- active nav state ---- */
+  function initNav() {
+    const links = [...document.querySelectorAll('.site-nav a[href^="#"]')];
+    const sections = links
+      .map((l) => document.querySelector(l.getAttribute('href')))
+      .filter(Boolean);
+    if (!sections.length || !('IntersectionObserver' in window)) return;
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+        if (!visible) return;
+        links.forEach((l) =>
+          l.classList.toggle('is-active', l.getAttribute('href') === `#${visible.target.id}`)
+        );
+      },
+      { rootMargin: '-18% 0px -62% 0px', threshold: [0.1, 0.25, 0.5] }
+    );
+    sections.forEach((s) => io.observe(s));
+  }
 
-  sections.forEach((section) => observer.observe(section));
-}
+  initCompare();
+  initProfiles();
+  initCopy();
+  initReveal();
+  initNav();
+  runHero();
+})();
diff --git a/docs/styles.css b/docs/styles.css
index 14c3246..6bd4c34 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,235 +1,246 @@
+/* PrismTTY — operator's terminal, refined.
+   Dark, monospace-forward, with a prism/spectrum motif.
+   Dependency-free: characterful mono stack first, graceful fallbacks. */
+
 :root {
   color-scheme: dark;
+
+  /* surfaces */
   --bg: #020617;
+  --bg-2: #040b18;
   --panel: #07111f;
-  --panel-strong: #0f172a;
-  --line: #1e293b;
-  --line-strong: #334155;
-  --text: #f8fafc;
-  --muted: #94a3b8;
-  --subtle: #64748b;
+  --panel-2: #0b1626;
+  --line: #1b2942;
+  --line-strong: #2c3e5e;
+
+  /* ink */
+  --text: #f4f7fb;
+  --muted: #9fb0c8;
+  --subtle: #67768f;
+
+  /* spectrum — also the live highlight palette */
   --cyan: #22d3ee;
   --green: #a3e635;
+  --up: #4ade80;
   --pink: #f472b6;
   --purple: #a78bfa;
-  --yellow: #facc15;
+  --amber: #fbbf24;
+
+  --prism: linear-gradient(90deg, var(--cyan), var(--green) 32%, var(--amber) 56%, var(--pink) 78%, var(--purple));
+
+  /* type */
+  --mono: "Berkeley Mono", "JetBrains Mono", "Cascadia Code", "SF Mono", ui-monospace,
+    "IBM Plex Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+
   --max: 1180px;
+  --radius: 14px;
+  --radius-sm: 9px;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-* {
-  box-sizing: border-box;
-}
+* { box-sizing: border-box; }
 
-html {
-  scroll-behavior: smooth;
-}
+html { scroll-behavior: smooth; }
 
 body {
   margin: 0;
   background:
-    linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.96) 34rem),
-    var(--bg);
+    radial-gradient(120% 80% at 82% -8%, rgba(34, 211, 238, 0.10), transparent 56%),
+    radial-gradient(100% 60% at 0% 4%, rgba(167, 139, 250, 0.08), transparent 60%),
+    linear-gradient(180deg, var(--bg-2), var(--bg) 38rem);
   color: var(--text);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  letter-spacing: 0;
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
+/* fine grid + grain atmosphere */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
+  z-index: 0;
   pointer-events: none;
   background-image:
-    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
-  background-size: 44px 44px;
-  mask-image: linear-gradient(180deg, black, transparent 78%);
+    linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
+  background-size: 46px 46px;
+  mask-image: linear-gradient(180deg, black, transparent 92%);
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+.grain {
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.4;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
 }
 
-code,
-pre {
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
-}
+main { position: relative; z-index: 2; }
 
-code {
-  color: #d9f99d;
-}
+a { color: inherit; text-decoration: none; }
 
-img {
-  display: block;
-  max-width: 100%;
-}
+code, pre, .mono { font-family: var(--mono); }
+
+code { color: #d9f99d; font-size: 0.92em; }
+
+img { display: block; max-width: 100%; }
 
 :focus-visible {
-  outline: 3px solid var(--cyan);
+  outline: 2px solid var(--cyan);
   outline-offset: 3px;
+  border-radius: 4px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap; border: 0;
 }
 
+/* ---------- header ---------- */
 .site-header {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
-  width: 100%;
-  min-height: 68px;
-  padding: 14px max(24px, calc((100vw - var(--max)) / 2));
-  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
-  background: rgba(2, 6, 23, 0.82);
-  backdrop-filter: blur(16px);
+  min-height: 64px;
+  padding: 12px max(20px, calc((100vw - var(--max)) / 2));
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+  background: rgba(2, 6, 23, 0.7);
+  backdrop-filter: blur(14px) saturate(140%);
 }
 
-.brand,
-.site-nav {
+.brand {
   display: flex;
   align-items: center;
+  gap: 11px;
+  font-family: var(--mono);
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
-.brand {
-  gap: 10px;
-  color: var(--text);
-  font-weight: 800;
-}
-
-.brand-mark {
-  position: relative;
-  width: 26px;
-  height: 26px;
-  border: 3px solid var(--cyan);
-  transform: skew(-10deg);
-}
+.brand-name { font-size: 18px; }
+.tty { color: var(--cyan); }
 
-.brand-mark::before {
-  content: "";
-  position: absolute;
-  inset: 5px;
-  border-left: 2px solid var(--purple);
-  border-bottom: 2px solid var(--green);
+.brand-logo {
+  height: 30px;
+  width: auto;
+  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.28));
 }
+.footer-brand .brand-logo { height: 24px; width: auto; filter: none; }
 
 .site-nav {
-  gap: 6px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
   padding: 4px;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  border-radius: 8px;
-  background: rgba(15, 23, 42, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 10px;
+  background: rgba(11, 22, 38, 0.6);
 }
-
 .site-nav a {
-  min-height: 36px;
-  padding: 9px 12px;
-  border-radius: 6px;
-  color: #cbd5e1;
-  font-size: 14px;
-  font-weight: 700;
+  padding: 8px 12px;
+  border-radius: 7px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 500;
+  transition: color 0.18s, background 0.18s;
 }
-
-.site-nav a:hover,
+.site-nav a:hover { color: var(--text); }
 .site-nav a.is-active {
-  background: rgba(34, 211, 238, 0.12);
   color: var(--cyan);
+  background: rgba(34, 211, 238, 0.1);
 }
+.nav-external { color: var(--subtle) !important; }
+.nav-external:hover { color: var(--text) !important; }
 
+/* ---------- hero ---------- */
 .hero {
   position: relative;
   isolation: isolate;
-  min-height: 620px;
   overflow: hidden;
-  padding: 56px max(24px, calc((100vw - var(--max)) / 2)) 44px;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 48px;
+  max-width: var(--max);
+  margin: 0 auto;
+  padding: 84px 20px 72px;
 }
 
-.hero::after {
-  content: "";
+.hero-bg {
   position: absolute;
-  inset: 0;
+  inset: -10% -20% auto -20%;
+  height: 120%;
   z-index: -1;
-  background: linear-gradient(90deg, rgba(2, 6, 23, 0.96) 0%, rgba(2, 6, 23, 0.82) 46%, rgba(2, 6, 23, 0.16) 100%);
-}
-
-.hero-beams {
-  position: absolute;
-  inset: 0;
-  z-index: -2;
   overflow: hidden;
 }
-
-.hero-beams span {
+.beam {
   position: absolute;
-  right: -80px;
-  width: 66%;
-  height: 58px;
-  transform: skewX(-16deg);
-  opacity: 0.26;
-}
-
-.hero-beams span:nth-child(1) {
-  top: 130px;
-  background: linear-gradient(90deg, transparent, var(--cyan));
+  right: -20%;
+  width: 90%;
+  height: 64px;
+  transform: skewX(-18deg);
+  filter: blur(2px);
+  opacity: 0.22;
+  animation: drift 14s var(--ease) infinite alternate;
 }
+.beam-cyan  { top: 12%; background: linear-gradient(90deg, transparent, var(--cyan)); }
+.beam-green { top: 38%; background: linear-gradient(90deg, transparent, var(--green)); animation-delay: -4s; }
+.beam-pink  { top: 64%; background: linear-gradient(90deg, transparent, var(--pink)); animation-delay: -8s; }
 
-.hero-beams span:nth-child(2) {
-  top: 230px;
-  background: linear-gradient(90deg, transparent, var(--green));
+@keyframes drift {
+  from { transform: skewX(-18deg) translateX(-4%); opacity: 0.14; }
+  to   { transform: skewX(-18deg) translateX(6%);  opacity: 0.3; }
 }
 
-.hero-beams span:nth-child(3) {
-  top: 330px;
-  background: linear-gradient(90deg, transparent, var(--pink));
-}
-
-.hero-copy {
-  position: relative;
-  z-index: 2;
-  max-width: 500px;
-}
-
-.hero-logo {
-  width: 330px;
-  height: auto;
-  margin: 0 0 28px;
-  border-radius: 8px;
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
-}
+.hero-copy { max-width: 540px; }
 
 .eyebrow {
-  margin: 0 0 12px;
+  margin: 0 0 18px;
   color: var(--cyan);
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-family: var(--mono);
   font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-h1,
-h2,
-h3,
-p {
-  letter-spacing: 0;
+  font-weight: 500;
+  letter-spacing: 0.02em;
 }
 
 h1 {
-  max-width: 500px;
   margin: 0;
-  color: var(--text);
-  font-size: 64px;
-  line-height: 0.98;
+  font-family: var(--mono);
+  font-weight: 700;
+  font-size: clamp(38px, 5.4vw, 62px);
+  line-height: 1.02;
+  letter-spacing: -0.03em;
+}
+
+.spectrum-text {
+  background: var(--prism);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
 .hero-lede {
-  max-width: 500px;
   margin: 24px 0 0;
-  color: #cbd5e1;
-  font-size: 19px;
-  line-height: 1.6;
+  max-width: 480px;
+  color: var(--muted);
+  font-size: 18px;
+  line-height: 1.66;
 }
 
 .hero-actions {
@@ -242,518 +253,563 @@ h1 {
 .button {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: 8px;
   min-height: 46px;
-  padding: 12px 17px;
-  border-radius: 8px;
+  padding: 0 20px;
   border: 1px solid transparent;
-  font-weight: 800;
+  border-radius: 10px;
+  font-family: var(--mono);
+  font-size: 14px;
+  font-weight: 600;
+  transition: transform 0.18s var(--ease), box-shadow 0.18s, background 0.18s, border-color 0.18s;
 }
-
 .button.primary {
-  color: #02121a;
+  color: #021318;
   background: var(--cyan);
-  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 12px 32px rgba(34, 211, 238, 0.25);
+  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 14px 36px rgba(34, 211, 238, 0.22);
 }
-
-.button.secondary {
-  color: #dbeafe;
+.button.primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5), 0 18px 46px rgba(34, 211, 238, 0.32); }
+.button.ghost {
+  color: var(--text);
   border-color: var(--line-strong);
-  background: rgba(15, 23, 42, 0.72);
-}
-
-.button:hover,
-.copy-button:hover,
-.install-links a:hover {
-  transform: translateY(-1px);
+  background: rgba(11, 22, 38, 0.55);
 }
+.button.ghost:hover { transform: translateY(-2px); border-color: var(--cyan); }
 
 .hero-facts {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  max-width: 520px;
-  margin: 32px 0 0;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin: 38px 0 0;
 }
-
 .hero-facts div {
-  min-width: 0;
-  padding: 14px;
-  border: 1px solid rgba(148, 163, 184, 0.2);
-  border-radius: 8px;
-  background: rgba(7, 17, 31, 0.82);
+  padding: 13px 14px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius-sm);
+  background: rgba(7, 17, 31, 0.7);
 }
-
 .hero-facts dt {
   color: var(--subtle);
-  font-size: 13px;
-  font-weight: 800;
+  font-family: var(--mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
-
 .hero-facts dd {
-  margin: 5px 0 0;
-  color: var(--text);
-  font-size: 18px;
-  font-weight: 900;
+  margin: 6px 0 0;
+  font-family: var(--mono);
+  font-size: 20px;
+  font-weight: 700;
 }
+.hero-facts dd span { font-size: 12px; font-weight: 500; color: var(--muted); }
 
-.hero-preview {
-  position: absolute;
-  right: max(24px, calc((100vw - var(--max)) / 2));
-  bottom: -18px;
-  z-index: 1;
-  width: 600px;
+/* ---------- terminal (shared) ---------- */
+.terminal {
   margin: 0;
-  border-radius: 8px;
-  opacity: 0.92;
-  filter: drop-shadow(0 38px 80px rgba(0, 0, 0, 0.48));
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: linear-gradient(180deg, #061021, #03091a);
+  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  overflow: hidden;
 }
-
-.hero-preview img {
-  border-radius: 8px;
+.terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
+}
+.dots { display: inline-flex; gap: 7px; }
+.dots i {
+  width: 11px; height: 11px;
+  border-radius: 50%;
+  background: #2a3550;
+}
+.dots i:nth-child(1) { background: #ff5f57; }
+.dots i:nth-child(2) { background: #febc2e; }
+.dots i:nth-child(3) { background: #28c840; }
+.terminal-title {
+  flex: 1;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.terminal-badge {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--up);
+  letter-spacing: 0.04em;
+}
+.terminal-body {
+  padding: 18px 18px 20px;
+  font-family: var(--mono);
+  font-size: 13.5px;
+  line-height: 1.72;
+  white-space: pre-wrap;
+  word-break: break-word;
+  tab-size: 2;
+}
+.hero-terminal { z-index: 2; }
+.hero-terminal .terminal-body { min-height: 326px; }
+
+/* terminal line rendering */
+.tline { display: block; }
+.t-cmd { color: #eef2f7; }
+.cursor {
+  display: inline-block;
+  width: 8px;
+  margin-left: 1px;
+  background: var(--cyan);
+  color: transparent;
+  animation: blink 1.05s steps(1) infinite;
 }
+@keyframes blink { 50% { opacity: 0; } }
 
+/* the highlight token palette — this IS PrismTTY's output */
+.hl-host  { color: var(--green); font-weight: 600; }
+.hl-iface { color: var(--amber); }
+.hl-ip    { color: var(--cyan); }
+.hl-up    { color: var(--up); font-weight: 600; }
+.hl-down  { color: var(--pink); font-weight: 600; }
+.hl-sev   { color: var(--purple); font-weight: 600; }
+
+/* ---------- command band ---------- */
 .command-band {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   max-width: var(--max);
   margin: 0 auto;
-  padding: 0 24px;
-  transform: translateY(-1px);
+  padding: 0 20px;
 }
-
 .command-line {
   min-width: 0;
-  padding: 18px;
+  padding: 16px 18px;
   border: 1px solid var(--line);
-  background: #030a16;
-  color: #e5e7eb;
-  font-size: 14px;
+  background: rgba(3, 10, 22, 0.8);
+  font-family: var(--mono);
+  font-size: 13px;
+  color: #dbe4f0;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
+.command-line:not(:first-child) { border-left: none; }
+.prompt { margin-right: 9px; color: var(--green); font-weight: 700; }
 
-.prompt {
-  margin-right: 8px;
-  color: var(--green);
-  font-weight: 900;
-}
-
+/* ---------- sections ---------- */
 .section {
   max-width: var(--max);
   margin: 0 auto;
-  padding: 92px 24px;
-}
-
-.section-grid {
-  display: grid;
-  grid-template-columns: 0.8fr 1.2fr;
-  gap: 42px;
+  padding: 96px 20px;
 }
-
+.section-heading { max-width: 880px; margin-bottom: 8px; }
+.section-heading.compact { max-width: 760px; }
 .section-heading h2,
-.section-copy h2 {
+h2 {
   margin: 0;
-  font-size: 42px;
-  line-height: 1.08;
-}
-
-.section-heading.compact {
-  max-width: 780px;
+  font-family: var(--mono);
+  font-weight: 700;
+  font-size: clamp(28px, 3.6vw, 40px);
+  line-height: 1.12;
+  letter-spacing: -0.025em;
 }
-
-.section-copy p {
-  margin: 20px 0 0;
-  color: #cbd5e1;
+.section-sub {
+  margin: 18px 0 0;
+  max-width: 620px;
+  color: var(--muted);
   font-size: 17px;
-  line-height: 1.7;
 }
 
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+/* reveal on scroll */
+.reveal {
+  opacity: 0;
+  transform: translateY(22px);
+  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
 }
+.reveal.is-in { opacity: 1; transform: none; }
 
-.feature-card,
-.install-card,
-.workflow-step,
-.scope-panel {
-  min-width: 0;
-  border: 1px solid rgba(148, 163, 184, 0.2);
-  border-radius: 8px;
-  background: rgba(7, 17, 31, 0.72);
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
-}
-
-.feature-card {
-  padding: 22px;
+/* ---------- compare ---------- */
+.compare {
+  position: relative;
+  margin-top: 34px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: #03091a;
+  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  user-select: none;
 }
-
-.feature-kicker {
-  display: inline-flex;
-  margin-bottom: 52px;
-  color: var(--green);
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+.compare-pane {
+  margin: 0;
+  padding: 26px 28px;
+  font-family: var(--mono);
   font-size: 13px;
-  font-weight: 900;
+  line-height: 1.78;
+  white-space: pre;
+  overflow-x: auto;
 }
-
-.feature-card h3,
-.install-card h3,
-.workflow-step h3 {
-  margin: 0;
-  font-size: 20px;
+.compare-raw { color: #5d6b82; }
+.compare-hl {
+  position: absolute;
+  inset: 0;
+  border-right: 2px solid var(--cyan);
+  clip-path: inset(0 calc(100% - var(--pos, 58%)) 0 0);
+  box-shadow: 14px 0 40px -10px rgba(34, 211, 238, 0.4);
+  background: #03091a;
 }
-
-.feature-card p,
-.workflow-step p {
-  margin: 14px 0 0;
-  color: var(--muted);
-  line-height: 1.62;
+.compare-divider {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: var(--pos, 58%);
+  width: 2px;
+  margin-left: -1px;
+  background: var(--cyan);
+  pointer-events: none;
 }
-
-.split-section {
+.compare-knob {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
   display: grid;
-  grid-template-columns: 1.1fr 0.9fr;
-  gap: 46px;
-  align-items: center;
-}
-
-.media-panel {
-  border: 1px solid rgba(148, 163, 184, 0.22);
-  border-radius: 8px;
-  background: #030a16;
-  padding: 10px;
-}
-
-.media-panel img {
-  border-radius: 8px;
-}
-
-.profile-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 26px;
+  place-items: center;
+  width: 38px; height: 38px;
+  border-radius: 50%;
+  background: var(--cyan);
+  color: #021318;
+  font-size: 16px;
+  font-weight: 700;
+  box-shadow: 0 6px 22px rgba(34, 211, 238, 0.5);
 }
-
-.profile-list span {
-  padding: 8px 10px;
-  border: 1px solid rgba(148, 163, 184, 0.24);
-  border-radius: 8px;
-  background: rgba(15, 23, 42, 0.78);
-  color: #dbeafe;
-  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
-  font-size: 13px;
+.compare-range {
+  position: absolute;
+  inset: 0;
+  width: 100%; height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: ew-resize;
 }
-
-.scope-section,
-.feedback-section {
-  border-top: 1px solid rgba(148, 163, 184, 0.14);
+.compare-tag {
+  position: absolute;
+  bottom: 12px;
+  padding: 4px 9px;
+  border-radius: 6px;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  pointer-events: none;
 }
+.compare-tag-left { left: 14px; color: var(--subtle); background: rgba(11, 22, 38, 0.8); }
+.compare-tag-right { right: 14px; color: #021318; background: var(--cyan); }
 
+/* ---------- scope ---------- */
 .scope-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr 1fr;
   gap: 14px;
-  margin-top: 30px;
-}
-
-.scope-panel {
-  padding: 24px;
+  margin-top: 32px;
 }
-
+.scope-panel { padding: 26px 28px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--radius); background: rgba(7, 17, 31, 0.66); }
 .scope-panel h3 {
+  display: flex;
+  align-items: center;
+  gap: 11px;
   margin: 0;
-  font-size: 22px;
+  font-family: var(--mono);
+  font-size: 19px;
 }
-
-.scope-panel p,
-.feedback-copy {
-  color: #cbd5e1;
-  line-height: 1.7;
+.scope-panel p { margin: 16px 0 0; color: var(--muted); line-height: 1.7; }
+.scope-tick {
+  display: grid;
+  place-items: center;
+  width: 26px; height: 26px;
+  border-radius: 7px;
+  font-weight: 700;
 }
+.scope-yes { border-top: 2px solid rgba(74, 222, 128, 0.5); }
+.scope-yes .scope-tick { color: var(--up); background: rgba(74, 222, 128, 0.12); }
+.scope-no { border-top: 2px solid rgba(244, 114, 182, 0.45); }
+.scope-no .scope-tick { color: var(--pink); background: rgba(244, 114, 182, 0.12); }
 
-.scope-panel p {
-  margin: 16px 0 0;
+/* ---------- features ---------- */
+.features-section { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; }
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  align-content: start;
 }
+.feature-card {
+  position: relative;
+  padding: 22px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius);
+  background: rgba(7, 17, 31, 0.66);
+  overflow: hidden;
+  transition: transform 0.22s var(--ease), border-color 0.22s;
+}
+.feature-card::after {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 2px;
+  background: var(--prism);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s var(--ease);
+}
+.feature-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
+.feature-card:hover::after { transform: scaleX(1); }
+.feature-kicker {
+  display: block;
+  margin-bottom: 44px;
+  color: var(--green);
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 700;
+}
+.feature-card h3 { margin: 0; font-family: var(--mono); font-size: 18px; }
+.feature-card p { margin: 12px 0 0; color: var(--muted); line-height: 1.62; }
 
-.feedback-copy {
-  max-width: 760px;
-  margin: 20px 0 0;
-  font-size: 17px;
+/* ---------- profiles ---------- */
+.profiles-demo { margin-top: 34px; }
+.profile-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+.profile-tab {
+  padding: 9px 15px;
+  border: 1px solid var(--line-strong);
+  border-radius: 8px;
+  background: rgba(11, 22, 38, 0.6);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.18s var(--ease);
+}
+.profile-tab:hover { color: var(--text); border-color: var(--cyan); }
+.profile-tab[aria-selected="true"] {
+  color: #021318;
+  background: var(--cyan);
+  border-color: var(--cyan);
+  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.25);
 }
+.profile-terminal .terminal-body { min-height: 248px; }
+.profile-terminal .terminal-body.is-swapping { opacity: 0; }
+.profile-terminal .terminal-body { transition: opacity 0.16s ease; }
 
-.feedback-list {
+.profile-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 28px;
+  margin-top: 26px;
 }
-
-.feedback-list span {
-  padding: 9px 11px;
-  border: 1px solid rgba(148, 163, 184, 0.24);
+.profile-list span {
+  padding: 7px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 8px;
-  background: rgba(15, 23, 42, 0.78);
-  color: #dbeafe;
-  font-size: 14px;
-  font-weight: 800;
+  background: rgba(11, 22, 38, 0.6);
+  color: #cdd9ea;
+  font-family: var(--mono);
+  font-size: 12.5px;
 }
 
+/* ---------- install ---------- */
 .install-section {
-  border-top: 1px solid rgba(148, 163, 184, 0.14);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  border-top: 1px solid rgba(148, 163, 184, 0.1);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
 }
-
 .install-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
   margin-top: 30px;
 }
-
 .install-card {
   padding: 18px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius);
+  background: rgba(7, 17, 31, 0.66);
 }
-
 .install-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }
-
+.install-card h3 { margin: 0; font-family: var(--mono); font-size: 16px; }
 .copy-button {
-  min-height: 34px;
-  padding: 8px 10px;
+  min-height: 32px;
+  padding: 6px 12px;
   border: 1px solid var(--line-strong);
   border-radius: 8px;
-  color: #cbd5e1;
-  background: #0f172a;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 800;
+  background: rgba(11, 22, 38, 0.8);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.16s var(--ease);
 }
-
-pre {
-  margin: 18px 0 0;
-  padding: 14px;
-  border: 1px solid #172033;
-  border-radius: 8px;
+.copy-button:hover { color: var(--text); border-color: var(--cyan); }
+.copy-button.copied { color: #021318; background: var(--up); border-color: var(--up); }
+.install-card pre {
+  margin: 16px 0 0;
+  padding: 13px 14px;
+  border: 1px solid #14203a;
+  border-radius: var(--radius-sm);
   background: #010714;
-  color: #e5e7eb;
-  overflow-x: hidden;
-}
-
-pre code {
-  color: #e5e7eb;
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-
-#preview,
-#scope,
-#profiles,
-#feedback,
-#install {
-  scroll-margin-top: 90px;
+  overflow-x: auto;
 }
-
+.install-card pre code { color: #e7edf6; white-space: pre; }
 .install-links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 18px;
 }
-
 .install-links a {
-  padding: 10px 12px;
-  border: 1px solid rgba(148, 163, 184, 0.2);
+  padding: 9px 13px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
   border-radius: 8px;
+  background: rgba(11, 22, 38, 0.55);
   color: var(--cyan);
-  background: rgba(15, 23, 42, 0.72);
-  font-weight: 800;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 500;
+  transition: transform 0.16s var(--ease), border-color 0.16s;
 }
+.install-links a:hover { transform: translateY(-2px); border-color: var(--cyan); }
 
+/* ---------- workflow ---------- */
 .workflow {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-  margin-top: 30px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin: 30px 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: none;
 }
-
 .workflow-step {
-  padding: 22px;
+  padding: 24px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: var(--radius);
+  background: rgba(7, 17, 31, 0.66);
 }
-
 .step-number {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  margin-bottom: 24px;
+  display: grid;
+  place-items: center;
+  width: 34px; height: 34px;
+  margin-bottom: 22px;
   border: 1px solid rgba(163, 230, 53, 0.35);
-  border-radius: 8px;
-  color: var(--green);
-  font-weight: 900;
+  border-radius: 9px;
   background: rgba(163, 230, 53, 0.08);
+  color: var(--green);
+  font-family: var(--mono);
+  font-weight: 700;
 }
+.workflow-step h3 { margin: 0; font-family: var(--mono); font-size: 17px; }
+.workflow-step p { margin: 12px 0 0; color: var(--muted); line-height: 1.6; }
 
+/* ---------- feedback ---------- */
+.feedback-section { border-top: 1px solid rgba(148, 163, 184, 0.1); }
+.feedback-copy { margin-top: 20px; }
+.feedback-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 26px;
+}
+.feedback-list span {
+  padding: 9px 13px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 8px;
+  background: rgba(11, 22, 38, 0.6);
+  color: #cdd9ea;
+  font-size: 13.5px;
+}
+
+/* ---------- footer ---------- */
 .site-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 20px;
+  flex-wrap: wrap;
+  gap: 18px;
   max-width: var(--max);
   margin: 0 auto;
-  padding: 34px 24px 44px;
-  color: var(--muted);
+  padding: 40px 20px 56px;
+  position: relative;
+  z-index: 2;
 }
-
-.site-footer a {
-  color: var(--cyan);
-  font-weight: 800;
+.footer-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--mono);
+  font-weight: 700;
 }
-
-@media (max-width: 1040px) {
-  h1 {
-    font-size: 52px;
-  }
-
-  .hero {
-    padding-top: 42px;
-  }
-
-  .hero-preview {
-    position: relative;
-    right: auto;
-    bottom: auto;
-    width: 100%;
-    max-width: 760px;
-    margin-top: 38px;
-  }
-
-  .hero::after {
-    background: linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.7));
-  }
-
-  .section-grid,
-  .split-section,
-  .scope-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .feature-grid {
-    grid-template-columns: 1fr;
-  }
+.footer-note { margin: 0; color: var(--subtle); font-size: 13.5px; }
+.footer-links { display: flex; gap: 16px; }
+.footer-links a {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 13px;
+  transition: color 0.16s;
 }
+.footer-links a:hover { color: var(--cyan); }
 
-@media (max-width: 760px) {
-  .site-header {
-    position: relative;
-    align-items: flex-start;
-    flex-direction: column;
-    padding: 14px 18px;
-  }
-
-  .site-nav {
-    width: 100%;
-    overflow-x: auto;
-  }
-
-  .site-nav a {
-    flex: 0 0 auto;
-  }
+[id] { scroll-margin-top: 88px; }
 
+/* ---------- responsive ---------- */
+@media (max-width: 980px) {
   .hero {
-    min-height: 0;
-    padding: 34px 18px 38px;
-  }
-
-  .hero-logo {
-    width: 100%;
-    max-width: 330px;
-  }
-
-  h1 {
-    font-size: 40px;
-    line-height: 1.05;
-  }
-
-  .hero-lede {
-    font-size: 17px;
-  }
-
-  .hero-facts,
-  .command-band,
-  .install-grid,
-  .workflow {
     grid-template-columns: 1fr;
+    gap: 36px;
+    padding-top: 56px;
   }
-
-  .hero-facts {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 8px;
-  }
-
-  .hero-facts div {
-    padding: 10px;
-  }
-
-  .hero-facts dt {
-    font-size: 11px;
-  }
-
-  .hero-facts dd {
-    font-size: 15px;
-  }
-
-  .command-band,
-  .section {
-    padding-left: 18px;
-    padding-right: 18px;
-  }
-
-  .section {
-    padding-top: 64px;
-    padding-bottom: 64px;
-  }
-
-  .section-heading h2,
-  .section-copy h2 {
-    font-size: 32px;
-  }
-
-  .install-card-header,
-  .site-footer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
+  .features-section { grid-template-columns: 1fr; gap: 28px; }
+  .feature-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 720px) {
+  .site-header { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
+  .site-nav { overflow-x: auto; justify-content: flex-start; }
+  .site-nav a { flex: 0 0 auto; }
+  .hero { padding: 40px 16px 52px; }
+  .hero-facts { grid-template-columns: repeat(2, 1fr); }
+  .command-band { grid-template-columns: 1fr; gap: 0; }
+  .command-line:not(:first-child) { border-left: 1px solid var(--line); border-top: none; }
+  .section { padding: 64px 16px; }
+  .scope-grid,
+  .install-grid,
+  .workflow { grid-template-columns: 1fr; }
+  .compare-pane { font-size: 11.5px; padding: 18px; }
 }
 
-@media (max-width: 430px) {
-  .hero-actions {
-    flex-direction: column;
-  }
-
-  .button {
-    width: 100%;
-  }
-
-  h1 {
-    font-size: 34px;
-  }
+@media (max-width: 420px) {
+  .hero-actions { flex-direction: column; }
+  .button { width: 100%; justify-content: center; }
+  .hero-facts { grid-template-columns: 1fr 1fr; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  * , *::before, *::after {
     scroll-behavior: auto !important;
+    animation: none !important;
     transition: none !important;
   }
+  .reveal { opacity: 1; transform: none; }
+  .cursor { opacity: 1; }
 }

From 9987099f93f2071633d758dbf873822ad6706820 Mon Sep 17 00:00:00 2001
From: Christian Dassy <18606875+inxbit@users.noreply.github.com>
Date: Sun, 31 May 2026 02:28:27 -0400
Subject: [PATCH 2/3] Use documentation-range IPs in website terminal samples

The privacy scan rejects IPv4 addresses outside RFC 5737 ranges. The
arista and linux-unix demo samples used 10.x addresses; switch them to
198.51.100.0/24 and 203.0.113.0/24.
---
 docs/script.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index dd8bc2c..9124f08 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -134,11 +134,11 @@
       title: 'ptty ssh spine1.example.net',
       lines: [
         { p: 'spine1>', c: 'show ip interface brief' },
-        'Interface       IP Address       Status     Protocol   MTU',
-        'Ethernet1       10.0.0.1/31      up         up         1500',
-        'Ethernet2       10.0.0.3/31      down       down       1500',
-        'Ethernet3       10.0.1.1/31      up         up         9214',
-        'Management1     192.0.2.50/24    up         up         1500',
+        'Interface       IP Address         Status     Protocol   MTU',
+        'Ethernet1       198.51.100.0/31    up         up         1500',
+        'Ethernet2       198.51.100.2/31    down       down       1500',
+        'Ethernet3       198.51.100.4/31    up         up         9214',
+        'Management1     192.0.2.50/24      up         up         1500',
       ],
     },
     'linux-unix': {
@@ -148,7 +148,7 @@
         'lo               UNKNOWN        127.0.0.1/8',
         'eth0             UP             192.0.2.15/24',
         'eth1             DOWN',
-        'wg0              UNKNOWN        10.8.0.2/24',
+        'wg0              UNKNOWN        203.0.113.8/24',
         { p: 'ops@workstation%', c: ' systemctl is-active nginx' },
         'active',
       ],

From 7cb7d1e0a486e6ac4215299b245c4c23f1d1b913 Mon Sep 17 00:00:00 2001
From: Christian Dassy <18606875+inxbit@users.noreply.github.com>
Date: Sun, 31 May 2026 02:34:58 -0400
Subject: [PATCH 3/3] Align static-site test with redesigned page

The redesign replaced the static terminal-demo SVG with JS-driven demos
(live terminal, compare slider, profile tabs) and restyled the feedback
eyebrow. Update site_pages.test.mjs to assert the interactive demo hooks
and match the new copy; revert the page <title> to a hyphen to keep the
existing SEO contract.
---
 docs/index.html           | 2 +-
 tests/site_pages.test.mjs | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 51dfec7..3af7389 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>PrismTTY — Terminal Output Highlighting</title>
+    <title>PrismTTY - Terminal Output Highlighting</title>
     <meta
       name="description"
       content="PrismTTY makes dense SSH, network-device, and Unix/Linux terminal output easier to scan in real time."
diff --git a/tests/site_pages.test.mjs b/tests/site_pages.test.mjs
index 2b85c35..b33bf73 100644
--- a/tests/site_pages.test.mjs
+++ b/tests/site_pages.test.mjs
@@ -20,12 +20,15 @@ test('GitHub Pages site has the expected static contract', () => {
   assert.match(html, /<title>PrismTTY - Terminal Output Highlighting<\/title>/);
   assert.match(html, /Readable network output, live in your terminal\./);
   assert.match(html, /Live terminal highlighting, not device management\./);
-  assert.match(html, /Feedback wanted/);
+  assert.match(html, /feedback wanted/i);
   assert.match(html, /href="https:\/\/github\.com\/inxbit\/prismtty"/);
   assert.match(html, /href="https:\/\/crates\.io\/crates\/prismtty"/);
   assert.match(html, /https:\/\/prismtty\.com\/assets\/prismtty-social-card\.png/);
-  assert.match(html, /href="assets\/prismtty-terminal-demo\.svg"/);
-  assert.match(html, /src="assets\/prismtty-terminal-demo\.svg"/);
+  // The hero now demonstrates highlighting with JS-driven demos (live terminal,
+  // raw/highlighted compare slider, profile tabs) instead of a static SVG image.
+  assert.match(html, /data-terminal\b/);
+  assert.match(html, /data-compare\b/);
+  assert.match(html, /data-profiles\b/);
   assert.doesNotMatch(html, /show-tech\.txt \| prismtty/);
 
   const css = read('docs/styles.css');