From 8fee4d8492ba5b3499c06108d8ab3fde58863571 Mon Sep 17 00:00:00 2001
From: Rocky <72559939+hkgood@users.noreply.github.com>
Date: Thu, 20 Aug 2026 13:47:50 +0800
Subject: [PATCH] fix(site): refine landing page visual hierarchy

---
 docs/assets/badges/macos-en.svg |    2 +-
 docs/assets/site.css            | 1432 +++++++++++++++++++------------
 docs/assets/site.js             |   87 +-
 docs/index.html                 |  247 ++++--
 4 files changed, 1090 insertions(+), 678 deletions(-)

diff --git a/docs/assets/badges/macos-en.svg b/docs/assets/badges/macos-en.svg
index 7a75484..0ca0712 100644
--- a/docs/assets/badges/macos-en.svg
+++ b/docs/assets/badges/macos-en.svg
@@ -7,5 +7,5 @@
     <path d="M17.5 29.5h8M21.5 24v5.5M17.5 20.5h8"/>
   </g>
   <text x="40" y="14" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="7.2">DOWNLOAD NOW</text>
-  <text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15.5" font-weight="600">macOS version</text>
+  <text x="40" y="29" fill="#fff" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="14" font-weight="600">macOS version</text>
 </svg>
diff --git a/docs/assets/site.css b/docs/assets/site.css
index 2f9b1ae..76cae57 100644
--- a/docs/assets/site.css
+++ b/docs/assets/site.css
@@ -1,38 +1,44 @@
 :root {
   color-scheme: light dark;
-  --bg: #f7faf8;
-  --bg-elevated: rgba(255, 255, 255, 0.74);
-  --bg-solid: #ffffff;
-  --ink: #102218;
-  --muted: #5c6c62;
-  --faint: #819087;
-  --line: rgba(16, 34, 24, 0.1);
-  --green: #3aa05a;
-  --green-bright: #72f49d;
-  --green-deep: #19783b;
-  --cyan: #52d9cc;
-  --violet: #9281ff;
-  --shadow: 0 24px 80px rgba(16, 65, 35, 0.13);
-  --radius-xl: 36px;
-  --radius-lg: 26px;
-  --radius-md: 18px;
-  --content: min(1180px, calc(100vw - 40px));
+  --canvas: #f5f6f3;
+  --surface: #ffffff;
+  --surface-subtle: #eceeea;
+  --surface-inverse: #121412;
+  --text: #171a17;
+  --text-secondary: #606660;
+  --text-tertiary: #898f8a;
+  --stroke: rgba(23, 26, 23, 0.11);
+  --stroke-strong: rgba(23, 26, 23, 0.18);
+  --accent: #32794a;
+  --accent-hover: #28643c;
+  --accent-soft: rgba(50, 121, 74, 0.1);
+  --on-accent: #ffffff;
+  --inverse-text: #f4f6f4;
+  --inverse-secondary: #aeb4af;
+  --inverse-stroke: rgba(255, 255, 255, 0.12);
+  --radius-xl: 28px;
+  --radius-lg: 22px;
+  --radius-md: 16px;
+  --content: min(1120px, calc(100vw - 48px));
 }
 
 html[data-theme="dark"] {
-  --bg: #06100a;
-  --bg-elevated: rgba(11, 24, 16, 0.76);
-  --bg-solid: #0d1911;
-  --ink: #f1fff5;
-  --muted: #a6b9ac;
-  --faint: #738278;
-  --line: rgba(222, 255, 233, 0.12);
-  --green: #60d982;
-  --green-bright: #8affaa;
-  --green-deep: #38b963;
-  --cyan: #5ceee0;
-  --violet: #a99dff;
-  --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
+  --canvas: #0d0f0e;
+  --surface: #151816;
+  --surface-subtle: #1c1f1d;
+  --surface-inverse: #f1f3f1;
+  --text: #f1f3f1;
+  --text-secondary: #a6aca7;
+  --text-tertiary: #777d78;
+  --stroke: rgba(255, 255, 255, 0.1);
+  --stroke-strong: rgba(255, 255, 255, 0.17);
+  --accent: #73b889;
+  --accent-hover: #88c79a;
+  --accent-soft: rgba(115, 184, 137, 0.12);
+  --on-accent: #102016;
+  --inverse-text: #f4f6f4;
+  --inverse-secondary: #aeb4af;
+  --inverse-stroke: rgba(255, 255, 255, 0.12);
 }
 
 * {
@@ -42,36 +48,25 @@ html[data-theme="dark"] {
 html {
   scroll-behavior: smooth;
   scroll-padding-top: 88px;
-  background: var(--bg);
+  background: var(--canvas);
 }
 
 body {
   margin: 0;
   overflow-x: hidden;
-  background:
-    radial-gradient(circle at 20% 12%, rgba(58, 160, 90, 0.1), transparent 26rem),
-    radial-gradient(circle at 80% 36%, rgba(82, 217, 204, 0.08), transparent 30rem),
-    var(--bg);
-  color: var(--ink);
-  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display",
-    "PingFang SC", "Helvetica Neue", sans-serif;
-  line-height: 1.55;
+  background: var(--canvas);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
+    "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
-body::before {
-  position: fixed;
-  z-index: -1;
-  inset: 0;
-  background-image:
-    linear-gradient(var(--line) 1px, transparent 1px),
-    linear-gradient(90deg, var(--line) 1px, transparent 1px);
-  background-size: 68px 68px;
-  content: "";
-  opacity: 0.2;
-  pointer-events: none;
-  mask-image: linear-gradient(to bottom, black, transparent 76%);
+html[data-lang="en"] body {
+  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Text",
+    "Helvetica Neue", Arial, sans-serif;
 }
 
 a {
@@ -89,21 +84,33 @@ button {
   font: inherit;
 }
 
-img,
-video {
+img {
   display: block;
   max-width: 100%;
 }
 
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
 .skip-link {
   position: fixed;
   z-index: 100;
   top: 12px;
   left: 12px;
-  padding: 10px 14px;
+  padding: 9px 14px;
   border-radius: 999px;
-  background: var(--ink);
-  color: var(--bg);
+  background: var(--text);
+  color: var(--canvas);
   transform: translateY(-160%);
 }
 
@@ -125,23 +132,22 @@ video {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 58px;
-  padding: 8px 10px 8px 16px;
-  border: 1px solid var(--line);
+  min-height: 56px;
+  padding: 7px 9px 7px 14px;
+  border: 1px solid var(--stroke);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
-  box-shadow: 0 12px 40px rgba(9, 34, 18, 0.08);
-  backdrop-filter: blur(24px) saturate(150%);
-  -webkit-backdrop-filter: blur(24px) saturate(150%);
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(22px) saturate(130%);
+  -webkit-backdrop-filter: blur(22px) saturate(130%);
 }
 
 .brand {
   display: inline-flex;
-  gap: 10px;
+  gap: 9px;
   align-items: center;
-  font-size: 0.96rem;
-  font-weight: 750;
-  letter-spacing: -0.02em;
+  font-size: 0.94rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
 }
 
 .brand img {
@@ -157,22 +163,55 @@ video {
 }
 
 .nav-links {
-  gap: clamp(12px, 2vw, 26px);
-  color: var(--muted);
+  gap: clamp(16px, 2vw, 28px);
+  color: var(--text-secondary);
   font-size: 0.86rem;
 }
 
-.nav-links a {
-  transition: color 180ms ease;
+.nav-links a,
+.footer-links a {
+  transition: color 160ms ease;
 }
 
 .nav-links a:hover,
-.nav-links a:focus-visible {
-  color: var(--ink);
+.nav-links a:focus-visible,
+.footer-links a:hover,
+.footer-links a:focus-visible {
+  color: var(--text);
 }
 
 .nav-actions {
-  gap: 6px;
+  gap: 4px;
+}
+
+.icon-button.mobile-menu-button,
+.mobile-nav {
+  display: none;
+}
+
+.mobile-nav {
+  gap: 4px;
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid var(--stroke);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--surface) 94%, transparent);
+  backdrop-filter: blur(22px) saturate(130%);
+  -webkit-backdrop-filter: blur(22px) saturate(130%);
+}
+
+.mobile-nav a {
+  padding: 11px 13px;
+  border-radius: 11px;
+  color: var(--text-secondary);
+  font-size: 0.88rem;
+  font-weight: 650;
+}
+
+.mobile-nav a:hover,
+.mobile-nav a:focus-visible {
+  background: var(--surface-subtle);
+  color: var(--text);
 }
 
 .icon-button,
@@ -180,7 +219,7 @@ video {
   display: inline-grid;
   min-width: 40px;
   height: 40px;
-  padding: 0 12px;
+  padding: 0 11px;
   border: 0;
   border-radius: 999px;
   background: transparent;
@@ -192,7 +231,7 @@ video {
 .language-button:hover,
 .icon-button:focus-visible,
 .language-button:focus-visible {
-  background: color-mix(in srgb, var(--ink) 7%, transparent);
+  background: var(--surface-subtle);
 }
 
 .language-button {
@@ -201,16 +240,16 @@ video {
 }
 
 .material-symbols-rounded {
-  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
+  font-variation-settings: "FILL" 0, "wght" 430, "GRAD" 0, "opsz" 24;
 }
 
 .hero {
   position: relative;
-  min-height: 960px;
-  padding: 150px 0 90px;
+  min-height: 820px;
+  padding: 152px 0 72px;
   overflow: hidden;
-  background: #020805;
-  color: #effff4;
+  background: #0b0d0c;
+  color: var(--inverse-text);
 }
 
 .hero-beams,
@@ -220,31 +259,30 @@ video {
   inset: 0;
 }
 
+.hero-beams {
+  opacity: 0.52;
+}
+
 .hero-beams canvas {
   width: 100%;
   height: 100%;
 }
 
 .hero-scrim {
-  background:
-    linear-gradient(180deg, rgba(2, 8, 5, 0.12), rgba(2, 8, 5, 0.42) 60%, #020805 100%),
-    linear-gradient(90deg, rgba(2, 8, 5, 0.84), transparent 55%);
+  background: rgba(11, 13, 12, 0.38);
   pointer-events: none;
 }
 
 .hero-glow {
-  background:
-    radial-gradient(circle at 72% 46%, rgba(74, 255, 137, 0.18), transparent 27rem),
-    radial-gradient(circle at 54% 68%, rgba(82, 217, 204, 0.14), transparent 24rem);
-  pointer-events: none;
+  display: none;
 }
 
 .hero-inner {
   position: relative;
   z-index: 2;
   display: grid;
-  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
-  gap: 38px;
+  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.95fr);
+  gap: clamp(48px, 7vw, 88px);
   align-items: center;
   width: var(--content);
   margin: auto;
@@ -254,80 +292,81 @@ video {
   display: inline-flex;
   gap: 8px;
   align-items: center;
-  margin: 0 0 18px;
-  color: var(--green-deep);
-  font-size: 0.76rem;
-  font-weight: 800;
-  letter-spacing: 0.12em;
+  margin: 0 0 17px;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
+html[data-lang="zh"] .eyebrow {
+  letter-spacing: 0.06em;
+  text-transform: none;
+}
+
 .hero .eyebrow {
-  color: var(--green-bright);
+  color: var(--inverse-secondary);
 }
 
 .eyebrow::before {
-  width: 7px;
-  height: 7px;
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
-  background: currentColor;
-  box-shadow: 0 0 18px currentColor;
+  background: var(--accent);
   content: "";
 }
 
-h1,
-h2,
-h3,
-p {
-  margin-top: 0;
-}
-
 .hero h1 {
-  max-width: 720px;
-  margin-bottom: 22px;
-  font-size: clamp(3.5rem, 7vw, 7.3rem);
-  font-weight: 780;
-  letter-spacing: -0.075em;
-  line-height: 0.92;
+  max-width: 690px;
+  margin-bottom: 24px;
+  font-size: clamp(3.7rem, 6.8vw, 6.2rem);
+  font-weight: 720;
+  letter-spacing: -0.055em;
+  line-height: 1;
 }
 
-.gradient-text {
-  background: linear-gradient(115deg, #7dff9e, #78e5dc 45%, #b6a7ff 92%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
+html[data-lang="zh"] .hero h1 {
+  font-size: clamp(3rem, 5vw, 4rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.08;
+}
+
+.hero-accent {
+  color: #d7ded9;
 }
 
 .hero-copy {
-  max-width: 650px;
-  margin-bottom: 30px;
-  color: rgba(236, 255, 242, 0.76);
-  font-size: clamp(1.06rem, 1.8vw, 1.28rem);
-  line-height: 1.7;
+  max-width: 620px;
+  margin-bottom: 28px;
+  color: #b4bbb6;
+  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
+  line-height: 1.75;
 }
 
 .hero-actions,
 .download-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 11px;
   align-items: center;
 }
 
 .store-badge {
   display: inline-flex;
-  transition: transform 180ms ease, filter 180ms ease;
+  transition: opacity 160ms ease, transform 160ms ease;
 }
 
 .store-badge img {
   width: auto;
-  height: 48px;
+  height: 46px;
 }
 
 .store-badge:hover,
 .store-badge:focus-visible {
-  filter: brightness(1.08);
-  transform: translateY(-2px);
+  opacity: 0.88;
+  transform: translateY(-1px);
 }
 
 .secondary-button,
@@ -336,98 +375,191 @@ p {
   gap: 8px;
   align-items: center;
   justify-content: center;
-  min-height: 48px;
-  padding: 0 19px;
+  min-height: 46px;
+  padding: 0 18px;
   border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.08);
-  color: #f4fff7;
-  font-size: 0.9rem;
-  font-weight: 700;
-  backdrop-filter: blur(14px);
+  border-radius: 13px;
+  background: rgba(255, 255, 255, 0.07);
+  color: #f1f3f1;
+  font-size: 0.88rem;
+  font-weight: 650;
+  backdrop-filter: blur(12px);
 }
 
 .primary-button {
   border-color: transparent;
-  background: var(--green);
-  color: white;
+  background: var(--accent);
+  color: var(--on-accent);
 }
 
 .hero-note {
-  margin: 16px 0 0;
-  color: rgba(236, 255, 242, 0.52);
+  margin: 15px 0 0;
+  color: #828983;
   font-size: 0.78rem;
 }
 
 .hero-visual {
   position: relative;
-  min-height: 650px;
-}
-
-.phone-frame {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  right: 4%;
-  width: min(350px, 68%);
-  padding: 9px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 48px;
-  background: #080b09;
-  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 60px rgba(79, 236, 122, 0.15);
-  transform: rotate(3deg);
-}
-
-.phone-frame img {
   width: 100%;
-  border-radius: 40px;
+  max-width: 560px;
+  margin-left: auto;
 }
 
-.video-card {
-  position: absolute;
-  z-index: 3;
-  bottom: 24px;
-  left: 0;
-  width: min(360px, 70%);
-  padding: 9px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 30px;
-  background: rgba(10, 20, 13, 0.8);
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
-  backdrop-filter: blur(18px);
-  transform: rotate(-4deg);
+.illustration-label {
+  margin-bottom: 10px;
+  color: #858c86;
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-align: right;
+  text-transform: uppercase;
 }
 
-.video-card video {
-  width: 100%;
-  border-radius: 23px;
+html[data-lang="zh"] .illustration-label {
+  letter-spacing: 0.04em;
+  text-transform: none;
 }
 
-.floating-chip {
-  position: absolute;
-  z-index: 4;
-  display: inline-flex;
-  gap: 8px;
+.input-console {
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.13);
+  border-radius: 26px;
+  background: rgba(23, 26, 24, 0.88);
+  backdrop-filter: blur(20px);
+}
+
+.console-toolbar {
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
   align-items: center;
-  padding: 11px 15px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  min-height: 58px;
+  padding: 0 13px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.console-brand {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  border-radius: 11px;
+  background: var(--accent);
+  color: var(--on-accent);
+  font-size: 0.67rem;
+  font-weight: 800;
+  place-items: center;
+}
+
+.mode-tabs {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+}
+
+.mode-tab {
+  padding: 6px 10px;
   border-radius: 999px;
-  background: rgba(11, 28, 17, 0.78);
-  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
-  color: #eaffef;
-  font-size: 0.78rem;
+  color: #858c86;
+  font-size: 0.74rem;
+  font-weight: 650;
+}
+
+.mode-tab.is-active {
+  background: rgba(255, 255, 255, 0.09);
+  color: #f1f3f1;
+}
+
+.console-menu {
+  justify-self: end;
+  color: #858c86;
+}
+
+.console-content {
+  min-height: 350px;
+  padding: clamp(26px, 5vw, 42px);
+}
+
+.console-kicker,
+.visual-label {
+  margin-bottom: 9px;
+  color: #858c86;
+  font-size: 0.72rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+html[data-lang="zh"] .console-kicker,
+html[data-lang="zh"] .visual-label {
+  letter-spacing: 0.04em;
+  text-transform: none;
+}
+
+.console-transcript {
+  max-width: 430px;
+  margin-bottom: 30px;
+  color: #f1f3f1;
+  font-size: clamp(1.35rem, 2.6vw, 2rem);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.38;
+}
+
+.console-result {
+  display: grid;
+  gap: 7px;
+  padding: 17px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.045);
+}
+
+.result-label {
+  color: var(--accent);
+  font-size: 0.72rem;
   font-weight: 700;
-  backdrop-filter: blur(18px);
 }
 
-.floating-chip.one {
-  top: 13%;
-  left: 0;
+.result-copy {
+  color: #b9c0ba;
+  font-size: 0.92rem;
 }
 
-.floating-chip.two {
-  right: 0;
-  bottom: 18%;
+.console-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 15px 22px 18px;
+  border-top: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.console-action,
+.console-mic {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.075);
+  color: #aeb4af;
+  place-items: center;
+}
+
+.console-action:last-child {
+  justify-self: end;
+}
+
+.console-mic {
+  width: 54px;
+  height: 54px;
+  background: var(--accent);
+  color: var(--on-accent);
+}
+
+.hero-caption {
+  display: flex;
+  gap: 9px;
+  justify-content: center;
+  margin-top: 14px;
+  color: #858c86;
+  font-size: 0.75rem;
 }
 
 .trust-strip {
@@ -435,19 +567,20 @@ p {
   z-index: 3;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 1px;
   width: var(--content);
-  margin: 70px auto 0;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.1);
+  margin: 64px auto 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.11);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
 }
 
 .trust-item {
-  min-height: 100px;
-  padding: 20px;
-  background: rgba(6, 15, 9, 0.82);
+  min-height: 92px;
+  padding: 20px 22px;
+  border-right: 1px solid rgba(255, 255, 255, 0.11);
+}
+
+.trust-item:last-child {
+  border-right: 0;
 }
 
 .trust-item strong,
@@ -456,34 +589,31 @@ p {
 }
 
 .trust-item strong {
-  margin-bottom: 5px;
-  color: #f2fff5;
-  font-size: 1rem;
+  margin-bottom: 4px;
+  color: #f0f2f0;
+  font-size: 0.93rem;
 }
 
 .trust-item span {
-  color: rgba(236, 255, 242, 0.58);
-  font-size: 0.8rem;
+  color: #858c86;
+  font-size: 0.78rem;
 }
 
 .section {
-  padding: clamp(84px, 11vw, 150px) 0;
+  padding: clamp(76px, 9vw, 116px) 0;
 }
 
 .section-dark {
-  position: relative;
-  overflow: hidden;
-  background: #020805;
-  color: #effff4;
+  background: #151715;
+  color: var(--inverse-text);
+}
+
+html[data-theme="dark"] .section-dark {
+  background: #111311;
 }
 
 .section-dark::before {
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(circle at 10% 10%, rgba(58, 160, 90, 0.17), transparent 27rem),
-    radial-gradient(circle at 85% 80%, rgba(146, 129, 255, 0.12), transparent 28rem);
-  content: "";
+  display: none;
 }
 
 .section-inner {
@@ -494,111 +624,142 @@ p {
 
 .section-heading {
   max-width: 780px;
-  margin-bottom: clamp(38px, 6vw, 68px);
+  margin-bottom: clamp(36px, 5vw, 58px);
 }
 
 .section-heading h2 {
-  margin-bottom: 20px;
-  font-size: clamp(2.5rem, 5.2vw, 5.2rem);
-  font-weight: 750;
-  letter-spacing: -0.06em;
-  line-height: 0.98;
+  margin-bottom: 18px;
+  font-size: clamp(2.4rem, 4.6vw, 4rem);
+  font-weight: 700;
+  letter-spacing: -0.045em;
+  line-height: 1.06;
+}
+
+html[data-lang="zh"] .section-heading h2 {
+  font-size: clamp(2.1rem, 4vw, 3.25rem);
+  letter-spacing: -0.025em;
+  line-height: 1.12;
 }
 
 .section-heading p {
-  max-width: 670px;
+  max-width: 680px;
   margin-bottom: 0;
-  color: var(--muted);
-  font-size: clamp(1rem, 1.6vw, 1.18rem);
-  line-height: 1.72;
+  color: var(--text-secondary);
+  font-size: clamp(1rem, 1.4vw, 1.12rem);
+  line-height: 1.75;
 }
 
+.section-dark .eyebrow,
 .section-dark .section-heading p {
-  color: rgba(236, 255, 242, 0.62);
+  color: var(--inverse-secondary);
 }
 
 .feature-stage {
   display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
-  gap: clamp(30px, 6vw, 80px);
-  align-items: center;
+  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
+  gap: clamp(44px, 7vw, 88px);
+  align-items: start;
+}
+
+.feature-copy {
+  padding-top: 12px;
 }
 
 .feature-copy h3 {
   margin-bottom: 16px;
-  font-size: clamp(2rem, 3.6vw, 3.3rem);
-  letter-spacing: -0.045em;
-  line-height: 1.04;
+  font-size: clamp(2rem, 3.4vw, 2.85rem);
+  font-weight: 680;
+  letter-spacing: -0.04em;
+  line-height: 1.1;
+}
+
+html[data-lang="zh"] .feature-copy h3 {
+  font-size: clamp(1.8rem, 3vw, 2.3rem);
+  letter-spacing: -0.02em;
+  line-height: 1.18;
 }
 
 .feature-copy > p {
-  max-width: 600px;
-  color: var(--muted);
-  font-size: 1.04rem;
+  max-width: 590px;
+  color: var(--text-secondary);
+  font-size: 1.02rem;
+  line-height: 1.75;
 }
 
 .section-dark .feature-copy > p {
-  color: rgba(236, 255, 242, 0.64);
+  color: var(--inverse-secondary);
 }
 
 .feature-list {
   display: grid;
   gap: 12px;
-  margin: 28px 0 0;
+  margin: 26px 0 0;
   padding: 0;
   list-style: none;
 }
 
 .feature-list li {
   display: flex;
-  gap: 11px;
+  gap: 10px;
   align-items: flex-start;
 }
 
 .feature-list .material-symbols-rounded {
-  margin-top: 1px;
-  color: var(--green);
-  font-size: 21px;
+  margin-top: 2px;
+  color: var(--text-tertiary);
+  font-size: 19px;
 }
 
-.media-shell {
-  position: relative;
-  padding: clamp(14px, 2.5vw, 28px);
-  overflow: hidden;
-  border: 1px solid var(--line);
+.section-dark .feature-list .material-symbols-rounded {
+  color: var(--inverse-secondary);
+}
+
+.workflow-visual {
+  display: grid;
+  border: 1px solid var(--stroke);
   border-radius: var(--radius-xl);
-  background:
-    linear-gradient(145deg, color-mix(in srgb, var(--green) 15%, transparent), transparent 45%),
-    var(--bg-elevated);
-  box-shadow: var(--shadow);
+  background: var(--surface);
+  color: var(--text);
 }
 
-.section-dark .media-shell {
-  border-color: rgba(255, 255, 255, 0.12);
-  background:
-    linear-gradient(145deg, rgba(102, 255, 149, 0.14), transparent 46%),
-    rgba(255, 255, 255, 0.055);
+.workflow-step {
+  display: grid;
+  grid-template-columns: 42px 34px 1fr;
+  gap: 15px;
+  align-items: center;
+  min-height: 128px;
+  padding: 24px 28px;
+  border-bottom: 1px solid var(--stroke);
 }
 
-.media-shell video,
-.media-shell img {
-  width: 100%;
-  max-height: 650px;
-  object-fit: contain;
-  border-radius: calc(var(--radius-xl) - 13px);
+.workflow-step:last-child {
+  border-bottom: 0;
 }
 
-.media-label {
-  position: absolute;
-  right: 18px;
-  bottom: 18px;
-  padding: 7px 11px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 999px;
-  background: rgba(3, 11, 6, 0.76);
-  color: rgba(255, 255, 255, 0.78);
+.workflow-number {
+  color: var(--text-tertiary);
   font-size: 0.72rem;
-  backdrop-filter: blur(14px);
+  font-weight: 700;
+}
+
+.workflow-step > .material-symbols-rounded {
+  color: var(--text-secondary);
+}
+
+.workflow-step strong,
+.workflow-step small {
+  grid-column: 3;
+}
+
+.workflow-step strong {
+  align-self: end;
+  font-size: 1.03rem;
+}
+
+.workflow-step small {
+  align-self: start;
+  color: var(--text-secondary);
+  font-size: 0.86rem;
 }
 
 .feature-grid,
@@ -615,14 +776,13 @@ p {
 }
 
 .feature-card {
-  position: relative;
-  min-height: 300px;
-  padding: clamp(24px, 3vw, 34px);
-  overflow: hidden;
-  border: 1px solid var(--line);
+  display: flex;
+  min-height: 260px;
+  padding: clamp(24px, 3vw, 32px);
+  border: 1px solid var(--stroke);
   border-radius: var(--radius-lg);
-  background: var(--bg-elevated);
-  box-shadow: 0 16px 60px rgba(17, 62, 33, 0.07);
+  background: var(--surface);
+  flex-direction: column;
 }
 
 .feature-card:nth-child(1),
@@ -636,45 +796,154 @@ p {
 }
 
 .feature-card::after {
-  position: absolute;
-  right: -120px;
-  bottom: -140px;
-  width: 300px;
-  height: 300px;
-  border-radius: 50%;
-  background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--green)) 18%, transparent), transparent 70%);
-  content: "";
+  display: none;
 }
 
 .feature-card .icon {
   display: grid;
-  width: 48px;
-  height: 48px;
-  margin-bottom: 42px;
-  border-radius: 15px;
-  background: color-mix(in srgb, var(--card-accent, var(--green)) 13%, transparent);
-  color: var(--card-accent, var(--green));
+  width: 42px;
+  height: 42px;
+  margin-bottom: 32px;
+  border-radius: 13px;
+  background: var(--surface-subtle);
+  color: var(--text-secondary);
   place-items: center;
 }
 
 .feature-card h3 {
-  margin-bottom: 10px;
-  font-size: clamp(1.35rem, 2.4vw, 2rem);
-  letter-spacing: -0.035em;
+  margin-bottom: 9px;
+  font-size: clamp(1.3rem, 2vw, 1.72rem);
+  font-weight: 680;
+  letter-spacing: -0.025em;
 }
 
 .feature-card p {
   max-width: 540px;
   margin-bottom: 0;
-  color: var(--muted);
+  color: var(--text-secondary);
+  line-height: 1.7;
 }
 
-.feature-card.violet {
-  --card-accent: var(--violet);
+.clipboard-visual,
+.styles-visual {
+  padding: clamp(24px, 4vw, 38px);
+  border: 1px solid var(--inverse-stroke);
+  border-radius: var(--radius-xl);
+  background: rgba(255, 255, 255, 0.045);
 }
 
-.feature-card.cyan {
-  --card-accent: var(--cyan);
+.clipboard-source {
+  display: flex;
+  gap: 14px;
+  padding: 18px;
+  border: 1px solid var(--inverse-stroke);
+  border-radius: 17px;
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.clipboard-source > .material-symbols-rounded {
+  color: var(--inverse-secondary);
+}
+
+.clipboard-source small {
+  color: var(--inverse-secondary);
+}
+
+.clipboard-source p {
+  margin: 4px 0 0;
+  color: var(--inverse-text);
+  line-height: 1.55;
+}
+
+.clipboard-visual .visual-label {
+  margin: 28px 0 12px;
+  color: var(--inverse-secondary);
+}
+
+.skill-chip-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.skill-chip {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  min-height: 48px;
+  padding: 0 12px;
+  border: 1px solid var(--inverse-stroke);
+  border-radius: 14px;
+  color: var(--inverse-secondary);
+  font-size: 0.82rem;
+  font-weight: 650;
+}
+
+.skill-chip .material-symbols-rounded {
+  font-size: 18px;
+}
+
+.skill-chip.is-primary {
+  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--accent);
+}
+
+.styles-visual {
+  border-color: var(--stroke);
+  background: var(--surface);
+}
+
+.style-selector {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 9px;
+  margin-bottom: 22px;
+}
+
+.style-option {
+  padding: 13px 14px;
+  border: 1px solid var(--stroke);
+  border-radius: 13px;
+  color: var(--text-secondary);
+  font-size: 0.84rem;
+  font-weight: 650;
+}
+
+.style-option.is-selected {
+  border-color: var(--accent);
+  color: var(--text);
+}
+
+.style-preview {
+  padding: 23px;
+  border-radius: 17px;
+  background: var(--surface-subtle);
+}
+
+.style-preview small {
+  color: var(--text-tertiary);
+}
+
+.style-preview p {
+  margin: 12px 0 22px;
+  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
+  font-weight: 600;
+  line-height: 1.55;
+}
+
+.preview-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.preview-meta span {
+  padding: 6px 9px;
+  border: 1px solid var(--stroke);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  font-size: 0.72rem;
 }
 
 .path-grid {
@@ -682,48 +951,40 @@ p {
 }
 
 .path-card {
-  position: relative;
-  min-height: 390px;
-  padding: 28px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  padding: 27px;
+  border: 1px solid var(--inverse-stroke);
   border-radius: var(--radius-lg);
-  background: rgba(255, 255, 255, 0.055);
+  background: rgba(255, 255, 255, 0.035);
 }
 
 .path-card.recommended {
-  background:
-    linear-gradient(150deg, rgba(74, 255, 137, 0.14), transparent 60%),
-    rgba(255, 255, 255, 0.065);
+  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
+  background: rgba(255, 255, 255, 0.035);
 }
 
 .path-index {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  margin-bottom: 44px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 50%;
-  color: var(--green-bright);
-  font-size: 0.76rem;
-  font-weight: 800;
+  display: block;
+  margin-bottom: 42px;
+  color: var(--inverse-secondary);
+  font-size: 0.72rem;
+  font-weight: 750;
 }
 
 .path-card h3 {
-  margin-bottom: 12px;
-  font-size: 1.75rem;
-  letter-spacing: -0.04em;
+  margin-bottom: 11px;
+  font-size: 1.55rem;
+  font-weight: 680;
+  letter-spacing: -0.025em;
 }
 
 .path-card p {
-  color: rgba(236, 255, 242, 0.6);
+  color: var(--inverse-secondary);
 }
 
 .path-card ul {
-  margin: 24px 0 0;
+  margin: 22px 0 0;
   padding-left: 18px;
-  color: rgba(236, 255, 242, 0.76);
+  color: #d2d6d2;
 }
 
 .path-card li {
@@ -733,79 +994,75 @@ p {
 .account-stage {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
-  gap: clamp(34px, 8vw, 110px);
-  align-items: center;
+  gap: clamp(48px, 8vw, 100px);
+  align-items: start;
 }
 
 .account-phone {
-  max-width: 390px;
+  max-width: 380px;
   margin: auto;
-  padding: 28px 18px;
-  border: 1px solid var(--line);
-  border-radius: 45px;
-  background: var(--bg-solid);
-  box-shadow: var(--shadow);
-}
-
-.account-phone img {
-  border-radius: 37px;
+  padding: 26px 18px;
+  border: 1px solid var(--stroke);
+  border-radius: 30px;
+  background: var(--surface);
 }
 
 .credit-screen {
-  min-height: 560px;
-  padding: 12px 0 30px;
-  color: var(--ink);
+  padding: 4px 0 12px;
+  color: var(--text);
 }
 
 .credit-screen h3 {
-  margin-bottom: 36px;
+  margin-bottom: 30px;
   text-align: center;
-  font-size: 1.2rem;
+  font-size: 1.08rem;
 }
 
 .credit-label {
   margin: 0 4px 8px;
-  color: var(--muted);
-  font-size: 0.76rem;
+  color: var(--text-tertiary);
+  font-size: 0.72rem;
 }
 
 .balance-card,
 .credit-pack-list {
-  border: 1px solid var(--line);
-  border-radius: 23px;
-  background: color-mix(in srgb, var(--bg-solid) 86%, var(--bg));
+  border: 1px solid var(--stroke);
+  border-radius: 18px;
+  background: var(--canvas);
 }
 
 .balance-card {
-  margin-bottom: 22px;
-  padding: 20px 18px;
+  margin-bottom: 20px;
+  padding: 18px;
 }
 
 .balance-card strong {
   display: block;
-  font-size: 2.5rem;
-  letter-spacing: -0.06em;
+  font-size: 2.25rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.045em;
 }
 
 .balance-card span {
-  color: var(--muted);
-  font-size: 0.78rem;
+  color: var(--text-secondary);
+  font-size: 0.76rem;
 }
 
 .balance-bar {
-  height: 8px;
-  margin-top: 20px;
+  width: 68%;
+  height: 5px;
+  margin-top: 18px;
   border-radius: 999px;
-  background: var(--green);
+  background: var(--accent);
 }
 
 .credit-pack {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 76px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--line);
+  min-height: 66px;
+  padding: 0 15px;
+  border-bottom: 1px solid var(--stroke);
 }
 
 .credit-pack:last-child {
@@ -813,89 +1070,95 @@ p {
 }
 
 .credit-pack strong {
-  font-size: 1.2rem;
+  font-size: 1.08rem;
+  font-variant-numeric: tabular-nums;
 }
 
 .credit-pack .buy-chip {
-  padding: 8px 14px;
-  border-radius: 12px;
-  background: var(--green);
-  color: white;
-  font-size: 0.82rem;
-  font-weight: 700;
+  padding: 6px 10px;
+  border: 1px solid var(--stroke-strong);
+  border-radius: 10px;
+  color: var(--text-secondary);
+  font-size: 0.78rem;
+  font-weight: 650;
 }
 
 .privacy-panel {
   display: grid;
-  grid-template-columns: 0.82fr 1.18fr;
-  gap: clamp(30px, 7vw, 90px);
+  grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
+  gap: clamp(40px, 7vw, 82px);
   align-items: start;
-  padding: clamp(30px, 5vw, 64px);
-  border: 1px solid var(--line);
+  padding: clamp(30px, 5vw, 56px);
+  border: 1px solid var(--stroke);
   border-radius: var(--radius-xl);
-  background:
-    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--green) 14%, transparent), transparent 22rem),
-    var(--bg-elevated);
-  box-shadow: var(--shadow);
+  background: var(--surface);
 }
 
 .privacy-mark {
   display: grid;
-  width: 90px;
-  height: 90px;
+  width: 54px;
+  height: 54px;
   margin-bottom: 24px;
-  border-radius: 28px;
-  background: color-mix(in srgb, var(--green) 14%, transparent);
-  color: var(--green);
+  border-radius: 16px;
+  background: var(--accent-soft);
+  color: var(--accent);
   place-items: center;
 }
 
 .privacy-mark span {
-  font-size: 46px;
+  font-size: 28px;
 }
 
 .privacy-panel h2 {
   margin-bottom: 14px;
-  font-size: clamp(2.2rem, 4vw, 4rem);
-  letter-spacing: -0.055em;
-  line-height: 1;
+  font-size: clamp(2rem, 3.5vw, 3.1rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.08;
+}
+
+html[data-lang="zh"] .privacy-panel h2 {
+  font-size: clamp(1.9rem, 3vw, 2.65rem);
+  letter-spacing: -0.02em;
+  line-height: 1.15;
 }
 
 .privacy-panel p {
-  color: var(--muted);
+  color: var(--text-secondary);
 }
 
 .privacy-points {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 14px;
+  border-top: 1px solid var(--stroke);
+  border-left: 1px solid var(--stroke);
 }
 
 .privacy-point {
-  min-height: 150px;
-  padding: 21px;
-  border: 1px solid var(--line);
-  border-radius: 20px;
-  background: color-mix(in srgb, var(--bg-solid) 60%, transparent);
+  min-height: 132px;
+  padding: 20px;
+  border-right: 1px solid var(--stroke);
+  border-bottom: 1px solid var(--stroke);
 }
 
 .privacy-point strong {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 5px;
 }
 
 .privacy-point span {
-  color: var(--muted);
-  font-size: 0.87rem;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  line-height: 1.55;
 }
 
 .text-link {
   display: inline-flex;
   gap: 6px;
   align-items: center;
-  margin-top: 14px;
-  color: var(--green-deep);
-  font-weight: 750;
+  margin-top: 13px;
+  color: var(--accent);
+  font-weight: 680;
 }
 
 .platform-grid {
@@ -903,42 +1166,58 @@ p {
 }
 
 .platform-card {
-  min-height: 520px;
-  padding: clamp(28px, 4vw, 46px);
-  overflow: hidden;
-  border: 1px solid var(--line);
+  display: flex;
+  min-height: 420px;
+  padding: clamp(28px, 4vw, 42px);
+  border: 1px solid var(--stroke);
   border-radius: var(--radius-xl);
-  background: var(--bg-elevated);
-  box-shadow: var(--shadow);
+  background: var(--surface);
+  flex-direction: column;
 }
 
 .platform-card h3 {
-  margin: 20px 0 10px;
-  font-size: 2rem;
-  letter-spacing: -0.04em;
+  margin: 22px 0 10px;
+  font-size: 1.8rem;
+  font-weight: 680;
+  letter-spacing: -0.03em;
 }
 
 .platform-card > p {
-  color: var(--muted);
-}
-
-.platform-card img {
-  max-height: 330px;
-  margin: 32px auto 0;
-  object-fit: contain;
-  border-radius: 20px;
+  color: var(--text-secondary);
+  line-height: 1.7;
 }
 
 .platform-pill {
   display: inline-flex;
   gap: 7px;
   align-items: center;
-  padding: 7px 11px;
+  align-self: flex-start;
+  padding: 7px 10px;
+  border: 1px solid var(--stroke);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--green) 13%, transparent);
-  color: var(--green-deep);
-  font-size: 0.76rem;
-  font-weight: 800;
+  color: var(--text-secondary);
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.platform-specs {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: auto;
+  padding-top: 30px;
+  border-top: 1px solid var(--stroke);
+}
+
+.platform-specs span {
+  min-height: 52px;
+  padding: 12px 12px 12px 0;
+  border-bottom: 1px solid var(--stroke);
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+}
+
+.platform-specs span:nth-last-child(-n + 2) {
+  border-bottom: 0;
 }
 
 .step-grid {
@@ -947,47 +1226,51 @@ p {
 }
 
 .step {
-  min-height: 270px;
-  padding: 28px;
-  border-top: 1px solid var(--line);
+  min-height: 240px;
+  padding: 25px 25px 25px 0;
+  border-top: 1px solid var(--stroke-strong);
   counter-increment: steps;
 }
 
 .step::before {
   display: block;
-  margin-bottom: 55px;
-  color: var(--green-deep);
+  margin-bottom: 44px;
+  color: var(--text-tertiary);
   content: "0" counter(steps);
-  font-size: 0.78rem;
-  font-weight: 800;
+  font-size: 0.72rem;
+  font-weight: 750;
   letter-spacing: 0.08em;
 }
 
 .step h3 {
-  margin-bottom: 10px;
-  font-size: 1.45rem;
-  letter-spacing: -0.03em;
+  margin-bottom: 9px;
+  font-size: 1.35rem;
+  font-weight: 680;
+  letter-spacing: -0.02em;
 }
 
 .step p {
-  color: var(--muted);
+  color: var(--text-secondary);
 }
 
 .compare-grid {
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .compare-cell {
-  min-height: 180px;
+  display: grid;
+  grid-template-columns: 34px 1fr;
+  gap: 4px 12px;
+  min-height: 132px;
   padding: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--inverse-stroke);
+  border-radius: 17px;
+  background: rgba(255, 255, 255, 0.035);
 }
 
 .compare-cell .material-symbols-rounded {
-  margin-bottom: 35px;
-  color: var(--green-bright);
+  grid-row: span 2;
+  color: var(--inverse-secondary);
 }
 
 .compare-cell strong,
@@ -996,23 +1279,23 @@ p {
 }
 
 .compare-cell strong {
-  margin-bottom: 6px;
-  font-size: 0.95rem;
+  align-self: end;
+  font-size: 0.92rem;
 }
 
-.compare-cell span {
-  color: rgba(236, 255, 242, 0.56);
-  font-size: 0.8rem;
+.compare-cell > span:last-child {
+  color: var(--inverse-secondary);
+  font-size: 0.78rem;
+  line-height: 1.45;
 }
 
 .faq-list {
   max-width: 900px;
-  margin: 0 auto;
-  border-top: 1px solid var(--line);
+  border-top: 1px solid var(--stroke);
 }
 
 .faq-item {
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid var(--stroke);
 }
 
 .faq-item summary {
@@ -1020,10 +1303,10 @@ p {
   gap: 20px;
   align-items: center;
   justify-content: space-between;
-  padding: 25px 0;
+  padding: 23px 0;
   cursor: pointer;
-  font-size: clamp(1.05rem, 2vw, 1.3rem);
-  font-weight: 700;
+  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
+  font-weight: 650;
   list-style: none;
 }
 
@@ -1032,9 +1315,9 @@ p {
 }
 
 .faq-item summary::after {
-  color: var(--green-deep);
+  color: var(--text-tertiary);
   content: "+";
-  font-size: 1.5rem;
+  font-size: 1.35rem;
   font-weight: 400;
 }
 
@@ -1044,59 +1327,48 @@ p {
 
 .faq-item p {
   max-width: 760px;
-  padding: 0 0 25px;
-  color: var(--muted);
+  padding: 0 0 23px;
+  color: var(--text-secondary);
 }
 
 .download-panel {
-  position: relative;
-  padding: clamp(40px, 7vw, 80px);
-  overflow: hidden;
+  padding: clamp(38px, 7vw, 72px);
   border-radius: var(--radius-xl);
-  background:
-    radial-gradient(circle at 80% 20%, rgba(126, 255, 165, 0.25), transparent 26rem),
-    linear-gradient(135deg, #07170d, #0c2a17);
-  box-shadow: 0 35px 100px rgba(6, 42, 18, 0.24);
-  color: #effff4;
+  background: #151715;
+  color: #f2f4f2;
 }
 
 .download-panel::after {
-  position: absolute;
-  right: -80px;
-  bottom: -160px;
-  width: 430px;
-  height: 430px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 50%;
-  content: "";
-  box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.025), 0 0 0 100px rgba(255, 255, 255, 0.018);
+  display: none;
+}
+
+.download-panel .eyebrow {
+  color: #9ea49f;
 }
 
 .download-panel h2 {
-  position: relative;
-  z-index: 1;
-  max-width: 780px;
+  max-width: 760px;
   margin-bottom: 16px;
-  font-size: clamp(2.7rem, 5.5vw, 5.5rem);
-  letter-spacing: -0.065em;
-  line-height: 0.95;
+  font-size: clamp(2.7rem, 5vw, 4.7rem);
+  font-weight: 700;
+  letter-spacing: -0.055em;
+  line-height: 1;
+}
+
+html[data-lang="zh"] .download-panel h2 {
+  font-size: clamp(2.2rem, 4vw, 3.5rem);
+  letter-spacing: -0.025em;
+  line-height: 1.1;
 }
 
 .download-panel > p {
-  position: relative;
-  z-index: 1;
-  max-width: 650px;
-  margin-bottom: 28px;
-  color: rgba(236, 255, 242, 0.64);
-}
-
-.download-actions {
-  position: relative;
-  z-index: 1;
+  max-width: 640px;
+  margin-bottom: 27px;
+  color: #aeb4af;
 }
 
 .site-footer {
-  padding: 40px 0 50px;
+  padding: 38px 0 48px;
 }
 
 .footer-inner {
@@ -1106,8 +1378,8 @@ p {
   justify-content: space-between;
   width: var(--content);
   margin: auto;
-  color: var(--muted);
-  font-size: 0.82rem;
+  color: var(--text-secondary);
+  font-size: 0.8rem;
 }
 
 .footer-links {
@@ -1116,23 +1388,46 @@ p {
   gap: 16px;
 }
 
-.footer-links a:hover,
-.footer-links a:focus-visible {
-  color: var(--ink);
-}
-
 :focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--green) 60%, white);
+  outline: 3px solid var(--accent);
   outline-offset: 3px;
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1080px) {
+  .nav-links {
+    gap: 15px;
+  }
+
+  .hero-inner {
+    grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
+    gap: 42px;
+  }
+
+  .compare-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 920px) {
+  :root {
+    --content: min(100% - 36px, 1120px);
+  }
+
   .nav-links {
     display: none;
   }
 
+  .icon-button.mobile-menu-button {
+    display: inline-grid;
+  }
+
+  .mobile-nav:not([hidden]) {
+    display: flex;
+  }
+
   .hero {
     min-height: auto;
+    padding-bottom: 58px;
   }
 
   .hero-inner,
@@ -1143,87 +1438,109 @@ p {
   }
 
   .hero-visual {
-    min-height: 680px;
-    margin-top: 20px;
+    max-width: 620px;
+    margin: 14px 0 0;
   }
 
   .trust-strip {
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .trust-item:nth-child(2) {
+    border-right: 0;
+  }
+
+  .trust-item:nth-child(-n + 2) {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
+  }
+
+  .feature-stage {
+    gap: 36px;
+  }
+
+  .feature-copy {
+    padding-top: 0;
+  }
+
   .path-grid,
   .step-grid {
     grid-template-columns: 1fr;
   }
 
   .path-card {
-    min-height: 300px;
+    min-height: auto;
   }
 
-  .compare-grid {
-    grid-template-columns: repeat(3, 1fr);
+  .path-index {
+    margin-bottom: 28px;
+  }
+
+  .step {
+    min-height: auto;
+    padding-right: 0;
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 680px) {
   :root {
-    --content: min(100% - 28px, 1180px);
-    --radius-xl: 28px;
-    --radius-lg: 22px;
+    --content: min(100% - 28px, 1120px);
+    --radius-xl: 23px;
+    --radius-lg: 19px;
   }
 
   .site-nav {
-    top: 9px;
+    top: 8px;
   }
 
   .nav-shell {
-    min-height: 52px;
-    padding: 6px 7px 6px 12px;
+    min-height: 51px;
+    padding: 5px 6px 5px 11px;
   }
 
   .brand span {
     display: none;
   }
 
+  .mobile-nav:not([hidden]) {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .mobile-nav a {
+    padding: 10px 4px;
+    font-size: 0.76rem;
+    text-align: center;
+  }
+
   .hero {
     padding-top: 112px;
   }
 
-  .hero h1 {
-    font-size: clamp(3.35rem, 18vw, 5.2rem);
+  .hero h1,
+  html[data-lang="zh"] .hero h1 {
+    font-size: clamp(2.75rem, 13vw, 3.6rem);
   }
 
-  .hero-inner {
-    gap: 0;
+  .hero-copy {
+    font-size: 1rem;
   }
 
-  .hero-visual {
-    min-height: 560px;
-    margin-top: 42px;
+  .store-badge img {
+    height: 44px;
   }
 
-  .phone-frame {
-    right: 2%;
-    width: 72%;
-    border-radius: 38px;
+  .console-content {
+    min-height: 310px;
+    padding: 24px 20px;
   }
 
-  .phone-frame img {
-    border-radius: 31px;
+  .console-transcript {
+    font-size: 1.35rem;
   }
 
-  .video-card {
-    bottom: 10px;
-    width: 72%;
-  }
-
-  .floating-chip.one {
-    top: 8%;
-  }
-
-  .floating-chip.two {
-    right: 0;
-    bottom: 10%;
+  .hero-caption {
+    gap: 6px;
+    font-size: 0.7rem;
   }
 
   .trust-strip,
@@ -1235,7 +1552,13 @@ p {
   }
 
   .trust-item {
-    min-height: 84px;
+    min-height: 78px;
+    border-right: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
+  }
+
+  .trust-item:last-child {
+    border-bottom: 0;
   }
 
   .feature-card:nth-child(n) {
@@ -1243,23 +1566,46 @@ p {
   }
 
   .feature-card {
-    min-height: 270px;
+    min-height: auto;
   }
 
-  .feature-card .icon {
-    margin-bottom: 34px;
+  .workflow-step {
+    grid-template-columns: 32px 28px 1fr;
+    min-height: 112px;
+    padding: 20px;
   }
 
-  .compare-cell {
-    min-height: 150px;
+  .skill-chip-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .compare-cell .material-symbols-rounded {
-    margin-bottom: 25px;
+  .style-selector,
+  .platform-specs {
+    grid-template-columns: 1fr;
+  }
+
+  .platform-card {
+    min-height: 380px;
+  }
+
+  .platform-specs span:nth-last-child(-n + 2) {
+    border-bottom: 1px solid var(--stroke);
+  }
+
+  .platform-specs span:last-child {
+    border-bottom: 0;
+  }
+
+  .privacy-point {
+    min-height: auto;
   }
 
   .account-phone {
-    max-width: 330px;
+    width: 100%;
+  }
+
+  .download-panel {
+    padding: 34px 24px;
   }
 
   .footer-inner {
diff --git a/docs/assets/site.js b/docs/assets/site.js
index d570323..4828086 100644
--- a/docs/assets/site.js
+++ b/docs/assets/site.js
@@ -10,6 +10,9 @@
   const languageButton = document.getElementById("languageToggle");
   const themeButton = document.getElementById("themeToggle");
   const themeIcon = themeButton?.querySelector(".material-symbols-rounded");
+  const menuButton = document.getElementById("menuToggle");
+  const menuIcon = menuButton?.querySelector(".material-symbols-rounded");
+  const mobileNav = document.getElementById("mobileNav");
   const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
   const supportedLanguages = new Set(["zh", "en"]);
@@ -56,18 +59,6 @@
       element.setAttribute("content", element.dataset[`${lang}Content`] || "");
     });
 
-    document.querySelectorAll("[data-shot]").forEach((image) => {
-      const theme = root.dataset.theme || "light";
-      image.src = `assets/screenshots/${lang}/${theme}/${image.dataset.shot}`;
-    });
-
-    document.querySelectorAll("[data-media-name]").forEach((media) => {
-      const name = media.dataset.mediaName;
-      const extension = media.dataset.mediaExtension || "mp4";
-      media.src = `assets/whats-new/${name}-${lang}.${extension}`;
-      media.load?.();
-    });
-
     document.title = lang === "zh"
       ? "OSGKeyboard — 语音、打字与 AI 助手键盘"
       : "OSGKeyboard — Voice, typing, and an AI assistant keyboard";
@@ -80,6 +71,16 @@
       );
     }
 
+    if (menuButton) {
+      const isOpen = menuButton.getAttribute("aria-expanded") === "true";
+      menuButton.setAttribute(
+        "aria-label",
+        lang === "zh"
+          ? (isOpen ? "关闭导航" : "打开导航")
+          : (isOpen ? "Close navigation" : "Open navigation")
+      );
+    }
+
     if (persist) {
       localStorage.setItem("osg-site-language", lang);
       const url = new URL(window.location.href);
@@ -97,6 +98,21 @@
     return saved === "light" || saved === "dark" ? saved : null;
   }
 
+  function setMenuOpen(isOpen) {
+    if (!menuButton || !mobileNav) return;
+    const open = Boolean(isOpen);
+    menuButton.setAttribute("aria-expanded", String(open));
+    mobileNav.hidden = !open;
+    if (menuIcon) menuIcon.textContent = open ? "close" : "menu";
+    const lang = root.dataset.lang || "zh";
+    menuButton.setAttribute(
+      "aria-label",
+      lang === "zh"
+        ? (open ? "关闭导航" : "打开导航")
+        : (open ? "Close navigation" : "Open navigation")
+    );
+  }
+
   function applyTheme(theme, persist) {
     const resolved = theme === "dark" ? "dark" : "light";
     root.dataset.theme = resolved;
@@ -114,13 +130,8 @@
       themeButton.setAttribute("aria-label", label);
     }
 
-    document.querySelectorAll("[data-shot]").forEach((image) => {
-      const lang = root.dataset.lang || "zh";
-      image.src = `assets/screenshots/${lang}/${resolved}/${image.dataset.shot}`;
-    });
-
-    beams?.setBackground(resolved === "dark" ? "#020805" : "#020805");
-    beams?.setLightColor(resolved === "dark" ? "#72F49D" : "#61E987");
+    beams?.setBackground("#0b0d0c");
+    beams?.setLightColor(resolved === "dark" ? "#7faf8a" : "#6eaa7d");
 
     if (persist) localStorage.setItem("osg-site-theme", resolved);
   }
@@ -134,12 +145,12 @@
         beamWidth: 4.5,
         beamHeight: 6,
         beamNumber: 26,
-        lightColor: "#72F49D",
+        lightColor: "#7faf8a",
         speed: 4.5,
         noiseIntensity: 2.65,
         scale: 0.62,
         rotation: 208,
-        background: "#020805",
+        background: "#0b0d0c",
         reduceMotion
       });
     } catch (error) {
@@ -148,33 +159,11 @@
     }
   }
 
-  function initializeVideos() {
-    document.querySelectorAll("video[autoplay]").forEach((video) => {
-      if (reduceMotion) {
-        video.autoplay = false;
-        video.pause();
-        return;
-      }
-
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            video.play().catch(() => {});
-          } else {
-            video.pause();
-          }
-        });
-      }, { threshold: 0.15 });
-      observer.observe(video);
-    });
-  }
-
   const initialLanguage = preferredLanguage();
   const initialTheme = storedTheme() || (themeMedia.matches ? "dark" : "light");
   applyLanguage(initialLanguage, false);
   applyTheme(initialTheme, false);
   initializeBeams();
-  initializeVideos();
 
   languageButton?.addEventListener("click", () => {
     applyLanguage(root.dataset.lang === "zh" ? "en" : "zh", true);
@@ -185,6 +174,18 @@
     applyTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
   });
 
+  menuButton?.addEventListener("click", () => {
+    setMenuOpen(menuButton.getAttribute("aria-expanded") !== "true");
+  });
+
+  mobileNav?.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", () => setMenuOpen(false));
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") setMenuOpen(false);
+  });
+
   themeMedia.addEventListener("change", (event) => {
     if (!storedTheme()) applyTheme(event.matches ? "dark" : "light", false);
   });
diff --git a/docs/index.html b/docs/index.html
index 936a343..a1260e3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -33,8 +33,8 @@
     data-zh-content="一个键盘，完成听写、中英打字、AI 问答与剪贴板技能。默认端侧识别，也支持 BYOK 和可选托管积分。"
     data-en-content="One keyboard for dictation, Chinese and English typing, AI answers, and clipboard skills. On-device by default, with BYOK and optional managed credits."
   >
-  <meta property="og:image" content="https://hkgood.github.io/OSGKeyboard/assets/hero-devices.png">
-  <meta name="twitter:card" content="summary_large_image">
+  <meta property="og:image" content="https://hkgood.github.io/OSGKeyboard/assets/app-icon.png">
+  <meta name="twitter:card" content="summary">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,0&display=swap" rel="stylesheet">
@@ -126,15 +126,25 @@
         <span>OSGKeyboard</span>
       </a>
       <div class="nav-links">
-        <a href="#assistant" data-zh="助手" data-en="Assistant">助手</a>
-        <a href="#typing" data-zh="打字" data-en="Typing">打字</a>
-        <a href="#skills" data-zh="技能" data-en="Skills">技能</a>
-        <a href="#engines" data-zh="服务" data-en="Services">服务</a>
-        <a href="#account" data-zh="账号" data-en="Account">账号</a>
+        <a href="#assistant" data-zh="产品" data-en="Product">产品</a>
+        <a href="#typing" data-zh="能力" data-en="Capabilities">能力</a>
         <a href="#privacy" data-zh="隐私" data-en="Privacy">隐私</a>
-        <a href="#start" data-zh="开始使用" data-en="Get started">开始使用</a>
+        <a href="#platforms" data-zh="平台" data-en="Platforms">平台</a>
+        <a href="#start" data-zh="开始" data-en="Get started">开始</a>
       </div>
       <div class="nav-actions">
+        <button
+          class="icon-button mobile-menu-button"
+          id="menuToggle"
+          type="button"
+          aria-expanded="false"
+          aria-controls="mobileNav"
+          aria-label="打开导航"
+          data-zh-label="打开导航"
+          data-en-label="Open navigation"
+        >
+          <span class="material-symbols-rounded" aria-hidden="true">menu</span>
+        </button>
         <button class="language-button" id="languageToggle" type="button" aria-label="Switch to English">EN</button>
         <button
           class="icon-button"
@@ -146,6 +156,13 @@
         </button>
       </div>
     </nav>
+    <nav class="mobile-nav" id="mobileNav" aria-label="Mobile" hidden>
+      <a href="#assistant" data-zh="产品" data-en="Product">产品</a>
+      <a href="#typing" data-zh="能力" data-en="Capabilities">能力</a>
+      <a href="#privacy" data-zh="隐私" data-en="Privacy">隐私</a>
+      <a href="#platforms" data-zh="平台" data-en="Platforms">平台</a>
+      <a href="#start" data-zh="开始" data-en="Start">开始</a>
+    </nav>
   </header>
 
   <main id="main">
@@ -164,7 +181,7 @@
           </p>
           <h1>
             <span data-zh="不止听写。" data-en="Beyond dictation.">不止听写。</span><br>
-            <span class="gradient-text" data-zh="这是你的输入助手。" data-en="Your input assistant.">这是你的输入助手。</span>
+            <span class="hero-accent" data-zh="你的输入助手。" data-en="Your input assistant.">你的输入助手。</span>
           </h1>
           <p
             class="hero-copy"
@@ -214,37 +231,53 @@
           >iOS / iPadOS 26+ · macOS 15+（公开 DMG 为历史版 1.1）· 核心功能无需 OSG 账号</p>
         </div>
 
-        <div class="hero-visual" aria-label="OSGKeyboard product preview">
-          <div class="floating-chip one">
-            <span class="material-symbols-rounded" aria-hidden="true">graphic_eq</span>
+        <div
+          class="hero-visual"
+          aria-label="OSGKeyboard 功能示意"
+          data-zh-label="OSGKeyboard 功能示意"
+          data-en-label="OSGKeyboard capability illustration"
+        >
+          <div class="illustration-label" data-zh="功能示意" data-en="Product illustration">功能示意</div>
+          <div class="input-console">
+            <div class="console-toolbar">
+              <span class="console-brand">OSG</span>
+              <div class="mode-tabs" aria-hidden="true">
+                <span class="mode-tab is-active" data-zh="助手" data-en="Assistant">助手</span>
+                <span class="mode-tab" data-zh="中文" data-en="中文">中文</span>
+                <span class="mode-tab">EN</span>
+              </div>
+              <span class="material-symbols-rounded console-menu" aria-hidden="true">more_horiz</span>
+            </div>
+            <div class="console-content">
+              <p class="console-kicker" data-zh="当前输入" data-en="Current input">当前输入</p>
+              <p
+                class="console-transcript"
+                data-zh="把刚才的内容整理得更清楚，同时保留我的语气。"
+                data-en="Make that clearer while keeping it in my voice."
+              >把刚才的内容整理得更清楚，同时保留我的语气。</p>
+              <div class="console-result">
+                <span class="result-label" data-zh="准备插入" data-en="Ready to insert">准备插入</span>
+                <span class="result-copy" data-zh="内容已经整理好，并保留了原本的表达方式。" data-en="The text is clearer and still sounds like you.">内容已经整理好，并保留了原本的表达方式。</span>
+              </div>
+            </div>
+            <div class="console-footer">
+              <span class="console-action">
+                <span class="material-symbols-rounded" aria-hidden="true">undo</span>
+              </span>
+              <span class="console-mic">
+                <span class="material-symbols-rounded" aria-hidden="true">mic</span>
+              </span>
+              <span class="console-action">
+                <span class="material-symbols-rounded" aria-hidden="true">arrow_upward</span>
+              </span>
+            </div>
+          </div>
+          <div class="hero-caption">
             <span data-zh="轻点听写" data-en="Tap to dictate">轻点听写</span>
-          </div>
-          <div class="phone-frame">
-            <img
-              src="assets/screenshots/zh/light/iphone-keyboard_idle.png"
-              data-shot="iphone-keyboard_idle.png"
-              data-zh-alt="OSGKeyboard iPhone 助手界面"
-              data-en-alt="OSGKeyboard assistant on iPhone"
-              alt="OSGKeyboard iPhone 助手界面"
-            >
-          </div>
-          <div class="video-card">
-            <video
-              src="assets/whats-new/ai-voice-assistant-zh.mp4"
-              data-media-name="ai-voice-assistant"
-              autoplay
-              muted
-              loop
-              playsinline
-              preload="metadata"
-              aria-label="统一助手键盘演示"
-              data-zh-label="统一助手键盘演示"
-              data-en-label="Unified assistant keyboard demo"
-            ></video>
-          </div>
-          <div class="floating-chip two">
-            <span class="material-symbols-rounded" aria-hidden="true">auto_awesome</span>
-            <span data-zh="长按问 AI" data-en="Hold to ask AI">长按问 AI</span>
+            <span aria-hidden="true">·</span>
+            <span data-zh="长按提问" data-en="Hold to ask">长按提问</span>
+            <span aria-hidden="true">·</span>
+            <span data-zh="安全插入" data-en="Insert safely">安全插入</span>
           </div>
         </div>
       </div>
@@ -303,20 +336,25 @@
               </li>
             </ul>
           </div>
-          <div class="media-shell">
-            <video
-              src="assets/whats-new/edit-last-input-zh.mp4"
-              data-media-name="edit-last-input"
-              autoplay
-              muted
-              loop
-              playsinline
-              preload="metadata"
-              aria-label="编辑上次输入演示"
-              data-zh-label="编辑上次输入演示"
-              data-en-label="Edit last input demo"
-            ></video>
-            <span class="media-label" data-zh="编辑上次输入" data-en="Edit last input">编辑上次输入</span>
+          <div class="workflow-visual" aria-label="Assistant workflow">
+            <div class="workflow-step">
+              <span class="workflow-number">01</span>
+              <span class="material-symbols-rounded" aria-hidden="true">mic</span>
+              <strong data-zh="表达意图" data-en="Express intent">表达意图</strong>
+              <small data-zh="轻点听写，长按提问" data-en="Tap to dictate, hold to ask">轻点听写，长按提问</small>
+            </div>
+            <div class="workflow-step">
+              <span class="workflow-number">02</span>
+              <span class="material-symbols-rounded" aria-hidden="true">auto_fix_high</span>
+              <strong data-zh="理解并处理" data-en="Understand and process">理解并处理</strong>
+              <small data-zh="润色、问答或编辑" data-en="Polish, answer, or edit">润色、问答或编辑</small>
+            </div>
+            <div class="workflow-step">
+              <span class="workflow-number">03</span>
+              <span class="material-symbols-rounded" aria-hidden="true">text_fields</span>
+              <strong data-zh="确认上下文" data-en="Verify context">确认上下文</strong>
+              <small data-zh="安全插入当前输入框" data-en="Insert safely into the field">安全插入当前输入框</small>
+            </div>
           </div>
         </div>
       </div>
@@ -373,20 +411,41 @@
     <section class="section section-dark" id="skills">
       <div class="section-inner">
         <div class="feature-stage">
-          <div class="media-shell">
-            <video
-              src="assets/whats-new/clipboard-skills-zh.mp4"
-              data-media-name="clipboard-skills"
-              autoplay
-              muted
-              loop
-              playsinline
-              preload="metadata"
-              aria-label="剪贴板技能演示"
-              data-zh-label="剪贴板技能演示"
-              data-en-label="Clipboard skills demo"
-            ></video>
-            <span class="media-label" data-zh="剪贴板快捷技能" data-en="Clipboard quick skills">剪贴板快捷技能</span>
+          <div class="clipboard-visual">
+            <div class="clipboard-source">
+              <span class="material-symbols-rounded" aria-hidden="true">content_copy</span>
+              <div>
+                <small data-zh="刚刚复制" data-en="Just copied">刚刚复制</small>
+                <p data-zh="明天下午三点和产品团队确认新版上线计划。" data-en="Confirm the launch plan with the product team tomorrow at 3 PM.">明天下午三点和产品团队确认新版上线计划。</p>
+              </div>
+            </div>
+            <p class="visual-label" data-zh="下一步" data-en="Next actions">下一步</p>
+            <div class="skill-chip-grid">
+              <span class="skill-chip is-primary">
+                <span class="material-symbols-rounded" aria-hidden="true">reply</span>
+                <span data-zh="回复" data-en="Reply">回复</span>
+              </span>
+              <span class="skill-chip">
+                <span class="material-symbols-rounded" aria-hidden="true">summarize</span>
+                <span data-zh="总结" data-en="Summarize">总结</span>
+              </span>
+              <span class="skill-chip">
+                <span class="material-symbols-rounded" aria-hidden="true">translate</span>
+                <span data-zh="翻译" data-en="Translate">翻译</span>
+              </span>
+              <span class="skill-chip">
+                <span class="material-symbols-rounded" aria-hidden="true">task_alt</span>
+                <span data-zh="待办" data-en="Tasks">待办</span>
+              </span>
+              <span class="skill-chip">
+                <span class="material-symbols-rounded" aria-hidden="true">event</span>
+                <span data-zh="日程" data-en="Events">日程</span>
+              </span>
+              <span class="skill-chip">
+                <span class="material-symbols-rounded" aria-hidden="true">near_me</span>
+                <span data-zh="导航" data-en="Navigate">导航</span>
+              </span>
+            </div>
           </div>
           <div class="feature-copy">
             <p class="eyebrow" data-zh="AI Agent 与剪贴板" data-en="AI Agent and clipboard">AI Agent 与剪贴板</p>
@@ -439,16 +498,24 @@
               </li>
             </ul>
           </div>
-          <div class="media-shell">
-            <img
-              src="assets/whats-new/polish-styles-zh.png"
-              data-media-name="polish-styles"
-              data-media-extension="png"
-              data-zh-alt="OSGKeyboard 润色风格"
-              data-en-alt="OSGKeyboard polish styles"
-              alt="OSGKeyboard 润色风格"
-            >
-            <span class="media-label" data-zh="内置与自定义润色风格" data-en="Built-in and custom polish styles">内置与自定义润色风格</span>
+          <div class="styles-visual">
+            <div class="style-selector">
+              <span class="style-option" data-zh="轻度清理" data-en="Light cleanup">轻度清理</span>
+              <span class="style-option is-selected" data-zh="清晰结构" data-en="Clear structure">清晰结构</span>
+              <span class="style-option" data-zh="正式表达" data-en="Formal">正式表达</span>
+              <span class="style-option" data-zh="日常聊天" data-en="Casual chat">日常聊天</span>
+            </div>
+            <div class="style-preview">
+              <small data-zh="润色预览" data-en="Polish preview">润色预览</small>
+              <p
+                data-zh="先明确结论，再补充原因和下一步，让信息更容易理解。"
+                data-en="Lead with the conclusion, then add context and next steps."
+              >先明确结论，再补充原因和下一步，让信息更容易理解。</p>
+              <div class="preview-meta">
+                <span data-zh="保留原意" data-en="Meaning preserved">保留原意</span>
+                <span data-zh="结构更清晰" data-en="Clearer structure">结构更清晰</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -611,13 +678,12 @@
               data-zh="在微信、备忘录、邮件、Notion、Cursor 等任意输入框使用。iPad 提供铺满宽度的工作区、地球键与编辑控制。"
               data-en="Use it in Messages, Notes, Mail, Notion, Cursor, and any other text field. iPad adds a full-width workspace, globe key, and editing controls."
             >在微信、备忘录、邮件、Notion、Cursor 等任意输入框使用。iPad 提供铺满宽度的工作区、地球键与编辑控制。</p>
-            <img
-              src="assets/screenshots/zh/light/ipad-home.png"
-              data-shot="ipad-home.png"
-              data-zh-alt="OSGKeyboard iPad 主界面"
-              data-en-alt="OSGKeyboard home on iPad"
-              alt="OSGKeyboard iPad 主界面"
-            >
+            <div class="platform-specs">
+              <span data-zh="语音助手" data-en="Voice assistant">语音助手</span>
+              <span data-zh="中文全拼 / 双拼" data-en="Full / double pinyin">中文全拼 / 双拼</span>
+              <span data-zh="英文纠错与补全" data-en="English correction and completion">英文纠错与补全</span>
+              <span data-zh="剪贴板与技能" data-en="Clipboard and skills">剪贴板与技能</span>
+            </div>
           </article>
           <article class="platform-card">
             <span class="platform-pill">
@@ -629,13 +695,12 @@
               data-zh="菜单栏 App 以底部胶囊浮层反馈实时转写。Apple Silicon 可下载 Qwen3 MLX 本地模型；也支持 Apple Speech 回退与 AI 润色。"
               data-en="The menu-bar app shows live transcription in a bottom pill. Apple Silicon Macs can download a local Qwen3 MLX model; Apple Speech fallback and optional AI polish are also available."
             >菜单栏 App 以底部胶囊浮层反馈实时转写。Apple Silicon 可下载 Qwen3 MLX 本地模型；也支持 Apple Speech 回退与 AI 润色。</p>
-            <img
-              src="assets/screenshots/zh/light/mac-recording.png"
-              data-shot="mac-recording.png"
-              data-zh-alt="OSGKeyboard Mac 全局听写浮层"
-              data-en-alt="OSGKeyboard global dictation overlay on Mac"
-              alt="OSGKeyboard Mac 全局听写浮层"
-            >
+            <div class="platform-specs">
+              <span data-zh="Option 全局热键" data-en="Option global hotkey">Option 全局热键</span>
+              <span data-zh="Qwen3 MLX 本地识别" data-en="Local Qwen3 MLX">Qwen3 MLX 本地识别</span>
+              <span data-zh="实时听写浮层" data-en="Live dictation overlay">实时听写浮层</span>
+              <span data-zh="润色与翻译" data-en="Polish and translation">润色与翻译</span>
+            </div>
           </article>
         </div>
       </div>