diff --git a/docs/assets/og-card.png b/docs/assets/og-card.png
new file mode 100644
index 0000000..88cf7ed
Binary files /dev/null and b/docs/assets/og-card.png differ
diff --git a/docs/assets/site.css b/docs/assets/site.css
index 7c18ee5..6d62f92 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -1,8 +1,12 @@
 /*!
- * OSGKeyboard 主页设计系统（2026-09 重设计）
+ * OSGKeyboard 主页设计系统（2026-10 动效版）
  * 方向：Apple 式产品页 —— 深色产品舞台 + 实机画面优先 + 滚动叙事。
+ * 动效母题：「声音变成文字」—— 声波、涟漪、逐字浮现、流式转写。
  * 主题跟随系统（site.js 可手动覆盖）；Hero / 隐私 / 下载区块在两种
  * 主题下都使用固定的深色「舞台」调色板，与新应用图标同一语言。
+ *
+ * 渐进增强约定：所有「先隐藏、再显现」的初始态都挂在 html.js 之下；
+ * 无 JavaScript 或开启「减弱动态效果」时，页面以完整静态形态呈现。
  */
 
 /* --------------------------------------------------------------------------
@@ -36,6 +40,30 @@
   --radius-md: 14px;
   --shadow-card: 0 28px 56px -28px rgba(16, 20, 24, 0.25);
   --shadow-media: 0 32px 64px -32px rgba(16, 20, 24, 0.35);
+
+  /* 动效令牌：统一的缓动曲线与时长，所有组件只引用这里 */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  /* 物理弹簧（linear() 采样），用于需要「落定感」的元素：气泡、芯片、胶囊 */
+  --ease-spring: linear(
+    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
+    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
+    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
+    0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
+  );
+  --dur-fast: 0.22s;
+  --dur-base: 0.5s;
+  --dur-slow: 0.95s;
+
+  /* 嵌入式手机演示的配色（随主题切换） */
+  --ph-bg: #ffffff;
+  --ph-ink: #0f1214;
+  --ph-muted: #8a939c;
+  --ph-line: rgba(15, 18, 20, 0.1);
+  --ph-in: #e9ecef;
+  --ph-out: #2c8a52;
+  --ph-kb: #d9dde3;
+  --ph-key: #ffffff;
 }
 
 html[data-theme="dark"] {
@@ -53,6 +81,15 @@ html[data-theme="dark"] {
   --accent-soft: rgba(104, 191, 141, 0.14);
   --shadow-card: 0 28px 56px -28px rgba(0, 0, 0, 0.6);
   --shadow-media: 0 32px 64px -32px rgba(0, 0, 0, 0.65);
+
+  --ph-bg: #0b0c0e;
+  --ph-ink: #f2f4f5;
+  --ph-muted: #7c858d;
+  --ph-line: rgba(255, 255, 255, 0.1);
+  --ph-in: #23262b;
+  --ph-out: #2f9a5b;
+  --ph-kb: #1a1d21;
+  --ph-key: #34383e;
 }
 
 /* --------------------------------------------------------------------------
@@ -70,7 +107,9 @@ html {
 
 body {
   margin: 0;
+  /* clip 不会生成滚动容器，滚动叙事的 position: sticky 才能正常工作 */
   overflow-x: hidden;
+  overflow-x: clip;
   background: var(--canvas);
   color: var(--ink);
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
@@ -154,6 +193,19 @@ html[data-lang="zh"] h3 {
   transform: translateY(0);
 }
 
+/* 仅供读屏：逐字拆分的标题由它提供完整句子 */
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
 /* 内联 SVG 图标库容器：不可见但可被 <use> 引用 */
 .svg-defs {
   position: absolute;
@@ -175,6 +227,21 @@ html[data-lang="zh"] h3 {
   vertical-align: -0.28em;
 }
 
+/* 页面滚动进度条：由 site.js 直接写 transform，避免每帧触发全局样式重算 */
+.scroll-progress {
+  position: fixed;
+  z-index: 60;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--stage-accent), #b5ecc9 60%, var(--stage-accent));
+  box-shadow: 0 0 12px rgba(111, 196, 145, 0.6);
+  pointer-events: none;
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+}
+
 /* --------------------------------------------------------------------------
  * 3. 导航
  * -------------------------------------------------------------------------- */
@@ -221,23 +288,52 @@ html[data-lang="zh"] h3 {
   width: 30px;
   height: 30px;
   border-radius: 8px;
+  transition: transform var(--dur-base) var(--ease-spring);
+}
+
+.brand:hover img {
+  transform: rotate(-8deg) scale(1.06);
 }
 
 .nav-links {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
 .nav-links a {
+  position: relative;
+  z-index: 1;
   padding: 8px 14px;
   border-radius: 999px;
   font-size: 0.92rem;
   opacity: 0.72;
-  transition: opacity 0.2s ease, background 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
-.nav-links a:hover {
+.nav-links a:hover,
+.nav-links a.is-active {
+  opacity: 1;
+}
+
+/* 导航滑块：位置与宽度由 site.js 写入，弹簧曲线让它「跟手」 */
+.nav-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: var(--iw, 0px);
+  height: 34px;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 11%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(var(--ix, 0px), -50%, 0);
+  transition: transform 0.55s var(--ease-spring), width 0.55s var(--ease-spring),
+    opacity 0.3s ease;
+}
+
+.nav-links.has-indicator .nav-indicator {
   opacity: 1;
 }
 
@@ -260,7 +356,7 @@ html[data-lang="zh"] h3 {
   background: transparent;
   cursor: pointer;
   opacity: 0.78;
-  transition: opacity 0.2s ease, background 0.2s ease;
+  transition: opacity 0.2s ease, background 0.2s ease, transform 0.4s var(--ease-spring);
 }
 
 .language-button {
@@ -271,12 +367,23 @@ html[data-lang="zh"] h3 {
 
 .icon-button:hover,
 .language-button:hover {
+  background: color-mix(in srgb, currentColor 9%, transparent);
   opacity: 1;
 }
 
+.icon-button:active,
+.language-button:active {
+  transform: scale(0.9);
+}
+
 .icon-button .i {
   width: 19px;
   height: 19px;
+  transition: transform 0.6s var(--ease-spring);
+}
+
+#themeToggle:hover .i {
+  transform: rotate(-24deg);
 }
 
 .mobile-menu-button {
@@ -296,8 +403,9 @@ html[data-lang="zh"] h3 {
   min-height: 100svh;
   flex-direction: column;
   align-items: center;
-  padding: 148px 0 0;
+  padding: 136px 0 0;
   overflow: hidden;
+  isolation: isolate;
   background:
     radial-gradient(120% 90% at 50% 110%, rgba(111, 196, 145, 0.14), transparent 55%),
     linear-gradient(180deg, var(--stage-1) 0%, var(--stage-2) 52%, var(--stage-3) 100%);
@@ -305,28 +413,125 @@ html[data-lang="zh"] h3 {
   text-align: center;
 }
 
-.hero-glow {
+/* 背景层：极光 + 声波涟漪 + 点阵 + 指针光斑 */
+.hero-backdrop {
   position: absolute;
-  top: -320px;
-  left: 50%;
-  width: 900px;
-  height: 640px;
-  border-radius: 50%;
-  background: radial-gradient(closest-side, rgba(111, 196, 145, 0.16), transparent 70%);
+  z-index: -1;
+  inset: 0;
+  overflow: hidden;
   pointer-events: none;
-  transform: translateX(-50%);
 }
 
+.aurora {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  mix-blend-mode: screen;
+  opacity: 0.6;
+  will-change: transform;
+}
+
+.aurora-a {
+  top: -220px;
+  left: calc(50% - 640px);
+  width: 640px;
+  height: 640px;
+  background: radial-gradient(circle, rgba(111, 196, 145, 0.5), transparent 66%);
+  animation: aurora-a 24s ease-in-out infinite alternate;
+}
+
+.aurora-b {
+  top: 40px;
+  right: calc(50% - 660px);
+  width: 560px;
+  height: 560px;
+  background: radial-gradient(circle, rgba(70, 150, 190, 0.42), transparent 66%);
+  animation: aurora-b 28s ease-in-out infinite alternate;
+}
+
+.aurora-c {
+  bottom: -220px;
+  left: 50%;
+  width: 900px;
+  height: 460px;
+  margin-left: -450px;
+  background: radial-gradient(closest-side, rgba(111, 196, 145, 0.32), transparent);
+  animation: aurora-c 19s ease-in-out infinite alternate;
+}
+
+@keyframes aurora-a {
+  0% { transform: translate3d(0, 0, 0) scale(1); }
+  50% { transform: translate3d(140px, 80px, 0) scale(1.18); }
+  100% { transform: translate3d(60px, 160px, 0) scale(0.94); }
+}
+
+@keyframes aurora-b {
+  0% { transform: translate3d(0, 0, 0) scale(1.05); }
+  50% { transform: translate3d(-120px, 60px, 0) scale(0.9); }
+  100% { transform: translate3d(-40px, -60px, 0) scale(1.15); }
+}
+
+@keyframes aurora-c {
+  0% { transform: translate3d(-80px, 0, 0) scale(1); }
+  100% { transform: translate3d(80px, -40px, 0) scale(1.12); }
+}
+
+/* 声波涟漪：三圈错相扩散，像一次持续的「开口」 */
+.hero-rings i {
+  position: absolute;
+  top: 36%;
+  left: 50%;
+  width: 560px;
+  height: 560px;
+  margin: -280px 0 0 -280px;
+  border: 1px solid rgba(111, 196, 145, 0.28);
+  border-radius: 50%;
+  opacity: 0;
+  animation: ring-pulse 7.5s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
+}
+
+.hero-rings i:nth-child(2) { animation-delay: 2.5s; }
+.hero-rings i:nth-child(3) { animation-delay: 5s; }
+
+@keyframes ring-pulse {
+  0% { opacity: 0; transform: scale(0.3); }
+  14% { opacity: 0.9; }
+  100% { opacity: 0; transform: scale(2); }
+}
+
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
+  background-size: 28px 28px;
+  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 28%, #000 25%, transparent 75%);
+  mask-image: radial-gradient(ellipse 70% 55% at 50% 28%, #000 25%, transparent 75%);
+}
+
+/* 指针光斑：--hx / --hy 由 site.js 以插值方式写入，移动有「拖尾」 */
+.hero-spot {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    560px circle at var(--hx, 50%) var(--hy, 30%),
+    rgba(111, 196, 145, 0.13),
+    transparent 62%
+  );
+}
+
+/* 文字层随滚动轻微上移淡出（--hp 为 Hero 滚动进度 0 → 1） */
 .hero-inner {
   position: relative;
   width: var(--content);
+  opacity: calc(1 - var(--hp, 0) * 1.15);
+  transform: translate3d(0, calc(var(--hp, 0) * -70px), 0);
 }
 
 .launch-pill {
   display: inline-flex;
   align-items: center;
   gap: 9px;
-  margin-bottom: 28px;
+  margin-bottom: 26px;
   padding: 8px 16px;
   border: 1px solid var(--stage-line);
   border-radius: 999px;
@@ -340,6 +545,7 @@ html[data-lang="zh"] h3 {
 }
 
 .launch-dot {
+  position: relative;
   width: 7px;
   height: 7px;
   border-radius: 50%;
@@ -347,29 +553,73 @@ html[data-lang="zh"] h3 {
   box-shadow: 0 0 12px rgba(111, 196, 145, 0.9);
 }
 
-.hero h1 {
-  margin-bottom: 22px;
-  font-size: clamp(2.7rem, 6.2vw, 4.5rem);
-  font-weight: 700;
-  letter-spacing: -0.032em;
-  line-height: 1.06;
+.launch-dot::after {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--stage-accent);
+  content: "";
+  animation: ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 
-.hero h1 span {
+@keyframes ping {
+  0% { opacity: 0.8; transform: scale(1); }
+  80%, 100% { opacity: 0; transform: scale(3); }
+}
+
+/* H1 承载品类关键词；视觉上是一行流光小标，主口号在其下方 */
+.hero-kicker {
+  margin: 0 auto 18px;
+  background: linear-gradient(
+    100deg,
+    var(--stage-accent) 0%,
+    var(--stage-accent) 38%,
+    #e2f7ea 50%,
+    var(--stage-accent) 62%,
+    var(--stage-accent) 100%
+  );
+  background-size: 250% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-size: clamp(0.92rem, 1.4vw, 1.06rem);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.5;
+  animation: shimmer 6.5s linear infinite;
+}
+
+@keyframes shimmer {
+  from { background-position: 125% 0; }
+  to { background-position: -125% 0; }
+}
+
+.hero-slogan {
+  margin: 0 0 24px;
+}
+
+.slogan-main {
   display: block;
+  font-size: clamp(3rem, 7.6vw, 5.7rem);
+  font-weight: 700;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
+  text-shadow: 0 0 60px rgba(111, 196, 145, 0.18);
 }
 
-.hero-muted {
-  margin-top: 10px;
+.slogan-sub {
+  display: block;
+  margin-top: 14px;
   color: var(--stage-ink-2);
   font-size: clamp(1.35rem, 2.8vw, 2.1rem);
   font-weight: 600;
   letter-spacing: -0.02em;
+  line-height: 1.25;
 }
 
 .hero-copy {
-  max-width: 620px;
-  margin: 0 auto 36px;
+  max-width: 640px;
+  margin: 0 auto 34px;
   color: var(--stage-ink-2);
   font-size: 1.08rem;
   line-height: 1.7;
@@ -381,16 +631,17 @@ html[data-lang="zh"] h3 {
   justify-content: center;
   flex-wrap: wrap;
   gap: 18px;
-  margin-bottom: 30px;
+  margin-bottom: 28px;
 }
 
 .store-badge {
   display: inline-flex;
-  transition: transform 0.25s ease;
+  border-radius: 12px;
+  transition: transform 0.5s var(--ease-spring), filter 0.3s ease;
 }
 
 .store-badge:hover {
-  transform: translateY(-2px);
+  filter: drop-shadow(0 10px 24px rgba(111, 196, 145, 0.25));
 }
 
 .store-badge img {
@@ -409,17 +660,22 @@ html[data-lang="zh"] h3 {
   color: var(--stage-ink);
   font-size: 0.95rem;
   font-weight: 600;
-  transition: background 0.25s ease, transform 0.25s ease;
+  transition: background 0.25s ease, border-color 0.25s ease, transform 0.5s var(--ease-spring);
 }
 
 .ghost-action:hover {
-  background: rgba(255, 255, 255, 0.12);
-  transform: translateY(-2px);
+  border-color: rgba(111, 196, 145, 0.45);
+  background: rgba(111, 196, 145, 0.12);
 }
 
 .ghost-action .i {
   width: 17px;
   height: 17px;
+  transition: transform 0.5s var(--ease-spring);
+}
+
+.ghost-action:hover .i {
+  transform: translate(3px, -3px) rotate(-8deg);
 }
 
 .text-action {
@@ -429,11 +685,12 @@ html[data-lang="zh"] h3 {
   text-decoration: underline;
   text-decoration-color: var(--stage-line);
   text-underline-offset: 5px;
-  transition: color 0.2s ease;
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
 }
 
 .text-action:hover {
   color: var(--stage-ink);
+  text-decoration-color: var(--stage-accent);
 }
 
 .hero-trust {
@@ -442,7 +699,7 @@ html[data-lang="zh"] h3 {
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px 28px;
-  margin: 0 0 52px;
+  margin: 0 0 44px;
   padding: 0;
   color: var(--stage-ink-2);
   font-size: 0.86rem;
@@ -461,10 +718,18 @@ html[data-lang="zh"] h3 {
   color: var(--stage-accent);
 }
 
-.hero-devices {
+/* 主视觉舞台：透视容器，内部设备图随滚动从后仰 14° 立到正视 */
+.hero-stage {
   position: relative;
   width: min(1060px, 94vw);
   margin: auto 0 0;
+  perspective: 1600px;
+}
+
+.hero-devices {
+  transform: rotateX(calc((1 - var(--hp, 0)) * 14deg)) scale(calc(0.92 + var(--hp, 0) * 0.08));
+  transform-origin: 50% 100%;
+  will-change: transform;
 }
 
 .hero-devices img {
@@ -473,8 +738,295 @@ html[data-lang="zh"] h3 {
   filter: drop-shadow(0 48px 80px rgba(0, 0, 0, 0.5));
 }
 
+/* 语音胶囊：毛玻璃深色药丸，悬浮在 Mac 屏幕下沿 */
+.voice-capsule {
+  position: absolute;
+  z-index: 2;
+  bottom: 22%;
+  left: 50%;
+  display: flex;
+  max-width: 92%;
+  align-items: center;
+  gap: 14px;
+  padding: 9px 22px 9px 9px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  background: rgba(14, 16, 19, 0.74);
+  -webkit-backdrop-filter: blur(18px) saturate(1.6);
+  backdrop-filter: blur(18px) saturate(1.6);
+  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  color: var(--stage-ink);
+  translate: -50% 0;
+}
+
+.capsule-orb {
+  position: relative;
+  display: grid;
+  width: 42px;
+  height: 42px;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #a8e6c1, var(--stage-accent) 55%, #3c9c63);
+  color: #0c0e12;
+}
+
+.capsule-orb .i {
+  width: 19px;
+  height: 19px;
+  stroke-width: 2;
+}
+
+/* 录音态：橙绿色涟漪从按钮向外扩散 */
+.capsule-orb::before,
+.capsule-orb::after {
+  position: absolute;
+  inset: 0;
+  border: 1.5px solid var(--stage-accent);
+  border-radius: 50%;
+  content: "";
+  opacity: 0;
+}
+
+.voice-capsule.is-listening .capsule-orb::before,
+.voice-capsule.is-listening .capsule-orb::after {
+  animation: orb-ripple 1.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
+}
+
+.voice-capsule.is-listening .capsule-orb::after {
+  animation-delay: 0.9s;
+}
+
+@keyframes orb-ripple {
+  0% { opacity: 0.9; transform: scale(1); }
+  100% { opacity: 0; transform: scale(1.9); }
+}
+
+/* 声波条：site.js 每帧写 scaleY，只动 transform，不触发布局 */
+.capsule-wave,
+.kb-wave {
+  display: flex;
+  align-items: center;
+}
+
+.capsule-wave {
+  height: 28px;
+  gap: 3px;
+}
+
+.capsule-wave i {
+  width: 3px;
+  height: 100%;
+  border-radius: 3px;
+  background: linear-gradient(180deg, #c9f3da, var(--stage-accent));
+  transform: scaleY(0.14);
+}
+
+.capsule-body {
+  display: flex;
+  min-width: min(400px, 52vw);
+  align-items: center;
+  gap: 10px;
+  font-size: 0.98rem;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.capsule-tag {
+  flex: none;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: rgba(111, 196, 145, 0.16);
+  color: var(--stage-accent);
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  transition: background 0.3s ease, color 0.3s ease;
+}
+
+.capsule-tag.is-agent {
+  background: var(--stage-accent);
+  color: #0c0e12;
+}
+
+.capsule-line {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+}
+
+.caret {
+  display: inline-block;
+  width: 2px;
+  height: 1.1em;
+  flex: none;
+  margin-left: 1px;
+  border-radius: 1px;
+  background: var(--stage-accent);
+  vertical-align: -0.18em;
+  animation: caret-blink 1.05s steps(1) infinite;
+}
+
+@keyframes caret-blink {
+  50% { opacity: 0; }
+}
+
+.scroll-cue {
+  position: absolute;
+  z-index: 3;
+  right: 32px;
+  bottom: 30px;
+  display: grid;
+  width: 24px;
+  height: 38px;
+  justify-items: center;
+  padding-top: 7px;
+  border: 1.5px solid rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+  opacity: calc(1 - var(--hp, 0) * 4);
+}
+
+.scroll-cue span {
+  width: 3px;
+  height: 8px;
+  border-radius: 3px;
+  background: var(--stage-ink);
+  animation: cue 2s var(--ease-in-out) infinite;
+}
+
+@keyframes cue {
+  0% { opacity: 0; transform: translateY(-3px); }
+  30% { opacity: 1; }
+  100% { opacity: 0; transform: translateY(12px); }
+}
+
+/* 首屏进场：Hero 元素按 --d 错峰「浮现 + 去模糊」 */
+html.js .hero-in {
+  animation: rise-in 1.1s var(--ease-out) var(--d, 0s) both;
+}
+
+@keyframes rise-in {
+  from { opacity: 0; filter: blur(8px); translate: 0 26px; }
+  to { opacity: 1; filter: none; translate: 0 0; }
+}
+
+html.js .voice-capsule {
+  animation: capsule-in 1.1s var(--ease-spring) 1.6s both;
+}
+
+@keyframes capsule-in {
+  from { opacity: 0; transform: translateY(24px) scale(0.86); }
+  to { opacity: 1; transform: none; }
+}
+
 /* --------------------------------------------------------------------------
- * 5. 通用区块节奏
+ * 5. 逐字动效（data-split）
+ * site.js 把文字拆成 .w（词，防止英文断词）与 .ch（字符），
+ * 每个字符带 --ci 序号，延迟 = 基础延迟 + 序号 × 步长。
+ * -------------------------------------------------------------------------- */
+[data-split] .w {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+[data-split] .ch {
+  display: inline-block;
+}
+
+/* 拆分完成前先隐藏，避免「整句出现 → 被拆开重播」的闪烁 */
+html.js [data-split]:not(.is-split) {
+  opacity: 0;
+}
+
+/* Hero 口号：页面加载即播放 */
+html.js .hero-slogan .ch {
+  animation: char-in 1s var(--ease-out) both;
+  animation-delay: calc(var(--base, 0.2s) + var(--ci) * var(--step, 45ms));
+}
+
+.slogan-main { --base: 0.22s; --step: 52ms; }
+.slogan-sub { --base: 0.52s; --step: 24ms; }
+
+@keyframes char-in {
+  from { opacity: 0; filter: blur(10px); transform: translateY(0.55em) rotate(3deg); }
+  to { opacity: 1; filter: none; transform: none; }
+}
+
+/* 区块标题：所在 .reveal 进入视口时播放 */
+html.js .reveal [data-split] .ch {
+  opacity: 0;
+  filter: blur(8px);
+  transform: translateY(0.5em);
+  transition: opacity 0.7s ease-out, filter 0.7s ease-out, transform 0.95s var(--ease-out);
+  transition-delay: calc(var(--d, 0s) + 0.08s + var(--ci) * 24ms);
+}
+
+html.js .reveal.is-visible [data-split] .ch {
+  opacity: 1;
+  filter: blur(0);
+  transform: none;
+}
+
+/* --------------------------------------------------------------------------
+ * 6. 能力跑马灯
+ * -------------------------------------------------------------------------- */
+.marquee {
+  overflow: hidden;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--line);
+  background: var(--canvas);
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
+}
+
+.marquee-track {
+  display: flex;
+  width: max-content;
+  animation: marquee 52s linear infinite;
+}
+
+.marquee:hover .marquee-track {
+  animation-play-state: paused;
+}
+
+.marquee ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.marquee li {
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  padding-right: 30px;
+  color: var(--ink-3);
+  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+
+.marquee li:nth-child(-n + 3) {
+  color: var(--ink);
+}
+
+.marquee li::after {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  content: "";
+  opacity: 0.55;
+}
+
+@keyframes marquee {
+  to { transform: translateX(-50%); }
+}
+
+/* --------------------------------------------------------------------------
+ * 7. 通用区块节奏
  * -------------------------------------------------------------------------- */
 .section {
   padding: clamp(88px, 11vw, 136px) 0;
@@ -512,12 +1064,12 @@ h3 {
 }
 
 .center-heading {
-  max-width: 680px;
+  max-width: 700px;
   margin: 0 auto clamp(48px, 6vw, 72px);
   text-align: center;
 }
 
-.center-heading p {
+.center-heading p:not(.eyebrow) {
   color: var(--ink-2);
   font-size: 1.05rem;
 }
@@ -538,7 +1090,7 @@ h3 {
   order: 1;
 }
 
-.feature-copy > p {
+.feature-copy > p:not(.eyebrow) {
   color: var(--ink-2);
   font-size: 1.05rem;
 }
@@ -567,7 +1119,7 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 6. 四种输入方式速览
+ * 8. 四种输入方式速览
  * -------------------------------------------------------------------------- */
 .ways-section {
   padding: clamp(64px, 8vw, 96px) 0;
@@ -585,22 +1137,75 @@ h3 {
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   background: var(--surface);
-  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  transition: transform 0.5s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
 }
 
 .way-card:hover {
   border-color: var(--line-strong);
   box-shadow: var(--shadow-card);
-  transform: translateY(-4px);
 }
 
-.way-card .i {
-  width: 24px;
-  height: 24px;
-  margin-bottom: 16px;
+.way-icon {
+  position: relative;
+  display: inline-grid;
+  width: 46px;
+  height: 46px;
+  margin-bottom: 18px;
+  place-items: center;
+  border-radius: 14px;
+  background: var(--accent-soft);
   color: var(--accent);
 }
 
+.way-icon .i {
+  width: 23px;
+  height: 23px;
+}
+
+/* 图标微动效：每张卡片一个与功能对应的小动作 */
+.way-icon-mic::after {
+  position: absolute;
+  inset: 0;
+  border: 1.5px solid var(--accent);
+  border-radius: inherit;
+  content: "";
+  opacity: 0;
+}
+
+.way-card:hover .way-icon-mic::after {
+  animation: orb-ripple 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
+}
+
+.way-card:hover .way-icon-sparkle .i {
+  animation: twinkle 0.9s var(--ease-spring);
+}
+
+.way-card:hover .way-icon-bubble .i {
+  animation: bob 0.9s var(--ease-spring);
+}
+
+.way-card:hover .way-icon-paste .i {
+  animation: drop 0.9s var(--ease-spring);
+}
+
+@keyframes twinkle {
+  0% { transform: scale(1) rotate(0); }
+  40% { transform: scale(0.7) rotate(-40deg); }
+  100% { transform: scale(1) rotate(0); }
+}
+
+@keyframes bob {
+  0% { transform: translateY(0); }
+  35% { transform: translateY(-5px) rotate(-6deg); }
+  100% { transform: translateY(0); }
+}
+
+@keyframes drop {
+  0% { transform: translateY(0); }
+  35% { transform: translateY(4px) scale(0.92); }
+  100% { transform: translateY(0); }
+}
+
 .way-card h3 {
   margin-bottom: 6px;
 }
@@ -613,7 +1218,774 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 7. 功能区块细节
+ * 9. 滚动叙事（三幕剧）
+ * 状态类 s1…s8 由 site.js 依滚动进度累加到 .story 上；
+ * 只有 .story.is-live（脚本已接管）时才进入「未发生 → 隐藏」的初始态，
+ * 无 JavaScript 时手机直接展示最终画面。
+ * -------------------------------------------------------------------------- */
+.story-section {
+  padding-bottom: 0;
+}
+
+.story-section .center-heading {
+  margin-bottom: 0;
+}
+
+.story {
+  position: relative;
+  height: 430vh;
+}
+
+.story-sticky {
+  position: sticky;
+  top: 0;
+  display: flex;
+  height: 100vh;
+  height: 100svh;
+  align-items: center;
+  padding-top: 64px;
+}
+
+.story-layout {
+  display: grid;
+  width: var(--content);
+  align-items: center;
+  gap: clamp(40px, 7vw, 120px);
+  margin: 0 auto;
+  grid-template-columns: 1fr auto;
+}
+
+.story-acts {
+  display: grid;
+  max-width: 540px;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.story-act {
+  display: flex;
+  gap: 22px;
+  padding: 22px 24px;
+  border-radius: var(--radius-lg);
+  opacity: 0.36;
+  transition: opacity 0.5s ease, background 0.5s ease, box-shadow 0.5s ease,
+    transform 0.7s var(--ease-out);
+}
+
+.story-act.is-active {
+  background: var(--surface);
+  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line);
+  opacity: 1;
+  transform: translateX(6px);
+}
+
+.act-index {
+  padding-top: 3px;
+  color: var(--accent);
+  font-size: 0.82rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.act-body {
+  flex: 1;
+}
+
+.act-kicker {
+  margin: 0 0 6px;
+  color: var(--accent);
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.act-body h3 {
+  margin-bottom: 8px;
+  font-size: clamp(1.22rem, 2vw, 1.55rem);
+  letter-spacing: -0.02em;
+}
+
+.act-body > p:not(.act-kicker) {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: 0.97rem;
+}
+
+/* 幕内进度条：--ap 由 site.js 写入（0 → 1） */
+.act-bar {
+  display: block;
+  overflow: hidden;
+  height: 2px;
+  margin-top: 16px;
+  border-radius: 2px;
+  background: var(--line);
+}
+
+.act-bar i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  transform: scaleX(var(--ap, 0));
+  transform-origin: left;
+}
+
+/* 舞台：手机 + 背后呼吸光晕 */
+.story-device {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.story-device::before {
+  position: absolute;
+  width: 140%;
+  height: 80%;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
+  content: "";
+  filter: blur(30px);
+  opacity: 0.55;
+  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
+}
+
+.story.s2:not(.s3) .story-device::before {
+  opacity: 1;
+  transform: scale(1.08);
+}
+
+/* 手机外壳：容器查询单位（cqw）让内部 UI 随机身等比缩放 */
+.phone {
+  --w: min(340px, calc((100svh - 150px) * 0.468));
+  position: relative;
+  width: var(--w);
+  aspect-ratio: 9 / 19.2;
+  padding: calc(var(--w) * 0.034);
+  border-radius: calc(var(--w) * 0.16);
+  background: linear-gradient(145deg, #39404a, #0d0f12 60%);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 60px 100px -40px rgba(0, 0, 0, 0.5), 0 30px 60px -30px rgba(16, 20, 24, 0.35);
+  container-type: inline-size;
+}
+
+.phone-screen {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  flex-direction: column;
+  border-radius: 12.6cqw;
+  background: var(--ph-bg);
+  color: var(--ph-ink);
+  font-size: 4cqw;
+  line-height: 1.38;
+  text-align: left;
+}
+
+.phone-status {
+  display: flex;
+  height: 12cqw;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.6cqw 8cqw 0;
+  font-size: 3.6cqw;
+  font-weight: 650;
+}
+
+.phone-island {
+  position: absolute;
+  top: 2.8cqw;
+  left: 50%;
+  width: 27cqw;
+  height: 7.6cqw;
+  margin-left: -13.5cqw;
+  border-radius: 99px;
+  background: #000;
+}
+
+.phone-signal {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.7cqw;
+  height: 2.8cqw;
+}
+
+.phone-signal i {
+  width: 0.9cqw;
+  border-radius: 0.4cqw;
+  background: currentColor;
+}
+
+.phone-signal i:nth-child(1) { height: 40%; }
+.phone-signal i:nth-child(2) { height: 70%; }
+.phone-signal i:nth-child(3) { height: 100%; }
+
+.chat-head {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2cqw;
+  padding: 1.2cqw 0 3cqw;
+  border-bottom: 1px solid var(--ph-line);
+}
+
+.chat-avatar {
+  display: grid;
+  width: 11cqw;
+  height: 11cqw;
+  place-items: center;
+  border-radius: 50%;
+  background: linear-gradient(145deg, #7fd0a0, #2c8a52);
+  color: #fff;
+  font-size: 4.4cqw;
+  font-weight: 700;
+}
+
+.chat-name {
+  display: grid;
+  justify-items: center;
+  line-height: 1.2;
+}
+
+.chat-name b {
+  font-size: 3.4cqw;
+  font-weight: 650;
+}
+
+.chat-name small {
+  color: var(--ph-muted);
+  font-size: 2.7cqw;
+}
+
+.chat-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 2.6cqw;
+  padding: 4cqw 4.4cqw;
+}
+
+.bubble {
+  position: relative;
+  max-width: 76%;
+  padding: 2.3cqw 3.6cqw;
+  border-radius: 5cqw;
+  font-size: 3.85cqw;
+  transition: opacity 0.35s ease, transform 0.7s var(--ease-spring), box-shadow 0.4s ease;
+}
+
+.bubble.in {
+  align-self: flex-start;
+  border-bottom-left-radius: 1.4cqw;
+  background: var(--ph-in);
+  transform-origin: 0 100%;
+}
+
+.bubble.out {
+  align-self: flex-end;
+  border-bottom-right-radius: 1.4cqw;
+  background: var(--ph-out);
+  color: #fff;
+  transform-origin: 100% 100%;
+}
+
+.story.is-live .bubble {
+  opacity: 0;
+  transform: translateY(3cqw) scale(0.6);
+}
+
+.story.is-live.s1 .b-ask,
+.story.is-live.s4 .b-sent,
+.story.is-live.s5 .b-addr {
+  opacity: 1;
+  transform: none;
+}
+
+/* 第三幕：复制地址 → 气泡高亮 + 「已复制」提示 */
+.story.s6 .b-addr {
+  box-shadow: 0 0 0 0.8cqw color-mix(in srgb, var(--ph-out) 40%, transparent);
+}
+
+.copy-toast {
+  position: absolute;
+  top: -6.8cqw;
+  left: 4cqw;
+  display: flex;
+  align-items: center;
+  gap: 1cqw;
+  padding: 1.1cqw 2.6cqw;
+  border-radius: 99px;
+  background: var(--ph-ink);
+  color: var(--ph-bg);
+  font-size: 2.9cqw;
+  font-weight: 600;
+  opacity: 0;
+  transform: translateY(2cqw) scale(0.8);
+  transition: opacity 0.3s ease, transform 0.6s var(--ease-spring);
+}
+
+.copy-toast .i {
+  width: 3.4cqw;
+  height: 3.4cqw;
+  stroke-width: 2.4;
+}
+
+.story.s6:not(.s7) .copy-toast {
+  opacity: 1;
+  transform: none;
+}
+
+/* 日历通知横幅：从刘海下方落下 */
+.event-banner {
+  position: absolute;
+  z-index: 3;
+  top: 2.6cqw;
+  right: 3.4cqw;
+  left: 3.4cqw;
+  display: flex;
+  align-items: center;
+  gap: 3cqw;
+  padding: 3cqw 3.4cqw;
+  border-radius: 6cqw;
+  background: color-mix(in srgb, var(--ph-bg) 82%, transparent);
+  -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  backdrop-filter: blur(20px) saturate(1.5);
+  box-shadow: 0 6cqw 12cqw -4cqw rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--ph-line);
+  transition: transform 0.9s var(--ease-spring), opacity 0.4s ease;
+}
+
+.story.is-live .event-banner {
+  opacity: 0;
+  transform: translateY(-130%) scale(0.92);
+}
+
+.story.is-live.s8 .event-banner {
+  opacity: 1;
+  transform: none;
+}
+
+.event-icon {
+  display: grid;
+  width: 10cqw;
+  height: 10cqw;
+  flex: none;
+  place-items: center;
+  border-radius: 2.8cqw;
+  background: var(--ph-out);
+  color: #fff;
+}
+
+.event-icon .i {
+  width: 5.4cqw;
+  height: 5.4cqw;
+}
+
+.event-copy {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  line-height: 1.3;
+}
+
+.event-copy small {
+  color: var(--ph-muted);
+  font-size: 2.7cqw;
+}
+
+.event-copy b {
+  font-size: 3.5cqw;
+}
+
+.event-copy span {
+  overflow: hidden;
+  color: var(--ph-muted);
+  font-size: 2.9cqw;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.event-check {
+  display: grid;
+  width: 6.4cqw;
+  height: 6.4cqw;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--ph-out) 18%, transparent);
+  color: var(--ph-out);
+  transition: transform 0.7s var(--ease-spring) 0.35s;
+}
+
+.event-check .i {
+  width: 4cqw;
+  height: 4cqw;
+  stroke-width: 2.6;
+}
+
+.story.is-live .event-check {
+  transform: scale(0);
+}
+
+.story.is-live.s8 .event-check {
+  transform: none;
+}
+
+/* 输入框：文字由 site.js 按滚动进度逐字写入 */
+.compose {
+  display: flex;
+  flex: none;
+  align-items: flex-end;
+  gap: 2.4cqw;
+  padding: 2.4cqw 3.6cqw 2.8cqw;
+}
+
+.compose-field {
+  position: relative;
+  display: block;
+  min-height: 9.4cqw;
+  flex: 1;
+  padding: 2cqw 3.6cqw;
+  border-radius: 4.8cqw;
+  box-shadow: inset 0 0 0 1px var(--ph-line);
+  font-size: 3.7cqw;
+}
+
+.compose-placeholder {
+  position: absolute;
+  top: 2cqw;
+  left: 3.6cqw;
+  color: var(--ph-muted);
+  transition: opacity 0.2s ease;
+}
+
+.story.has-text .compose-placeholder {
+  opacity: 0;
+}
+
+.compose-text {
+  position: relative;
+}
+
+.compose-text.is-swapping {
+  animation: text-swap 0.45s var(--ease-out);
+}
+
+@keyframes text-swap {
+  from { opacity: 0; filter: blur(4px); }
+  to { opacity: 1; filter: blur(0); }
+}
+
+.compose .caret {
+  background: var(--ph-out);
+  visibility: hidden;
+}
+
+.story.s2:not(.s4) .compose .caret {
+  visibility: visible;
+}
+
+.compose-send {
+  display: grid;
+  width: 9.4cqw;
+  height: 9.4cqw;
+  flex: none;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--ph-line);
+  color: #fff;
+  transition: background 0.3s ease, transform 0.6s var(--ease-spring);
+}
+
+.compose-send .i {
+  width: 5cqw;
+  height: 5cqw;
+  stroke-width: 2.4;
+}
+
+.story.has-text .compose-send {
+  background: var(--ph-out);
+  transform: scale(1.05);
+}
+
+/* 键盘：顶部条在「聆听 / 语气 / 技能」三种状态间切换 */
+.kb {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: 2.4cqw;
+  padding: 2.6cqw 2.6cqw 6.4cqw;
+  background: var(--ph-kb);
+}
+
+.kb-bar {
+  position: relative;
+  height: 8.6cqw;
+}
+
+.kb-status,
+.kb-tones,
+.kb-skills {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(2cqw);
+  transition: opacity 0.35s ease, transform 0.6s var(--ease-spring);
+}
+
+.story.s2:not(.s3) .kb-status,
+.story.s3:not(.s4) .kb-tones,
+.story.s7 .kb-skills,
+.story:not(.is-live) .kb-skills {
+  opacity: 1;
+  transform: none;
+}
+
+.kb-status {
+  justify-content: center;
+  gap: 2cqw;
+  color: var(--ph-out);
+  font-size: 3.4cqw;
+  font-weight: 650;
+}
+
+.kb-status i {
+  width: 2cqw;
+  height: 2cqw;
+  border-radius: 50%;
+  background: currentColor;
+  animation: caret-blink 1s steps(1) infinite;
+}
+
+.kb-tones {
+  gap: 1.8cqw;
+}
+
+.kb-tones > span,
+.kb-skills > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 1cqw;
+  padding: 1.5cqw 3cqw;
+  border-radius: 99px;
+  background: var(--ph-key);
+  font-size: 3.2cqw;
+  font-weight: 600;
+  transition: background 0.3s ease, color 0.3s ease, transform 0.6s var(--ease-spring),
+    opacity 0.3s ease;
+}
+
+.story.tone-0 [data-tone="0"],
+.story.tone-1 [data-tone="1"],
+.story.tone-2 [data-tone="2"] {
+  background: var(--ph-out);
+  color: #fff;
+  transform: scale(1.07);
+}
+
+.kb-tones em {
+  margin-left: auto;
+  color: var(--ph-muted);
+  font-size: 2.6cqw;
+  font-style: normal;
+}
+
+.kb-skills {
+  gap: 1.6cqw;
+}
+
+.kb-skills .i {
+  width: 3.6cqw;
+  height: 3.6cqw;
+}
+
+/* 技能芯片依次弹出，模拟「从技能目录里挑出相关操作」 */
+.story.is-live .kb-skills > span {
+  opacity: 0;
+  transform: translateY(3cqw) scale(0.7);
+}
+
+.story.is-live.s7 .kb-skills > span {
+  opacity: 1;
+  transform: none;
+}
+
+.kb-skills > span:nth-child(2) { transition-delay: 0.06s; }
+.kb-skills > span:nth-child(3) { transition-delay: 0.12s; }
+.kb-skills > span:nth-child(4) { transition-delay: 0.18s; }
+
+.story.is-live.s8 .kb-skills .skill-event,
+.story:not(.is-live) .kb-skills .skill-event {
+  background: var(--ph-out);
+  color: #fff;
+  transform: scale(1.1);
+  transition-delay: 0s;
+}
+
+.kb-main {
+  display: flex;
+  height: 21cqw;
+  align-items: center;
+  justify-content: center;
+  gap: 4cqw;
+}
+
+.kb-wave {
+  height: 12cqw;
+  gap: 1.2cqw;
+}
+
+.kb-wave i {
+  width: 1.1cqw;
+  height: 100%;
+  border-radius: 1cqw;
+  background: var(--ph-out);
+  opacity: 0.75;
+  transform: scaleY(0.1);
+}
+
+.kb-mic {
+  position: relative;
+  display: grid;
+  width: 17cqw;
+  height: 17cqw;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--ph-out);
+  box-shadow: 0 2cqw 6cqw -1cqw color-mix(in srgb, var(--ph-out) 70%, transparent);
+  color: #fff;
+  transition: transform 0.6s var(--ease-spring);
+}
+
+.kb-mic .i {
+  width: 7.4cqw;
+  height: 7.4cqw;
+  stroke-width: 2;
+}
+
+.kb-mic::before,
+.kb-mic::after {
+  position: absolute;
+  inset: 0;
+  border: 0.5cqw solid var(--ph-out);
+  border-radius: 50%;
+  content: "";
+  opacity: 0;
+}
+
+.story.s2:not(.s3) .kb-mic {
+  transform: scale(1.08);
+}
+
+.story.s2:not(.s3) .kb-mic::before,
+.story.s2:not(.s3) .kb-mic::after {
+  animation: orb-ripple 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
+}
+
+.story.s2:not(.s3) .kb-mic::after {
+  animation-delay: 0.8s;
+}
+
+.kb-keys {
+  display: grid;
+  gap: 1.8cqw;
+  grid-template-columns: 1fr 3.4fr 1.5fr;
+}
+
+.kb-key {
+  display: grid;
+  height: 10cqw;
+  place-items: center;
+  border-radius: 2.4cqw;
+  background: var(--ph-key);
+  box-shadow: 0 0.4cqw 0 rgba(0, 0, 0, 0.16);
+  font-size: 3.4cqw;
+  transition: transform 0.4s var(--ease-spring), background 0.3s ease;
+}
+
+.kb-key .i {
+  width: 4.8cqw;
+  height: 4.8cqw;
+}
+
+.kb-return {
+  background: var(--ph-out);
+  color: #fff;
+}
+
+.story.s4:not(.s5) .kb-return {
+  animation: key-press 0.5s var(--ease-out);
+}
+
+@keyframes key-press {
+  30% { transform: scale(0.9); }
+}
+
+/* --------------------------------------------------------------------------
+ * 10. 数字带
+ * -------------------------------------------------------------------------- */
+.numbers-section {
+  padding: clamp(64px, 8vw, 104px) 0;
+}
+
+.numbers-grid {
+  display: grid;
+  gap: 28px;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.number {
+  position: relative;
+  padding-top: 24px;
+}
+
+/* 顶部细线随进场从左向右「画」出 */
+.number::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  background: linear-gradient(90deg, var(--accent), var(--line-strong) 40%);
+  content: "";
+  transform-origin: 0 50%;
+  transition: transform 1.3s var(--ease-out) var(--d, 0s);
+}
+
+html.js .number:not(.is-visible)::before {
+  transform: scaleX(0);
+}
+
+.number strong {
+  display: block;
+  margin-bottom: 12px;
+  background: linear-gradient(180deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 50%, var(--accent)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-size: clamp(2.4rem, 4.8vw, 3.7rem);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: -0.045em;
+  line-height: 1;
+}
+
+.number span {
+  display: block;
+  max-width: 24ch;
+  color: var(--ink-2);
+  font-size: 0.94rem;
+}
+
+/* --------------------------------------------------------------------------
+ * 11. 功能区块细节
  * -------------------------------------------------------------------------- */
 .step-list {
   display: grid;
@@ -633,8 +2005,8 @@ h3 {
   padding-top: 2px;
   color: var(--accent);
   font-size: 0.82rem;
-  font-weight: 700;
   font-variant-numeric: tabular-nums;
+  font-weight: 700;
   letter-spacing: 0.04em;
 }
 
@@ -688,6 +2060,13 @@ h3 {
   background: var(--surface);
   font-size: 0.88rem;
   font-weight: 550;
+  transition: transform 0.5s var(--ease-spring), border-color 0.25s ease, color 0.25s ease;
+}
+
+.skill-chips > span:hover {
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  color: var(--accent);
+  transform: translateY(-3px);
 }
 
 .skill-chips .i {
@@ -696,6 +2075,21 @@ h3 {
   color: var(--accent);
 }
 
+/* 进场用 animation 而非 transition，避免进场延迟拖慢之后的悬停反馈 */
+html.js .reveal:not(.is-visible) .skill-chips > span {
+  opacity: 0;
+}
+
+html.js .reveal.is-visible .skill-chips > span {
+  animation: chip-in 0.8s var(--ease-spring) both;
+  animation-delay: calc(0.3s + var(--ci, 0) * 60ms);
+}
+
+@keyframes chip-in {
+  from { opacity: 0; transform: translateY(12px) scale(0.85); }
+  to { opacity: 1; transform: none; }
+}
+
 .quiet-list {
   display: grid;
   gap: 12px;
@@ -726,7 +2120,7 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 8. 个人化（2.1 卖点）
+ * 12. 嘴替输入法（2.1 卖点）
  * -------------------------------------------------------------------------- */
 .personal-grid {
   display: grid;
@@ -739,12 +2133,12 @@ h3 {
   border: 1px solid var(--line);
   border-radius: var(--radius-xl);
   background: var(--surface);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: transform 0.5s var(--ease-out), box-shadow 0.35s ease;
 }
 
 .personal-card:hover {
   box-shadow: var(--shadow-card);
-  transform: translateY(-4px);
+  transform: translateY(-6px);
 }
 
 .personal-media {
@@ -759,6 +2153,12 @@ h3 {
   height: 100%;
   object-fit: cover;
   object-position: top center;
+  transition: transform 1.2s var(--ease-out);
+}
+
+.personal-card:hover .personal-media img,
+.personal-card:hover .personal-media video {
+  transform: scale(1.04);
 }
 
 .personal-card h3 {
@@ -773,17 +2173,96 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 9. 隐私：三种服务路径（深色舞台）
+ * 13. 隐私：三种服务路径（深色舞台）
  * -------------------------------------------------------------------------- */
 .privacy-section {
+  --spot-color: var(--stage-accent);
   background: linear-gradient(180deg, var(--stage-2), var(--stage-3));
   color: var(--stage-ink);
 }
 
-.center-heading.inverse p {
+.center-heading.inverse p:not(.eyebrow) {
   color: var(--stage-ink-2);
 }
 
+.privacy-section .eyebrow {
+  color: var(--stage-accent);
+}
+
+/* 端侧徽记：声波在设备轮廓内跳动，轨道粒子绕行但从不越界 */
+.device-emblem {
+  position: relative;
+  width: 124px;
+  height: 124px;
+  margin: 0 auto 26px;
+}
+
+.device-emblem::before {
+  position: absolute;
+  inset: -20%;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgba(111, 196, 145, 0.28), transparent);
+  content: "";
+  animation: breathe 4s ease-in-out infinite;
+}
+
+@keyframes breathe {
+  50% { opacity: 0.45; transform: scale(0.9); }
+}
+
+.device-emblem svg {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.emblem-orbit {
+  fill: none;
+  stroke: rgba(111, 196, 145, 0.4);
+  stroke-dasharray: 2 6;
+  stroke-width: 1;
+}
+
+.emblem-spin {
+  fill: var(--stage-accent);
+  transform-origin: 80px 80px;
+  animation: spin 10s linear infinite;
+}
+
+.emblem-spin-rev {
+  opacity: 0.6;
+  animation-direction: reverse;
+  animation-duration: 15s;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.emblem-device {
+  fill: rgba(255, 255, 255, 0.04);
+  stroke: rgba(255, 255, 255, 0.42);
+  stroke-width: 1.5;
+}
+
+.emblem-wave rect {
+  fill: var(--stage-accent);
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: eq 1.3s ease-in-out infinite;
+}
+
+.emblem-wave rect:nth-child(2) { animation-delay: -0.2s; }
+.emblem-wave rect:nth-child(3) { animation-delay: -0.45s; }
+.emblem-wave rect:nth-child(4) { animation-delay: -0.7s; }
+.emblem-wave rect:nth-child(5) { animation-delay: -0.95s; }
+
+@keyframes eq {
+  0%, 100% { transform: scaleY(0.45); }
+  50% { transform: scaleY(1); }
+}
+
 .service-paths {
   display: grid;
   align-items: stretch;
@@ -897,10 +2376,15 @@ h3 {
 .inverse-link .i {
   width: 15px;
   height: 15px;
+  transition: transform 0.5s var(--ease-spring);
+}
+
+.inverse-link:hover .i {
+  transform: translate(3px, -3px);
 }
 
 /* --------------------------------------------------------------------------
- * 10. 平台
+ * 14. 平台
  * -------------------------------------------------------------------------- */
 .platform-grid {
   display: grid;
@@ -913,6 +2397,11 @@ h3 {
   border: 1px solid var(--line);
   border-radius: var(--radius-xl);
   background: var(--surface);
+  transition: box-shadow 0.35s ease;
+}
+
+.platform-card:hover {
+  box-shadow: var(--shadow-card);
 }
 
 .platform-card .media-frame {
@@ -927,6 +2416,11 @@ h3 {
   height: 100%;
   object-fit: cover;
   object-position: top center;
+  transition: transform 1.4s var(--ease-out);
+}
+
+.platform-card:hover .media-frame img {
+  transform: scale(1.035);
 }
 
 .platform-label {
@@ -958,7 +2452,7 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 11. 稳定性信任条
+ * 15. 稳定性信任条
  * -------------------------------------------------------------------------- */
 .reliability-section {
   padding: clamp(48px, 6vw, 72px) 0;
@@ -1007,7 +2501,7 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 12. FAQ
+ * 16. FAQ（展开高度由 site.js 用 Web Animations 过渡）
  * -------------------------------------------------------------------------- */
 .faq-layout {
   display: grid;
@@ -1016,7 +2510,13 @@ h3 {
   grid-template-columns: 1fr 1.4fr;
 }
 
+.faq-heading {
+  position: sticky;
+  top: 100px;
+}
+
 .faq-item {
+  overflow: hidden;
   border-top: 1px solid var(--line);
 }
 
@@ -1050,7 +2550,7 @@ h3 {
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
   background: currentColor;
-  transition: transform 0.3s ease;
+  transition: transform 0.5s var(--ease-spring);
 }
 
 .faq-item[open] summary::after {
@@ -1068,31 +2568,100 @@ h3 {
   font-size: 0.95rem;
 }
 
+.faq-item[open] p {
+  animation: faq-in 0.5s var(--ease-out);
+}
+
+@keyframes faq-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: none; }
+}
+
 /* --------------------------------------------------------------------------
- * 13. 下载 CTA（深色舞台，与 Hero 呼应）
+ * 17. 下载 CTA（深色舞台，与 Hero 呼应）
  * -------------------------------------------------------------------------- */
 .download-section {
   padding-top: 0;
 }
 
+.faq-section + .download-section {
+  padding-top: clamp(72px, 9vw, 120px);
+}
+
 .download-panel {
+  position: relative;
   display: flex;
+  overflow: hidden;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
-  padding: clamp(40px, 6vw, 72px);
+  padding: clamp(40px, 6vw, 80px);
   border-radius: calc(var(--radius-xl) + 4px);
+  isolation: isolate;
   background:
     radial-gradient(110% 130% at 90% 120%, rgba(111, 196, 145, 0.16), transparent 55%),
     linear-gradient(160deg, var(--stage-1), var(--stage-3));
   color: var(--stage-ink);
 }
 
-.download-panel h2 {
-  margin-bottom: 12px;
+.download-backdrop {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  pointer-events: none;
 }
 
-.download-panel p {
+.download-backdrop .aurora-a {
+  top: -60%;
+  left: -12%;
+  width: 520px;
+  height: 520px;
+}
+
+.download-backdrop .aurora-b {
+  top: auto;
+  right: -14%;
+  bottom: -70%;
+  width: 520px;
+  height: 520px;
+}
+
+/* 声波路径：虚线沿曲线流动，两条反向错速 */
+.download-wave {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 55%;
+  opacity: 0.45;
+}
+
+.download-wave path {
+  fill: none;
+  stroke: var(--stage-accent);
+  stroke-dasharray: 6 12;
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+  animation: dash-flow 5s linear infinite;
+}
+
+.download-wave path:nth-child(2) {
+  opacity: 0.5;
+  animation-direction: reverse;
+  animation-duration: 8s;
+}
+
+@keyframes dash-flow {
+  to { stroke-dashoffset: -180; }
+}
+
+.download-copy h2 {
+  margin-bottom: 12px;
+  font-size: clamp(2rem, 4.2vw, 3.1rem);
+}
+
+.download-copy p {
   max-width: 460px;
   margin: 0;
   color: var(--stage-ink-2);
@@ -1121,10 +2690,11 @@ h3 {
   color: var(--stage-ink);
   font-size: 0.92rem;
   font-weight: 600;
-  transition: background 0.25s ease;
+  transition: background 0.25s ease, border-color 0.25s ease, transform 0.5s var(--ease-spring);
 }
 
 .outline-action:hover {
+  border-color: rgba(111, 196, 145, 0.45);
   background: rgba(255, 255, 255, 0.08);
 }
 
@@ -1134,7 +2704,7 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 14. 页脚
+ * 18. 页脚
  * -------------------------------------------------------------------------- */
 .site-footer {
   padding: 44px 0 52px;
@@ -1165,42 +2735,185 @@ h3 {
 }
 
 /* --------------------------------------------------------------------------
- * 15. 滚动显现动效（尊重减弱动效设置）
+ * 19. 动效系统：滚动显现 / 遮罩揭示 / 光斑 / 倾斜 / 磁吸 / 主题过渡
  * -------------------------------------------------------------------------- */
-.reveal {
+/*
+ * 进场只动 opacity + translate（独立属性），把 transform 留给悬停倾斜与视差，
+ * 两套动效互不覆盖。进场延迟只作用在进场属性上，悬停反馈始终即时。
+ */
+html.js .reveal {
   opacity: 0;
-  transform: translateY(22px);
-  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
-    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
-  transition-delay: var(--d, 0s);
+  translate: 0 30px;
+  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s, var(--d, 0s);
+  transition-duration: 0.9s, 1.05s, 0.5s, 0.35s, 0.35s, 1.25s;
+  transition-property: opacity, translate, transform, box-shadow, border-color, clip-path;
+  transition-timing-function: ease-out, var(--ease-out), var(--ease-out), ease, ease, var(--ease-out);
 }
 
-.reveal.is-visible {
+html.js .reveal.is-visible {
   opacity: 1;
+  translate: 0 0;
+}
+
+/* 视差元素的 transform 每帧由脚本写入，不再叠加过渡 */
+html.js .reveal[data-parallax] {
+  transition-duration: 0.9s, 1.05s, 0s, 0.35s, 0.35s, 1.25s;
+}
+
+/* 遮罩揭示：媒体框从内缩的圆角矩形展开，内部画面同时从 112% 回落 */
+html.js .unmask.reveal {
+  clip-path: inset(9% 7% 9% 7% round var(--radius-lg));
+}
+
+html.js .unmask.reveal.is-visible {
+  clip-path: inset(0 0 0 0 round var(--radius-lg));
+}
+
+html.js .unmask > video,
+html.js .unmask > img {
+  transform: scale(1.12);
+  transition: transform 1.6s var(--ease-out) var(--d, 0s);
+}
+
+html.js .unmask.is-visible > video,
+html.js .unmask.is-visible > img {
   transform: none;
 }
 
+/* 指针光斑：卡片内部高光 + 边框描光，--mx / --my 由脚本写入 */
+.spot {
+  position: relative;
+  isolation: isolate;
+}
+
+.spot::before,
+.spot::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
+
+.spot::before {
+  z-index: -1;
+  background: radial-gradient(
+    420px circle at var(--mx, 50%) var(--my, 50%),
+    color-mix(in srgb, var(--spot-color, var(--accent)) 13%, transparent),
+    transparent 46%
+  );
+}
+
+.spot::after {
+  z-index: 2;
+  padding: 1px;
+  background: radial-gradient(
+    260px circle at var(--mx, 50%) var(--my, 50%),
+    color-mix(in srgb, var(--spot-color, var(--accent)) 70%, transparent),
+    transparent 62%
+  );
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+}
+
+.spot:hover::before,
+.spot:hover::after {
+  opacity: 1;
+}
+
+/* 3D 倾斜：--rx / --ry 由脚本根据指针位置写入 */
+.tilt {
+  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
+    translateY(var(--lift, 0px));
+  transform-style: preserve-3d;
+}
+
+.tilt:hover {
+  --lift: -5px;
+}
+
+/* 主题切换：View Transitions 以按钮为圆心扩散（site.js 驱动 clip-path） */
+html.vt-theme::view-transition-old(root),
+html.vt-theme::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+html.vt-theme::view-transition-new(root) {
+  z-index: 1;
+}
+
+/* --------------------------------------------------------------------------
+ * 20. 减弱动态效果：所有持续动画停止，内容以最终态直接呈现
+ * -------------------------------------------------------------------------- */
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
   }
 
-  .reveal {
-    opacity: 1;
-    transform: none;
-    transition: none;
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: 0s !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
   }
 
-  .way-card,
-  .personal-card,
-  .store-badge,
-  .ghost-action {
-    transition: none;
+  html.js .reveal,
+  html.js .hero-in {
+    opacity: 1;
+    translate: none;
+    filter: none;
+  }
+
+  html.js .unmask.reveal {
+    clip-path: none;
+  }
+
+  html.js .unmask > video,
+  html.js .unmask > img {
+    transform: none;
+  }
+
+  html.js .reveal [data-split] .ch {
+    opacity: 1;
+    filter: none;
+    transform: none;
+  }
+
+  .hero-inner,
+  .hero-devices {
+    opacity: 1;
+    transform: none;
+  }
+
+  .marquee-track {
+    width: auto;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .marquee ul[aria-hidden="true"] {
+    display: none;
+  }
+
+  .marquee ul {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .tilt {
+    transform: none;
   }
 }
 
 /* --------------------------------------------------------------------------
- * 16. 响应式
+ * 21. 响应式
  * -------------------------------------------------------------------------- */
 @media (max-width: 960px) {
   .nav-links {
@@ -1221,6 +2934,10 @@ h3 {
     color: var(--ink);
   }
 
+  .mobile-nav[hidden] {
+    display: none;
+  }
+
   .mobile-nav a {
     display: block;
     padding: 12px 8px;
@@ -1233,6 +2950,10 @@ h3 {
     grid-template-columns: 1fr;
   }
 
+  .faq-heading {
+    position: static;
+  }
+
   .split-layout.reverse .feature-copy {
     order: 1;
   }
@@ -1241,7 +2962,8 @@ h3 {
     order: 2;
   }
 
-  .ways-grid {
+  .ways-grid,
+  .numbers-grid {
     grid-template-columns: 1fr 1fr;
   }
 
@@ -1270,6 +2992,57 @@ h3 {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  /* 滚动叙事：手机在上，当前一幕的文案在下方叠放切换 */
+  .story {
+    height: 400vh;
+  }
+
+  .story-layout {
+    align-content: center;
+    gap: 22px;
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .story-device {
+    order: -1;
+  }
+
+  .phone {
+    --w: min(290px, calc((100svh - 360px) * 0.468));
+  }
+
+  .story-acts {
+    position: relative;
+    display: block;
+    width: 100%;
+    max-width: 520px;
+    height: 196px;
+  }
+
+  .story-act {
+    position: absolute;
+    inset: 0;
+    padding: 16px 20px;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(14px);
+  }
+
+  .story-act.is-active {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+  }
+
+  .act-body > p:not(.act-kicker) {
+    font-size: 0.92rem;
+  }
+
+  .scroll-cue {
+    display: none;
+  }
 }
 
 @media (max-width: 600px) {
@@ -1278,7 +3051,7 @@ h3 {
   }
 
   .hero {
-    padding-top: 120px;
+    padding-top: 116px;
   }
 
   .ways-grid {
@@ -1289,6 +3062,26 @@ h3 {
     gap: 14px;
   }
 
+  .voice-capsule {
+    bottom: 12%;
+    gap: 10px;
+    padding: 6px 14px 6px 6px;
+  }
+
+  .capsule-orb {
+    width: 34px;
+    height: 34px;
+  }
+
+  .capsule-wave {
+    display: none;
+  }
+
+  .capsule-body {
+    min-width: min(260px, 70vw);
+    font-size: 0.84rem;
+  }
+
   .privacy-proof {
     flex-direction: column;
     align-items: flex-start;
@@ -1299,3 +3092,24 @@ h3 {
     align-items: flex-start;
   }
 }
+
+/* 无 JavaScript：滚动叙事退化为静态展示，不保留 430vh 的空白滚动距离 */
+html.no-js .story {
+  height: auto;
+}
+
+html.no-js .story-sticky {
+  position: static;
+  height: auto;
+  padding: 48px 0 0;
+}
+
+html.no-js .story-act {
+  position: static;
+  opacity: 1;
+  transform: none;
+}
+
+html.no-js .story-acts {
+  height: auto;
+}
diff --git a/docs/assets/site.js b/docs/assets/site.js
index 65d9926..004c5d0 100644
--- a/docs/assets/site.js
+++ b/docs/assets/site.js
@@ -1,10 +1,14 @@
 /*!
- * OSGKeyboard 主页交互。
+ * OSGKeyboard 主页交互与动效引擎。
  * 无 JavaScript 时页面内容完整可读；本文件负责：
  *   1. 中 / 英双语切换（data-zh / data-en 系列属性，含视频源）
- *   2. 深浅色主题（默认跟随系统，手动选择后持久化）
- *   3. 移动端导航开合
- *   4. 导航栏滚动状态、滚动显现动效、离屏视频暂停
+ *   2. 深浅色主题（默认跟随系统，手动选择后持久化；支持时以圆形扩散过渡）
+ *   3. 移动端导航开合、导航滑块与当前区块高亮
+ *   4. 逐字拆分标题（data-split）
+ *   5. 滚动引擎：进度条、Hero 设备「立起」、媒体视差、三幕滚动叙事
+ *   6. 声波渲染、Hero 语音胶囊打字机、数字计数
+ *   7. 指针光斑 / 3D 倾斜 / 磁吸按钮、FAQ 高度过渡、离屏视频暂停
+ * 开启「减弱动态效果」时，持续动画与指针动效全部停用，内容直接呈现最终态。
  */
 (function () {
   "use strict";
@@ -21,6 +25,78 @@
   const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
   const supportedLanguages = new Set(["zh", "en"]);
 
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const finePointer = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  const canObserve = "IntersectionObserver" in window;
+
+  const TITLES = {
+    zh: "OSGKeyboard｜AI 语音输入法 · 嘴替输入法 · iPhone / iPad / Mac",
+    en: "OSGKeyboard — Agentic Keyboard & AI Voice Keyboard for iPhone and Mac"
+  };
+
+  const clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value));
+
+  // 语言切换后需要重算的模块（胶囊文案、叙事文案、导航滑块）在此登记
+  const languageHooks = [];
+
+  /* ---------------- 逐字拆分 ---------------- */
+
+  // 每个分组是一段不可断开的文字：英文按词，中文按「到下一个标点为止」的短句，
+  // 与原标题的 word-break: keep-all 断行效果一致，标点也不会落到行首
+  const CJK_PUNCTUATION = /[，。、！？：；）」』》…～]/;
+
+  function groupCharacters(token) {
+    const groups = [];
+    let current = [];
+    for (const character of token) {
+      current.push(character);
+      if (CJK_PUNCTUATION.test(character)) {
+        groups.push(current);
+        current = [];
+      }
+    }
+    if (current.length) groups.push(current);
+    return groups;
+  }
+
+  function splitText(element) {
+    const text = element.textContent.trim();
+    // 读屏读取完整句子，逐字拆分的视觉层对辅助技术隐藏
+    const readable = document.createElement("span");
+    readable.className = "sr-only";
+    readable.textContent = text;
+    const visual = document.createElement("span");
+    visual.setAttribute("aria-hidden", "true");
+
+    let index = 0;
+    text.split(/(\s+)/).forEach((token) => {
+      if (!token) return;
+      if (/^\s+$/.test(token)) {
+        visual.append(" ");
+        return;
+      }
+      groupCharacters(token).forEach((group) => {
+        const word = document.createElement("span");
+        word.className = "w";
+        group.forEach((character) => {
+          const span = document.createElement("span");
+          span.className = "ch";
+          span.style.setProperty("--ci", String(index++));
+          span.textContent = character;
+          word.append(span);
+        });
+        visual.append(word);
+      });
+    });
+
+    element.replaceChildren(readable, visual);
+    element.classList.add("is-split");
+  }
+
+  function splitAll() {
+    document.querySelectorAll("[data-split]").forEach(splitText);
+  }
+
   /* ---------------- 语言 ---------------- */
 
   function preferredLanguage() {
@@ -50,7 +126,8 @@
 
     // 同时覆盖 <img> 与 <video>：切换语言后视频自动重新加载播放
     document.querySelectorAll("[data-zh-src][data-en-src]").forEach((element) => {
-      element.src = element.dataset[`${lang}Src`] || "";
+      const next = element.dataset[`${lang}Src`] || "";
+      if (element.getAttribute("src") !== next) element.src = next;
     });
 
     document.querySelectorAll("[data-zh-href][data-en-href]").forEach((element) => {
@@ -71,9 +148,7 @@
       image.src = `assets/screenshots/${lang}/${theme}/${image.dataset.shot}`;
     });
 
-    document.title = lang === "zh"
-      ? "OSGKeyboard — 开口即文字"
-      : "OSGKeyboard — Say it. It’s typed.";
+    document.title = TITLES[lang];
 
     if (languageButton) {
       languageButton.textContent = lang === "zh" ? "EN" : "中文";
@@ -93,6 +168,10 @@
       );
     }
 
+    // 文字已被 data-zh / data-en 重写，需要重新拆分才能继续逐字动效
+    splitAll();
+    languageHooks.forEach((hook) => hook(lang));
+
     if (persist) {
       localStorage.setItem("osg-site-language", lang);
       const url = new URL(window.location.href);
@@ -141,6 +220,35 @@
     if (persist) localStorage.setItem("osg-site-theme", resolved);
   }
 
+  // 以主题按钮为圆心，新主题从一个点扩散覆盖整页（View Transitions API）
+  function toggleThemeWithTransition() {
+    const next = root.dataset.theme === "dark" ? "light" : "dark";
+    if (!document.startViewTransition || reduceMotion || !themeButton) {
+      applyTheme(next, true);
+      return;
+    }
+    const rect = themeButton.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+
+    root.classList.add("vt-theme");
+    const transition = document.startViewTransition(() => applyTheme(next, true));
+    transition.ready
+      .then(() => {
+        root.animate(
+          { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] },
+          {
+            duration: 760,
+            easing: "cubic-bezier(0.65, 0, 0.35, 1)",
+            pseudoElement: "::view-transition-new(root)"
+          }
+        );
+      })
+      .catch(() => {});
+    transition.finished.finally(() => root.classList.remove("vt-theme"));
+  }
+
   /* ---------------- 移动端导航 ---------------- */
 
   function setMenuOpen(isOpen) {
@@ -158,6 +266,378 @@
     );
   }
 
+  /* ---------------- 导航滑块与当前区块 ---------------- */
+
+  const navHost = document.getElementById("navLinks");
+  const navLinks = navHost ? Array.from(navHost.querySelectorAll("a")) : [];
+  let activeNavLink = null;
+
+  function moveIndicator(link) {
+    if (!navHost) return;
+    if (!link) {
+      navHost.classList.remove("has-indicator");
+      return;
+    }
+    navHost.style.setProperty("--ix", `${link.offsetLeft}px`);
+    navHost.style.setProperty("--iw", `${link.offsetWidth}px`);
+    navHost.classList.add("has-indicator");
+  }
+
+  function setActiveNav(link) {
+    activeNavLink = link;
+    navLinks.forEach((item) => item.classList.toggle("is-active", item === link));
+    moveIndicator(link);
+  }
+
+  navLinks.forEach((link) => {
+    link.addEventListener("mouseenter", () => moveIndicator(link));
+    link.addEventListener("focus", () => moveIndicator(link));
+  });
+  navHost?.addEventListener("mouseleave", () => moveIndicator(activeNavLink));
+  languageHooks.push(() => requestAnimationFrame(() => moveIndicator(activeNavLink)));
+
+  if (canObserve && navLinks.length) {
+    const sectionToLink = new Map();
+    navLinks.forEach((link) => {
+      const section = document.querySelector(link.getAttribute("href"));
+      if (section) sectionToLink.set(section, link);
+    });
+    const visibleSections = new Set();
+    const spy = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) visibleSections.add(entry.target);
+          else visibleSections.delete(entry.target);
+        });
+        // 取文档顺序中最后一个处于判定带内的区块
+        let current = null;
+        sectionToLink.forEach((link, section) => {
+          if (visibleSections.has(section)) current = link;
+        });
+        if (current !== activeNavLink) setActiveNav(current);
+      },
+      { rootMargin: "-45% 0px -50% 0px" }
+    );
+    sectionToLink.forEach((_, section) => spy.observe(section));
+  }
+
+  /* ---------------- 声波渲染 ---------------- */
+
+  // 每个声波实例：bars 为条形元素，level 为目标音量，amp 为插值后的当前音量
+  const waves = [];
+
+  function createWave(container, options = {}) {
+    const count = Number(container.dataset.wave) || 16;
+    const bars = [];
+    for (let i = 0; i < count; i += 1) {
+      const bar = document.createElement("i");
+      container.append(bar);
+      bars.push(bar);
+    }
+    const wave = { bars, level: 0, amp: 0, active: true, mirror: Boolean(options.mirror), seed: Math.random() * 10 };
+    waves.push(wave);
+    return wave;
+  }
+
+  let waveFrame = 0;
+
+  function renderWaves(now) {
+    waveFrame = 0;
+    let running = false;
+    waves.forEach((wave) => {
+      if (!wave.active) return;
+      running = true;
+      wave.amp += (wave.level - wave.amp) * 0.12;
+      const length = wave.bars.length;
+      wave.bars.forEach((bar, index) => {
+        const i = wave.mirror ? length - 1 - index : index;
+        // 两路正弦叠加出「语音包络」，中间条更高，两端收敛
+        const envelope = Math.sin(((i + 0.5) / length) * Math.PI) * 0.6 + 0.4;
+        const n1 = Math.sin(now * 0.009 + i * 0.85 + wave.seed) * 0.5 + 0.5;
+        const n2 = Math.sin(now * 0.0047 + i * 1.9 + wave.seed * 2) * 0.5 + 0.5;
+        const value = 0.1 + wave.amp * envelope * (0.25 + n1 * n2 * 0.95);
+        bar.style.transform = `scaleY(${Math.min(1, value).toFixed(3)})`;
+      });
+    });
+    if (running) waveFrame = requestAnimationFrame(renderWaves);
+  }
+
+  function wakeWaves() {
+    if (!reduceMotion && !waveFrame) waveFrame = requestAnimationFrame(renderWaves);
+  }
+
+  /* ---------------- Hero 语音胶囊 ---------------- */
+
+  const CAPSULE_SCRIPT = {
+    zh: [
+      { tag: "听写", text: "帮我订周五晚上七点的位子，四个人" },
+      { tag: "嘴替 · 轻松", text: "这周有点累，先不去啦，下次我请！" },
+      { tag: "替你做", text: "已建日程：周五 19:00 · 四人晚餐", agent: true }
+    ],
+    en: [
+      { tag: "Dictate", text: "Book a table for four, Friday at seven" },
+      { tag: "Your voice", text: "Bit wiped this week — rain check? Next one’s on me!" },
+      { tag: "Done for you", text: "Event added: Fri 7:00 PM · Dinner for four", agent: true }
+    ]
+  };
+
+  const hero = document.getElementById("top");
+  const capsule = document.querySelector(".voice-capsule");
+  const capsuleTag = capsule?.querySelector(".capsule-tag");
+  const capsuleLine = capsule?.querySelector(".capsule-line");
+  const capsuleWaveHost = capsule?.querySelector(".capsule-wave");
+  const capsuleWave = capsuleWaveHost ? createWave(capsuleWaveHost) : null;
+  let heroVisible = true;
+  let capsuleRun = 0;
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  // Hero 离屏或标签页隐藏时暂停打字，回来后从原处继续
+  async function whenActive(run) {
+    while (run === capsuleRun && (!heroVisible || document.hidden)) {
+      await wait(400);
+    }
+    return run === capsuleRun;
+  }
+
+  async function playCapsule() {
+    if (!capsule || !capsuleLine || !capsuleTag) return;
+    const run = ++capsuleRun;
+    const lang = root.dataset.lang === "en" ? "en" : "zh";
+    const script = CAPSULE_SCRIPT[lang];
+
+    if (reduceMotion) {
+      capsuleTag.textContent = script[0].tag;
+      capsuleLine.textContent = script[0].text;
+      return;
+    }
+
+    let index = 0;
+    while (run === capsuleRun) {
+      const item = script[index % script.length];
+      capsuleTag.textContent = item.tag;
+      capsuleTag.classList.toggle("is-agent", Boolean(item.agent));
+      capsuleLine.textContent = "";
+      await wait(260);
+
+      // 听写与嘴替模拟「边说边出字」，Agentic 结果直接以完成态弹出
+      const listening = !item.agent;
+      capsule.classList.toggle("is-listening", listening);
+      if (capsuleWave) capsuleWave.level = listening ? 1 : 0.15;
+      wakeWaves();
+
+      const characters = Array.from(item.text);
+      const base = lang === "zh" ? 70 : 34;
+      for (let i = 1; i <= characters.length; i += 1) {
+        if (!(await whenActive(run))) return;
+        capsuleLine.textContent = characters.slice(0, i).join("");
+        await wait(item.agent ? 14 : base + Math.random() * base * 0.8);
+      }
+
+      capsule.classList.remove("is-listening");
+      if (capsuleWave) capsuleWave.level = 0.12;
+      await wait(item.agent ? 2400 : 1900);
+      if (!(await whenActive(run))) return;
+
+      // 快速回删，像是把这一句交给下一个能力
+      for (let i = characters.length; i >= 0; i -= 2) {
+        if (run !== capsuleRun) return;
+        capsuleLine.textContent = characters.slice(0, i).join("");
+        await wait(12);
+      }
+      index += 1;
+    }
+  }
+
+  languageHooks.push(() => playCapsule());
+
+  /* ---------------- 三幕滚动叙事 ---------------- */
+
+  const STORY_TEXT = {
+    zh: {
+      draft: "可以啊 周五七点 位子我来订",
+      tones: [
+        "可以，周五七点，位子我来订。",
+        "好的，周五晚七点见，座位由我来预订。",
+        "好呀！周五七点不见不散，位子包在我身上～"
+      ]
+    },
+    en: {
+      draft: "sure friday at seven ill book a table",
+      tones: [
+        "Sure — Friday at seven. I’ll book a table.",
+        "Sounds good. Friday at 7 p.m.; I’ll make the reservation.",
+        "Yes! Friday at 7 — leave the table to me."
+      ]
+    }
+  };
+
+  // 进度阈值（0 → 1）：s1 好友来信 · s2 开始聆听 · s3 嘴替改写 · s4 发送
+  //                     s5 好友回地址 · s6 复制 · s7 技能弹出 · s8 写入日历
+  const STORY_STEPS = [0.03, 0.08, 0.31, 0.585, 0.66, 0.735, 0.805, 0.885];
+  const TYPE_START = 0.08;
+  const TYPE_END = 0.29;
+  const TONE_STEPS = [0.36, 0.44, 0.515];
+  const ACT_RANGES = [[0, 0.31], [0.31, 0.66], [0.66, 1]];
+
+  const story = document.getElementById("storyStage");
+  const storyText = document.getElementById("storyText");
+  const storyActs = story ? Array.from(story.querySelectorAll(".story-act")) : [];
+  const storyWaves = story
+    ? Array.from(story.querySelectorAll(".kb-wave")).map((host, i) => createWave(host, { mirror: i === 0 }))
+    : [];
+  let storyLastText = null;
+  let storyLastTone = -1;
+  let storyLastAct = -1;
+
+  function updateStory(force) {
+    if (!story) return;
+    const rect = story.getBoundingClientRect();
+    const viewport = innerHeight;
+    const inView = rect.bottom > 0 && rect.top < viewport;
+    storyWaves.forEach((wave) => { wave.active = inView; });
+    if (!inView && !force) return;
+
+    const total = Math.max(1, story.offsetHeight - viewport);
+    const p = clamp(-rect.top / total);
+    const lang = root.dataset.lang === "en" ? "en" : "zh";
+    const copy = STORY_TEXT[lang];
+
+    const reached = STORY_STEPS.map((step) => p >= step);
+    reached.forEach((on, i) => story.classList.toggle(`s${i + 1}`, on));
+    const [, listening, rewriting, sent] = reached;
+
+    // 语气：仅在「改写中」阶段可见，按进度依次切到 普通 → 正式 → 轻松
+    let tone = -1;
+    if (rewriting && !sent) {
+      TONE_STEPS.forEach((step, i) => { if (p >= step) tone = i; });
+    }
+    if (tone !== storyLastTone) {
+      [0, 1, 2].forEach((i) => story.classList.toggle(`tone-${i}`, i === tone));
+    }
+
+    // 输入框：聆听阶段按滚动进度逐字「听写」，改写阶段显示当前语气的版本
+    let text = "";
+    if (listening && !rewriting) {
+      const characters = Array.from(copy.draft);
+      const count = Math.round(clamp((p - TYPE_START) / (TYPE_END - TYPE_START)) * characters.length);
+      text = characters.slice(0, count).join("");
+    } else if (rewriting && !sent) {
+      text = tone >= 0 ? copy.tones[tone] : copy.draft;
+    }
+
+    if (storyText && text !== storyLastText) {
+      const isRewrite = tone !== storyLastTone && text && storyLastText;
+      storyText.textContent = text;
+      if (isRewrite && !reduceMotion) {
+        storyText.classList.remove("is-swapping");
+        void storyText.offsetWidth;
+        storyText.classList.add("is-swapping");
+      }
+      storyLastText = text;
+    }
+    storyLastTone = tone;
+    story.classList.toggle("has-text", text.length > 0);
+
+    // 左侧三幕：高亮当前幕，幕内进度条随滚动填充
+    let act = 0;
+    ACT_RANGES.forEach(([start], i) => { if (p >= start) act = i; });
+    if (act !== storyLastAct) {
+      storyActs.forEach((element, i) => element.classList.toggle("is-active", i === act));
+      storyLastAct = act;
+    }
+    storyActs.forEach((element, i) => {
+      const [start, end] = ACT_RANGES[i];
+      element.style.setProperty("--ap", clamp((p - start) / (end - start)).toFixed(3));
+    });
+
+    storyWaves.forEach((wave) => { wave.level = listening && !rewriting ? 1 : 0.06; });
+    if (inView) wakeWaves();
+  }
+
+  if (story) {
+    story.classList.add("is-live");
+    languageHooks.push(() => {
+      storyLastText = null;
+      storyLastTone = -2;
+      updateStory(true);
+    });
+  }
+
+  /* ---------------- 滚动引擎 ---------------- */
+
+  const progressBar = document.querySelector(".scroll-progress");
+  const parallaxItems = new Set();
+  let scrollTicking = false;
+  let lastHeroProgress = -1;
+
+  function updateNavState() {
+    siteNav?.classList.toggle("is-scrolled", window.scrollY > 24);
+  }
+
+  function updateScroll() {
+    scrollTicking = false;
+    const y = window.scrollY;
+    const viewport = innerHeight;
+
+    updateNavState();
+
+    if (progressBar) {
+      const max = Math.max(1, root.scrollHeight - viewport);
+      progressBar.style.transform = `scaleX(${clamp(y / max).toFixed(4)})`;
+    }
+
+    // Hero：滚动 0.75 屏内完成「文字淡出 + 设备立起」
+    if (hero && !reduceMotion) {
+      const heroProgress = clamp(y / (viewport * 0.75));
+      if (Math.abs(heroProgress - lastHeroProgress) > 0.001) {
+        hero.style.setProperty("--hp", heroProgress.toFixed(4));
+        lastHeroProgress = heroProgress;
+      }
+    }
+
+    // 视差：元素中心偏离视口中心越远，位移越大（方向相反，制造景深）
+    if (!reduceMotion) {
+      parallaxItems.forEach((element) => {
+        const rect = element.getBoundingClientRect();
+        const offset = rect.top + rect.height / 2 - viewport / 2;
+        const factor = Number(element.dataset.parallax) || 0.05;
+        element.style.transform = `translate3d(0, ${(-offset * factor).toFixed(1)}px, 0)`;
+      });
+    }
+
+    updateStory(false);
+  }
+
+  function requestScrollUpdate() {
+    if (!scrollTicking) {
+      scrollTicking = true;
+      requestAnimationFrame(updateScroll);
+    }
+  }
+
+  /* ---------------- 数字计数 ---------------- */
+
+  const numberFormat = new Intl.NumberFormat("en-US");
+
+  function formatCount(element, value) {
+    return `${element.dataset.prefix || ""}${numberFormat.format(value)}`;
+  }
+
+  function runCounter(element) {
+    const target = Number(element.dataset.count);
+    const from = element.dataset.from ? Number(element.dataset.from) : 0;
+    const duration = 1700;
+    const start = performance.now();
+    function frame(now) {
+      const t = clamp((now - start) / duration);
+      const eased = 1 - Math.pow(1 - t, 4);
+      element.textContent = formatCount(element, Math.round(from + (target - from) * eased));
+      if (t < 1) requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+  }
+
   /* ---------------- 初始化 ---------------- */
 
   const initialLanguage = preferredLanguage();
@@ -166,13 +646,20 @@
   applyTheme(initialTheme, false);
 
   languageButton?.addEventListener("click", () => {
-    applyLanguage(root.dataset.lang === "zh" ? "en" : "zh", true);
-    applyTheme(root.dataset.theme, false);
+    const next = root.dataset.lang === "zh" ? "en" : "zh";
+    const swap = () => {
+      applyLanguage(next, true);
+      applyTheme(root.dataset.theme, false);
+    };
+    // 支持时以交叉淡化切换语言，整页文字不会「跳」
+    if (document.startViewTransition && !reduceMotion) {
+      document.startViewTransition(swap);
+    } else {
+      swap();
+    }
   });
 
-  themeButton?.addEventListener("click", () => {
-    applyTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
-  });
+  themeButton?.addEventListener("click", toggleThemeWithTransition);
 
   menuButton?.addEventListener("click", () => {
     setMenuOpen(menuButton.getAttribute("aria-expanded") !== "true");
@@ -190,30 +677,41 @@
     if (!storedTheme()) applyTheme(event.matches ? "dark" : "light", false);
   });
 
-  /* ---------------- 导航栏滚动状态 ---------------- */
+  window.addEventListener("scroll", requestScrollUpdate, { passive: true });
+  window.addEventListener("resize", () => {
+    requestScrollUpdate();
+    moveIndicator(activeNavLink);
+  });
+  updateScroll();
 
-  function updateNavState() {
-    siteNav?.classList.toggle("is-scrolled", window.scrollY > 24);
-  }
-  updateNavState();
-  window.addEventListener("scroll", updateNavState, { passive: true });
+  /* ---------------- 滚动显现、计数与离屏视频暂停 ---------------- */
 
-  /* ---------------- 滚动显现与离屏视频暂停 ---------------- */
+  const counters = Array.from(document.querySelectorAll("[data-count]"));
 
-  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-  if (reduceMotion || !("IntersectionObserver" in window)) {
+  if (reduceMotion || !canObserve) {
     document.querySelectorAll(".reveal").forEach((element) => {
       element.classList.add("is-visible");
     });
   } else {
+    // 首屏以下的计数器先归位到起点，进入视口时再滚动到目标值
+    counters.forEach((element) => {
+      if (element.getBoundingClientRect().top > innerHeight) {
+        const from = element.dataset.from ? Number(element.dataset.from) : 0;
+        element.textContent = formatCount(element, from);
+        element.dataset.pending = "true";
+      }
+    });
+
     const revealObserver = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("is-visible");
-            revealObserver.unobserve(entry.target);
-          }
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add("is-visible");
+          entry.target.querySelectorAll("[data-pending]").forEach((counter) => {
+            delete counter.dataset.pending;
+            runCounter(counter);
+          });
+          revealObserver.unobserve(entry.target);
         });
       },
       { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
@@ -222,6 +720,31 @@
       revealObserver.observe(element);
     });
 
+    // 视差只计算视口附近的元素
+    const parallaxObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) parallaxItems.add(entry.target);
+          else parallaxItems.delete(entry.target);
+        });
+        requestScrollUpdate();
+      },
+      { rootMargin: "20% 0px 20% 0px" }
+    );
+    document.querySelectorAll("[data-parallax]").forEach((element) => {
+      parallaxObserver.observe(element);
+    });
+
+    if (hero) {
+      new IntersectionObserver((entries) => {
+        heroVisible = entries[0].isIntersecting;
+        if (capsuleWave) capsuleWave.active = heroVisible;
+        if (heroVisible) wakeWaves();
+      }).observe(hero);
+    }
+  }
+
+  if (canObserve) {
     // 视频滚出视口时暂停，回来时恢复，省电且避免分散注意力
     const videoObserver = new IntersectionObserver(
       (entries) => {
@@ -240,4 +763,104 @@
       videoObserver.observe(video);
     });
   }
+
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) wakeWaves();
+  });
+
+  /* ---------------- 指针动效：光斑 / 倾斜 / 磁吸 / Hero 光斑 ---------------- */
+
+  if (finePointer && !reduceMotion) {
+    document.querySelectorAll(".spot").forEach((element) => {
+      element.addEventListener("pointermove", (event) => {
+        const rect = element.getBoundingClientRect();
+        element.style.setProperty("--mx", `${event.clientX - rect.left}px`);
+        element.style.setProperty("--my", `${event.clientY - rect.top}px`);
+      });
+    });
+
+    document.querySelectorAll(".tilt").forEach((element) => {
+      element.addEventListener("pointermove", (event) => {
+        const rect = element.getBoundingClientRect();
+        const x = (event.clientX - rect.left) / rect.width;
+        const y = (event.clientY - rect.top) / rect.height;
+        element.style.setProperty("--rx", `${((0.5 - y) * 9).toFixed(2)}deg`);
+        element.style.setProperty("--ry", `${((x - 0.5) * 11).toFixed(2)}deg`);
+      });
+      element.addEventListener("pointerleave", () => {
+        element.style.setProperty("--rx", "0deg");
+        element.style.setProperty("--ry", "0deg");
+      });
+    });
+
+    // 磁吸按钮：指针靠近时按钮被「吸」向指针，离开时弹簧回位
+    document.querySelectorAll(".magnetic").forEach((element) => {
+      element.addEventListener("pointermove", (event) => {
+        const rect = element.getBoundingClientRect();
+        const dx = (event.clientX - rect.left - rect.width / 2) * 0.22;
+        const dy = (event.clientY - rect.top - rect.height / 2) * 0.32;
+        element.style.transform = `translate(${dx.toFixed(1)}px, ${dy.toFixed(1)}px)`;
+      });
+      element.addEventListener("pointerleave", () => {
+        element.style.transform = "";
+      });
+    });
+
+    // Hero 光斑以插值追随指针，产生柔和的拖尾
+    if (hero) {
+      let targetX = 50;
+      let targetY = 30;
+      let currentX = 50;
+      let currentY = 30;
+      let spotFrame = 0;
+      const step = () => {
+        currentX += (targetX - currentX) * 0.08;
+        currentY += (targetY - currentY) * 0.08;
+        hero.style.setProperty("--hx", `${currentX.toFixed(2)}%`);
+        hero.style.setProperty("--hy", `${currentY.toFixed(2)}%`);
+        const settled = Math.abs(targetX - currentX) < 0.05 && Math.abs(targetY - currentY) < 0.05;
+        spotFrame = settled ? 0 : requestAnimationFrame(step);
+      };
+      hero.addEventListener("pointermove", (event) => {
+        const rect = hero.getBoundingClientRect();
+        targetX = ((event.clientX - rect.left) / rect.width) * 100;
+        targetY = ((event.clientY - rect.top) / rect.height) * 100;
+        if (!spotFrame) spotFrame = requestAnimationFrame(step);
+      });
+    }
+  }
+
+  /* ---------------- FAQ 展开高度过渡 ---------------- */
+
+  document.querySelectorAll(".faq-item").forEach((details) => {
+    const summary = details.querySelector("summary");
+    if (!summary || reduceMotion || !details.animate) return;
+    let animation = null;
+    let closing = false;
+
+    summary.addEventListener("click", (event) => {
+      event.preventDefault();
+      const startHeight = details.offsetHeight;
+      const borders = details.offsetHeight - details.clientHeight;
+
+      if (animation) {
+        animation.cancel();
+        animation = null;
+      }
+
+      closing = details.open && !closing;
+      if (!closing) details.open = true;
+      const endHeight = closing ? summary.offsetHeight + borders : details.offsetHeight;
+
+      animation = details.animate(
+        { height: [`${startHeight}px`, `${endHeight}px`] },
+        { duration: 460, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+      );
+      animation.onfinish = () => {
+        animation = null;
+        if (closing) details.open = false;
+        closing = false;
+      };
+    });
+  });
 })();
diff --git a/docs/compare/index.html b/docs/compare/index.html
index 162a98c..3419de5 100644
--- a/docs/compare/index.html
+++ b/docs/compare/index.html
@@ -5,11 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Redirecting · OSGKeyboard</title>
   <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/#vs">
-  <meta http-equiv="refresh" content="0; url=../#vs">
-  <script>location.replace("../#vs");</script>
+  <link rel="canonical" href="https://osg.osglab.com/#faq">
+  <meta http-equiv="refresh" content="0; url=../#faq">
+  <script>location.replace("../#faq");</script>
 </head>
 <body>
-  <p><a href="../#vs">OSGKeyboard — compare</a></p>
+  <p><a href="../#faq">OSGKeyboard — compare</a></p>
 </body>
 </html>
diff --git a/docs/en/index.html b/docs/en/index.html
index 104ba40..b97c2e3 100644
--- a/docs/en/index.html
+++ b/docs/en/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Redirecting · OSGKeyboard</title>
   <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/?lang=en">
+  <link rel="canonical" href="https://osg.osglab.com/?lang=en">
   <meta http-equiv="refresh" content="0; url=../?lang=en">
   <script>location.replace("../?lang=en");</script>
 </head>
diff --git a/docs/index.html b/docs/index.html
index 4bf7d22..25949fa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,31 +1,38 @@
 <!DOCTYPE html>
-<html lang="zh-Hans" data-theme="light" data-lang="zh">
+<html lang="zh-Hans" class="no-js" data-theme="light" data-lang="zh">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <title>OSGKeyboard — 开口即文字</title>
+  <title>OSGKeyboard｜AI 语音输入法 · 嘴替输入法 · iPhone / iPad / Mac</title>
   <meta
     name="description"
-    content="OSGKeyboard 是面向 iPhone、iPad 与 Mac 的 AI 语音键盘：开口即文字，语气像你；复制之后还能替你回复、总结、建待办。默认端侧识别，核心功能无需账号。"
-    data-zh-content="OSGKeyboard 是面向 iPhone、iPad 与 Mac 的 AI 语音键盘：开口即文字，语气像你；复制之后还能替你回复、总结、建待办。默认端侧识别，核心功能无需账号。"
-    data-en-content="OSGKeyboard is an AI voice keyboard for iPhone, iPad, and Mac: say it and it's typed, in a voice that sounds like you — and what you copy, it acts on. On-device by default, no account required."
+    content="OSGKeyboard 是面向 iPhone、iPad 与 Mac 的 AI 语音输入法，也是会学你语气的嘴替输入法：开口即文字，复制之后还能替你回复、建日程、写待办。默认端侧识别，核心功能无需账号，源码可见。"
+    data-zh-content="OSGKeyboard 是面向 iPhone、iPad 与 Mac 的 AI 语音输入法，也是会学你语气的嘴替输入法：开口即文字，复制之后还能替你回复、建日程、写待办。默认端侧识别，核心功能无需账号，源码可见。"
+    data-en-content="OSGKeyboard is an agentic keyboard and AI voice keyboard for iPhone, iPad, and Mac: on-device dictation, replies that sound like you, and actions on what you copy. No account required."
   >
-  <meta name="robots" content="index, follow">
+  <meta
+    name="keywords"
+    content="语音输入法,嘴替输入法,AI 输入法,AI 语音键盘,Agentic keyboard,agentic 键盘,iPhone 语音输入法,Mac 语音输入,端侧语音识别,OSGKeyboard"
+  >
+  <meta name="robots" content="index, follow, max-image-preview:large">
   <meta name="theme-color" content="#0e1013">
   <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/">
-  <link rel="alternate" hreflang="en" href="https://hkgood.github.io/OSGKeyboard/?lang=en">
-  <link rel="alternate" hreflang="x-default" href="https://hkgood.github.io/OSGKeyboard/">
+  <link rel="canonical" href="https://osg.osglab.com/">
+  <link rel="alternate" hreflang="zh-Hans" href="https://osg.osglab.com/">
+  <link rel="alternate" hreflang="en" href="https://osg.osglab.com/?lang=en">
+  <link rel="alternate" hreflang="x-default" href="https://osg.osglab.com/">
   <link rel="icon" href="assets/app-icon.png?v=20260927b" type="image/png">
+  <link rel="apple-touch-icon" href="assets/app-icon.png?v=20260927b">
   <meta property="og:type" content="website">
   <meta property="og:site_name" content="OSGKeyboard">
-  <meta property="og:url" content="https://hkgood.github.io/OSGKeyboard/">
+  <meta property="og:url" content="https://osg.osglab.com/">
+  <meta property="og:locale" content="zh_CN">
+  <meta property="og:locale:alternate" content="en_US">
   <meta
     property="og:title"
-    content="OSGKeyboard — 开口即文字"
-    data-zh-content="OSGKeyboard — 开口即文字"
-    data-en-content="OSGKeyboard — Say it. It’s typed."
+    content="OSGKeyboard｜AI 语音输入法 · 嘴替输入法"
+    data-zh-content="OSGKeyboard｜AI 语音输入法 · 嘴替输入法"
+    data-en-content="OSGKeyboard — Agentic Keyboard & AI Voice Keyboard"
   >
   <meta
     property="og:description"
@@ -33,19 +40,27 @@
     data-zh-content="开口即文字。会说你的话，会办你的事。默认端侧识别，核心功能无需账号。"
     data-en-content="Say it. It's typed. Speaks like you, acts for you. On-device by default, no account required."
   >
-  <meta property="og:image" content="https://hkgood.github.io/OSGKeyboard/assets/app-icon.png">
-  <meta name="twitter:card" content="summary">
+  <meta property="og:image" content="https://osg.osglab.com/assets/og-card.png">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="OSGKeyboard：AI 语音输入法与嘴替输入法，运行在 iPad、Mac 与 iPhone 上">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:image" content="https://osg.osglab.com/assets/og-card.png">
   <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&display=swap" rel="stylesheet">
   <!-- v= 查询串用于缓存刷新：GitHub Pages 对静态资源有 10 分钟缓存窗口，改版本号强制浏览器取新文件 -->
-  <link rel="stylesheet" href="assets/site.css?v=20260927">
+  <link rel="stylesheet" href="assets/site.css?v=20261001">
   <script>
-    // 首屏前确定主题，避免闪烁；无保存偏好时跟随系统
+    // 首屏前确定主题，避免闪烁；无保存偏好时跟随系统。
+    // .js 类只在脚本可用时出现：所有「先隐藏、再动效显现」的初始态都挂在它下面，
+    // 无 JavaScript 的访客与爬虫看到的是完整静态页面。
     (function () {
+      const root = document.documentElement;
       const saved = localStorage.getItem("osg-site-theme");
       const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      document.documentElement.dataset.theme = saved || (dark ? "dark" : "light");
+      root.dataset.theme = saved || (dark ? "dark" : "light");
+      root.classList.replace("no-js", "js");
     })();
   </script>
   <script type="application/ld+json">
@@ -53,14 +68,28 @@
     "@context": "https://schema.org",
     "@graph": [
       {
-        "@type": "SoftwareApplication",
+        "@type": "WebSite",
+        "@id": "https://osg.osglab.com/#website",
+        "url": "https://osg.osglab.com/",
         "name": "OSGKeyboard",
+        "alternateName": ["OSGKeyboard 语音输入法", "OSGKeyboard 嘴替输入法"],
+        "inLanguage": ["zh-Hans", "en"]
+      },
+      {
+        "@type": "SoftwareApplication",
+        "@id": "https://osg.osglab.com/#app",
+        "name": "OSGKeyboard",
+        "alternateName": ["AI 语音输入法", "嘴替输入法", "Agentic keyboard", "AI voice keyboard"],
         "operatingSystem": "iOS 26, iPadOS 26, macOS 15",
         "applicationCategory": "UtilitiesApplication",
+        "applicationSubCategory": "Keyboard",
         "softwareVersion": "2.1.0",
-        "description": "A source-available AI voice keyboard: on-device dictation by default, an AI assistant with preview-before-insert, a learned personal style that sounds like you, agentic clipboard skills that act on what you copy, Chinese and English typing, providers configured with your own API key, and optional managed credits.",
+        "description": "OSGKeyboard is an agentic keyboard and AI voice keyboard (语音输入法 / 嘴替输入法) for iPhone, iPad, and Mac: on-device dictation by default, an AI assistant with preview-before-insert, a learned personal style that sounds like you, agentic clipboard skills that act on what you copy, Chinese and English typing, providers configured with your own API key, and optional managed credits. Source available, not open source.",
         "downloadUrl": "https://apps.apple.com/app/osgkeyboard/id6781553267",
-        "url": "https://hkgood.github.io/OSGKeyboard/",
+        "installUrl": "https://apps.apple.com/app/osgkeyboard/id6781553267",
+        "url": "https://osg.osglab.com/",
+        "image": "https://osg.osglab.com/assets/og-card.png",
+        "screenshot": "https://osg.osglab.com/assets/hero-devices.png",
         "offers": {
           "@type": "Offer",
           "price": "0",
@@ -70,10 +99,10 @@
           "On-device iOS speech recognition by default",
           "Unified dictation and AI assistant with preview before insert",
           "Voice editing of the last inserted text",
+          "Learned personal speaking style and personalized replies in three tones",
+          "Agentic clipboard skills: reply, summarize, translate, to-dos, events, notes, navigation",
           "Chinese full pinyin and double pinyin typing",
           "English autocomplete, autocorrect, and next-word suggestions",
-          "Clipboard history and AI skills with native EventKit export",
-          "Learned personal speaking style and personalized replies",
           "Monthly usage calendar and personal dictionary",
           "Optional Sign in with Apple and managed credits on iOS and iPadOS",
           "Cloud speech and AI with your own API key",
@@ -87,26 +116,50 @@
         "mainEntity": [
           {
             "@type": "Question",
-            "name": "Does OSGKeyboard require an account?",
+            "name": "什么是嘴替输入法？",
             "acceptedAnswer": {
               "@type": "Answer",
-              "text": "You do not need an OSG account for on-device dictation or when using providers you configure yourself. Sign in with Apple is optional and is used for managed credits, purchases, and referrals."
+              "text": "嘴替输入法是能替你把话说好的输入法：你随口说出想法，它在保留你个人语气的前提下整理成得体的文字。OSGKeyboard 会从你确认过的真实听写中学习说话风格，并提供普通、正式、轻松三种回复语气，结果先预览、再插入。"
             }
           },
           {
             "@type": "Question",
-            "name": "Does OSGKeyboard upload recordings?",
+            "name": "什么是 Agentic 键盘（Agentic keyboard）？",
             "acceptedAnswer": {
               "@type": "Answer",
-              "text": "On-device recognition keeps audio on your device. Audio leaves it only when you explicitly choose a cloud speech-recognition provider configured with your own API key or cloud recognition paid for with managed credits."
+              "text": "Agentic 键盘不只负责输入文字，还能理解内容并替你完成下一步。在 OSGKeyboard 中复制一段文字后，本地语义分析会推荐最多 5 个相关操作，例如回复、总结、翻译、写待办、建日程或导航；待办与日程通过系统 EventKit 直接写入，推荐过程不会上传剪贴板原文。"
             }
           },
           {
             "@type": "Question",
-            "name": "Is OSGKeyboard open source?",
+            "name": "和系统自带的语音输入有什么区别？",
             "acceptedAnswer": {
               "@type": "Answer",
-              "text": "The code is source available under a non-open-source license for audit and personal, non-commercial local use; it is not licensed under the MIT License."
+              "text": "系统听写只负责把语音转成文字。OSGKeyboard 作为 AI 语音输入法，在端侧识别之外，还提供长按向 AI 提问并先预览再插入、口述修改上一次输入、学习你语气的个性润色、剪贴板 Agentic 技能，以及全拼与多种双拼的中英打字；在 Mac 上按住 Option 即可全局听写。"
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "必须注册 OSG 账号吗？",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "不需要。使用端侧听写或自行配置的服务商时，无需 OSG 账号。通过 Apple 登录仅用于托管积分、积分购买、邀请奖励和账号资料管理。"
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "录音会上传吗？",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "使用默认的端侧识别时，录音不会上传。只有你明确选择自行配置的云端识别或托管积分云端识别时，音频才会离开设备，并发送至相应云端服务进行处理。"
+            }
+          },
+          {
+            "@type": "Question",
+            "name": "OSGKeyboard 是开源软件吗？",
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": "不是。项目采用源码可见许可，允许个人学习与非商用本地使用；再分发、公开衍生版本和商业使用需要获得许可。"
             }
           }
         ]
@@ -145,6 +198,9 @@
       <symbol id="i-coin" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.3v9.4M15.2 9.2c-.6-.9-1.8-1.4-3.2-1.4-1.7 0-3 .9-3 2.2 0 3 6.1 1.6 6.1 4.4 0 1.4-1.4 2.3-3.1 2.3-1.4 0-2.6-.5-3.2-1.5"/></symbol>
       <symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4.5" width="18" height="15" rx="2.5"/><path d="M7 9.5 10 12l-3 2.5M12.5 14.8H17"/></symbol>
       <symbol id="i-arrow-out" viewBox="0 0 24 24"><path d="M7 17 17 7M9.2 7H17v7.8"/></symbol>
+      <symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 19V5.5M6.5 11 12 5.5l5.5 5.5"/></symbol>
+      <symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></symbol>
+      <symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.4 3.6 5.2 3.6 8.5s-1.2 6.1-3.6 8.5c-2.4-2.4-3.6-5.2-3.6-8.5S9.6 5.9 12 3.5Z"/></symbol>
     </defs>
   </svg>
 
@@ -155,15 +211,21 @@
     data-en="Skip to main content"
   >跳到主要内容</a>
 
+  <!-- 页面滚动进度：顶部一像素级的声波绿线 -->
+  <div class="scroll-progress" aria-hidden="true"></div>
+
   <header class="site-nav" id="siteNav">
     <nav class="nav-shell" aria-label="主导航" data-zh-label="主导航" data-en-label="Primary navigation">
       <a class="brand" href="#top" aria-label="OSGKeyboard">
         <img src="assets/app-icon.png?v=20260927b" width="30" height="30" alt="">
         <span>OSGKeyboard</span>
       </a>
-      <div class="nav-links">
-        <a href="#assistant" data-zh="体验" data-en="Experience">体验</a>
+      <div class="nav-links" id="navLinks">
+        <!-- 滑动指示器：跟随悬停与当前阅读区块移动 -->
+        <span class="nav-indicator" aria-hidden="true"></span>
+        <a href="#story" data-zh="体验" data-en="Experience">体验</a>
         <a href="#personal" data-zh="嘴替" data-en="Your voice">嘴替</a>
+        <a href="#skills" data-zh="技能" data-en="Skills">技能</a>
         <a href="#privacy" data-zh="隐私" data-en="Privacy">隐私</a>
         <a href="#platforms" data-zh="平台" data-en="Platforms">平台</a>
       </div>
@@ -187,37 +249,54 @@
       </div>
     </nav>
     <nav class="mobile-nav" id="mobileNav" aria-label="移动端导航" data-zh-label="移动端导航" data-en-label="Mobile navigation" hidden>
-      <a href="#assistant" data-zh="体验" data-en="Experience">体验</a>
+      <a href="#story" data-zh="体验" data-en="Experience">体验</a>
       <a href="#personal" data-zh="嘴替" data-en="Your voice">嘴替</a>
+      <a href="#skills" data-zh="技能" data-en="Skills">技能</a>
       <a href="#privacy" data-zh="隐私" data-en="Privacy">隐私</a>
       <a href="#platforms" data-zh="平台" data-en="Platforms">平台</a>
     </nav>
   </header>
 
   <main id="main">
-    <!-- Hero：深色产品舞台（两种主题下保持一致），文字居中 + 三端同框主视觉 -->
+    <!--
+      Hero：深色产品舞台（两种主题下保持一致）。
+      动效层次：极光背景缓慢漂移 → 标题逐字浮现 → 三端主视觉随滚动「立起」 → 语音胶囊实时转写。
+    -->
     <section class="hero" id="top">
-      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="hero-backdrop" aria-hidden="true">
+        <span class="aurora aurora-a"></span>
+        <span class="aurora aurora-b"></span>
+        <span class="aurora aurora-c"></span>
+        <span class="hero-rings"><i></i><i></i><i></i></span>
+        <span class="hero-grid"></span>
+        <span class="hero-spot"></span>
+      </div>
       <div class="hero-inner">
-        <p class="launch-pill reveal">
+        <p class="launch-pill hero-in" style="--d:.05s">
           <span class="launch-dot" aria-hidden="true"></span>
           <span data-zh="OSGKeyboard 2.1 · 为 iOS / iPadOS 26 打造" data-en="OSGKeyboard 2.1 · Built for iOS and iPadOS 26">
             OSGKeyboard 2.1 · 为 iOS / iPadOS 26 打造
           </span>
         </p>
-        <h1 class="reveal" style="--d:.06s">
-          <span data-zh="开口即文字。" data-en="Say it. It’s typed.">开口即文字。</span>
-          <span class="hero-muted" data-zh="会说你的话，会办你的事。" data-en="Speaks like you. Acts for you.">会说你的话，会办你的事。</span>
-        </h1>
-        <p
-          class="hero-copy reveal"
+        <h1
+          class="hero-kicker hero-in"
           style="--d:.12s"
-          data-zh="一把 AI 语音键盘：听写、问 AI、中英打字，在同一个输入界面完成。它学习你的语气替你表达，也能在复制之后替你行动。默认端侧识别，核心功能无需账号。"
-          data-en="An AI voice keyboard: dictation, AI answers, and bilingual typing in one input surface. It learns to sound like you — and takes action on what you copy. On-device by default, no account required."
-        >一把 AI 语音键盘：听写、问 AI、中英打字，在同一个输入界面完成。它学习你的语气替你表达，也能在复制之后替你行动。默认端侧识别，核心功能无需账号。</p>
-        <div class="hero-actions reveal" style="--d:.18s">
+          data-zh="AI 语音输入法 · 嘴替输入法 · Agentic 键盘"
+          data-en="Agentic keyboard · AI voice keyboard for iPhone, iPad &amp; Mac"
+        >AI 语音输入法 · 嘴替输入法 · Agentic 键盘</h1>
+        <p class="hero-slogan">
+          <span class="slogan-main" data-split data-zh="开口即文字。" data-en="Say it. It’s typed.">开口即文字。</span>
+          <span class="slogan-sub" data-split data-zh="会说你的话，会办你的事。" data-en="Speaks like you. Acts for you.">会说你的话，会办你的事。</span>
+        </p>
+        <p
+          class="hero-copy hero-in"
+          style="--d:.7s"
+          data-zh="一把 AI 语音输入法：听写、问 AI、中英打字在同一个键盘完成。它是会学你语气的嘴替输入法，也是复制之后就能替你行动的 Agentic 键盘。默认端侧识别，核心功能无需账号。"
+          data-en="An agentic AI voice keyboard: dictation, AI answers, and bilingual typing in one place. It learns to write like you — and acts on what you copy. On-device by default, no account required."
+        >一把 AI 语音输入法：听写、问 AI、中英打字在同一个键盘完成。它是会学你语气的嘴替输入法，也是复制之后就能替你行动的 Agentic 键盘。默认端侧识别，核心功能无需账号。</p>
+        <div class="hero-actions hero-in" style="--d:.82s">
           <a
-            class="store-badge"
+            class="store-badge magnetic"
             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"
@@ -235,7 +314,7 @@
             >
           </a>
           <a
-            class="ghost-action"
+            class="ghost-action magnetic"
             href="https://testflight.apple.com/join/c2Bz4qK9"
             rel="noopener"
           >
@@ -249,46 +328,89 @@
             data-en="View source"
           >查看源码</a>
         </div>
-        <ul class="hero-trust reveal" style="--d:.24s" aria-label="产品承诺" data-zh-label="产品承诺" data-en-label="Product promises">
+        <ul class="hero-trust hero-in" style="--d:.94s" aria-label="产品承诺" data-zh-label="产品承诺" data-en-label="Product promises">
           <li><svg class="i" aria-hidden="true"><use href="#i-chip"/></svg><span data-zh="端侧优先" data-en="On-device first">端侧优先</span></li>
           <li><svg class="i" aria-hidden="true"><use href="#i-user-off"/></svg><span data-zh="核心功能无需账号" data-en="No account required">核心功能无需账号</span></li>
           <li><svg class="i" aria-hidden="true"><use href="#i-code"/></svg><span data-zh="源码可见" data-en="Source available">源码可见</span></li>
         </ul>
       </div>
-      <figure class="hero-devices reveal" style="--d:.3s">
-        <img
-          src="assets/hero-devices.png"
-          width="1600"
-          height="716"
-          data-zh-alt="OSGKeyboard 在 iPad、Mac 与 iPhone 上同时使用"
-          data-en-alt="OSGKeyboard running on iPad, Mac, and iPhone at the same time"
-          alt="OSGKeyboard 在 iPad、Mac 与 iPhone 上同时使用"
-          fetchpriority="high"
-        >
+      <figure class="hero-stage hero-in" style="--d:1s">
+        <!-- 三端主视觉：随滚动从后仰角度「立起」并放大到正视 -->
+        <div class="hero-devices">
+          <img
+            src="assets/hero-devices.png"
+            width="1600"
+            height="716"
+            data-zh-alt="OSGKeyboard 语音输入法在 iPad、Mac 与 iPhone 上同时使用"
+            data-en-alt="OSGKeyboard AI voice keyboard running on iPad, Mac, and iPhone at the same time"
+            alt="OSGKeyboard 语音输入法在 iPad、Mac 与 iPhone 上同时使用"
+            fetchpriority="high"
+          >
+        </div>
+        <!-- 语音胶囊：模拟键盘的录音态，声波 + 流式转写循环演示三种能力 -->
+        <div class="voice-capsule" aria-hidden="true">
+          <span class="capsule-orb"><svg class="i"><use href="#i-mic"/></svg></span>
+          <span class="capsule-wave" data-wave="22"></span>
+          <span class="capsule-body">
+            <span class="capsule-tag">听写</span>
+            <span class="capsule-line">帮我订周五晚上七点的位子，四个人</span><span class="caret"></span>
+          </span>
+        </div>
       </figure>
+      <a class="scroll-cue" href="#ways" aria-label="向下滚动" data-zh-label="向下滚动" data-en-label="Scroll down"><span></span></a>
     </section>
 
-    <!-- 四种输入方式：锚点速览条 -->
+    <!-- 能力跑马灯：无限循环，悬停暂停；第二组仅用于无缝衔接，对读屏隐藏 -->
+    <div class="marquee" aria-label="核心能力" data-zh-label="核心能力" data-en-label="Core capabilities">
+      <div class="marquee-track">
+        <ul>
+          <li data-zh="语音输入法" data-en="Voice keyboard">语音输入法</li>
+          <li data-zh="嘴替输入法" data-en="Replies in your voice">嘴替输入法</li>
+          <li data-zh="Agentic 键盘" data-en="Agentic keyboard">Agentic 键盘</li>
+          <li data-zh="端侧识别" data-en="On-device recognition">端侧识别</li>
+          <li data-zh="长按问 AI" data-en="Hold to ask AI">长按问 AI</li>
+          <li data-zh="中英混输" data-en="Bilingual typing">中英混输</li>
+          <li data-zh="全拼与双拼" data-en="Pinyin &amp; double pinyin">全拼与双拼</li>
+          <li data-zh="剪贴板技能" data-en="Clipboard skills">剪贴板技能</li>
+          <li data-zh="Mac 全局听写" data-en="Mac global dictation">Mac 全局听写</li>
+          <li data-zh="无需账号" data-en="No account required">无需账号</li>
+        </ul>
+        <ul aria-hidden="true">
+          <li data-zh="语音输入法" data-en="Voice keyboard">语音输入法</li>
+          <li data-zh="嘴替输入法" data-en="Replies in your voice">嘴替输入法</li>
+          <li data-zh="Agentic 键盘" data-en="Agentic keyboard">Agentic 键盘</li>
+          <li data-zh="端侧识别" data-en="On-device recognition">端侧识别</li>
+          <li data-zh="长按问 AI" data-en="Hold to ask AI">长按问 AI</li>
+          <li data-zh="中英混输" data-en="Bilingual typing">中英混输</li>
+          <li data-zh="全拼与双拼" data-en="Pinyin &amp; double pinyin">全拼与双拼</li>
+          <li data-zh="剪贴板技能" data-en="Clipboard skills">剪贴板技能</li>
+          <li data-zh="Mac 全局听写" data-en="Mac global dictation">Mac 全局听写</li>
+          <li data-zh="无需账号" data-en="No account required">无需账号</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 四种输入方式：锚点速览条（光斑跟随 + 轻微 3D 倾斜 + 图标微动效） -->
     <section class="section ways-section" id="ways">
       <div class="section-inner">
         <div class="ways-grid">
-          <a class="way-card reveal" href="#assistant">
-            <svg class="i" aria-hidden="true"><use href="#i-mic"/></svg>
+          <a class="way-card spot tilt reveal" href="#assistant">
+            <span class="way-icon way-icon-mic"><svg class="i" aria-hidden="true"><use href="#i-mic"/></svg></span>
             <h3 data-zh="语音听写" data-en="Dictation">语音听写</h3>
             <p data-zh="轻点麦克风，端侧识别实时上屏。" data-en="Tap the mic; on-device recognition types as you speak.">轻点麦克风，端侧识别实时上屏。</p>
           </a>
-          <a class="way-card reveal" href="#assistant" style="--d:.06s">
-            <svg class="i" aria-hidden="true"><use href="#i-sparkle"/></svg>
+          <a class="way-card spot tilt reveal" href="#assistant" style="--d:.06s">
+            <span class="way-icon way-icon-sparkle"><svg class="i" aria-hidden="true"><use href="#i-sparkle"/></svg></span>
             <h3 data-zh="长按问 AI" data-en="Hold to ask AI">长按问 AI</h3>
             <p data-zh="回答先预览，确认再插入。" data-en="Answers stream into a preview — insert when ready.">回答先预览，确认再插入。</p>
           </a>
-          <a class="way-card reveal" href="#personal" style="--d:.12s">
-            <svg class="i" aria-hidden="true"><use href="#i-bubble"/></svg>
+          <a class="way-card spot tilt reveal" href="#personal" style="--d:.12s">
+            <span class="way-icon way-icon-bubble"><svg class="i" aria-hidden="true"><use href="#i-bubble"/></svg></span>
             <h3 data-zh="AI 嘴替" data-en="Your voice double">AI 嘴替</h3>
             <p data-zh="学习你的语气，替你表达。" data-en="Learns your voice and speaks for you.">学习你的语气，替你表达。</p>
           </a>
-          <a class="way-card reveal" href="#skills" style="--d:.18s">
-            <svg class="i" aria-hidden="true"><use href="#i-paste"/></svg>
+          <a class="way-card spot tilt reveal" href="#skills" style="--d:.18s">
+            <span class="way-icon way-icon-paste"><svg class="i" aria-hidden="true"><use href="#i-paste"/></svg></span>
             <h3 data-zh="替你行动" data-en="Acts for you">替你行动</h3>
             <p data-zh="复制之后，直接行动。" data-en="Copy, then it takes action.">复制之后，直接行动。</p>
           </a>
@@ -296,32 +418,176 @@
       </div>
     </section>
 
+    <!--
+      滚动叙事：三幕剧「说 → 像你 → 替你做」。
+      舞台随滚动钉住，滚动进度直接驱动手机里的听写、语气切换、发送与 Agentic 动作；
+      左侧文案是真实可索引的内容，右侧手机为装饰性演示（对读屏隐藏）。
+    -->
+    <section class="section story-section" id="story">
+      <div class="section-inner center-heading reveal">
+        <p class="eyebrow" data-zh="Agentic 语音输入法" data-en="The agentic voice keyboard">Agentic 语音输入法</p>
+        <h2 data-split data-zh="会听、会说，还会替你做事。" data-en="It listens, speaks like you, and gets things done.">会听、会说，还会替你做事。</h2>
+        <p
+          data-zh="一次真实的聊天，三个动作完成：语音输入法负责听写，嘴替输入法负责把话说好，Agentic 键盘负责下一步。向下滚动，看它怎样工作。"
+          data-en="One real conversation, three moves: the voice keyboard listens, the reply engine says it in your voice, and the agentic keyboard takes the next step. Scroll to watch it work."
+        >一次真实的聊天，三个动作完成：语音输入法负责听写，嘴替输入法负责把话说好，Agentic 键盘负责下一步。向下滚动，看它怎样工作。</p>
+      </div>
+      <div class="story" id="storyStage">
+        <div class="story-sticky">
+          <div class="story-layout">
+            <ol class="story-acts">
+              <li class="story-act is-active" data-act="0">
+                <span class="act-index">01</span>
+                <div class="act-body">
+                  <p class="act-kicker" data-zh="语音输入法" data-en="Voice keyboard">语音输入法</p>
+                  <h3 data-zh="开口，就是文字。" data-en="Speak, and it’s text.">开口，就是文字。</h3>
+                  <p data-zh="轻点麦克风，端侧识别边说边上屏；录音默认不离开设备。说完还能口述修改刚才那句话。" data-en="Tap the mic and on-device recognition types as you talk; audio stays on the device by default. Revise the last sentence by voice if you change your mind.">轻点麦克风，端侧识别边说边上屏；录音默认不离开设备。说完还能口述修改刚才那句话。</p>
+                  <span class="act-bar" aria-hidden="true"><i></i></span>
+                </div>
+              </li>
+              <li class="story-act" data-act="1">
+                <span class="act-index">02</span>
+                <div class="act-body">
+                  <p class="act-kicker" data-zh="嘴替输入法" data-en="Replies in your voice">嘴替输入法</p>
+                  <h3 data-zh="随口一说，发出去很得体。" data-en="Say it casually. Send it well.">随口一说，发出去很得体。</h3>
+                  <p data-zh="嘴替输入法学习你确认过的真实表达，再用普通、正式或轻松的语气替你把话说好。先预览、再插入，口吻始终是你的。" data-en="It learns from writing you have confirmed, then says it better — normal, formal, or playful. Preview first, insert when ready; it still sounds like you.">嘴替输入法学习你确认过的真实表达，再用普通、正式或轻松的语气替你把话说好。先预览、再插入，口吻始终是你的。</p>
+                  <span class="act-bar" aria-hidden="true"><i></i></span>
+                </div>
+              </li>
+              <li class="story-act" data-act="2">
+                <span class="act-index">03</span>
+                <div class="act-body">
+                  <p class="act-kicker" data-zh="Agentic 键盘" data-en="Agentic keyboard">Agentic 键盘</p>
+                  <h3 data-zh="看懂内容，替你行动。" data-en="It reads the room, then acts.">看懂内容，替你行动。</h3>
+                  <p data-zh="复制一段地址或时间，本地语义分析就知道下一步：导航、建日程、写待办或回复，最多推荐 5 个相关操作，日程经 EventKit 直接写入。" data-en="Copy an address or a time and on-device analysis knows what comes next — navigate, add an event, create a to-do, or reply. Up to five relevant actions; events are written natively through EventKit.">复制一段地址或时间，本地语义分析就知道下一步：导航、建日程、写待办或回复，最多推荐 5 个相关操作，日程经 EventKit 直接写入。</p>
+                  <span class="act-bar" aria-hidden="true"><i></i></span>
+                </div>
+              </li>
+            </ol>
+
+            <div class="story-device" aria-hidden="true">
+              <div class="phone">
+                <div class="phone-screen">
+                  <div class="phone-status">
+                    <span>9:41</span>
+                    <span class="phone-island"></span>
+                    <span class="phone-signal"><i></i><i></i><i></i></span>
+                  </div>
+                  <!-- 日历通知横幅：第三幕结尾从顶部落下 -->
+                  <div class="event-banner">
+                    <span class="event-icon"><svg class="i"><use href="#i-event"/></svg></span>
+                    <span class="event-copy">
+                      <small data-zh="已添加到日历" data-en="Added to Calendar">已添加到日历</small>
+                      <b data-zh="晚餐 · 小林" data-en="Dinner with Alex">晚餐 · 小林</b>
+                      <span data-zh="周五 19:00 · 南京西路 1266 号" data-en="Fri 7:00 PM · 1266 W Nanjing Rd">周五 19:00 · 南京西路 1266 号</span>
+                    </span>
+                    <span class="event-check"><svg class="i"><use href="#i-check"/></svg></span>
+                  </div>
+                  <div class="chat-head">
+                    <span class="chat-avatar" data-zh="林" data-en="A">林</span>
+                    <span class="chat-name">
+                      <b data-zh="小林" data-en="Alex">小林</b>
+                      <small>iMessage</small>
+                    </span>
+                  </div>
+                  <div class="chat-body">
+                    <div class="bubble in b-ask" data-zh="周五晚上一起吃饭吗？" data-en="Dinner on Friday night?">周五晚上一起吃饭吗？</div>
+                    <div class="bubble out b-sent" data-zh="好呀！周五七点不见不散，位子包在我身上～" data-en="Yes! Friday at 7 — leave the table to me.">好呀！周五七点不见不散，位子包在我身上～</div>
+                    <div class="bubble in b-addr">
+                      <span data-zh="好！地址发你：南京西路 1266 号 3 楼" data-en="Great — 1266 W Nanjing Rd, 3F">好！地址发你：南京西路 1266 号 3 楼</span>
+                      <span class="copy-toast"><svg class="i"><use href="#i-check"/></svg><span data-zh="已复制" data-en="Copied">已复制</span></span>
+                    </div>
+                  </div>
+                  <div class="compose">
+                    <span class="compose-field">
+                      <span class="compose-placeholder">iMessage</span>
+                      <span class="compose-text" id="storyText"></span><span class="caret"></span>
+                    </span>
+                    <span class="compose-send"><svg class="i"><use href="#i-arrow-up"/></svg></span>
+                  </div>
+                  <div class="kb">
+                    <div class="kb-bar">
+                      <span class="kb-status"><i></i><span data-zh="正在聆听…" data-en="Listening…">正在聆听…</span></span>
+                      <span class="kb-tones">
+                        <span data-tone="0" data-zh="普通" data-en="Normal">普通</span>
+                        <span data-tone="1" data-zh="正式" data-en="Formal">正式</span>
+                        <span data-tone="2" data-zh="轻松" data-en="Playful">轻松</span>
+                        <em data-zh="学自你的表达" data-en="Learned from you">学自你的表达</em>
+                      </span>
+                      <span class="kb-skills">
+                        <span><svg class="i"><use href="#i-nav"/></svg><span data-zh="导航" data-en="Navigate">导航</span></span>
+                        <span class="skill-event"><svg class="i"><use href="#i-event"/></svg><span data-zh="日程" data-en="Event">日程</span></span>
+                        <span><svg class="i"><use href="#i-reply"/></svg><span data-zh="回复" data-en="Reply">回复</span></span>
+                        <span><svg class="i"><use href="#i-task"/></svg><span data-zh="待办" data-en="To-do">待办</span></span>
+                      </span>
+                    </div>
+                    <div class="kb-main">
+                      <span class="kb-wave" data-wave="11"></span>
+                      <span class="kb-mic"><svg class="i"><use href="#i-mic"/></svg></span>
+                      <span class="kb-wave kb-wave-r" data-wave="11"></span>
+                    </div>
+                    <div class="kb-keys">
+                      <span class="kb-key"><svg class="i"><use href="#i-globe"/></svg></span>
+                      <span class="kb-key kb-space" data-zh="空格" data-en="space">空格</span>
+                      <span class="kb-key kb-return" data-zh="发送" data-en="send">发送</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 数字带：进入视口时滚动计数（无 JS 时直接显示最终数值） -->
+    <section class="numbers-section" aria-label="产品数字" data-zh-label="产品数字" data-en-label="By the numbers">
+      <div class="section-inner numbers-grid">
+        <div class="number reveal">
+          <strong data-count="5">5</strong>
+          <span data-zh="种中文输入方案：全拼与四种双拼" data-en="Chinese input schemes: full pinyin plus four double pinyin">种中文输入方案：全拼与四种双拼</span>
+        </div>
+        <div class="number reveal" style="--d:.06s">
+          <strong data-count="40000" data-prefix="≈">≈40,000</strong>
+          <span data-zh="离线英文词表，补全、纠错与预测" data-en="offline English words for completion, correction, and prediction">离线英文词表，补全、纠错与预测</span>
+        </div>
+        <div class="number reveal" style="--d:.12s">
+          <strong data-count="2500">2,500</strong>
+          <span data-zh="个听写字符，即可生成你的专属风格" data-en="dictated characters to unlock a style that sounds like you">个听写字符，即可生成你的专属风格</span>
+        </div>
+        <div class="number reveal" style="--d:.18s">
+          <strong data-count="0" data-from="99">0</strong>
+          <span data-zh="个第三方追踪 SDK，击键从不上传" data-en="third-party tracking SDKs — keystrokes are never uploaded">个第三方追踪 SDK，击键从不上传</span>
+        </div>
+      </div>
+    </section>
+
     <!-- 语音 + AI 助手：实机视频为视觉主体 -->
     <section class="section feature-section" id="assistant">
       <div class="section-inner split-layout">
         <div class="feature-copy reveal">
-          <p class="eyebrow" data-zh="语音 + AI 助手" data-en="Voice + AI assistant">语音 + AI 助手</p>
-          <h2 data-zh="先预览，再插入。" data-en="Preview first. Insert when ready.">先预览，再插入。</h2>
+          <p class="eyebrow" data-zh="语音输入法 + AI 助手" data-en="Voice keyboard + AI assistant">语音输入法 + AI 助手</p>
+          <h2 data-split data-zh="先预览，再插入。" data-en="Preview first. Insert when ready.">先预览，再插入。</h2>
           <p
             data-zh="轻点麦克风开始听写，长按直接向 AI 提问。回答流式显示在键盘里，确认后才进入输入框——每一步都在你的掌控之中。"
             data-en="Tap the mic to dictate, or hold it to ask AI. Answers stream into the keyboard and reach the text field only when you confirm — every step stays under your control."
           >轻点麦克风开始听写，长按直接向 AI 提问。回答流式显示在键盘里，确认后才进入输入框——每一步都在你的掌控之中。</p>
           <ol class="step-list">
-            <li>
+            <li class="reveal" style="--d:.1s">
               <span class="step-index">01</span>
               <div>
                 <h3 data-zh="说出需求" data-en="Say what you need">说出需求</h3>
                 <p data-zh="轻点听写，长按提问，语音与 AI 共用一个入口。" data-en="Tap to dictate, hold to ask — voice and AI share one entry.">轻点听写，长按提问，语音与 AI 共用一个入口。</p>
               </div>
             </li>
-            <li>
+            <li class="reveal" style="--d:.18s">
               <span class="step-index">02</span>
               <div>
                 <h3 data-zh="流式生成" data-en="Watch it stream">流式生成</h3>
                 <p data-zh="回答实时显示，可随时停下、修改或重来。" data-en="Answers appear live; stop, revise, or retry at any time.">回答实时显示，可随时停下、修改或重来。</p>
               </div>
             </li>
-            <li>
+            <li class="reveal" style="--d:.26s">
               <span class="step-index">03</span>
               <div>
                 <h3 data-zh="确认插入" data-en="Confirm the insert">确认插入</h3>
@@ -330,7 +596,7 @@
             </li>
           </ol>
         </div>
-        <div class="media-frame reveal" style="--d:.12s">
+        <div class="media-frame unmask reveal" data-parallax="0.06" style="--d:.12s">
           <video
             src="assets/whats-new/ai-voice-assistant-zh.mp4"
             data-zh-src="assets/whats-new/ai-voice-assistant-zh.mp4"
@@ -340,27 +606,27 @@
             loop
             playsinline
             preload="metadata"
-            data-zh-label="OSGKeyboard 语音助手实机演示"
-            data-en-label="OSGKeyboard voice assistant recorded on device"
-            aria-label="OSGKeyboard 语音助手实机演示"
+            data-zh-label="OSGKeyboard 语音输入法与 AI 助手实机演示"
+            data-en-label="OSGKeyboard voice keyboard and AI assistant recorded on device"
+            aria-label="OSGKeyboard 语音输入法与 AI 助手实机演示"
           ></video>
         </div>
       </div>
     </section>
 
-    <!-- AI 嘴替：2.1 核心卖点，真实界面卡片 + 实机视频 -->
+    <!-- 嘴替输入法：2.1 核心卖点，真实界面卡片 + 实机视频 -->
     <section class="section personal-section section-alt" id="personal">
       <div class="section-inner">
         <div class="center-heading reveal">
-          <p class="eyebrow" data-zh="AI 嘴替" data-en="Your AI voice double">AI 嘴替</p>
-          <h2 data-zh="表达更清楚，语气还是你的。" data-en="Clearer writing. Still your voice.">表达更清楚，语气还是你的。</h2>
+          <p class="eyebrow" data-zh="嘴替输入法" data-en="AI replies in your voice">嘴替输入法</p>
+          <h2 data-split data-zh="表达更清楚，语气还是你的。" data-en="Clearer writing. Still your voice.">表达更清楚，语气还是你的。</h2>
           <p
-            data-zh="从你确认过的真实输入中学习，而不是套用模板。所有偏好与词库只保存在本机。"
+            data-zh="嘴替输入法从你确认过的真实输入中学习，而不是套用模板。所有偏好与词库只保存在本机。"
             data-en="It learns from input you have actually confirmed — not from templates. Every preference and term stays on your device."
-          >从你确认过的真实输入中学习，而不是套用模板。所有偏好与词库只保存在本机。</p>
+          >嘴替输入法从你确认过的真实输入中学习，而不是套用模板。所有偏好与词库只保存在本机。</p>
         </div>
         <div class="personal-grid">
-          <article class="personal-card reveal">
+          <article class="personal-card spot reveal">
             <div class="personal-media">
               <img
                 src="assets/whats-new/personal-style-card-zh.png"
@@ -376,7 +642,7 @@
             <h3 data-zh="专属说话风格" data-en="A style that sounds like you">专属说话风格</h3>
             <p data-zh="累积 2,500 个有效听写字符即可生成；优先学习你反复出现的口述与明确修改，保存前需你确认。" data-en="Unlocks after 2,500 effective dictated characters. It prioritizes your recurring phrasing and explicit edits, and nothing is saved without your review.">累积 2,500 个有效听写字符即可生成；优先学习你反复出现的口述与明确修改，保存前需你确认。</p>
           </article>
-          <article class="personal-card reveal" style="--d:.08s">
+          <article class="personal-card spot reveal" style="--d:.08s">
             <div class="personal-media">
               <video
                 src="assets/whats-new/smart-reply-zh.mp4"
@@ -387,15 +653,15 @@
                 loop
                 playsinline
                 preload="metadata"
-                data-zh-label="个性回复实机演示"
+                data-zh-label="嘴替输入法个性回复实机演示"
                 data-en-label="Personalized replies recorded on device"
-                aria-label="个性回复实机演示"
+                aria-label="嘴替输入法个性回复实机演示"
               ></video>
             </div>
             <h3 data-zh="个性回复，三种语气" data-en="Replies in three tones">个性回复，三种语气</h3>
             <p data-zh="普通、正式、轻松趣味，一键切换；回复偏好与听写偏好分别学习，选择反馈仅保留在本机。" data-en="Ordinary, formal, or playful — one tap apart. Reply and dictation preferences are learned separately, and choice feedback stays on device.">普通、正式、轻松趣味，一键切换；回复偏好与听写偏好分别学习，选择反馈仅保留在本机。</p>
           </article>
-          <article class="personal-card reveal" style="--d:.16s">
+          <article class="personal-card spot reveal" style="--d:.16s">
             <div class="personal-media">
               <img
                 src="assets/whats-new/monthly-usage-zh.png"
@@ -415,24 +681,24 @@
       </div>
     </section>
 
-    <!-- Agentic 剪贴板技能 -->
+    <!-- Agentic 键盘：剪贴板技能 -->
     <section class="section feature-section" id="skills">
       <div class="section-inner split-layout">
         <div class="feature-copy reveal">
-          <p class="eyebrow" data-zh="Agentic 技能" data-en="Agentic skills">Agentic 技能</p>
-          <h2 data-zh="复制之后，它替你做。" data-en="Copy it. Consider it done.">复制之后，它替你做。</h2>
+          <p class="eyebrow" data-zh="Agentic 键盘" data-en="Agentic keyboard">Agentic 键盘</p>
+          <h2 data-split data-zh="复制之后，它替你做。" data-en="Copy it. Consider it done.">复制之后，它替你做。</h2>
           <p
             data-zh="复制一段文字，本地语义分析会理解它该去哪——回复、总结、翻译、待办、日程、导航，从完整技能目录中推荐最多 5 个相关操作，全程不上传剪贴板原文。"
             data-en="Copy any text and on-device semantic analysis understands where it should go — reply, summarize, translate, to-dos, events, navigation — picking up to five relevant actions from the full skill catalog, without the clipboard text ever leaving the device."
           >复制一段文字，本地语义分析会理解它该去哪——回复、总结、翻译、待办、日程、导航，从完整技能目录中推荐最多 5 个相关操作，全程不上传剪贴板原文。</p>
           <div class="skill-chips" aria-label="内置技能" data-zh-label="内置技能" data-en-label="Built-in skills">
-            <span><svg class="i" aria-hidden="true"><use href="#i-reply"/></svg><span data-zh="回复" data-en="Reply">回复</span></span>
-            <span><svg class="i" aria-hidden="true"><use href="#i-summarize"/></svg><span data-zh="总结" data-en="Summarize">总结</span></span>
-            <span><svg class="i" aria-hidden="true"><use href="#i-translate"/></svg><span data-zh="翻译" data-en="Translate">翻译</span></span>
-            <span><svg class="i" aria-hidden="true"><use href="#i-task"/></svg><span data-zh="待办" data-en="To-dos">待办</span></span>
-            <span><svg class="i" aria-hidden="true"><use href="#i-event"/></svg><span data-zh="日程" data-en="Events">日程</span></span>
-            <span><svg class="i" aria-hidden="true"><use href="#i-note"/></svg><span data-zh="备忘录" data-en="Notes">备忘录</span></span>
-            <span><svg class="i" aria-hidden="true"><use href="#i-nav"/></svg><span data-zh="导航" data-en="Navigate">导航</span></span>
+            <span style="--ci:0"><svg class="i" aria-hidden="true"><use href="#i-reply"/></svg><span data-zh="回复" data-en="Reply">回复</span></span>
+            <span style="--ci:1"><svg class="i" aria-hidden="true"><use href="#i-summarize"/></svg><span data-zh="总结" data-en="Summarize">总结</span></span>
+            <span style="--ci:2"><svg class="i" aria-hidden="true"><use href="#i-translate"/></svg><span data-zh="翻译" data-en="Translate">翻译</span></span>
+            <span style="--ci:3"><svg class="i" aria-hidden="true"><use href="#i-task"/></svg><span data-zh="待办" data-en="To-dos">待办</span></span>
+            <span style="--ci:4"><svg class="i" aria-hidden="true"><use href="#i-event"/></svg><span data-zh="日程" data-en="Events">日程</span></span>
+            <span style="--ci:5"><svg class="i" aria-hidden="true"><use href="#i-note"/></svg><span data-zh="备忘录" data-en="Notes">备忘录</span></span>
+            <span style="--ci:6"><svg class="i" aria-hidden="true"><use href="#i-nav"/></svg><span data-zh="导航" data-en="Navigate">导航</span></span>
           </div>
           <ul class="quiet-list">
             <li data-zh="待办与日程经原生 EventKit 写入，日历仅申请「仅写入」权限" data-en="To-dos and events write natively through EventKit; Calendar is write-only">待办与日程经原生 EventKit 写入，日历仅申请「仅写入」权限</li>
@@ -440,7 +706,7 @@
             <li data-zh="可创建自定义技能：名称、图标、提示词与可选快捷指令" data-en="Create custom skills with a name, icon, prompt, and an optional Shortcut">可创建自定义技能：名称、图标、提示词与可选快捷指令</li>
           </ul>
         </div>
-        <div class="media-frame reveal" style="--d:.12s">
+        <div class="media-frame unmask reveal" data-parallax="0.06" style="--d:.12s">
           <video
             src="assets/whats-new/clipboard-skills-zh.mp4"
             data-zh-src="assets/whats-new/clipboard-skills-zh.mp4"
@@ -450,9 +716,9 @@
             loop
             playsinline
             preload="metadata"
-            data-zh-label="OSGKeyboard 剪贴板技能实机演示"
-            data-en-label="OSGKeyboard clipboard skills recorded on device"
-            aria-label="OSGKeyboard 剪贴板技能实机演示"
+            data-zh-label="OSGKeyboard Agentic 剪贴板技能实机演示"
+            data-en-label="OSGKeyboard agentic clipboard skills recorded on device"
+            aria-label="OSGKeyboard Agentic 剪贴板技能实机演示"
           ></video>
         </div>
       </div>
@@ -463,7 +729,7 @@
       <div class="section-inner split-layout reverse">
         <div class="feature-copy reveal">
           <p class="eyebrow" data-zh="中英打字" data-en="Chinese and English typing">中英打字</p>
-          <h2 data-zh="不方便说话时，打字同样顺手。" data-en="When speaking is not convenient, typing stays effortless.">不方便说话时，打字同样顺手。</h2>
+          <h2 data-split data-zh="不方便说话时，打字同样顺手。" data-en="When speaking is not convenient, typing stays effortless.">不方便说话时，打字同样顺手。</h2>
           <div class="mini-feature">
             <h3><svg class="i" aria-hidden="true"><use href="#i-translate"/></svg><span data-zh="中文：输入方式由你选" data-en="Chinese: your scheme, your choice">中文：输入方式由你选</span></h3>
             <p data-zh="全拼、自然码、小鹤、微软与搜狗双拼；模糊音、简拼排序、展开候选、数字与滑动选词、中英混输。" data-en="Full pinyin plus Ziranma, Xiaohe, Microsoft, and Sogou double pinyin — with fuzzy initials, candidate paging, number and swipe selection, and mixed input.">全拼、自然码、小鹤、微软与搜狗双拼；模糊音、简拼排序、展开候选、数字与滑动选词、中英混输。</p>
@@ -478,7 +744,7 @@
             data-en="One personal dictionary feeds Chinese candidates, English suggestions, speech biasing, and polish protection."
           >一个个性词库，同时参与中文候选、英文建议、语音偏置与润色保护。</p>
         </div>
-        <div class="media-frame reveal" style="--d:.12s">
+        <div class="media-frame unmask reveal" data-parallax="0.06" style="--d:.12s">
           <video
             src="assets/whats-new/keyboard-typing.mp4"
             autoplay
@@ -494,32 +760,47 @@
       </div>
     </section>
 
-    <!-- 三种服务路径：端侧放大为主信任状（深色区块） -->
+    <!-- 三种服务路径：端侧放大为主信任状（深色区块），顶部徽记演示「数据留在设备内」 -->
     <section class="section privacy-section" id="privacy">
       <div class="section-inner">
         <div class="center-heading inverse reveal">
+          <div class="device-emblem" aria-hidden="true">
+            <svg viewBox="0 0 160 160">
+              <circle class="emblem-orbit" cx="80" cy="80" r="66"/>
+              <g class="emblem-spin"><circle cx="80" cy="14" r="3.2"/><circle cx="146" cy="80" r="2.2"/></g>
+              <g class="emblem-spin emblem-spin-rev"><circle cx="80" cy="146" r="2.6"/><circle cx="14" cy="80" r="1.8"/></g>
+              <rect class="emblem-device" x="52" y="34" width="56" height="92" rx="14"/>
+              <g class="emblem-wave">
+                <rect x="62" y="72" width="4" height="16" rx="2"/>
+                <rect x="70" y="66" width="4" height="28" rx="2"/>
+                <rect x="78" y="60" width="4" height="40" rx="2"/>
+                <rect x="86" y="66" width="4" height="28" rx="2"/>
+                <rect x="94" y="72" width="4" height="16" rx="2"/>
+              </g>
+            </svg>
+          </div>
           <p class="eyebrow" data-zh="隐私与选择" data-en="Privacy and choice">隐私与选择</p>
-          <h2 data-zh="数据如何处理，由你决定。" data-en="You choose how your data is processed.">数据如何处理，由你决定。</h2>
+          <h2 data-split data-zh="数据如何处理，由你决定。" data-en="You choose how your data is processed.">数据如何处理，由你决定。</h2>
           <p
             data-zh="默认优先使用端侧能力。需要云端识别或 AI 功能时，可配置自己的 API 密钥，或选择托管积分服务。"
             data-en="On-device processing is the default. For cloud recognition or AI features, bring your own API key or use optional managed credits."
           >默认优先使用端侧能力。需要云端识别或 AI 功能时，可配置自己的 API 密钥，或选择托管积分服务。</p>
         </div>
         <div class="service-paths">
-          <article class="path-primary reveal">
+          <article class="path-primary spot reveal">
             <span class="path-badge" data-zh="默认" data-en="Default">默认</span>
             <svg class="i path-icon" aria-hidden="true"><use href="#i-chip"/></svg>
             <h3 data-zh="端侧优先" data-en="On-device first">端侧优先</h3>
             <p data-zh="iPhone 与 iPad 默认使用 Apple 设备端语音识别；搭载 Apple 芯片的 Mac 默认运行本地 Qwen3 MLX 模型。原始录音不离开设备。" data-en="iPhone and iPad use Apple’s on-device speech recognition by default; Apple Silicon Macs run a local Qwen3 MLX model. Raw audio never leaves the device.">iPhone 与 iPad 默认使用 Apple 设备端语音识别；搭载 Apple 芯片的 Mac 默认运行本地 Qwen3 MLX 模型。原始录音不离开设备。</p>
             <span class="path-note" data-zh="无需 OSG 账号 · 音频留在设备" data-en="No OSG account · Audio stays on device">无需 OSG 账号 · 音频留在设备</span>
           </article>
-          <article class="reveal" style="--d:.08s">
+          <article class="spot reveal" style="--d:.08s">
             <svg class="i path-icon" aria-hidden="true"><use href="#i-key"/></svg>
             <h3 data-zh="自备服务商" data-en="Your own API key">自备服务商</h3>
             <p data-zh="配置你选择的语音识别或 AI 服务商，请求直达服务商；凭证保存在系统钥匙串。" data-en="Configure the speech or AI provider you choose; requests go directly to them, and credentials stay in the system Keychain.">配置你选择的语音识别或 AI 服务商，请求直达服务商；凭证保存在系统钥匙串。</p>
             <span class="path-note" data-zh="无需 OSG 账号" data-en="No OSG account">无需 OSG 账号</span>
           </article>
-          <article class="reveal" style="--d:.16s">
+          <article class="spot reveal" style="--d:.16s">
             <svg class="i path-icon" aria-hidden="true"><use href="#i-coin"/></svg>
             <h3 data-zh="托管积分" data-en="Managed credits">托管积分</h3>
             <p data-zh="在 iPhone 与 iPad 上，可通过 Apple 登录使用托管语音与 AI，无需自行管理密钥。" data-en="On iPhone and iPad, optionally sign in with Apple to use managed speech and AI — no keys to manage.">在 iPhone 与 iPad 上，可通过 Apple 登录使用托管语音与 AI，无需自行管理密钥。</p>
@@ -546,7 +827,7 @@
       <div class="section-inner split-layout">
         <div class="feature-copy reveal">
           <p class="eyebrow" data-zh="可选账号与积分" data-en="Optional account and credits">可选账号与积分</p>
-          <h2 data-zh="账号是选项，不是门槛。" data-en="An account is an option, not a gate.">账号是选项，不是门槛。</h2>
+          <h2 data-split data-zh="账号是选项，不是门槛。" data-en="An account is an option, not a gate.">账号是选项，不是门槛。</h2>
           <p
             data-zh="本地听写和自备服务商始终可以独立使用。登录只在你需要托管积分时发生。"
             data-en="On-device dictation and your own providers always work on their own. Sign-in only happens when you want managed credits."
@@ -558,7 +839,7 @@
             <li data-zh="账号令牌不下发给键盘扩展；应用内可注销账号" data-en="Account tokens never reach the keyboard extension; deletion is available in-app">账号令牌不下发给键盘扩展；应用内可注销账号</li>
           </ul>
         </div>
-        <div class="media-frame reveal" style="--d:.12s">
+        <div class="media-frame unmask reveal" data-parallax="0.06" style="--d:.12s">
           <img
             src="assets/whats-new/osg-credits-zh.png"
             data-zh-src="assets/whats-new/osg-credits-zh.png"
@@ -577,11 +858,11 @@
     <section class="section platforms-section section-alt" id="platforms">
       <div class="section-inner">
         <div class="center-heading reveal">
-          <p class="eyebrow" data-zh="跨平台" data-en="Across platforms">跨平台</p>
-          <h2 data-zh="在 iPhone、iPad 上输入，在 Mac 上听写。" data-en="Type on iPhone and iPad. Dictate on Mac.">在 iPhone、iPad 上输入，在 Mac 上听写。</h2>
+          <p class="eyebrow" data-zh="iPhone 与 Mac 语音输入法" data-en="Voice keyboard for iPhone and Mac">iPhone 与 Mac 语音输入法</p>
+          <h2 data-split data-zh="在 iPhone、iPad 上输入，在 Mac 上听写。" data-en="Type on iPhone and iPad. Dictate on Mac.">在 iPhone、iPad 上输入，在 Mac 上听写。</h2>
         </div>
         <div class="platform-grid">
-          <article class="platform-card reveal">
+          <article class="platform-card spot reveal">
             <div class="media-frame">
               <img
                 src="assets/screenshots/zh/light/iphone-home.png"
@@ -597,7 +878,7 @@
             <h3 data-zh="一把键盘，覆盖完整输入流程" data-en="A complete input workspace in one 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>
           </article>
-          <article class="platform-card reveal" style="--d:.1s">
+          <article class="platform-card spot reveal" style="--d:.1s">
             <div class="media-frame">
               <img
                 src="assets/screenshots/zh/light/mac-recording.png"
@@ -637,14 +918,32 @@
       </div>
     </section>
 
-    <!-- FAQ -->
+    <!-- FAQ：展开 / 收起带高度过渡；前三问定义产品品类，同时作为 FAQPage 结构化数据 -->
     <section class="section faq-section section-alt" id="faq">
       <div class="section-inner faq-layout">
-        <div class="reveal">
+        <div class="faq-heading reveal">
           <p class="eyebrow" data-zh="常见问题" data-en="FAQ">常见问题</p>
-          <h2 data-zh="隐私和产品限制，提前说清楚。" data-en="Clear answers about privacy and product limits.">隐私和产品限制，提前说清楚。</h2>
+          <h2 data-split data-zh="品类、隐私和限制，提前说清楚。" data-en="The category, privacy, and limits — answered up front.">品类、隐私和限制，提前说清楚。</h2>
         </div>
         <div class="faq-list">
+          <details class="faq-item reveal">
+            <summary data-zh="什么是嘴替输入法？" data-en="What is a “zuiti” (speak-for-me) keyboard?">什么是嘴替输入法？</summary>
+            <p data-zh="嘴替输入法是能替你把话说好的输入法：你随口说出想法，它在保留你个人语气的前提下整理成得体的文字。OSGKeyboard 会从你确认过的真实听写中学习说话风格，并提供普通、正式、轻松三种回复语气，结果先预览、再插入。" data-en="“Zuiti” (嘴替) is Chinese internet slang for someone who says what you mean, better than you would. OSGKeyboard learns from dictation you have confirmed, then turns casual speech into polished text in your own tone — normal, formal, or playful — and shows a preview before inserting.">
+              嘴替输入法是能替你把话说好的输入法：你随口说出想法，它在保留你个人语气的前提下整理成得体的文字。OSGKeyboard 会从你确认过的真实听写中学习说话风格，并提供普通、正式、轻松三种回复语气，结果先预览、再插入。
+            </p>
+          </details>
+          <details class="faq-item reveal">
+            <summary data-zh="什么是 Agentic 键盘（Agentic keyboard）？" data-en="What is an agentic keyboard?">什么是 Agentic 键盘（Agentic keyboard）？</summary>
+            <p data-zh="Agentic 键盘不只负责输入文字，还能理解内容并替你完成下一步。在 OSGKeyboard 中复制一段文字后，本地语义分析会推荐最多 5 个相关操作，例如回复、总结、翻译、写待办、建日程或导航；待办与日程通过系统 EventKit 直接写入，推荐过程不会上传剪贴板原文。" data-en="An agentic keyboard does more than enter text — it understands content and takes the next step for you. In OSGKeyboard, when you copy text, on-device semantic analysis suggests up to five relevant actions such as reply, summarize, translate, create a to-do, add an event, or navigate. To-dos and events are written natively through EventKit, and suggestions never upload the clipboard text.">
+              Agentic 键盘不只负责输入文字，还能理解内容并替你完成下一步。在 OSGKeyboard 中复制一段文字后，本地语义分析会推荐最多 5 个相关操作，例如回复、总结、翻译、写待办、建日程或导航；待办与日程通过系统 EventKit 直接写入，推荐过程不会上传剪贴板原文。
+            </p>
+          </details>
+          <details class="faq-item reveal">
+            <summary data-zh="和系统自带的语音输入有什么区别？" data-en="How is it different from built-in dictation?">和系统自带的语音输入有什么区别？</summary>
+            <p data-zh="系统听写只负责把语音转成文字。OSGKeyboard 作为 AI 语音输入法，在端侧识别之外，还提供长按向 AI 提问并先预览再插入、口述修改上一次输入、学习你语气的个性润色、剪贴板 Agentic 技能，以及全拼与多种双拼的中英打字；在 Mac 上按住 Option 即可全局听写。" data-en="Built-in dictation turns speech into text. As an AI voice keyboard, OSGKeyboard adds hold-to-ask AI with preview before insert, voice edits to your last insertion, a personal style that sounds like you, agentic clipboard skills, and Chinese and English typing with full and double pinyin. On Mac, hold Option to dictate anywhere.">
+              系统听写只负责把语音转成文字。OSGKeyboard 作为 AI 语音输入法，在端侧识别之外，还提供长按向 AI 提问并先预览再插入、口述修改上一次输入、学习你语气的个性润色、剪贴板 Agentic 技能，以及全拼与多种双拼的中英打字；在 Mac 上按住 Option 即可全局听写。
+            </p>
+          </details>
           <details class="faq-item reveal">
             <summary data-zh="必须注册 OSG 账号吗？" data-en="Do I need an OSG account?">必须注册 OSG 账号吗？</summary>
             <p data-zh="不需要。使用端侧听写或自行配置的服务商时，无需 OSG 账号。通过 Apple 登录仅用于托管积分、积分购买、邀请奖励和账号资料管理。" data-en="No. You do not need an OSG account for on-device dictation or when using providers you configure yourself. Sign in with Apple is used only for managed credits, credit purchases, referral rewards, and profile management.">
@@ -679,20 +978,28 @@
       </div>
     </section>
 
-    <!-- 下载 CTA：与 Hero 呼应的深色舞台 -->
+    <!-- 下载 CTA：与 Hero 呼应的深色舞台，背景声波沿路径流动 -->
     <section class="section download-section" id="download">
       <div class="section-inner">
         <div class="download-panel reveal">
-          <div>
+          <div class="download-backdrop" aria-hidden="true">
+            <span class="aurora aurora-a"></span>
+            <span class="aurora aurora-b"></span>
+            <svg class="download-wave" viewBox="0 0 1200 200" preserveAspectRatio="none">
+              <path d="M0 100 C 100 100 120 40 200 40 S 300 160 400 160 S 500 20 600 20 S 700 180 800 180 S 900 60 1000 60 S 1100 100 1200 100"/>
+              <path d="M0 100 C 100 100 120 70 200 70 S 300 130 400 130 S 500 50 600 50 S 700 150 800 150 S 900 85 1000 85 S 1100 100 1200 100"/>
+            </svg>
+          </div>
+          <div class="download-copy">
             <p class="eyebrow" data-zh="开口即文字" data-en="Say it. It’s typed.">开口即文字</p>
-            <h2 data-zh="下一段文字，开口就能输入。" data-en="Your next sentence starts with your voice.">下一段文字，开口就能输入。</h2>
+            <h2 data-split data-zh="下一段文字，开口就能输入。" data-en="Your next sentence starts with your voice.">下一段文字，开口就能输入。</h2>
             <p data-zh="先使用免费的端侧核心功能；需要时，再配置自己的 API 密钥或选择托管积分服务。" data-en="Start with the free, on-device core. Add your own API key or managed credits only when needed.">
               先使用免费的端侧核心功能；需要时，再配置自己的 API 密钥或选择托管积分服务。
             </p>
           </div>
           <div class="download-actions">
             <a
-              class="store-badge"
+              class="store-badge magnetic"
               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"
@@ -709,7 +1016,7 @@
                 height="48"
               >
             </a>
-            <a class="store-badge" href="https://github.com/hkgood/OSGKeyboard/releases/download/v1.1-mac/OSGKeyboard-1.1.dmg">
+            <a class="store-badge magnetic" 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"
@@ -722,7 +1029,7 @@
               >
             </a>
             <a
-              class="outline-action"
+              class="outline-action magnetic"
               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"
@@ -738,8 +1045,8 @@
 
   <footer class="site-footer">
     <div class="footer-inner">
-      <span data-zh="OSGKeyboard 2.1.0 · 源码可见，非开源软件" data-en="OSGKeyboard 2.1.0 · Source-available, not open source">
-        OSGKeyboard 2.1.0 · 源码可见，非开源软件
+      <span data-zh="OSGKeyboard 2.1.0 · AI 语音输入法 · 源码可见，非开源软件" data-en="OSGKeyboard 2.1.0 · AI voice keyboard · Source-available, not open source">
+        OSGKeyboard 2.1.0 · AI 语音输入法 · 源码可见，非开源软件
       </span>
       <div class="footer-links">
         <a href="privacy/" data-zh="隐私政策" data-en="Privacy">隐私政策</a>
@@ -750,6 +1057,6 @@
     </div>
   </footer>
 
-  <script src="assets/site.js?v=20260927"></script>
+  <script src="assets/site.js?v=20261001"></script>
 </body>
 </html>
diff --git a/docs/install/index.html b/docs/install/index.html
index db54982..166fd46 100644
--- a/docs/install/index.html
+++ b/docs/install/index.html
@@ -5,11 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Redirecting · OSGKeyboard</title>
   <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/#start">
-  <meta http-equiv="refresh" content="0; url=../#start">
-  <script>location.replace("../#start");</script>
+  <link rel="canonical" href="https://osg.osglab.com/#download">
+  <meta http-equiv="refresh" content="0; url=../#download">
+  <script>location.replace("../#download");</script>
 </head>
 <body>
-  <p><a href="../#start">OSGKeyboard — setup</a></p>
+  <p><a href="../#download">OSGKeyboard — setup</a></p>
 </body>
 </html>
diff --git a/docs/llms.txt b/docs/llms.txt
index b7ad222..1085a50 100644
--- a/docs/llms.txt
+++ b/docs/llms.txt
@@ -1,21 +1,29 @@
 # OSGKeyboard
 
-> OSGKeyboard is a source-available voice and typing tool for iPhone, iPad, and Mac. The iOS keyboard combines on-device dictation, Chinese and English typing, a unified AI assistant, clipboard skills, and optional managed credits. On Mac, hold Option for global dictation.
+> OSGKeyboard is an agentic keyboard and AI voice keyboard (Chinese: AI 语音输入法 / 嘴替输入法) for iPhone, iPad, and Mac. The iOS keyboard combines on-device dictation, a unified AI assistant, a learned personal style that sounds like you, agentic clipboard skills, Chinese and English typing, and optional managed credits. On Mac, hold Option for global dictation. It is source available, not open source.
 
-Current repository version: 2.0.1 (build 90). Later work is listed under CHANGELOG [Unreleased].
+Current repository version: 2.1.0 (build 110). Later work is listed under CHANGELOG [Unreleased].
+
+## Category definitions
+
+- AI voice keyboard (AI 语音输入法): OSGKeyboard turns speech into text with on-device recognition by default, lets you hold the mic to ask AI with preview before insert, and lets you revise the last insertion by voice.
+- "Zuiti" keyboard (嘴替输入法): "嘴替" is Chinese internet slang for someone who says what you mean, better than you would. OSGKeyboard learns from dictation you have confirmed and rewrites casual speech in your own tone — normal, formal, or playful — with a preview before insert.
+- Agentic keyboard (Agentic 键盘): a keyboard that understands content and takes the next step. When you copy text, OSGKeyboard's on-device semantic analysis suggests up to five relevant actions (reply, summarize, translate, to-do, event, notes, navigation); to-dos and events are written natively through EventKit, and suggestions do not upload the clipboard text.
 
 ## Product facts
 
 - Name: OSGKeyboard
-- Tagline (EN): Speak it. It's typed.
+- Tagline (EN): Say it. It's typed.
 - Tagline (ZH): 开口即文字
+- Category (ZH): AI 语音输入法 · 嘴替输入法 · Agentic 键盘
+- Category (EN): Agentic keyboard · AI voice keyboard
 - Platforms: iPhone and iPad on iOS/iPadOS 26+; Apple Silicon Mac on macOS 15+
 - App Store: https://apps.apple.com/app/osgkeyboard/id6781553267
 - App Store China: https://apps.apple.com/cn/app/osgkeyboard/id6781553267
 - Public Mac DMG: historical signed/notarized version 1.1
 - Source: https://github.com/hkgood/OSGKeyboard
-- Website: https://hkgood.github.io/OSGKeyboard/
-- Privacy: https://hkgood.github.io/OSGKeyboard/privacy/
+- Website: https://osg.osglab.com/
+- Privacy: https://osg.osglab.com/privacy/
 - License: source available for personal, non-commercial local use; not open source or MIT
 - Contact: rocky.hk@gmail.com
 
@@ -55,10 +63,12 @@ Local dictation and user-configured providers never require an OSGKeyboard accou
 
 ## Documentation
 
-- Home (ZH): https://hkgood.github.io/OSGKeyboard/
-- Home (EN): https://hkgood.github.io/OSGKeyboard/?lang=en
-- Setup: https://hkgood.github.io/OSGKeyboard/#start
-- Privacy policy: https://hkgood.github.io/OSGKeyboard/privacy/
+- Home (ZH): https://osg.osglab.com/
+- Home (EN): https://osg.osglab.com/?lang=en
+- How it works (dictation → reply in your voice → agentic action): https://osg.osglab.com/#story
+- FAQ: https://osg.osglab.com/#faq
+- Download: https://osg.osglab.com/#download
+- Privacy policy: https://osg.osglab.com/privacy/
 - README (ZH): https://github.com/hkgood/OSGKeyboard/blob/main/README.md
 - README (EN): https://github.com/hkgood/OSGKeyboard/blob/main/README.en.md
 - Changelog: https://github.com/hkgood/OSGKeyboard/blob/main/CHANGELOG.md
@@ -66,4 +76,4 @@ Local dictation and user-configured providers never require an OSGKeyboard accou
 
 ## Citation guidance
 
-Describe OSGKeyboard as source available, not open source. Do not say that all features are free: local core functionality is free, user-configured providers may charge separately, and managed credits are optional consumable purchases. Do not describe the public Mac 1.1 DMG as the same version as the current 2.0 source tree.
+Describe OSGKeyboard as source available, not open source. Do not say that all features are free: local core functionality is free, user-configured providers may charge separately, and managed credits are optional consumable purchases. Do not describe the public Mac 1.1 DMG as the same version as the current 2.x source tree.
diff --git a/docs/mac-dictation/index.html b/docs/mac-dictation/index.html
index ce21872..c482f2c 100644
--- a/docs/mac-dictation/index.html
+++ b/docs/mac-dictation/index.html
@@ -5,11 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Redirecting · OSGKeyboard</title>
   <meta name="robots" content="noindex">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/">
-  <meta http-equiv="refresh" content="0; url=../">
-  <script>location.replace("../");</script>
+  <link rel="canonical" href="https://osg.osglab.com/#platforms">
+  <meta http-equiv="refresh" content="0; url=../#platforms">
+  <script>location.replace("../#platforms");</script>
 </head>
 <body>
-  <p><a href="../">OSGKeyboard</a></p>
+  <p><a href="../#platforms">OSGKeyboard — Mac 语音输入</a></p>
 </body>
 </html>
diff --git a/docs/privacy.html b/docs/privacy.html
index f066c63..9637a07 100644
--- a/docs/privacy.html
+++ b/docs/privacy.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Privacy Policy · OSGKeyboard</title>
   <meta name="robots" content="noindex, follow">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/privacy/">
+  <link rel="canonical" href="https://osg.osglab.com/privacy/">
   <meta http-equiv="refresh" content="0; url=privacy/">
   <script>
     window.location.replace("privacy/" + window.location.hash);
diff --git a/docs/privacy/index.html b/docs/privacy/index.html
index e1d2cae..fc5ddcb 100644
--- a/docs/privacy/index.html
+++ b/docs/privacy/index.html
@@ -6,11 +6,11 @@
   <title>Privacy Policy · OSGKeyboard</title>
   <meta name="description" content="OSGKeyboard privacy policy: no account required for core use, on-device speech recognition by default, optional user-configured or managed cloud services, limited first-party analytics with opt-out, no sale of personal data.">
   <meta name="robots" content="index, follow">
-  <link rel="canonical" href="https://hkgood.github.io/OSGKeyboard/privacy/">
+  <link rel="canonical" href="https://osg.osglab.com/privacy/">
   <link rel="icon" href="../assets/app-icon.png" type="image/png">
   <meta property="og:title" content="OSGKeyboard Privacy Policy">
   <meta property="og:description" content="No account required for core use. On-device by default, with optional user-configured or managed cloud services.">
-  <meta property="og:url" content="https://hkgood.github.io/OSGKeyboard/privacy/">
+  <meta property="og:url" content="https://osg.osglab.com/privacy/">
   <meta property="og:type" content="website">
   <style>
     :root { color-scheme: light dark; --bg: #f7faf8; --ink: #102218; --muted: #5c6c62; --line: rgba(16, 34, 24, 0.12); --green: #238b48; }
diff --git a/docs/robots.txt b/docs/robots.txt
index e543410..011629a 100644
--- a/docs/robots.txt
+++ b/docs/robots.txt
@@ -23,4 +23,4 @@ Allow: /
 User-agent: Bytespider
 Allow: /
 
-Sitemap: https://hkgood.github.io/OSGKeyboard/sitemap.xml
+Sitemap: https://osg.osglab.com/sitemap.xml
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index fff122f..b5f0539 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -1,18 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-        xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        xmlns:xhtml="http://www.w3.org/1999/xhtml"
+        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
   <url>
-    <loc>https://hkgood.github.io/OSGKeyboard/</loc>
-    <lastmod>2026-08-20</lastmod>
+    <loc>https://osg.osglab.com/</loc>
+    <lastmod>2026-10-01</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
-    <xhtml:link rel="alternate" hreflang="zh-Hans" href="https://hkgood.github.io/OSGKeyboard/"/>
-    <xhtml:link rel="alternate" hreflang="en" href="https://hkgood.github.io/OSGKeyboard/?lang=en"/>
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://hkgood.github.io/OSGKeyboard/"/>
+    <xhtml:link rel="alternate" hreflang="zh-Hans" href="https://osg.osglab.com/"/>
+    <xhtml:link rel="alternate" hreflang="en" href="https://osg.osglab.com/?lang=en"/>
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://osg.osglab.com/"/>
+    <image:image>
+      <image:loc>https://osg.osglab.com/assets/hero-devices.png</image:loc>
+    </image:image>
+    <image:image>
+      <image:loc>https://osg.osglab.com/assets/og-card.png</image:loc>
+    </image:image>
   </url>
   <url>
-    <loc>https://hkgood.github.io/OSGKeyboard/privacy/</loc>
-    <lastmod>2026-08-20</lastmod>
+    <loc>https://osg.osglab.com/privacy/</loc>
+    <lastmod>2026-10-01</lastmod>
     <changefreq>yearly</changefreq>
     <priority>0.5</priority>
   </url>