From c3009b4a1bdc383b36682ff475ad3287db4a4f50 Mon Sep 17 00:00:00 2001 From: Raven Scott Date: Thu, 16 Jul 2026 16:06:42 -0400 Subject: [PATCH] Updates --- README.md | 4 +- docs/api.html | 8 +- docs/faq.html | 12 +- docs/index.html | 2 +- docs/operator.html | 6 +- docs/quickstart.html | 6 +- docs/security.html | 18 +- download.html | 4 +- index.html | 571 +++++++++++++++-- learn/index.html | 2 +- server.mjs | 6 +- src/js/home-demos.js | 869 +++++++++++++++++++++++++ src/js/site.js | 2 + src/styles/app-chrome.css | 1275 +++++++++++++++++++++++++++++++++++++ src/styles/docs.css | 12 +- src/styles/global.css | 16 +- src/styles/home.css | 1006 ++++++++++++++++++++++++++++- 17 files changed, 3719 insertions(+), 100 deletions(-) create mode 100644 src/js/home-demos.js create mode 100644 src/styles/app-chrome.css diff --git a/README.md b/README.md index 3087006..c15a31b 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Official marketing site and documentation for [peardock](https://peardock.boats) ([source](https://git.ssh.surf/snxraven/peardock)). Code-level architecture docs live in the **peardock** repo under `docs/`. -This site is the public operator mirror (HTML) plus marketing pages — keep claims in sync when the product changes. +This site is the public operator mirror (HTML) plus marketing pages. Keep claims in sync when the product changes. ## Install story (keep in sync with main repo) @@ -45,7 +45,7 @@ When peardock ships UI or RPC surface changes, update: Especially check claims for: -- **Registry** view (vault + browser) — not “Access → Registry vault” +- **Registry** view (vault + browser). Not under “Access → Registry vault”. - **Settings → Peers** vs **Access** (ACL/invites) - Image update indicators / `checkImageUpdates` - Job tray + hybrid pull progress diff --git a/docs/api.html b/docs/api.html index ebafa39..b1bbbb1 100644 --- a/docs/api.html +++ b/docs/api.html @@ -120,7 +120,7 @@

Handshake

On connect, the client calls handshake. The server returns:

diff --git a/docs/faq.html b/docs/faq.html index f6d8bee..5a9a33c 100644 --- a/docs/faq.html +++ b/docs/faq.html @@ -124,8 +124,8 @@

What do I share with clients?

Never share SERVER_SEED with operators.

@@ -149,8 +149,8 @@ sudo journalctl -u peardock -n 80 --no-pager | grep -i 'public key'

As admin (public key + SERVER_SEED in Add peer), open Access → Create invite and copy the full string starting with pd1.. The operator pastes that entire string in Add peer. - Public key and HMAC capability are embedded — no Autopass/RocksDB and no seed sharing. - Invites can be persistent (default) or limited by TTL / max uses. Revoke peers from Access when devices are lost. + Public key and HMAC capability are embedded. No Autopass or RocksDB. No seed sharing. + Invites can be persistent (default) or limited by TTL or max uses. Revoke peers from Access when devices are lost. Deep dive: Security model.

@@ -210,7 +210,7 @@ npm run sign:macos -- out/peardock-darwin-arm64/peardock.app

Where did Peers go? Where are saved hosts?

Settings → Peers manages client-side saved hosts (public keys, aliases). - Server-side ACL — invites, revoke, roles — stays under Access. + Server-side ACL for invites, revoke, and roles stays under Access.

What does the Updates column on containers mean?

@@ -226,7 +226,7 @@ npm run sign:macos -- out/peardock-darwin-arm64/peardock.app

Pull and push stream layer events over push:pullProgress / push:pushProgress. The desktop job tray aggregates them into hybrid overall - progress, phase labels, and a fixed-height layer track — not a single misleading percentage. + progress, phase labels, and a fixed-height layer track. Not a single misleading percentage.

How do I update?

diff --git a/docs/index.html b/docs/index.html index 9caee6e..6b5b6ac 100644 --- a/docs/index.html +++ b/docs/index.html @@ -171,7 +171,7 @@ The server listens on a HyperDHT keypair. Clients connect with its public key. Transport is Noise-encrypted. The desktop UI is an Electron (or Pear) app with a full Engine surface: containers, registry browser, templates, stacks, Swarm, job tray, - and Holesail tunnels — without SaaS tenancy or remote-access headaches. + and Holesail tunnels. No SaaS tenancy. No remote access headaches.

diff --git a/docs/operator.html b/docs/operator.html index 4a53203..7196be6 100644 --- a/docs/operator.html +++ b/docs/operator.html @@ -127,7 +127,7 @@ sudo journalctl -u peardock -f SERVER_PUBLIC_KEYSafe to shareAlone → viewer - SERVER_SEEDAdmins only — never share with operatorsWith public key → admin + SERVER_SEEDAdmins only. Never share with operators.With public key → admin
@@ -222,7 +222,7 @@ PEARDOCK_BROWSE_ROOTS=/var/lib/docker/volumes PEARDOCK_AUDIT=1
  1. As admin: Access → Create invite → copy the full pd1.… invite string (never truncate).
    2. -
  2. Operator pastes the full pd1. invite in Add peer — the client decodes public key + HMAC capability and connects with the granted role (no seed, no RocksDB/Autopass).
    3. +
  3. Operator pastes the full pd1. invite in Add peer. The client decodes public key and HMAC capability, then connects with the granted role (no seed, no RocksDB or Autopass).
  4. Revoke lost devices from Access. Delete spent invites before minting a replacement if needed.
@@ -245,7 +245,7 @@ PEARDOCK_AUDIT=1

Registry vault and browser

Credentials are encrypted at rest (AES-GCM; KDF is Bare-safe). - The desktop app has a top-level Registry view — not under Access. + The desktop app has a top-level Registry view. It is not under Access.

diff --git a/docs/security.html b/docs/security.html index fcbcf5a..6bf4832 100644 --- a/docs/security.html +++ b/docs/security.html @@ -130,7 +130,7 @@

PearDock is a self-hosted P2P Docker control plane. There is no central login. Anyone who knows the server public key can attempt a HyperDHT dial. - That alone must not mean full Docker control — so the default role is viewer (read-only). + That alone must not mean full Docker control. The default role is viewer (read-only). 

[Desktop client] --Noise/HyperDHT--> [peardock-server] --unix socket--> [dockerd]
                                           |
@@ -147,7 +147,7 @@
           
             Public key only (SERVER_PUBLIC_KEY)Viewer (read-only)
             Public key + SERVER_SEEDAdmin (seed never sent on the wire)
-            Full pd1.… inviteRole in the invite — no seed sharing
+            Full pd1.… inviteRole in the invite. No seed sharing.
           
         
       
@@ -228,8 +228,8 @@
       
4. Handshake elevation

       
Baseline role (usually viewer) is resolved from env / admin keys / peer policy. Then handshake may elevate:

       
    
-        
  1. adminProof — seed ownership → admin
    2. 
-        
  2. capability — HMAC grant from a pd1. invite (or direct token)
    3. 
+        
  3. adminProof: seed ownership maps to admin
    4. 
+        
  4. capability: HMAC grant from a pd1. invite (or direct token)
    5. 
         
  5. Otherwise stay at baseline
    6. 
       

       

@@ -247,7 +247,7 @@
       

         Optional: PEARDOCK_ADMIN_KEYS (fixed admin peer ids),
         PEARDOCK_DEFAULT_ROLE, PEARDOCK_PEER_ALLOWLIST=1,
-        PEARDOCK_INSECURE_OPEN_ADMIN=1 (dev only — everyone is admin).
+        PEARDOCK_INSECURE_OPEN_ADMIN=1 (dev only; everyone is admin).
       

 
       
5. Admin seed proof

@@ -305,10 +305,10 @@
       
7. Registration, reconnect, revoke

       
State lives in peardock-peers.json (override with PEARDOCK_PEER_POLICY):

       
    
-        
  • peers — registered elevated client identities for reconnect
    • 
-        
  • capabilities — active grants (by jti)
    • 
-        
  • spentJtis — deleted or exhausted grants
    • 
-        
  • revoked — hard ban list of peer ids
    • 
+        
  • peers: registered elevated client identities for reconnect
    • 
+        
  • capabilities: active grants (by jti)
    • 
+        
  • spentJtis: deleted or exhausted grants
    • 
+        
  • revoked: hard ban list of peer ids
    • 
       

       

         After a successful elevate, reconnect can use the registered role even if that invite jti is later deleted.
diff --git a/download.html b/download.html
index c3f9a1c..5a669c1 100644
--- a/download.html
+++ b/download.html
@@ -147,12 +147,12 @@ curl -fsSL https://install.peardock.boats | bash -s -- --both --yes
  • Installs binary to /opt/peardock/peardock-server
  • Creates system user peardock and adds it to the docker group (for /var/run/docker.sock)
  • Writes /etc/systemd/system/peardock.service and optionally enables it
    • -
  • Creates /opt/peardock/.env (mode 600) — check this file after first start for your keys
    • +
  • Creates /opt/peardock/.env (mode 600). Check this file after first start for your keys.
    • sudo systemctl status peardock
 sudo journalctl -u peardock -f
 
-# After first start — keys are in .env (preferred)
+# After first start, keys are in .env (preferred)
 sudo grep -E '^(SERVER_PUBLIC_KEY|SERVER_SEED)=' /opt/peardock/.env
 
 # SERVER_PUBLIC_KEY → share for viewer / paste in client
diff --git a/index.html b/index.html
index b5589f9..20f6201 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
 
   
   
-  PearDock · Decentralized Docker management
-  
+  PearDock · P2P Docker ops without open ports
+  
   
   
   
@@ -27,8 +27,8 @@
   
   
   
-  
-  
+  
+  
   
   
   
@@ -38,8 +38,8 @@
 
   
   
-  
-  
+  
+  
   
   
 
@@ -136,8 +136,10 @@
   
   
   
+  
   
   
+  
 
 
   
@@ -152,47 +154,118 @@
         
    
           
    
             
-            v2 · HyperDHT · AGPL-3.0
+            v2 · Live job tray · AGPL-3.0
           
    
           
    
-            Docker ops without
    
-            opening ports
+            Remote Docker that
    
+            never needs a port
           
    
           
    
-            Peer-to-peer Docker management on the Holepunch stack.
-            Share a public key, then manage containers, stacks, and tunnels over encrypted P2P.
-            Never open ports, expose Docker to the internet, or worry about remote access again.
-            No SaaS. No VPN. No inbound firewall rules.
+            PearDock is a peer-to-peer ops console for Docker on HyperDHT.
+            Connect with a public key, then run containers, stacks, terminals, and tunnels over Noise-encrypted RPC.

    
+            No open ports. No VPN. No SaaS middleman.
           
    
           
    
             Install & download
-            How it works
+            See live demos
             Quick start
           
    
           
    
             
    
-              HyperDHT
-              Transport
+              Multi-peer fleet
+              Many hosts, one client
             
    
             
    
-              protomux-rpc
-              RPC protocol
-            
    
-            
    
-              6 platforms
-              Server + client
+              Job tray
+              Pull · deploy · prune
             
    
             
    
               Holesail
-              Port tunnels
+              Service tunnels
+            
    
+            
    
+              6 platforms
+              Server + desktop
+            
    
+          
    
+          
    
+            
    
+              Identity is a keypair
+              Share a 64-hex public key. Nothing listens on a public Docker port.
+            
    
+            
    
+              Ops that feel local
+              Dashboard, terminals, image updates, stacks, and registry vault in one dark UI.
+            
    
+            
    
+              Progress you can trust
+              Multi-step job tray with hybrid layer pull and push. Not a spinner and a prayer.
             
    
           
    
         
    
 
-        
    
+        
    
           
-          
    
-            PearDock desktop client
+          
    
+            
    
+              
+            
    
+            
    
+              
    
+                Job tray
+                Activity
+              
    
+              
    Pull nginx:latest…
    
+              
    
+                
    
+              
    
+            
    
           
    
           
      
             
    • 
@@ -225,6 +298,390 @@
       
    
     
    
 
+    
+    
    
+      
    
+        
    
+          
    Product tour
    
+          
    The real console, animated
    
+        
    
+
+        
    
+          
+          
+          
+          
+        
    
+
+        
+        
    
+          
    
+            
    
+              
    
+                
+                
    
+                  
+                  peardock P2P Docker
+                
    
+                
    PearDock
    
+                
     Laptop · 14 ms · ADMIN
    
+              
    
+              
    
+                
+                
    
+                  
    
+                    
    
+                      
    
+                        
    Overview
    
+                        
    Dashboard
    
+                        
    Live engine health, storage, and activity on the active peer
    
+                      
    
+                      
    
+                        
+                        Deploy
+                      
    
+                    
    
+                    
    
+                      
    
+                        
    
+                        
    Running5
    
+                        
    
+                      
    
+                      
    
+                        
    
+                        
    Stopped0
    
+                        
    
+                      
    
+                      
    
+                        
    
+                        
    Images10
    
+                        
    
+                      
    
+                      
    
+                        
    
+                        
    Networks3
    
+                        
    
+                      
    
+                    
    
+                    
    
+                      
    
+                        
    Engine
    
+                        
    
+                          
    Version27.0.2
    
+                          
    Containers5
    
+                          
    Running5
    
+                          
    Images10
    
+                          
    Storage driveroverlay2
    
+                        
    
+                      
    
+                      
    
+                        
    Host
    
+                        
    
+                          
    Memory10.74 GB
    
+                          
    CPU cores8
    
+                          
    Operating systemUbuntu 26.04 LTS
    
+                          
    Architecturex86_64
    
+                          
    Kernel7.0.0-27-generic
    
+                        
    
+                      
    
+                      
    
+                        
    Disk
    
+                        
    
+                          
    Image layers3.57 GB
    
+                          
    Images (10)3.57 GB
    
+                          
    Containers (5)50.85 MB
    
+                          
    Volumes (16)30.95 MB
    
+                          
    Build cache0 B
    
+                        
    
+                      
    
+                      
    
+                        
    Live events
    
+                        
    
+                          
    04:22:09startcontainer vpn
    
+                          
    04:22:09exechealthcheck vpn
    
+                          
    04:22:04diecontainer vpn
    
+                          
    04:21:59createcontainer api
    
+                        
    
+                      
    
+                    
    
+                    
    
+                      
     Quick actions
    
+                       Containers
+                       Images
+                       Prune images
+                       System prune
+                    
    
+                  
    
+                
    
+              
    
+            
    
+          
    
+          
    
+            
    Dashboard that stays live
    
+            
    KPI strip, Engine, Host, Disk, live Docker events, and quick actions. This is the same shell operators use after connect. Counts and events update continuously in this demo.
    
+            
      
+              
    • Connection health: latency, Docker version, role
      • 
+              
    • Disk bars from systemDf style metrics
      • 
+              
    • Event timeline streaming from the active peer
      • 
+            
    
+          
    
+        
    
+
+        
+        
+
+        
+        
+
+        
+        
+      
    
+    
    
+
     
     
    
       
    
@@ -232,9 +689,9 @@
           
    Features
    
           
    Full Engine coverage.
    Zero ports to open.
    
           
    
-            Containers, images, volumes, networks, stacks, Swarm, terminals, logs, GitOps,
-            registry browser + vault, image update checks, Portainer-style templates,
-            roles, and Holesail tunnels in a desktop console built for real ops.
+            Containers, images, volumes, networks, stacks, Swarm, terminals, logs, and GitOps.
+            Registry browser and vault. Image update checks. Portainer-style templates. Roles and Holesail tunnels.
+            All in a desktop console built for real ops.
             Remote Docker without port forwards, public dockerd, or a permanent VPN.
           
    
         
    
@@ -243,17 +700,17 @@
           
    
             
    ⬡
    
             
    No ports. No VPN.
    
-            
    Server identity is a HyperDHT keypair. Share the public key; peers holepunch. Nothing phones home, nothing listens on a public Docker port.
    
+            
    Server identity is a HyperDHT keypair. Share the public key. Peers holepunch. Nothing phones home. Nothing listens on a public Docker port.
    
           
    
           
    
             
    🔐
    
             
    Noise encryption
    
-            
    Every control connection is end-to-end encrypted. Roles (viewer, operator, admin), allowlists, pd1 invites, and audit logging help multi-operator fleets stay safe.
    
+            
    Every control connection is end-to-end encrypted. Roles cover viewer, operator, and admin. Allowlists, pd1 invites, and audit logging help multi-operator fleets stay safe.
    
           
    
           
    
             
    🚢
    
             
    Docker ops console
    
-            
    Deploy templates, add containers, recreate, prune, stack env files, image update indicators, secrets/configs, and schedules. Built for real operators.
    
+            
    Deploy templates. Add containers. Recreate and prune. Stack env files, image update indicators, secrets, configs, and schedules. Built for real operators.
    
           
    
           
    
             
    ⇄
    
@@ -263,7 +720,7 @@
           
    
             
    🖥️
    
             
    Desktop client
    
-            
    Electron (or Pear) with multi-peer fleet, multi-step job tray and hybrid pull progress, live stats, terminals, and OTA-ready packaging.
    
+            
    Electron or Pear. Multi-peer fleet. Multi-step job tray with hybrid pull progress. Live stats, terminals, and OTA-ready packaging.
    
           
    
           
    
             
    📦
    
@@ -281,18 +738,37 @@
       
    
     
 
-    
+    
     
    
       
    
         
    
-          
    Architecture
    
-          
    Two planes. Still zero open ports.
    
+          
    How it works
    
+          
    Keys, peers, Docker.
    Still zero open ports.
    
           
    
             Control traffic uses HyperDHT and protomux-rpc. Service access uses Holesail.
-            Both are peer-to-peer. No inbound firewall rules. No public Docker API.
+            Both are peer-to-peer.
+            No inbound firewall rules. No public Docker API.
           
    
         
    
 
+        
    
+          
    
+            
    1
    
+            
    Run the server
    
+            
    On a host with Docker, install via one-liner or binary. Identity is a HyperDHT keypair printed at start: SERVER_PUBLIC_KEY and seed.
    
+          
    
+          
    
+            
    2
    
+            
    Launch the client
    
+            
    Electron desktop (or Pear). Paste a public key, key + seed, or a pd1. invite. Multi-peer fleet lives in the sidebar.
    
+          
    
+          
    
+            
    3
    
+            
    Operate
    
+            
    Deploy, terminal, logs, stacks, registry, tunnels. Long work streams through the job tray with real progress.
    
+          
    
+        
    
+
         
    
           
    
             
    ⌘
    
@@ -322,7 +798,7 @@
         
    
           
    
             
    Control plane
    
-            
    Handshake, containers (including image update checks), deploy stacks and templates, logs, stats pushes, terminal streams, registry vault + remote browser, and peer policy. Protocol version is negotiated on connect.
    
+            
    Handshake, containers (including image update checks), deploy stacks and templates, logs, and stats pushes. Terminal streams, registry vault, remote browser, and peer policy. Protocol version is negotiated on connect.
    
           
    
           
    
             
    Data / tunnels
    
@@ -343,8 +819,8 @@
         
    
           
    
             
    Fleet
    
-            
    Multi-peer. Multi-host. One client.
    
-            
    Connect to many servers at once. Tag environments (prod / staging / lab). Switch contexts without losing job history or health signals. Manage saved hosts under Settings → Peers; server ACL under Access.
    
+            
    Multi-peer. Multi-host.
    One client.
    
+            
    Connect to many servers at once. Tag environments (prod / staging / lab). Switch contexts without losing job history or health signals. Manage saved hosts under Settings → Peers. Server ACL lives under Access.
    
             
      
               
    • Peer disk cache under ~/.config/peardock
      • 
               
    • Connection health badge: latency, Docker status, role
      • 
@@ -361,7 +837,7 @@
           
      
             
      Operations
      
             
      Deploy like you mean it.
      
-            
      Portainer-style templates and blank Add container. Compose stacks with env files and overrides. Image update indicators. System prune. Volume file browser. Multi-step job tray with hybrid pull progress.
      
+            
      Portainer-style templates and blank Add container. Compose stacks with env files and overrides. Image update indicators, system prune, and volume file browser. Multi-step job tray with hybrid pull progress. See the demo.
      
             
        
               
      • Container and stack templates; always-pull on create / duplicate
        • 
               
      • GitOps-friendly stack deploy; remove cleans project networks
        • 
@@ -377,16 +853,16 @@
         
        
           
        
             
        Tunnels
        
-            
        Share a service, never open a port.
        
+            
        Share a service.
        Never open a port.
        
             
        
               Create a Holesail tunnel from a container or host port. Copy the hs:// URL.
               Remote peers bind locally. You never punch a firewall hole or expose Docker to the internet.
             
        
             
          
               
        • No inbound port forwards. P2P hole punching instead.
          • 
-              
        • Secure mode by default (capability ≠ raw listen key)
          • 
-              
        • SSRF guard: loopback / allowlisted hosts only
          • 
-              
        • Max concurrent tunnels · audited create/close
          • 
+              
        • Secure mode by default (capability is not a raw listen key)
          • 
+              
        • SSRF guard: loopback and allowlisted hosts only
          • 
+              
        • Max concurrent tunnels. Audited create and close.
          • 
             
        
             Holesail guide →
           
        
@@ -432,8 +908,8 @@
           
        Quick start
        
           
        Install in one line. Connect in three steps.
        
           
        
-            No public IP gymnastics, no open ports, no VPN checklist.
-            Interactive installer pulls rolling binaries, wires Linux systemd + docker group for the server, or installs a desktop client.
+            No public IP gymnastics. No open ports. No VPN checklist.
+            The interactive installer pulls rolling binaries. It wires Linux systemd and the docker group for the server, or installs a desktop client.
           
        
         
        
         
        
@@ -488,5 +964,6 @@ curl -fsSL https://install.peardock.boats | bash -s -- --client --yes
        
 
   
+  
 
 
diff --git a/learn/index.html b/learn/index.html
index 50f0e14..76df0ce 100644
--- a/learn/index.html
+++ b/learn/index.html
@@ -540,7 +540,7 @@ flowchart TB
         
         
        
           Public key vs SERVER_SEED
-          
        Both are written to /opt/peardock/.env on first start. The public key is what clients dial (viewer if used alone). The seed is secret server identity — paste it with the public key for admin only. Sharing the seed is equivalent to handing over admin.
        
+          
        Both are written to /opt/peardock/.env on first start. The public key is what clients dial (viewer if used alone). The seed is secret server identity. Paste it with the public key for admin only. Sharing the seed is equivalent to handing over admin.
        
         
        
         
        
           pd1. invite
diff --git a/server.mjs b/server.mjs
index 0169767..a2c7304 100644
--- a/server.mjs
+++ b/server.mjs
@@ -255,7 +255,7 @@ function sitemapChangefreq(urlPath) {
 }
 
 /**
- * Build a Google Search–compatible sitemap 0.9 document from dist HTML pages.
+ * Build a Google Search-compatible sitemap 0.9 document from dist HTML pages.
  * Strict sitemaps.org protocol only (loc, lastmod, changefreq, priority).
  * @see https://www.sitemaps.org/protocol.html
  * @see https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap
@@ -275,7 +275,7 @@ function buildSitemapXml() {
     const existing = byPath.get(urlPath)
     if (existing && existing.lastmod >= lastmod) continue
 
-    // Absolute HTTPS loc only — required by the protocol
+    // Absolute HTTPS loc only  ·  required by the protocol
     const loc = SITE_ORIGIN + (urlPath === '/' ? '/' : urlPath)
     byPath.set(urlPath, {
       loc,
@@ -291,7 +291,7 @@ function buildSitemapXml() {
     return a.loc.localeCompare(b.loc)
   })
 
-  // One declaration + default namespace only (no xhtml extras — single-language site)
+  // One declaration + default namespace only (no xhtml extras  ·  single-language site)
   const parts = [
     '',
     '',
diff --git a/src/js/home-demos.js b/src/js/home-demos.js
new file mode 100644
index 0000000..8a7d43f
--- /dev/null
+++ b/src/js/home-demos.js
@@ -0,0 +1,869 @@
+/**
+ * High-fidelity PearDock product demos.
+ * DOM + class names match the desktop client (job tray, pull layers, dashboard).
+ */
+
+const reduced = () =>
+  typeof window !== 'undefined' &&
+  window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
+
+function $(sel, root = document) {
+  return root.querySelector(sel)
+}
+function $$(sel, root = document) {
+  return [...root.querySelectorAll(sel)]
+}
+
+/* ── Tabs ── */
+function initDemoTabs() {
+  const root = $('[data-product-demo]')
+  if (!root) return
+
+  const tabs = $$('[data-demo-tab]', root)
+  const panels = $$('[data-demo-panel]', root)
+  const timers = { jobs: null, dashboard: null, connect: null, containers: null }
+
+  const stopAll = () => {
+    Object.keys(timers).forEach((k) => {
+      if (timers[k]) {
+        clearTimeout(timers[k])
+        clearInterval(timers[k])
+        timers[k] = null
+      }
+    })
+  }
+
+  const activate = (name) => {
+    tabs.forEach((t) => {
+      const on = t.getAttribute('data-demo-tab') === name
+      t.classList.toggle('is-active', on)
+      t.setAttribute('aria-selected', on ? 'true' : 'false')
+    })
+    panels.forEach((p) => {
+      const on = p.getAttribute('data-demo-panel') === name
+      p.classList.toggle('is-active', on)
+      p.hidden = !on
+    })
+    root.setAttribute('data-active-demo', name)
+    stopAll()
+    if (name === 'dashboard') timers.dashboard = startDashboardDemo(root)
+    if (name === 'jobs') timers.jobs = startJobPullDemo(root)
+    if (name === 'connect') timers.connect = startConnectDemo(root)
+    if (name === 'containers') timers.containers = startContainersDemo(root)
+  }
+
+  tabs.forEach((tab) => {
+    tab.addEventListener('click', () => {
+      root.dataset.userPicked = '1'
+      activate(tab.getAttribute('data-demo-tab'))
+    })
+  })
+
+  let cycle = null
+  const order = ['dashboard', 'jobs', 'containers', 'connect']
+  let idx = 0
+  const startCycle = () => {
+    if (reduced() || cycle) return
+    cycle = setInterval(() => {
+      if (root.dataset.userPicked === '1') return
+      if (root.matches(':hover') || root.matches(':focus-within')) return
+      idx = (idx + 1) % order.length
+      activate(order[idx])
+    }, 9000)
+  }
+  const stopCycle = () => {
+    if (cycle) {
+      clearInterval(cycle)
+      cycle = null
+    }
+  }
+
+  if ('IntersectionObserver' in window) {
+    new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) startCycle()
+          else {
+            stopCycle()
+            stopAll()
+          }
+        }
+      },
+      { threshold: 0.2 }
+    ).observe(root)
+  } else startCycle()
+
+  activate('dashboard')
+}
+
+/* ── Dashboard: live KPI ticks, disk bars, event stream ── */
+function startDashboardDemo(root) {
+  const stage = $('[data-demo-panel="dashboard"]', root)
+  if (!stage) return null
+
+  const running = $('[data-kpi="running"]', stage)
+  const images = $('[data-kpi="images"]', stage)
+  const networks = $('[data-kpi="networks"]', stage)
+  const events = $('[data-dash-events]', stage)
+  const kpis = $$('.dash-kpi', stage)
+
+  const eventPool = [
+    { action: 'start', target: 'container vpn' },
+    { action: 'exec', target: 'healthcheck vpn' },
+    { action: 'die', target: 'container vpn' },
+    { action: 'create', target: 'container api' },
+    { action: 'pull', target: 'image redis:7' },
+    { action: 'connect', target: 'network bridge' },
+    { action: 'mount', target: 'volume data' },
+    { action: 'restart', target: 'container httpd' },
+  ]
+
+  let eIdx = 0
+  let img = 10
+  let run = 5
+
+  const tick = () => {
+    // subtle KPI pulse
+    const kpi = kpis[Math.floor(Math.random() * kpis.length)]
+    if (kpi) {
+      kpi.classList.add('is-tick')
+      setTimeout(() => kpi.classList.remove('is-tick'), 280)
+    }
+
+    if (Math.random() > 0.55 && images) {
+      img = 10 + Math.floor(Math.random() * 3)
+      images.textContent = String(img)
+    }
+    if (Math.random() > 0.7 && running) {
+      run = 4 + Math.floor(Math.random() * 3)
+      running.textContent = String(run)
+    }
+    if (networks && Math.random() > 0.85) {
+      networks.textContent = String(3 + Math.floor(Math.random() * 2))
+    }
+
+    // disk bar micro-jitter
+    $$('[data-disk-bar]', stage).forEach((bar) => {
+      const base = Number(bar.dataset.base || 60)
+      const w = Math.max(8, Math.min(96, base + (Math.random() * 6 - 3)))
+      bar.style.width = `${w}%`
+    })
+
+    if (events) {
+      eIdx = (eIdx + 1) % eventPool.length
+      const ev = eventPool[eIdx]
+      const now = new Date()
+      const t = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
+      const row = document.createElement('div')
+      row.className = 'event-row'
+      row.innerHTML = `${t}${ev.action}${ev.target}`
+      events.prepend(row)
+      // Keep the card short: only a few event rows visible
+      while (events.children.length > 4) events.lastElementChild?.remove()
+    }
+  }
+
+  tick()
+  return setInterval(tick, reduced() ? 2000 : 1400)
+}
+
+/* ── Job tray: parallel hybrid pull (matches real Docker layer concurrency) ── */
+const LAYER_SLOTS = 4
+const MAX_CONCURRENT = 3
+
+function startJobPullDemo(root) {
+  const panel = $('[data-job-tray-demo]', root)
+  if (!panel) return null
+
+  const catalog = [
+    { id: 'sha256:a1b2c3d4e5f6789012345678', shortId: 'a1b2c3d4', size: 12.4 },
+    { id: 'sha256:c3d4e5f67890123456789012', shortId: 'c3d4e5f6', size: 34.1 },
+    { id: 'sha256:11223344556677889900aabb', shortId: '11223344', size: 8.7 },
+    { id: 'sha256:77889900aabbccddeeff0011', shortId: '77889900', size: 52.0 },
+    { id: 'sha256:bbccddeeff00112233445566', shortId: 'bbccddee', size: 3.2 },
+    { id: 'sha256:ffeeddccbbaa998877665544', shortId: 'ffeeddcc', size: 19.6 },
+  ]
+
+  const frames = simulatePull(catalog)
+  let i = 0
+  let lastLog = ''
+
+  const paint = (frame) => {
+    panel.className = `job-panel job-panel--${frame.status}`
+
+    const badge = $('.job-status-badge', panel)
+    if (badge) {
+      badge.className = `badge bg-${frame.status === 'success' ? 'success' : 'primary'} job-status-badge`
+      badge.textContent = frame.status === 'success' ? 'success' : 'running'
+    }
+    const chip = $('.job-steps-chip', panel)
+    if (chip) chip.textContent = frame.chip
+    const sub = $('.job-panel-subtitle', panel)
+    if (sub) {
+      sub.textContent = frame.subtitle
+      sub.hidden = !frame.subtitle
+    }
+    const hint = $('.job-auto-dismiss-hint', panel)
+    if (hint) hint.hidden = frame.status !== 'success'
+
+    $$('[data-job-step]', panel).forEach((el, n) => {
+      const st = frame.steps[n] || 'pending'
+      el.className = `job-step job-step--${st}`
+      const ico = $('.job-step-icon', el)
+      if (ico) {
+        if (st === 'active') {
+          if (!ico.querySelector('.job-spinner')) {
+            ico.innerHTML =
+              ''
+          }
+        } else if (st === 'success') {
+          ico.innerHTML = ''
+        } else {
+          ico.innerHTML = ''
+        }
+      }
+      const detail = $('.job-step-detail', el)
+      if (detail) {
+        detail.textContent = frame.stepDetails?.[n] || ''
+        detail.hidden = !frame.stepDetails?.[n]
+      }
+    })
+
+    const pull = $('[data-pull-progress]', panel)
+    if (!pull) return
+    pull.className = `pull-progress pull-progress--${frame.phase}`
+    pull.dataset.pullPhase = frame.phase
+
+    const phaseEl = $('.pull-progress-phase', pull)
+    const metaEl = $('.pull-progress-meta', pull)
+    const pctEl = $('.pull-progress-pct', pull)
+    const fill = $('.pull-progress-bar-fill', pull)
+    const waiting = $('.pull-progress-waiting', pull)
+    const activity = $('.pull-progress-activity', pull)
+
+    if (phaseEl) phaseEl.textContent = frame.phaseLabel
+    if (metaEl) metaEl.textContent = frame.summary
+    if (pctEl) pctEl.textContent = frame.pctText
+    if (fill) fill.style.width = `${frame.barWidth}%`
+    if (waiting) {
+      waiting.textContent = frame.waiting || '\u00a0'
+      waiting.classList.toggle('pull-progress-waiting--empty', !frame.waiting)
+    }
+    if (activity) activity.textContent = frame.activity
+
+    const track = $('.pull-progress-track', pull)
+    if (track && frame.pips) {
+      // ensure pip count matches layer catalog
+      if (track.children.length !== frame.pips.length) {
+        track.innerHTML = frame.pips
+          .map((p) => ``)
+          .join('')
+      } else {
+        ;[...track.children].forEach((el, idx) => {
+          const next = `pull-layer-pip pull-layer-pip--${frame.pips[idx]}`
+          if (el.className !== next) el.className = next
+        })
+      }
+    }
+
+    // Patch 4 fixed layer slots in place (smooth bar fills, no remount)
+    patchLayerSlots(pull, frame.activeLayers)
+
+    const log = $('.job-log', panel)
+    if (log && frame.logLine && frame.logLine !== lastLog) {
+      lastLog = frame.logLine
+      const line = document.createElement('div')
+      line.className = 'job-log-line job-log--info'
+      const ts = new Date().toLocaleTimeString()
+      line.innerHTML = `${ts}${frame.logLine}`
+      log.appendChild(line)
+      while (log.children.length > 14) log.firstElementChild?.remove()
+      log.scrollTop = log.scrollHeight
+    }
+  }
+
+  const step = () => {
+    const frame = frames[i]
+    paint(frame)
+    i = (i + 1) % frames.length
+    if (i === 0) {
+      lastLog = ''
+      const log = $('.job-log', panel)
+      if (log) log.innerHTML = ''
+    }
+    const delay =
+      frame.status === 'success' && i === 0
+        ? reduced()
+          ? 500
+          : 2600
+        : reduced()
+          ? 120
+          : frame.phase === 'downloading' || frame.phase === 'extracting'
+            ? 280
+            : 550
+    return setTimeout(step, delay)
+  }
+
+  const log = $('.job-log', panel)
+  if (log) log.innerHTML = ''
+  lastLog = ''
+
+  return step()
+}
+
+/**
+ * Update fixed layer rows without destroying bars (so width transitions animate).
+ * @param {HTMLElement} pull
+ * @param {(object|null)[]} slots length 4
+ */
+function patchLayerSlots(pull, slots) {
+  let layersEl = $('.pull-progress-layers', pull)
+  if (!layersEl) return
+
+  let rows = [...layersEl.querySelectorAll(':scope > .pull-layer')]
+  if (rows.length !== LAYER_SLOTS) {
+    layersEl.innerHTML = Array.from({ length: LAYER_SLOTS }, (_, s) =>
+      emptyLayerRow(s)
+    ).join('')
+    rows = [...layersEl.querySelectorAll(':scope > .pull-layer')]
+  }
+
+  for (let s = 0; s < LAYER_SLOTS; s++) {
+    const row = rows[s]
+    const L = slots[s] || null
+    if (!L) {
+      if (!row.classList.contains('pull-layer--empty')) {
+        row.className = 'pull-layer pull-layer--empty'
+        row.setAttribute('aria-hidden', 'true')
+        row.removeAttribute('data-layer-id')
+        row.innerHTML = emptyLayerInner()
+      }
+      continue
+    }
+
+    const sameId = row.getAttribute('data-layer-id') === L.id
+    const phaseClass = `pull-layer pull-layer--${L.phase}`
+    row.setAttribute('aria-hidden', 'false')
+    row.setAttribute('data-layer-id', L.id)
+    row.setAttribute('data-layer-slot', String(s))
+
+    if (!sameId || row.classList.contains('pull-layer--empty')) {
+      row.className = phaseClass
+      row.innerHTML = `
+        ${escapeHtml(L.shortId)}
+        
        
+        ${escapeHtml(L.meta)}`
+    } else {
+      if (row.className !== phaseClass) row.className = phaseClass
+      const idEl = $('.pull-layer-id', row)
+      const metaEl = $('.pull-layer-meta', row)
+      const barFill = $('.pull-layer-bar-fill', row)
+      if (idEl && idEl.textContent !== L.shortId) {
+        idEl.textContent = L.shortId
+        idEl.title = L.id
+      }
+      if (metaEl && metaEl.textContent !== L.meta) metaEl.textContent = L.meta
+      if (barFill) {
+        // force reflow-friendly width update so CSS transition runs
+        const w = `${L.fill}%`
+        if (barFill.style.width !== w) barFill.style.width = w
+      }
+    }
+  }
+}
+
+function emptyLayerRow(slot) {
+  return ``
+}
+function emptyLayerInner() {
+  return `…
        `
+}
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(//g, '>')
+}
+function escapeAttr(s) {
+  return escapeHtml(s).replace(/"/g, '"')
+}
+
+/**
+ * Tick-based pull simulator: up to MAX_CONCURRENT layers download in parallel,
+ * each bar fills independently; finished layers leave the slot for the next waiter.
+ * @param {{id:string,shortId:string,size:number}[]} catalog
+ */
+function simulatePull(catalog) {
+  const totalBytes = catalog.reduce((s, l) => s + l.size, 0)
+  /** @type {{id:string,shortId:string,size:number,state:'queued'|'downloading'|'downloaded'|'extracting'|'done',pct:number,speed:number}[]} */
+  const layers = catalog.map((l) => ({
+    ...l,
+    state: 'queued',
+    pct: 0,
+    // larger layers download a bit slower per tick (MB-ish feel)
+    speed: Math.max(6, Math.min(22, 280 / l.size + Math.random() * 4)),
+  }))
+
+  /** @type {any[]} */
+  const frames = []
+
+  const snapshot = (opts) => {
+    const {
+      status = 'running',
+      chip,
+      steps,
+      stepDetails = ['', '', '', ''],
+      phase,
+      phaseLabel,
+      subtitle = 'nginx:latest',
+      logLine = '',
+    } = opts
+
+    const downloadedBytes = layers.reduce((s, l) => {
+      if (l.state === 'done' || l.state === 'downloaded' || l.state === 'extracting') return s + l.size
+      if (l.state === 'downloading') return s + (l.size * l.pct) / 100
+      return s
+    }, 0)
+
+    const doneCount = layers.filter(
+      (l) => l.state === 'done' || l.state === 'downloaded' || l.state === 'extracting'
+    ).length
+    const dlCount = layers.filter((l) => l.state === 'downloading').length
+    const queued = layers.filter((l) => l.state === 'queued').length
+
+    const pips = layers.map((l) => {
+      if (l.state === 'done') return 'done'
+      if (l.state === 'extracting') return 'extract'
+      if (l.state === 'downloaded') return 'done'
+      if (l.state === 'downloading') return 'download'
+      if (l.state === 'queued') return 'wait'
+      return 'idle'
+    })
+
+    // Active slots: concurrent downloads first (stable order by catalog index), then extract
+    const active = []
+    layers.forEach((l) => {
+      if (l.state === 'downloading') {
+        const got = (l.size * l.pct) / 100
+        active.push({
+          id: l.id,
+          shortId: l.shortId,
+          phase: 'downloading',
+          fill: Math.round(l.pct),
+          meta: `${got.toFixed(1)} / ${l.size} MB`,
+        })
+      }
+    })
+    layers.forEach((l) => {
+      if (l.state === 'extracting' && active.length < LAYER_SLOTS) {
+        active.push({
+          id: l.id,
+          shortId: l.shortId,
+          phase: 'extracting',
+          fill: Math.round(l.pct),
+          meta: `extract ${Math.round(l.pct)}%`,
+        })
+      }
+    })
+    // Optionally show one queued layer as waiting in a free slot
+    if (active.length < LAYER_SLOTS) {
+      const nextQ = layers.find((l) => l.state === 'queued')
+      if (nextQ) {
+        active.push({
+          id: nextQ.id,
+          shortId: nextQ.shortId,
+          phase: 'waiting',
+          fill: 8,
+          meta: 'waiting',
+        })
+      }
+    }
+    while (active.length < LAYER_SLOTS) active.push(null)
+
+    let barWidth = 8
+    let pctText = '…'
+    if (phase === 'downloading' || phase === 'extracting') {
+      // download weight 0 to 85%, extract 85 to 98%
+      const dlFrac = downloadedBytes / totalBytes
+      if (phase === 'downloading') {
+        barWidth = Math.min(85, Math.round(12 + dlFrac * 73))
+      } else {
+        const extractDone = layers.filter((l) => l.state === 'done').length
+        barWidth = Math.min(98, Math.round(85 + (extractDone / layers.length) * 13))
+      }
+      pctText = `${barWidth}%`
+    } else if (phase === 'complete') {
+      barWidth = 100
+      pctText = '100%'
+    } else if (phase === 'resolving') {
+      barWidth = opts.barWidth ?? 10
+    }
+
+    const summary =
+      phase === 'downloading'
+        ? `${doneCount}/${layers.length} layers · ${downloadedBytes.toFixed(1)} MB`
+        : phase === 'extracting'
+          ? `Extracting · ${layers.filter((l) => l.state === 'done').length}/${layers.length}`
+          : phase === 'complete'
+            ? opts.summary || 'Deploy finished'
+            : opts.summary || 'nginx:latest'
+
+    const activity =
+      opts.activity ||
+      (dlCount
+        ? `Downloading ${dlCount} layer${dlCount > 1 ? 's' : ''} in parallel…`
+        : phase === 'extracting'
+          ? 'Extracting layers…'
+          : '')
+
+    const waiting =
+      queued > 0 && (phase === 'downloading' || phase === 'resolving')
+        ? `${queued} layer${queued === 1 ? '' : 's'} waiting`
+        : ''
+
+    frames.push({
+      status,
+      chip,
+      subtitle,
+      steps,
+      stepDetails,
+      phase,
+      phaseLabel,
+      summary,
+      pctText,
+      barWidth,
+      pips: [...pips],
+      activeLayers: active,
+      waiting,
+      activity,
+      logLine,
+    })
+  }
+
+  // Resolve + auth
+  snapshot({
+    chip: '1/4',
+    steps: ['active', 'pending', 'pending', 'pending'],
+    stepDetails: ['Looking up registry…', '', '', ''],
+    phase: 'resolving',
+    phaseLabel: 'Resolving',
+    summary: 'nginx:latest',
+    barWidth: 6,
+    activity: 'Resolving image nginx:latest…',
+    logLine: 'Resolving nginx:latest from registry-1.docker.io',
+  })
+  snapshot({
+    chip: '1/4',
+    steps: ['active', 'pending', 'pending', 'pending'],
+    stepDetails: ['Public · no credential', '', '', ''],
+    phase: 'resolving',
+    phaseLabel: 'Auth',
+    summary: 'public',
+    barWidth: 12,
+    activity: 'Authenticated (anonymous)',
+    logLine: 'Auth: public (no credential)',
+  })
+
+  // Mark all queued with wait pips
+  layers.forEach((l) => {
+    l.state = 'queued'
+  })
+
+  // Seed concurrent downloads
+  const startNextDownloads = () => {
+    const active = layers.filter((l) => l.state === 'downloading').length
+    let slots = MAX_CONCURRENT - active
+    for (const l of layers) {
+      if (slots <= 0) break
+      if (l.state === 'queued') {
+        l.state = 'downloading'
+        l.pct = 0
+        slots -= 1
+      }
+    }
+  }
+  startNextDownloads()
+
+  snapshot({
+    chip: '2/4',
+    steps: ['success', 'active', 'pending', 'pending'],
+    stepDetails: ['', `${MAX_CONCURRENT} concurrent`, '', ''],
+    phase: 'downloading',
+    phaseLabel: 'Downloading',
+    logLine: `Starting pull · ${MAX_CONCURRENT} concurrent layer downloads`,
+  })
+
+  // Download ticks until all downloaded
+  let guard = 0
+  while (layers.some((l) => l.state === 'queued' || l.state === 'downloading') && guard < 200) {
+    guard += 1
+    startNextDownloads()
+
+    const finishedThisTick = []
+    layers.forEach((l) => {
+      if (l.state !== 'downloading') return
+      // advance fill (not uniform so bars look independent)
+      const step = l.speed * (0.75 + Math.random() * 0.5)
+      l.pct = Math.min(100, l.pct + step)
+      if (l.pct >= 100) {
+        l.pct = 100
+        l.state = 'downloaded'
+        finishedThisTick.push(l)
+      }
+    })
+
+    startNextDownloads()
+
+    const logLine =
+      finishedThisTick.length > 0
+        ? `Downloaded ${finishedThisTick.map((l) => l.shortId).join(', ')}`
+        : ''
+
+    snapshot({
+      chip: '2/4',
+      steps: ['success', 'active', 'pending', 'pending'],
+      stepDetails: [
+        '',
+        `${layers.filter((l) => l.state === 'downloading').length} active · ${layers.filter((l) => l.state === 'downloaded' || l.state === 'done').length}/${layers.length} done`,
+        '',
+        '',
+      ],
+      phase: 'downloading',
+      phaseLabel: 'Downloading',
+      logLine,
+    })
+  }
+
+  // Extract phase: up to 2 at a time, fill 0 to 100
+  layers.forEach((l) => {
+    if (l.state === 'downloaded') {
+      l.state = 'queued' // reuse as extract queue
+      l.pct = 0
+    }
+  })
+  // rename: use extracting queue from downloaded
+  layers.forEach((l) => {
+    if (l.state === 'queued' && l.pct === 0) {
+      /* already set */
+    }
+  })
+
+  // Convert: downloaded → waiting for extract (state 'queued' means extract queue now)
+  // Actually all should be 'downloaded'. Put them in extract queue.
+  layers.forEach((l) => {
+    if (l.state === 'downloaded') {
+      l.state = 'queued'
+      l.pct = 0
+      l.speed = 18 + Math.random() * 10
+    }
+  })
+
+  const startNextExtracts = () => {
+    const active = layers.filter((l) => l.state === 'extracting').length
+    let slots = 2 - active
+    for (const l of layers) {
+      if (slots <= 0) break
+      if (l.state === 'queued') {
+        l.state = 'extracting'
+        l.pct = 0
+        slots -= 1
+      }
+    }
+  }
+  startNextExtracts()
+
+  snapshot({
+    chip: '2/4',
+    steps: ['success', 'active', 'pending', 'pending'],
+    stepDetails: ['', 'Extracting layers…', '', ''],
+    phase: 'extracting',
+    phaseLabel: 'Extracting',
+    logLine: 'Extracting layers…',
+  })
+
+  guard = 0
+  while (layers.some((l) => l.state === 'queued' || l.state === 'extracting') && guard < 120) {
+    guard += 1
+    startNextExtracts()
+    const finished = []
+    layers.forEach((l) => {
+      if (l.state !== 'extracting') return
+      l.pct = Math.min(100, l.pct + l.speed)
+      if (l.pct >= 100) {
+        l.pct = 100
+        l.state = 'done'
+        finished.push(l)
+      }
+    })
+    startNextExtracts()
+    snapshot({
+      chip: '2/4',
+      steps: ['success', 'active', 'pending', 'pending'],
+      stepDetails: [
+        '',
+        `${layers.filter((l) => l.state === 'done').length}/${layers.length} extracted`,
+        '',
+        '',
+      ],
+      phase: 'extracting',
+      phaseLabel: 'Extracting',
+      logLine: finished.length ? `Extracted ${finished.map((l) => l.shortId).join(', ')}` : '',
+    })
+  }
+
+  layers.forEach((l) => {
+    l.state = 'done'
+    l.pct = 100
+  })
+
+  snapshot({
+    chip: '3/4',
+    steps: ['success', 'success', 'active', 'pending'],
+    stepDetails: ['', '', 'Applying config…', ''],
+    phase: 'complete',
+    phaseLabel: 'Complete',
+    summary: 'Image ready',
+    subtitle: 'peardock-demo',
+    activity: 'Creating container peardock-demo…',
+    logLine: 'docker create peardock-demo',
+  })
+  snapshot({
+    chip: '4/4',
+    steps: ['success', 'success', 'success', 'active'],
+    stepDetails: ['', '', '', '8080→80'],
+    phase: 'complete',
+    phaseLabel: 'Complete',
+    summary: 'Image ready',
+    subtitle: 'peardock-demo',
+    activity: 'Starting container…',
+    logLine: 'Started peardock-demo · 0.0.0.0:8080->80/tcp',
+  })
+  snapshot({
+    status: 'success',
+    chip: '4/4 done',
+    steps: ['success', 'success', 'success', 'success'],
+    stepDetails: ['', '', '', 'Running'],
+    phase: 'complete',
+    phaseLabel: 'Complete',
+    summary: 'Deploy finished',
+    subtitle: 'peardock-demo',
+    activity: 'Container running · ports 8080→80',
+    logLine: 'Job complete',
+  })
+
+  return frames
+}
+
+/* ── Containers: pulse update badges ── */
+function startContainersDemo(root) {
+  const stage = $('[data-demo-panel="containers"]', root)
+  if (!stage) return null
+  const rows = $$('tbody tr', stage)
+  let i = 0
+  return setInterval(() => {
+    rows.forEach((r) => r.classList.remove('is-highlight'))
+    const row = rows[i % rows.length]
+    if (row) row.classList.add('is-highlight')
+    i += 1
+  }, reduced() ? 2000 : 1600)
+}
+
+/* ── Connect / restore ── */
+function startConnectDemo(root) {
+  const stage = $('[data-demo-panel="connect"]', root)
+  if (!stage) return null
+  const status = $('[data-connect-status]', stage)
+  const bar = $('[data-connect-bar]', stage)
+  const count = $('[data-connect-count]', stage)
+  const phases = [
+    { text: 'Dialing HyperDHT…', pct: 15, n: '0 of 2' },
+    { text: 'Connecting Laptop…', pct: 45, n: '0 of 2' },
+    { text: 'Laptop online · 14 ms', pct: 70, n: '1 of 2' },
+    { text: 'Connecting staging…', pct: 85, n: '1 of 2' },
+    { text: '2 peers restored', pct: 100, n: '2 of 2' },
+  ]
+  let i = 0
+  const tick = () => {
+    const p = phases[i]
+    if (status) status.textContent = p.text
+    if (bar) bar.style.width = `${p.pct}%`
+    if (count) count.textContent = p.n
+    i = (i + 1) % phases.length
+  }
+  tick()
+  return setInterval(tick, reduced() ? 900 : 1500)
+}
+
+/* ── Hero mock: live meters + compact job tray card ── */
+function initHeroMock() {
+  const root = $('[data-hero-mock]')
+  if (!root || reduced()) return
+
+  const cpu = $('[data-live-cpu]', root)
+  const mem = $('[data-live-mem]', root)
+  const cpuBar = $('[data-live-cpu-bar]', root)
+  const memBar = $('[data-live-mem-bar]', root)
+  const events = $('[data-live-events]', root)
+  const eventLines = [
+    'container start · vpn',
+    'container exec · healthcheck',
+    'image pull · redis:7',
+    'network connect · bridge',
+    'volume mount · data',
+    'container restart · api',
+  ]
+
+  let eIdx = 0
+  setInterval(() => {
+    if (cpu) {
+      const v = 8 + Math.round(Math.random() * 22)
+      cpu.textContent = `${v}%`
+      if (cpuBar) cpuBar.style.width = `${v}%`
+    }
+    if (mem) {
+      const v = 32 + Math.round(Math.random() * 18)
+      mem.textContent = `${v}%`
+      if (memBar) memBar.style.width = `${v}%`
+    }
+    if (events) {
+      eIdx = (eIdx + 1) % eventLines.length
+      const line = document.createElement('div')
+      line.className = 'mock-event-line'
+      const t = new Date().toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      })
+      line.innerHTML = `${t} ${eventLines[eIdx]}`
+      events.prepend(line)
+      while (events.children.length > 5) events.lastElementChild?.remove()
+    }
+  }, 1800)
+
+  const mini = $('[data-hero-job]', root)
+  if (mini) {
+    const bar = $('[data-hero-job-bar]', mini)
+    const label = $('[data-hero-job-label]', mini)
+    const states = [
+      { pct: 12, label: 'Pull nginx:latest…' },
+      { pct: 38, label: 'Extracting layers…' },
+      { pct: 67, label: 'Creating container…' },
+      { pct: 100, label: 'Deploy complete' },
+    ]
+    let j = 0
+    const loop = () => {
+      const s = states[j]
+      if (bar) bar.style.width = `${s.pct}%`
+      if (label) label.textContent = s.label
+      mini.classList.toggle('is-done', s.pct === 100)
+      j = (j + 1) % states.length
+      setTimeout(loop, s.pct === 100 ? 2200 : 1100)
+    }
+    loop()
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  initDemoTabs()
+  initHeroMock()
+})
diff --git a/src/js/site.js b/src/js/site.js
index cfe8d0e..36f02dc 100644
--- a/src/js/site.js
+++ b/src/js/site.js
@@ -41,6 +41,7 @@ function injectChrome() {
     
     
          
       
        • Features
          • 
+      
        • Demos
          • 
       
        • How it works
          • 
       
        • Docs
          • 
       
        • Download
          • 
@@ -71,6 +72,7 @@ function injectChrome() {
       
          
         
          Product
          
         Features
+        Live demos
         Download
         Releases
         Community
diff --git a/src/styles/app-chrome.css b/src/styles/app-chrome.css
new file mode 100644
index 0000000..9c8e481
--- /dev/null
+++ b/src/styles/app-chrome.css
@@ -0,0 +1,1275 @@
+/**
+ * High-fidelity PearDock UI chrome for marketing demos.
+ * Class names and visuals match the desktop client (ops.css / modern.css).
+ */
+
+:root {
+  --pd-accent-primary: #2dd4bf;
+  --pd-bg: #0a0c10;
+  --pd-bg-elev: #1a222e;
+  --pd-bg-side: #0f131a;
+  --pd-border: rgba(255, 255, 255, 0.1);
+  --pd-text: #f4f7fb;
+  --pd-text-2: #c8d1df;
+  --pd-text-m: #9aa8bc;
+  --pd-text-f: #7d8b9f;
+}
+
+/* ── App window shell ── */
+.pd-app {
+  --accent-primary: #2dd4bf;
+  --accent-secondary: #14b8a6;
+  --text-primary: #f4f7fb;
+  --text-secondary: #c8d1df;
+  --text-muted: #9aa8bc;
+  --border-color: rgba(255, 255, 255, 0.1);
+  --bg-primary: #0a0c10;
+  --bg-secondary: #0f131a;
+  --bg-elevated: #1a222e;
+  --bg-hover: #232d3b;
+
+  position: relative;
+  border-radius: 14px;
+  overflow: hidden; /* rounded corners only  ·  height is not capped */
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: #0a0c10;
+  box-shadow:
+    0 32px 80px rgba(0, 0, 0, 0.55),
+    0 0 0 1px rgba(45, 212, 191, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  color: var(--pd-text);
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 13px;
+  text-align: left;
+  user-select: none;
+}
+
+.pd-app-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+  background: linear-gradient(180deg, #1a222e 0%, #151b24 100%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.pd-app-dots {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.pd-app-dots i {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+}
+.pd-app-dots i:nth-child(1) { background: #ff5f57; }
+.pd-app-dots i:nth-child(2) { background: #febc2e; }
+.pd-app-dots i:nth-child(3) { background: #28c840; }
+
+.pd-app-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--pd-text-2);
+}
+.pd-app-brand img {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+}
+.pd-app-brand span {
+  color: var(--pd-text-f);
+  font-weight: 500;
+  font-size: 11px;
+}
+
+.pd-app-titlebar-center {
+  flex: 1;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--pd-text-f);
+  letter-spacing: -0.01em;
+}
+
+.pd-app-health {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--pd-text-m);
+  flex-shrink: 0;
+}
+.pd-app-health .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #4ade80;
+  box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
+  animation: pd-pulse 2s ease infinite;
+}
+.pd-app-health .role {
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  font-size: 10px;
+  color: #5eead4;
+  background: rgba(45, 212, 191, 0.1);
+  border: 1px solid rgba(45, 212, 191, 0.25);
+  border-radius: 999px;
+  padding: 0.1rem 0.4rem;
+}
+
+@keyframes pd-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+.pd-app-body {
+  display: grid;
+  grid-template-columns: 168px minmax(0, 1fr);
+  /* Full dashboard without huge empty height  ·  density tuned via compact rules */
+  min-height: 0;
+  max-height: none;
+  background: #0a0c10;
+}
+
+.pd-app-side {
+  background: linear-gradient(180deg, #0f131a 0%, #0a0c10 100%);
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  padding: 8px 7px;
+  gap: 1px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.pd-side-label {
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--pd-text-f);
+  padding: 6px 8px 3px;
+}
+
+.pd-side-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pd-side-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 7px;
+  color: var(--pd-text-m);
+  font-size: 11.5px;
+  font-weight: 500;
+  transition: background 0.15s, color 0.15s;
+}
+.pd-side-link i {
+  width: 16px;
+  text-align: center;
+  font-size: 12px;
+  opacity: 0.9;
+}
+.pd-side-link.is-active {
+  background: linear-gradient(90deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.05));
+  color: #2dd4bf;
+  box-shadow: inset 3px 0 0 #2dd4bf;
+}
+.pd-side-peer {
+  margin-top: auto;
+  padding: 7px 8px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  font-size: 10px;
+  color: var(--pd-text-m);
+}
+.pd-side-peer strong {
+  display: block;
+  color: var(--pd-text);
+  font-size: 11px;
+  margin-bottom: 1px;
+}
+.pd-side-add {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 28px;
+  border-radius: 999px;
+  border: none;
+  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
+  color: #042f1a;
+  font-weight: 700;
+  font-size: 11px;
+}
+
+.pd-app-main {
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  background:
+    radial-gradient(800px 300px at 20% -10%, rgba(45, 212, 191, 0.07), transparent 55%),
+    #0a0c10;
+}
+
+/* ── Dashboard (real class names) ── */
+.pd-app-main .dashboard-layout.dash {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(200px, 1fr) auto;
+  gap: 8px;
+  padding: 10px 12px 10px;
+  overflow: visible;
+}
+
+.pd-app-main .dash-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+.pd-app-main .dash-kicker {
+  margin: 0 0 2px;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #2dd4bf;
+}
+.pd-app-main .dash-title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  color: #f4f7fb;
+  line-height: 1.15;
+}
+.pd-app-main .dash-subtitle {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: #9aa8bc;
+}
+.pd-app-main .dash-header-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.pd-app-main .dash-icon-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(26, 34, 46, 0.85);
+  color: #c8d1df;
+  display: grid;
+  place-items: center;
+  font-size: 11px;
+}
+.pd-app-main .dash-chip-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: none;
+  font-weight: 650;
+  font-size: 11px;
+  color: #052e1c;
+  background: linear-gradient(135deg, #34d399, #2dd4bf);
+  box-shadow: 0 4px 12px rgba(45, 212, 191, 0.22);
+}
+
+.pd-app-main .dash-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 7px;
+}
+.pd-app-main .dash-kpi {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 11px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(145deg, rgba(26, 34, 46, 0.95), rgba(15, 19, 26, 0.9));
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  transition: transform 0.25s ease, border-color 0.25s;
+}
+.pd-app-main .dash-kpi.is-tick {
+  transform: scale(1.02);
+  border-color: rgba(45, 212, 191, 0.3);
+}
+.pd-app-main .dash-kpi-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  font-size: 11px;
+}
+.pd-app-main .dash-kpi--ok .dash-kpi-icon { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
+.pd-app-main .dash-kpi--stop .dash-kpi-icon { background: rgba(248, 113, 113, 0.14); color: #f87171; }
+.pd-app-main .dash-kpi--info .dash-kpi-icon { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
+.pd-app-main .dash-kpi--teal .dash-kpi-icon { background: rgba(45, 212, 191, 0.14); color: #2dd4bf; }
+.pd-app-main .dash-kpi-meta { display: flex; flex-direction: column; gap: 0; min-width: 0; }
+.pd-app-main .dash-kpi-label {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #9aa8bc;
+}
+.pd-app-main .dash-kpi-value {
+  font-size: 1.2rem;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  color: #f4f7fb;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.05;
+}
+.pd-app-main .dash-kpi-glow {
+  position: absolute;
+  right: -20%;
+  top: -40%;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  opacity: 0.18;
+  filter: blur(8px);
+  pointer-events: none;
+}
+.pd-app-main .dash-kpi--ok .dash-kpi-glow { background: #4ade80; }
+.pd-app-main .dash-kpi--stop .dash-kpi-glow { background: #f87171; }
+.pd-app-main .dash-kpi--info .dash-kpi-glow { background: #38bdf8; }
+.pd-app-main .dash-kpi--teal .dash-kpi-glow { background: #2dd4bf; }
+
+.pd-app-main .dash-panels {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(108px, 1fr) minmax(108px, 1fr);
+  gap: 7px;
+  min-height: 220px;
+  overflow: visible;
+}
+.pd-app-main .dash-card {
+  min-width: 0;
+  min-height: 108px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 11px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(180deg, rgba(26, 34, 46, 0.92), rgba(15, 19, 26, 0.88));
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+.pd-app-main .dash-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 10px 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  flex: 0 0 auto;
+}
+.pd-app-main .dash-card-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 650;
+  color: #f4f7fb;
+}
+.pd-app-main .dash-card-title i { color: #2dd4bf; font-size: 10px; }
+.pd-app-main .dash-card-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 5px 10px 8px;
+  font-size: 11px;
+}
+.pd-app-main .dash-metric {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 3.5px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+.pd-app-main .dash-metric:last-child { border-bottom: none; }
+.pd-app-main .dash-metric-label { color: #9aa8bc; }
+.pd-app-main .dash-metric-value {
+  color: #f4f7fb;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.pd-app-main .dash-disk-row {
+  display: grid;
+  gap: 3px;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+.pd-app-main .dash-disk-row:last-child { border-bottom: none; }
+.pd-app-main .dash-disk-top {
+  display: flex;
+  justify-content: space-between;
+  font-size: 10.5px;
+}
+.pd-app-main .dash-disk-top span { color: #9aa8bc; }
+.pd-app-main .dash-disk-top strong {
+  color: #f4f7fb;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+.pd-app-main .dash-disk-bar {
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+.pd-app-main .dash-disk-bar > i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #2dd4bf, #14b8a6);
+  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+  max-width: 100%;
+}
+.pd-app-main .event-row {
+  display: grid;
+  grid-template-columns: 48px minmax(36px, 50px) minmax(0, 1fr);
+  gap: 5px;
+  padding: 3px 2px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 10px;
+  color: #9aa8bc;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  animation: pd-event-in 0.35s ease both;
+}
+.pd-app-main .event-row .event-time { color: #64748b; }
+.pd-app-main .event-row .event-action { color: #38bdf8; }
+.pd-app-main .event-row .event-target {
+  color: #c8d1df;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@keyframes pd-event-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+
+.pd-app-main .dash-actions {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+  padding: 6px 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(15, 19, 26, 0.85);
+}
+.pd-app-main .dash-actions-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #7d8b9f;
+  margin-right: 2px;
+}
+.pd-app-main .dash-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
+  color: #c8d1df;
+  font-size: 10px;
+  font-weight: 550;
+}
+.pd-app-main .dash-action--warn {
+  color: #e8c878;
+  border-color: rgba(251, 191, 36, 0.28);
+}
+.pd-app-main .dash-action--danger {
+  color: #fca5a5;
+  border-color: rgba(248, 113, 113, 0.28);
+}
+
+/* ── Job tray (real structure) ── */
+.pd-job-stage {
+  padding: 14px;
+  background:
+    radial-gradient(600px 200px at 80% 0%, rgba(45, 212, 191, 0.08), transparent 50%),
+    #0a0c10;
+  min-height: 420px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.job-panel {
+  width: min(100%, 420px);
+  background: linear-gradient(165deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
+  border: 1px solid #334155;
+  border-radius: 12px;
+  padding: 1rem;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+}
+.job-panel--running {
+  border-color: rgba(45, 212, 191, 0.35);
+  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.08), 0 16px 48px rgba(0, 0, 0, 0.45);
+}
+.job-panel--success {
+  border-color: rgba(52, 211, 153, 0.4);
+}
+.job-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.65rem;
+  margin-bottom: 0.75rem;
+}
+.job-panel-title {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  min-width: 0;
+  flex: 1;
+}
+.job-kind-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.85rem;
+  height: 1.85rem;
+  border-radius: 9px;
+  flex-shrink: 0;
+  background: rgba(45, 212, 191, 0.12);
+  border: 1px solid rgba(45, 212, 191, 0.28);
+  color: #2dd4bf;
+  font-size: 0.8rem;
+}
+.job-panel--success .job-kind-icon {
+  background: rgba(52, 211, 153, 0.12);
+  border-color: rgba(52, 211, 153, 0.35);
+  color: #34d399;
+}
+.job-panel-title-text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+.job-panel-title strong {
+  font-size: 0.95rem;
+  color: #f4f7fb;
+  line-height: 1.3;
+}
+.job-panel-subtitle {
+  font-size: 0.72rem;
+  color: #94a3b8;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 16rem;
+}
+.job-panel-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
+.job-steps-chip {
+  font-size: 0.68rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: #5eead4;
+  background: rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(45, 212, 191, 0.35);
+  border-radius: 999px;
+  padding: 0.12rem 0.45rem;
+}
+.job-status-badge {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.65rem !important;
+  font-weight: 700;
+  padding: 0.2rem 0.45rem;
+  border-radius: 6px;
+}
+.badge.bg-primary {
+  background: rgba(45, 212, 191, 0.18) !important;
+  color: #5eead4 !important;
+  border: 1px solid rgba(45, 212, 191, 0.3);
+}
+.badge.bg-success {
+  background: rgba(52, 211, 153, 0.18) !important;
+  color: #6ee7b7 !important;
+  border: 1px solid rgba(52, 211, 153, 0.35);
+}
+.job-dismiss-btn {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+  color: #94a3b8;
+  display: grid;
+  place-items: center;
+  font-size: 0.75rem;
+  cursor: default;
+}
+.job-steps {
+  min-width: 0;
+  margin-bottom: 0.35rem;
+}
+.job-step {
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr);
+  gap: 0.35rem 0.65rem;
+  padding: 0.4rem 0.35rem;
+  font-size: 0.88rem;
+  align-items: start;
+  border-radius: 8px;
+  color: #94a3b8;
+}
+.job-step--active {
+  background: rgba(45, 212, 191, 0.07);
+  box-shadow: inset 2px 0 0 #2dd4bf;
+  color: #f4f7fb;
+}
+.job-step--success .job-step-label { color: #cbd5e1; }
+.job-step-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  line-height: 1;
+}
+.job-step-icon .text-success { color: #34d399; }
+.job-step-icon .text-muted { color: #64748b; }
+.job-step-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.job-step-detail {
+  grid-column: 2;
+  font-size: 0.75rem;
+  color: #64748b;
+}
+
+/* job spinner */
+.job-spinner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.job-spinner-ring {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 2px solid rgba(45, 212, 191, 0.18);
+  border-top-color: #2dd4bf;
+  border-right-color: rgba(45, 212, 191, 0.55);
+  animation: job-spinner-rotate 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
+  box-shadow: 0 0 8px rgba(45, 212, 191, 0.25);
+}
+.job-spinner::after {
+  content: '';
+  position: absolute;
+  width: 0.28rem;
+  height: 0.28rem;
+  border-radius: 50%;
+  background: #2dd4bf;
+  opacity: 0.85;
+  box-shadow: 0 0 6px rgba(45, 212, 191, 0.55);
+}
+@keyframes job-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+/* Hybrid pull progress  ·  ported from app */
+.pull-progress {
+  margin-top: 0.65rem;
+  padding: 0.65rem 0.75rem;
+  border-radius: 10px;
+  background: rgba(2, 6, 23, 0.65);
+  border: 1px solid rgba(51, 65, 85, 0.85);
+  min-width: 0;
+  min-height: 12.5rem;
+  box-sizing: border-box;
+}
+.pull-progress--complete,
+.pull-progress--error {
+  min-height: 0;
+}
+.pull-progress-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 0.35rem 0.55rem;
+  align-items: baseline;
+  margin-bottom: 0.45rem;
+  height: 1.15rem;
+}
+.pull-progress-phase {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #2dd4bf;
+  white-space: nowrap;
+}
+.pull-progress--extracting .pull-progress-phase { color: #7dd3fc; }
+.pull-progress--complete .pull-progress-phase { color: #34d399; }
+.pull-progress-meta {
+  font-size: 0.75rem;
+  color: #94a3b8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.pull-progress-pct {
+  font-size: 0.8rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: #e2e8f0;
+  min-width: 2.75rem;
+  text-align: right;
+}
+.pull-progress-bar {
+  height: 0.5rem;
+  border-radius: 999px;
+  background: rgba(51, 65, 85, 0.9);
+  overflow: hidden;
+}
+.pull-progress-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, rgba(45, 212, 191, 0.75), #2dd4bf);
+  box-shadow: 0 0 10px rgba(45, 212, 191, 0.35);
+  transition: width 0.35s linear;
+  min-width: 0;
+}
+.pull-progress--extracting .pull-progress-bar-fill {
+  background: linear-gradient(90deg, rgba(56, 189, 248, 0.7), #7dd3fc);
+}
+.pull-progress--complete .pull-progress-bar-fill {
+  background: linear-gradient(90deg, rgba(52, 211, 153, 0.75), #34d399);
+}
+.pull-progress-track {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.22rem;
+  margin-top: 0.5rem;
+  height: 0.55rem;
+  overflow: hidden;
+}
+.pull-layer-pip {
+  flex: 1 1 0;
+  min-width: 0.28rem;
+  max-width: 1.1rem;
+  height: 0.38rem;
+  border-radius: 999px;
+  background: rgba(51, 65, 85, 0.95);
+  transition: background 0.35s ease, box-shadow 0.35s ease;
+}
+.pull-layer-pip--idle { background: rgba(51, 65, 85, 0.45); opacity: 0.55; }
+.pull-layer-pip--wait { background: rgba(71, 85, 105, 0.95); }
+.pull-layer-pip--download {
+  background: linear-gradient(90deg, rgba(45, 212, 191, 0.55), #2dd4bf);
+  box-shadow: 0 0 6px rgba(45, 212, 191, 0.35);
+}
+.pull-layer-pip--extract {
+  background: linear-gradient(90deg, rgba(56, 189, 248, 0.65), #7dd3fc);
+  box-shadow: 0 0 6px rgba(125, 211, 252, 0.35);
+  animation: pull-layer-pip-pulse 1.2s ease-in-out infinite;
+}
+.pull-layer-pip--done {
+  background: linear-gradient(90deg, rgba(52, 211, 153, 0.7), #34d399);
+}
+@keyframes pull-layer-pip-pulse {
+  0%, 100% { opacity: 0.75; }
+  50% { opacity: 1; }
+}
+.pull-progress-layers {
+  display: flex;
+  flex-direction: column;
+  gap: 0.32rem;
+  margin-top: 0.5rem;
+  height: calc(4 * 1.1rem + 3 * 0.32rem);
+  overflow: hidden;
+}
+.pull-progress--complete .pull-progress-layers,
+.pull-progress--complete .pull-progress-waiting {
+  display: none;
+  height: 0;
+  margin: 0;
+}
+.pull-layer {
+  display: grid;
+  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
+  gap: 0.35rem 0.5rem;
+  align-items: center;
+  height: 1.1rem;
+  font-size: 0.7rem;
+}
+.pull-layer--empty { opacity: 0.28; }
+.pull-layer-id {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pull-layer-bar {
+  height: 0.3rem;
+  border-radius: 999px;
+  background: rgba(30, 41, 59, 0.95);
+  overflow: hidden;
+  min-width: 0;
+}
+.pull-layer-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: rgba(45, 212, 191, 0.85);
+  transition: width 0.25s linear;
+  min-width: 0;
+}
+.pull-layer--extracting .pull-layer-bar-fill,
+.pull-layer--downloaded .pull-layer-bar-fill {
+  background: rgba(125, 211, 252, 0.9);
+}
+.pull-layer-meta {
+  color: #94a3b8;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  max-width: 7.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: right;
+}
+.pull-progress-waiting {
+  margin-top: 0.35rem;
+  height: 0.95rem;
+  line-height: 0.95rem;
+  font-size: 0.7rem;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pull-progress-waiting--empty { color: transparent; }
+.pull-progress-activity {
+  margin-top: 0.35rem;
+  height: 1.15rem;
+  line-height: 1.15rem;
+  font-size: 0.72rem;
+  color: #94a3b8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pull-progress--complete .pull-progress-activity { color: #6ee7b7; }
+
+.job-log-details {
+  margin-top: 0.65rem;
+  border-top: 1px solid rgba(51, 65, 85, 0.6);
+  padding-top: 0.45rem;
+}
+.job-log-summary {
+  list-style: none;
+  cursor: default;
+  font-size: 0.75rem;
+  color: #94a3b8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.job-log-summary::-webkit-details-marker { display: none; }
+.job-log {
+  margin-top: 0.4rem;
+  max-height: 5.5rem;
+  overflow: auto;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.7rem;
+  background: rgba(2, 6, 23, 0.5);
+  border-radius: 8px;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid rgba(51, 65, 85, 0.5);
+}
+.job-log-line {
+  color: #94a3b8;
+  padding: 0.1rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.job-log-ts { color: #64748b; margin-right: 0.35rem; }
+.job-log--info { color: #cbd5e1; }
+.job-auto-dismiss-hint {
+  font-size: 0.65rem;
+  color: #6ee7b7;
+}
+
+/* ── Containers table ── */
+.pd-containers-wrap {
+  padding: 14px 16px;
+  min-height: 420px;
+  overflow: auto;
+}
+.pd-containers-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.pd-containers-toolbar h3 {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pd-containers-toolbar h3 i { color: #2dd4bf; }
+.pd-filter-seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 8px;
+  background: #151b24;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+.pd-filter-seg button {
+  border: 0;
+  background: transparent;
+  color: #9aa8bc;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 0.35rem 0.65rem;
+  border-radius: 6px;
+}
+.pd-filter-seg button.is-active {
+  background: rgba(45, 212, 191, 0.14);
+  color: #2dd4bf;
+  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.2);
+}
+.pd-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.pd-table th {
+  text-align: left;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #7d8b9f;
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(15, 19, 26, 0.6);
+}
+.pd-table td {
+  padding: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: #c8d1df;
+  vertical-align: middle;
+}
+.pd-table tr {
+  transition: background 0.2s;
+}
+.pd-table tbody tr:hover {
+  background: rgba(45, 212, 191, 0.04);
+}
+.pd-table .name {
+  font-weight: 600;
+  color: #f4f7fb;
+}
+.pd-table .mono {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  color: #9aa8bc;
+}
+.pd-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.15rem 0.45rem;
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-weight: 650;
+  text-transform: capitalize;
+}
+.pd-badge--running {
+  background: rgba(74, 222, 128, 0.12);
+  color: #4ade80;
+  border: 1px solid rgba(74, 222, 128, 0.28);
+}
+.pd-badge--exited {
+  background: rgba(248, 113, 113, 0.1);
+  color: #f87171;
+  border: 1px solid rgba(248, 113, 113, 0.25);
+}
+.pd-update {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 8px;
+  font-size: 12px;
+}
+.pd-update--ok {
+  color: #4ade80;
+  background: rgba(74, 222, 128, 0.1);
+}
+.pd-update--avail {
+  color: #fbbf24;
+  background: rgba(251, 191, 36, 0.12);
+  border: 1px solid rgba(251, 191, 36, 0.28);
+  animation: pd-update-pulse 1.8s ease infinite;
+  cursor: pointer;
+}
+@keyframes pd-update-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35); }
+  50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
+}
+.pd-row-actions {
+  display: flex;
+  gap: 4px;
+}
+.pd-row-actions span {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  display: grid;
+  place-items: center;
+  color: #9aa8bc;
+  font-size: 10px;
+}
+
+/* ── Connect / restore fidelity ── */
+.pd-connect-stage {
+  padding: 18px;
+  min-height: 420px;
+  display: grid;
+  place-items: center;
+  background:
+    radial-gradient(500px 220px at 50% 0%, rgba(45, 212, 191, 0.1), transparent 55%),
+    #0a0c10;
+}
+.pd-connect-card {
+  width: min(100%, 380px);
+  padding: 1.75rem 1.5rem 1.4rem;
+  border-radius: 16px;
+  background:
+    radial-gradient(420px 180px at 50% -10%, rgba(52, 211, 153, 0.14), transparent 55%),
+    linear-gradient(168deg, #1a2433 0%, #121a24 50%, #0d131c 100%);
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(45, 212, 191, 0.07);
+  text-align: center;
+}
+.pd-connect-card .orb {
+  width: 4.5rem;
+  height: 4.5rem;
+  margin: 0 auto 1rem;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(45, 212, 191, 0.2);
+  box-shadow: 0 0 28px rgba(45, 212, 191, 0.15);
+  position: relative;
+}
+.pd-connect-card .orb .job-spinner {
+  width: 1.85rem;
+  height: 1.85rem;
+}
+.pd-connect-card h3 {
+  margin: 0 0 0.4rem;
+  font-size: 1.2rem;
+  font-weight: 750;
+  letter-spacing: -0.02em;
+}
+.pd-connect-card .lead {
+  margin: 0 0 1rem;
+  font-size: 0.85rem;
+  color: #9aa8bc;
+  line-height: 1.5;
+}
+.pd-connect-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.8rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 0.8rem;
+  color: #c8d1df;
+  margin-bottom: 1rem;
+  max-width: 100%;
+}
+.pd-connect-status .dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: #2dd4bf;
+  box-shadow: 0 0 8px rgba(45, 212, 191, 0.5);
+  animation: pd-pulse 1.4s ease infinite;
+}
+.pd-connect-progress {
+  width: 100%;
+  max-width: 16rem;
+  margin: 0 auto;
+  text-align: left;
+}
+.pd-connect-progress .track {
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+.pd-connect-progress .bar {
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #14b8a6, #2dd4bf);
+  box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
+  transition: width 0.4s ease;
+}
+.pd-connect-progress .meta {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.45rem;
+  font-size: 0.7rem;
+  color: #7d8b9f;
+}
+.pd-connect-progress .meta strong {
+  color: #c8d1df;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Hero uses real screenshot + floating real job panel */
+.hero-shot-stack {
+  position: relative;
+  z-index: 1;
+}
+.hero-shot-stack .hero-frame {
+  overflow: hidden;
+}
+.hero-shot-stack .hero-frame img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.hero-float-job {
+  position: absolute;
+  right: -0.35rem;
+  bottom: -1rem;
+  width: min(340px, 72%);
+  z-index: 4;
+  transform: scale(0.92);
+  transform-origin: bottom right;
+  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55));
+  animation: hero-job-float 5s ease-in-out infinite;
+}
+@keyframes hero-job-float {
+  0%, 100% { transform: scale(0.92) translateY(0); }
+  50% { transform: scale(0.92) translateY(-6px); }
+}
+.hero-float-job .job-panel {
+  width: 100%;
+  margin: 0;
+}
+
+@media (max-width: 960px) {
+  .pd-app-body {
+    grid-template-columns: 1fr;
+    max-height: none;
+    min-height: 0;
+  }
+  .pd-app-side { display: none; }
+  .pd-app-main .dash-kpis { grid-template-columns: repeat(2, 1fr); }
+  .pd-app-main .dashboard-layout.dash {
+    grid-template-rows: auto auto auto auto;
+  }
+  .pd-app-main .dash-panels {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    min-height: 0;
+  }
+  /* Keep Disk + Live events visible on narrow screens */
+  .pd-app-main .dash-panels .dash-card {
+    min-height: 0;
+  }
+  .hero-float-job {
+    position: relative;
+    right: auto;
+    bottom: auto;
+    width: 100%;
+    transform: none;
+    margin-top: 0.75rem;
+    animation: none;
+    filter: none;
+  }
+  .hero-float-job .job-panel { transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .job-spinner-ring,
+  .pull-layer-pip--extract,
+  .pd-update--avail,
+  .pd-app-health .dot,
+  .hero-float-job {
+    animation: none !important;
+  }
+  .pull-progress-bar-fill,
+  .pull-layer-bar-fill,
+  .pd-app-main .dash-disk-bar > i {
+    transition: none !important;
+  }
+}
diff --git a/src/styles/docs.css b/src/styles/docs.css
index a24112f..3edc994 100644
--- a/src/styles/docs.css
+++ b/src/styles/docs.css
@@ -1,5 +1,5 @@
 /* ═══════════════════════════════════════════════════════════
-   PearDock Docs — product-grade documentation layout
+   PearDock Docs  ·  product-grade documentation layout
    Balanced gutters · sticky nav · refined prose · dark chrome
    ═══════════════════════════════════════════════════════════ */
 
@@ -79,7 +79,7 @@ body.is-docs .nav-brand-text {
     minmax(0.75rem, 1.15fr);
   grid-template-rows: auto;
   column-gap: 0;
-  /* Grow with content — do not force a second inner viewport */
+  /* Grow with content  ·  do not force a second inner viewport */
   min-height: calc(100vh - var(--nav-h));
   margin-top: var(--nav-h);
   max-width: 100%;
@@ -251,11 +251,11 @@ body.is-docs .nav-brand-text {
   width: 100%;
   max-width: none;
   box-sizing: border-box;
-  /* Let the window scroll — no nested main scrollbar */
+  /* Let the window scroll  ·  no nested main scrollbar */
   overflow: visible;
   /* More horizontal padding on the right so wide content can breathe */
   padding: 2.25rem clamp(1.25rem, 2.5vw, 2.5rem) 5.5rem clamp(1.5rem, 2.5vw, 2.75rem);
-  /* Solid reading surface — not a floating island */
+  /* Solid reading surface  ·  not a floating island */
   background:
     linear-gradient(180deg, rgba(15, 17, 23, 0.35) 0%, transparent 12rem),
     transparent;
@@ -721,7 +721,7 @@ body.is-docs .nav-brand-text {
   width: 100%;
 }
 
-/* Odd last card (e.g. FAQ on docs overview) — center under the two-column grid */
+/* Odd last card (e.g. FAQ on docs overview)  ·  center under the two-column grid */
 .docs-cards > .docs-card:last-child:nth-child(odd) {
   grid-column: 1 / -1;
   width: 100%;
@@ -1193,7 +1193,7 @@ body .container {
     radial-gradient(ellipse 70% 80% at 50% 0%, rgba(45, 212, 191, 0.06), transparent 55%),
     linear-gradient(165deg, rgba(15, 17, 23, 0.95), rgba(8, 10, 14, 0.98));
   box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
-  /* Prefer scaling SVG via useMaxWidth — avoid nested scrollbars when possible */
+  /* Prefer scaling SVG via useMaxWidth  ·  avoid nested scrollbars when possible */
   overflow-x: auto;
   overflow-y: hidden;
   overscroll-behavior-x: contain;
diff --git a/src/styles/global.css b/src/styles/global.css
index cd8db5e..65ee76d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,5 +1,5 @@
 /* ═══════════════════════════════════════════════════════════
-   PearDock Website — Design System
+   PearDock Website  ·  Design System
    Brand tokens: #0f1117 · #2dd4bf · #f4f7fb
    ═══════════════════════════════════════════════════════════ */
 
@@ -398,7 +398,7 @@ pre {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1.15rem 1.25rem;
-  /* Long curl URLs have no spaces — break mid-token, never h-scroll */
+  /* Long curl URLs have no spaces  ·  break mid-token, never h-scroll */
   overflow-x: clip;
   overflow-y: hidden;
   max-width: 100%;
@@ -622,7 +622,7 @@ tr:hover td {
 /*
  * Bottom-only cradle: true semicircle under the pear.
  * Full disc is positioned with its center on the bar bottom, then the top
- * half is clipped away — so only a curve leaves and returns to the bar.
+ * half is clipped away  ·  so only a curve leaves and returns to the bar.
  * No top ring, no diameter stroke through the pear.
  */
 .nav-brand::after {
@@ -651,7 +651,7 @@ tr:hover td {
 }
 
 .site-nav.scrolled .nav-brand::after {
-  /* Same glass + border as the bar — continuous under the pear */
+  /* Same glass + border as the bar  ·  continuous under the pear */
   background: var(--bg-glass);
   backdrop-filter: blur(16px) saturate(1.4);
   -webkit-backdrop-filter: blur(16px) saturate(1.4);
@@ -688,7 +688,7 @@ tr:hover td {
 }
 
 /*
- * Free-floating pear — top stays inside the bar (no viewport clip);
+ * Free-floating pear  ·  top stays inside the bar (no viewport clip);
  * bottom hangs below and sits in the circular cradle.
  */
 .nav-brand-logo {
@@ -954,7 +954,7 @@ body.docs-sidebar-open {
 @media (max-width: 900px) {
   :root {
     --nav-h: 60px;
-    /* Fit fully inside the bar — no overflow / cradle on mobile */
+    /* Fit fully inside the bar  ·  no overflow / cradle on mobile */
     --brand-logo: 44px;
     --brand-top-inset: 0px;
     --brand-overhang: 0px;
@@ -1005,7 +1005,7 @@ body.docs-sidebar-open {
   }
 
   .nav-brand-logo {
-    /* Sit flush in the bar — no hang above/below */
+    /* Sit flush in the bar  ·  no hang above/below */
     align-self: center;
     margin: 0;
     width: var(--brand-logo);
@@ -1036,7 +1036,7 @@ body.docs-sidebar-open {
     background: var(--bg-secondary);
     border-bottom-color: var(--border);
     max-height: min(100dvh, 100vh);
-    /* Drawer scrolls; pear may clip while open — ok vs closed overflow */
+    /* Drawer scrolls; pear may clip while open  ·  ok vs closed overflow */
     overflow-x: visible;
     overflow-y: auto;
     overscroll-behavior: contain;
diff --git a/src/styles/home.css b/src/styles/home.css
index 1d31581..91d4ce6 100644
--- a/src/styles/home.css
+++ b/src/styles/home.css
@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   position: relative;
-  overflow: hidden; /* clip floating chips — no page-level h-scroll */
+  overflow: hidden; /* clip floating chips  ·  no page-level h-scroll */
   max-width: 100%;
 }
 
@@ -152,7 +152,7 @@
 }
 
 /*
- * Status pills under the screenshot — never overlay the product image.
+ * Status pills under the screenshot  ·  never overlay the product image.
  */
 .hero-status-bar {
   list-style: none;
@@ -261,7 +261,7 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-/* Install one-liner card — compact (short install.peardock.boats URL) */
+/* Install one-liner card  ·  compact (short install.peardock.boats URL) */
 .section#quickstart > .container {
   width: min(100% - 2rem, var(--max, 1200px));
   max-width: 100%;
@@ -463,7 +463,7 @@
   display: block;
 }
 
-/* Hero / featured tile — much larger in the grid */
+/* Hero / featured tile  ·  much larger in the grid */
 .shot:nth-child(1) {
   grid-column: span 8;
   grid-row: span 2;
@@ -696,7 +696,7 @@ body.lightbox-open {
 }
 
 .lightbox img {
-  /* Nearly full viewport — only limited by screen edges */
+  /* Nearly full viewport  ·  only limited by screen edges */
   max-width: min(98vw, 1920px);
   max-height: min(92dvh, calc(100dvh - 5rem));
   width: auto;
@@ -1016,3 +1016,999 @@ body.lightbox-open {
     height: auto;
   }
 }
+
+/* ═══════════════════════════════════════════════════════════
+   Product mock UI + interactive demos (homepage)
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Shared mock window chrome ── */
+.mock-window {
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(168deg, #151d28 0%, #0e141c 55%, #0a0e14 100%);
+  box-shadow:
+    0 28px 64px rgba(0, 0, 0, 0.55),
+    0 0 0 1px rgba(45, 212, 191, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  text-align: left;
+  color: var(--text);
+  font-size: 12px;
+  line-height: 1.4;
+  user-select: none;
+}
+
+.mock-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 0.55rem 0.85rem;
+  background: rgba(0, 0, 0, 0.28);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.mock-dots {
+  display: flex;
+  gap: 5px;
+  flex-shrink: 0;
+}
+
+.mock-dots span {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #3a4150;
+}
+.mock-dots span:nth-child(1) { background: #ff5f57; }
+.mock-dots span:nth-child(2) { background: #febc2e; }
+.mock-dots span:nth-child(3) { background: #28c840; }
+
+.mock-titlebar-label {
+  flex: 1;
+  text-align: center;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: -0.01em;
+}
+
+.mock-titlebar-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.65rem;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+
+.mock-titlebar-meta .live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
+  animation: pulse-dot 2s ease infinite;
+}
+
+.mock-body {
+  display: grid;
+  grid-template-columns: 118px 1fr;
+  min-height: 280px;
+}
+
+.mock-sidebar {
+  padding: 0.65rem 0.45rem;
+  background: rgba(0, 0, 0, 0.22);
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.mock-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.38rem 0.5rem;
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-size: 0.68rem;
+  font-weight: 500;
+}
+
+.mock-nav-item.is-active {
+  background: linear-gradient(90deg, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0.05));
+  color: var(--accent);
+  border-left: 2px solid var(--accent);
+}
+
+.mock-nav-item .ico {
+  width: 14px;
+  text-align: center;
+  opacity: 0.85;
+  font-size: 0.7rem;
+}
+
+.mock-main {
+  padding: 0.75rem 0.85rem 0.9rem;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.mock-kicker {
+  font-size: 0.62rem;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0;
+}
+
+.mock-heading {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text);
+}
+
+.mock-sub {
+  margin: 0;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+
+.mock-stat-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.4rem;
+}
+
+.mock-stat-card {
+  padding: 0.5rem 0.55rem;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.mock-stat-card .lbl {
+  display: block;
+  font-size: 0.58rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 0.2rem;
+}
+
+.mock-stat-card .val {
+  font-size: 1.05rem;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  color: var(--text);
+}
+
+.mock-stat-card.is-run .val { color: var(--success); }
+.mock-stat-card.is-img .val { color: var(--info); }
+
+.mock-panels {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.45rem;
+  flex: 1;
+  min-height: 0;
+}
+
+.mock-panel {
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(0, 0, 0, 0.18);
+  padding: 0.55rem 0.6rem;
+  min-width: 0;
+}
+
+.mock-panel h4 {
+  margin: 0 0 0.45rem;
+  font-size: 0.68rem;
+  font-weight: 650;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.mock-meter {
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+  margin: 0.25rem 0 0.35rem;
+}
+
+.mock-meter > i {
+  display: block;
+  height: 100%;
+  width: var(--pct, 40%);
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent-secondary), var(--accent));
+  box-shadow: 0 0 10px rgba(45, 212, 191, 0.35);
+  transition: width 0.6s var(--ease);
+}
+
+.mock-meter-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.62rem;
+  color: var(--text-muted);
+  margin-bottom: 0.35rem;
+}
+
+.mock-meter-row strong {
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.mock-event-line {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  padding: 0.18rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: mock-line-in 0.35s var(--ease);
+}
+
+.mock-event-time {
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 0.55rem;
+  margin-right: 0.35rem;
+}
+
+@keyframes mock-line-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* Hero job tray floating card */
+.hero-visual {
+  gap: 0.75rem;
+}
+
+.hero-mock-stack {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-job-card {
+  position: absolute;
+  right: -0.5rem;
+  bottom: -0.85rem;
+  width: min(240px, 62%);
+  z-index: 3;
+  padding: 0.7rem 0.8rem;
+  border-radius: 12px;
+  background: linear-gradient(165deg, rgba(26, 36, 51, 0.96), rgba(13, 19, 28, 0.98));
+  border: 1px solid rgba(45, 212, 191, 0.22);
+  box-shadow:
+    0 16px 40px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(45, 212, 191, 0.08);
+  backdrop-filter: blur(12px);
+  animation: hero-job-float 5s ease-in-out infinite;
+}
+
+@keyframes hero-job-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+
+.hero-job-card.is-done {
+  border-color: rgba(74, 222, 128, 0.35);
+}
+
+.hero-job-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.45rem;
+}
+
+.hero-job-head strong {
+  font-size: 0.72rem;
+  font-weight: 650;
+  color: var(--text);
+}
+
+.hero-job-pill {
+  font-size: 0.58rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 0.15rem 0.4rem;
+  border-radius: 999px;
+  background: rgba(45, 212, 191, 0.14);
+  color: var(--accent);
+  border: 1px solid rgba(45, 212, 191, 0.25);
+}
+
+.hero-job-card.is-done .hero-job-pill {
+  background: rgba(74, 222, 128, 0.14);
+  color: var(--success);
+  border-color: rgba(74, 222, 128, 0.3);
+}
+
+.hero-job-label {
+  margin: 0 0 0.4rem;
+  font-size: 0.68rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hero-job-track {
+  height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+  overflow: hidden;
+}
+
+.hero-job-bar {
+  height: 100%;
+  width: 12%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent-secondary), var(--accent));
+  box-shadow: 0 0 10px rgba(45, 212, 191, 0.4);
+  transition: width 0.5s var(--ease);
+}
+
+/* Soften 3D tilt for mock so readability wins */
+.hero-visual .hero-frame.mock-frame {
+  transform: rotateY(-4deg) rotateX(3deg);
+  overflow: visible;
+}
+
+.hero-visual:hover .hero-frame.mock-frame {
+  transform: rotateY(-1deg) rotateX(1deg);
+}
+
+.hero-frame.mock-frame::after {
+  border-radius: 16px;
+  pointer-events: none;
+}
+
+.hero-frame.mock-frame .mock-window {
+  border: none;
+  border-radius: 16px;
+  box-shadow: none;
+}
+
+/* ── Product demo section ── */
+.product-demo-section {
+  position: relative;
+  padding: 5.5rem 0;
+  background:
+    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(45, 212, 191, 0.08), transparent 55%),
+    var(--bg-secondary);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.product-demo-head {
+  text-align: center;
+  max-width: 640px;
+  margin: 0 auto 2rem;
+}
+
+.product-demo-head .section-label {
+  justify-content: center;
+}
+
+.demo-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.45rem;
+  margin: 0 auto 1.75rem;
+  padding: 0.35rem;
+  width: fit-content;
+  max-width: 100%;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+}
+
+.demo-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.55rem 1.05rem;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.demo-tab:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.demo-tab.is-active {
+  color: #042f1a;
+  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+  box-shadow: 0 4px 16px rgba(45, 212, 191, 0.28);
+}
+
+.demo-stage {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
+  gap: 1.75rem;
+  align-items: start;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.demo-stage-visual .pd-app {
+  width: 100%;
+}
+
+/* Dashboard demo: full layout, compact density (no crop, less vertical bulk) */
+.demo-stage[data-demo-panel='dashboard'] .pd-app-body,
+.demo-panel[data-demo-panel='dashboard'] .pd-app-body {
+  min-height: 480px;
+  max-height: none;
+}
+
+.demo-stage[data-demo-panel='dashboard'] .pd-app-main,
+.demo-panel[data-demo-panel='dashboard'] .pd-app-main {
+  overflow: visible;
+}
+
+/* Limit live events to a few rows so the card stays short */
+.demo-panel[data-demo-panel='dashboard'] [data-dash-events] {
+  max-height: 5.5rem;
+  overflow: hidden;
+}
+
+.pd-table tbody tr.is-highlight {
+  background: rgba(45, 212, 191, 0.07);
+  box-shadow: inset 2px 0 0 #2dd4bf;
+}
+
+.job-spinner--xl {
+  width: 1.85rem;
+  height: 1.85rem;
+}
+
+.demo-stage-visual {
+  min-width: 0;
+}
+
+.demo-stage-copy h3 {
+  font-size: 1.35rem;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.65rem;
+}
+
+.demo-stage-copy p {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  margin: 0 0 1rem;
+  line-height: 1.65;
+}
+
+.demo-stage-copy ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  margin: 0;
+  padding: 0;
+}
+
+.demo-stage-copy li {
+  display: flex;
+  gap: 0.55rem;
+  align-items: flex-start;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.demo-stage-copy li::before {
+  content: '';
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+  border-radius: 50%;
+  background: var(--accent-dim);
+  border: 1px solid var(--accent-border);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232dd4bf'%3E%3Cpath d='M6.5 11.2 3.3 8l1-1 2.2 2.2L11.7 4l1 1z'/%3E%3C/svg%3E");
+  background-size: 11px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.demo-panel {
+  animation: demo-panel-in 0.4s var(--ease);
+}
+
+@keyframes demo-panel-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* Job tray demo */
+.job-tray-demo {
+  padding: 1rem 1.05rem 1.1rem;
+}
+
+.job-tray-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+.job-tray-head h4 {
+  margin: 0;
+  font-size: 0.88rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.job-badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 0.2rem 0.5rem;
+  border-radius: 999px;
+  background: rgba(45, 212, 191, 0.14);
+  color: var(--accent);
+  border: 1px solid rgba(45, 212, 191, 0.28);
+}
+
+.job-badge[data-tone='success'] {
+  background: rgba(74, 222, 128, 0.14);
+  color: var(--success);
+  border-color: rgba(74, 222, 128, 0.3);
+}
+
+.job-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  margin-bottom: 0.9rem;
+}
+
+.job-step {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  gap: 0.55rem;
+  align-items: center;
+  padding: 0.45rem 0.55rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text-muted);
+  transition: border-color 0.25s, background 0.25s, color 0.25s;
+}
+
+.job-step.is-active {
+  border-color: rgba(45, 212, 191, 0.28);
+  background: rgba(45, 212, 191, 0.08);
+  color: var(--text);
+}
+
+.job-step.is-done {
+  color: var(--text-secondary);
+  border-color: rgba(74, 222, 128, 0.15);
+}
+
+.job-step-ico {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 0.65rem;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.job-step.is-active .job-step-ico {
+  background: rgba(45, 212, 191, 0.15);
+  border-color: rgba(45, 212, 191, 0.35);
+  color: var(--accent);
+}
+
+.job-step.is-done .job-step-ico {
+  background: rgba(74, 222, 128, 0.15);
+  border-color: rgba(74, 222, 128, 0.35);
+  color: var(--success);
+}
+
+.job-step-spinner {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(45, 212, 191, 0.2);
+  border-top-color: var(--accent);
+  animation: job-spin 0.7s linear infinite;
+}
+
+@keyframes job-spin {
+  to { transform: rotate(360deg); }
+}
+
+.job-progress-track {
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+  overflow: hidden;
+  margin-bottom: 0.55rem;
+}
+
+.job-progress-bar {
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent-secondary), var(--accent));
+  box-shadow: 0 0 12px rgba(45, 212, 191, 0.4);
+  transition: width 0.45s var(--ease);
+}
+
+.job-log {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  padding: 0.55rem 0.65rem;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Containers demo table */
+.mock-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.72rem;
+}
+
+.mock-table th {
+  text-align: left;
+  font-size: 0.6rem;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 0.35rem 0.4rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.mock-table td {
+  padding: 0.5rem 0.4rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  color: var(--text-secondary);
+  vertical-align: middle;
+}
+
+.mock-table tr {
+  animation: mock-row-in 0.5s var(--ease) both;
+}
+
+.mock-table tr:nth-child(1) { animation-delay: 0.05s; }
+.mock-table tr:nth-child(2) { animation-delay: 0.12s; }
+.mock-table tr:nth-child(3) { animation-delay: 0.19s; }
+.mock-table tr:nth-child(4) { animation-delay: 0.26s; }
+
+@keyframes mock-row-in {
+  from { opacity: 0; transform: translateX(-6px); }
+  to { opacity: 1; transform: none; }
+}
+
+.mock-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.12rem 0.4rem;
+  border-radius: 999px;
+  font-size: 0.6rem;
+  font-weight: 650;
+  text-transform: capitalize;
+}
+
+.mock-badge.running {
+  background: rgba(74, 222, 128, 0.12);
+  color: var(--success);
+  border: 1px solid rgba(74, 222, 128, 0.28);
+}
+
+.mock-badge.exited {
+  background: rgba(248, 113, 113, 0.1);
+  color: var(--danger);
+  border: 1px solid rgba(248, 113, 113, 0.25);
+}
+
+.mock-update {
+  color: var(--warning);
+  font-size: 0.75rem;
+  animation: update-pulse 2s ease infinite;
+}
+
+.mock-update.ok {
+  color: var(--success);
+  animation: none;
+}
+
+@keyframes update-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+/* Connect demo */
+.connect-demo {
+  padding: 1.15rem 1.1rem 1.2rem;
+}
+
+.connect-phases {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.connect-phase {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 0.65rem;
+  align-items: start;
+  padding: 0.65rem 0.7rem;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.02);
+  opacity: 0.45;
+  transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
+}
+
+.connect-phase.is-active {
+  opacity: 1;
+  border-color: rgba(45, 212, 191, 0.3);
+  background: rgba(45, 212, 191, 0.08);
+  transform: scale(1.01);
+}
+
+.connect-phase.is-done {
+  opacity: 0.85;
+  border-color: rgba(74, 222, 128, 0.18);
+}
+
+.connect-phase-num {
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  font-size: 0.72rem;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-muted);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.connect-phase.is-active .connect-phase-num {
+  background: rgba(45, 212, 191, 0.18);
+  color: var(--accent);
+  border-color: rgba(45, 212, 191, 0.35);
+}
+
+.connect-phase.is-done .connect-phase-num {
+  background: rgba(74, 222, 128, 0.15);
+  color: var(--success);
+  border-color: rgba(74, 222, 128, 0.3);
+}
+
+.connect-phase strong {
+  display: block;
+  font-size: 0.82rem;
+  margin-bottom: 0.15rem;
+  color: var(--text);
+}
+
+.connect-phase span {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.connect-key {
+  margin-top: 0.35rem;
+  font-family: var(--mono);
+  font-size: 0.65rem;
+  padding: 0.3rem 0.45rem;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.3);
+  color: var(--accent);
+  border: 1px solid rgba(45, 212, 191, 0.15);
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* How it works animated flow */
+.how-flow {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2.25rem;
+  position: relative;
+}
+
+.how-step {
+  position: relative;
+  padding: 1.35rem 1.25rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: linear-gradient(165deg, var(--bg-elevated), var(--bg-tertiary));
+  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
+}
+
+.how-step.is-active {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 16px 40px rgba(0, 0, 0, 0.25);
+  transform: translateY(-3px);
+}
+
+.how-step-num {
+  width: 36px;
+  height: 36px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  font-weight: 750;
+  font-size: 0.9rem;
+  margin-bottom: 0.85rem;
+  background: var(--accent-dim);
+  border: 1px solid var(--accent-border);
+  color: var(--accent);
+}
+
+.how-step.is-active .how-step-num {
+  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
+  color: #042f1a;
+  border-color: transparent;
+  box-shadow: 0 4px 14px rgba(45, 212, 191, 0.3);
+}
+
+.how-step h3 {
+  font-size: 1.05rem;
+  margin: 0 0 0.45rem;
+}
+
+.how-step p {
+  margin: 0;
+  font-size: 0.88rem;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.how-step code {
+  font-family: var(--mono);
+  font-size: 0.8em;
+  color: var(--accent);
+}
+
+/* Pitch strip under hero meta */
+.pitch-points {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.85rem;
+  margin-top: 2.5rem;
+}
+
+.pitch-point {
+  padding: 1rem 1.1rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: rgba(15, 17, 23, 0.55);
+}
+
+.pitch-point strong {
+  display: block;
+  font-size: 0.9rem;
+  margin-bottom: 0.3rem;
+  color: var(--text);
+}
+
+.pitch-point span {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  line-height: 1.45;
+}
+
+@media (max-width: 960px) {
+  .demo-stage {
+    grid-template-columns: 1fr;
+  }
+
+  .demo-stage-copy {
+    order: -1;
+    text-align: center;
+  }
+
+  .demo-stage-copy ul {
+    text-align: left;
+    max-width: 28rem;
+    margin-inline: auto;
+  }
+
+  .hero-job-card {
+    position: relative;
+    right: auto;
+    bottom: auto;
+    width: 100%;
+    margin-top: 0.65rem;
+    animation: none;
+  }
+
+  .hero-visual .hero-frame.mock-frame {
+    transform: none;
+  }
+
+  .hero-visual:hover .hero-frame.mock-frame {
+    transform: none;
+  }
+
+  .mock-body {
+    grid-template-columns: 1fr;
+  }
+
+  .mock-sidebar {
+    display: none;
+  }
+
+  .how-flow {
+    grid-template-columns: 1fr;
+  }
+
+  .pitch-points {
+    grid-template-columns: 1fr;
+  }
+
+  .mock-stat-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-job-card,
+  .job-step-spinner,
+  .mock-update,
+  .mock-titlebar-meta .live-dot {
+    animation: none !important;
+  }
+
+  .demo-panel,
+  .mock-table tr,
+  .mock-event-line {
+    animation: none !important;
+  }
+}