From b558ab116f02b7e5b92792f0daa1ccb07b4ae8e7 Mon Sep 17 00:00:00 2001
From: Rocky <72559939+hkgood@users.noreply.github.com>
Date: Thu, 20 Aug 2026 15:15:22 +0800
Subject: [PATCH] fix(site): rebuild landing page narrative

---
 docs/assets/site.css | 2598 +++++++++++++++++++++++++-----------------
 docs/assets/site.js  |   38 +-
 docs/index.html      |  995 +++++++---------
 3 files changed, 1948 insertions(+), 1683 deletions(-)

diff --git a/docs/assets/site.css b/docs/assets/site.css
index 76cae57..50f694a 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -1,44 +1,39 @@
 :root {
   color-scheme: light dark;
-  --canvas: #f5f6f3;
+  --canvas: #eef2f6;
   --surface: #ffffff;
-  --surface-subtle: #eceeea;
-  --surface-inverse: #121412;
-  --text: #171a17;
-  --text-secondary: #606660;
-  --text-tertiary: #898f8a;
-  --stroke: rgba(23, 26, 23, 0.11);
-  --stroke-strong: rgba(23, 26, 23, 0.18);
-  --accent: #32794a;
-  --accent-hover: #28643c;
-  --accent-soft: rgba(50, 121, 74, 0.1);
-  --on-accent: #ffffff;
-  --inverse-text: #f4f6f4;
-  --inverse-secondary: #aeb4af;
-  --inverse-stroke: rgba(255, 255, 255, 0.12);
-  --radius-xl: 28px;
-  --radius-lg: 22px;
+  --surface-soft: #f7f9fb;
+  --surface-strong: #e5eaf0;
+  --ink: #111416;
+  --ink-secondary: #5f676e;
+  --ink-tertiary: #8b949c;
+  --line: rgba(17, 20, 22, 0.1);
+  --line-strong: rgba(17, 20, 22, 0.18);
+  --accent: #2d8a57;
+  --accent-strong: #237247;
+  --accent-soft: rgba(45, 138, 87, 0.1);
+  --inverse: #f4f7f5;
+  --inverse-secondary: #aab2ad;
+  --inverse-line: rgba(255, 255, 255, 0.12);
+  --content: min(1200px, calc(100vw - 64px));
+  --radius-xl: 32px;
+  --radius-lg: 24px;
   --radius-md: 16px;
-  --content: min(1120px, calc(100vw - 48px));
 }
 
 html[data-theme="dark"] {
-  --canvas: #0d0f0e;
-  --surface: #151816;
-  --surface-subtle: #1c1f1d;
-  --surface-inverse: #f1f3f1;
-  --text: #f1f3f1;
-  --text-secondary: #a6aca7;
-  --text-tertiary: #777d78;
-  --stroke: rgba(255, 255, 255, 0.1);
-  --stroke-strong: rgba(255, 255, 255, 0.17);
-  --accent: #73b889;
-  --accent-hover: #88c79a;
-  --accent-soft: rgba(115, 184, 137, 0.12);
-  --on-accent: #102016;
-  --inverse-text: #f4f6f4;
-  --inverse-secondary: #aeb4af;
-  --inverse-stroke: rgba(255, 255, 255, 0.12);
+  --canvas: #0c0e0f;
+  --surface: #191c1e;
+  --surface-soft: #222628;
+  --surface-strong: #2b3033;
+  --ink: #f2f4f3;
+  --ink-secondary: #aab0ac;
+  --ink-tertiary: #737a75;
+  --line: rgba(255, 255, 255, 0.09);
+  --line-strong: rgba(255, 255, 255, 0.16);
+  --accent: #6fbd8a;
+  --accent-strong: #82ca99;
+  --accent-soft: rgba(111, 189, 138, 0.12);
 }
 
 * {
@@ -47,7 +42,7 @@ html[data-theme="dark"] {
 
 html {
   scroll-behavior: smooth;
-  scroll-padding-top: 88px;
+  scroll-padding-top: 96px;
   background: var(--canvas);
 }
 
@@ -55,7 +50,7 @@ body {
   margin: 0;
   overflow-x: hidden;
   background: var(--canvas);
-  color: var(--text);
+  color: var(--ink);
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
     "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
   font-size: 16px;
@@ -109,8 +104,8 @@ h3 {
   left: 12px;
   padding: 9px 14px;
   border-radius: 999px;
-  background: var(--text);
-  color: var(--canvas);
+  background: var(--ink);
+  color: var(--surface);
   transform: translateY(-160%);
 }
 
@@ -121,7 +116,7 @@ h3 {
 .site-nav {
   position: fixed;
   z-index: 50;
-  top: 14px;
+  top: 18px;
   right: 0;
   left: 0;
   width: var(--content);
@@ -129,22 +124,24 @@ h3 {
 }
 
 .nav-shell {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
   min-height: 56px;
-  padding: 7px 9px 7px 14px;
-  border: 1px solid var(--stroke);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--surface) 86%, transparent);
-  backdrop-filter: blur(22px) saturate(130%);
-  -webkit-backdrop-filter: blur(22px) saturate(130%);
+  padding: 7px 8px 7px 15px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--surface) 82%, transparent);
+  box-shadow: 0 10px 32px rgba(17, 20, 22, 0.04);
+  backdrop-filter: blur(22px) saturate(140%);
+  -webkit-backdrop-filter: blur(22px) saturate(140%);
 }
 
 .brand {
   display: inline-flex;
-  gap: 9px;
+  gap: 10px;
   align-items: center;
+  justify-self: start;
   font-size: 0.94rem;
   font-weight: 700;
   letter-spacing: -0.015em;
@@ -163,9 +160,15 @@ h3 {
 }
 
 .nav-links {
-  gap: clamp(16px, 2vw, 28px);
-  color: var(--text-secondary);
-  font-size: 0.86rem;
+  gap: 30px;
+  color: var(--ink-secondary);
+  font-size: 0.84rem;
+  font-weight: 550;
+}
+
+.nav-actions {
+  gap: 4px;
+  justify-self: end;
 }
 
 .nav-links a,
@@ -177,11 +180,32 @@ h3 {
 .nav-links a:focus-visible,
 .footer-links a:hover,
 .footer-links a:focus-visible {
-  color: var(--text);
+  color: var(--ink);
 }
 
-.nav-actions {
-  gap: 4px;
+.icon-button,
+.language-button {
+  display: inline-grid;
+  min-width: 40px;
+  height: 40px;
+  padding: 0 11px;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  cursor: pointer;
+  place-items: center;
+}
+
+.icon-button:hover,
+.language-button:hover,
+.icon-button:focus-visible,
+.language-button:focus-visible {
+  background: var(--surface-strong);
+}
+
+.language-button {
+  font-size: 0.76rem;
+  font-weight: 700;
 }
 
 .icon-button.mobile-menu-button,
@@ -193,155 +217,235 @@ h3 {
   gap: 4px;
   margin-top: 8px;
   padding: 8px;
-  border: 1px solid var(--stroke);
-  border-radius: 18px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
   background: color-mix(in srgb, var(--surface) 94%, transparent);
-  backdrop-filter: blur(22px) saturate(130%);
-  -webkit-backdrop-filter: blur(22px) saturate(130%);
+  box-shadow: 0 14px 34px rgba(17, 20, 22, 0.08);
+  backdrop-filter: blur(22px);
+  -webkit-backdrop-filter: blur(22px);
 }
 
 .mobile-nav a {
-  padding: 11px 13px;
-  border-radius: 11px;
-  color: var(--text-secondary);
-  font-size: 0.88rem;
+  padding: 11px 14px;
+  border-radius: 10px;
+  color: var(--ink-secondary);
+  font-size: 0.84rem;
   font-weight: 650;
+  text-align: center;
 }
 
 .mobile-nav a:hover,
 .mobile-nav a:focus-visible {
-  background: var(--surface-subtle);
-  color: var(--text);
-}
-
-.icon-button,
-.language-button {
-  display: inline-grid;
-  min-width: 40px;
-  height: 40px;
-  padding: 0 11px;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  cursor: pointer;
-  place-items: center;
-}
-
-.icon-button:hover,
-.language-button:hover,
-.icon-button:focus-visible,
-.language-button:focus-visible {
-  background: var(--surface-subtle);
-}
-
-.language-button {
-  font-size: 0.78rem;
-  font-weight: 700;
+  background: var(--surface-strong);
+  color: var(--ink);
 }
 
 .material-symbols-rounded {
-  font-variation-settings: "FILL" 0, "wght" 430, "GRAD" 0, "opsz" 24;
+  display: inline-grid;
+  width: 1.35em;
+  height: 1.35em;
+  font-size: 0 !important;
+  line-height: 1;
+  place-items: center;
+}
+
+.material-symbols-rounded::before {
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+  line-height: 1;
+}
+
+.mobile-menu-button .material-symbols-rounded,
+#themeToggle .material-symbols-rounded {
+  display: none;
+}
+
+.mobile-menu-button::before {
+  width: 17px;
+  height: 12px;
+  border-top: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  content: "";
+}
+
+.mobile-menu-button[aria-expanded="true"]::before {
+  width: auto;
+  height: auto;
+  border: 0;
+  content: "×";
+  font-size: 1.4rem;
+  font-weight: 300;
+}
+
+#themeToggle::before {
+  content: "◐";
+  font-size: 1.05rem;
+}
+
+html[data-theme="dark"] #themeToggle::before {
+  content: "☀";
+  font-size: 1rem;
+}
+
+.scroll-cue .material-symbols-rounded::before,
+.stage-arrow::before {
+  content: "↓";
+  font-size: 1rem;
+}
+
+.stage-arrow,
+.clipboard-source > .material-symbols-rounded,
+.correction-chip .material-symbols-rounded,
+.outline-action .material-symbols-rounded {
+  width: 22px;
+  height: 22px;
+}
+
+.assistant-tabs > .material-symbols-rounded::before {
+  content: "•••";
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+}
+
+.round-control:first-child .material-symbols-rounded::before {
+  content: "↶";
+  font-size: 1.15rem;
+}
+
+.round-control:last-child .material-symbols-rounded::before {
+  content: "↑";
+  font-size: 1.05rem;
+}
+
+.mic-control .material-symbols-rounded::before {
+  content: "●";
+  font-size: 0.72rem;
+}
+
+.gesture-grid .material-symbols-rounded,
+.skill-actions .material-symbols-rounded {
+  display: none;
+}
+
+.clipboard-source > .material-symbols-rounded::before {
+  content: "⧉";
+  font-size: 1.35rem;
+}
+
+.correction-chip .material-symbols-rounded::before {
+  content: "✓";
+  font-size: 0.95rem;
+}
+
+.privacy-proof > div > .material-symbols-rounded::before {
+  content: "◈";
+  font-size: 1.55rem;
+}
+
+.ios-symbol .material-symbols-rounded::before {
+  content: "⌨";
+  font-size: 2.25rem;
+}
+
+.ios-symbol .material-symbols-rounded {
+  width: 46px;
+  height: 46px;
+}
+
+.outline-action .material-symbols-rounded::before {
+  content: "⌘";
+  font-size: 1rem;
 }
 
 .hero {
   position: relative;
-  min-height: 820px;
-  padding: 152px 0 72px;
+  display: grid;
+  min-height: 100svh;
+  padding: 132px 0 92px;
   overflow: hidden;
-  background: #0b0d0c;
-  color: var(--inverse-text);
+  place-items: center;
 }
 
-.hero-beams,
-.hero-scrim,
-.hero-glow {
+.hero-orb {
   position: absolute;
-  inset: 0;
-}
-
-.hero-beams {
-  opacity: 0.52;
-}
-
-.hero-beams canvas {
-  width: 100%;
-  height: 100%;
-}
-
-.hero-scrim {
-  background: rgba(11, 13, 12, 0.38);
+  top: 42%;
+  left: 50%;
+  width: min(760px, 84vw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--accent) 12%, transparent) 0%,
+    color-mix(in srgb, #7ea7d8 8%, transparent) 38%,
+    transparent 70%
+  );
+  filter: blur(8px);
   pointer-events: none;
-}
-
-.hero-glow {
-  display: none;
+  transform: translate(-50%, -50%);
 }
 
 .hero-inner {
   position: relative;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
-  gap: clamp(48px, 7vw, 88px);
+  z-index: 1;
+  display: flex;
   align-items: center;
   width: var(--content);
-  margin: auto;
+  max-width: 920px;
+  flex-direction: column;
+  text-align: center;
 }
 
-.eyebrow {
+.launch-pill {
   display: inline-flex;
-  gap: 8px;
+  gap: 9px;
   align-items: center;
-  margin: 0 0 17px;
-  color: var(--text-secondary);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  margin-bottom: clamp(54px, 8vh, 86px);
+  padding: 9px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface) 72%, transparent);
+  color: var(--ink-secondary);
+  font-size: 0.76rem;
+  font-weight: 650;
+  box-shadow: 0 10px 34px rgba(17, 20, 22, 0.05);
 }
 
-html[data-lang="zh"] .eyebrow {
-  letter-spacing: 0.06em;
-  text-transform: none;
-}
-
-.hero .eyebrow {
-  color: var(--inverse-secondary);
-}
-
-.eyebrow::before {
-  width: 6px;
-  height: 6px;
+.launch-dot {
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   background: var(--accent);
-  content: "";
+  box-shadow: 0 0 0 4px var(--accent-soft);
 }
 
 .hero h1 {
-  max-width: 690px;
-  margin-bottom: 24px;
-  font-size: clamp(3.7rem, 6.8vw, 6.2rem);
-  font-weight: 720;
+  max-width: 900px;
+  margin-bottom: 25px;
+  font-size: clamp(3.6rem, 5.6vw, 4.5rem);
+  font-weight: 700;
   letter-spacing: -0.055em;
-  line-height: 1;
+  line-height: 1.02;
+}
+
+.hero h1 > span {
+  display: block;
 }
 
 html[data-lang="zh"] .hero h1 {
-  font-size: clamp(3rem, 5vw, 4rem);
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  line-height: 1.08;
+  max-width: 840px;
+  font-size: clamp(3.25rem, 5vw, 4rem);
+  letter-spacing: -0.035em;
+  line-height: 1.12;
 }
 
-.hero-accent {
-  color: #d7ded9;
+.hero-muted {
+  color: var(--ink-tertiary);
 }
 
 .hero-copy {
-  max-width: 620px;
-  margin-bottom: 28px;
-  color: #b4bbb6;
-  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
+  max-width: 700px;
+  margin-bottom: 29px;
+  color: var(--ink-secondary);
+  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
   line-height: 1.75;
 }
 
@@ -349,7 +453,7 @@ html[data-lang="zh"] .hero h1 {
 .download-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 11px;
+  gap: 14px;
   align-items: center;
 }
 
@@ -360,942 +464,1123 @@ html[data-lang="zh"] .hero h1 {
 
 .store-badge img {
   width: auto;
-  height: 46px;
+  height: 48px;
 }
 
 .store-badge:hover,
 .store-badge:focus-visible {
-  opacity: 0.88;
+  opacity: 0.86;
   transform: translateY(-1px);
 }
 
-.secondary-button,
-.primary-button {
+.text-action {
   display: inline-flex;
-  gap: 8px;
   align-items: center;
-  justify-content: center;
   min-height: 46px;
-  padding: 0 18px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 13px;
-  background: rgba(255, 255, 255, 0.07);
-  color: #f1f3f1;
-  font-size: 0.88rem;
+  padding: 0 15px;
+  color: var(--ink-secondary);
+  font-size: 0.86rem;
   font-weight: 650;
-  backdrop-filter: blur(12px);
 }
 
-.primary-button {
-  border-color: transparent;
-  background: var(--accent);
-  color: var(--on-accent);
+.text-action::after {
+  margin-left: 7px;
+  content: "↗";
+}
+
+.text-action:hover,
+.text-action:focus-visible {
+  color: var(--ink);
 }
 
 .hero-note {
-  margin: 15px 0 0;
-  color: #828983;
-  font-size: 0.78rem;
-}
-
-.hero-visual {
-  position: relative;
-  width: 100%;
-  max-width: 560px;
-  margin-left: auto;
-}
-
-.illustration-label {
-  margin-bottom: 10px;
-  color: #858c86;
-  font-size: 0.7rem;
-  letter-spacing: 0.08em;
-  text-align: right;
-  text-transform: uppercase;
-}
-
-html[data-lang="zh"] .illustration-label {
-  letter-spacing: 0.04em;
-  text-transform: none;
-}
-
-.input-console {
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.13);
-  border-radius: 26px;
-  background: rgba(23, 26, 24, 0.88);
-  backdrop-filter: blur(20px);
-}
-
-.console-toolbar {
-  display: grid;
-  grid-template-columns: 44px 1fr 44px;
-  align-items: center;
-  min-height: 58px;
-  padding: 0 13px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
-}
-
-.console-brand {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  border-radius: 11px;
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: 0.67rem;
-  font-weight: 800;
-  place-items: center;
-}
-
-.mode-tabs {
-  display: flex;
-  gap: 4px;
-  justify-content: center;
-}
-
-.mode-tab {
-  padding: 6px 10px;
-  border-radius: 999px;
-  color: #858c86;
+  margin: 18px 0 0;
+  color: var(--ink-tertiary);
   font-size: 0.74rem;
-  font-weight: 650;
 }
 
-.mode-tab.is-active {
-  background: rgba(255, 255, 255, 0.09);
-  color: #f1f3f1;
-}
-
-.console-menu {
-  justify-self: end;
-  color: #858c86;
-}
-
-.console-content {
-  min-height: 350px;
-  padding: clamp(26px, 5vw, 42px);
-}
-
-.console-kicker,
-.visual-label {
-  margin-bottom: 9px;
-  color: #858c86;
-  font-size: 0.72rem;
-  font-weight: 650;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-html[data-lang="zh"] .console-kicker,
-html[data-lang="zh"] .visual-label {
-  letter-spacing: 0.04em;
-  text-transform: none;
-}
-
-.console-transcript {
-  max-width: 430px;
-  margin-bottom: 30px;
-  color: #f1f3f1;
-  font-size: clamp(1.35rem, 2.6vw, 2rem);
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1.38;
-}
-
-.console-result {
-  display: grid;
-  gap: 7px;
-  padding: 17px 18px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.045);
-}
-
-.result-label {
-  color: var(--accent);
-  font-size: 0.72rem;
-  font-weight: 700;
-}
-
-.result-copy {
-  color: #b9c0ba;
-  font-size: 0.92rem;
-}
-
-.console-footer {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
+.scroll-cue {
+  position: absolute;
+  bottom: 26px;
+  left: 50%;
+  display: inline-flex;
+  gap: 8px;
   align-items: center;
-  padding: 15px 22px 18px;
-  border-top: 1px solid rgba(255, 255, 255, 0.09);
+  color: var(--ink-tertiary);
+  font-size: 0.72rem;
+  transform: translateX(-50%);
 }
 
-.console-action,
-.console-mic {
-  display: grid;
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.075);
-  color: #aeb4af;
-  place-items: center;
-}
-
-.console-action:last-child {
-  justify-self: end;
-}
-
-.console-mic {
-  width: 54px;
-  height: 54px;
-  background: var(--accent);
-  color: var(--on-accent);
-}
-
-.hero-caption {
-  display: flex;
-  gap: 9px;
-  justify-content: center;
-  margin-top: 14px;
-  color: #858c86;
-  font-size: 0.75rem;
-}
-
-.trust-strip {
-  position: relative;
-  z-index: 3;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  width: var(--content);
-  margin: 64px auto 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.11);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
-}
-
-.trust-item {
-  min-height: 92px;
-  padding: 20px 22px;
-  border-right: 1px solid rgba(255, 255, 255, 0.11);
-}
-
-.trust-item:last-child {
-  border-right: 0;
-}
-
-.trust-item strong,
-.trust-item span {
-  display: block;
-}
-
-.trust-item strong {
-  margin-bottom: 4px;
-  color: #f0f2f0;
-  font-size: 0.93rem;
-}
-
-.trust-item span {
-  color: #858c86;
-  font-size: 0.78rem;
+.scroll-cue .material-symbols-rounded {
+  font-size: 17px;
 }
 
 .section {
-  padding: clamp(76px, 9vw, 116px) 0;
-}
-
-.section-dark {
-  background: #151715;
-  color: var(--inverse-text);
-}
-
-html[data-theme="dark"] .section-dark {
-  background: #111311;
-}
-
-.section-dark::before {
-  display: none;
+  padding: clamp(96px, 10vw, 150px) 0;
 }
 
 .section-inner {
-  position: relative;
   width: var(--content);
   margin: auto;
 }
 
-.section-heading {
-  max-width: 780px;
-  margin-bottom: clamp(36px, 5vw, 58px);
+.product-section {
+  background: var(--surface);
 }
 
-.section-heading h2 {
-  margin-bottom: 18px;
-  font-size: clamp(2.4rem, 4.6vw, 4rem);
+.eyebrow {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0 0 15px;
+  color: var(--ink-secondary);
+  font-size: 0.72rem;
   font-weight: 700;
-  letter-spacing: -0.045em;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+html[data-lang="zh"] .eyebrow {
+  letter-spacing: 0.06em;
+  text-transform: none;
+}
+
+.eyebrow::before {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  content: "";
+}
+
+.center-heading {
+  max-width: 830px;
+  margin: 0 auto clamp(52px, 7vw, 84px);
+  text-align: center;
+}
+
+.center-heading.compact {
+  margin-bottom: clamp(42px, 6vw, 68px);
+}
+
+.center-heading h2,
+.scene-copy h2,
+.split-heading h2,
+.faq-layout h2 {
+  margin-bottom: 18px;
+  font-size: clamp(2.55rem, 4.2vw, 3.5rem);
+  font-weight: 700;
+  letter-spacing: -0.05em;
   line-height: 1.06;
 }
 
-html[data-lang="zh"] .section-heading h2 {
-  font-size: clamp(2.1rem, 4vw, 3.25rem);
-  letter-spacing: -0.025em;
-  line-height: 1.12;
+html[data-lang="zh"] .center-heading h2,
+html[data-lang="zh"] .scene-copy h2,
+html[data-lang="zh"] .split-heading h2,
+html[data-lang="zh"] .faq-layout h2 {
+  font-size: clamp(2.25rem, 3.8vw, 3.15rem);
+  letter-spacing: -0.03em;
+  line-height: 1.14;
 }
 
-.section-heading p {
-  max-width: 680px;
-  margin-bottom: 0;
-  color: var(--text-secondary);
+.faq-layout h2 {
+  font-size: clamp(2.3rem, 3.5vw, 3rem);
+}
+
+html[data-lang="zh"] .faq-layout h2 {
+  font-size: clamp(2.1rem, 3vw, 2.65rem);
+}
+
+.center-heading > p:last-child,
+.scene-copy > p,
+.split-heading > p {
+  color: var(--ink-secondary);
   font-size: clamp(1rem, 1.4vw, 1.12rem);
   line-height: 1.75;
 }
 
-.section-dark .eyebrow,
-.section-dark .section-heading p {
-  color: var(--inverse-secondary);
+.center-heading > p:last-child {
+  max-width: 700px;
+  margin: auto;
 }
 
-.feature-stage {
-  display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
-  gap: clamp(44px, 7vw, 88px);
-  align-items: start;
-}
-
-.feature-copy {
-  padding-top: 12px;
-}
-
-.feature-copy h3 {
-  margin-bottom: 16px;
-  font-size: clamp(2rem, 3.4vw, 2.85rem);
-  font-weight: 680;
-  letter-spacing: -0.04em;
-  line-height: 1.1;
-}
-
-html[data-lang="zh"] .feature-copy h3 {
-  font-size: clamp(1.8rem, 3vw, 2.3rem);
-  letter-spacing: -0.02em;
-  line-height: 1.18;
-}
-
-.feature-copy > p {
-  max-width: 590px;
-  color: var(--text-secondary);
-  font-size: 1.02rem;
-  line-height: 1.75;
-}
-
-.section-dark .feature-copy > p {
-  color: var(--inverse-secondary);
-}
-
-.feature-list {
-  display: grid;
-  gap: 12px;
-  margin: 26px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.feature-list li {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-}
-
-.feature-list .material-symbols-rounded {
-  margin-top: 2px;
-  color: var(--text-tertiary);
-  font-size: 19px;
-}
-
-.section-dark .feature-list .material-symbols-rounded {
-  color: var(--inverse-secondary);
-}
-
-.workflow-visual {
-  display: grid;
-  border: 1px solid var(--stroke);
+.product-stage {
+  overflow: hidden;
+  border: 1px solid var(--line);
   border-radius: var(--radius-xl);
-  background: var(--surface);
-  color: var(--text);
+  background: var(--surface-soft);
+  box-shadow: 0 30px 80px rgba(30, 42, 52, 0.08);
 }
 
-.workflow-step {
+.stage-bar {
   display: grid;
-  grid-template-columns: 42px 34px 1fr;
-  gap: 15px;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  min-height: 128px;
-  padding: 24px 28px;
-  border-bottom: 1px solid var(--stroke);
-}
-
-.workflow-step:last-child {
-  border-bottom: 0;
-}
-
-.workflow-number {
-  color: var(--text-tertiary);
+  min-height: 54px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--line);
+  color: var(--ink-tertiary);
   font-size: 0.72rem;
-  font-weight: 700;
 }
 
-.workflow-step > .material-symbols-rounded {
-  color: var(--text-secondary);
-}
-
-.workflow-step strong,
-.workflow-step small {
-  grid-column: 3;
-}
-
-.workflow-step strong {
-  align-self: end;
-  font-size: 1.03rem;
-}
-
-.workflow-step small {
-  align-self: start;
-  color: var(--text-secondary);
-  font-size: 0.86rem;
-}
-
-.feature-grid,
-.path-grid,
-.platform-grid,
-.step-grid,
-.compare-grid {
-  display: grid;
-  gap: 16px;
-}
-
-.feature-grid {
-  grid-template-columns: repeat(12, 1fr);
-}
-
-.feature-card {
+.stage-dots {
   display: flex;
-  min-height: 260px;
-  padding: clamp(24px, 3vw, 32px);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  background: var(--surface);
+  gap: 6px;
+}
+
+.stage-dots i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--surface-strong);
+}
+
+.stage-status {
+  justify-self: end;
+}
+
+.stage-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
+  min-height: 560px;
+}
+
+.conversation {
+  display: flex;
+  justify-content: center;
+  padding: clamp(42px, 6vw, 76px);
+  border-right: 1px solid var(--line);
   flex-direction: column;
 }
 
-.feature-card:nth-child(1),
-.feature-card:nth-child(4) {
-  grid-column: span 7;
+.conversation-label,
+.typing-label,
+.platform-label {
+  color: var(--ink-tertiary);
+  font-size: 0.71rem;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
 }
 
-.feature-card:nth-child(2),
-.feature-card:nth-child(3) {
-  grid-column: span 5;
+.message-bubble {
+  align-self: flex-start;
+  max-width: 510px;
+  margin: 12px 0 24px;
+  padding: 18px 20px;
+  border-radius: 18px 18px 18px 5px;
+  background: var(--ink);
+  color: var(--surface);
+  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
+  font-weight: 600;
+  line-height: 1.5;
 }
 
-.feature-card::after {
-  display: none;
+html[data-theme="dark"] .message-bubble {
+  background: #f1f4f2;
+  color: #151817;
 }
 
-.feature-card .icon {
+.insert-preview {
+  position: relative;
+  max-width: 520px;
+  padding: 22px 24px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface);
+}
+
+.preview-kicker {
+  color: var(--accent);
+  font-size: 0.71rem;
+  font-weight: 700;
+}
+
+.insert-preview p {
+  margin: 9px 0 0;
+  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
+  font-weight: 550;
+  line-height: 1.55;
+}
+
+.text-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  margin-left: 3px;
+  background: var(--accent);
+  vertical-align: -0.1em;
+}
+
+.insert-preview .text-cursor {
+  position: absolute;
+  right: 22px;
+  bottom: 24px;
+}
+
+.keyboard-demo {
+  display: flex;
+  min-width: 0;
+  background: var(--surface-strong);
+  flex-direction: column;
+}
+
+.assistant-tabs {
   display: grid;
-  width: 42px;
-  height: 42px;
-  margin-bottom: 32px;
-  border-radius: 13px;
-  background: var(--surface-subtle);
-  color: var(--text-secondary);
+  grid-template-columns: 46px repeat(3, auto) 1fr;
+  gap: 8px;
+  align-items: center;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.assistant-logo {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  border-radius: 11px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.66rem;
+  font-weight: 800;
   place-items: center;
 }
 
-.feature-card h3 {
-  margin-bottom: 9px;
-  font-size: clamp(1.3rem, 2vw, 1.72rem);
-  font-weight: 680;
+.assistant-tab {
+  padding: 6px 9px;
+  border-radius: 999px;
+  color: var(--ink-tertiary);
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.assistant-tab.active {
+  background: var(--surface);
+  color: var(--ink);
+}
+
+.assistant-tabs > .material-symbols-rounded {
+  justify-self: end;
+  color: var(--ink-tertiary);
+}
+
+.keyboard-keys {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 7px;
+  padding: clamp(42px, 6vw, 80px) 18px 20px;
+}
+
+.keyboard-keys span {
+  display: grid;
+  min-width: 0;
+  height: 42px;
+  border-bottom: 2px solid var(--line-strong);
+  color: var(--ink-secondary);
+  font-size: 0.75rem;
+  place-items: center;
+}
+
+.keyboard-keys span:nth-child(n + 11) {
+  transform: translateX(50%);
+}
+
+.assistant-controls {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  margin-top: auto;
+  padding: 22px 24px 26px;
+  border-top: 1px solid var(--line);
+}
+
+.round-control,
+.mic-control {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--ink-secondary);
+  place-items: center;
+}
+
+.round-control:last-child {
+  justify-self: end;
+}
+
+.mic-control {
+  width: 58px;
+  height: 58px;
+  background: var(--accent);
+  color: #fff;
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent);
+}
+
+.gesture-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: 28px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.gesture-grid article {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 5px 12px;
+  min-height: 140px;
+  padding: 28px 28px 25px 0;
+  border-right: 1px solid var(--line);
+}
+
+.gesture-grid article:not(:first-child) {
+  padding-left: 28px;
+}
+
+.gesture-grid article:last-child {
+  border-right: 0;
+}
+
+.gesture-number {
+  color: var(--ink-tertiary);
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+
+.gesture-grid .material-symbols-rounded {
+  color: var(--ink-secondary);
+  font-size: 21px;
+}
+
+.gesture-grid h3,
+.gesture-grid p {
+  grid-column: 2;
+}
+
+.gesture-grid h3 {
+  align-self: end;
+  margin: 0;
+  font-size: 1rem;
+}
+
+.gesture-grid p {
+  margin: 0;
+  color: var(--ink-secondary);
+  font-size: 0.82rem;
+}
+
+.scene-section {
+  background: var(--canvas);
+}
+
+.scene-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1.2fr);
+  gap: clamp(64px, 9vw, 124px);
+  align-items: center;
+}
+
+.scene-copy {
+  max-width: 510px;
+}
+
+.quiet-list {
+  display: grid;
+  gap: 12px;
+  margin: 27px 0 0;
+  padding: 0;
+  color: var(--ink-secondary);
+  font-size: 0.9rem;
+  list-style: none;
+}
+
+.quiet-list li {
+  position: relative;
+  padding-left: 19px;
+}
+
+.quiet-list li::before {
+  position: absolute;
+  top: 0.65em;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  content: "";
+}
+
+.voice-stage {
+  padding: clamp(28px, 5vw, 52px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  background: var(--surface);
+  box-shadow: 0 26px 70px rgba(30, 42, 52, 0.07);
+}
+
+.voice-meta,
+.voice-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--ink-tertiary);
+  font-size: 0.74rem;
+}
+
+.live-indicator {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  color: var(--accent);
+  font-weight: 650;
+}
+
+.live-indicator i {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.transcript-card {
+  display: flex;
+  min-height: 230px;
+  justify-content: center;
+  padding: 54px 0 40px;
+  flex-direction: column;
+}
+
+.transcript-card span,
+.transcript-card strong {
+  display: block;
+  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
+  letter-spacing: -0.04em;
+  line-height: 1.32;
+}
+
+html[data-lang="zh"] .transcript-card span,
+html[data-lang="zh"] .transcript-card strong {
+  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
   letter-spacing: -0.025em;
 }
 
-.feature-card p {
-  max-width: 540px;
-  margin-bottom: 0;
-  color: var(--text-secondary);
-  line-height: 1.7;
+.transcript-card span {
+  color: var(--ink-tertiary);
 }
 
-.clipboard-visual,
-.styles-visual {
-  padding: clamp(24px, 4vw, 38px);
-  border: 1px solid var(--inverse-stroke);
+.waveform {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  height: 66px;
+  margin-bottom: 25px;
+}
+
+.waveform i {
+  width: 4px;
+  height: 22%;
+  border-radius: 999px;
+  background: var(--accent);
+  opacity: 0.65;
+  animation: waveform 1.8s ease-in-out infinite;
+}
+
+.waveform i:nth-child(2n) { height: 58%; animation-delay: -0.4s; }
+.waveform i:nth-child(3n) { height: 86%; animation-delay: -0.9s; }
+.waveform i:nth-child(5n) { height: 42%; animation-delay: -1.2s; }
+.waveform i:nth-child(7n) { height: 100%; animation-delay: -0.2s; }
+
+@keyframes waveform {
+  0%,
+  100% { transform: scaleY(0.7); }
+  50% { transform: scaleY(1); }
+}
+
+.typing-section {
+  background: var(--surface);
+}
+
+.typing-stories {
+  display: grid;
+  gap: 22px;
+}
+
+.typing-story {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
+  min-height: 460px;
+  overflow: hidden;
+  border: 1px solid var(--line);
   border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--surface-soft);
+}
+
+.typing-story.reverse .typing-visual {
+  order: 2;
+  border-right: 0;
+  border-left: 1px solid var(--line);
+}
+
+.typing-visual {
+  display: flex;
+  justify-content: center;
+  padding: clamp(36px, 6vw, 70px);
+  border-right: 1px solid var(--line);
+  flex-direction: column;
+}
+
+.composition-row {
+  display: flex;
+  align-items: center;
+  min-height: 86px;
+  font-size: clamp(2rem, 4vw, 3.4rem);
+  letter-spacing: -0.04em;
+}
+
+.candidate-row,
+.suggestion-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 42px;
+  overflow: hidden;
+}
+
+.candidate-row span,
+.suggestion-row span {
+  flex: 0 0 auto;
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  color: var(--ink-secondary);
+  font-size: 0.82rem;
+}
+
+.candidate-row .selected,
+.suggestion-row .selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.mini-keyboard {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 7px;
+}
+
+.mini-keyboard span {
+  display: grid;
+  min-width: 0;
+  height: 42px;
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--ink-secondary);
+  font-size: 0.72rem;
+  box-shadow: 0 1px 0 var(--line-strong);
+  place-items: center;
+}
+
+.story-copy {
+  display: flex;
+  justify-content: center;
+  padding: clamp(38px, 6vw, 70px);
+  flex-direction: column;
+}
+
+.story-index {
+  margin-bottom: auto;
+  color: var(--ink-tertiary);
+  font-size: 0.7rem;
+  font-weight: 700;
+}
+
+.story-copy h3 {
+  margin: 72px 0 14px;
+  font-size: clamp(1.85rem, 3vw, 2.65rem);
+  letter-spacing: -0.04em;
+  line-height: 1.15;
+}
+
+html[data-lang="zh"] .story-copy h3 {
+  font-size: clamp(1.7rem, 2.7vw, 2.3rem);
+  letter-spacing: -0.025em;
+}
+
+.story-copy p {
+  margin-bottom: 0;
+  color: var(--ink-secondary);
+  line-height: 1.75;
+}
+
+.english-visual {
+  gap: 28px;
+}
+
+.english-line {
+  position: relative;
+  padding-bottom: 13px;
+  border-bottom: 1px solid var(--line-strong);
+  font-size: clamp(1.7rem, 3.5vw, 3rem);
+  letter-spacing: -0.04em;
+}
+
+.correction-mark {
+  position: absolute;
+  right: 0;
+  bottom: 6px;
+  width: 25%;
+  height: 3px;
+  border-radius: 999px;
+  background: #d26a5d;
+}
+
+.correction-chip {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  align-self: flex-start;
+  padding: 9px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface);
+  color: var(--accent);
+  font-size: 0.86rem;
+  font-weight: 650;
+}
+
+.correction-chip .material-symbols-rounded {
+  font-size: 19px;
+}
+
+.skills-section {
+  background: var(--canvas);
+}
+
+.skills-layout {
+  grid-template-columns: minmax(520px, 1.15fr) minmax(0, 0.85fr);
+}
+
+.skills-stage {
+  display: flex;
+  min-height: 500px;
+  justify-content: center;
+  padding: clamp(30px, 5vw, 58px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  background: var(--surface);
+  box-shadow: 0 26px 70px rgba(30, 42, 52, 0.07);
+  flex-direction: column;
 }
 
 .clipboard-source {
   display: flex;
-  gap: 14px;
-  padding: 18px;
-  border: 1px solid var(--inverse-stroke);
-  border-radius: 17px;
-  background: rgba(255, 255, 255, 0.055);
+  gap: 16px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface-soft);
 }
 
 .clipboard-source > .material-symbols-rounded {
-  color: var(--inverse-secondary);
+  color: var(--ink-tertiary);
 }
 
 .clipboard-source small {
-  color: var(--inverse-secondary);
+  color: var(--ink-tertiary);
 }
 
 .clipboard-source p {
-  margin: 4px 0 0;
-  color: var(--inverse-text);
+  margin: 5px 0 0;
+  font-size: 1.02rem;
   line-height: 1.55;
 }
 
-.clipboard-visual .visual-label {
-  margin: 28px 0 12px;
-  color: var(--inverse-secondary);
+.stage-arrow {
+  align-self: center;
+  margin: 25px 0;
+  color: var(--ink-tertiary);
 }
 
-.skill-chip-grid {
+.skill-actions {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
 }
 
-.skill-chip {
+.skill-actions > span {
   display: flex;
-  gap: 7px;
+  gap: 8px;
   align-items: center;
-  min-height: 48px;
-  padding: 0 12px;
-  border: 1px solid var(--inverse-stroke);
+  min-height: 54px;
+  padding: 0 13px;
+  border: 1px solid var(--line);
   border-radius: 14px;
-  color: var(--inverse-secondary);
+  color: var(--ink-secondary);
   font-size: 0.82rem;
   font-weight: 650;
 }
 
-.skill-chip .material-symbols-rounded {
-  font-size: 18px;
-}
-
-.skill-chip.is-primary {
-  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
+.skill-actions > span.primary {
+  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
+  background: var(--accent-soft);
   color: var(--accent);
 }
 
-.styles-visual {
-  border-color: var(--stroke);
-  background: var(--surface);
+.skill-actions .material-symbols-rounded {
+  font-size: 19px;
 }
 
-.style-selector {
+.styles-strip {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
+  gap: 64px;
+  align-items: end;
+  margin-top: clamp(80px, 10vw, 130px);
+  padding-top: 42px;
+  border-top: 1px solid var(--line);
+}
+
+.styles-strip h3 {
+  max-width: 560px;
+  margin: 0;
+  font-size: clamp(2rem, 3.5vw, 3rem);
+  letter-spacing: -0.045em;
+  line-height: 1.15;
+}
+
+html[data-lang="zh"] .styles-strip h3 {
+  font-size: clamp(1.9rem, 3vw, 2.6rem);
+  letter-spacing: -0.025em;
+}
+
+.style-options {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 9px;
-  margin-bottom: 22px;
+  gap: 10px;
 }
 
-.style-option {
-  padding: 13px 14px;
-  border: 1px solid var(--stroke);
-  border-radius: 13px;
-  color: var(--text-secondary);
+.style-options span {
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--surface);
+  color: var(--ink-secondary);
   font-size: 0.84rem;
   font-weight: 650;
 }
 
-.style-option.is-selected {
+.style-options span.selected {
   border-color: var(--accent);
-  color: var(--text);
+  color: var(--ink);
 }
 
-.style-preview {
-  padding: 23px;
-  border-radius: 17px;
-  background: var(--surface-subtle);
+.privacy-section {
+  background: #121514;
+  color: var(--inverse);
 }
 
-.style-preview small {
-  color: var(--text-tertiary);
+html[data-theme="dark"] .privacy-section {
+  background: #050706;
 }
 
-.style-preview p {
-  margin: 12px 0 22px;
-  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
-  font-weight: 600;
-  line-height: 1.55;
+.center-heading.inverse .eyebrow,
+.center-heading.inverse > p:last-child {
+  color: var(--inverse-secondary);
 }
 
-.preview-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.preview-meta span {
-  padding: 6px 9px;
-  border: 1px solid var(--stroke);
-  border-radius: 999px;
-  color: var(--text-secondary);
-  font-size: 0.72rem;
-}
-
-.path-grid {
+.service-paths {
+  display: grid;
   grid-template-columns: repeat(3, 1fr);
+  border-top: 1px solid var(--inverse-line);
+  border-bottom: 1px solid var(--inverse-line);
 }
 
-.path-card {
-  padding: 27px;
-  border: 1px solid var(--inverse-stroke);
-  border-radius: var(--radius-lg);
-  background: rgba(255, 255, 255, 0.035);
-}
-
-.path-card.recommended {
-  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
-  background: rgba(255, 255, 255, 0.035);
-}
-
-.path-index {
-  display: block;
-  margin-bottom: 42px;
-  color: var(--inverse-secondary);
-  font-size: 0.72rem;
-  font-weight: 750;
-}
-
-.path-card h3 {
-  margin-bottom: 11px;
-  font-size: 1.55rem;
-  font-weight: 680;
-  letter-spacing: -0.025em;
-}
-
-.path-card p {
-  color: var(--inverse-secondary);
-}
-
-.path-card ul {
-  margin: 22px 0 0;
-  padding-left: 18px;
-  color: #d2d6d2;
-}
-
-.path-card li {
-  margin-bottom: 8px;
-}
-
-.account-stage {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
-  gap: clamp(48px, 8vw, 100px);
-  align-items: start;
-}
-
-.account-phone {
-  max-width: 380px;
-  margin: auto;
-  padding: 26px 18px;
-  border: 1px solid var(--stroke);
-  border-radius: 30px;
-  background: var(--surface);
-}
-
-.credit-screen {
-  padding: 4px 0 12px;
-  color: var(--text);
-}
-
-.credit-screen h3 {
-  margin-bottom: 30px;
-  text-align: center;
-  font-size: 1.08rem;
-}
-
-.credit-label {
-  margin: 0 4px 8px;
-  color: var(--text-tertiary);
-  font-size: 0.72rem;
-}
-
-.balance-card,
-.credit-pack-list {
-  border: 1px solid var(--stroke);
-  border-radius: 18px;
-  background: var(--canvas);
-}
-
-.balance-card {
-  margin-bottom: 20px;
-  padding: 18px;
-}
-
-.balance-card strong {
-  display: block;
-  font-size: 2.25rem;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.045em;
-}
-
-.balance-card span {
-  color: var(--text-secondary);
-  font-size: 0.76rem;
-}
-
-.balance-bar {
-  width: 68%;
-  height: 5px;
-  margin-top: 18px;
-  border-radius: 999px;
-  background: var(--accent);
-}
-
-.credit-pack {
+.service-paths article {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 66px;
-  padding: 0 15px;
-  border-bottom: 1px solid var(--stroke);
-}
-
-.credit-pack:last-child {
-  border-bottom: 0;
-}
-
-.credit-pack strong {
-  font-size: 1.08rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.credit-pack .buy-chip {
-  padding: 6px 10px;
-  border: 1px solid var(--stroke-strong);
-  border-radius: 10px;
-  color: var(--text-secondary);
-  font-size: 0.78rem;
-  font-weight: 650;
-}
-
-.privacy-panel {
-  display: grid;
-  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
-  gap: clamp(40px, 7vw, 82px);
-  align-items: start;
-  padding: clamp(30px, 5vw, 56px);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-xl);
-  background: var(--surface);
-}
-
-.privacy-mark {
-  display: grid;
-  width: 54px;
-  height: 54px;
-  margin-bottom: 24px;
-  border-radius: 16px;
-  background: var(--accent-soft);
-  color: var(--accent);
-  place-items: center;
-}
-
-.privacy-mark span {
-  font-size: 28px;
-}
-
-.privacy-panel h2 {
-  margin-bottom: 14px;
-  font-size: clamp(2rem, 3.5vw, 3.1rem);
-  font-weight: 700;
-  letter-spacing: -0.04em;
-  line-height: 1.08;
-}
-
-html[data-lang="zh"] .privacy-panel h2 {
-  font-size: clamp(1.9rem, 3vw, 2.65rem);
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-}
-
-.privacy-panel p {
-  color: var(--text-secondary);
-}
-
-.privacy-points {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  border-top: 1px solid var(--stroke);
-  border-left: 1px solid var(--stroke);
-}
-
-.privacy-point {
-  min-height: 132px;
-  padding: 20px;
-  border-right: 1px solid var(--stroke);
-  border-bottom: 1px solid var(--stroke);
-}
-
-.privacy-point strong {
-  display: block;
-  margin-bottom: 5px;
-}
-
-.privacy-point span {
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-  line-height: 1.55;
-}
-
-.text-link {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  margin-top: 13px;
-  color: var(--accent);
-  font-weight: 680;
-}
-
-.platform-grid {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.platform-card {
-  display: flex;
-  min-height: 420px;
-  padding: clamp(28px, 4vw, 42px);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-xl);
-  background: var(--surface);
+  min-height: 390px;
+  padding: 32px;
+  border-right: 1px solid var(--inverse-line);
   flex-direction: column;
 }
 
-.platform-card h3 {
-  margin: 22px 0 10px;
-  font-size: 1.8rem;
-  font-weight: 680;
-  letter-spacing: -0.03em;
+.service-paths article:first-child {
+  padding-left: 0;
 }
 
-.platform-card > p {
-  color: var(--text-secondary);
-  line-height: 1.7;
+.service-paths article:last-child {
+  padding-right: 0;
+  border-right: 0;
 }
 
-.platform-pill {
-  display: inline-flex;
-  gap: 7px;
-  align-items: center;
-  align-self: flex-start;
-  padding: 7px 10px;
-  border: 1px solid var(--stroke);
-  border-radius: 999px;
-  color: var(--text-secondary);
-  font-size: 0.74rem;
+.path-number {
+  color: var(--inverse-secondary);
+  font-size: 0.68rem;
   font-weight: 700;
 }
 
-.platform-specs {
+.service-paths .material-symbols-rounded {
+  display: block;
+  width: 34px;
+  height: 1px;
+  margin: 46px 0 25px;
+  background: var(--inverse-line);
+}
+
+.service-paths h3 {
+  margin-bottom: 12px;
+  font-size: 1.55rem;
+}
+
+.service-paths p {
+  color: var(--inverse-secondary);
+  line-height: 1.7;
+}
+
+.path-note {
+  margin-top: auto;
+  padding-top: 24px;
+  color: #d8ddda;
+  font-size: 0.74rem;
+}
+
+.privacy-proof {
+  display: flex;
+  gap: 32px;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 54px;
+}
+
+.privacy-proof > div {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.privacy-proof > div > .material-symbols-rounded {
+  width: 30px;
+  height: 30px;
+  color: var(--accent);
+}
+
+.privacy-proof h3 {
+  margin: 0;
+  font-size: clamp(1.2rem, 2vw, 1.55rem);
+}
+
+.inverse-link {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--inverse-secondary);
+  font-size: 0.84rem;
+  font-weight: 650;
+}
+
+.inverse-link:hover,
+.inverse-link:focus-visible {
+  color: var(--inverse);
+}
+
+.platforms-section {
+  background: var(--surface);
+}
+
+.platform-stories {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  margin-top: auto;
-  padding-top: 30px;
-  border-top: 1px solid var(--stroke);
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
 }
 
-.platform-specs span {
-  min-height: 52px;
-  padding: 12px 12px 12px 0;
-  border-bottom: 1px solid var(--stroke);
-  color: var(--text-secondary);
-  font-size: 0.82rem;
+.platform-stories article {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 30px;
+  min-height: 360px;
+  padding: 52px 52px 52px 0;
+  border-right: 1px solid var(--line);
 }
 
-.platform-specs span:nth-last-child(-n + 2) {
-  border-bottom: 0;
+.platform-stories article:last-child {
+  padding-right: 0;
+  padding-left: 52px;
+  border-right: 0;
 }
 
-.step-grid {
-  grid-template-columns: repeat(3, 1fr);
-  counter-reset: steps;
+.platform-symbol {
+  display: grid;
+  width: 110px;
+  height: 150px;
+  align-self: start;
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: var(--surface-soft);
+  color: var(--ink-secondary);
+  place-items: center;
 }
 
-.step {
-  min-height: 240px;
-  padding: 25px 25px 25px 0;
-  border-top: 1px solid var(--stroke-strong);
-  counter-increment: steps;
+.platform-symbol .material-symbols-rounded {
+  font-size: 42px;
 }
 
-.step::before {
-  display: block;
-  margin-bottom: 44px;
-  color: var(--text-tertiary);
-  content: "0" counter(steps);
-  font-size: 0.72rem;
-  font-weight: 750;
-  letter-spacing: 0.08em;
+.mac-symbol {
+  width: 116px;
+  height: 96px;
+  border-radius: 18px;
 }
 
-.step h3 {
-  margin-bottom: 9px;
-  font-size: 1.35rem;
-  font-weight: 680;
+.option-key {
+  font-size: 2.4rem;
+  font-weight: 500;
+}
+
+.platform-stories h3 {
+  margin: 26px 0 12px;
+  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
+  letter-spacing: -0.035em;
+  line-height: 1.2;
+}
+
+html[data-lang="zh"] .platform-stories h3 {
   letter-spacing: -0.02em;
 }
 
-.step p {
-  color: var(--text-secondary);
+.platform-stories p {
+  margin: 0;
+  color: var(--ink-secondary);
+  line-height: 1.75;
 }
 
-.compare-grid {
-  grid-template-columns: repeat(3, 1fr);
+.platform-footnote {
+  margin: 20px 0 0;
+  color: var(--ink-tertiary);
+  font-size: 0.76rem;
+  text-align: center;
 }
 
-.compare-cell {
+.start-section {
+  background: var(--canvas);
+}
+
+.split-heading {
   display: grid;
-  grid-template-columns: 34px 1fr;
-  gap: 4px 12px;
-  min-height: 132px;
-  padding: 22px;
-  border: 1px solid var(--inverse-stroke);
-  border-radius: 17px;
-  background: rgba(255, 255, 255, 0.035);
+  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.65fr);
+  gap: 80px;
+  align-items: end;
+  margin-bottom: 58px;
 }
 
-.compare-cell .material-symbols-rounded {
-  grid-row: span 2;
-  color: var(--inverse-secondary);
+.split-heading h2 {
+  max-width: 760px;
+  margin: 0;
 }
 
-.compare-cell strong,
-.compare-cell span {
+.split-heading > p {
+  margin: 0;
+}
+
+.setup-steps {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--line-strong);
+  counter-reset: setup;
+  list-style: none;
+}
+
+.setup-steps li {
+  min-height: 260px;
+  padding: 30px 30px 30px 0;
+  border-right: 1px solid var(--line);
+  counter-increment: setup;
+}
+
+.setup-steps li:not(:first-child) {
+  padding-left: 30px;
+}
+
+.setup-steps li:last-child {
+  border-right: 0;
+}
+
+.setup-steps li::before {
   display: block;
+  margin-bottom: 60px;
+  color: var(--ink-tertiary);
+  content: "0" counter(setup);
+  font-size: 0.7rem;
+  font-weight: 700;
 }
 
-.compare-cell strong {
-  align-self: end;
-  font-size: 0.92rem;
+.setup-steps h3 {
+  margin-bottom: 10px;
+  font-size: 1.3rem;
 }
 
-.compare-cell > span:last-child {
-  color: var(--inverse-secondary);
-  font-size: 0.78rem;
-  line-height: 1.45;
+.setup-steps p {
+  margin: 0;
+  color: var(--ink-secondary);
+  font-size: 0.9rem;
+  line-height: 1.7;
+}
+
+.stable-strip {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 48px;
+  align-items: center;
+  margin-top: 28px;
+  padding: 24px 28px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface);
+}
+
+.stable-strip > span {
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.stable-strip ul {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  color: var(--ink-secondary);
+  font-size: 0.76rem;
+  list-style: none;
+}
+
+.stable-strip li {
+  padding-left: 13px;
+  border-left: 1px solid var(--line);
+}
+
+.faq-section {
+  background: var(--surface);
+}
+
+.faq-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
+  gap: clamp(70px, 10vw, 140px);
+  align-items: start;
+}
+
+.faq-layout h2 {
+  margin: 0;
 }
 
 .faq-list {
-  max-width: 900px;
-  border-top: 1px solid var(--stroke);
+  border-top: 1px solid var(--line);
 }
 
 .faq-item {
-  border-bottom: 1px solid var(--stroke);
+  border-bottom: 1px solid var(--line);
 }
 
 .faq-item summary {
@@ -1305,7 +1590,7 @@ html[data-lang="zh"] .privacy-panel h2 {
   justify-content: space-between;
   padding: 23px 0;
   cursor: pointer;
-  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
+  font-size: 1.05rem;
   font-weight: 650;
   list-style: none;
 }
@@ -1315,9 +1600,9 @@ html[data-lang="zh"] .privacy-panel h2 {
 }
 
 .faq-item summary::after {
-  color: var(--text-tertiary);
+  color: var(--ink-tertiary);
   content: "+";
-  font-size: 1.35rem;
+  font-size: 1.3rem;
   font-weight: 400;
 }
 
@@ -1326,49 +1611,82 @@ html[data-lang="zh"] .privacy-panel h2 {
 }
 
 .faq-item p {
-  max-width: 760px;
   padding: 0 0 23px;
-  color: var(--text-secondary);
+  color: var(--ink-secondary);
+  line-height: 1.7;
+}
+
+.download-section {
+  background: var(--surface);
+  padding-top: 0;
 }
 
 .download-panel {
-  padding: clamp(38px, 7vw, 72px);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 70px;
+  align-items: end;
+  padding: clamp(44px, 7vw, 80px);
   border-radius: var(--radius-xl);
-  background: #151715;
-  color: #f2f4f2;
-}
-
-.download-panel::after {
-  display: none;
+  background: #151817;
+  color: var(--inverse);
 }
 
 .download-panel .eyebrow {
-  color: #9ea49f;
+  color: var(--inverse-secondary);
 }
 
 .download-panel h2 {
-  max-width: 760px;
-  margin-bottom: 16px;
-  font-size: clamp(2.7rem, 5vw, 4.7rem);
-  font-weight: 700;
+  max-width: 720px;
+  margin-bottom: 15px;
+  font-size: clamp(2.8rem, 4.8vw, 4.2rem);
   letter-spacing: -0.055em;
-  line-height: 1;
+  line-height: 1.05;
 }
 
 html[data-lang="zh"] .download-panel h2 {
-  font-size: clamp(2.2rem, 4vw, 3.5rem);
-  letter-spacing: -0.025em;
-  line-height: 1.1;
+  font-size: clamp(2.3rem, 3.8vw, 3.3rem);
+  letter-spacing: -0.03em;
+  line-height: 1.12;
 }
 
-.download-panel > p {
-  max-width: 640px;
-  margin-bottom: 27px;
-  color: #aeb4af;
+.download-panel p:last-child {
+  max-width: 650px;
+  margin-bottom: 0;
+  color: var(--inverse-secondary);
+}
+
+.download-actions {
+  max-width: 370px;
+  justify-content: flex-end;
+}
+
+.outline-action {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 48px;
+  padding: 0 16px;
+  border: 1px solid var(--inverse-line);
+  border-radius: 10px;
+  color: var(--inverse-secondary);
+  font-size: 0.82rem;
+  font-weight: 650;
+}
+
+.outline-action:hover,
+.outline-action:focus-visible {
+  border-color: rgba(255, 255, 255, 0.25);
+  color: var(--inverse);
+}
+
+.outline-action .material-symbols-rounded {
+  font-size: 19px;
 }
 
 .site-footer {
   padding: 38px 0 48px;
+  background: var(--surface);
 }
 
 .footer-inner {
@@ -1378,14 +1696,14 @@ html[data-lang="zh"] .download-panel h2 {
   justify-content: space-between;
   width: var(--content);
   margin: auto;
-  color: var(--text-secondary);
-  font-size: 0.8rem;
+  color: var(--ink-secondary);
+  font-size: 0.78rem;
 }
 
 .footer-links {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 17px;
 }
 
 :focus-visible {
@@ -1393,24 +1711,38 @@ html[data-lang="zh"] .download-panel h2 {
   outline-offset: 3px;
 }
 
-@media (max-width: 1080px) {
-  .nav-links {
-    gap: 15px;
+@media (max-width: 1040px) {
+  :root {
+    --content: min(100% - 48px, 1200px);
   }
 
-  .hero-inner {
-    grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
-    gap: 42px;
+  .scene-layout,
+  .skills-layout {
+    grid-template-columns: minmax(0, 0.75fr) minmax(470px, 1.25fr);
+    gap: 54px;
   }
 
-  .compare-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .platform-stories article {
+    grid-template-columns: 1fr;
+  }
+
+  .platform-stories article:last-child {
+    padding-left: 40px;
+  }
+
+  .stable-strip {
+    grid-template-columns: 1fr;
+    gap: 16px;
   }
 }
 
-@media (max-width: 920px) {
+@media (max-width: 860px) {
   :root {
-    --content: min(100% - 36px, 1120px);
+    --content: min(100% - 36px, 1200px);
+  }
+
+  .nav-shell {
+    grid-template-columns: 1fr auto;
   }
 
   .nav-links {
@@ -1422,70 +1754,122 @@ html[data-lang="zh"] .download-panel h2 {
   }
 
   .mobile-nav:not([hidden]) {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
   }
 
-  .hero {
-    min-height: auto;
-    padding-bottom: 58px;
-  }
-
-  .hero-inner,
-  .feature-stage,
-  .account-stage,
-  .privacy-panel {
+  .stage-content,
+  .scene-layout,
+  .skills-layout,
+  .typing-story,
+  .styles-strip,
+  .split-heading,
+  .faq-layout,
+  .download-panel {
     grid-template-columns: 1fr;
   }
 
-  .hero-visual {
-    max-width: 620px;
-    margin: 14px 0 0;
+  .stage-content {
+    min-height: auto;
   }
 
-  .trust-strip {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .trust-item:nth-child(2) {
+  .conversation {
+    min-height: 480px;
     border-right: 0;
+    border-bottom: 1px solid var(--line);
   }
 
-  .trust-item:nth-child(-n + 2) {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
+  .keyboard-demo {
+    min-height: 430px;
   }
 
-  .feature-stage {
-    gap: 36px;
+  .scene-copy {
+    max-width: 690px;
   }
 
-  .feature-copy {
-    padding-top: 0;
+  .typing-story.reverse .typing-visual {
+    order: 0;
+    border-bottom: 1px solid var(--line);
+    border-left: 0;
   }
 
-  .path-grid,
-  .step-grid {
+  .typing-visual {
+    min-height: 420px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .story-copy {
+    min-height: 330px;
+  }
+
+  .styles-strip {
+    gap: 34px;
+    align-items: start;
+  }
+
+  .service-paths {
     grid-template-columns: 1fr;
   }
 
-  .path-card {
-    min-height: auto;
+  .service-paths article,
+  .service-paths article:first-child,
+  .service-paths article:last-child {
+    min-height: 300px;
+    padding: 30px 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--inverse-line);
   }
 
-  .path-index {
-    margin-bottom: 28px;
+  .service-paths article:last-child {
+    border-bottom: 0;
   }
 
-  .step {
+  .service-paths .material-symbols-rounded {
+    margin: 28px 0 20px;
+  }
+
+  .privacy-proof {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .platform-stories {
+    grid-template-columns: 1fr;
+  }
+
+  .platform-stories article,
+  .platform-stories article:last-child {
+    grid-template-columns: 120px 1fr;
     min-height: auto;
-    padding-right: 0;
+    padding: 40px 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .platform-stories article:last-child {
+    border-bottom: 0;
+  }
+
+  .split-heading {
+    gap: 24px;
+  }
+
+  .download-panel {
+    align-items: start;
+    gap: 34px;
+  }
+
+  .download-actions {
+    justify-content: flex-start;
   }
 }
 
-@media (max-width: 680px) {
+@media (max-width: 640px) {
   :root {
-    --content: min(100% - 28px, 1120px);
-    --radius-xl: 23px;
-    --radius-lg: 19px;
+    --content: min(100% - 28px, 1200px);
+    --radius-xl: 24px;
+    --radius-lg: 20px;
   }
 
   .site-nav {
@@ -1493,119 +1877,253 @@ html[data-lang="zh"] .download-panel h2 {
   }
 
   .nav-shell {
-    min-height: 51px;
-    padding: 5px 6px 5px 11px;
+    min-height: 50px;
+    padding: 5px 5px 5px 10px;
+    border-radius: 14px;
   }
 
   .brand span {
     display: none;
   }
 
-  .mobile-nav:not([hidden]) {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
+  .mobile-nav {
+    border-radius: 14px;
   }
 
   .mobile-nav a {
     padding: 10px 4px;
     font-size: 0.76rem;
-    text-align: center;
   }
 
   .hero {
-    padding-top: 112px;
+    min-height: 780px;
+    padding: 108px 0 86px;
+  }
+
+  .launch-pill {
+    margin-bottom: 54px;
+    font-size: 0.7rem;
   }
 
   .hero h1,
   html[data-lang="zh"] .hero h1 {
-    font-size: clamp(2.75rem, 13vw, 3.6rem);
+    font-size: clamp(2rem, 9vw, 2.2rem);
+  }
+
+  .hero h1 > span {
+    white-space: nowrap;
   }
 
   .hero-copy {
     font-size: 1rem;
   }
 
-  .store-badge img {
-    height: 44px;
+  .hero-actions {
+    flex-direction: column;
   }
 
-  .console-content {
-    min-height: 310px;
+  .hero-note {
+    max-width: 310px;
+    line-height: 1.6;
+  }
+
+  .scroll-cue {
+    white-space: nowrap;
+  }
+
+  .section {
+    padding: 82px 0;
+  }
+
+  .center-heading h2,
+  .scene-copy h2,
+  .split-heading h2,
+  .faq-layout h2,
+  html[data-lang="zh"] .center-heading h2,
+  html[data-lang="zh"] .scene-copy h2,
+  html[data-lang="zh"] .split-heading h2,
+  html[data-lang="zh"] .faq-layout h2 {
+    font-size: 2.2rem;
+  }
+
+  .stage-bar {
+    grid-template-columns: 1fr auto;
+  }
+
+  .stage-dots {
+    display: none;
+  }
+
+  .stage-status {
+    display: none;
+  }
+
+  .conversation {
+    min-height: 420px;
+    padding: 28px 20px;
+  }
+
+  .message-bubble {
+    font-size: 1rem;
+  }
+
+  .insert-preview {
+    padding: 18px;
+  }
+
+  .keyboard-demo {
+    min-height: 360px;
+  }
+
+  .assistant-tabs {
+    grid-template-columns: 42px repeat(3, auto) 1fr;
+    gap: 3px;
+    padding: 13px 10px;
+  }
+
+  .assistant-tab {
+    padding: 6px;
+  }
+
+  .keyboard-keys {
+    gap: 4px;
+    padding: 45px 10px 16px;
+  }
+
+  .keyboard-keys span {
+    height: 36px;
+    font-size: 0.65rem;
+  }
+
+  .gesture-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .gesture-grid article,
+  .gesture-grid article:not(:first-child) {
+    min-height: 120px;
+    padding: 23px 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .gesture-grid article:last-child {
+    border-bottom: 0;
+  }
+
+  .voice-stage,
+  .skills-stage {
     padding: 24px 20px;
   }
 
-  .console-transcript {
-    font-size: 1.35rem;
+  .transcript-card {
+    min-height: 210px;
   }
 
-  .hero-caption {
-    gap: 6px;
-    font-size: 0.7rem;
+  .waveform {
+    gap: 5px;
   }
 
-  .trust-strip,
-  .feature-grid,
-  .privacy-points,
-  .platform-grid,
-  .compare-grid {
-    grid-template-columns: 1fr;
+  .typing-visual {
+    min-height: 350px;
+    padding: 28px 20px;
   }
 
-  .trust-item {
-    min-height: 78px;
-    border-right: 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
+  .story-copy {
+    min-height: 290px;
+    padding: 28px 22px;
   }
 
-  .trust-item:last-child {
-    border-bottom: 0;
+  .story-copy h3 {
+    margin-top: 54px;
   }
 
-  .feature-card:nth-child(n) {
-    grid-column: span 1;
+  .mini-keyboard {
+    gap: 4px;
   }
 
-  .feature-card {
-    min-height: auto;
+  .mini-keyboard span {
+    height: 34px;
+    font-size: 0.62rem;
   }
 
-  .workflow-step {
-    grid-template-columns: 32px 28px 1fr;
-    min-height: 112px;
-    padding: 20px;
+  .english-line {
+    font-size: 1.55rem;
   }
 
-  .skill-chip-grid {
+  .skills-stage {
+    min-height: 440px;
+  }
+
+  .skill-actions {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .style-selector,
-  .platform-specs {
+  .styles-strip {
+    margin-top: 80px;
+  }
+
+  .style-options {
     grid-template-columns: 1fr;
   }
 
-  .platform-card {
-    min-height: 380px;
+  .privacy-proof h3 {
+    font-size: 1.08rem;
   }
 
-  .platform-specs span:nth-last-child(-n + 2) {
-    border-bottom: 1px solid var(--stroke);
+  .platform-stories article,
+  .platform-stories article:last-child {
+    grid-template-columns: 1fr;
+    gap: 22px;
   }
 
-  .platform-specs span:last-child {
-    border-bottom: 0;
+  .platform-symbol {
+    width: 92px;
+    height: 122px;
+    border-radius: 23px;
   }
 
-  .privacy-point {
+  .mac-symbol {
+    height: 76px;
+    border-radius: 16px;
+  }
+
+  .setup-steps {
+    grid-template-columns: 1fr;
+  }
+
+  .setup-steps li,
+  .setup-steps li:not(:first-child) {
     min-height: auto;
+    padding: 25px 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
   }
 
-  .account-phone {
-    width: 100%;
+  .setup-steps li::before {
+    margin-bottom: 34px;
+  }
+
+  .stable-strip {
+    padding: 22px;
+  }
+
+  .stable-strip ul {
+    grid-template-columns: repeat(2, 1fr);
   }
 
   .download-panel {
-    padding: 34px 24px;
+    padding: 34px 22px;
+  }
+
+  .download-panel h2,
+  html[data-lang="zh"] .download-panel h2 {
+    font-size: 2.25rem;
+  }
+
+  .download-actions {
+    align-items: flex-start;
+    flex-direction: column;
   }
 
   .footer-inner {
diff --git a/docs/assets/site.js b/docs/assets/site.js
index 4828086..d0cee4e 100644
--- a/docs/assets/site.js
+++ b/docs/assets/site.js
@@ -1,7 +1,7 @@
 /*!
  * OSGKeyboard website interactions.
- * The page remains useful without JavaScript; this file adds language, theme,
- * media, and the decorative Three.js hero enhancement.
+ * The page remains useful without JavaScript; this file adds language,
+ * theme, and compact mobile navigation controls.
  */
 (function () {
   "use strict";
@@ -13,10 +13,9 @@
   const menuButton = document.getElementById("menuToggle");
   const menuIcon = menuButton?.querySelector(".material-symbols-rounded");
   const mobileNav = document.getElementById("mobileNav");
-  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const themeColor = document.querySelector('meta[name="theme-color"]');
   const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
   const supportedLanguages = new Set(["zh", "en"]);
-  let beams = null;
 
   function preferredLanguage() {
     const query = new URLSearchParams(window.location.search).get("lang");
@@ -130,40 +129,15 @@
       themeButton.setAttribute("aria-label", label);
     }
 
-    beams?.setBackground("#0b0d0c");
-    beams?.setLightColor(resolved === "dark" ? "#7faf8a" : "#6eaa7d");
+    themeColor?.setAttribute("content", resolved === "dark" ? "#0c0e0f" : "#eef2f6");
 
     if (persist) localStorage.setItem("osg-site-theme", resolved);
   }
 
-  function initializeBeams() {
-    const canvas = document.getElementById("heroAuroraCanvas");
-    if (!canvas || !window.OSGBeamsHero || !window.THREE) return;
-
-    try {
-      beams = window.OSGBeamsHero.create(canvas, {
-        beamWidth: 4.5,
-        beamHeight: 6,
-        beamNumber: 26,
-        lightColor: "#7faf8a",
-        speed: 4.5,
-        noiseIntensity: 2.65,
-        scale: 0.62,
-        rotation: 208,
-        background: "#0b0d0c",
-        reduceMotion
-      });
-    } catch (error) {
-      console.warn("OSGKeyboard hero enhancement unavailable.", error);
-      canvas.hidden = true;
-    }
-  }
-
   const initialLanguage = preferredLanguage();
   const initialTheme = storedTheme() || (themeMedia.matches ? "dark" : "light");
   applyLanguage(initialLanguage, false);
   applyTheme(initialTheme, false);
-  initializeBeams();
 
   languageButton?.addEventListener("click", () => {
     applyLanguage(root.dataset.lang === "zh" ? "en" : "zh", true);
@@ -189,8 +163,4 @@
   themeMedia.addEventListener("change", (event) => {
     if (!storedTheme()) applyTheme(event.matches ? "dark" : "light", false);
   });
-
-  document.addEventListener("visibilitychange", () => {
-    beams?.setVisible(!document.hidden);
-  });
 })();
diff --git a/docs/index.html b/docs/index.html
index a1260e3..0a9bb2d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,7 +11,7 @@
     data-en-content="OSGKeyboard brings voice input to iPhone, iPad, and Mac. Its iOS keyboard combines dictation, Chinese and English typing, an AI assistant, clipboard skills, and optional managed credits—with on-device recognition by default."
   >
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#06100a">
+  <meta name="theme-color" content="#eef2f6">
   <meta name="color-scheme" content="light dark">
   <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/">
   <link rel="alternate" hreflang="zh-Hans" href="https://hkgood.github.io/OSGKeyboard/">
@@ -37,7 +37,7 @@
   <meta name="twitter:card" content="summary">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,0&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="assets/site.css">
   <script>
     (function () {
@@ -126,11 +126,10 @@
         <span>OSGKeyboard</span>
       </a>
       <div class="nav-links">
-        <a href="#assistant" data-zh="产品" data-en="Product">产品</a>
-        <a href="#typing" data-zh="能力" data-en="Capabilities">能力</a>
+        <a href="#assistant" data-zh="体验" data-en="Experience">体验</a>
+        <a href="#typing" data-zh="输入" data-en="Typing">输入</a>
         <a href="#privacy" data-zh="隐私" data-en="Privacy">隐私</a>
         <a href="#platforms" data-zh="平台" data-en="Platforms">平台</a>
-        <a href="#start" data-zh="开始" data-en="Get started">开始</a>
       </div>
       <div class="nav-actions">
         <button
@@ -146,702 +145,482 @@
           <span class="material-symbols-rounded" aria-hidden="true">menu</span>
         </button>
         <button class="language-button" id="languageToggle" type="button" aria-label="Switch to English">EN</button>
-        <button
-          class="icon-button"
-          id="themeToggle"
-          type="button"
-          aria-label="切换到深色模式"
-        >
+        <button class="icon-button" id="themeToggle" type="button" aria-label="切换到深色模式">
           <span class="material-symbols-rounded" aria-hidden="true">dark_mode</span>
         </button>
       </div>
     </nav>
     <nav class="mobile-nav" id="mobileNav" aria-label="Mobile" hidden>
-      <a href="#assistant" data-zh="产品" data-en="Product">产品</a>
-      <a href="#typing" data-zh="能力" data-en="Capabilities">能力</a>
+      <a href="#assistant" data-zh="体验" data-en="Experience">体验</a>
+      <a href="#typing" data-zh="输入" data-en="Typing">输入</a>
       <a href="#privacy" data-zh="隐私" data-en="Privacy">隐私</a>
       <a href="#platforms" data-zh="平台" data-en="Platforms">平台</a>
-      <a href="#start" data-zh="开始" data-en="Start">开始</a>
     </nav>
   </header>
 
   <main id="main">
-    <!-- Hero -->
+    <!-- Hero: one promise, one primary action -->
     <section class="hero" id="top">
-      <div class="hero-beams" aria-hidden="true">
-        <canvas id="heroAuroraCanvas"></canvas>
-      </div>
-      <div class="hero-glow" aria-hidden="true"></div>
-      <div class="hero-scrim" aria-hidden="true"></div>
-
+      <div class="hero-orb" aria-hidden="true"></div>
       <div class="hero-inner">
-        <div>
-          <p class="eyebrow" data-zh="OSGKeyboard 2.0 · iOS 26" data-en="OSGKeyboard 2.0 · iOS 26">
-            OSGKeyboard 2.0 · iOS 26
-          </p>
-          <h1>
-            <span data-zh="不止听写。" data-en="Beyond dictation.">不止听写。</span><br>
-            <span class="hero-accent" data-zh="你的输入助手。" data-en="Your input assistant.">你的输入助手。</span>
-          </h1>
-          <p
-            class="hero-copy"
-            data-zh="在任意 App 里说、打、问、改。OSGKeyboard 把端侧语音、中英输入、AI 问答与剪贴板技能放进同一个键盘，文字准确落到光标处。"
-            data-en="Speak, type, ask, and edit in any app. OSGKeyboard puts on-device speech, Chinese and English typing, AI answers, and clipboard skills in one keyboard—right at your cursor."
-          >在任意 App 里说、打、问、改。OSGKeyboard 把端侧语音、中英输入、AI 问答与剪贴板技能放进同一个键盘，文字准确落到光标处。</p>
-          <div class="hero-actions">
-            <a
-              class="store-badge"
-              href="https://apps.apple.com/cn/app/osgkeyboard/id6781553267"
-              data-zh-href="https://apps.apple.com/cn/app/osgkeyboard/id6781553267"
-              data-en-href="https://apps.apple.com/app/osgkeyboard/id6781553267"
-              rel="noopener"
+        <p class="launch-pill">
+          <span class="launch-dot" aria-hidden="true"></span>
+          <span data-zh="OSGKeyboard 2.0 · 为 iOS 26 而生" data-en="OSGKeyboard 2.0 · Built for iOS 26">
+            OSGKeyboard 2.0 · 为 iOS 26 而生
+          </span>
+        </p>
+        <h1>
+          <span data-zh="声音，直达输入框。" data-en="From voice to text.">声音，直达输入框。</span>
+          <span class="hero-muted" data-zh="不用离开正在做的事。" data-en="Right where you type.">不用离开正在做的事。</span>
+        </h1>
+        <p
+          class="hero-copy"
+          data-zh="在任意 App 里听写、打字、提问和编辑。OSGKeyboard 把语音识别、中英输入与 AI 助手放进同一个键盘。"
+          data-en="Dictate, type, ask, and edit in any app. OSGKeyboard brings voice recognition, bilingual typing, and an AI assistant into one keyboard."
+        >在任意 App 里听写、打字、提问和编辑。OSGKeyboard 把语音识别、中英输入与 AI 助手放进同一个键盘。</p>
+        <div class="hero-actions">
+          <a
+            class="store-badge"
+            href="https://apps.apple.com/cn/app/osgkeyboard/id6781553267"
+            data-zh-href="https://apps.apple.com/cn/app/osgkeyboard/id6781553267"
+            data-en-href="https://apps.apple.com/app/osgkeyboard/id6781553267"
+            rel="noopener"
+          >
+            <img
+              src="assets/badges/ios-zh.svg"
+              data-zh-src="assets/badges/ios-zh.svg"
+              data-en-src="assets/badges/ios-en.svg"
+              data-zh-alt="立即下载 App Store 版"
+              data-en-alt="Download on the App Store"
+              alt="立即下载 App Store 版"
+              width="171"
+              height="48"
             >
-              <img
-                src="assets/badges/ios-zh.svg"
-                data-zh-src="assets/badges/ios-zh.svg"
-                data-en-src="assets/badges/ios-en.svg"
-                data-zh-alt="立即下载 App Store 版"
-                data-en-alt="Download on the App Store"
-                alt="立即下载 App Store 版"
-                width="171"
-                height="48"
-              >
-            </a>
-            <a class="store-badge" href="https://github.com/hkgood/OSGKeyboard/releases/download/v1.1-mac/OSGKeyboard-1.1.dmg">
-              <img
-                src="assets/badges/macos-zh.svg"
-                data-zh-src="assets/badges/macos-zh.svg"
-                data-en-src="assets/badges/macos-en.svg"
-                data-zh-alt="下载 macOS 历史版本 1.1"
-                data-en-alt="Download historical macOS version 1.1"
-                alt="下载 macOS 历史版本 1.1"
-                width="171"
-                height="48"
-              >
-            </a>
-            <a class="secondary-button" href="https://github.com/hkgood/OSGKeyboard">
-              <span class="material-symbols-rounded" aria-hidden="true">code</span>
-              <span data-zh="查看源码" data-en="View source">查看源码</span>
-            </a>
-          </div>
-          <p
-            class="hero-note"
-            data-zh="iOS / iPadOS 26+ · macOS 15+（公开 DMG 为历史版 1.1）· 核心功能无需 OSG 账号"
-            data-en="iOS / iPadOS 26+ · macOS 15+ (public DMG is historical v1.1) · core features need no OSG account"
-          >iOS / iPadOS 26+ · macOS 15+（公开 DMG 为历史版 1.1）· 核心功能无需 OSG 账号</p>
-        </div>
-
-        <div
-          class="hero-visual"
-          aria-label="OSGKeyboard 功能示意"
-          data-zh-label="OSGKeyboard 功能示意"
-          data-en-label="OSGKeyboard capability illustration"
-        >
-          <div class="illustration-label" data-zh="功能示意" data-en="Product illustration">功能示意</div>
-          <div class="input-console">
-            <div class="console-toolbar">
-              <span class="console-brand">OSG</span>
-              <div class="mode-tabs" aria-hidden="true">
-                <span class="mode-tab is-active" data-zh="助手" data-en="Assistant">助手</span>
-                <span class="mode-tab" data-zh="中文" data-en="中文">中文</span>
-                <span class="mode-tab">EN</span>
-              </div>
-              <span class="material-symbols-rounded console-menu" aria-hidden="true">more_horiz</span>
-            </div>
-            <div class="console-content">
-              <p class="console-kicker" data-zh="当前输入" data-en="Current input">当前输入</p>
-              <p
-                class="console-transcript"
-                data-zh="把刚才的内容整理得更清楚，同时保留我的语气。"
-                data-en="Make that clearer while keeping it in my voice."
-              >把刚才的内容整理得更清楚，同时保留我的语气。</p>
-              <div class="console-result">
-                <span class="result-label" data-zh="准备插入" data-en="Ready to insert">准备插入</span>
-                <span class="result-copy" data-zh="内容已经整理好，并保留了原本的表达方式。" data-en="The text is clearer and still sounds like you.">内容已经整理好，并保留了原本的表达方式。</span>
-              </div>
-            </div>
-            <div class="console-footer">
-              <span class="console-action">
-                <span class="material-symbols-rounded" aria-hidden="true">undo</span>
-              </span>
-              <span class="console-mic">
-                <span class="material-symbols-rounded" aria-hidden="true">mic</span>
-              </span>
-              <span class="console-action">
-                <span class="material-symbols-rounded" aria-hidden="true">arrow_upward</span>
-              </span>
-            </div>
-          </div>
-          <div class="hero-caption">
-            <span data-zh="轻点听写" data-en="Tap to dictate">轻点听写</span>
-            <span aria-hidden="true">·</span>
-            <span data-zh="长按提问" data-en="Hold to ask">长按提问</span>
-            <span aria-hidden="true">·</span>
-            <span data-zh="安全插入" data-en="Insert safely">安全插入</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="trust-strip">
-        <div class="trust-item">
-          <strong data-zh="端侧优先" data-en="On-device first">端侧优先</strong>
-          <span data-zh="iOS 26 本地语音识别" data-en="Local speech recognition on iOS 26">iOS 26 本地语音识别</span>
-        </div>
-        <div class="trust-item">
-          <strong data-zh="中英双输入" data-en="Chinese + English">中英双输入</strong>
-          <span data-zh="全拼、双拼、纠错与补全" data-en="Pinyin, double pinyin, correction, completion">全拼、双拼、纠错与补全</span>
-        </div>
-        <div class="trust-item">
-          <strong data-zh="三种服务路径" data-en="Three service paths">三种服务路径</strong>
-          <span data-zh="本地、BYOK、托管积分" data-en="Local, BYOK, or managed credits">本地、BYOK、托管积分</span>
-        </div>
-        <div class="trust-item">
-          <strong data-zh="源码可审计" data-en="Source-auditable">源码可审计</strong>
-          <span data-zh="源码可见，非开源许可" data-en="Source available, not open source">源码可见，非开源许可</span>
+          </a>
+          <a
+            class="text-action"
+            href="https://github.com/hkgood/OSGKeyboard"
+            data-zh="查看源码"
+            data-en="View source"
+          >查看源码</a>
         </div>
+        <p
+          class="hero-note"
+          data-zh="iOS / iPadOS 26+ · 核心功能无需 OSG 账号 · 默认端侧识别"
+          data-en="iOS / iPadOS 26+ · No OSG account for core features · On-device by default"
+        >iOS / iPadOS 26+ · 核心功能无需 OSG 账号 · 默认端侧识别</p>
       </div>
+      <a class="scroll-cue" href="#assistant" aria-label="Explore">
+        <span data-zh="看看它如何工作" data-en="See how it works">看看它如何工作</span>
+        <span class="material-symbols-rounded" aria-hidden="true">south</span>
+      </a>
     </section>
 
-    <!-- Differentiation -->
-    <section class="section section-dark" id="assistant">
+    <!-- Unified assistant: demonstrate the core interaction before listing features -->
+    <section class="section product-section" id="assistant">
       <div class="section-inner">
-        <div class="section-heading">
+        <div class="center-heading">
           <p class="eyebrow" data-zh="统一助手键盘" data-en="Unified assistant keyboard">统一助手键盘</p>
-          <h2 data-zh="一句话，从想法直接到输入框。" data-en="From thought to text field, in one move.">一句话，从想法直接到输入框。</h2>
+          <h2 data-zh="一句话，从想法直接到输入框。" data-en="One thought. Ready to use where you are.">一句话，从想法直接到输入框。</h2>
           <p
-            data-zh="轻点麦克风开始听写，长按直接向 AI 提问。结果会流式呈现；只有输入框和光标上下文仍匹配时才自动上屏。"
-            data-en="Tap the microphone to dictate or hold it to ask AI. Answers stream in and insert automatically only while the original field and cursor context still match."
-          >轻点麦克风开始听写，长按直接向 AI 提问。结果会流式呈现；只有输入框和光标上下文仍匹配时才自动上屏。</p>
+            data-zh="轻点麦克风开始听写，长按直接向 AI 提问。结果先显示、后插入，让每一步都可见、可控。"
+            data-en="Tap the microphone to dictate, or hold it to ask AI. Results appear before insertion, so every step stays visible and under your control."
+          >轻点麦克风开始听写，长按直接向 AI 提问。结果先显示、后插入，让每一步都可见、可控。</p>
         </div>
 
-        <div class="feature-stage">
-          <div class="feature-copy">
-            <h3 data-zh="听写、提问、编辑，共用一个入口。" data-en="Dictate, ask, and edit from one surface.">听写、提问、编辑，共用一个入口。</h3>
-            <p
-              data-zh="助手会理解当前输入框的 Return 语义，显示发送、搜索、前往、完成、下一步或换行。一次撤销可覆盖听写、AI 回答、编辑和剪贴板粘贴。"
-              data-en="The assistant follows the focused field's Return behavior—Send, Search, Go, Done, Next, or newline. One undo action covers dictation, AI answers, edits, and clipboard pastes."
-            >助手会理解当前输入框的 Return 语义，显示发送、搜索、前往、完成、下一步或换行。一次撤销可覆盖听写、AI 回答、编辑和剪贴板粘贴。</p>
-            <ul class="feature-list">
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="液态玻璃麦克风与情境热词" data-en="Liquid Glass microphone and contextual prompts">液态玻璃麦克风与情境热词</span>
-              </li>
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="口述修改最近一次可靠输入" data-en="Voice-edit the last verified insertion">口述修改最近一次可靠输入</span>
-              </li>
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="全局目标语言也适用于 AI 回答" data-en="Global target language also applies to AI answers">全局目标语言也适用于 AI 回答</span>
-              </li>
-            </ul>
+        <div class="product-stage">
+          <div class="stage-bar">
+            <span class="stage-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+            <span data-zh="任意 App · 功能示意" data-en="Any app · Product illustration">任意 App · 功能示意</span>
+            <span class="stage-status" data-zh="本地优先" data-en="Local first">本地优先</span>
           </div>
-          <div class="workflow-visual" aria-label="Assistant workflow">
-            <div class="workflow-step">
-              <span class="workflow-number">01</span>
-              <span class="material-symbols-rounded" aria-hidden="true">mic</span>
-              <strong data-zh="表达意图" data-en="Express intent">表达意图</strong>
-              <small data-zh="轻点听写，长按提问" data-en="Tap to dictate, hold to ask">轻点听写，长按提问</small>
+          <div class="stage-content">
+            <div class="conversation">
+              <span class="conversation-label" data-zh="当前输入" data-en="Current input">当前输入</span>
+              <div class="message-bubble">
+                <span data-zh="帮我把刚才的内容整理清楚，但保留我的语气。" data-en="Make that clearer, but keep it in my voice.">
+                  帮我把刚才的内容整理清楚，但保留我的语气。
+                </span>
+              </div>
+              <div class="insert-preview">
+                <span class="preview-kicker" data-zh="准备插入" data-en="Ready to insert">准备插入</span>
+                <p
+                  data-zh="内容已经整理得更清楚，同时保留了原本的表达方式。"
+                  data-en="The message is clearer while preserving your original tone."
+                >内容已经整理得更清楚，同时保留了原本的表达方式。</p>
+                <span class="text-cursor" aria-hidden="true"></span>
+              </div>
             </div>
-            <div class="workflow-step">
-              <span class="workflow-number">02</span>
-              <span class="material-symbols-rounded" aria-hidden="true">auto_fix_high</span>
-              <strong data-zh="理解并处理" data-en="Understand and process">理解并处理</strong>
-              <small data-zh="润色、问答或编辑" data-en="Polish, answer, or edit">润色、问答或编辑</small>
-            </div>
-            <div class="workflow-step">
-              <span class="workflow-number">03</span>
-              <span class="material-symbols-rounded" aria-hidden="true">text_fields</span>
-              <strong data-zh="确认上下文" data-en="Verify context">确认上下文</strong>
-              <small data-zh="安全插入当前输入框" data-en="Insert safely into the field">安全插入当前输入框</small>
+            <div class="keyboard-demo" aria-hidden="true">
+              <div class="assistant-tabs">
+                <span class="assistant-logo">OSG</span>
+                <span class="assistant-tab active" data-zh="助手" data-en="Assistant">助手</span>
+                <span class="assistant-tab">中文</span>
+                <span class="assistant-tab">EN</span>
+                <span class="material-symbols-rounded">more_horiz</span>
+              </div>
+              <div class="keyboard-keys">
+                <span>Q</span><span>W</span><span>E</span><span>R</span><span>T</span><span>Y</span><span>U</span><span>I</span><span>O</span><span>P</span>
+                <span>A</span><span>S</span><span>D</span><span>F</span><span>G</span><span>H</span><span>J</span><span>K</span><span>L</span>
+              </div>
+              <div class="assistant-controls">
+                <span class="round-control"><span class="material-symbols-rounded">undo</span></span>
+                <span class="mic-control"><span class="material-symbols-rounded">mic</span></span>
+                <span class="round-control"><span class="material-symbols-rounded">arrow_upward</span></span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </section>
 
-    <section class="section" id="typing">
-      <div class="section-inner">
-        <div class="section-heading">
-          <p class="eyebrow" data-zh="完整文字键盘" data-en="Full typing keyboard">完整文字键盘</p>
-          <h2 data-zh="不方便说话时，照样好打。" data-en="When speaking isn't right, typing still is.">不方便说话时，照样好打。</h2>
-          <p
-            data-zh="OSGKeyboard 不只是语音层。中文 Rime 与离线英文建议都在键盘扩展内工作，输入习惯保存在本机。"
-            data-en="OSGKeyboard is more than a voice layer. Chinese Rime and offline English suggestions run inside the keyboard extension, with learning kept on-device."
-          >OSGKeyboard 不只是语音层。中文 Rime 与离线英文建议都在键盘扩展内工作，输入习惯保存在本机。</p>
-        </div>
-
-        <div class="feature-grid">
-          <article class="feature-card">
-            <span class="icon material-symbols-rounded" aria-hidden="true">translate</span>
-            <h3 data-zh="中文全拼与双拼" data-en="Chinese pinyin and double pinyin">中文全拼与双拼</h3>
-            <p
-              data-zh="支持全拼、微软双拼、搜狗双拼、可选模糊音、简拼排序与最多约 80 条展开候选；词频学习只留在本机。"
-              data-en="Full pinyin, Microsoft and Sogou double pinyin, optional fuzzy pairs, abbreviation ranking, and an expanded grid of roughly 80 candidates—with local-only learning."
-            >支持全拼、微软双拼、搜狗双拼、可选模糊音、简拼排序与最多约 80 条展开候选；词频学习只留在本机。</p>
+        <div class="gesture-grid">
+          <article>
+            <span class="gesture-number">01</span>
+            <span class="material-symbols-rounded" aria-hidden="true">mic</span>
+            <h3 data-zh="说出意图" data-en="Express intent">说出意图</h3>
+            <p data-zh="轻点听写，长按提问。" data-en="Tap to dictate, hold to ask.">轻点听写，长按提问。</p>
           </article>
-          <article class="feature-card violet">
-            <span class="icon material-symbols-rounded" aria-hidden="true">spellcheck</span>
-            <h3 data-zh="英文 QuickType" data-en="English QuickType">英文 QuickType</h3>
-            <p
-              data-zh="三格候选显示原文、唯一纠错和补全。约 4 万词离线词表结合系统词库、通讯录和个性词库。"
-              data-en="Three slots show verbatim text, a single correction, and completion. A ~40k offline lexicon works with system, contact, and personal terms."
-            >三格候选显示原文、唯一纠错和补全。约 4 万词离线词表结合系统词库、通讯录和个性词库。</p>
+          <article>
+            <span class="gesture-number">02</span>
+            <span class="material-symbols-rounded" aria-hidden="true">auto_fix_high</span>
+            <h3 data-zh="理解并处理" data-en="Understand and process">理解并处理</h3>
+            <p data-zh="润色、问答或编辑上次输入。" data-en="Polish, answer, or edit the last input.">润色、问答或编辑上次输入。</p>
           </article>
-          <article class="feature-card cyan">
-            <span class="icon material-symbols-rounded" aria-hidden="true">touch_app</span>
-            <h3 data-zh="为真实触控优化" data-en="Built for real touch">为真实触控优化</h3>
-            <p
-              data-zh="邻键纠错、无缝热区、叠指连打、长按连删、双空格句号，以及按角色区分的触觉反馈。"
-              data-en="Proximity correction, gap-free hit regions, overlapping presses, hold-to-delete, double-space period, and role-based haptics."
-            >邻键纠错、无缝热区、叠指连打、长按连删、双空格句号，以及按角色区分的触觉反馈。</p>
-          </article>
-          <article class="feature-card">
-            <span class="icon material-symbols-rounded" aria-hidden="true">book_2</span>
-            <h3 data-zh="一份个性词库，多处生效" data-en="One personal dictionary, used everywhere">一份个性词库，多处生效</h3>
-            <p
-              data-zh="自定义词条参与中文候选、英文建议、语音偏置与润色保护。词库可选经你的私有 iCloud 同步，打字习惯仍留在设备。"
-              data-en="Your terms participate in Chinese candidates, English suggestions, speech biasing, and polish protection. The dictionary can sync through your private iCloud; typing habits stay local."
-            >自定义词条参与中文候选、英文建议、语音偏置与润色保护。词库可选经你的私有 iCloud 同步，打字习惯仍留在设备。</p>
+          <article>
+            <span class="gesture-number">03</span>
+            <span class="material-symbols-rounded" aria-hidden="true">text_fields</span>
+            <h3 data-zh="确认后插入" data-en="Preview, then insert">确认后插入</h3>
+            <p data-zh="只有光标和上下文匹配时才自动上屏。" data-en="Auto-insert only when cursor context still matches.">只有光标和上下文匹配时才自动上屏。</p>
           </article>
         </div>
       </div>
     </section>
 
-    <section class="section section-dark" id="skills">
+    <!-- Voice scenario -->
+    <section class="section scene-section">
+      <div class="section-inner scene-layout">
+        <div class="scene-copy">
+          <p class="eyebrow" data-zh="语音输入" data-en="Voice input">语音输入</p>
+          <h2 data-zh="开口即文字，不打断思路。" data-en="Speak naturally. Keep your train of thought.">开口即文字，不打断思路。</h2>
+          <p
+            data-zh="本地识别可以直接开始。热词、个人词典与上下文补偿，让名字、术语和常用表达更准确。"
+            data-en="Start immediately with local recognition. Hotwords, a personal dictionary, and context compensation improve names, terminology, and phrases you use often."
+          >本地识别可以直接开始。热词、个人词典与上下文补偿，让名字、术语和常用表达更准确。</p>
+          <ul class="quiet-list">
+            <li data-zh="默认使用 Apple 端侧语音识别" data-en="Apple on-device recognition by default">默认使用 Apple 端侧语音识别</li>
+            <li data-zh="云端识别和 AI 润色始终由你选择" data-en="Cloud recognition and AI polish are always your choice">云端识别和 AI 润色始终由你选择</li>
+            <li data-zh="可用语音重写上一次已验证输入" data-en="Rewrite the last verified insertion by voice">可用语音重写上一次已验证输入</li>
+          </ul>
+        </div>
+        <div class="voice-stage">
+          <div class="voice-meta">
+            <span data-zh="本地 · Apple 语音识别" data-en="Local · Apple Speech">本地 · Apple 语音识别</span>
+            <span class="live-indicator"><i></i><span data-zh="听写中" data-en="Listening">听写中</span></span>
+          </div>
+          <div class="transcript-card">
+            <span class="transcript-before" data-zh="今天下午把新版本上线计划" data-en="This afternoon, review the launch plan">今天下午把新版本上线计划</span>
+            <strong data-zh="和产品团队确认一下。" data-en="with the product team.">和产品团队确认一下。</strong>
+          </div>
+          <div class="waveform" aria-hidden="true">
+            <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+          </div>
+          <div class="voice-footer">
+            <span data-zh="已识别 18 个字" data-en="18 words recognized">已识别 18 个字</span>
+            <span data-zh="完成" data-en="Done">完成</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Chinese and English typing -->
+    <section class="section typing-section" id="typing">
       <div class="section-inner">
-        <div class="feature-stage">
-          <div class="clipboard-visual">
+        <div class="center-heading compact">
+          <p class="eyebrow" data-zh="中文与英文输入" data-en="Chinese and English typing">中文与英文输入</p>
+          <h2 data-zh="不想说时，也是一把完整键盘。" data-en="A complete keyboard when you would rather type.">不想说时，也是一把完整键盘。</h2>
+        </div>
+        <div class="typing-stories">
+          <article class="typing-story">
+            <div class="typing-visual chinese-visual">
+              <span class="typing-label" data-zh="全拼 / 双拼" data-en="Full / double pinyin">全拼 / 双拼</span>
+              <div class="composition-row"><strong>jintian</strong><span class="text-cursor" aria-hidden="true"></span></div>
+              <div class="candidate-row">
+                <span class="selected">今天</span><span>今天的</span><span>近天</span><span>金田</span>
+              </div>
+              <div class="mini-keyboard" aria-hidden="true">
+                <span>q</span><span>w</span><span>e</span><span>r</span><span>t</span><span>y</span><span>u</span><span>i</span><span>o</span><span>p</span>
+              </div>
+            </div>
+            <div class="story-copy">
+              <span class="story-index">01</span>
+              <h3 data-zh="中文输入，熟悉而完整。" data-en="Chinese typing that feels complete.">中文输入，熟悉而完整。</h3>
+              <p
+                data-zh="全拼、自然码、小鹤、微软与搜狗双拼；候选分页、数字选词、滑动选词与中英混输一并具备。"
+                data-en="Full pinyin plus Natural Code, Xiaohe, Microsoft, and Sogou double pinyin—with candidate paging, number selection, swiping, and mixed Chinese-English input."
+              >全拼、自然码、小鹤、微软与搜狗双拼；候选分页、数字选词、滑动选词与中英混输一并具备。</p>
+            </div>
+          </article>
+          <article class="typing-story reverse">
+            <div class="typing-visual english-visual">
+              <span class="typing-label">English</span>
+              <div class="suggestion-row"><span>Meet</span><span class="selected">Meeting</span><span>Meetings</span></div>
+              <div class="english-line">Let's schedule a meetign<span class="correction-mark"></span></div>
+              <div class="correction-chip"><span class="material-symbols-rounded">spellcheck</span><span>meeting</span></div>
+            </div>
+            <div class="story-copy">
+              <span class="story-index">02</span>
+              <h3 data-zh="英文输入，越用越顺手。" data-en="English typing that gets out of your way.">英文输入，越用越顺手。</h3>
+              <p
+                data-zh="前缀补全、自动纠错、下一词预测、候选撤销与句首大小写，让双语切换保持同样流畅。"
+                data-en="Prefix completion, autocorrect, next-word prediction, candidate undo, and sentence capitalization keep bilingual typing fluid."
+              >前缀补全、自动纠错、下一词预测、候选撤销与句首大小写，让双语切换保持同样流畅。</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <!-- Clipboard and skill scenarios -->
+    <section class="section skills-section" id="skills">
+      <div class="section-inner">
+        <div class="scene-layout skills-layout">
+          <div class="skills-stage">
             <div class="clipboard-source">
               <span class="material-symbols-rounded" aria-hidden="true">content_copy</span>
               <div>
                 <small data-zh="刚刚复制" data-en="Just copied">刚刚复制</small>
-                <p data-zh="明天下午三点和产品团队确认新版上线计划。" data-en="Confirm the launch plan with the product team tomorrow at 3 PM.">明天下午三点和产品团队确认新版上线计划。</p>
+                <p data-zh="明天下午三点和产品团队确认新版上线计划。" data-en="Confirm the launch plan with the product team tomorrow at 3 PM.">
+                  明天下午三点和产品团队确认新版上线计划。
+                </p>
               </div>
             </div>
-            <p class="visual-label" data-zh="下一步" data-en="Next actions">下一步</p>
-            <div class="skill-chip-grid">
-              <span class="skill-chip is-primary">
-                <span class="material-symbols-rounded" aria-hidden="true">reply</span>
-                <span data-zh="回复" data-en="Reply">回复</span>
-              </span>
-              <span class="skill-chip">
-                <span class="material-symbols-rounded" aria-hidden="true">summarize</span>
-                <span data-zh="总结" data-en="Summarize">总结</span>
-              </span>
-              <span class="skill-chip">
-                <span class="material-symbols-rounded" aria-hidden="true">translate</span>
-                <span data-zh="翻译" data-en="Translate">翻译</span>
-              </span>
-              <span class="skill-chip">
-                <span class="material-symbols-rounded" aria-hidden="true">task_alt</span>
-                <span data-zh="待办" data-en="Tasks">待办</span>
-              </span>
-              <span class="skill-chip">
-                <span class="material-symbols-rounded" aria-hidden="true">event</span>
-                <span data-zh="日程" data-en="Events">日程</span>
-              </span>
-              <span class="skill-chip">
-                <span class="material-symbols-rounded" aria-hidden="true">near_me</span>
-                <span data-zh="导航" data-en="Navigate">导航</span>
-              </span>
+            <span class="stage-arrow material-symbols-rounded" aria-hidden="true">south</span>
+            <div class="skill-actions">
+              <span class="primary"><span class="material-symbols-rounded">reply</span><span data-zh="回复" data-en="Reply">回复</span></span>
+              <span><span class="material-symbols-rounded">summarize</span><span data-zh="总结" data-en="Summarize">总结</span></span>
+              <span><span class="material-symbols-rounded">translate</span><span data-zh="翻译" data-en="Translate">翻译</span></span>
+              <span><span class="material-symbols-rounded">task_alt</span><span data-zh="待办" data-en="Tasks">待办</span></span>
+              <span><span class="material-symbols-rounded">event</span><span data-zh="日程" data-en="Events">日程</span></span>
+              <span><span class="material-symbols-rounded">near_me</span><span data-zh="导航" data-en="Navigate">导航</span></span>
             </div>
           </div>
-          <div class="feature-copy">
-            <p class="eyebrow" data-zh="AI Agent 与剪贴板" data-en="AI Agent and clipboard">AI Agent 与剪贴板</p>
-            <h3 data-zh="复制一段内容，下一步已经就位。" data-en="Copy something. Your next action is ready.">复制一段内容，下一步已经就位。</h3>
+          <div class="scene-copy">
+            <p class="eyebrow" data-zh="剪贴板与快捷技能" data-en="Clipboard and quick skills">剪贴板与快捷技能</p>
+          <h2 data-zh="复制之后，直接行动。" data-en="After copy comes action.">复制之后，直接行动。</h2>
             <p
-              data-zh="可选保存最近 15 条纯文本。复制后约 30 秒内，回复、总结与翻译会出现在键盘上；历史默认关闭，不会自行发送给 AI。"
-              data-en="Optionally keep the latest 15 plain-text copies. For about 30 seconds after copying, Reply, Summarize, and Translate appear on the keyboard. History is off by default and never sends itself to AI."
-            >可选保存最近 15 条纯文本。复制后约 30 秒内，回复、总结与翻译会出现在键盘上；历史默认关闭，不会自行发送给 AI。</p>
-            <ul class="feature-list">
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="待办、日程、备忘录与地图导航技能" data-en="Tasks, events, Notes, and map navigation skills">待办、日程、备忘录与地图导航技能</span>
-              </li>
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="自定义名称、图标、提示词与可选快捷指令" data-en="Custom names, icons, prompts, and optional Shortcuts">自定义名称、图标、提示词与可选快捷指令</span>
-              </li>
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="最多 8 个技能上键盘，长按拖动排序" data-en="Pin up to 8 skills and reorder by long press">最多 8 个技能上键盘，长按拖动排序</span>
-              </li>
-            </ul>
+              data-zh="从剪贴板历史继续工作，把已有文字变成回复、总结、翻译、待办、日程或导航。所有读取都由你主动开启。"
+              data-en="Continue from clipboard history and turn existing text into a reply, summary, translation, task, event, or navigation. Clipboard access remains opt-in."
+            >从剪贴板历史继续工作，把已有文字变成回复、总结、翻译、待办、日程或导航。所有读取都由你主动开启。</p>
+          </div>
+        </div>
+        <div class="styles-strip">
+          <div>
+            <p class="eyebrow" data-zh="个性化润色" data-en="Personalized polish">个性化润色</p>
+            <h3 data-zh="整理表达，但不要改掉你的语气。" data-en="Improve the writing without erasing your voice.">整理表达，但不要改掉你的语气。</h3>
+          </div>
+          <div class="style-options">
+            <span data-zh="轻度清理" data-en="Light cleanup">轻度清理</span>
+            <span class="selected" data-zh="清晰结构" data-en="Clear structure">清晰结构</span>
+            <span data-zh="正式表达" data-en="Formal">正式表达</span>
+            <span data-zh="日常聊天" data-en="Casual">日常聊天</span>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="section" id="personalize">
+    <!-- Privacy and service paths -->
+    <section class="section privacy-section" id="privacy">
       <div class="section-inner">
-        <div class="feature-stage">
-          <div class="feature-copy">
-            <p class="eyebrow" data-zh="润色、翻译与同步" data-en="Polish, translate, and sync">润色、翻译与同步</p>
-            <h3 data-zh="保留原意，换成你的表达方式。" data-en="Keep the meaning. Change the voice.">保留原意，换成你的表达方式。</h3>
-            <p
-              data-zh="从轻度清理、清晰结构、正式表达和日常聊天，到多种趣味风格；也可以创建自己的提示词风格。润色完成后可按全局目标语言继续翻译。"
-              data-en="Choose light cleanup, clear structure, formal, chat, or playful styles—or create your own prompt-based style. After polish, optionally translate to the global target language."
-            >从轻度清理、清晰结构、正式表达和日常聊天，到多种趣味风格；也可以创建自己的提示词风格。润色完成后可按全局目标语言继续翻译。</p>
-            <ul class="feature-list">
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="趣味风格支持轻度 / 重度两档与可选情绪 emoji" data-en="Playful styles offer Light / Heavy intensity and optional mood emoji">趣味风格支持轻度 / 重度两档与可选情绪 emoji</span>
-              </li>
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="设置、个性词库、风格、历史与统计可按类型选择 iCloud 同步" data-en="Optionally sync settings, dictionary, styles, history, and statistics through iCloud">设置、个性词库、风格、历史与统计可按类型选择 iCloud 同步</span>
-              </li>
-              <li>
-                <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-                <span data-zh="首页集中展示近 7 天统计、历史与个性词库" data-en="Home brings together seven-day stats, history, and the personal dictionary">首页集中展示近 7 天统计、历史与个性词库</span>
-              </li>
-            </ul>
-          </div>
-          <div class="styles-visual">
-            <div class="style-selector">
-              <span class="style-option" data-zh="轻度清理" data-en="Light cleanup">轻度清理</span>
-              <span class="style-option is-selected" data-zh="清晰结构" data-en="Clear structure">清晰结构</span>
-              <span class="style-option" data-zh="正式表达" data-en="Formal">正式表达</span>
-              <span class="style-option" data-zh="日常聊天" data-en="Casual chat">日常聊天</span>
-            </div>
-            <div class="style-preview">
-              <small data-zh="润色预览" data-en="Polish preview">润色预览</small>
-              <p
-                data-zh="先明确结论，再补充原因和下一步，让信息更容易理解。"
-                data-en="Lead with the conclusion, then add context and next steps."
-              >先明确结论，再补充原因和下一步，让信息更容易理解。</p>
-              <div class="preview-meta">
-                <span data-zh="保留原意" data-en="Meaning preserved">保留原意</span>
-                <span data-zh="结构更清晰" data-en="Clearer structure">结构更清晰</span>
-              </div>
-            </div>
+        <div class="center-heading inverse">
+          <p class="eyebrow" data-zh="隐私与选择" data-en="Privacy and choice">隐私与选择</p>
+          <h2 data-zh="输入路径，由你决定。" data-en="You choose how your input is processed.">输入路径，由你决定。</h2>
+          <p
+            data-zh="先使用本地能力。需要更强模型时，再选择自己的 API Key 或可选托管积分。路径透明，决定权始终在你。"
+            data-en="Start locally. When you need a stronger model, choose your own API key or optional managed credits. The path stays explicit, and the decision stays yours."
+          >先使用本地能力。需要更强模型时，再选择自己的 API Key 或可选托管积分。路径透明，决定权始终在你。</p>
+        </div>
+        <div class="service-paths">
+          <article>
+            <span class="path-number">01</span>
+            <span class="material-symbols-rounded" aria-hidden="true">memory</span>
+            <h3 data-zh="端侧优先" data-en="On-device first">端侧优先</h3>
+            <p data-zh="默认 Apple 本地识别；Mac Apple Silicon 还可使用 Qwen3 MLX。" data-en="Apple local recognition by default; Qwen3 MLX is also available on Apple Silicon Macs.">
+              默认 Apple 本地识别；Mac Apple Silicon 还可使用 Qwen3 MLX。
+            </p>
+            <span class="path-note" data-zh="无需账号 · 音频留在设备" data-en="No account · Audio stays on device">无需账号 · 音频留在设备</span>
+          </article>
+          <article>
+            <span class="path-number">02</span>
+            <span class="material-symbols-rounded" aria-hidden="true">key</span>
+            <h3 data-zh="自备 API Key" data-en="Bring your own key">自备 API Key</h3>
+            <p data-zh="连接你选择的语音或 AI 服务商。凭证保存在 Keychain。" data-en="Connect the speech or AI provider you choose. Credentials stay in Keychain.">
+              连接你选择的语音或 AI 服务商。凭证保存在 Keychain。
+            </p>
+            <span class="path-note" data-zh="无需 OSG 账号 · 服务商直接处理" data-en="No OSG account · Provider processes directly">无需 OSG 账号 · 服务商直接处理</span>
+          </article>
+          <article>
+            <span class="path-number">03</span>
+            <span class="material-symbols-rounded" aria-hidden="true">toll</span>
+            <h3 data-zh="托管积分" data-en="Managed credits">托管积分</h3>
+            <p data-zh="iOS / iPadOS 可选 Apple 登录与积分服务，无需自行管理 Key。" data-en="Optional Sign in with Apple and managed credits on iOS / iPadOS, with no key to manage.">
+              iOS / iPadOS 可选 Apple 登录与积分服务，无需自行管理 Key。
+            </p>
+            <span class="path-note" data-zh="明确同意后使用 · 可注销账号" data-en="Explicit opt-in · Account deletion available">明确同意后使用 · 可注销账号</span>
+          </article>
+        </div>
+        <div class="privacy-proof">
+          <div>
+            <span class="material-symbols-rounded" aria-hidden="true">shield_lock</span>
+            <h3 data-zh="普通击键不采集，剪贴板需主动开启。" data-en="No ordinary keystroke collection. Clipboard access is opt-in.">
+              普通击键不采集，剪贴板需主动开启。
+            </h3>
           </div>
+          <a class="inverse-link" href="privacy/">
+            <span data-zh="阅读完整隐私政策" data-en="Read the full privacy policy">阅读完整隐私政策</span>
+            <span class="material-symbols-rounded" aria-hidden="true">arrow_outward</span>
+          </a>
         </div>
       </div>
     </section>
 
-    <section class="section section-dark" id="engines">
+    <!-- Platform capabilities -->
+    <section class="section platforms-section" id="platforms">
       <div class="section-inner">
-        <div class="section-heading">
-          <p class="eyebrow" data-zh="选择权在你" data-en="Your service, your choice">选择权在你</p>
-          <h2 data-zh="本地、自己的 Key，或 OSG 积分。" data-en="Local, your own key, or OSG credits.">本地、自己的 Key，或 OSG 积分。</h2>
-          <p
-            data-zh="三条路径彼此独立。你可以只用本地听写，也可以直连自己选择的服务商；需要省去配置时，再选择可选的托管积分。"
-            data-en="The three paths remain independent. Stay local, connect directly to your provider, or choose optional managed credits when you want setup handled for you."
-          >三条路径彼此独立。你可以只用本地听写，也可以直连自己选择的服务商；需要省去配置时，再选择可选的托管积分。</p>
+        <div class="center-heading compact">
+          <p class="eyebrow" data-zh="跨平台" data-en="Across platforms">跨平台</p>
+          <h2 data-zh="在手机上输入，在 Mac 上继续。" data-en="Type on mobile. Keep going on Mac.">在手机上输入，在 Mac 上继续。</h2>
         </div>
-
-        <div class="path-grid">
-          <article class="path-card recommended">
-            <span class="path-index">01</span>
-            <h3 data-zh="设备端" data-en="On-device">设备端</h3>
-            <p data-zh="默认选择，适合日常听写。" data-en="The default for everyday dictation.">默认选择，适合日常听写。</p>
-            <ul>
-              <li data-zh="iOS 26 SpeechAnalyzer" data-en="iOS 26 SpeechAnalyzer">iOS 26 SpeechAnalyzer</li>
-              <li data-zh="音频不离开设备" data-en="Audio stays on-device">音频不离开设备</li>
-              <li data-zh="无需账号或 API Key" data-en="No account or API key">无需账号或 API Key</li>
-            </ul>
+        <div class="platform-stories">
+          <article>
+            <div class="platform-symbol ios-symbol" aria-hidden="true">
+              <span class="material-symbols-rounded">keyboard</span>
+            </div>
+            <div>
+              <span class="platform-label">iOS / iPadOS 26+</span>
+              <h3 data-zh="系统键盘里的完整输入工作区" data-en="A complete input workspace in the system keyboard">系统键盘里的完整输入工作区</h3>
+              <p data-zh="听写、AI 助手、中文与英文输入、剪贴板技能、个人词典和可选 iCloud 同步。" data-en="Dictation, AI assistant, Chinese and English typing, clipboard skills, personal dictionary, and optional iCloud sync.">
+                听写、AI 助手、中文与英文输入、剪贴板技能、个人词典和可选 iCloud 同步。
+              </p>
+            </div>
           </article>
-          <article class="path-card">
-            <span class="path-index">02</span>
-            <h3 data-zh="自备服务商" data-en="Bring your own provider">自备服务商</h3>
-            <p data-zh="控制模型、价格与数据去向。" data-en="Control the model, cost, and data route.">控制模型、价格与数据去向。</p>
-            <ul>
-              <li data-zh="多种云端 ASR 与 LLM" data-en="Multiple cloud ASR and LLM options">多种云端 ASR 与 LLM</li>
-              <li data-zh="请求直达所选服务商" data-en="Requests go directly to your provider">请求直达所选服务商</li>
-              <li data-zh="凭证保存在 Keychain" data-en="Credentials stay in Keychain">凭证保存在 Keychain</li>
-            </ul>
-          </article>
-          <article class="path-card">
-            <span class="path-index">03</span>
-            <h3 data-zh="OSG 托管积分" data-en="OSG managed credits">OSG 托管积分</h3>
-            <p data-zh="Apple 登录后可选，无需填写服务商凭证。" data-en="Optional after Sign in with Apple—no provider credentials to enter.">Apple 登录后可选，无需填写服务商凭证。</p>
-            <ul>
-              <li data-zh="托管云端语音与 AI" data-en="Managed cloud speech and AI">托管云端语音与 AI</li>
-              <li data-zh="首次启用前明确说明云端数据" data-en="Explicit cloud-data consent before first use">首次启用前明确说明云端数据</li>
-              <li data-zh="App Store 消耗型积分包" data-en="Consumable App Store credit packs">App Store 消耗型积分包</li>
-            </ul>
+          <article>
+            <div class="platform-symbol mac-symbol" aria-hidden="true">
+              <span class="option-key">⌥</span>
+            </div>
+            <div>
+              <span class="platform-label">macOS 15+</span>
+              <h3 data-zh="按住 Option，在任何位置开始听写" data-en="Hold Option to dictate anywhere">按住 Option，在任何位置开始听写</h3>
+              <p data-zh="全局热键、底部实时浮层、Apple Speech 回退，以及 Apple Silicon 上的 Qwen3 MLX 本地模型。" data-en="Global hotkey, live bottom overlay, Apple Speech fallback, and a local Qwen3 MLX model on Apple Silicon.">
+                全局热键、底部实时浮层、Apple Speech 回退，以及 Apple Silicon 上的 Qwen3 MLX 本地模型。
+              </p>
+            </div>
           </article>
         </div>
+        <p class="platform-footnote">
+          <span data-zh="公开 Mac DMG 仍为历史版 1.1；最新 Mac 2.0 能力可从源码构建。" data-en="The public Mac DMG remains historical version 1.1; build from source for the latest Mac 2.0 capabilities.">
+            公开 Mac DMG 仍为历史版 1.1；最新 Mac 2.0 能力可从源码构建。
+          </span>
+        </p>
       </div>
     </section>
 
-    <section class="section" id="account">
-      <div class="section-inner account-stage">
-        <div class="feature-copy">
-          <p class="eyebrow" data-zh="可选 OSG 账号 · iOS / iPadOS" data-en="Optional OSG account · iOS / iPadOS">可选 OSG 账号 · iOS / iPadOS</p>
-          <h3 data-zh="登录是选择，不是门槛。" data-en="Sign-in is an option, not a gate.">登录是选择，不是门槛。</h3>
-          <p
-            data-zh="本地听写和自备 API Key 始终可以独立使用。Apple 登录只用于托管积分、购买、邀请和资料管理；支持 App 内注销账号。"
-            data-en="Local dictation and your own API keys remain independent. Sign in with Apple is only for managed credits, purchases, referrals, and profile controls, with in-app account deletion."
-          >本地听写和自备 API Key 始终可以独立使用。Apple 登录只用于托管积分、购买、邀请和资料管理；支持 App 内注销账号。</p>
-          <ul class="feature-list">
-            <li>
-              <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-              <span data-zh="键盘扩展只获得短时、限权的服务凭证" data-en="The keyboard receives only short-lived, scope-limited grants">键盘扩展只获得短时、限权的服务凭证</span>
-            </li>
-            <li>
-              <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-              <span data-zh="积分余额和购买记录由账号服务核验" data-en="Balances and purchases are verified by the account service">积分余额和购买记录由账号服务核验</span>
-            </li>
-            <li>
-              <span class="material-symbols-rounded" aria-hidden="true">check_circle</span>
-              <span data-zh="打赏与积分包彼此独立，不用于解锁核心功能" data-en="Tips and credit packs are separate and do not unlock core features">打赏与积分包彼此独立，不用于解锁核心功能</span>
-            </li>
+    <!-- Getting started and stable capabilities -->
+    <section class="section start-section" id="start">
+      <div class="section-inner">
+        <div class="split-heading">
+          <div>
+            <p class="eyebrow" data-zh="开始使用" data-en="Get started">开始使用</p>
+            <h2 data-zh="两分钟，让声音进入键盘。" data-en="Put your voice in the keyboard in two minutes.">两分钟，让声音进入键盘。</h2>
+          </div>
+          <p data-zh="本地路径可以直接开始。只有在选择云端能力时，才需要进一步配置。" data-en="The local path works immediately. Additional setup is needed only when you choose cloud capabilities.">
+            本地路径可以直接开始。只有在选择云端能力时，才需要进一步配置。
+          </p>
+        </div>
+        <ol class="setup-steps">
+          <li>
+            <h3 data-zh="安装并授权" data-en="Install and authorize">安装并授权</h3>
+            <p data-zh="iOS 添加键盘并开启完全访问；Mac 授予麦克风与辅助功能权限。" data-en="Add the keyboard and enable Full Access on iOS; grant microphone and Accessibility permissions on Mac.">
+              iOS 添加键盘并开启完全访问；Mac 授予麦克风与辅助功能权限。
+            </p>
+          </li>
+          <li>
+            <h3 data-zh="选择服务路径" data-en="Choose a service path">选择服务路径</h3>
+            <p data-zh="直接使用本地识别，或按需添加自己的 Key、登录托管积分。" data-en="Use local recognition, add your own key, or sign in for managed credits as needed.">
+              直接使用本地识别，或按需添加自己的 Key、登录托管积分。
+            </p>
+          </li>
+          <li>
+            <h3 data-zh="开口或打字" data-en="Speak or type">开口或打字</h3>
+            <p data-zh="轻点听写、长按提问，或切换到中文 / English 键盘。" data-en="Tap to dictate, hold to ask, or switch to Chinese / English typing.">
+              轻点听写、长按提问，或切换到中文 / English 键盘。
+            </p>
+          </li>
+        </ol>
+
+        <div class="stable-strip">
+          <span data-zh="稳定性同样是功能" data-en="Reliability is a feature">稳定性同样是功能</span>
+          <ul>
+            <li data-zh="扩展冷启动保护" data-en="Extension cold-start protection">扩展冷启动保护</li>
+            <li data-zh="内存压力降级" data-en="Memory-pressure fallback">内存压力降级</li>
+            <li data-zh="上下文安全插入" data-en="Context-safe insertion">上下文安全插入</li>
+            <li data-zh="中断后恢复" data-en="Recovery after interruption">中断后恢复</li>
           </ul>
         </div>
-
-        <div class="account-phone" aria-label="Managed credits preview">
-          <div class="credit-screen">
-            <h3 data-zh="积分与邀请" data-en="Credits & referrals">积分与邀请</h3>
-            <p class="credit-label" data-zh="积分" data-en="Credits">积分</p>
-            <div class="balance-card">
-              <strong>1,000</strong>
-              <span data-zh="可用积分" data-en="available credits">可用积分</span>
-              <div class="balance-bar" aria-hidden="true"></div>
-            </div>
-            <p class="credit-label" data-zh="购买积分" data-en="Credit packs">购买积分</p>
-            <div class="credit-pack-list">
-              <div class="credit-pack">
-                <strong>500</strong>
-                <span class="buy-chip" data-zh="购买" data-en="Buy">购买</span>
-              </div>
-              <div class="credit-pack">
-                <strong>1,500</strong>
-                <span class="buy-chip" data-zh="购买" data-en="Buy">购买</span>
-              </div>
-              <div class="credit-pack">
-                <strong>3,000</strong>
-                <span class="buy-chip" data-zh="购买" data-en="Buy">购买</span>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </section>
 
-    <section class="section" id="privacy">
-      <div class="section-inner">
-        <div class="privacy-panel">
-          <div>
-            <div class="privacy-mark">
-              <span class="material-symbols-rounded" aria-hidden="true">shield_lock</span>
-            </div>
-            <h2 data-zh="先本地，再联网。" data-en="Local first. Cloud only by choice.">先本地，再联网。</h2>
-            <p
-              data-zh="普通击键不会上传。你只有在明确选择云端识别、润色、AI 或技能时，相关数据才会发送到所选路径。"
-              data-en="Ordinary keystrokes are never uploaded. Relevant data leaves the device only when you explicitly choose cloud recognition, polish, AI, or a skill."
-            >普通击键不会上传。你只有在明确选择云端识别、润色、AI 或技能时，相关数据才会发送到所选路径。</p>
-            <a class="text-link" href="privacy/">
-              <span data-zh="阅读完整隐私政策" data-en="Read the full privacy policy">阅读完整隐私政策</span>
-              <span class="material-symbols-rounded" aria-hidden="true">arrow_forward</span>
-            </a>
-          </div>
-          <div class="privacy-points">
-            <div class="privacy-point">
-              <strong data-zh="默认本地语音" data-en="Local speech by default">默认本地语音</strong>
-              <span data-zh="iOS 本地识别不上传原始录音。" data-en="Local iOS recognition does not upload raw audio.">iOS 本地识别不上传原始录音。</span>
-            </div>
-            <div class="privacy-point">
-              <strong data-zh="密钥进入 Keychain" data-en="Keys stay in Keychain">密钥进入 Keychain</strong>
-              <span data-zh="自备服务商凭证不写入 UserDefaults。" data-en="Your provider credentials are not stored in UserDefaults.">自备服务商凭证不写入 UserDefaults。</span>
-            </div>
-            <div class="privacy-point">
-              <strong data-zh="剪贴板默认关闭" data-en="Clipboard history is off">剪贴板默认关闭</strong>
-              <span data-zh="最多 15 条纯文本，仅保存在本机。" data-en="Up to 15 plain-text items, stored only on this device.">最多 15 条纯文本，仅保存在本机。</span>
-            </div>
-            <div class="privacy-point">
-              <strong data-zh="没有广告与追踪 SDK" data-en="No ads or tracking SDKs">没有广告与追踪 SDK</strong>
-              <span data-zh="不出售个人数据，不上传普通击键。" data-en="No sale of personal data and no ordinary keystroke uploads.">不出售个人数据，不上传普通击键。</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="section" id="platforms">
-      <div class="section-inner">
-        <div class="section-heading">
-          <p class="eyebrow" data-zh="跨 Apple 设备" data-en="Across Apple devices">跨 Apple 设备</p>
-          <h2 data-zh="手机上是键盘，Mac 上是全局听写。" data-en="A keyboard on mobile. Global dictation on Mac.">手机上是键盘，Mac 上是全局听写。</h2>
-        </div>
-
-        <div class="platform-grid">
-          <article class="platform-card">
-            <span class="platform-pill">
-              <span class="material-symbols-rounded" aria-hidden="true">phone_iphone</span>
-              iOS / iPadOS 26+
-            </span>
-            <h3 data-zh="真正的系统键盘" data-en="A real system keyboard">真正的系统键盘</h3>
-            <p
-              data-zh="在微信、备忘录、邮件、Notion、Cursor 等任意输入框使用。iPad 提供铺满宽度的工作区、地球键与编辑控制。"
-              data-en="Use it in Messages, Notes, Mail, Notion, Cursor, and any other text field. iPad adds a full-width workspace, globe key, and editing controls."
-            >在微信、备忘录、邮件、Notion、Cursor 等任意输入框使用。iPad 提供铺满宽度的工作区、地球键与编辑控制。</p>
-            <div class="platform-specs">
-              <span data-zh="语音助手" data-en="Voice assistant">语音助手</span>
-              <span data-zh="中文全拼 / 双拼" data-en="Full / double pinyin">中文全拼 / 双拼</span>
-              <span data-zh="英文纠错与补全" data-en="English correction and completion">英文纠错与补全</span>
-              <span data-zh="剪贴板与技能" data-en="Clipboard and skills">剪贴板与技能</span>
-            </div>
-          </article>
-          <article class="platform-card">
-            <span class="platform-pill">
-              <span class="material-symbols-rounded" aria-hidden="true">laptop_mac</span>
-              macOS 15+
-            </span>
-            <h3 data-zh="按住 Option，随处说话" data-en="Hold Option and speak anywhere">按住 Option，随处说话</h3>
-            <p
-              data-zh="菜单栏 App 以底部胶囊浮层反馈实时转写。Apple Silicon 可下载 Qwen3 MLX 本地模型；也支持 Apple Speech 回退与 AI 润色。"
-              data-en="The menu-bar app shows live transcription in a bottom pill. Apple Silicon Macs can download a local Qwen3 MLX model; Apple Speech fallback and optional AI polish are also available."
-            >菜单栏 App 以底部胶囊浮层反馈实时转写。Apple Silicon 可下载 Qwen3 MLX 本地模型；也支持 Apple Speech 回退与 AI 润色。</p>
-            <div class="platform-specs">
-              <span data-zh="Option 全局热键" data-en="Option global hotkey">Option 全局热键</span>
-              <span data-zh="Qwen3 MLX 本地识别" data-en="Local Qwen3 MLX">Qwen3 MLX 本地识别</span>
-              <span data-zh="实时听写浮层" data-en="Live dictation overlay">实时听写浮层</span>
-              <span data-zh="润色与翻译" data-en="Polish and translation">润色与翻译</span>
-            </div>
-          </article>
-        </div>
-      </div>
-    </section>
-
-    <!-- Competitor matrix -->
-    <section class="section section-dark" id="vs">
-      <div class="section-inner">
-        <div class="section-heading">
-          <p class="eyebrow" data-zh="为什么是 OSGKeyboard" data-en="Why OSGKeyboard">为什么是 OSGKeyboard</p>
-          <h2 data-zh="不靠价格表，靠长期不变的选择。" data-en="Built on choices that outlast a pricing table.">不靠价格表，靠长期不变的选择。</h2>
-          <p
-            data-zh="竞品价格随时会变。这里展示的是 OSGKeyboard 稳定提供的产品边界。"
-            data-en="Competitor pricing changes. These are the durable product choices OSGKeyboard provides."
-          >竞品价格随时会变。这里展示的是 OSGKeyboard 稳定提供的产品边界。</p>
-        </div>
-        <div class="compare-grid">
-          <div class="compare-cell">
-            <span class="material-symbols-rounded" aria-hidden="true">mic</span>
-            <strong data-zh="端侧听写" data-en="On-device dictation">端侧听写</strong>
-            <span data-zh="默认不上传录音" data-en="No audio upload by default">默认不上传录音</span>
-          </div>
-          <div class="compare-cell">
-            <span class="material-symbols-rounded" aria-hidden="true">keyboard</span>
-            <strong data-zh="移动端键盘" data-en="Mobile keyboard">移动端键盘</strong>
-            <span data-zh="语音与中英打字并存" data-en="Voice plus Chinese and English typing">语音与中英打字并存</span>
-          </div>
-          <div class="compare-cell">
-            <span class="material-symbols-rounded" aria-hidden="true">key</span>
-            <strong data-zh="BYOK" data-en="BYOK">BYOK</strong>
-            <span data-zh="服务商与凭证由你控制" data-en="You control provider and credentials">服务商与凭证由你控制</span>
-          </div>
-          <div class="compare-cell">
-            <span class="material-symbols-rounded" aria-hidden="true">toll</span>
-            <strong data-zh="可选积分" data-en="Optional credits">可选积分</strong>
-            <span data-zh="不想配置时也有托管路径" data-en="A managed path when you prefer setup handled">不想配置时也有托管路径</span>
-          </div>
-          <div class="compare-cell">
-            <span class="material-symbols-rounded" aria-hidden="true">devices</span>
-            <strong data-zh="iPhone 到 Mac" data-en="iPhone to Mac">iPhone 到 Mac</strong>
-            <span data-zh="移动键盘与桌面全局听写" data-en="Mobile keyboard and desktop dictation">移动键盘与桌面全局听写</span>
-          </div>
-          <div class="compare-cell">
-            <span class="material-symbols-rounded" aria-hidden="true">code</span>
-            <strong data-zh="源码可审计" data-en="Auditable source">源码可审计</strong>
-            <span data-zh="源码可见，但不是开源许可" data-en="Source available, not open source">源码可见，但不是开源许可</span>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Steps -->
-    <section class="section" id="start">
-      <div class="section-inner">
-        <div class="section-heading">
-          <p class="eyebrow" data-zh="三步开始" data-en="Three steps to start">三步开始</p>
-          <h2 data-zh="两分钟，把声音放进键盘。" data-en="Put your voice in the keyboard in two minutes.">两分钟，把声音放进键盘。</h2>
-        </div>
-        <div class="step-grid">
-          <article class="step">
-            <h3 data-zh="安装并授权" data-en="Install and authorize">安装并授权</h3>
-            <p
-              data-zh="iOS 添加 OSGKeyboard 并开启完全访问；Mac 授予麦克风与辅助功能权限。"
-              data-en="Add OSGKeyboard and enable Full Access on iOS; grant microphone and Accessibility permissions on Mac."
-            >iOS 添加 OSGKeyboard 并开启完全访问；Mac 授予麦克风与辅助功能权限。</p>
-          </article>
-          <article class="step">
-            <h3 data-zh="选择输入路径" data-en="Choose your path">选择输入路径</h3>
-            <p
-              data-zh="本地识别可直接使用。需要云端润色或 AI 时，可添加自己的 Key；iOS / iPadOS 还可以登录选择托管积分。"
-              data-en="Local recognition works immediately. Add your own key for cloud polish or AI; on iOS / iPadOS, you can also sign in and choose managed credits."
-            >本地识别可直接使用。需要云端润色或 AI 时，可添加自己的 Key；iOS / iPadOS 还可以登录选择托管积分。</p>
-          </article>
-          <article class="step">
-            <h3 data-zh="开口或打字" data-en="Speak or type">开口或打字</h3>
-            <p
-              data-zh="切到 OSGKeyboard 后轻点听写、长按问 AI，或进入中文 / English 键盘。Mac 上按住 Option。"
-              data-en="Switch to OSGKeyboard, tap to dictate, hold to ask AI, or enter Chinese / English typing. On Mac, hold Option."
-            >切到 OSGKeyboard 后轻点听写、长按问 AI，或进入中文 / English 键盘。Mac 上按住 Option。</p>
-          </article>
-        </div>
-      </div>
-    </section>
-
-    <!-- FAQ (SEO + AI quotable answers) -->
-    <section class="section" id="faq">
-      <div class="section-inner">
-        <div class="section-heading">
+    <!-- FAQ: quotable product and privacy boundaries -->
+    <section class="section faq-section" id="faq">
+      <div class="section-inner faq-layout">
+        <div>
           <p class="eyebrow" data-zh="常见问题" data-en="FAQ">常见问题</p>
-          <h2 data-zh="先把关键边界说清楚。" data-en="The important boundaries, clearly stated.">先把关键边界说清楚。</h2>
+          <h2 data-zh="把重要边界说清楚。" data-en="The important boundaries, clearly stated.">把重要边界说清楚。</h2>
         </div>
         <div class="faq-list">
           <details class="faq-item">
             <summary data-zh="必须注册 OSG 账号吗？" data-en="Do I need an OSG account?">必须注册 OSG 账号吗？</summary>
-            <p
-              data-zh="不需要。本地听写和你自行配置的服务商无需 OSG 账号。Apple 登录仅用于可选的托管积分、积分购买、邀请与资料管理。"
-              data-en="No. Local dictation and providers you configure yourself need no OSG account. Sign in with Apple is only for optional managed credits, credit purchases, referrals, and profile controls."
-            >不需要。本地听写和你自行配置的服务商无需 OSG 账号。Apple 登录仅用于可选的托管积分、积分购买、邀请与资料管理。</p>
+            <p data-zh="不需要。本地听写和自备服务商无需 OSG 账号。Apple 登录仅用于可选托管积分、购买、邀请与资料管理。" data-en="No. Local dictation and providers you configure yourself need no OSG account. Sign in with Apple is only for optional managed credits, purchases, referrals, and profile controls.">
+              不需要。本地听写和自备服务商无需 OSG 账号。Apple 登录仅用于可选托管积分、购买、邀请与资料管理。
+            </p>
           </details>
           <details class="faq-item">
             <summary data-zh="录音会上传吗？" data-en="Does my audio get uploaded?">录音会上传吗？</summary>
-            <p
-              data-zh="默认本地识别不会上传录音。只有你明确选择自备云端识别或托管积分云端识别时，音频才会发送到对应服务路径。"
-              data-en="Default local recognition does not upload audio. Audio leaves the device only when you explicitly select a user-configured cloud engine or managed-credit cloud recognition."
-            >默认本地识别不会上传录音。只有你明确选择自备云端识别或托管积分云端识别时，音频才会发送到对应服务路径。</p>
+            <p data-zh="默认本地识别不会上传录音。只有你明确选择自备云端识别或托管积分云端识别时，音频才会发送到对应服务路径。" data-en="Default local recognition does not upload audio. Audio leaves the device only when you explicitly select a user-configured cloud engine or managed-credit cloud recognition.">
+              默认本地识别不会上传录音。只有你明确选择自备云端识别或托管积分云端识别时，音频才会发送到对应服务路径。
+            </p>
           </details>
           <details class="faq-item">
             <summary data-zh="为什么键盘需要“完全访问”？" data-en="Why does the keyboard need Full Access?">为什么键盘需要“完全访问”？</summary>
-            <p
-              data-zh="完全访问让键盘扩展与主 App 通过 App Group 协作、读取共享 Keychain 中的用户凭证，并在你主动开启后访问剪贴板。它不代表我们会收集普通击键。"
-              data-en="Full Access lets the keyboard work with the host app through App Group, read user credentials from the shared Keychain, and access the clipboard only after you opt in. It does not mean ordinary keystrokes are collected."
-            >完全访问让键盘扩展与主 App 通过 App Group 协作、读取共享 Keychain 中的用户凭证，并在你主动开启后访问剪贴板。它不代表我们会收集普通击键。</p>
+            <p data-zh="完全访问让键盘扩展与主 App 通过 App Group 协作、读取共享 Keychain 中的用户凭证，并在你主动开启后访问剪贴板。它不代表我们会收集普通击键。" data-en="Full Access lets the keyboard work with the host app through App Group, read user credentials from the shared Keychain, and access the clipboard only after you opt in. It does not mean ordinary keystrokes are collected.">
+              完全访问让键盘扩展与主 App 通过 App Group 协作、读取共享 Keychain 中的用户凭证，并在你主动开启后访问剪贴板。它不代表我们会收集普通击键。
+            </p>
           </details>
           <details class="faq-item">
             <summary data-zh="OSGKeyboard 是开源软件吗？" data-en="Is OSGKeyboard open source?">OSGKeyboard 是开源软件吗？</summary>
-            <p
-              data-zh="不是。项目采用源码可见许可，允许个人学习与非商用本地使用；再分发、公开衍生版本和商业使用需要获得许可。"
-              data-en="No. It uses a source-available license for personal learning and non-commercial local use. Redistribution, public derivatives, and commercial use require permission."
-            >不是。项目采用源码可见许可，允许个人学习与非商用本地使用；再分发、公开衍生版本和商业使用需要获得许可。</p>
+            <p data-zh="不是。项目采用源码可见许可，允许个人学习与非商用本地使用；再分发、公开衍生版本和商业使用需要获得许可。" data-en="No. It uses a source-available license for personal learning and non-commercial local use. Redistribution, public derivatives, and commercial use require permission.">
+              不是。项目采用源码可见许可，允许个人学习与非商用本地使用；再分发、公开衍生版本和商业使用需要获得许可。
+            </p>
           </details>
           <details class="faq-item">
             <summary data-zh="Mac 下载为什么是 1.1？" data-en="Why is the Mac download version 1.1?">Mac 下载为什么是 1.1？</summary>
-            <p
-              data-zh="当前公开、已签名并公证的 DMG 是历史版 1.1。仓库中的 Mac target 随整体源码演进到 2.0；需要最新源码能力时可在 macOS 与 Xcode 26 中自行构建。"
-              data-en="The currently public, signed, and notarized DMG is historical version 1.1. The Mac target in source evolves with the 2.0 codebase; build it with macOS and Xcode 26 for the latest source capabilities."
-            >当前公开、已签名并公证的 DMG 是历史版 1.1。仓库中的 Mac target 随整体源码演进到 2.0；需要最新源码能力时可在 macOS 与 Xcode 26 中自行构建。</p>
+            <p data-zh="当前公开、已签名并公证的 DMG 是历史版 1.1。仓库中的 Mac target 随整体源码演进到 2.0；需要最新源码能力时可在 macOS 与 Xcode 26 中自行构建。" data-en="The currently public, signed, and notarized DMG is historical version 1.1. The Mac target in source evolves with the 2.0 codebase; build it with macOS and Xcode 26 for the latest source capabilities.">
+              当前公开、已签名并公证的 DMG 是历史版 1.1。仓库中的 Mac target 随整体源码演进到 2.0；需要最新源码能力时可在 macOS 与 Xcode 26 中自行构建。
+            </p>
           </details>
         </div>
       </div>
     </section>
 
     <!-- Download CTA -->
-    <section class="section" id="download">
+    <section class="section download-section" id="download">
       <div class="section-inner">
         <div class="download-panel">
-          <p class="eyebrow" data-zh="开口即文字" data-en="Speak it. It's typed.">开口即文字</p>
-          <h2 data-zh="让下一段文字，少一点摩擦。" data-en="Make your next sentence effortless.">让下一段文字，少一点摩擦。</h2>
-          <p
-            data-zh="先从免费、本地的核心能力开始。需要时，再选择自己的服务商或托管积分。"
-            data-en="Start with the free, local core. Add your own provider or managed credits only when you need them."
-          >先从免费、本地的核心能力开始。需要时，再选择自己的服务商或托管积分。</p>
+          <div>
+            <p class="eyebrow" data-zh="开口即文字" data-en="Speak it. It's typed.">开口即文字</p>
+            <h2 data-zh="下一段文字，从一句话开始。" data-en="Your next sentence starts with your voice.">下一段文字，从一句话开始。</h2>
+            <p data-zh="先从免费、本地的核心能力开始。需要时，再选择自己的服务商或托管积分。" data-en="Start with the free, local core. Add your own provider or managed credits only when you need them.">
+              先从免费、本地的核心能力开始。需要时，再选择自己的服务商或托管积分。
+            </p>
+          </div>
           <div class="download-actions">
             <a
               class="store-badge"
@@ -874,7 +653,7 @@
               >
             </a>
             <a
-              class="secondary-button"
+              class="outline-action"
               href="https://github.com/hkgood/OSGKeyboard#从源码构建"
               data-zh-href="https://github.com/hkgood/OSGKeyboard#从源码构建"
               data-en-href="https://github.com/hkgood/OSGKeyboard/blob/main/README.en.md#build-from-source"
@@ -902,8 +681,6 @@
     </div>
   </footer>
 
-  <script src="assets/js/three.min.js"></script>
-  <script src="assets/js/beams-hero.js"></script>
   <script src="assets/site.js"></script>
 </body>
 </html>