diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
index 2591b5b..bdfcf75 100644
Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
index d55e598..0533f39 100644
Binary files a/public/favicon-16x16.png and b/public/favicon-16x16.png differ
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
index 750931e..a791b65 100644
Binary files a/public/favicon-32x32.png and b/public/favicon-32x32.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index 1f58814..562e86d 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
index fcd0200..c7a99c8 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,24 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
-  <!-- background -->
-  <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-
-  <!-- shield outline (audit boundary) -->
-  <rect x="32" y="32" width="136" height="136" rx="28"
-        fill="none" stroke="#3DDBD9" stroke-width="10"/>
-
-  <!-- T — horizontal bar -->
-  <line x1="62" y1="68" x2="138" y2="68"
-        stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-  <!-- T — central stem -->
-  <line x1="100" y1="68" x2="100" y2="104"
-        stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-
-  <!-- W — left V -->
-  <polyline points="62,104 80,140 100,104"
-            fill="none" stroke="#3DDBD9" stroke-width="12"
-            stroke-linecap="round" stroke-linejoin="round"/>
-  <!-- W — right V -->
-  <polyline points="100,104 120,140 138,104"
-            fill="none" stroke="#3DDBD9" stroke-width="12"
-            stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#0d0f22"/>
+      <stop offset="1" stop-color="#020208"/>
+    </linearGradient>
+    <linearGradient id="neon" x1="7" y1="0" x2="25" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#22e5f2"/>
+      <stop offset="1" stop-color="#f05cd8"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="7.5" fill="url(#bg)"/>
+  <g fill="none" stroke="url(#neon)" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M7 9H25M16 9V17M7 17L11.5 25L16 17M16 17L20.5 25L25 17"/>
+  </g>
 </svg>
diff --git a/public/logo-dark.svg b/public/logo-dark.svg
index 6972df6..a092aaf 100644
--- a/public/logo-dark.svg
+++ b/public/logo-dark.svg
@@ -1,25 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 200" fill="none">
-  <!-- icon (same artwork, white seal on dark background) -->
-  <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-  <rect x="32" y="32" width="136" height="136" rx="28"
-        fill="none" stroke="#3DDBD9" stroke-width="10"/>
-  <line x1="62" y1="68" x2="138" y2="68"
-        stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-  <line x1="100" y1="68" x2="100" y2="104"
-        stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-  <polyline points="62,104 80,140 100,104"
-            fill="none" stroke="#3DDBD9" stroke-width="12"
-            stroke-linecap="round" stroke-linejoin="round"/>
-  <polyline points="100,104 120,140 138,104"
-            fill="none" stroke="#3DDBD9" stroke-width="12"
-            stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- icon: the desktop app's mark, neon strokes on a near-black tile -->
+  <defs>
+    <linearGradient id="tw-bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0d0f22"/><stop offset="1" stop-color="#020208"/></linearGradient>
+    <linearGradient id="tw-neon" x1="43.75" y1="0" x2="156.25" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22e5f2"/><stop offset="1" stop-color="#f05cd8"/></linearGradient>
+  </defs>
+  <rect width="200" height="200" rx="46" fill="url(#tw-bg)"/>
+  <path d="M43.75 56.25H156.25M100 56.25V106.25M43.75 106.25L71.875 156.25L100 106.25M100 106.25L128.125 156.25L156.25 106.25"
+        fill="none" stroke="url(#tw-neon)" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
 
   <!-- wordmark — light text for dark backgrounds -->
   <text x="240" y="128"
         font-family="Geist, 'Inter Display', Inter, system-ui, -apple-system, 'Helvetica Neue', sans-serif"
         font-size="92"
         letter-spacing="-2"
-        fill="#F8FAFC">
+        fill="#ffffff">
     <tspan font-weight="500">Think</tspan><tspan font-weight="700">Watch</tspan>
   </text>
 </svg>
diff --git a/public/logo.svg b/public/logo.svg
index 8b15b84..99786fe 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,25 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 200" fill="none">
-  <!-- icon -->
-  <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-  <rect x="32" y="32" width="136" height="136" rx="28"
-        fill="none" stroke="#3DDBD9" stroke-width="10"/>
-  <line x1="62" y1="68" x2="138" y2="68"
-        stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-  <line x1="100" y1="68" x2="100" y2="104"
-        stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-  <polyline points="62,104 80,140 100,104"
-            fill="none" stroke="#3DDBD9" stroke-width="12"
-            stroke-linecap="round" stroke-linejoin="round"/>
-  <polyline points="100,104 120,140 138,104"
-            fill="none" stroke="#3DDBD9" stroke-width="12"
-            stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- icon: the desktop app's mark, neon strokes on a near-black tile -->
+  <defs>
+    <linearGradient id="tw-bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0d0f22"/><stop offset="1" stop-color="#020208"/></linearGradient>
+    <linearGradient id="tw-neon" x1="43.75" y1="0" x2="156.25" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22e5f2"/><stop offset="1" stop-color="#f05cd8"/></linearGradient>
+  </defs>
+  <rect width="200" height="200" rx="46" fill="url(#tw-bg)"/>
+  <path d="M43.75 56.25H156.25M100 56.25V106.25M43.75 106.25L71.875 156.25L100 106.25M100 106.25L128.125 156.25L156.25 106.25"
+        fill="none" stroke="url(#tw-neon)" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
 
   <!-- wordmark -->
   <text x="240" y="128"
         font-family="Geist, 'Inter Display', Inter, system-ui, -apple-system, 'Helvetica Neue', sans-serif"
         font-size="92"
         letter-spacing="-2"
-        fill="#1E2A4A">
+        fill="#0b0c0e">
     <tspan font-weight="500">Think</tspan><tspan font-weight="700">Watch</tspan>
   </text>
 </svg>
diff --git a/src/components/LiteDownload.astro b/src/components/LiteDownload.astro
index 622b31d..9b5e87b 100644
--- a/src/components/LiteDownload.astro
+++ b/src/components/LiteDownload.astro
@@ -31,11 +31,11 @@ const t = zh
   : { install: "Install", mac: "Download for macOS", win: "Download for Windows", linux: "Download for Linux", version: "Version" };
 
 const base =
-  "inline-flex min-h-11 items-center justify-center rounded-[10px] px-[22px] py-3 text-base font-semibold transition-colors";
+  "inline-flex min-h-11 items-center justify-center rounded-full px-[22px] py-3 text-base font-semibold transition";
 const look =
   variant === "solid"
-    ? "bg-[var(--color-brand-1)] text-[var(--color-bg)] hover:bg-[var(--color-brand-2)]"
-    : "border border-[var(--color-brand-1)] text-[var(--color-brand-1)] hover:border-[var(--color-brand-2)] hover:text-[var(--color-brand-2)]";
+    ? "bg-[#f7f8f8] text-[#08090a] hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)]"
+    : "border border-white/15 text-white hover:bg-white/5 hover:border-white/25";
 ---
 
 <div
diff --git a/src/components/Seo.astro b/src/components/Seo.astro
index d5a49f4..e24126a 100644
--- a/src/components/Seo.astro
+++ b/src/components/Seo.astro
@@ -99,6 +99,6 @@ const allJsonLd = [organization, ...jsonLd].map((item) => JSON.stringify(item).r
 <meta name="robots" content={robots} />
 <meta name="googlebot" content={robots} />
 
-<meta name="theme-color" content="#0b1220" />
+<meta name="theme-color" content="#08090a" />
 
 {allJsonLd.map((json) => <script type="application/ld+json" set:html={json} />)}
diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
index 290548e..6cc29d2 100644
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -1,6 +1,8 @@
 ---
 import { getLang, t, localePath } from "~/i18n";
 
+import TwMark from "./TwMark.astro";
+
 const lang = getLang(Astro);
 const s = t(lang);
 const year = new Date().getFullYear();
@@ -11,14 +13,7 @@ const year = new Date().getFullYear();
   <div class="container-page py-10 sm:py-12 grid gap-8 sm:gap-10 sm:grid-cols-2 md:grid-cols-4 text-sm">
     <div class="sm:col-span-2 md:col-span-2">
       <div class="flex items-center gap-2 mb-3">
-        <svg class="w-6 h-6 shrink-0" viewBox="0 0 200 200" fill="none" aria-hidden="true">
-          <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-          <rect x="32" y="32" width="136" height="136" rx="28" fill="none" stroke="#3DDBD9" stroke-width="10"/>
-          <line x1="62" y1="68" x2="138" y2="68" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-          <line x1="100" y1="68" x2="100" y2="104" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-          <polyline points="62,104 80,140 100,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-          <polyline points="100,104 120,140 138,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        <TwMark id="m-footer" size={22} />
         <span class="text-white"><span class="font-medium">Think</span><span class="font-bold">Watch</span></span>
       </div>
       <p class="text-[var(--color-muted)] max-w-sm">
diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro
index 5dec17b..262670a 100644
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -3,6 +3,7 @@ import { getLang, t, localePath, type Lang } from "~/i18n";
 import { getStarCount, formatStars } from "~/lib/github";
 import { findDoc } from "~/content/docs/_meta";
 import SearchModal from "./SearchModal.astro";
+import TwMark from "./TwMark.astro";
 
 const lang = getLang(Astro);
 const s = t(lang);
@@ -58,17 +59,10 @@ const menuLabel = lang === "zh-CN" ? "菜单" : "Menu";
 const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
 ---
 
-<header class="sticky top-0 z-50 backdrop-blur-md bg-[var(--color-bg)]/60 border-b border-white/5">
+<header class="sticky top-0 z-50 backdrop-blur-md backdrop-saturate-150 bg-[var(--color-bg)]/70 border-b border-white/[0.07]">
   <div class="container-page flex items-center justify-between h-16 gap-3">
     <a href={localePath(lang, "/")} class="flex items-center gap-2 sm:gap-2.5 group shrink-0">
-      <svg class="w-7 h-7 sm:w-8 sm:h-8 shrink-0" viewBox="0 0 200 200" fill="none" aria-hidden="true">
-        <rect width="200" height="200" rx="40" fill="#1E2A4A"/>
-        <rect x="32" y="32" width="136" height="136" rx="28" fill="none" stroke="#3DDBD9" stroke-width="10"/>
-        <line x1="62" y1="68" x2="138" y2="68" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-        <line x1="100" y1="68" x2="100" y2="104" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round"/>
-        <polyline points="62,104 80,140 100,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-        <polyline points="100,104 120,140 138,104" fill="none" stroke="#3DDBD9" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
+      <TwMark id="m-header" size={26} />
       <span class="text-base sm:text-lg tracking-tight text-white">
         <span class="font-medium">Think</span><span class="font-bold">Watch</span>
       </span>
@@ -80,7 +74,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
         <a
           href={l.href}
           aria-current={l.active ? "page" : undefined}
-          class:list={["transition-colors", l.active ? "text-[var(--color-brand-1)]" : "hover:text-white"]}
+          class:list={["transition-colors", l.active ? "text-white" : "hover:text-white"]}
         >
           {l.label}
         </a>
@@ -150,7 +144,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
       <!-- Desktop CTA -->
       <a
         href={localePath(lang, "/thinkwatch#quickstart")}
-        class="hidden sm:inline-flex items-center text-sm font-medium px-4 h-9 rounded-md bg-brand-gradient text-black hover:brightness-110 transition"
+        class="hidden sm:inline-flex items-center text-sm font-medium px-4 h-9 rounded-full bg-[#f7f8f8] text-[#08090a] hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)] transition"
       >
         {s.common.getStarted}
       </a>
@@ -192,7 +186,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
               aria-current={l.active ? "page" : undefined}
               class:list={[
                 "block py-3 text-base transition-colors border-b border-white/5",
-                l.active ? "text-[var(--color-brand-1)]" : "text-[var(--color-muted)] hover:text-white",
+                l.active ? "text-white" : "text-[var(--color-muted)] hover:text-white",
               ]}
             >
               {l.label}
@@ -202,7 +196,7 @@ const closeLabel = lang === "zh-CN" ? "关闭" : "Close";
         <li>
           <a
             href={localePath(lang, "/thinkwatch#quickstart")}
-            class="mt-4 inline-flex items-center justify-center w-full px-4 py-3 rounded-lg bg-brand-gradient text-black font-medium hover:brightness-110 transition"
+            class="mt-4 inline-flex items-center justify-center w-full px-4 py-3 rounded-full bg-[#f7f8f8] text-[#08090a] font-medium hover:bg-white transition"
           >
             {s.common.getStarted}
           </a>
diff --git a/src/components/TwMark.astro b/src/components/TwMark.astro
new file mode 100644
index 0000000..eae5479
--- /dev/null
+++ b/src/components/TwMark.astro
@@ -0,0 +1,110 @@
+---
+// The ThinkWatch Lite mark as the desktop app draws it on its launch screen:
+// four strokes forming "TW", a neon gradient along them (the brand pair, which
+// the page's accent tokens follow), and optionally a blurred glow and a
+// stroke-by-stroke draw. Coordinates and lengths match the app
+// (ThinkWatch-Lite src/launch/LaunchScreen.tsx, src-tauri/icons/render.py).
+interface Props {
+  /** Unique per page: the gradient and filter are referenced by id */
+  id: string;
+  size?: number;
+  /** Draw the strokes one by one when the page loads */
+  draw?: boolean;
+  /** A soft glow behind the strokes that breathes */
+  glow?: boolean;
+  class?: string;
+}
+const { id, size = 20, draw = false, glow = false, class: className } = Astro.props;
+const V = Math.hypot(4.5, 8);
+const strokes: [string, number][] = [
+  ["M7 9H25", 18],
+  ["M16 9V17", 8],
+  ["M7 17L11.5 25L16 17", 2 * V],
+  ["M16 17L20.5 25L25 17", 2 * V],
+];
+---
+
+<svg viewBox="0 0 32 32" width={size} height={size} class:list={["tw-mark", className, draw && "tw-draw", glow && "tw-glowing"]} aria-hidden="true">
+  <defs>
+    <linearGradient id={`${id}-g`} x1="7" y1="0" x2="25" y2="0" gradientUnits="userSpaceOnUse">
+      <stop offset="0" style="stop-color: var(--a1-hex, var(--color-brand-1))" />
+      <stop offset="1" style="stop-color: var(--a2-hex, var(--color-brand-3))" />
+    </linearGradient>
+    {glow && (
+      <filter id={`${id}-f`} x="-60%" y="-60%" width="220%" height="220%">
+        <feGaussianBlur stdDeviation="1.4" />
+      </filter>
+    )}
+  </defs>
+  {glow && (
+    <g class="tw-glow" filter={`url(#${id}-f)`}>
+      {strokes.map(([d]) => <path d={d} stroke={`url(#${id}-g)`} stroke-width="3.8" />)}
+    </g>
+  )}
+  {strokes.map(([d, len], i) => (
+    <path
+      d={d}
+      stroke={`url(#${id}-g)`}
+      stroke-width="2.8"
+      class="tw-stroke"
+      style={draw ? `stroke-dasharray:${len} ${len * 2};stroke-dashoffset:${len};animation-delay:${200 + i * 160}ms` : undefined}
+    />
+  ))}
+</svg>
+
+<style>
+  .tw-mark {
+    overflow: visible;
+    flex-shrink: 0;
+  }
+  .tw-mark path {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .tw-draw .tw-stroke {
+    animation: tw-draw 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+  }
+  @keyframes tw-draw {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+  .tw-glow {
+    opacity: 0.55;
+  }
+  .tw-draw .tw-glow {
+    opacity: 0;
+    animation:
+      tw-light 600ms ease-out 900ms forwards,
+      tw-breathe 3.2s ease-in-out 1.5s infinite;
+  }
+  .tw-glowing:not(.tw-draw) .tw-glow {
+    animation: tw-breathe 3.2s ease-in-out infinite;
+  }
+  @keyframes tw-light {
+    to {
+      opacity: 0.7;
+    }
+  }
+  @keyframes tw-breathe {
+    0%,
+    100% {
+      opacity: 0.7;
+    }
+    50% {
+      opacity: 0.3;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tw-draw .tw-stroke {
+      animation: none;
+      stroke-dashoffset: 0 !important;
+    }
+    .tw-glow,
+    .tw-draw .tw-glow {
+      animation: none;
+      opacity: 0.55;
+    }
+  }
+</style>
diff --git a/src/components/hero/HeroFallback.tsx b/src/components/hero/HeroFallback.tsx
index 7ffd221..d522343 100644
--- a/src/components/hero/HeroFallback.tsx
+++ b/src/components/hero/HeroFallback.tsx
@@ -15,21 +15,21 @@ export default function HeroFallback() {
       >
         <defs>
           <radialGradient id="hf-core" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#3DDBD9" stopOpacity="0.35" />
-            <stop offset="60%" stopColor="#8EEBEA" stopOpacity="0.14" />
-            <stop offset="100%" stopColor="#8EEBEA" stopOpacity="0" />
+            <stop offset="0%" stopColor="#22E5F2" stopOpacity="0.35" />
+            <stop offset="60%" stopColor="#F05CD8" stopOpacity="0.14" />
+            <stop offset="100%" stopColor="#F05CD8" stopOpacity="0" />
           </radialGradient>
           <radialGradient id="hf-orb-l" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#3DDBD9" stopOpacity="0.2" />
-            <stop offset="100%" stopColor="#3DDBD9" stopOpacity="0" />
+            <stop offset="0%" stopColor="#22E5F2" stopOpacity="0.2" />
+            <stop offset="100%" stopColor="#22E5F2" stopOpacity="0" />
           </radialGradient>
           <radialGradient id="hf-orb-r" cx="50%" cy="50%" r="50%">
-            <stop offset="0%" stopColor="#8EEBEA" stopOpacity="0.18" />
-            <stop offset="100%" stopColor="#8EEBEA" stopOpacity="0" />
+            <stop offset="0%" stopColor="#F05CD8" stopOpacity="0.18" />
+            <stop offset="100%" stopColor="#F05CD8" stopOpacity="0" />
           </radialGradient>
           <linearGradient id="hf-line" x1="0" y1="0" x2="1" y2="0">
-            <stop offset="0%" stopColor="#3DDBD9" stopOpacity="0" />
-            <stop offset="50%" stopColor="#8EEBEA" stopOpacity="0.6" />
+            <stop offset="0%" stopColor="#22E5F2" stopOpacity="0" />
+            <stop offset="50%" stopColor="#F05CD8" stopOpacity="0.6" />
             <stop offset="100%" stopColor="#E5C07B" stopOpacity="0" />
           </linearGradient>
         </defs>
@@ -45,13 +45,13 @@ export default function HeroFallback() {
         <g transform="translate(400 300)" fill="none" strokeLinecap="round">
           <polygon
             points="100,0 70,70 0,100 -70,70 -100,0 -70,-70 0,-100 70,-70"
-            stroke="#3DDBD9"
+            stroke="#22E5F2"
             strokeOpacity="0.55"
             strokeWidth="1.5"
           />
           <polygon
             points="130,0 92,92 0,130 -92,92 -130,0 -92,-92 0,-130 92,-92"
-            stroke="#8EEBEA"
+            stroke="#F05CD8"
             strokeOpacity="0.35"
             strokeWidth="1"
             transform="rotate(22.5)"
diff --git a/src/components/hero/HeroScene.tsx b/src/components/hero/HeroScene.tsx
index f9b9b30..86099a5 100644
--- a/src/components/hero/HeroScene.tsx
+++ b/src/components/hero/HeroScene.tsx
@@ -3,8 +3,8 @@ import { Suspense, useEffect, useMemo, useRef } from "react";
 import * as THREE from "three";
 
 // Brand palette: logo teal flowing in, light teal flowing out, a faint amber halo.
-const COLOR_CYAN = new THREE.Color("#3DDBD9");
-const COLOR_VIOLET = new THREE.Color("#8EEBEA");
+const COLOR_CYAN = new THREE.Color("#22E5F2");
+const COLOR_VIOLET = new THREE.Color("#F05CD8");
 const COLOR_PINK = new THREE.Color("#E5C07B");
 
 /**
diff --git a/src/components/home/CompareEditions.astro b/src/components/home/CompareEditions.astro
index 629c83a..891d780 100644
--- a/src/components/home/CompareEditions.astro
+++ b/src/components/home/CompareEditions.astro
@@ -24,7 +24,7 @@ const rows = ["runsAs", "builtFor", "status", "license"] as const;
       <>
         <div class="border-b border-[var(--color-border)] py-[18px] font-mono text-sm text-[var(--color-muted)]">{c.rows[row]}</div>
         {editions.map((e) => (
-          <div class="border-b border-[var(--color-border)] py-[18px] leading-relaxed text-[#cbd5e1]">{e.v[row]}</div>
+          <div class="border-b border-[var(--color-border)] py-[18px] leading-relaxed text-[#c3c7ce]">{e.v[row]}</div>
         ))}
       </>
     ))}
@@ -38,7 +38,7 @@ const rows = ["runsAs", "builtFor", "status", "license"] as const;
           {rows.map((row) => (
             <>
               <dt class="font-mono text-xs leading-6 text-[var(--color-muted)]">{c.rows[row]}</dt>
-              <dd class="leading-relaxed text-[#cbd5e1]">{e.v[row]}</dd>
+              <dd class="leading-relaxed text-[#c3c7ce]">{e.v[row]}</dd>
             </>
           ))}
         </dl>
diff --git a/src/components/home/CoreStrip.astro b/src/components/home/CoreStrip.astro
index 272999c..d973f5b 100644
--- a/src/components/home/CoreStrip.astro
+++ b/src/components/home/CoreStrip.astro
@@ -14,7 +14,7 @@ const installCommand =
 
 <div class="border-y border-[var(--color-border)]">
   <div class="container-page grid gap-6 py-10 md:py-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-center lg:gap-12">
-    <p class="m-0 max-w-3xl text-base leading-relaxed text-[#cbd5e1] sm:text-xl">
+    <p class="m-0 max-w-3xl text-base leading-relaxed text-[#c3c7ce] sm:text-xl">
       {c.a}<a href={localePath(lang, "/core")} class="font-semibold text-white underline decoration-[var(--color-brand-1)]/50 underline-offset-4 hover:text-[var(--color-brand-1)]">{c.name}</a>{c.b}
     </p>
     <div class="flex min-w-0 flex-col gap-3">
diff --git a/src/components/home/HomeHero.astro b/src/components/home/HomeHero.astro
index fa9591b..8b232b8 100644
--- a/src/components/home/HomeHero.astro
+++ b/src/components/home/HomeHero.astro
@@ -27,20 +27,20 @@ const zh = lang === "zh-CN";
         {c.h1a} <span class="text-shimmer">{c.h1b}</span>
       </h1>
       {/* 背景图形从这一段后面穿过：一圈深色阴影让字压得住它 */}
-      <p class="reveal text-pretty text-[17px] leading-relaxed text-[#dbe3ee] [text-shadow:0_0_14px_rgba(11,18,32,0.95),0_0_4px_rgba(11,18,32,0.9)] sm:text-xl" style="animation-delay: 260ms;">{c.sub}</p>
+      <p class="reveal text-pretty text-[17px] leading-relaxed text-[#dbe3ee] [text-shadow:0_0_14px_rgba(8, 9, 10,0.95),0_0_4px_rgba(8, 9, 10,0.9)] sm:text-xl" style="animation-delay: 260ms;">{c.sub}</p>
 
       <div class="reveal mt-2 grid gap-4 sm:grid-cols-2" style="animation-delay: 400ms;">
-        <a href={localePath(lang, "/thinkwatch")} class="door group flex h-full flex-col gap-2.5 rounded-[14px] border border-[var(--color-border-strong)] bg-[rgba(17,26,46,0.85)] p-6 backdrop-blur-sm">
+        <a href={localePath(lang, "/thinkwatch")} class="door group flex h-full flex-col gap-2.5 rounded-[14px] border border-[var(--color-border-strong)] bg-[rgba(15, 16, 18,0.85)] p-6 backdrop-blur-sm">
           <span class="font-mono text-xs uppercase tracking-[0.08em] text-[var(--color-muted)]">{c.doors.teams.label}</span>
           <span class="text-2xl font-semibold tracking-tight text-white">{c.doors.teams.name}</span>
-          <span class="text-[15px] leading-normal text-[#cbd5e1]">{c.doors.teams.text}</span>
-          <span class="cta mt-auto inline-flex min-h-11 items-center self-start rounded-[10px] bg-[var(--color-brand-1)] px-[18px] text-[15px] font-semibold text-[var(--color-bg)]">{c.doors.teams.cta}</span>
+          <span class="text-[15px] leading-normal text-[#c3c7ce]">{c.doors.teams.text}</span>
+          <span class="cta mt-auto inline-flex min-h-11 items-center self-start rounded-full bg-[#f7f8f8] px-[18px] text-[15px] font-semibold text-[#08090a]">{c.doors.teams.cta}</span>
         </a>
-        <a href={localePath(lang, "/lite")} class="door group flex h-full flex-col gap-2.5 rounded-[14px] border border-[var(--color-border-strong)] bg-[rgba(17,26,46,0.85)] p-6 backdrop-blur-sm">
+        <a href={localePath(lang, "/lite")} class="door group flex h-full flex-col gap-2.5 rounded-[14px] border border-[var(--color-border-strong)] bg-[rgba(15, 16, 18,0.85)] p-6 backdrop-blur-sm">
           <span class="font-mono text-xs uppercase tracking-[0.08em] text-[var(--color-muted)]">{c.doors.machine.label}</span>
           <span class="text-2xl font-semibold tracking-tight text-white">{c.doors.machine.name}</span>
-          <span class="text-[15px] leading-normal text-[#cbd5e1]">{c.doors.machine.text}</span>
-          <span class="cta mt-auto inline-flex min-h-11 items-center self-start rounded-[10px] border border-[var(--color-brand-1)] px-[17px] text-[15px] font-semibold text-[var(--color-brand-1)]">{c.doors.machine.cta}</span>
+          <span class="text-[15px] leading-normal text-[#c3c7ce]">{c.doors.machine.text}</span>
+          <span class="cta mt-auto inline-flex min-h-11 items-center self-start rounded-full border border-white/15 px-[17px] text-[15px] font-semibold text-white">{c.doors.machine.cta}</span>
         </a>
       </div>
     </div>
@@ -56,7 +56,7 @@ const zh = lang === "zh-CN";
 
 <style>
   .door { transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease; }
-  .door:hover { border-color: var(--color-brand-1); box-shadow: 0 0 0 1px rgba(61, 219, 217, 0.35), 0 18px 48px -18px rgba(61, 219, 217, 0.45); transform: translateY(-2px); }
-  .door:hover .cta { box-shadow: 0 8px 32px -6px rgba(61, 219, 217, 0.55); }
+  .door:hover { border-color: var(--color-brand-1); box-shadow: 0 0 0 1px rgba(34, 229, 242, 0.35), 0 18px 48px -18px rgba(34, 229, 242, 0.45); transform: translateY(-2px); }
+  .door:hover .cta { box-shadow: 0 8px 32px -6px rgba(34, 229, 242, 0.55); }
   .door:focus-visible { outline: 2px solid var(--color-brand-1); outline-offset: 3px; }
 </style>
diff --git a/src/components/home/LiteBand.astro b/src/components/home/LiteBand.astro
index 7bcc5b8..054f800 100644
--- a/src/components/home/LiteBand.astro
+++ b/src/components/home/LiteBand.astro
@@ -34,7 +34,7 @@ const zh = lang === "zh-CN";
       {c.points.map((p) => (
         <div class="flex flex-col gap-1.5">
           <h3 class="m-0 text-[17px] font-semibold text-white">{p.t}</h3>
-          <p class="m-0 text-[15px] leading-relaxed text-[#cbd5e1]">{p.b}</p>
+          <p class="m-0 text-[15px] leading-relaxed text-[#c3c7ce]">{p.b}</p>
         </div>
       ))}
     </div>
@@ -42,7 +42,7 @@ const zh = lang === "zh-CN";
     <div class="flex flex-wrap items-center gap-2.5">
       <span class="rounded-full bg-[var(--color-brand-1)] px-3 py-1 text-[13px] font-medium text-[var(--color-bg)]">{c.pills[0]}</span>
       {c.pills.slice(1).map((pill) => (
-        <span class="rounded-full border border-[var(--color-border-strong)] px-3 py-1 text-[13px] text-[#cbd5e1]">{pill}</span>
+        <span class="rounded-full border border-[var(--color-border-strong)] px-3 py-1 text-[13px] text-[#c3c7ce]">{pill}</span>
       ))}
     </div>
     <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-5">
diff --git a/src/components/home/Marquee.astro b/src/components/home/Marquee.astro
index 2ac207b..ab1742b 100644
--- a/src/components/home/Marquee.astro
+++ b/src/components/home/Marquee.astro
@@ -9,7 +9,7 @@ const clients = ["Claude Code", "Codex", "Cursor", "Continue", "Cline", "OpenAI
 <div class="flex items-center gap-6 border-y border-[var(--color-border)] py-6 sm:gap-10">
   <span class="shrink-0 pl-5 font-mono text-xs uppercase tracking-[0.08em] text-[var(--color-muted)] sm:pl-[max(1.25rem,calc((100vw-80rem)/2+1.25rem))]">{c.worksWith}</span>
   <div class="marquee min-w-0 flex-1 overflow-hidden">
-    <div class="marquee-track flex w-max gap-14 text-base text-[#cbd5e1]">
+    <div class="marquee-track flex w-max gap-14 text-base text-[#c3c7ce]">
       {clients.map((name) => <span>{name}</span>)}
       {clients.map((name) => <span aria-hidden="true">{name}</span>)}
     </div>
diff --git a/src/components/home/Questions.astro b/src/components/home/Questions.astro
index 31de6b9..2035cb7 100644
--- a/src/components/home/Questions.astro
+++ b/src/components/home/Questions.astro
@@ -13,7 +13,7 @@ const t = homeCopy[lang].trace;
       <div class="font-mono text-[13px] uppercase tracking-[0.08em] text-[var(--color-muted)]">{c.eyebrow}</div>
       <div class="flex flex-col gap-4">
         {c.items.map((item) => (
-          <div class="flex flex-col gap-2 rounded-2xl border border-[var(--color-border-strong)] bg-[#0f1729] p-6">
+          <div class="flex flex-col gap-2 rounded-2xl border border-[var(--color-border-strong)] bg-[#0f1012] p-6">
             <div class="font-mono text-[13px] text-[var(--color-brand-1)]">{item.tag}</div>
             <h3 class="text-xl font-semibold text-white sm:text-[22px]">{item.title}</h3>
             <p class="text-base leading-relaxed text-[var(--color-muted)]">{item.body}</p>
@@ -22,8 +22,8 @@ const t = homeCopy[lang].trace;
       </div>
     </div>
 
-    <div class="min-w-0 overflow-hidden rounded-[14px] border border-[var(--color-border-strong)] bg-[rgba(17,26,46,0.92)] font-mono text-[13px] shadow-[0_40px_120px_-40px_rgba(61,219,217,0.35)] sm:text-sm">
-      <div class="flex items-center justify-between gap-3 border-b border-[#22304f] px-4 py-3.5 text-[var(--color-muted)] sm:px-5">
+    <div class="min-w-0 overflow-hidden rounded-[14px] border border-[var(--color-border-strong)] bg-[rgba(15, 16, 18,0.92)] font-mono text-[13px] shadow-[0_40px_120px_-40px_rgba(34, 229, 242,0.35)] sm:text-sm">
+      <div class="flex items-center justify-between gap-3 border-b border-[#26282c] px-4 py-3.5 text-[var(--color-muted)] sm:px-5">
         <span class="flex items-center gap-2.5">
           <span class="flex gap-1.5" aria-hidden="true"><span class="h-2.5 w-2.5 rounded-full bg-[var(--color-border-strong)]"></span><span class="h-2.5 w-2.5 rounded-full bg-[var(--color-border-strong)]"></span><span class="h-2.5 w-2.5 rounded-full bg-[var(--color-border-strong)]"></span></span>
           <span><span class="text-[var(--color-brand-1)]">POST</span> /v1/messages</span>
@@ -39,7 +39,7 @@ const t = homeCopy[lang].trace;
         <div class="trace-row grid grid-cols-[88px_minmax(0,1fr)] gap-3 rounded-md p-1.5 sm:grid-cols-[110px_minmax(0,1fr)] sm:gap-4" style="animation-delay: 3.4s;"><span class="text-[var(--color-muted)]">{t.redaction[0]}</span><span class="text-[#e6ebf2]">{t.redaction[1]}</span></div>
         <div class="trace-row trace-flag grid grid-cols-[88px_minmax(0,1fr)] gap-3 rounded-md p-1.5 sm:grid-cols-[110px_minmax(0,1fr)] sm:gap-4" style="animation-delay: 4.1s;"><span class="text-[var(--color-muted)]">{t.tool[0]}</span><span class="text-[var(--color-accent)]">{t.tool[1]}<span class="blink ml-1 inline-block h-4 w-2 bg-[var(--color-brand-1)] align-[-2px]" aria-hidden="true"></span></span></div>
       </div>
-      <div class="border-t border-[#22304f] px-4 py-3 text-xs text-[var(--color-muted)] sm:px-5">{t.note}</div>
+      <div class="border-t border-[#26282c] px-4 py-3 text-xs text-[var(--color-muted)] sm:px-5">{t.note}</div>
     </div>
   </div>
 </section>
diff --git a/src/components/home/ThinkWatchBand.astro b/src/components/home/ThinkWatchBand.astro
index 3ee809a..94851c7 100644
--- a/src/components/home/ThinkWatchBand.astro
+++ b/src/components/home/ThinkWatchBand.astro
@@ -21,7 +21,7 @@ const c = homeCopy[lang].tw;
             lang === "zh-CN" ? "text-[28px] leading-[1.35] sm:text-[34px] lg:text-[40px]" : "text-[32px] leading-[1.15] sm:text-[40px] lg:text-[46px]",
           ]}
         >{c.title}</h2>
-        <p class="text-[17px] leading-relaxed text-[#cbd5e1] sm:text-lg">{c.sub}</p>
+        <p class="text-[17px] leading-relaxed text-[#c3c7ce] sm:text-lg">{c.sub}</p>
         <a href={localePath(lang, "/thinkwatch")} class="inline-flex min-h-11 items-center self-start text-[17px] font-medium text-[var(--color-brand-1)] hover:text-[var(--color-brand-2)]">{c.cta}</a>
       </div>
       <div class="grid gap-7 sm:grid-cols-2">
@@ -73,7 +73,7 @@ const c = homeCopy[lang].tw;
         >
           {c.quoteA}<span class="text-shimmer">{c.quoteEm}</span>{c.quoteB}
         </p>
-        <p class="max-w-3xl text-[17px] leading-relaxed text-[#cbd5e1] sm:text-lg">{c.quoteBody}</p>
+        <p class="max-w-3xl text-[17px] leading-relaxed text-[#c3c7ce] sm:text-lg">{c.quoteBody}</p>
       </div>
     </div>
   </div>
@@ -82,8 +82,8 @@ const c = homeCopy[lang].tw;
 <style>
   .step { animation: step-cycle 12s ease-in-out infinite; }
   @keyframes step-cycle {
-    0%, 15% { border-color: #3ddbd9; background: #15223d; box-shadow: 0 10px 36px -16px rgba(61, 219, 217, 0.6); }
-    18%, 100% { border-color: #2a3a63; background: transparent; box-shadow: none; }
+    0%, 15% { border-color: #22e5f2; background: #16171a; box-shadow: 0 10px 36px -16px rgba(34, 229, 242, 0.6); }
+    18%, 100% { border-color: #2a2c31; background: transparent; box-shadow: none; }
   }
   @media (prefers-reduced-motion: reduce) {
     .step { animation: none; }
diff --git a/src/components/mocks/DashboardMock.tsx b/src/components/mocks/DashboardMock.tsx
index 37dc4ac..8e1fb99 100644
--- a/src/components/mocks/DashboardMock.tsx
+++ b/src/components/mocks/DashboardMock.tsx
@@ -78,7 +78,7 @@ const stats: Stat[] = [
     value: 8_420_137,
     format: (v) => fmtCompact.format(v),
     delta: "+12.4%",
-    color: "#3DDBD9",
+    color: "#22E5F2",
     spark: sparkPoints(7),
   },
   {
diff --git a/src/components/mocks/ProviderHealthMock.tsx b/src/components/mocks/ProviderHealthMock.tsx
index 104114c..49e3b9a 100644
--- a/src/components/mocks/ProviderHealthMock.tsx
+++ b/src/components/mocks/ProviderHealthMock.tsx
@@ -94,7 +94,7 @@ export default function ProviderHealthMock() {
                       background:
                         p.status === "degraded"
                           ? "linear-gradient(90deg, #E5C07B, #F2A3B3)"
-                          : "linear-gradient(90deg, #3DDBD9, #8EEBEA)",
+                          : "linear-gradient(90deg, #22E5F2, #F05CD8)",
                     }}
                   />
                 </div>
diff --git a/src/components/mocks/RateLimitMock.tsx b/src/components/mocks/RateLimitMock.tsx
index 31fd0bd..755b454 100644
--- a/src/components/mocks/RateLimitMock.tsx
+++ b/src/components/mocks/RateLimitMock.tsx
@@ -74,7 +74,7 @@ export default function RateLimitMock() {
                   height: `${pct}%`,
                   background: over
                     ? "linear-gradient(180deg, #E5C07B, #F2A3B3)"
-                    : "linear-gradient(180deg, #3DDBD9, #2A3A63)",
+                    : "linear-gradient(180deg, #22E5F2, #2A2C31)",
                   opacity: 0.4 + (i / buckets.length) * 0.6,
                 }}
               />
diff --git a/src/components/pages/CorePage.astro b/src/components/pages/CorePage.astro
index 0cb85b8..9ace317 100644
--- a/src/components/pages/CorePage.astro
+++ b/src/components/pages/CorePage.astro
@@ -87,13 +87,13 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
               c.hero.titleA
             )}<span class="text-shimmer">{c.hero.titleHighlight}</span>
           </h1>
-          <p class="reveal m-0 max-w-[38rem] text-[17px] leading-relaxed text-[#cbd5e1] sm:text-xl sm:leading-normal" style={delay(2)}>
+          <p class="reveal m-0 max-w-[38rem] text-[17px] leading-relaxed text-[#c3c7ce] sm:text-xl sm:leading-normal" style={delay(2)}>
             {c.hero.sub}
           </p>
           <div class="reveal mt-1 flex flex-col gap-3 sm:mt-2 sm:flex-row sm:flex-wrap sm:items-center sm:gap-x-6 sm:gap-y-3" style={delay(3)}>
             <a
               href="#install"
-              class="inline-flex min-h-11 items-center justify-center rounded-[10px] bg-[var(--color-brand-1)] px-[22px] py-3 text-base font-semibold text-[var(--color-bg)] transition-colors hover:bg-[var(--color-brand-2)]"
+              class="inline-flex min-h-11 items-center justify-center rounded-full bg-[#f7f8f8] px-[22px] py-3 text-base font-semibold text-[#08090a] transition hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)]"
             >
               {c.hero.ctaInstall}
             </a>
@@ -118,7 +118,7 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
           class="reveal min-w-0 overflow-hidden rounded-[14px] border border-[var(--color-border-strong)] bg-[var(--color-surface)] font-mono text-[13px] sm:text-[15px]"
           style={delay(3)}
         >
-          <div class="flex items-center gap-2.5 border-b border-[#22304f] px-5 py-3.5 text-[var(--color-muted)] sm:px-[22px]">
+          <div class="flex items-center gap-2.5 border-b border-[#26282c] px-5 py-3.5 text-[var(--color-muted)] sm:px-[22px]">
             <span class="h-2 w-2 shrink-0 rounded-full bg-[var(--color-brand-1)] pulse-dot" aria-hidden="true"></span>
             <span class="min-w-0">{c.hero.cardTitle}</span>
           </div>
@@ -159,7 +159,7 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
             <p class:list={[eyebrow, "m-0"]}>{c.install.eyebrow}</p>
             <h2 id="core-install" class={h2}>{c.install.title}</h2>
             {c.install.body.map((text) => (
-              <p class="m-0 text-base leading-relaxed text-[#cbd5e1] sm:text-[17px]">{text}</p>
+              <p class="m-0 text-base leading-relaxed text-[#c3c7ce] sm:text-[17px]">{text}</p>
             ))}
             <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
               <a href={serverDocsHref} class={textLink}>{c.install.guide}</a>
@@ -171,7 +171,7 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
             <p class={label}>{c.install.scriptLabel}</p>
             <CopyCommand command={installCommand} />
             <p class="m-0 text-[15px] leading-relaxed text-[var(--color-muted)]">{c.install.pinNote}</p>
-            <CopyCommand command={`${installCommand} -s -- --version ${c.install.versionPlaceholder}`} class="text-[#cbd5e1] text-[13px] sm:text-sm" />
+            <CopyCommand command={`${installCommand} -s -- --version ${c.install.versionPlaceholder}`} class="text-[#c3c7ce] text-[13px] sm:text-sm" />
             <p class:list={[label, "mt-4"]}>{c.install.nextLabel}</p>
             <div class="overflow-x-auto rounded-[14px] border border-[var(--color-border-strong)] bg-[var(--color-surface)] p-5 font-mono text-[13px] leading-normal sm:p-6 sm:text-[15px]">
               <ul class="m-0 flex list-none flex-col gap-3.5 p-0">
@@ -185,7 +185,7 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
             </div>
             <div class="flex min-w-0 flex-col gap-2 text-sm leading-relaxed text-[var(--color-muted)]">
               <p class="m-0">{c.install.serviceUser}</p>
-              <code class="block break-all font-mono text-[13px] text-[#cbd5e1]">{asServiceUser}</code>
+              <code class="block break-all font-mono text-[13px] text-[#c3c7ce]">{asServiceUser}</code>
             </div>
           </div>
         </div>
@@ -239,7 +239,7 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
               ]}
             >
               <span class="text-[17px] font-semibold">{row.name}</span>
-              <code class="break-words font-mono text-sm leading-relaxed text-[#cbd5e1] sm:text-[15px]">{row.crates}</code>
+              <code class="break-words font-mono text-sm leading-relaxed text-[#c3c7ce] sm:text-[15px]">{row.crates}</code>
               {row.mark === "shared" ? (
                 <span class="justify-self-start rounded-full border border-[var(--color-brand-1)] px-[11px] py-[5px] text-[13px] text-[var(--color-brand-1)] lg:justify-self-end lg:whitespace-nowrap">
                   {c.layers.sharedTag}
@@ -262,7 +262,7 @@ const fileLink = "break-all text-[var(--color-brand-1)] transition-colors hover:
         <div class="flex flex-col gap-4">
           <p class:list={[eyebrow, "m-0"]}>{c.dev.eyebrow}</p>
           <h2 class={h2}>{c.dev.title}</h2>
-          <p class="m-0 text-base leading-relaxed text-[#cbd5e1] sm:text-[17px]">{c.dev.body}</p>
+          <p class="m-0 text-base leading-relaxed text-[#c3c7ce] sm:text-[17px]">{c.dev.body}</p>
         </div>
         <div class="overflow-x-auto rounded-[14px] border border-[var(--color-border-strong)] bg-[var(--color-surface)] p-5 font-mono text-[13px] leading-normal sm:p-7 sm:text-[15px]">
           <ul class="m-0 flex list-none flex-col gap-3.5 p-0">
diff --git a/src/components/pages/ImportPage.astro b/src/components/pages/ImportPage.astro
index 84f1086..417c40f 100644
--- a/src/components/pages/ImportPage.astro
+++ b/src/components/pages/ImportPage.astro
@@ -153,7 +153,7 @@ const value = "min-w-0 break-all font-mono text-[15px] text-[var(--color-text)]"
         <div class="mt-8">
           <button
             type="button"
-            class="inline-flex min-h-11 items-center justify-center rounded-[10px] bg-[var(--color-brand-1)] px-[22px] py-3 text-base font-semibold text-[var(--color-bg)] transition-colors hover:bg-[var(--color-brand-2)]"
+            class="inline-flex min-h-11 items-center justify-center rounded-full bg-[#f7f8f8] px-[22px] py-3 text-base font-semibold text-[#08090a] transition hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)]"
             data-open
           >
             {t.open}
diff --git a/src/components/pages/LitePage.astro b/src/components/pages/LitePage.astro
index ab1f3d7..d030e41 100644
--- a/src/components/pages/LitePage.astro
+++ b/src/components/pages/LitePage.astro
@@ -9,6 +9,7 @@
 // shots are 2360×1540, the menu 664×1120, the menu bar item 178×64, all at
 // twice the size they are shown at.
 import LiteDownload from "~/components/LiteDownload.astro";
+import TwMark from "~/components/TwMark.astro";
 import Base from "~/layouts/Base.astro";
 import SiteHeader from "~/components/SiteHeader.astro";
 import SiteFooter from "~/components/SiteFooter.astro";
@@ -59,6 +60,12 @@ const remoteDocsHref = localePath(lang, "/docs/lite/remote-core");
 /** Installing and running twcore on a Linux server, in the Core docs */
 const serverDocsHref = localePath(lang, "/docs/core/server-deployment");
 const jsonLd = await liteLd(lang);
+const changelogHref = localePath(lang, "/changelog");
+/** Feature copy by id: the story and the bento pick their text from it */
+const feat = Object.fromEntries(c.features.items.map((item) => [item.id, item])) as Record<string, (typeof c.features.items)[number]>;
+/** The four stops of the scroll story, in the order a request meets them */
+const storyIds = ["routing", "security", "traffic", "overview"] as const;
+const clients = ["Claude Code", "Codex", "Claude Desktop", "opencode", "Cursor", "Zed", "Aider", "DeepSeek Harness", "Continue", "Antigravity CLI"];
 
 const delay = (i: number) => `animation-delay: ${i * 90}ms;`;
 const eyebrow = "font-mono text-[11px] uppercase tracking-[0.08em] text-[var(--color-muted)] sm:text-[13px]";
@@ -75,66 +82,81 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
 <Base title={c.meta.title} description={c.meta.description} ogCard="lite" jsonLd={jsonLd}>
   <SiteHeader />
   <main id="main">
-    <section class="relative overflow-hidden">
-      <div class="container-page grid items-center gap-12 pb-12 pt-14 sm:pb-16 sm:pt-20 lg:grid-cols-2 lg:gap-16 lg:pb-[72px] lg:pt-[88px]">
-        <div class="flex min-w-0 flex-col gap-5 sm:gap-6">
-          <p class="reveal m-0 font-mono text-[11px] uppercase tracking-[0.08em] text-[var(--color-brand-1)] sm:text-[13px]" style={delay(0)}>
-            {c.hero.eyebrow}
-          </p>
-          <h1
-            class:list={[
-              "reveal font-display m-0 text-[var(--color-text)] [text-wrap:balance]",
-              zh
-                ? "text-[30px] leading-[1.35] sm:text-[40px] lg:text-[48px]"
-                : "text-[36px] leading-[1.1] sm:text-[46px] lg:text-[56px] lg:leading-[1.05]",
-            ]}
-            style={delay(1)}
-          >
-            {/* Chinese breaks between any two characters: keep the highlighted noun on one line. */}
-            {c.hero.titleA}<span class:list={["text-shimmer", zh && "whitespace-nowrap"]}>{c.hero.titleHighlight}</span>
+    <!-- Hero: copy and the mark, then one request at a time through the gateway -->
+    <section class="lp-hero">
+      <div class="aurora" aria-hidden="true"><i></i><i></i><i></i></div>
+      <div class="grid-bg" aria-hidden="true"></div>
+      <div class="container-page hero-grid">
+        <div class="hero-copy">
+          {liteVersion && (
+            <a class="announce rise" style="--d:0" href={changelogHref}><span class="dot"></span>{c.motion.released(liteVersion)}<span class="chev">→</span></a>
+          )}
+          <h1 class:list={["h-hero rise", zh && "zh"]} style="--d:1">
+            {c.hero.titleA}<span class:list={["grad", zh && "whitespace-nowrap"]}>{c.hero.titleHighlight}</span>
           </h1>
-          <p class="reveal m-0 max-w-[36rem] text-[17px] leading-relaxed text-[#cbd5e1] sm:text-xl sm:leading-normal" style={delay(2)}>
-            {c.hero.sub}
-          </p>
-          <div class="reveal mt-1 flex flex-col gap-3 sm:mt-2 sm:flex-row sm:items-start sm:gap-5" style={delay(3)}>
-            {/* 直接下载这台机器要的那个文件；认不出、或者没有对应的包时去安装一节 */}
+          <p class="lede rise" style="--d:2">{c.hero.sub}</p>
+          <div class="hero-actions rise" style="--d:3">
             <LiteDownload />
-            <a
-              href="#install"
-              class="inline-flex min-h-11 items-center justify-center text-base font-medium text-[var(--color-brand-1)] transition-colors hover:text-[var(--color-brand-2)] sm:justify-start"
-            >
-              {c.hero.ctaSecondary}
-            </a>
+            <a href="#install" class="ghost">{c.hero.ctaSecondary}</a>
           </div>
         </div>
-        <div class="reveal min-w-0" style={delay(3)}>
-          <img
-            src={shot("overview")}
-            width="2360"
-            height="1540"
-            class={shotClass}
-            fetchpriority="high"
-            alt={c.hero.shotAlt}
-          />
+        <div class="hero-mark" aria-hidden="true">
+          <div class="mark-halo"></div>
+          <TwMark id="m-hero" size={240} draw glow />
         </div>
       </div>
+
+      <div class="container-page">
+        <figure class="flow rise" style="--d:4" data-flow aria-label={c.motion.flow.aria}>
+          <div class="flow-top">
+            <span class="lights" aria-hidden="true"><i></i><i></i><i></i></span>
+            <span class="flow-title">{c.motion.flow.title}</span>
+            <span class="scenes" data-scenes aria-hidden="true"><i data-on></i><i></i><i></i></span>
+            <span class="live" aria-hidden="true"><i></i>LIVE</span>
+          </div>
+          <div class="flow-grid" aria-hidden="true">
+            <div class="col" data-clients>
+              <p class="col-label">{c.motion.flow.clients}</p>
+              <div class="node on">Claude Code</div>
+              <div class="node">Codex</div>
+              <div class="node">Cursor</div>
+            </div>
+            <div class="wire"><span class="packet"></span><span class="packet p2"></span></div>
+            <div class="gw">
+              <div class="gw-head"><TwMark id="m-gw" size={18} />{c.motion.flow.gateway}</div>
+              <ul class="checks" data-checks>
+                {c.motion.flow.scenes[0].checks.map(([label, value], i) => (
+                  <li data-step={i + 1} data-on><b>{label}</b><span>{value}</span></li>
+                ))}
+              </ul>
+            </div>
+            <div class="wire"><span class="packet late"></span><span class="packet late p2"></span></div>
+            <div class="col" data-upstreams>
+              <p class="col-label">{c.motion.flow.upstreams}</p>
+              <div class="node on">anthropic</div>
+              <div class="node">chatgpt</div>
+              <div class="node">relay</div>
+            </div>
+          </div>
+          <ol class:list={["log", !zh && "en"]} data-log aria-hidden="true">
+            {c.motion.flow.scenes[0].log.map((line, i) => <li data-step={i} data-on set:html={line} />)}
+          </ol>
+        </figure>
+      </div>
+      <script is:inline type="application/json" data-scenes-json set:html={JSON.stringify(c.motion.flow.scenes)} />
     </section>
 
+    <!-- What it runs on -->
     <div class="container-page">
-      <div
-        class="reveal flex flex-col items-start gap-4 rounded-[14px] border border-[var(--color-border-strong)] bg-[var(--color-surface)] px-5 py-5 sm:px-7 sm:py-6 lg:flex-row lg:gap-8"
-        style={delay(5)}
-      >
-        <span class="shrink-0 rounded-full bg-[var(--color-brand-1)] px-3 py-1.5 font-mono text-xs font-medium uppercase tracking-[0.06em] text-[var(--color-bg)]">
-          {c.status.badge}
-        </span>
+      <div class="status">
+        <span class="status-badge">{c.status.badge}</span>
         {/* 每栏一个标签：外人一眼看出哪几项是平台、哪一项是语言或许可证 */}
-        <dl class="m-0 grid w-full gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-[minmax(0,1.6fr)_repeat(3,minmax(0,1fr))]">
+        <dl class="status-grid">
           {c.status.items.map((item) => (
             <div class="flex min-w-0 flex-col gap-1">
               <dt class="text-[13px] text-[var(--color-muted)]">{item.label}</dt>
               {item.lines.map((line) => (
-                <dd class="m-0 text-[15px] leading-relaxed text-[#cbd5e1]">{line}</dd>
+                <dd class="m-0 text-[15px] leading-relaxed text-[#c3c7ce]">{line}</dd>
               ))}
             </div>
           ))}
@@ -142,28 +164,101 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
       </div>
     </div>
 
-    <section class="py-16 sm:py-20 lg:py-24" aria-labelledby="lite-shows">
+    <!-- Clients, scrolling -->
+    <section class="wall" aria-label={c.motion.wall}>
+      <p class="wall-label">{c.motion.wall}</p>
+      <div class="marquee">
+        <ul class="track">
+          {[...clients, ...clients].map((name, i) => <li aria-hidden={i >= clients.length ? "true" : undefined}>{name}</li>)}
+        </ul>
+      </div>
+    </section>
+
+    <!-- Scroll story: four stops, one sticky screen -->
+    <section class="story" data-story aria-labelledby="lite-story">
       <div class="container-page">
-        <h2 id="lite-shows" class:list={[eyebrow, "m-0 font-normal"]}>{c.features.eyebrow}</h2>
-        <div class="mt-8 flex flex-col gap-14 sm:gap-20">
-          {c.features.items.map((item, i) => (
-            <div class="grid items-center gap-6 lg:grid-cols-2 lg:gap-14">
-              <div class:list={["flex min-w-0 flex-col gap-3", i % 2 === 1 && "lg:order-2"]}>
-                <h3 class="m-0 text-xl font-semibold leading-snug tracking-tight sm:text-2xl">{item.title}</h3>
-                <p class="m-0 text-base leading-relaxed text-[var(--color-muted)] sm:text-[17px]">{item.body}</p>
-              </div>
-              <img
-                src={shot(item.id)}
-                width="2360"
-                height="1540"
-                loading="lazy"
-                decoding="async"
-                class={shotClass}
-                alt={item.alt}
-              />
+        <h2 id="lite-story" class="h-sec lp-in">{c.motion.story.titleA}<span class="dim">{c.motion.story.titleB}</span></h2>
+      </div>
+      <div class="container-page story-grid">
+        <div class="story-steps">
+          <div class="rail" aria-hidden="true"><i data-rail></i></div>
+          {storyIds.map((id, i) => (
+            <div class="step" data-step-id={id} data-active={i === 0 ? "" : undefined}>
+              <p class="step-tag"><span>0{i + 1}</span>{c.motion.story.tags[id]}</p>
+              <h3>{feat[id].title}</h3>
+              <p>{feat[id].body}</p>
+              <img class="step-shot" src={shot(id)} width="2360" height="1540" loading="lazy" decoding="async" alt={feat[id].alt} />
             </div>
           ))}
         </div>
+        <div class="story-screen" aria-hidden="true">
+          <div class="screen" data-tilt>
+            {storyIds.map((id, i) => (
+              <img src={shot(id)} alt="" width="2360" height="1540" loading="lazy" decoding="async" data-shot={id} data-active={i === 0 ? "" : undefined} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Bento -->
+    <section class="bento-sec" aria-labelledby="lite-bento">
+      <div class="container-page">
+        <h2 id="lite-bento" class="h-sec lp-in">{c.motion.bento.titleA}<span class="dim">{c.motion.bento.titleB}</span></h2>
+        <div class="bento">
+          <article class="tile t-menubar lp-in">
+            <div class="tile-text">
+              <div class="chip-bar" aria-hidden="true">
+                <TwMark id="m-chip" size={16} />
+                <span class="chip-nums"><b data-count="13.3" data-unit="M" data-step="0.1">13.3M</b><b data-count="9.34" data-prefix="$" data-step="0.03" data-fixed="2">$9.34</b></span>
+              </div>
+              <div>
+                <h3>{c.menubar.title}</h3>
+                <p>{c.menubar.body}</p>
+              </div>
+            </div>
+            <img src={shot("menubar-menu")} alt={c.menubar.menuAlt} width="664" height="1072" loading="lazy" decoding="async" class="menu-shot" />
+          </article>
+          <article class="tile t-clients lp-in">
+            <p class="big">{c.motion.bento.clientsCount}</p>
+            <p class="big-sub">{c.motion.bento.clientsCountSub}</p>
+            <h3>{feat.clients.title}</h3>
+            <p>{feat.clients.body}</p>
+          </article>
+          <article class="tile t-formats lp-in">
+            <div class="chips" aria-hidden="true">
+              <span>Anthropic Messages</span><span>OpenAI Chat</span><span>OpenAI Responses</span><span>Gemini</span>
+            </div>
+            <h3>{feat.upstreams.title}</h3>
+            <p>{feat.upstreams.body}</p>
+          </article>
+          <article class="tile t-mcp lp-in">
+            <div class="crop-wrap"><img src={shot("mcp")} alt={feat.mcp.alt} width="2360" height="1540" loading="lazy" decoding="async" class="crop" /><span class="scan" aria-hidden="true"></span></div>
+            <div class="tile-text">
+              <h3>{feat.mcp.title}</h3>
+              <p>{feat.mcp.body}</p>
+            </div>
+          </article>
+          <article class="tile t-keys lp-in">
+            <ul class="keyrows" aria-hidden="true">
+              <li><b>claude-code</b><span>main</span><em data-count="4.21" data-prefix="$" data-step="0.02" data-fixed="2">$4.21</em></li>
+              <li><b>codex</b><span>main</span><em data-count="2.87" data-prefix="$" data-step="0.01" data-fixed="2">$2.87</em></li>
+              <li><b>cursor</b><span>budget</span><em data-count="0.93" data-prefix="$" data-step="0.01" data-fixed="2">$0.93</em></li>
+            </ul>
+            <h3>{feat.keys.title}</h3>
+            <p>{feat.keys.body}</p>
+          </article>
+          <article class="tile t-dry lp-in">
+            <img src={shot("dry-run")} alt={feat["dry-run"].alt} width="2360" height="1540" loading="lazy" decoding="async" class="dry-shot" />
+            <h3>{feat["dry-run"].title}</h3>
+            <p>{feat["dry-run"].body}</p>
+          </article>
+          <article class="tile t-notices lp-in">
+            <div class="bell" aria-hidden="true"><i></i><i></i><i></i></div>
+            <h3>{c.motion.bento.noticesTitle}</h3>
+            <p>{c.menubar.notices}</p>
+          </article>
+        </div>
       </div>
     </section>
 
@@ -210,27 +305,6 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
       </div>
     </section>
 
-    <section class="pb-16 sm:pb-20 lg:pb-24" aria-labelledby="lite-menubar">
-      <div class="container-page grid items-center gap-8 rounded-2xl border border-[var(--color-border-strong)] p-6 sm:p-10 lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-14">
-        <div class="flex min-w-0 flex-col gap-3">
-          <p class:list={[eyebrow, "m-0"]}>{c.menubar.eyebrow}</p>
-          <h2 id="lite-menubar" class={h2}>{c.menubar.title}</h2>
-          {/* The menu bar item at its real size: the bitmap is drawn at 2×, 89 × 32 points. */}
-          <img src="/lite/menubar.png" width="178" height="64" loading="lazy" class="my-2 h-auto w-[89px]" alt={c.menubar.chipAlt} />
-          <p class="m-0 text-base leading-relaxed text-[var(--color-muted)] sm:text-[17px]">{c.menubar.body}</p>
-          <p class="m-0 text-base leading-relaxed text-[var(--color-muted)] sm:text-[17px]">{c.menubar.notices}</p>
-        </div>
-        <img
-          src={shot("menubar-menu")}
-          width="664"
-          height="1120"
-          loading="lazy"
-          decoding="async"
-          class="mx-auto h-auto w-[332px] max-w-full"
-          alt={c.menubar.menuAlt}
-        />
-      </div>
-    </section>
 
     <section class="bg-[var(--color-surface)] py-16 sm:py-20 lg:py-[88px]" aria-labelledby="lite-built">
       <div class="container-page flex flex-col gap-10">
@@ -275,7 +349,7 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
                 <h3 class="m-0 text-xl font-semibold sm:text-[22px]">{node.title}</h3>
                 <ul class="m-0 flex list-none flex-col gap-2 p-0">
                   {node.items.map((item) => (
-                    <li class="flex items-start gap-2.5 text-[15px] leading-snug text-[#cbd5e1]">
+                    <li class="flex items-start gap-2.5 text-[15px] leading-snug text-[#c3c7ce]">
                       <span class="mt-[0.45em] size-1.5 shrink-0 rounded-full bg-[var(--color-brand-1)]/80" aria-hidden="true"></span>
                       {item}
                     </li>
@@ -439,6 +513,147 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
   <SiteFooter />
 </Base>
 
+<!--
+  Motion on this page. The hero plays three requests through the gateway; the
+  story picks its screenshot by the step at the middle of the screen and fills
+  a rail; tiles light up under the pointer; a few figures tick up. Blocks move
+  into place as they come into view, and only their position moves, so the page
+  reads the same without script. With reduced motion, nothing moves.
+-->
+<script is:inline data-lite-motion>
+  (() => {
+    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    const flow = document.querySelector("[data-flow]");
+    const json = document.querySelector("[data-scenes-json]");
+    if (flow && json && !reduce) {
+      const scenes = JSON.parse(json.textContent);
+      // Which client and upstream each scene lights; the second fails over.
+      const cast = [
+        { client: 0, up: ["on", "", ""], warn: 0, bad: 0 },
+        { client: 1, up: ["", "fail", "on"], warn: 2, bad: 0 },
+        { client: 2, up: ["", "", "on"], warn: 0, bad: 3 },
+      ];
+      const clients = [...flow.querySelectorAll("[data-clients] .node")];
+      const ups = [...flow.querySelectorAll("[data-upstreams] .node")];
+      const checks = [...flow.querySelectorAll("[data-checks] li")];
+      const lines = [...flow.querySelectorAll("[data-log] li")];
+      const dots = [...flow.querySelectorAll("[data-scenes] i")];
+      let s = 0;
+      let step = -1;
+      const load = (k) => {
+        const sc = scenes[k];
+        const c = cast[k];
+        clients.forEach((n, i) => n.classList.toggle("on", i === c.client));
+        ups.forEach((n, i) => (n.dataset.state = c.up[i]));
+        checks.forEach((li, i) => {
+          li.querySelector("b").textContent = sc.checks[i][0];
+          li.querySelector("span").textContent = sc.checks[i][1];
+          li.classList.toggle("warn", c.warn === i + 1);
+          li.classList.toggle("bad", c.bad === i + 1);
+        });
+        lines.forEach((li, i) => (li.innerHTML = sc.log[i]));
+        dots.forEach((d, i) => d.toggleAttribute("data-on", i === k));
+      };
+      const paint = () => {
+        [...checks, ...lines].forEach((el) => el.toggleAttribute("data-on", Number(el.dataset.step) <= step));
+        ups.forEach((n) => {
+          const st = n.dataset.state || "";
+          n.classList.toggle("fail", st === "fail" && step >= 2);
+          n.classList.toggle("on", st === "on" && step >= (cast[s].warn ? 2 : 1));
+        });
+        flow.toggleAttribute("data-running", step >= 0 && step <= 4);
+      };
+      load(0);
+      paint();
+      setInterval(() => {
+        if (document.hidden) return;
+        step++;
+        if (step > 6) {
+          s = (s + 1) % scenes.length;
+          load(s);
+          step = -1;
+        }
+        paint();
+      }, 850);
+    }
+
+    const story = document.querySelector("[data-story]");
+    if (story) {
+      const steps = [...story.querySelectorAll("[data-step-id]")];
+      const shots = [...story.querySelectorAll("[data-shot]")];
+      const rail = story.querySelector("[data-rail]");
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            const id = e.target.dataset.stepId;
+            steps.forEach((x) => x.toggleAttribute("data-active", x === e.target));
+            shots.forEach((x) => x.toggleAttribute("data-active", x.dataset.shot === id));
+          }
+        },
+        { rootMargin: "-45% 0px -45% 0px" },
+      );
+      steps.forEach((x) => io.observe(x));
+      const fill = () => {
+        const first = steps[0].getBoundingClientRect();
+        const last = steps[steps.length - 1].getBoundingClientRect();
+        const p = Math.min(1, Math.max(0, (innerHeight / 2 - first.top) / (last.bottom - first.top)));
+        rail.style.transform = `scaleY(${p})`;
+      };
+      addEventListener("scroll", fill, { passive: true });
+      fill();
+      const tilt = story.querySelector("[data-tilt]");
+      if (tilt && !reduce) {
+        tilt.addEventListener("pointermove", (e) => {
+          const r = tilt.getBoundingClientRect();
+          const x = (e.clientX - r.left) / r.width - 0.5;
+          const y = (e.clientY - r.top) / r.height - 0.5;
+          tilt.style.transform = `perspective(1400px) rotateY(${x * 4}deg) rotateX(${-y * 4}deg)`;
+        });
+        tilt.addEventListener("pointerleave", () => (tilt.style.transform = ""));
+      }
+    }
+
+    document.querySelectorAll(".tile").forEach((t) => {
+      t.addEventListener("pointermove", (e) => {
+        const r = t.getBoundingClientRect();
+        t.style.setProperty("--mx", `${e.clientX - r.left}px`);
+        t.style.setProperty("--my", `${e.clientY - r.top}px`);
+      });
+    });
+
+    if (reduce) return;
+
+    document.documentElement.classList.add("lp-motion");
+    const rio = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (!e.isIntersecting) continue;
+          e.target.setAttribute("data-in", "");
+          rio.unobserve(e.target);
+        }
+      },
+      { rootMargin: "0px 0px -8% 0px" },
+    );
+    document.querySelectorAll(".lp-in").forEach((el) => rio.observe(el));
+
+    const counters = [...document.querySelectorAll("[data-count]")];
+    setInterval(() => {
+      if (document.hidden) return;
+      counters.forEach((el) => {
+        if (Math.random() < 0.55) return;
+        const v = parseFloat(el.dataset.count) + parseFloat(el.dataset.step) * (0.5 + Math.random());
+        el.dataset.count = String(v);
+        el.textContent = (el.dataset.prefix || "") + v.toFixed(Number(el.dataset.fixed || 1)) + (el.dataset.unit || "");
+        el.classList.remove("tick");
+        void el.offsetWidth;
+        el.classList.add("tick");
+      });
+    }, 1400);
+  })();
+</script>
+
 <!--
   Which system's tab is open. Windows visitors get Windows, Linux visitors
   Linux, everyone else macOS. Without script there are no tabs and all three
@@ -516,6 +731,1147 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
 </script>
 
 <style>
+  /* ---------- Hero ---------- */
+  .lp-hero {
+    position: relative;
+    isolation: isolate;
+    padding: 72px 0 64px;
+  }
+  .aurora {
+    position: absolute;
+    inset: -160px 0 auto;
+    height: 820px;
+    z-index: -1;
+    pointer-events: none;
+    -webkit-mask-image: linear-gradient(#000 40%, transparent 92%);
+    mask-image: linear-gradient(#000 40%, transparent 92%);
+    filter: blur(40px);
+  }
+  .aurora i {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.5;
+  }
+  .aurora i:nth-child(1) {
+    width: 620px;
+    height: 360px;
+    left: 52%;
+    top: 90px;
+    background: radial-gradient(closest-side, rgb(var(--a1) / 0.45), transparent);
+    animation: drift1 16s ease-in-out infinite;
+  }
+  .aurora i:nth-child(2) {
+    width: 520px;
+    height: 320px;
+    left: 68%;
+    top: 220px;
+    background: radial-gradient(closest-side, rgb(var(--a2) / 0.4), transparent);
+    animation: drift2 19s ease-in-out infinite;
+  }
+  .aurora i:nth-child(3) {
+    width: 480px;
+    height: 280px;
+    left: 8%;
+    top: 40px;
+    background: radial-gradient(closest-side, rgba(110, 130, 255, 0.16), transparent);
+    animation: drift1 22s ease-in-out infinite reverse;
+  }
+  .grid-bg {
+    position: absolute;
+    inset: 0 0 auto;
+    height: 720px;
+    z-index: -1;
+    background-image:
+      linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
+    background-size: 64px 64px;
+    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, #000 20%, transparent 75%);
+    mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, #000 20%, transparent 75%);
+  }
+  .hero-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    align-items: center;
+    gap: 40px;
+  }
+  .hero-copy {
+    min-width: 0;
+  }
+  .hero-mark {
+    position: relative;
+    display: grid;
+    place-items: center;
+    height: 320px;
+  }
+  .mark-halo {
+    position: absolute;
+    inset: 20px;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, rgb(var(--a1) / 0.18), rgb(var(--a2) / 0.1) 55%, transparent);
+    animation: halo 5s ease-in-out infinite;
+  }
+  .hero-mark :global(.tw-mark) {
+    position: relative;
+    animation: bob 6s ease-in-out infinite;
+  }
+  .announce {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    padding: 6px 14px 6px 10px;
+    font-size: 13px;
+    color: var(--color-muted);
+    background: rgba(255, 255, 255, 0.02);
+    transition: color 150ms;
+  }
+  .announce:hover {
+    color: var(--color-text);
+  }
+  .announce .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 99px;
+    background: rgb(var(--a1));
+    box-shadow: 0 0 10px rgb(var(--a1));
+    animation: blink 2s ease-in-out infinite;
+  }
+  .announce .chev {
+    color: var(--color-dim);
+  }
+  .h-hero {
+    margin: 26px 0 0;
+    font-size: clamp(38px, 5.2vw, 64px);
+    line-height: 1.08;
+    font-weight: 600;
+    letter-spacing: -0.035em;
+    color: #fff;
+    text-wrap: balance;
+  }
+  .h-hero.zh {
+    font-size: clamp(34px, 4.4vw, 56px);
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+  }
+  .grad {
+    background: linear-gradient(90deg, rgb(var(--a1)), rgb(var(--a2)));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+  .rise {
+    animation: rise 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+    animation-delay: calc(var(--d) * 130ms + 80ms);
+  }
+  .lede {
+    margin: 24px 0 0;
+    max-width: 600px;
+    font-size: 18px;
+    line-height: 1.65;
+    color: var(--color-muted);
+  }
+  .hero-actions {
+    margin-top: 32px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 12px 16px;
+  }
+  .ghost {
+    display: inline-flex;
+    min-height: 44px;
+    align-items: center;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    padding: 0 20px;
+    font-size: 15px;
+    color: var(--color-text);
+    transition: background 160ms, border-color 160ms;
+  }
+  .ghost:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.26);
+  }
+  @media (max-width: 1023px) {
+    .hero-grid {
+      grid-template-columns: 1fr;
+    }
+    .hero-mark {
+      display: none;
+    }
+  }
+
+  /* ---------- Flow panel ---------- */
+  .flow {
+    position: relative;
+    margin: 56px 0 0;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 16px;
+    background: linear-gradient(180deg, rgba(20, 21, 24, 0.92), rgba(12, 13, 15, 0.92));
+    box-shadow:
+      0 40px 120px -40px rgb(var(--a1) / 0.28),
+      0 30px 80px -30px rgba(0, 0, 0, 0.8);
+    overflow: hidden;
+  }
+  .flow::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgb(var(--a1) / 0.8), rgb(var(--a2) / 0.8), transparent);
+    background-size: 200% 100%;
+    animation: sweep 6s linear infinite;
+  }
+  .flow-top {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 12px 16px;
+    font-size: 12px;
+    color: var(--color-muted);
+  }
+  .lights {
+    display: inline-flex;
+    gap: 6px;
+  }
+  .lights i {
+    width: 10px;
+    height: 10px;
+    border-radius: 99px;
+    background: #2a2c31;
+  }
+  .flow-title {
+    flex: 1;
+    min-width: 0;
+  }
+  .scenes {
+    display: inline-flex;
+    gap: 5px;
+  }
+  .scenes i {
+    width: 18px;
+    height: 3px;
+    border-radius: 3px;
+    background: #2a2c31;
+    transition: background 300ms;
+  }
+  .scenes i[data-on] {
+    background: rgb(var(--a1));
+  }
+  .live {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    color: rgb(var(--a1));
+  }
+  .live i {
+    width: 6px;
+    height: 6px;
+    border-radius: 99px;
+    background: rgb(var(--a1));
+    animation: blink 1.6s ease-in-out infinite;
+  }
+  .flow-grid {
+    display: grid;
+    grid-template-columns: 1fr 64px 1.3fr 64px 1fr;
+    align-items: center;
+    padding: 32px 28px 20px;
+  }
+  .col {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .col-label {
+    margin: 0 0 4px;
+    font-size: 12px;
+    color: var(--color-dim);
+  }
+  .node {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    padding: 10px 12px;
+    font-size: 13px;
+    color: #62666d;
+    background: rgba(255, 255, 255, 0.015);
+    transition: color 300ms, border-color 300ms, background 300ms, box-shadow 300ms;
+  }
+  .node.on {
+    color: var(--color-text);
+    border-color: rgb(var(--a1) / 0.5);
+    background: rgb(var(--a1) / 0.07);
+    box-shadow: 0 0 24px -8px rgb(var(--a1) / 0.6);
+  }
+  .node.fail {
+    color: var(--color-accent);
+    border-color: rgba(229, 192, 123, 0.5);
+    background: rgba(229, 192, 123, 0.07);
+    text-decoration: line-through;
+  }
+  .wire {
+    position: relative;
+    height: 1px;
+    background: linear-gradient(90deg, rgb(var(--a1) / 0.1), rgb(var(--a1) / 0.55), rgb(var(--a2) / 0.2));
+  }
+  .packet {
+    position: absolute;
+    top: -3px;
+    left: 0;
+    width: 7px;
+    height: 7px;
+    border-radius: 99px;
+    background: rgb(var(--a1));
+    box-shadow: 0 0 12px rgb(var(--a1));
+    opacity: 0;
+  }
+  .packet.p2 {
+    background: rgb(var(--a2));
+    box-shadow: 0 0 12px rgb(var(--a2));
+  }
+  .flow[data-running] .packet {
+    animation: travel 1.1s ease-in-out infinite;
+  }
+  .flow[data-running] .packet.p2 {
+    animation-delay: 0.45s;
+  }
+  .flow[data-running] .packet.late {
+    animation-delay: 0.55s;
+  }
+  .flow[data-running] .packet.late.p2 {
+    animation-delay: 1s;
+  }
+  .gw {
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 14px;
+    padding: 16px;
+    background: #141518;
+    box-shadow: 0 0 60px -20px rgb(var(--a1) / 0.4);
+  }
+  .gw-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .checks {
+    margin: 14px 0 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .checks li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 13px;
+    color: #62666d;
+    transition: color 300ms;
+  }
+  .checks li::before {
+    content: "";
+    flex-shrink: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 99px;
+    background: #2a2c31;
+    transition: background 300ms, box-shadow 300ms;
+  }
+  .checks b {
+    font-weight: 400;
+  }
+  .checks li span {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    transform: translateX(6px);
+    transition: opacity 300ms, transform 300ms;
+  }
+  .checks li[data-on] {
+    color: var(--color-text);
+  }
+  .checks li[data-on]::before {
+    background: rgb(var(--a1));
+    box-shadow: 0 0 8px rgb(var(--a1));
+  }
+  .checks li[data-on] span {
+    opacity: 1;
+    transform: none;
+    color: var(--color-muted);
+  }
+  .checks li.warn[data-on]::before {
+    background: var(--color-accent);
+    box-shadow: 0 0 8px var(--color-accent);
+  }
+  .checks li.warn[data-on] span {
+    color: var(--color-accent);
+  }
+  .checks li.bad[data-on]::before {
+    background: #ff6b6b;
+    box-shadow: 0 0 8px #ff6b6b;
+  }
+  .checks li.bad[data-on] span {
+    color: #ff6b6b;
+  }
+  .log {
+    margin: 0;
+    padding: 14px 28px 22px;
+    list-style: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    line-height: 2;
+    color: var(--color-muted);
+    min-height: 152px;
+  }
+  .log li {
+    display: block;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity 350ms, transform 350ms;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .log li[data-on] {
+    opacity: 1;
+    transform: none;
+  }
+  .log :global(time) {
+    display: inline-block;
+    width: 72px;
+    margin-right: 16px;
+    color: #62666d;
+  }
+  .log.en :global(time) {
+    width: 84px;
+  }
+  .log :global(b) {
+    font-weight: 500;
+    color: var(--color-text);
+  }
+  .log :global(code) {
+    color: var(--color-accent);
+  }
+  .log :global(em.w) {
+    font-style: normal;
+    color: var(--color-accent);
+  }
+  .log :global(code.x) {
+    color: #ff6b6b;
+    text-decoration: line-through;
+  }
+  @media (max-width: 760px) {
+    .flow-grid {
+      grid-template-columns: 1fr;
+      gap: 14px;
+      padding: 20px 16px 16px;
+    }
+    .wire {
+      display: none;
+    }
+    .col {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+    .col-label {
+      width: 100%;
+    }
+    .log {
+      padding: 12px 16px 18px;
+      font-size: 11.5px;
+    }
+    .log :global(time),
+    .log.en :global(time) {
+      width: 60px;
+      margin-right: 10px;
+    }
+  }
+
+  /* ---------- Status row ---------- */
+  .status {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 24px 0;
+  }
+  .status-badge {
+    align-self: flex-start;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgb(var(--a1)), rgb(var(--a2)));
+    padding: 3px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #08090a;
+  }
+  .status-grid {
+    margin: 0;
+    display: grid;
+    gap: 16px 32px;
+  }
+  @media (min-width: 640px) {
+    .status-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 1024px) {
+    .status {
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 32px;
+    }
+    .status-grid {
+      flex: 1;
+      grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  /* ---------- Client wall ---------- */
+  .wall {
+    padding: 44px 0 20px;
+  }
+  .wall-label {
+    margin: 0 0 18px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--color-dim);
+  }
+  .marquee {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+  }
+  .track {
+    display: flex;
+    width: max-content;
+    gap: 56px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 17px;
+    font-weight: 560;
+    letter-spacing: -0.01em;
+    color: #9ca1a9;
+    animation: marquee 38s linear infinite;
+  }
+  .marquee:hover .track {
+    animation-play-state: paused;
+  }
+
+  /* ---------- Section heads ---------- */
+  .h-sec {
+    margin: 0;
+    max-width: 820px;
+    font-size: clamp(30px, 4vw, 48px);
+    line-height: 1.14;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #fff;
+    text-wrap: balance;
+  }
+  .dim {
+    color: var(--color-muted);
+  }
+
+  /* ---------- Story ---------- */
+  .story {
+    padding: 104px 0 96px;
+  }
+  .story-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+    gap: 64px;
+  }
+  .story-steps {
+    position: relative;
+  }
+  .rail {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: rgba(255, 255, 255, 0.08);
+  }
+  .rail i {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(rgb(var(--a1)), rgb(var(--a2)));
+    transform-origin: top;
+    transform: scaleY(0);
+    box-shadow: 0 0 10px rgb(var(--a1) / 0.6);
+  }
+  .step {
+    min-height: 62vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 28px;
+    opacity: 0.32;
+    transition: opacity 400ms;
+  }
+  .step[data-active] {
+    opacity: 1;
+  }
+  .step-tag {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 0 12px;
+    font-size: 13px;
+    color: rgb(var(--a1));
+  }
+  .step-tag span {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    border: 1px solid rgb(var(--a1) / 0.4);
+    border-radius: 6px;
+    padding: 1px 6px;
+  }
+  .step h3 {
+    margin: 0;
+    font-size: 26px;
+    line-height: 1.25;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #fff;
+  }
+  .step p:not(.step-tag) {
+    margin: 14px 0 0;
+    font-size: 16px;
+    line-height: 1.7;
+    color: var(--color-muted);
+  }
+  .step-shot {
+    display: none;
+  }
+  .screen {
+    position: sticky;
+    top: calc(50vh - 220px);
+    aspect-ratio: 2360 / 1540;
+    max-width: 100%;
+    border-radius: 14px;
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.14),
+      0 50px 120px -40px rgba(0, 0, 0, 0.9),
+      0 30px 100px -40px rgb(var(--a1) / 0.35);
+    overflow: hidden;
+    background: #0f1012;
+    transition: transform 300ms ease-out;
+  }
+  .screen img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transform: scale(1.03);
+    filter: blur(4px);
+    transition: opacity 550ms, transform 800ms, filter 550ms;
+  }
+  .screen img[data-active] {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+  @media (max-width: 1023px) {
+    .story-grid {
+      grid-template-columns: 1fr;
+    }
+    .story-screen,
+    .rail {
+      display: none;
+    }
+    .step {
+      min-height: 0;
+      padding: 36px 0 0;
+      opacity: 1;
+    }
+    .step-shot {
+      display: block;
+      width: 100%;
+      margin-top: 20px;
+      border-radius: 10px;
+    }
+  }
+
+  /* ---------- Bento ---------- */
+  .bento-sec {
+    padding: 24px 0 104px;
+  }
+  .bento {
+    margin-top: 48px;
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 12px;
+  }
+  .tile {
+    --mx: -200px;
+    --my: -200px;
+    position: relative;
+    min-width: 0;
+    overflow: hidden;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: linear-gradient(180deg, #141518, #0f1012);
+    padding: 28px;
+    transition: border-color 200ms;
+  }
+  .tile::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(360px circle at var(--mx) var(--my), rgb(var(--a1) / 0.1), transparent 60%);
+    pointer-events: none;
+  }
+  .tile:hover {
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+  .tile h3 {
+    margin: 0;
+    font-size: 17px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: #fff;
+  }
+  .tile p {
+    margin: 8px 0 0;
+    font-size: 15px;
+    line-height: 1.65;
+    color: var(--color-muted);
+  }
+  .t-menubar {
+    grid-column: span 4;
+    grid-row: span 2;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 250px;
+    gap: 24px;
+    align-items: stretch;
+  }
+  /* the menu bar chip at the top, the text at the bottom, the menu on the right */
+  .t-menubar .tile-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .t-menubar .menu-shot {
+    align-self: end;
+  }
+  .chip-bar {
+    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 8px;
+    padding: 6px 10px;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .chip-nums {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.15;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+  .chip-nums b {
+    font-weight: 500;
+  }
+  .menu-shot {
+    width: 250px;
+    margin-bottom: -60px;
+    border-radius: 12px;
+    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.14);
+    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+  .t-menubar:hover .menu-shot {
+    transform: translateY(-14px);
+  }
+  .t-clients,
+  .t-formats,
+  .t-keys {
+    grid-column: span 2;
+  }
+  .t-mcp {
+    grid-column: span 4;
+    display: grid;
+    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+    gap: 24px;
+    align-items: center;
+    padding: 0 28px 0 0;
+  }
+  .t-dry,
+  .t-notices {
+    grid-column: span 3;
+  }
+  .crop-wrap {
+    position: relative;
+    height: 100%;
+    min-height: 240px;
+    overflow: hidden;
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
+  }
+  .crop {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: left top;
+  }
+  .scan {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    height: 60px;
+    background: linear-gradient(transparent, rgb(var(--a1) / 0.18), transparent);
+    border-bottom: 1px solid rgb(var(--a1) / 0.6);
+    animation: scan 3.6s ease-in-out infinite;
+  }
+  .dry-shot {
+    display: block;
+    width: 100%;
+    height: 170px;
+    margin: -28px 0 22px;
+    object-fit: cover;
+    object-position: 60% 30%;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    -webkit-mask-image: linear-gradient(#000 70%, transparent);
+    mask-image: linear-gradient(#000 70%, transparent);
+    width: calc(100% + 56px);
+    margin-left: -28px;
+  }
+  .big {
+    margin: 0 !important;
+    font-size: 48px !important;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1.05 !important;
+    background: linear-gradient(90deg, rgb(var(--a1)), rgb(var(--a2)));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent !important;
+  }
+  .big-sub {
+    margin: 8px 0 22px !important;
+    font-size: 13px !important;
+    color: var(--color-dim) !important;
+  }
+  :global(.tick) {
+    animation: tick 600ms ease-out;
+  }
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 22px;
+  }
+  .chips span {
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    padding: 5px 11px;
+    font-size: 12px;
+    color: var(--color-muted);
+    animation: chip 4s ease-in-out infinite;
+  }
+  .chips span:nth-child(2) {
+    animation-delay: 1s;
+  }
+  .chips span:nth-child(3) {
+    animation-delay: 2s;
+  }
+  .chips span:nth-child(4) {
+    animation-delay: 3s;
+  }
+  .keyrows {
+    margin: 0 0 22px;
+    padding: 0;
+    list-style: none;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+  }
+  .keyrows li {
+    display: flex;
+    gap: 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 7px 0;
+    color: var(--color-muted);
+  }
+  .keyrows b {
+    flex: 1;
+    font-weight: 500;
+    color: var(--color-text);
+  }
+  .keyrows em {
+    font-style: normal;
+    color: var(--color-text);
+    font-variant-numeric: tabular-nums;
+  }
+  .bell {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 22px;
+  }
+  .bell i {
+    display: block;
+    height: 30px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.02);
+    position: relative;
+    overflow: hidden;
+  }
+  .bell i::before {
+    content: "";
+    position: absolute;
+    left: 10px;
+    top: 12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 99px;
+    background: rgb(var(--a1));
+    box-shadow: 0 0 8px rgb(var(--a1));
+  }
+  .bell i::after {
+    content: "";
+    position: absolute;
+    left: 26px;
+    right: 30%;
+    top: 13px;
+    height: 4px;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .bell i:nth-child(2)::before {
+    background: var(--color-accent);
+    box-shadow: 0 0 8px var(--color-accent);
+  }
+  .bell i:nth-child(2)::after {
+    right: 45%;
+  }
+  .bell i:nth-child(3)::before {
+    background: rgb(var(--a2));
+    box-shadow: 0 0 8px rgb(var(--a2));
+  }
+  .bell i:nth-child(3)::after {
+    right: 20%;
+  }
+  .bell i {
+    animation: notice 6s ease-in-out infinite;
+  }
+  .bell i:nth-child(2) {
+    animation-delay: 2s;
+  }
+  .bell i:nth-child(3) {
+    animation-delay: 4s;
+  }
+  @media (max-width: 1023px) {
+    .bento {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .t-menubar,
+    .t-mcp {
+      grid-column: span 2;
+    }
+    .t-clients,
+    .t-formats,
+    .t-keys,
+    .t-dry,
+    .t-notices {
+      grid-column: span 1;
+    }
+    .t-keys {
+      grid-column: span 2;
+    }
+  }
+  @media (max-width: 700px) {
+    .bento {
+      grid-template-columns: 1fr;
+    }
+    .t-menubar,
+    .t-mcp,
+    .t-clients,
+    .t-formats,
+    .t-keys,
+    .t-dry,
+    .t-notices {
+      grid-column: auto;
+      grid-row: auto;
+    }
+    .t-menubar {
+      grid-template-columns: 1fr;
+    }
+    .menu-shot {
+      margin: 0 auto -80px;
+    }
+    .t-mcp {
+      grid-template-columns: 1fr;
+      padding: 0 0 28px;
+    }
+    .t-mcp .tile-text {
+      padding: 0 28px;
+    }
+    .crop-wrap {
+      border-right: 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  /* ---------- Entrances (the script adds .lp-motion and data-in) ---------- */
+  :global(.lp-motion) .lp-in {
+    transform: translateY(28px);
+    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+  :global(.lp-motion) .lp-in[data-in] {
+    transform: none;
+  }
+
+  @keyframes blink {
+    50% {
+      opacity: 0.3;
+    }
+  }
+  @keyframes rise {
+    from {
+      opacity: 0;
+      transform: translateY(14px);
+    }
+  }
+  @keyframes travel {
+    0% {
+      left: 0;
+      opacity: 0;
+    }
+    15%,
+    85% {
+      opacity: 1;
+    }
+    100% {
+      left: calc(100% - 7px);
+      opacity: 0;
+    }
+  }
+  @keyframes sweep {
+    to {
+      background-position: -200% 0;
+    }
+  }
+  @keyframes drift1 {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    50% {
+      transform: translate(-60px, 40px) scale(1.15);
+    }
+  }
+  @keyframes drift2 {
+    0%,
+    100% {
+      transform: translate(0, 0) scale(1);
+    }
+    50% {
+      transform: translate(50px, -30px) scale(0.9);
+    }
+  }
+  @keyframes halo {
+    0%,
+    100% {
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.06);
+    }
+  }
+  @keyframes bob {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-8px);
+    }
+  }
+  @keyframes marquee {
+    to {
+      transform: translateX(calc(-50% - 28px));
+    }
+  }
+  @keyframes scan {
+    0% {
+      top: -60px;
+    }
+    100% {
+      top: 100%;
+    }
+  }
+  @keyframes tick {
+    0% {
+      color: rgb(var(--a1));
+      text-shadow: 0 0 12px rgb(var(--a1) / 0.8);
+    }
+  }
+  @keyframes chip {
+    0%,
+    100% {
+      color: var(--color-muted);
+      border-color: rgba(255, 255, 255, 0.14);
+    }
+    12%,
+    30% {
+      color: var(--color-text);
+      border-color: rgb(var(--a1) / 0.6);
+      box-shadow: 0 0 16px -4px rgb(var(--a1) / 0.5);
+    }
+  }
+  @keyframes notice {
+    0%,
+    100% {
+      border-color: rgba(255, 255, 255, 0.08);
+    }
+    8%,
+    24% {
+      border-color: rgb(var(--a1) / 0.45);
+      background: rgb(var(--a1) / 0.05);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .lp-hero *,
+    .flow *,
+    .flow::before,
+    .wall *,
+    .story *,
+    .bento * {
+      animation: none !important;
+      transition: none !important;
+    }
+    .log li,
+    .checks li span {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
   /* Copy button beside an install command; the command scrolls, the button stays. */
   .copy-cmd {
     flex-shrink: 0;
@@ -606,7 +1962,7 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
   }
   .install-tag {
     border-radius: 999px;
-    background: rgba(61, 219, 217, 0.12);
+    background: rgba(34, 229, 242, 0.12);
     padding: 0.125rem 0.5rem;
     font-size: 0.75rem;
     font-weight: 500;
@@ -694,7 +2050,7 @@ const archLabel = { x64: "x64", arm64: "ARM64" } as const;
     height: 7px;
     border-radius: 999px;
     background: var(--color-brand-2);
-    box-shadow: 0 0 10px rgba(61, 219, 217, 0.8);
+    box-shadow: 0 0 10px rgba(34, 229, 242, 0.8);
     animation: flow-v 2.4s ease-in-out infinite;
   }
   @keyframes flow-v {
diff --git a/src/components/pages/ThinkWatchPage.astro b/src/components/pages/ThinkWatchPage.astro
index 8c74109..804dcc2 100644
--- a/src/components/pages/ThinkWatchPage.astro
+++ b/src/components/pages/ThinkWatchPage.astro
@@ -42,7 +42,7 @@ const delay = (i: number) => `animation-delay: ${i * 90}ms;`;
       <div
         class="pointer-events-none absolute inset-0"
         aria-hidden="true"
-        style="background: radial-gradient(50% 60% at 85% 20%, rgba(61, 219, 217, 0.09), transparent 65%);"
+        style="background: radial-gradient(50% 60% at 85% 20%, rgba(34, 229, 242, 0.09), transparent 65%);"
       ></div>
       <div class="container-page relative grid items-center gap-12 py-14 sm:py-20 lg:grid-cols-2 lg:gap-16 lg:py-[88px]">
         <div class="flex min-w-0 flex-col gap-5 sm:gap-6">
@@ -60,13 +60,13 @@ const delay = (i: number) => `animation-delay: ${i * 90}ms;`;
           >
             {c.hero.titleA}<span class="text-shimmer">{c.hero.titleHighlight}</span>
           </h1>
-          <p class="reveal m-0 max-w-[36rem] text-[17px] leading-relaxed text-[#cbd5e1] sm:text-xl sm:leading-normal" style={delay(2)}>
+          <p class="reveal m-0 max-w-[36rem] text-[17px] leading-relaxed text-[#c3c7ce] sm:text-xl sm:leading-normal" style={delay(2)}>
             {c.hero.sub}
           </p>
           <div class="reveal mt-1 flex flex-col gap-3 sm:mt-2 sm:flex-row sm:items-center sm:gap-5" style={delay(3)}>
             <a
               href="#quickstart"
-              class="inline-flex min-h-11 items-center justify-center rounded-[10px] bg-[var(--color-brand-1)] px-[22px] py-3 text-base font-semibold text-[var(--color-bg)] transition-colors hover:bg-[var(--color-brand-2)]"
+              class="inline-flex min-h-11 items-center justify-center rounded-full bg-[#f7f8f8] px-[22px] py-3 text-base font-semibold text-[#08090a] transition hover:bg-white hover:shadow-[0_8px_30px_-8px_rgba(34,229,242,0.5)]"
             >
               {c.hero.ctaPrimary}
             </a>
@@ -80,7 +80,7 @@ const delay = (i: number) => `animation-delay: ${i * 90}ms;`;
           <ul class="reveal m-0 mt-1 flex list-none flex-wrap gap-2.5 p-0 sm:mt-2 sm:gap-3" style={delay(4)}>
             {pills.map((p) => (
               <li
-                class="rounded-full border border-[var(--color-border-strong)] px-3 py-1.5 text-[13px] text-[#cbd5e1]"
+                class="rounded-full border border-[var(--color-border-strong)] px-3 py-1.5 text-[13px] text-[#c3c7ce]"
                 title={p.title}
               >
                 {p.label}
diff --git a/src/components/sections/HowItWorks.astro b/src/components/sections/HowItWorks.astro
index e18a297..6c054f4 100644
--- a/src/components/sections/HowItWorks.astro
+++ b/src/components/sections/HowItWorks.astro
@@ -4,17 +4,17 @@ import { getLang, t } from "~/i18n";
 const s = t(getLang(Astro)).how;
 
 const clients = [
-  { name: "Claude Code", color: "#3DDBD9" },
-  { name: "Cursor", color: "#8EEBEA" },
-  { name: "Custom Agent", color: "#8EEBEA" },
-  { name: "CI/CD Pipeline", color: "#D8FBFA" },
+  { name: "Claude Code", color: "#22E5F2" },
+  { name: "Cursor", color: "#F05CD8" },
+  { name: "Custom Agent", color: "#F05CD8" },
+  { name: "CI/CD Pipeline", color: "#8FB8FF" },
 ];
 
 const providers = [
   { name: "OpenAI", color: "#10A37F" },
   { name: "Anthropic", color: "#D97706" },
   { name: "Google Gemini", color: "#4285F4" },
-  { name: "Azure / Bedrock", color: "#8EEBEA" },
+  { name: "Azure / Bedrock", color: "#F05CD8" },
 ];
 ---
 
@@ -55,8 +55,8 @@ const providers = [
             <line x1="0" y1="1" x2="48" y2="1" stroke="url(#flow-l)" stroke-width="1.5" stroke-dasharray="3 4" class="arch-flow" />
             <defs>
               <linearGradient id="flow-l" x1="0" y1="0" x2="1" y2="0">
-                <stop offset="0%" stop-color="#3DDBD9" stop-opacity="0"/>
-                <stop offset="100%" stop-color="#3DDBD9"/>
+                <stop offset="0%" stop-color="#22E5F2" stop-opacity="0"/>
+                <stop offset="100%" stop-color="#22E5F2"/>
               </linearGradient>
             </defs>
           </svg>
@@ -67,8 +67,8 @@ const providers = [
             <line x1="0" y1="1" x2="48" y2="1" stroke="url(#flow-r)" stroke-width="1.5" stroke-dasharray="3 4" class="arch-flow arch-flow-reverse" />
             <defs>
               <linearGradient id="flow-r" x1="0" y1="0" x2="1" y2="0">
-                <stop offset="0%" stop-color="#8EEBEA"/>
-                <stop offset="100%" stop-color="#8EEBEA" stop-opacity="0"/>
+                <stop offset="0%" stop-color="#F05CD8"/>
+                <stop offset="100%" stop-color="#F05CD8" stop-opacity="0"/>
               </linearGradient>
             </defs>
           </svg>
diff --git a/src/components/sections/MCPAdvantage.astro b/src/components/sections/MCPAdvantage.astro
index b34924a..f682aea 100644
--- a/src/components/sections/MCPAdvantage.astro
+++ b/src/components/sections/MCPAdvantage.astro
@@ -38,7 +38,7 @@ const treatmentClass: Record<Treatment, string> = {
   <div
     class="pointer-events-none absolute inset-0 -z-0"
     aria-hidden="true"
-    style="background: radial-gradient(60% 50% at 80% 0%, rgba(61, 219, 217, 0.07), transparent 60%), radial-gradient(50% 40% at 10% 100%, rgba(168, 85, 247, 0.06), transparent 60%);"
+    style="background: radial-gradient(60% 50% at 80% 0%, rgba(34, 229, 242, 0.07), transparent 60%), radial-gradient(50% 40% at 10% 100%, rgba(168, 85, 247, 0.06), transparent 60%);"
   ></div>
 
   <div class="container-page relative z-10">
diff --git a/src/components/ui/TiltCard.tsx b/src/components/ui/TiltCard.tsx
index 91ffe24..027060a 100644
--- a/src/components/ui/TiltCard.tsx
+++ b/src/components/ui/TiltCard.tsx
@@ -48,7 +48,7 @@ export default function TiltCard({ children, className = "", max = 7 }: Props) {
         className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 group-hover:opacity-100 transition-opacity"
         style={{
           background:
-            "radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(34,211,238,0.10), transparent 40%)",
+            "radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(34,229,242,0.10), transparent 40%)",
         }}
       />
     </div>
diff --git a/src/i18n/pages/lite.ts b/src/i18n/pages/lite.ts
index 4cc4ab5..f57f069 100644
--- a/src/i18n/pages/lite.ts
+++ b/src/i18n/pages/lite.ts
@@ -32,6 +32,57 @@ export const liteCopy = {
       ctaSecondary: "Other platforms and installation methods",
       shotAlt: overviewAlt.en,
     },
+    motion: {
+      released: (v: string) => `Lite ${v} released`,
+      flow: {
+        title: "ThinkWatch Lite · live traffic",
+        clients: "Clients",
+        gateway: "Gateway",
+        upstreams: "Upstreams",
+        aria: "Illustration: requests passing through the gateway, in turn a request whose key is replaced, one whose upstream fails and is replaced by the next, and one whose dangerous tool call is cut off",
+        scenes: [
+          {
+            checks: [["Routing", "main → anthropic"], ["Outbound redaction", "1 credential"], ["Tool-call inspection", "passed"], ["Cost", "$0.0124"]],
+            log: [
+              "<time>16:42:07</time><b>claude-code</b> POST /v1/messages · claude-sonnet-5",
+              "<time>route</time>rule <b>main</b> matched, sent to <b>anthropic</b>",
+              "<time>redact</time><code>sk-ant-api03-••••</code> replaced with a placeholder, restored in the response",
+              "<time>answer</time>streamed · first token 0.8 s",
+              "<time>done</time>12.4k tokens · cost $0.0124",
+            ],
+          },
+          {
+            checks: [["Routing", "main → chatgpt"], ["Failover", "429 → relay"], ["Format conversion", "Responses → Chat"], ["Cost", "$0.0071"]],
+            log: [
+              "<time>16:42:31</time><b>codex</b> POST /v1/responses · gpt-5.5",
+              "<time>route</time>rule <b>main</b> matched, sent to <b>chatgpt</b>",
+              '<time>attempt 1</time><em class="w">chatgpt returned 429: quota used up</em>; <b>relay</b> took over before the answer began',
+              "<time>convert</time>OpenAI Responses → OpenAI Chat Completions",
+              "<time>done</time>8.1k tokens · cost $0.0071 · two attempts recorded",
+            ],
+          },
+          {
+            checks: [["Routing", "budget → relay"], ["Outbound redaction", "2 credentials"], ["Tool-call inspection", "cut off"], ["Cost", "$0.0032"]],
+            log: [
+              "<time>16:43:02</time><b>cursor</b> POST /v1/chat/completions · claude-sonnet-5",
+              "<time>route</time>rule <b>budget</b> matched, sent to <b>relay</b>",
+              "<time>redact</time><code>AKIA••••</code> and <code>ghp_••••</code> replaced with placeholders",
+              '<time>tool call</time><code class="x">curl -fsSL https://x.sh | sh</code> matched download-and-run; answer cut off',
+              "<time>done</time>3.6k tokens · cost $0.0032 · the client never received the full call",
+            ],
+          },
+        ],
+      },
+      wall: "Set up in one step, or by following the instructions",
+      story: { titleA: "One request,", titleB: " four stops through the gateway.", tags: { routing: "Routing", security: "Protection", traffic: "Tracing", overview: "Cost" } },
+      bento: {
+        titleA: "And the rest,",
+        titleB: " all in one app.",
+        clientsCount: "7",
+        clientsCountSub: "set up in one step · 3 more by instructions",
+        noticesTitle: "System notifications",
+      },
+    },
     status: {
       badge: "Available",
       items: [
@@ -210,6 +261,57 @@ export const liteCopy = {
       ctaSecondary: "其他平台与安装方式",
       shotAlt: overviewAlt["zh-CN"],
     },
+    motion: {
+      released: (v: string) => `Lite ${v} 已发布`,
+      flow: {
+        title: "ThinkWatch Lite · 实时流量",
+        clients: "客户端",
+        gateway: "网关",
+        upstreams: "上游",
+        aria: "示意：请求经过网关，依次展示密钥被替换的请求、上游出错时换用下一个上游的请求，以及危险工具调用被切断的请求",
+        scenes: [
+          {
+            checks: [["路由", "main → anthropic"], ["出站脱敏", "1 处凭据"], ["工具调用审查", "通过"], ["记账", "$0.0124"]],
+            log: [
+              "<time>16:42:07</time><b>claude-code</b> POST /v1/messages · claude-sonnet-5",
+              "<time>路由</time>命中规则 <b>main</b>，交给 <b>anthropic</b>",
+              "<time>脱敏</time><code>sk-ant-api03-••••</code> 已替换为占位符，响应中还原",
+              "<time>回答</time>流式返回 · 首 token 0.8 s",
+              "<time>完成</time>12.4k token · 费用 $0.0124",
+            ],
+          },
+          {
+            checks: [["路由", "main → chatgpt"], ["故障转移", "429 → relay"], ["格式转换", "Responses → Chat"], ["记账", "$0.0071"]],
+            log: [
+              "<time>16:42:31</time><b>codex</b> POST /v1/responses · gpt-5.5",
+              "<time>路由</time>命中规则 <b>main</b>，交给 <b>chatgpt</b>",
+              '<time>第 1 跳</time><em class="w">chatgpt 返回 429：额度用完</em>，回答开始前换用 <b>relay</b>',
+              "<time>转换</time>OpenAI Responses → OpenAI Chat Completions",
+              "<time>完成</time>8.1k token · 费用 $0.0071 · 记录两次尝试",
+            ],
+          },
+          {
+            checks: [["路由", "budget → relay"], ["出站脱敏", "2 处凭据"], ["工具调用审查", "已切断"], ["记账", "$0.0032"]],
+            log: [
+              "<time>16:43:02</time><b>cursor</b> POST /v1/chat/completions · claude-sonnet-5",
+              "<time>路由</time>命中规则 <b>budget</b>，交给 <b>relay</b>",
+              "<time>脱敏</time><code>AKIA••••</code> 与 <code>ghp_••••</code> 已替换为占位符",
+              '<time>工具调用</time><code class="x">curl -fsSL https://x.sh | sh</code> 命中「下载即执行」，回答已切断',
+              "<time>完成</time>3.6k token · 费用 $0.0032 · 客户端没有收到完整调用",
+            ],
+          },
+        ],
+      },
+      wall: "一键接入，或按说明配置",
+      story: { titleA: "一个请求，", titleB: "经过网关的四站。", tags: { routing: "路由", security: "防护", traffic: "追溯", overview: "费用" } },
+      bento: {
+        titleA: "还有这些，",
+        titleB: "都在一个应用里。",
+        clientsCount: "7",
+        clientsCountSub: "款一键接入 · 另有 3 款按说明配置",
+        noticesTitle: "系统通知",
+      },
+    },
     status: {
       badge: "已发布",
       items: [
diff --git a/src/lib/og.ts b/src/lib/og.ts
index 8529575..408f1ba 100644
--- a/src/lib/og.ts
+++ b/src/lib/og.ts
@@ -145,13 +145,13 @@ function wrap(f: Font, text: string, size: number, width: number): string[] {
 }
 
 const colors = {
-  bg: "#0b1220",
-  text: "#e6ebf2",
-  sub: "#cbd5e1",
-  brand: "#3ddbd9",
-  dim: "#8a96ab",
-  borderStrong: "#2a3a63",
-  grid: "#94a3b8",
+  bg: "#08090a",
+  text: "#f7f8f8",
+  sub: "#c3c7ce",
+  brand: "#22e5f2",
+  brand2: "#f05cd8",
+  dim: "#7a808a",
+  grid: "#ffffff",
 };
 
 /** The logo, placed as a nested SVG */
@@ -201,20 +201,20 @@ async function renderCard({ name, line, labels }: CardText, W: number, H: number
   });
   if (labelX > X + width) throw new Error(`[og] the labels of "${card}" do not fit on the card`);
 
-  // Background as on the site: the brand navy, a teal glow from the top left,
-  // and the faint grid fading out towards the edges.
+  // Background as on the site: near black, a cyan glow from the top left and a
+  // magenta one from the top right, and the faint grid fading out towards the edges.
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
   <defs>
     <radialGradient id="glow" cx="0.15" cy="-0.1" r="0.9">
-      <stop offset="0" stop-color="${colors.brand}" stop-opacity="0.16"/>
+      <stop offset="0" stop-color="${colors.brand}" stop-opacity="0.14"/>
       <stop offset="0.6" stop-color="${colors.brand}" stop-opacity="0"/>
     </radialGradient>
     <radialGradient id="glow2" cx="0.9" cy="0.1" r="0.7">
-      <stop offset="0" stop-color="${colors.borderStrong}" stop-opacity="0.55"/>
-      <stop offset="0.6" stop-color="${colors.borderStrong}" stop-opacity="0"/>
+      <stop offset="0" stop-color="${colors.brand2}" stop-opacity="0.12"/>
+      <stop offset="0.6" stop-color="${colors.brand2}" stop-opacity="0"/>
     </radialGradient>
     <pattern id="grid" width="56" height="56" patternUnits="userSpaceOnUse">
-      <path d="M56 0H0V56" fill="none" stroke="${colors.grid}" stroke-opacity="0.06" stroke-width="1"/>
+      <path d="M56 0H0V56" fill="none" stroke="${colors.grid}" stroke-opacity="0.035" stroke-width="1"/>
     </pattern>
     <radialGradient id="fade" cx="0.5" cy="0.5" r="0.6">
       <stop offset="0.3" stop-color="#fff" stop-opacity="1"/>
diff --git a/src/styles/global.css b/src/styles/global.css
index 7749b7a..0e32866 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,30 +2,32 @@
 
 /* ---------- Theme tokens ---------- */
 @theme {
-  /* Brand: the logo's navy and teal, with amber for warnings. */
-  --color-bg: #0b1220;
-  --color-surface: #111a2e;
-  --color-surface-2: #16213a;
-  --color-border: #1e2a4a;
-  --color-border-strong: #2a3a63;
-  --color-navy: #1e2a4a;
-
-  --color-text: #e6ebf2;
-  --color-muted: #94a3b8;
-  --color-dim: #8a96ab;
-
-  --color-brand-1: #3ddbd9;   /* logo teal */
-  --color-brand-2: #8eebea;   /* light teal */
+  /* Near-black neutral ground; the accent is the desktop app mark's neon pair
+     (cyan to magenta), with amber for warnings. */
+  --color-bg: #08090a;
+  --color-surface: #0f1012;
+  --color-surface-2: #151619;
+  --color-border: #1c1d21;
+  --color-border-strong: #2a2c31;
+  --color-navy: #1c1d21;
+
+  --color-text: #f7f8f8;
+  --color-muted: #8a8f98;
+  --color-dim: #7a808a;
+
+  --color-brand-1: #22e5f2;   /* mark cyan */
+  --color-brand-2: #8ff3f9;   /* light cyan, for hover */
+  --color-brand-3: #f05cd8;   /* mark magenta */
   --color-accent:  #e5c07b;   /* amber: flagged, held, warnings */
 
-  /* Legacy palette classes (cyan, violet, pink, purple, fuchsia) used across
-     older components are remapped onto the brand ramps, so every component
-     follows the logo without per-file edits. */
-  --color-cyan-50: #ecfdfc;  --color-cyan-100: #d2f9f8; --color-cyan-200: #a8f2f0; --color-cyan-300: #6fe6e4; --color-cyan-400: #3ddbd9;
-  --color-cyan-500: #22bfbd; --color-cyan-600: #189a99; --color-cyan-700: #167a7a; --color-cyan-800: #155f60; --color-cyan-900: #134e4f; --color-cyan-950: #062d2e;
-  --color-violet-50: #f0fefd; --color-violet-100: #ddfaf9; --color-violet-200: #c3f6f5; --color-violet-300: #a8f2f0; --color-violet-400: #8eebea;
-  --color-violet-500: #6fe6e4; --color-violet-600: #3ddbd9; --color-violet-700: #22bfbd; --color-violet-800: #189a99; --color-violet-900: #167a7a; --color-violet-950: #0b3f40;
-  --color-purple-300: #a8f2f0; --color-purple-400: #8eebea; --color-purple-500: #6fe6e4;
+  /* Legacy palette classes used across older components are remapped onto the
+     brand ramps: cyan onto the mark's cyan, violet and purple onto its magenta,
+     pink and fuchsia onto amber. */
+  --color-cyan-50: #ecfdfe;  --color-cyan-100: #cffafd; --color-cyan-200: #a5f4fa; --color-cyan-300: #67edf6; --color-cyan-400: #22e5f2;
+  --color-cyan-500: #0bc6d4; --color-cyan-600: #0a9eaa; --color-cyan-700: #0e7d87; --color-cyan-800: #12626a; --color-cyan-900: #134f56; --color-cyan-950: #05333a;
+  --color-violet-50: #fdf0fb; --color-violet-100: #fbdff6; --color-violet-200: #f7c0ed; --color-violet-300: #f39be3; --color-violet-400: #f05cd8;
+  --color-violet-500: #e03cc4; --color-violet-600: #c229a6; --color-violet-700: #9c2186; --color-violet-800: #7a1b69; --color-violet-900: #5e1651; --color-violet-950: #3a0b31;
+  --color-purple-300: #f39be3; --color-purple-400: #f05cd8; --color-purple-500: #e03cc4;
   --color-pink-50: #fbf6ec;  --color-pink-100: #f6eacf; --color-pink-200: #efd9a8; --color-pink-300: #e9cb8e; --color-pink-400: #e5c07b;
   --color-pink-500: #d6a95a; --color-pink-600: #b98a3f; --color-pink-700: #946b31; --color-pink-800: #74542b; --color-pink-900: #5f4526; --color-pink-950: #352413;
   --color-fuchsia-300: #e9cb8e; --color-fuchsia-400: #e5c07b; --color-fuchsia-500: #d6a95a;
@@ -136,8 +138,8 @@
     pointer-events: none;
     z-index: -2;
     background-image:
-      linear-gradient(to right, rgba(148,163,184,0.045) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(148,163,184,0.045) 1px, transparent 1px);
+      linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
     background-size: 56px 56px;
     mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
   }
@@ -150,24 +152,30 @@
     pointer-events: none;
     z-index: -1;
     background:
-      radial-gradient(60rem 40rem at 15% -10%, color-mix(in oklab, var(--color-brand-1) 16%, transparent), transparent 60%),
-      radial-gradient(50rem 35rem at 90% 10%, color-mix(in oklab, var(--color-border-strong) 70%, transparent), transparent 60%),
-      radial-gradient(40rem 30rem at 50% 100%, color-mix(in oklab, var(--color-brand-1) 6%, transparent), transparent 70%);
+      radial-gradient(60rem 40rem at 15% -10%, color-mix(in oklab, var(--color-brand-1) 9%, transparent), transparent 60%),
+      radial-gradient(50rem 35rem at 90% 5%, color-mix(in oklab, var(--color-brand-3) 7%, transparent), transparent 60%),
+      radial-gradient(40rem 30rem at 50% 100%, color-mix(in oklab, var(--color-brand-1) 4%, transparent), transparent 70%);
     filter: blur(20px);
   }
 }
 
+/* The brand pair as RGB triples, for colours with alpha: rgb(var(--a1) / 0.4) */
+:root {
+  --a1: 34 229 242;
+  --a2: 240 92 216;
+}
+
 /* ---------- Utilities ---------- */
 @layer utilities {
   .text-gradient {
-    background: linear-gradient(120deg, #3ddbd9 0%, #8eebea 55%, #d8fbfa 100%);
+    background: linear-gradient(100deg, var(--color-brand-1) 0%, #8fb8ff 50%, var(--color-brand-3) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
   }
 
   .bg-brand-gradient {
-    background: linear-gradient(135deg, var(--color-brand-1) 0%, var(--color-brand-2) 100%);
+    background: linear-gradient(135deg, var(--color-brand-1) 0%, var(--color-brand-3) 100%);
   }
 
   /* Display headings use the product sans at a heavier weight. */
@@ -180,9 +188,9 @@
     letter-spacing: 0;
   }
 
-  /* Teal text with a light sweep passing through it. */
+  /* The mark's cyan-to-magenta, with a light sweep passing through it. */
   .text-shimmer {
-    background: linear-gradient(100deg, #3ddbd9 0%, #3ddbd9 35%, #d8fbfa 50%, #3ddbd9 65%, #3ddbd9 100%);
+    background: linear-gradient(100deg, var(--color-brand-1) 0%, #8fb8ff 30%, #f4f6ff 45%, var(--color-brand-3) 65%, var(--color-brand-3) 100%);
     background-size: 250% 100%;
     background-position: 100% 0;
     -webkit-background-clip: text;
@@ -209,7 +217,7 @@
     inset: 0;
     padding: 1px;
     border-radius: inherit;
-    background: linear-gradient(135deg, color-mix(in oklab, var(--color-brand-1) 60%, transparent), color-mix(in oklab, var(--color-brand-2) 60%, transparent));
+    background: linear-gradient(135deg, color-mix(in oklab, var(--color-brand-1) 60%, transparent), color-mix(in oklab, var(--color-brand-3) 60%, transparent));
     -webkit-mask:
       linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);
@@ -221,7 +229,7 @@
   .glow {
     box-shadow:
       0 0 0 1px color-mix(in oklab, var(--color-brand-1) 40%, transparent),
-      0 10px 40px -10px color-mix(in oklab, var(--color-brand-2) 50%, transparent);
+      0 10px 40px -10px color-mix(in oklab, var(--color-brand-3) 45%, transparent);
   }
 
   .container-page {
@@ -266,7 +274,7 @@
 .prose-tw ul,
 .prose-tw ol,
 .prose-tw blockquote {
-  color: #cbd5e1;
+  color: #c3c7ce;
 }
 .prose-tw a {
   color: var(--color-brand-1);
@@ -311,8 +319,8 @@
   font-family: var(--font-mono);
   font-size: 0.85em;
   color: var(--color-brand-1);
-  background: rgba(61, 219, 217, 0.08);
-  border: 1px solid rgba(61, 219, 217, 0.2);
+  background: rgba(34, 229, 242, 0.08);
+  border: 1px solid rgba(34, 229, 242, 0.2);
   padding: 0.1em 0.4em;
   border-radius: 4px;
 }
@@ -320,7 +328,7 @@
 /* Code blocks (Shiki output) */
 .prose-tw pre.shiki,
 .prose-tw pre.astro-code {
-  background: #0d1526 !important;
+  background: #0c0d0f !important;
   border: 1px solid rgba(255,255,255,0.08);
   border-radius: 12px;
   padding: 1.1rem 1.25rem;
@@ -372,7 +380,7 @@
 .prose-tw td {
   padding: 0.6em 1em;
   border-bottom: 1px solid rgba(255,255,255,0.05);
-  color: #cbd5e1;
+  color: #c3c7ce;
 }
 .prose-tw tr:hover td { background: rgba(255,255,255,0.02); }