diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 97eb28b444..3df0156d72 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -167,7 +167,8 @@ const zhNav: DefaultTheme.NavItem[] = [
 export default defineConfig({
   title: 'PI-Desktop',
   description: 'A modular desktop workspace for AI agents',
-  appearance: 'dark',
+  // Product shell is dark-base; lock docs to the same charcoal system.
+  appearance: 'force-dark',
   cleanUrls: true,
   lastUpdated: true,
   head: [
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 7ad241de7d..9bde201f4a 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -11,7 +11,7 @@ const { frontmatter, localeIndex } = useData()
 <template>
   <Layout>
     <template #home-hero-image>
-      <HomeHeroVisual v-if="frontmatter.layout === 'home'" :locale="localeIndex" />
+      <HomeHeroVisual v-if="frontmatter.layout === 'home'" />
     </template>
     <template #home-features-after>
       <HomeModules
diff --git a/docs/.vitepress/theme/components/HomeHeroVisual.vue b/docs/.vitepress/theme/components/HomeHeroVisual.vue
index a311cc978b..f8a08eb81a 100644
--- a/docs/.vitepress/theme/components/HomeHeroVisual.vue
+++ b/docs/.vitepress/theme/components/HomeHeroVisual.vue
@@ -1,56 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps<{ locale: string }>()
-const isZh = computed(() => props.locale === 'zh-CN')
-
-const shotSrc = '/hero-workspace.webp'
-const loaded = ref(false)
-watch(
-  () => props.locale,
-  () => {
-    loaded.value = false
-  }
-)
-
-const caption = computed(() =>
-  isZh.value
-    ? {
-        title: '本地优先的智能体工作区',
-        meta: '会话 · 子代理 · 文件 · 插件',
-      }
-    : {
-        title: 'A local-first workspace for AI agents',
-        meta: 'Sessions · subagents · files · plugins',
-      }
-)
+const shotSrc = '/readme/home.webp'
 </script>
 
 <template>
-  <div
-    class="home-stage"
-    :aria-label="isZh ? 'PI-Desktop 产品界面预览' : 'PI-Desktop product preview'"
-  >
-    <div class="home-stage__frame">
-      <img
-        class="home-stage__shot"
-        :class="{ 'is-loaded': loaded }"
-        :src="shotSrc"
-        :alt="
-          isZh
-            ? 'PI-Desktop 多智能体协作与文件管理工作区截图'
-            : 'PI-Desktop multi-agent workspace with file manager screenshot'
-        "
-        width="1800"
-        height="1012"
-        decoding="async"
-        fetchpriority="high"
-        @load="loaded = true"
-      />
-    </div>
-    <div class="home-stage__caption">
-      <strong>{{ caption.title }}</strong>
-      <span>{{ caption.meta }}</span>
-    </div>
+  <div class="hero-visual" aria-hidden="false">
+    <div class="hero-visual__glow"></div>
+    <img
+      class="hero-visual__shot"
+      :src="shotSrc"
+      alt="PI-Desktop workspace"
+      width="2560"
+      height="1440"
+      decoding="async"
+      fetchpriority="high"
+    />
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/HomeModules.vue b/docs/.vitepress/theme/components/HomeModules.vue
index 7eb0e1368d..230e441003 100644
--- a/docs/.vitepress/theme/components/HomeModules.vue
+++ b/docs/.vitepress/theme/components/HomeModules.vue
@@ -1,500 +1,196 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-type Locale = 'root' | 'zh-CN' | string
-
-const props = defineProps<{ locale: Locale }>()
+const props = defineProps<{ locale: string }>()
 const isZh = computed(() => props.locale === 'zh-CN')
-const localeFolder = computed(() => (isZh.value ? 'zh' : 'en'))
+const shot = (name: string) => `/readme/${name}`
 
 const copy = computed(() =>
   isZh.value
     ? {
-        tourLabel: '产品一览',
-        tourTitle: '看见真实的工作区，而不是概念图。',
-        tourIntro:
-          '首页展示的是 PI-Desktop 真实界面：会话、面板、插件、检索和模型配置都在同一套桌面环境里。',
-        tour: [
-          {
-            slug: 'home-light',
-            title: '工作区首页',
-            meta: 'workspace',
-            text: '项目、会话与编排状态集中在一个持续存在的桌面环境里。',
-            link: '/zh-CN/guide/screenshots',
-            feature: true,
-          },
-          {
-            slug: 'panel-files',
-            title: '文件与预览面板',
-            meta: 'panels',
-            text: '侧栏文件、浏览器与评审面板并排工作，不依赖单一 IDE。',
-            link: '/zh-CN/guide/screenshots',
-          },
-          {
-            slug: 'plugins-live',
-            title: '插件运行时',
-            meta: 'plugins',
-            text: '插件不只是工具：可以扩展面板、视图、服务与 MCP。',
-            link: '/zh-CN/plugin-development',
-          },
-          {
-            slug: 'search',
-            title: '全局检索',
-            meta: 'search',
-            text: '在会话、页面与设置之间快速定位上下文。',
-            link: '/zh-CN/guide/screenshots',
-          },
-          {
-            slug: 'extensions-mcp',
-            title: '扩展与 MCP',
-            meta: 'extensions',
-            text: '子代理、技能、MCP 与权限边界都可检查、可配置。',
-            link: '/zh-CN/guide/mcp-market',
-          },
-          {
-            slug: 'settings-models',
-            title: '模型与供应商',
-            meta: 'models',
-            text: '模型可替换，供应商配置留在本地工作区内。',
-            link: '/zh-CN/guide/',
-          },
-        ],
-        journeyLabel: '按意图阅读',
-        journeyTitle: '先回答你正在解决的问题。',
-        intro:
-          '这不是按文件堆叠的目录，而是一张帮助你定位、理解、修改和验证系统的地图。',
-        journeys: [
-          {
-            index: '01',
-            label: 'ORIENT',
-            title: '建立产品模型',
-            text: '先知道当前交付了什么、明确不做什么。',
-            link: '/zh-CN/guide/',
-          },
-          {
-            index: '02',
-            label: 'TRACE',
-            title: '追踪一次请求',
-            text: '从 Renderer 走到 Electron、pi、Rust host 和 SQLite。',
-            link: '/zh-CN/spec/02-architecture/01-architecture',
-          },
-          {
-            index: '03',
-            label: 'EXTEND',
-            title: '开发一个插件',
-            text: '从包格式、API、权限到生命周期逐步展开。',
-            link: '/zh-CN/plugin-development',
-          },
-          {
-            index: '04',
-            label: 'SHIP',
-            title: '验证一次变化',
-            text: '把规格、实现、E2E 场景和交付记录连起来。',
-            link: '/zh-CN/spec/06-delivery/README',
-          },
-        ],
-        mapLabel: '系统边界',
-        mapTitle: '四层职责，一条可读主线。',
-        layers: [
+        stories: [
           {
-            name: 'Shell',
-            detail: 'Electron',
-            text: '桌面窗口、preload IPC、生命周期和平台能力。',
+            eyebrow: '独立工作台',
+            title: '不依附 IDE，\n也不挤在终端里。',
+            body: '项目、会话、评审、预览和 Agent 都在同一个桌面空间里长期存在。',
+            image: shot('chat_zh.webp'),
+            alt: '持久会话',
           },
           {
-            name: 'Agent',
-            detail: 'pi sidecar',
-            text: '代理循环、工具调用、上下文与 provider-facing model work。',
+            eyebrow: '插件驱动',
+            title: 'Core 只是底座。\n工作台由你组装。',
+            body: '面板、视图、Widget、Tool、MCP、主题与后台服务，都可以插件化。',
+            image: shot('plugins_zh.webp'),
+            alt: '插件市场',
           },
           {
-            name: 'Host',
-            detail: 'Rust core',
-            text: '权限、进程、文件系统、RPC 和可取消的运行时边界。',
+            eyebrow: 'Agent 编排',
+            title: '一个 Agent 不够，\n就拆开做。',
+            body: 'Subagent 处理独立任务，Worker Session 承接更长的工作流，并行推进。',
+            image: shot('session-orchestrator-overview.webp'),
+            alt: '多智能体编排',
           },
           {
-            name: 'State',
-            detail: 'SQLite',
-            text: '会话、配置、检查点、插件状态和持久化所有权。',
+            eyebrow: '模型自由',
+            title: '模型是零件。\n工作流是你的。',
+            body: '云端、本地、自建网关、兼容 API。随时切换，不必重搭流程。',
+            image: shot('model_zh.webp'),
+            alt: '模型切换',
           },
         ],
-        shelfLabel: '规格地图',
-        shelfTitle: '按主题深入，而不是在文件树里迷路。',
-        shelves: [
-          {
-            title: '产品',
-            text: '范围、操作模式和非目标。',
-            link: '/zh-CN/spec/01-product/README',
-          },
-          {
-            title: '架构',
-            text: '进程、数据和工程结构。',
-            link: '/zh-CN/spec/02-architecture/README',
-          },
-          {
-            title: '运行时',
-            text: '协议、工具、host 和模型。',
-            link: '/zh-CN/spec/03-runtime/README',
-          },
-          {
-            title: '体验',
-            text: '信息架构、国际化和交互。',
-            link: '/zh-CN/spec/04-ux/README',
-          },
-          {
-            title: '安全',
-            text: '权限、路径和隔离边界。',
-            link: '/zh-CN/spec/05-security/README',
-          },
-          {
-            title: '交付',
-            text: '验收、E2E 和发布。',
-            link: '/zh-CN/spec/06-delivery/README',
-          },
-          {
-            title: '插件',
-            text: '扩展包、API 和生命周期。',
-            link: '/zh-CN/spec/07-plugins/README',
-          },
-          {
-            title: '决策',
-            text: 'ADR、决策日志和开放问题。',
-            link: '/zh-CN/spec/08-meta/README',
-          },
+        modes: [
+          { label: 'Agent', text: '直接执行。适合日常开发。' },
+          { label: 'Plan', text: '先审方案。适合重构与高风险变更。' },
+          { label: 'Goal', text: '锁定结果。适合复杂长任务。' },
         ],
-        snapshotLabel: '实现快照',
-        snapshotTitle: '当前文档描述的版本线。',
-        snapshot: [
-          ['应用版本线', '0.15.2'],
-          ['Host wire protocol', 'v9'],
-          ['Storage schema', 'v11'],
-          ['文档源语言', 'EN / 中文'],
+        modesTitle: '三种节奏，\n同一种工作台。',
+        galleryTitle: '看见它如何工作。',
+        gallery: [
+          { src: shot('session-orchestrator-overview.webp'), alt: 'Session Orchestrator' },
+          { src: shot('session-orchestrator-worker.webp'), alt: 'Worker Session' },
+          { src: shot('addmodel_zh.webp'), alt: '自定义供应商' },
+          { src: shot('chat_zh.webp'), alt: '持久会话' },
         ],
-        footerTitle: '准备好进入代码库了吗？',
-        footerText: '从快速开始建立上下文，或者直接打开规格索引。',
-        footerPrimary: '开始阅读',
-        footerSecondary: '查看规格索引',
-        footerPrimaryLink: '/zh-CN/guide/',
-        footerSecondaryLink: '/zh-CN/spec/README',
+        localTitle: '本地优先。',
+        localBody: '项目、会话、设置默认留在本地。无强制账号，无强制中转。凭据进系统钥匙串，模型请求直达你的供应商。',
+        stepsTitle: '四步开始。',
+        steps: ['下载安装', '连接模型', '打开项目', '开始工作'],
+        ctaTitle: '把 Agent\n放进工作台。',
+        ctaBody: 'macOS · Windows · Linux',
+        download: '立即下载',
+        docs: '使用文档',
+        downloadHref: 'https://github.com/vastsa/PI-Desktop/releases/latest',
+        docsHref: '/zh-CN/guide/',
       }
     : {
-        tourLabel: 'Product tour',
-        tourTitle: 'See the real workspace — not a concept diagram.',
-        tourIntro:
-          'These are real PI-Desktop screens: sessions, panels, plugins, search, and model configuration in one persistent desktop environment.',
-        tour: [
-          {
-            slug: 'home-light',
-            title: 'Workspace home',
-            meta: 'workspace',
-            text: 'Projects, sessions, and orchestration state live in one persistent desktop environment.',
-            link: '/guide/screenshots',
-            feature: true,
-          },
+        stories: [
           {
-            slug: 'panel-files',
-            title: 'Files & preview panels',
-            meta: 'panels',
-            text: 'Work files, browser, and review side by side without a single IDE dependency.',
-            link: '/guide/screenshots',
+            eyebrow: 'Independent workspace',
+            title: 'Not another tab.\nNot another IDE plugin.',
+            body: 'Projects, sessions, reviews, previews, and agents live in one persistent desktop space.',
+            image: shot('chat_en.webp'),
+            alt: 'Persistent sessions',
           },
           {
-            slug: 'plugins-live',
-            title: 'Plugin runtime',
-            meta: 'plugins',
-            text: 'Plugins extend more than tools — panels, views, services, and MCP.',
-            link: '/plugin-development',
+            eyebrow: 'Plugin-powered',
+            title: 'The Core is the base.\nYou assemble the rest.',
+            body: 'Panels, views, widgets, tools, MCP servers, themes, and services — all pluggable.',
+            image: shot('plugins_en.webp'),
+            alt: 'Plugin market',
           },
           {
-            slug: 'search',
-            title: 'Global search',
-            meta: 'search',
-            text: 'Jump across sessions, pages, and settings without losing context.',
-            link: '/guide/screenshots',
+            eyebrow: 'Agent orchestration',
+            title: 'One agent\nis not enough.',
+            body: 'Subagents take independent work. Worker Sessions carry longer flows in parallel.',
+            image: shot('session-orchestrator-overview.webp'),
+            alt: 'Multi-agent orchestration',
           },
           {
-            slug: 'extensions-mcp',
-            title: 'Extensions & MCP',
-            meta: 'extensions',
-            text: 'Subagents, skills, MCP, and permission boundaries stay inspectable.',
-            link: '/guide/mcp-market',
-          },
-          {
-            slug: 'settings-models',
-            title: 'Models & providers',
-            meta: 'models',
-            text: 'Models stay replaceable. Provider configuration stays local.',
-            link: '/guide/',
+            eyebrow: 'Model freedom',
+            title: 'Models are parts.\nThe workflow is yours.',
+            body: 'Cloud, local, custom gateways, compatible APIs. Swap models without rebuilding.',
+            image: shot('model_en.webp'),
+            alt: 'Model switching',
           },
         ],
-        journeyLabel: 'Read by intent',
-        journeyTitle: 'Start with the question you are solving.',
-        intro:
-          'This is not a file dump. It is a map for locating, understanding, changing, and validating the system.',
-        journeys: [
-          {
-            index: '01',
-            label: 'ORIENT',
-            title: 'Build the product model',
-            text: 'Know what is shipped and what is deliberately out of scope.',
-            link: '/guide/',
-          },
-          {
-            index: '02',
-            label: 'TRACE',
-            title: 'Trace one request',
-            text: 'Follow the path through Renderer, Electron, pi, Rust host, and SQLite.',
-            link: '/spec/02-architecture/01-architecture',
-          },
-          {
-            index: '03',
-            label: 'EXTEND',
-            title: 'Build a plugin',
-            text: 'Move from package format to API, permissions, and lifecycle.',
-            link: '/plugin-development',
-          },
-          {
-            index: '04',
-            label: 'SHIP',
-            title: 'Validate a change',
-            text: 'Connect the spec, implementation, E2E scenario, and delivery record.',
-            link: '/spec/06-delivery/README',
-          },
+        modes: [
+          { label: 'Agent', text: 'Just execute. For everyday development.' },
+          { label: 'Plan', text: 'Review first. For refactors and high-risk changes.' },
+          { label: 'Goal', text: 'Lock the outcome. For complex, long-running work.' },
         ],
-        mapLabel: 'System boundaries',
-        mapTitle: 'Four layers of responsibility. One readable thread.',
-        layers: [
-          {
-            name: 'Shell',
-            detail: 'Electron',
-            text: 'Windows, preload IPC, lifecycle, and platform capabilities.',
-          },
-          {
-            name: 'Agent',
-            detail: 'pi sidecar',
-            text: 'Agent loop, tools, context, and provider-facing model work.',
-          },
-          {
-            name: 'Host',
-            detail: 'Rust core',
-            text: 'Permissions, processes, filesystem, RPC, and cancellation.',
-          },
-          {
-            name: 'State',
-            detail: 'SQLite',
-            text: 'Sessions, configuration, checkpoints, plugins, and ownership.',
-          },
+        modesTitle: 'Three rhythms.\nOne workspace.',
+        galleryTitle: 'See it work.',
+        gallery: [
+          { src: shot('session-orchestrator-overview.webp'), alt: 'Session Orchestrator' },
+          { src: shot('session-orchestrator-worker.webp'), alt: 'Worker Session' },
+          { src: shot('addmodel_en.webp'), alt: 'Custom providers' },
+          { src: shot('chat_en.webp'), alt: 'Persistent sessions' },
         ],
-        shelfLabel: 'Spec map',
-        shelfTitle: 'Go deep by topic, not by getting lost in the file tree.',
-        shelves: [
-          {
-            title: 'Product',
-            text: 'Scope, modes, and non-goals.',
-            link: '/spec/01-product/README',
-          },
-          {
-            title: 'Architecture',
-            text: 'Processes, data, and structure.',
-            link: '/spec/02-architecture/README',
-          },
-          {
-            title: 'Runtime',
-            text: 'Protocols, tools, host, and models.',
-            link: '/spec/03-runtime/README',
-          },
-          {
-            title: 'Experience',
-            text: 'IA, internationalization, and interaction.',
-            link: '/spec/04-ux/README',
-          },
-          {
-            title: 'Security',
-            text: 'Permissions, paths, and isolation.',
-            link: '/spec/05-security/README',
-          },
-          {
-            title: 'Delivery',
-            text: 'Acceptance, E2E, and release.',
-            link: '/spec/06-delivery/README',
-          },
-          {
-            title: 'Plugins',
-            text: 'Packages, APIs, and lifecycle.',
-            link: '/spec/07-plugins/README',
-          },
-          {
-            title: 'Decisions',
-            text: 'ADRs, decisions, and open questions.',
-            link: '/spec/08-meta/README',
-          },
-        ],
-        snapshotLabel: 'Implementation snapshot',
-        snapshotTitle: 'The line this documentation describes.',
-        snapshot: [
-          ['Application line', '0.15.2'],
-          ['Host wire protocol', 'v9'],
-          ['Storage schema', 'v11'],
-          ['Source languages', 'EN / 中文'],
-        ],
-        footerTitle: 'Ready to enter the codebase?',
-        footerText:
-          'Build context with the guide, or open the full specification index.',
-        footerPrimary: 'Start reading',
-        footerSecondary: 'Open spec index',
-        footerPrimaryLink: '/guide/',
-        footerSecondaryLink: '/spec/README',
+        localTitle: 'Local-first.',
+        localBody:
+          'Projects, sessions, and settings stay local by default. No mandatory account. No mandatory relay. Credentials live in the OS keychain. Model requests go straight to your provider.',
+        stepsTitle: 'Four steps.',
+        steps: ['Download', 'Connect a model', 'Open a project', 'Start working'],
+        ctaTitle: 'Put agents\nin a workspace.',
+        ctaBody: 'macOS · Windows · Linux',
+        download: 'Download',
+        docs: 'Documentation',
+        downloadHref: 'https://github.com/vastsa/PI-Desktop/releases/latest',
+        docsHref: '/guide/',
       }
 )
-
-function shotSrc(slug: string) {
-  return `/screenshots/app/${localeFolder.value}/${slug}.webp`
-}
 </script>
 
 <template>
-  <div class="home-modules">
-    <section class="home-block home-block--tour" aria-labelledby="home-tour-title">
-      <div class="home-block__heading">
-        <div>
-          <p class="home-kicker">{{ copy.tourLabel }}</p>
-          <h2 id="home-tour-title">{{ copy.tourTitle }}</h2>
-        </div>
-        <p class="home-block__intro">{{ copy.tourIntro }}</p>
-      </div>
-      <div class="home-tour">
-        <a
-          v-for="shot in copy.tour"
-          :key="shot.slug"
-          class="home-shot"
-          :class="{ 'home-shot--feature': shot.feature }"
-          :href="shot.link"
-        >
-          <div class="home-shot__frame">
-            <img
-              :src="shotSrc(shot.slug)"
-              :alt="shot.title"
-              width="1600"
-              height="1067"
-              loading="lazy"
-              decoding="async"
-            />
-          </div>
-          <figcaption>
-            <span class="home-shot__title">{{ shot.title }}</span>
-            <span class="home-shot__meta">{{ shot.meta }}</span>
-            <span class="home-shot__text">{{ shot.text }}</span>
-          </figcaption>
-        </a>
-      </div>
-    </section>
-
+  <div class="launch">
     <section
-      class="home-block home-block--journeys"
-      aria-labelledby="home-journeys-title"
+      v-for="(story, index) in copy.stories"
+      :key="story.eyebrow"
+      class="story"
+      :class="index % 2 === 1 ? 'story--flip' : ''"
     >
-      <div class="home-block__heading">
-        <div>
-          <p class="home-kicker">{{ copy.journeyLabel }}</p>
-          <h2 id="home-journeys-title">{{ copy.journeyTitle }}</h2>
-        </div>
-        <p class="home-block__intro">{{ copy.intro }}</p>
+      <div class="story__copy">
+        <p class="story__eyebrow">{{ story.eyebrow }}</p>
+        <h2 class="story__title">
+          <template v-for="(line, i) in story.title.split('\n')" :key="i">
+            <span>{{ line }}</span>
+          </template>
+        </h2>
+        <p class="story__body">{{ story.body }}</p>
       </div>
-      <div class="home-journeys">
-        <a
-          v-for="journey in copy.journeys"
-          :key="journey.index"
-          class="home-journey"
-          :href="journey.link"
-        >
-          <span class="home-journey__index">{{ journey.index }}</span>
-          <span class="home-journey__content">
-            <span class="home-journey__label">{{ journey.label }}</span>
-            <strong>{{ journey.title }}</strong>
-            <span>{{ journey.text }}</span>
-          </span>
-          <span class="home-link-arrow" aria-hidden="true">→</span>
-        </a>
+      <div class="story__visual">
+        <img :src="story.image" :alt="story.alt" loading="lazy" decoding="async" />
       </div>
     </section>
 
-    <section class="home-block home-block--map" aria-labelledby="home-map-title">
-      <div class="home-block__heading home-block__heading--compact">
-        <div>
-          <p class="home-kicker">{{ copy.mapLabel }}</p>
-          <h2 id="home-map-title">{{ copy.mapTitle }}</h2>
-        </div>
-      </div>
-      <div class="home-spine" role="list">
-        <div
-          v-for="layer in copy.layers"
-          :key="layer.name"
-          class="home-layer"
-          role="listitem"
-        >
-          <div class="home-layer__head">
-            <span class="home-layer__name">{{ layer.name }}</span>
-            <span class="home-layer__detail">{{ layer.detail }}</span>
-          </div>
-          <span class="home-layer__text">{{ layer.text }}</span>
-        </div>
+    <section class="modes">
+      <h2 class="modes__title">
+        <template v-for="(line, i) in copy.modesTitle.split('\n')" :key="i">
+          <span>{{ line }}</span>
+        </template>
+      </h2>
+      <div class="modes__list">
+        <article v-for="mode in copy.modes" :key="mode.label" class="mode">
+          <h3>{{ mode.label }}</h3>
+          <p>{{ mode.text }}</p>
+        </article>
       </div>
     </section>
 
-    <section
-      class="home-block home-block--shelf"
-      aria-labelledby="home-shelf-title"
-    >
-      <div class="home-block__heading">
-        <div>
-          <p class="home-kicker">{{ copy.shelfLabel }}</p>
-          <h2 id="home-shelf-title">{{ copy.shelfTitle }}</h2>
-        </div>
-      </div>
-      <div class="home-shelf">
-        <a
-          v-for="(shelf, index) in copy.shelves"
-          :key="shelf.title"
-          class="home-shelf__item"
-          :href="shelf.link"
-        >
-          <span class="home-shelf__number">{{
-            String(index + 1).padStart(2, '0')
-          }}</span>
-          <strong>{{ shelf.title }}</strong>
-          <span>{{ shelf.text }}</span>
-          <span class="home-link-arrow" aria-hidden="true">→</span>
-        </a>
+    <section class="gallery">
+      <h2 class="gallery__title">{{ copy.galleryTitle }}</h2>
+      <div class="gallery__rail">
+        <figure v-for="item in copy.gallery" :key="item.src" class="gallery__item">
+          <img :src="item.src" :alt="item.alt" loading="lazy" decoding="async" />
+        </figure>
       </div>
     </section>
 
-    <section class="home-snapshot" aria-labelledby="home-snapshot-title">
-      <div>
-        <p class="home-kicker">{{ copy.snapshotLabel }}</p>
-        <h2 id="home-snapshot-title">{{ copy.snapshotTitle }}</h2>
-      </div>
-      <div class="home-snapshot__grid" role="list">
-        <div v-for="item in copy.snapshot" :key="item[0]" role="listitem">
-          <span>{{ item[0] }}</span>
-          <strong>{{ item[1] }}</strong>
-        </div>
-      </div>
+    <section class="local">
+      <h2 class="local__title">{{ copy.localTitle }}</h2>
+      <p class="local__body">{{ copy.localBody }}</p>
     </section>
 
-    <section class="home-cta" aria-labelledby="home-cta-title">
-      <div>
-        <p class="home-kicker">PI-Desktop</p>
-        <h2 id="home-cta-title">{{ copy.footerTitle }}</h2>
-        <p>{{ copy.footerText }}</p>
-      </div>
-      <div class="home-cta__actions">
-        <a class="home-button home-button--primary" :href="copy.footerPrimaryLink">{{
-          copy.footerPrimary
-        }}</a>
-        <a
-          class="home-button home-button--secondary"
-          :href="copy.footerSecondaryLink"
-          >{{ copy.footerSecondary }}</a
-        >
+    <section class="steps">
+      <h2 class="steps__title">{{ copy.stepsTitle }}</h2>
+      <ol class="steps__list">
+        <li v-for="(step, index) in copy.steps" :key="step">
+          <span class="steps__index">{{ String(index + 1).padStart(2, '0') }}</span>
+          <span class="steps__label">{{ step }}</span>
+        </li>
+      </ol>
+    </section>
+
+    <section class="finale">
+      <h2 class="finale__title">
+        <template v-for="(line, i) in copy.ctaTitle.split('\n')" :key="i">
+          <span>{{ line }}</span>
+        </template>
+      </h2>
+      <p class="finale__body">{{ copy.ctaBody }}</p>
+      <div class="finale__actions">
+        <a class="pill pill--solid" :href="copy.downloadHref">{{ copy.download }}</a>
+        <a class="pill pill--ghost" :href="copy.docsHref">{{ copy.docs }}</a>
       </div>
     </section>
   </div>
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index fbbda350a4..7674124a09 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -1,97 +1,40 @@
 /*
-  PI-Desktop docs theme — product-aligned monochrome.
-  Surfaces follow the Codex charcoal system in apps/desktop/src/styles/tokens.css.
-  Accent is neutral (near-white / near-black), not a marketing blue.
+  PI-Desktop docs — Apple keynote register.
+  Black canvas, extreme type scale, floating product stills, no card chrome.
 */
 
-:root {
-  color-scheme: light;
-
-  /* Ink & surfaces (light) */
-  --docs-bg: #f7f7f5;
-  --docs-bg-elevated: #ffffff;
-  --docs-bg-soft: #efefec;
-  --docs-bg-inset: #e8e8e4;
-  --docs-line: rgba(12, 12, 12, 0.1);
-  --docs-line-strong: rgba(12, 12, 12, 0.16);
-  --docs-text-1: #141414;
-  --docs-text-2: #4a4a48;
-  --docs-text-3: #7a7a76;
-
-  /* Neutral accent — matches product --ds-accent polarity */
-  --docs-accent: #141414;
-  --docs-accent-soft: rgba(20, 20, 20, 0.08);
-  --docs-accent-contrast: #f7f7f5;
-  --docs-link: #141414;
-
-  --docs-stage-glow: rgba(20, 20, 20, 0.08);
-  --docs-stage-frame: rgba(12, 12, 12, 0.14);
-  --docs-shadow: 0 24px 64px rgba(12, 12, 12, 0.1);
-  --docs-shadow-soft: 0 10px 30px rgba(12, 12, 12, 0.06);
-
-  /* VitePress mapping */
-  --vp-c-brand-1: #141414;
-  --vp-c-brand-2: #2a2a28;
-  --vp-c-brand-3: #3f3f3c;
-  --vp-c-brand-soft: rgba(20, 20, 20, 0.08);
-  --vp-c-bg: var(--docs-bg);
-  --vp-c-bg-alt: var(--docs-bg-soft);
-  --vp-c-bg-elv: var(--docs-bg-elevated);
-  --vp-c-bg-soft: var(--docs-bg-soft);
-  --vp-c-divider: var(--docs-line);
-  --vp-c-gutter: var(--docs-bg-inset);
-  --vp-c-text-1: var(--docs-text-1);
-  --vp-c-text-2: var(--docs-text-2);
-  --vp-c-text-3: var(--docs-text-3);
-  --vp-c-default-1: var(--docs-text-1);
-  --vp-c-default-2: var(--docs-text-2);
-  --vp-c-default-3: var(--docs-text-3);
-  --vp-c-default-soft: var(--docs-accent-soft);
-
-  --vp-font-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
-    'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui,
-    sans-serif;
-  --vp-font-family-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo,
-    Consolas, monospace;
-
-  --vp-layout-max-width: 1480px;
-  --vp-sidebar-width: 268px;
-  --vp-nav-height: 64px;
-
-  --docs-reading-width: 748px;
-  --docs-home-width: 1120px;
-  --docs-radius-sm: 8px;
-  --docs-radius-md: 14px;
-  --docs-radius-lg: 20px;
-  --docs-radius-xl: 28px;
-}
-
+:root,
 .dark {
   color-scheme: dark;
 
-  --docs-bg: #0d0d0d;
-  --docs-bg-elevated: #181818;
-  --docs-bg-soft: #141414;
-  --docs-bg-inset: #0a0a0a;
-  --docs-line: rgba(255, 255, 255, 0.08);
-  --docs-line-strong: rgba(255, 255, 255, 0.14);
-  --docs-text-1: #f5f5f3;
-  --docs-text-2: rgba(255, 255, 255, 0.7);
-  --docs-text-3: rgba(255, 255, 255, 0.48);
-
-  --docs-accent: #f5f5f3;
+  --void: #000000;
+  --graphite: #1d1d1f;
+  --fog: #86868b;
+  --chalk: #f5f5f7;
+  --mist: rgba(255, 255, 255, 0.72);
+  --hair: rgba(255, 255, 255, 0.12);
+  --blue: #2997ff;
+  --blue-solid: #0071e3;
+
+  --docs-bg: var(--void);
+  --docs-bg-elevated: var(--graphite);
+  --docs-bg-soft: #101012;
+  --docs-bg-inset: #050505;
+  --docs-line: var(--hair);
+  --docs-line-strong: rgba(255, 255, 255, 0.2);
+  --docs-text-1: var(--chalk);
+  --docs-text-2: var(--mist);
+  --docs-text-3: var(--fog);
+  --docs-accent: var(--chalk);
   --docs-accent-soft: rgba(255, 255, 255, 0.08);
-  --docs-accent-contrast: #0d0d0d;
-  --docs-link: #f5f5f3;
-
-  --docs-stage-glow: rgba(255, 255, 255, 0.07);
-  --docs-stage-frame: rgba(255, 255, 255, 0.14);
-  --docs-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);
-  --docs-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);
-
-  --vp-c-brand-1: #f5f5f3;
-  --vp-c-brand-2: #d8d8d4;
-  --vp-c-brand-3: #b0b0aa;
+  --docs-accent-contrast: var(--void);
+  --docs-link: var(--blue);
+  --docs-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
+  --docs-shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.35);
+
+  --vp-c-brand-1: var(--chalk);
+  --vp-c-brand-2: #d2d2d7;
+  --vp-c-brand-3: #a1a1a6;
   --vp-c-brand-soft: rgba(255, 255, 255, 0.08);
   --vp-c-bg: var(--docs-bg);
   --vp-c-bg-alt: var(--docs-bg-soft);
@@ -106,6 +49,21 @@
   --vp-c-default-2: var(--docs-text-2);
   --vp-c-default-3: var(--docs-text-3);
   --vp-c-default-soft: var(--docs-accent-soft);
+
+  --vp-font-family-base: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
+    'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', system-ui, sans-serif;
+  --vp-font-family-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
+
+  --vp-layout-max-width: 1440px;
+  --vp-sidebar-width: 268px;
+  --vp-nav-height: 52px;
+
+  --docs-reading-width: 720px;
+  --docs-home-width: 1180px;
+  --docs-radius-sm: 12px;
+  --docs-radius-md: 18px;
+  --docs-radius-lg: 24px;
 }
 
 * {
@@ -113,26 +71,28 @@
 }
 
 html {
-  background: var(--docs-bg);
-  scroll-padding-top: calc(var(--vp-nav-height) + 16px);
+  background: var(--void);
+  scroll-behavior: smooth;
+  scroll-padding-top: 72px;
 }
 
 body {
   min-width: 320px;
   overflow-x: hidden;
-  background: var(--docs-bg);
+  background: var(--void);
+  color: var(--chalk);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 ::selection {
-  color: var(--docs-accent-contrast);
-  background: var(--docs-accent);
+  color: var(--void);
+  background: var(--chalk);
 }
 
 :focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--docs-accent) 70%, transparent);
+  outline: 2px solid var(--blue);
   outline-offset: 3px;
 }
 
@@ -142,94 +102,72 @@ body {
   position: sticky;
   top: 0;
   z-index: 30;
-  background: color-mix(in srgb, var(--docs-bg) 90%, transparent);
-  border-bottom: 1px solid transparent;
-  backdrop-filter: blur(18px) saturate(140%);
-}
-
-.VPNavBar:not(.home) {
-  border-bottom-color: var(--docs-line);
+  height: var(--vp-nav-height);
+  background: rgba(0, 0, 0, 0.72);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  backdrop-filter: saturate(180%) blur(20px);
 }
 
 .VPNavBarTitle .title {
-  font-weight: 650;
-  letter-spacing: -0.03em;
+  color: var(--chalk);
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .VPNavBarTitle .logo {
-  width: 22px;
-  height: 22px;
-  border-radius: 6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
 }
 
 .VPNavBarMenuLink,
 .VPNavScreenMenuLink,
-.VPLink,
-.VPSidebarItem .text {
-  transition: color 160ms ease, background-color 160ms ease,
-    border-color 160ms ease;
+.VPLink {
+  color: var(--mist) !important;
+  transition: color 160ms ease;
 }
 
 .VPNavBarMenuLink:hover,
 .VPNavBarMenuLink.active,
 .VPNavScreenMenuLink:hover,
 .VPLink:hover {
-  color: var(--docs-accent);
+  color: var(--chalk) !important;
 }
 
 .DocSearch-Button {
-  border: 1px solid var(--docs-line);
+  border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 999px;
-  background: var(--docs-accent-soft);
-  transition: border-color 160ms ease, background-color 160ms ease;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--mist);
 }
 
 .DocSearch-Button:hover {
-  border-color: var(--docs-line-strong);
-  background: var(--docs-bg-elevated);
+  background: rgba(255, 255, 255, 0.14);
 }
 
-/* ——— Sidebar ——— */
+/* ——— Sidebar / docs reading ——— */
 
 .VPSidebar {
-  padding-right: 18px;
-  padding-left: 18px;
-  border-right: 1px solid var(--docs-line);
-  background: color-mix(in srgb, var(--docs-bg) 88%, transparent);
-}
-
-.VPSidebarItem.level-0 {
-  padding-bottom: 10px;
-}
-
-.VPSidebarItem.level-0 + .VPSidebarItem.level-0 {
-  padding-top: 16px;
-  border-top: 1px solid var(--docs-line);
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.45);
 }
 
 .VPSidebarItem.level-0 > .item > .text {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.68rem;
+  color: var(--fog);
+  font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
 [lang='zh-CN'] .VPSidebarItem.level-0 > .item > .text {
-  font-family: var(--vp-font-family-base);
   letter-spacing: 0.04em;
   text-transform: none;
 }
 
-.VPSidebarItem.level-1 .item {
-  min-height: 32px;
-}
-
 .VPSidebarItem.level-1 .text {
   overflow: hidden;
   font-size: 0.875rem;
-  line-height: 1.4;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -238,180 +176,136 @@ body {
   margin: 0 -8px;
   padding: 6px 8px;
   border-radius: 8px;
-  background: var(--docs-accent-soft);
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .VPSidebarItem.is-active > .item > .link > .text {
-  color: var(--docs-text-1);
+  color: var(--chalk);
   font-weight: 600;
 }
 
-/* ——— Doc reading ——— */
-
 .VPDoc {
-  padding-top: 48px;
-  padding-bottom: 72px;
+  padding: 48px 0 96px;
 }
 
 .VPDoc .container {
-  width: 100%;
-  max-width: 1200px;
+  max-width: 1180px;
   margin: 0 auto;
 }
 
-.VPDoc .content {
-  min-width: 0;
-}
-
 .VPDoc .content-container {
   width: 100%;
   max-width: var(--docs-reading-width);
   margin: 0 auto;
 }
 
-.VPDocAside {
-  padding-left: 28px;
-}
-
 .VPDocAsideOutline {
-  border-left-color: var(--docs-line);
+  border-left-color: rgba(255, 255, 255, 0.1);
 }
 
 .VPDocAsideOutline .outline-title {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
+  color: var(--fog);
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 
-[lang='zh-CN'] .VPDocAsideOutline .outline-title {
-  font-family: var(--vp-font-family-base);
-  letter-spacing: 0.02em;
-  text-transform: none;
-}
-
-.VPDocAsideOutline .outline-link {
-  font-size: 0.8rem;
-  line-height: 1.5;
-}
-
 .vp-doc {
-  color: var(--docs-text-2);
-  font-size: 16px;
-  line-height: 1.78;
+  color: var(--mist);
+  font-size: 17px;
+  line-height: 1.7;
 }
 
 .vp-doc h1,
 .vp-doc h2,
 .vp-doc h3,
 .vp-doc h4 {
-  color: var(--docs-text-1);
-  font-weight: 650;
-  letter-spacing: -0.035em;
+  color: var(--chalk);
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
 .vp-doc h1 {
   margin-bottom: 18px;
-  font-family: var(--vp-font-family-base);
-  font-size: clamp(2rem, 4vw, 2.65rem);
-  line-height: 1.15;
-}
-
-.vp-doc h1 + blockquote {
-  margin-top: 22px;
+  font-size: clamp(2.1rem, 4vw, 3rem);
+  line-height: 1.1;
 }
 
 .vp-doc h2 {
-  margin-top: 52px;
-  padding-top: 34px;
-  border-top: 1px solid var(--docs-line);
-  font-size: 1.45rem;
+  margin-top: 56px;
+  padding-top: 32px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 1.6rem;
 }
 
 .vp-doc h3 {
-  margin-top: 34px;
+  margin-top: 32px;
   font-size: 1.15rem;
 }
 
-.vp-doc p,
-.vp-doc li {
-  text-wrap: pretty;
-}
-
 .vp-doc a {
-  color: var(--docs-link);
-  font-weight: 550;
-  text-decoration-thickness: 1px;
+  color: var(--blue);
+  font-weight: 500;
   text-underline-offset: 3px;
 }
 
 .vp-doc :not(pre) > code {
-  border: 1px solid var(--docs-line);
-  border-radius: 5px;
-  background: var(--docs-accent-soft);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.06);
   font-size: 0.86em;
 }
 
 .vp-doc div[class*='language-'] {
   max-width: 100%;
   margin: 22px 0;
-  border: 1px solid var(--docs-line);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--docs-radius-md);
   box-shadow: var(--docs-shadow-soft);
 }
 
-.vp-doc table {
-  display: table;
-  width: 100%;
-  min-width: 560px;
-  margin: 0;
-}
-
 .vp-doc .table-wrapper {
   max-width: 100%;
   margin: 24px 0;
   overflow-x: auto;
-  border: 1px solid var(--docs-line);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--docs-radius-md);
   -webkit-overflow-scrolling: touch;
 }
 
-.vp-doc .table-wrapper table {
+.vp-doc table {
+  display: table;
+  width: 100%;
+  min-width: 560px;
+  margin: 0;
   border-collapse: collapse;
 }
 
 .vp-doc th {
-  color: var(--docs-text-1);
-  background: var(--docs-bg-soft);
+  color: var(--chalk);
+  background: rgba(255, 255, 255, 0.05);
   font-size: 0.84rem;
-  font-weight: 650;
+  font-weight: 600;
   white-space: nowrap;
 }
 
 .vp-doc td {
-  font-size: 0.9rem;
+  font-size: 0.92rem;
   vertical-align: top;
 }
 
 .vp-doc th,
 .vp-doc td {
-  padding: 11px 14px;
-  border-color: var(--docs-line);
+  padding: 12px 14px;
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 .vp-doc blockquote {
   margin: 22px 0;
-  padding: 16px 18px;
-  border-left: 2px solid var(--docs-accent);
-  border-radius: 0 var(--docs-radius-sm) var(--docs-radius-sm) 0;
-  color: var(--docs-text-2);
-  background: var(--docs-accent-soft);
-}
-
-.vp-doc blockquote p {
-  margin: 0;
+  padding: 4px 0 4px 18px;
+  border-left: 2px solid var(--blue);
+  color: var(--mist);
+  background: transparent;
 }
 
 .vp-doc img {
@@ -419,774 +313,496 @@ body {
   max-width: 100%;
   height: auto;
   margin: 28px auto;
-  border: 1px solid var(--docs-line);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--docs-radius-md);
   box-shadow: var(--docs-shadow-soft);
 }
 
-.VPDocFooter {
-  margin-top: 52px;
-  padding-top: 22px;
-  border-top: 1px solid var(--docs-line);
-}
-
 .pager-link {
-  border-color: var(--docs-line);
+  border-color: rgba(255, 255, 255, 0.1);
   border-radius: var(--docs-radius-md);
-  background: var(--docs-bg-elevated);
+  background: var(--graphite);
 }
 
 .pager-link:hover {
-  border-color: var(--docs-line-strong);
+  border-color: rgba(255, 255, 255, 0.22);
 }
 
-/* ——— Home shell ——— */
+/* ——— Home hero (Apple) ——— */
 
 .VPHome {
   overflow: hidden;
-  background: var(--docs-bg);
+  background: var(--void);
 }
 
 .VPHero {
-  position: relative;
-  max-width: 1120px;
+  max-width: 1080px;
   margin: 0 auto;
-  /* Cancel VitePress's negative top margin that pulls the hero under the fixed nav. */
-  margin-top: 0 !important;
-  padding: 48px 0 24px;
+  padding: 88px 24px 24px;
+  text-align: center;
 }
 
 .VPHero .container {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 40px;
-  text-align: center;
+  gap: 0;
 }
 
 .VPHero .main {
-  min-width: 0;
   width: 100%;
+  min-width: 0;
 }
 
 .VPHero .name,
-.VPHero .text {
-  max-width: 720px;
+.VPHero .text,
+.VPHero .tagline {
+  max-width: 18em;
   margin-right: auto;
   margin-left: auto;
   font-family: var(--vp-font-family-base);
-  letter-spacing: -0.045em;
+  text-wrap: balance;
 }
 
 .VPHero .name {
-  color: var(--docs-text-1);
-  font-size: clamp(2.8rem, 6vw, 4.4rem);
-  font-weight: 700;
-  line-height: 1;
+  margin-bottom: 0.12em;
+  color: var(--fog);
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
 }
 
 .VPHero .text {
-  padding-top: 12px;
-  color: var(--docs-text-1);
-  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
-  font-weight: 600;
-  line-height: 1.18;
+  padding-top: 0;
+  color: var(--chalk);
+  font-size: clamp(2.6rem, 8vw, 5.5rem);
+  font-weight: 700;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
 }
 
 .VPHero .tagline {
-  max-width: 560px;
-  margin-right: auto;
-  margin-left: auto;
-  padding-top: 18px;
-  color: var(--docs-text-2);
-  font-size: 1.02rem;
-  line-height: 1.7;
+  max-width: 34em;
+  padding-top: 1.1rem;
+  color: var(--fog);
+  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
+  font-weight: 400;
+  line-height: 1.45;
 }
 
 .VPHero .actions {
+  display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  gap: 10px;
-  padding-top: 28px;
+  gap: 12px;
+  padding-top: 1.75rem;
 }
 
 .VPHero .action,
 .VPButton {
-  border-radius: 999px;
-  font-weight: 600;
-  transition: background-color 160ms ease, border-color 160ms ease,
-    transform 160ms ease;
+  min-height: 44px;
+  border-radius: 980px;
+  font-size: 1.05rem;
+  font-weight: 500;
+  transition: transform 160ms ease, background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+.VPHero .action:hover,
+.VPButton:hover {
+  transform: scale(1.02);
 }
 
 .VPButton.brand {
+  border-color: transparent;
+  color: #fff;
+  background: var(--blue-solid);
   box-shadow: none;
 }
 
 .VPButton.brand:hover {
-  transform: translateY(-1px);
+  background: #0077ed;
+}
+
+.VPButton.alt {
+  border-color: rgba(255, 255, 255, 0.2);
+  color: var(--chalk);
+  background: rgba(255, 255, 255, 0.08);
 }
 
-/* Hero product stage (image slot) — full-width laptop shot under copy */
+.VPButton.alt:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
 
 .VPHero .image {
   order: 2;
-  width: min(100%, 980px);
+  width: min(100vw, 1120px);
+  max-width: none;
+  margin: 2.5rem 0 0;
   min-height: 0;
-  margin: 0 !important;
 }
 
 .VPHero .image-container {
-  position: relative !important;
-  width: 100% !important;
-  height: auto !important;
-  transform: none !important;
+  width: 100%;
+  height: auto;
 }
 
-.VPHero .image-bg {
+.VPHero .image-bg,
+.VPHero .image-src {
   display: none !important;
 }
 
-.VPHero .image-src {
-  position: static !important;
-  top: auto !important;
-  left: auto !important;
-  max-width: none !important;
-  max-height: none !important;
-  transform: none !important;
+/* Signature: transparent product still with light bloom */
+.hero-visual {
+  position: relative;
+  width: 100%;
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 1rem 0 0;
 }
 
-/* HomeModules owns the homepage story; frontmatter features stay unused. */
+.hero-visual__glow {
+  position: absolute;
+  left: 50%;
+  bottom: 8%;
+  z-index: 0;
+  width: min(90%, 900px);
+  height: 42%;
+  border-radius: 50%;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.14),
+    rgba(255, 255, 255, 0.04) 40%,
+    transparent 70%
+  );
+  filter: blur(28px);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
 
-.VPHome .vp-doc {
-  max-width: var(--docs-home-width);
-  padding: 0 0 96px;
+.hero-visual__shot {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  border: 0;
+  border-radius: 18px;
+  background: transparent;
+  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.55);
+  object-fit: contain;
 }
 
-/* ——— Home modules ——— */
+/* ——— Launch story modules ——— */
 
-.home-modules {
+.launch {
   width: 100%;
   max-width: var(--docs-home-width);
   margin: 0 auto;
   padding: 0 24px 40px;
 }
 
-.home-block,
-.home-snapshot,
-.home-cta {
-  border-top: 1px solid var(--docs-line);
-}
-
-.home-block {
-  padding: 72px 0;
-}
-
-.home-block__heading {
+.story {
   display: grid;
-  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
-  gap: 48px;
-  align-items: end;
-  margin-bottom: 32px;
+  grid-template-columns: 1fr;
+  gap: 2.5rem;
+  align-items: center;
+  padding: 7.5rem 0;
 }
 
-.home-block__heading--compact {
-  display: block;
-  max-width: 640px;
+.story__copy {
+  max-width: 18em;
+  margin: 0 auto;
+  text-align: center;
 }
 
-.home-kicker {
-  margin: 0 0 12px;
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.68rem;
+.story__eyebrow {
+  margin: 0 0 0.9rem;
+  color: var(--fog);
+  font-size: 1.05rem;
   font-weight: 600;
-  letter-spacing: 0.12em;
-  line-height: 1.4;
-  text-transform: uppercase;
-}
-
-[lang='zh-CN'] .home-kicker {
-  font-family: var(--vp-font-family-base);
-  letter-spacing: 0.06em;
+  letter-spacing: -0.01em;
 }
 
-.home-block h2,
-.home-snapshot h2,
-.home-cta h2 {
-  max-width: 560px;
+.story__title {
   margin: 0;
-  color: var(--docs-text-1);
-  font-family: var(--vp-font-family-base);
-  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
+  color: var(--chalk);
+  font-size: clamp(2.4rem, 6vw, 4rem);
+  font-weight: 700;
   letter-spacing: -0.04em;
-  line-height: 1.16;
-}
-
-.home-block__intro {
-  max-width: 460px;
-  margin: 0;
-  color: var(--docs-text-2);
-  font-size: 0.98rem;
-  line-height: 1.7;
-}
-
-/* Product tour / screenshot gallery */
-
-.home-tour {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
+  line-height: 1.05;
 }
 
-.home-shot {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  margin: 0;
-  color: inherit !important;
-  text-decoration: none !important;
-}
-
-.home-shot--feature {
-  grid-column: 1 / -1;
+.story__title span {
+  display: block;
 }
 
-.home-shot__frame {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--docs-text-1) 12%, transparent);
-  border-radius: var(--docs-radius-lg);
-  background: var(--docs-bg-elevated);
-  box-shadow: var(--docs-shadow-soft);
-  aspect-ratio: 16 / 10.5;
-  transition: border-color 180ms ease, transform 180ms ease,
-    box-shadow 180ms ease;
+.story__body {
+  max-width: 28em;
+  margin: 1.1rem auto 0;
+  color: var(--fog);
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
+  line-height: 1.5;
+  text-wrap: pretty;
 }
 
-.home-shot:hover .home-shot__frame {
-  border-color: var(--docs-line-strong);
-  box-shadow: var(--docs-shadow);
-  transform: translateY(-2px);
+.story__visual {
+  width: min(100%, 980px);
+  margin: 0 auto;
 }
 
-.home-shot__frame img {
+.story__visual img {
   display: block;
   width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top center;
-  border: 0;
-  border-radius: 0;
-  margin: 0;
-  box-shadow: none;
-}
-
-.home-shot figcaption {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: baseline;
-  padding: 0 2px;
-}
-
-.home-shot__title {
-  color: var(--docs-text-1);
-  font-size: 0.95rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.home-shot__meta {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.7rem;
-}
-
-.home-shot__text {
-  grid-column: 1 / -1;
-  color: var(--docs-text-2);
-  font-size: 0.86rem;
-  line-height: 1.55;
-}
-
-/* Journeys */
-
-.home-journeys {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
+  height: auto;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: var(--graphite);
+  box-shadow: var(--docs-shadow);
 }
 
-.home-journey {
-  display: grid;
-  grid-template-columns: 34px minmax(0, 1fr) 18px;
-  gap: 14px;
-  min-height: 136px;
-  padding: 22px;
-  border: 1px solid var(--docs-line);
-  border-radius: var(--docs-radius-md);
-  color: inherit !important;
-  background: var(--docs-bg-elevated);
-  text-decoration: none !important;
-  transition: border-color 160ms ease, background-color 160ms ease,
-    transform 160ms ease;
+/* Modes */
+.modes {
+  padding: 5rem 0 2rem;
+  text-align: center;
 }
 
-.home-journey:hover {
-  border-color: var(--docs-line-strong);
-  transform: translateY(-1px);
+.modes__title {
+  margin: 0 auto;
+  max-width: 12em;
+  color: var(--chalk);
+  font-size: clamp(2.4rem, 6vw, 4rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
 }
 
-.home-journey__index {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.72rem;
-  padding-top: 3px;
+.modes__title span {
+  display: block;
 }
 
-.home-journey__content {
+.modes__list {
   display: grid;
-  align-content: start;
-  gap: 7px;
-}
-
-.home-journey__label {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.64rem;
-  font-weight: 600;
-  letter-spacing: 0.12em;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2rem;
+  max-width: 980px;
+  margin: 3.5rem auto 0;
 }
 
-.home-journey strong {
-  color: var(--docs-text-1);
-  font-size: 1rem;
-  letter-spacing: -0.015em;
+.mode h3 {
+  margin: 0 0 0.6rem;
+  color: var(--chalk);
+  font-size: 1.55rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
-.home-journey__content > span:last-child {
-  color: var(--docs-text-2);
-  font-size: 0.88rem;
-  line-height: 1.55;
+.mode p {
+  margin: 0;
+  color: var(--fog);
+  font-size: 1.05rem;
+  line-height: 1.5;
 }
 
-.home-link-arrow {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  text-align: right;
+/* Gallery */
+.gallery {
+  padding: 5rem 0 2rem;
+  text-align: center;
 }
 
-/* Architecture spine */
-
-.home-spine {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0;
-  overflow: hidden;
-  border: 1px solid var(--docs-line);
-  border-radius: var(--docs-radius-md);
-  background: var(--docs-bg-elevated);
+.gallery__title {
+  margin: 0;
+  color: var(--chalk);
+  font-size: clamp(2.2rem, 5vw, 3.4rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
 }
 
-.home-layer {
-  position: relative;
+.gallery__rail {
   display: grid;
-  gap: 10px;
-  min-width: 0;
-  padding: 24px 20px;
-  border-right: 1px solid var(--docs-line);
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(280px, 360px);
+  gap: 1.25rem;
+  margin-top: 2.5rem;
+  padding: 0.5rem 0 1.5rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
 }
 
-.home-layer:last-child {
-  border-right: 0;
+.gallery__item {
+  margin: 0;
+  scroll-snap-align: center;
 }
 
-.home-layer__head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
+.gallery__item img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  background: var(--graphite);
+  box-shadow: var(--docs-shadow-soft);
 }
 
-.home-layer__name {
-  color: var(--docs-text-1);
-  font-size: 1rem;
-  font-weight: 650;
-  letter-spacing: -0.02em;
+/* Local-first */
+.local {
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: 7rem 0 2rem;
+  text-align: center;
 }
 
-.home-layer__detail {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.68rem;
+.local__title {
+  margin: 0;
+  color: var(--chalk);
+  font-size: clamp(2.4rem, 6vw, 4rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
 }
 
-.home-layer__text {
-  color: var(--docs-text-2);
-  font-size: 0.86rem;
+.local__body {
+  margin: 1.25rem 0 0;
+  color: var(--fog);
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
   line-height: 1.55;
 }
 
-/* Spec shelf */
-
-.home-shelf {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  overflow: hidden;
-  border: 1px solid var(--docs-line);
-  border-radius: var(--docs-radius-md);
-  background: var(--docs-bg-elevated);
-}
-
-.home-shelf__item {
-  display: grid;
-  grid-template-columns: 28px minmax(0, 1fr) 16px;
-  gap: 8px 12px;
-  min-height: 118px;
-  padding: 18px;
-  border-right: 1px solid var(--docs-line);
-  border-bottom: 1px solid var(--docs-line);
-  color: inherit !important;
-  text-decoration: none !important;
-  transition: background-color 160ms ease;
-}
-
-.home-shelf__item:nth-child(4n) {
-  border-right: 0;
-}
-
-.home-shelf__item:nth-last-child(-n + 4) {
-  border-bottom: 0;
-}
-
-.home-shelf__item:hover {
-  background: var(--docs-accent-soft);
-}
-
-.home-shelf__number {
-  color: var(--docs-text-3);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.7rem;
-  padding-top: 2px;
-}
-
-.home-shelf__item strong {
-  color: var(--docs-text-1);
-  font-size: 0.98rem;
-}
-
-.home-shelf__item > span:nth-child(3) {
-  grid-column: 2 / -1;
-  color: var(--docs-text-2);
-  font-size: 0.86rem;
-  line-height: 1.5;
-}
-
-.home-shelf__item .home-link-arrow {
-  padding-top: 2px;
-}
-
-/* Snapshot */
-
-.home-snapshot {
-  display: grid;
-  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
-  gap: 48px;
-  align-items: end;
-  padding: 44px 0;
+/* Steps */
+.steps {
+  padding: 5rem 0 2rem;
+  text-align: center;
 }
 
-.home-snapshot h2 {
-  font-size: clamp(1.2rem, 2vw, 1.55rem);
+.steps__title {
+  margin: 0;
+  color: var(--chalk);
+  font-size: clamp(2.2rem, 5vw, 3.4rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
 }
 
-.home-snapshot__grid {
+.steps__list {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  overflow: hidden;
-  border: 1px solid var(--docs-line);
-  border-radius: var(--docs-radius-md);
-  background: var(--docs-bg-elevated);
-}
-
-.home-snapshot__grid > div {
-  min-width: 0;
-  padding: 14px 16px;
-  border-right: 1px solid var(--docs-line);
-}
-
-.home-snapshot__grid > div:last-child {
-  border-right: 0;
+  gap: 1.5rem;
+  max-width: 980px;
+  margin: 3rem auto 0;
+  padding: 0;
+  list-style: none;
 }
 
-.home-snapshot__grid span,
-.home-snapshot__grid strong {
+.steps__index {
   display: block;
+  margin-bottom: 0.75rem;
+  color: var(--fog);
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
 }
 
-.home-snapshot__grid span {
-  margin-bottom: 8px;
-  color: var(--docs-text-3);
-  font-size: 0.7rem;
-  line-height: 1.35;
+.steps__label {
+  color: var(--chalk);
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
 }
 
-.home-snapshot__grid strong {
-  overflow: hidden;
-  color: var(--docs-text-1);
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.84rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* Finale */
+.finale {
+  padding: 8rem 0 5rem;
+  text-align: center;
 }
 
-/* CTA */
+.finale__title {
+  margin: 0 auto;
+  max-width: 12em;
+  color: var(--chalk);
+  font-size: clamp(2.8rem, 7vw, 5rem);
+  font-weight: 700;
+  letter-spacing: -0.045em;
+  line-height: 1.02;
+}
 
-.home-cta {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 36px;
-  padding: 72px 0 24px;
+.finale__title span {
+  display: block;
 }
 
-.home-cta p:last-child {
-  margin: 14px 0 0;
-  color: var(--docs-text-2);
-  font-size: 0.95rem;
-  line-height: 1.65;
+.finale__body {
+  margin: 1.1rem 0 0;
+  color: var(--fog);
+  font-size: 1.15rem;
 }
 
-.home-cta__actions {
+.finale__actions {
   display: flex;
-  flex-shrink: 0;
   flex-wrap: wrap;
-  gap: 10px;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 2rem;
 }
 
-.home-button {
+.pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 44px;
-  padding: 0 18px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  font-size: 0.9rem;
-  font-weight: 600;
+  min-height: 48px;
+  padding: 0 22px;
+  border-radius: 980px;
+  font-size: 1.05rem;
+  font-weight: 500;
   text-decoration: none !important;
-  transition: background-color 160ms ease, border-color 160ms ease,
-    transform 160ms ease;
-}
-
-.home-button:hover {
-  transform: translateY(-1px);
-}
-
-.home-button--primary {
-  color: var(--docs-accent-contrast) !important;
-  background: var(--docs-accent);
-}
-
-.home-button--primary:hover {
-  background: color-mix(in srgb, var(--docs-accent) 88%, var(--docs-text-3));
-}
-
-.home-button--secondary {
-  color: var(--docs-text-1) !important;
-  border-color: var(--docs-line);
-  background: var(--docs-bg-elevated);
-}
-
-.home-button--secondary:hover {
-  border-color: var(--docs-line-strong);
-}
-
-/* ——— Product stage (hero laptop image) ——— */
-
-.home-stage {
-  position: relative;
-  width: 100%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.home-stage::before {
-  position: absolute;
-  inset: 6% 4% -8%;
-  z-index: 0;
-  border-radius: 50%;
-  background: radial-gradient(
-    ellipse at center,
-    var(--docs-stage-glow),
-    transparent 68%
-  );
-  content: '';
-  pointer-events: none;
+  transition: transform 160ms ease, background-color 160ms ease;
 }
 
-.home-stage__frame {
-  position: relative;
-  z-index: 1;
+.pill:hover {
+  transform: scale(1.02);
 }
 
-.home-stage__shot {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 16 / 9;
-  object-fit: cover;
-  object-position: center top;
-  border: 1px solid color-mix(in srgb, var(--docs-text-1) 12%, transparent);
-  border-radius: 14px;
-  background: transparent;
-  opacity: 1;
-  transition: opacity 220ms ease;
-  box-shadow: 0 28px 50px rgba(0, 0, 0, 0.35);
+.pill--solid {
+  color: #fff;
+  background: var(--blue-solid);
 }
 
-.home-stage__shot:not(.is-loaded) {
-  opacity: 0.72;
+.pill--solid:hover {
+  background: #0077ed;
 }
 
-.home-stage__caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 14px 2px 0;
-  color: var(--docs-text-3);
-  font-size: 0.78rem;
-  line-height: 1.4;
+.pill--ghost {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: var(--chalk);
+  background: rgba(255, 255, 255, 0.08);
 }
 
-.home-stage__caption strong {
-  color: var(--docs-text-2);
-  font-weight: 550;
+.pill--ghost:hover {
+  background: rgba(255, 255, 255, 0.14);
 }
 
 /* ——— Responsive ——— */
 
-@media (min-width: 1440px) {
-  .VPDoc.has-aside .content-container {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@media (max-width: 1199px) {
-  .VPHero,
-  .VPFeatures,
-  .VPHome .vp-doc {
-    padding-right: 32px !important;
-    padding-left: 32px !important;
-  }
-
-  .home-modules {
-    padding-right: 32px;
-    padding-left: 32px;
-  }
-
-  .home-stage {
-    max-width: none;
-  }
-}
-
 @media (max-width: 959px) {
-  .VPDoc {
-    padding-top: 36px;
-  }
-
-  .VPDoc .content-container {
-    max-width: 720px;
-  }
-
   .VPHero {
-    margin-top: 0 !important;
-    padding-top: 36px;
-  }
-
-  .VPHero .container {
-    gap: 32px;
-    text-align: center;
+    padding-top: 64px;
   }
 
-  .VPHero .main,
-  .VPHero.has-image .main {
-    order: 1;
-    width: 100%;
-  }
-
-  .VPHero .name,
-  .VPHero .text,
-  .VPHero .tagline {
-    max-width: 36rem;
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-  .VPHero .actions {
-    justify-content: center;
-  }
-
-  .VPHero .image,
-  .VPHero.has-image .image {
-    order: 2;
-    width: min(100%, 860px);
-    min-height: 0;
-    margin: 0 !important;
-  }
-
-  .home-block__heading,
-  .home-snapshot {
+  .modes__list,
+  .steps__list {
     grid-template-columns: 1fr;
-    gap: 18px;
-  }
-
-  .home-spine,
-  .home-shelf {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .home-layer:nth-child(2n) {
-    border-right: 0;
+    gap: 1.75rem;
+    max-width: 28rem;
   }
 
-  .home-layer:nth-child(-n + 2) {
-    border-bottom: 1px solid var(--docs-line);
-  }
-
-  .home-layer:last-child {
-    border-right: 0;
-  }
-
-  .home-shelf__item:nth-child(2n) {
-    border-right: 0;
-  }
-
-  .home-shelf__item {
-    border-bottom: 1px solid var(--docs-line);
-  }
-
-  .home-shelf__item:nth-last-child(-n + 2) {
-    border-bottom: 0;
+  .story {
+    padding: 5rem 0;
   }
 }
 
 @media (max-width: 767px) {
-  .VPNavBar {
-    position: sticky;
-    top: 0;
-    z-index: 30;
-    background: color-mix(in srgb, var(--docs-bg) 92%, transparent);
-    backdrop-filter: blur(16px);
-  }
-
-  .VPNavBarTitle .title {
-    border-bottom: 0;
-  }
-
   .VPDoc {
-    padding: 28px 0 56px;
+    padding: 28px 0 64px;
   }
 
   .VPDoc .content {
@@ -1195,19 +811,8 @@ body {
   }
 
   .vp-doc {
-    font-size: 15.5px;
-    line-height: 1.72;
-  }
-
-  .vp-doc h1 {
-    margin-top: 8px;
-    font-size: clamp(1.7rem, 7.5vw, 2.15rem);
-  }
-
-  .vp-doc h2 {
-    margin-top: 42px;
-    padding-top: 26px;
-    font-size: 1.3rem;
+    font-size: 16px;
+    line-height: 1.65;
   }
 
   .vp-doc .table-wrapper {
@@ -1219,166 +824,69 @@ body {
   }
 
   .VPHero {
+    padding: 48px 18px 12px !important;
     margin-top: 0 !important;
-    padding: 28px 18px 36px !important;
-  }
-
-  .VPHero .image,
-  .VPHero.has-image .image {
-    margin: 0 !important;
-  }
-
-  .VPHero .name {
-    font-size: clamp(2.35rem, 12vw, 3.2rem);
-  }
-
-  .VPHero .text {
-    font-size: clamp(1.25rem, 6.5vw, 1.65rem);
+    text-align: center;
   }
 
-  .VPHero .tagline {
-    padding-top: 14px;
-    font-size: 0.98rem;
+  .VPHero .image {
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
   }
 
   .VPHero .actions {
+    width: 100%;
     flex-direction: column;
-    align-items: stretch;
   }
 
   .VPHero .action {
     width: 100%;
-    min-height: 44px;
-  }
-
-  .home-stage {
-    max-width: none;
   }
 
-  .home-stage::before {
-    display: none;
+  .hero-visual__shot {
+    border-radius: 14px;
   }
 
-  .home-stage__caption {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .home-modules {
+  .launch {
     padding: 0 18px 24px;
   }
 
-  .home-block {
-    padding: 48px 0;
-  }
-
-  .home-tour {
-    grid-template-columns: 1fr;
-    gap: 22px;
-  }
-
-  .home-shot--feature {
-    grid-column: auto;
-  }
-
-  .home-journeys,
-  .home-spine,
-  .home-shelf {
-    grid-template-columns: 1fr;
+  .story,
+  .modes,
+  .gallery,
+  .local,
+  .steps {
+    padding: 4rem 0 1rem;
   }
 
-  .home-journey {
-    min-height: 0;
-    grid-template-columns: 28px minmax(0, 1fr) 16px;
-    padding: 18px;
-  }
-
-  .home-layer,
-  .home-layer:nth-child(2n),
-  .home-layer:last-child {
-    border-right: 0;
-    border-bottom: 1px solid var(--docs-line);
-  }
-
-  .home-layer:last-child {
-    border-bottom: 0;
-  }
-
-  .home-shelf__item,
-  .home-shelf__item:nth-child(2n),
-  .home-shelf__item:nth-child(4n),
-  .home-shelf__item:nth-last-child(-n + 2) {
-    min-height: 0;
-    border-right: 0;
-    border-bottom: 1px solid var(--docs-line);
-  }
-
-  .home-shelf__item:last-child {
-    border-bottom: 0;
-  }
-
-  .home-snapshot {
-    padding: 36px 0;
-  }
-
-  .home-snapshot__grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .home-snapshot__grid > div:nth-child(2n) {
-    border-right: 0;
-  }
-
-  .home-snapshot__grid > div:nth-child(-n + 2) {
-    border-bottom: 1px solid var(--docs-line);
+  .story__copy {
+    max-width: none;
   }
 
-  .home-cta {
-    display: grid;
-    align-items: start;
-    padding-top: 52px;
+  .finale {
+    padding: 5rem 0 3.5rem;
   }
 
-  .home-cta__actions {
+  .finale__actions {
     width: 100%;
     flex-direction: column;
   }
 
-  .home-button {
+  .pill {
     width: 100%;
-    min-height: 46px;
+    min-height: 50px;
   }
 }
 
-@media (max-width: 419px) {
-  .home-snapshot__grid {
-    grid-template-columns: 1fr;
-  }
-
-  .home-snapshot__grid > div {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 10px;
-    align-items: center;
-    border-right: 0;
-    border-bottom: 1px solid var(--docs-line);
-  }
-
-  .home-snapshot__grid > div:last-child {
-    border-bottom: 0;
-  }
-
-  .home-snapshot__grid span {
-    margin: 0;
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
-    scroll-behavior: auto !important;
     transition-duration: 0.01ms !important;
   }
 }
diff --git a/docs/index.md b/docs/index.md
index 278a86f7bd..ffa39e4e18 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,19 +1,16 @@
 ---
 layout: home
 title: PI-Desktop
-titleTemplate: Documentation for a modular desktop workspace for AI agents
+titleTemplate: A modular desktop workspace for AI agents
 hero:
   name: PI-Desktop
   text: A desktop workspace for AI agents.
-  tagline: Bring projects, agents, models, plugins, and workflows into one persistent, local-first environment. Model-agnostic. Plugin-powered.
+  tagline: Bring projects, agents, models, plugins, and workflows into one persistent desktop environment.
   actions:
     - theme: brand
-      text: Start with the guide
-      link: /guide/
-    - theme: alt
-      text: Product tour
-      link: /guide/screenshots
+      text: Download
+      link: https://github.com/vastsa/PI-Desktop/releases/latest
     - theme: alt
-      text: Spec map
-      link: /spec/README
+      text: Documentation
+      link: /guide/
 ---
diff --git a/docs/public/hero-workspace.webp b/docs/public/hero-workspace.webp
deleted file mode 100644
index 3089db9bb3..0000000000
Binary files a/docs/public/hero-workspace.webp and /dev/null differ
diff --git a/docs/public/readme/addmodel_en.webp b/docs/public/readme/addmodel_en.webp
new file mode 100644
index 0000000000..a3ea9ebf53
Binary files /dev/null and b/docs/public/readme/addmodel_en.webp differ
diff --git a/docs/public/readme/addmodel_zh.webp b/docs/public/readme/addmodel_zh.webp
new file mode 100644
index 0000000000..c0e0b8af13
Binary files /dev/null and b/docs/public/readme/addmodel_zh.webp differ
diff --git a/docs/public/readme/chat_en.webp b/docs/public/readme/chat_en.webp
new file mode 100644
index 0000000000..b89307b58e
Binary files /dev/null and b/docs/public/readme/chat_en.webp differ
diff --git a/docs/public/readme/chat_zh.webp b/docs/public/readme/chat_zh.webp
new file mode 100644
index 0000000000..ee5550e321
Binary files /dev/null and b/docs/public/readme/chat_zh.webp differ
diff --git a/docs/public/readme/home.webp b/docs/public/readme/home.webp
new file mode 100644
index 0000000000..d0c37f33b0
Binary files /dev/null and b/docs/public/readme/home.webp differ
diff --git a/docs/public/readme/model_en.webp b/docs/public/readme/model_en.webp
new file mode 100644
index 0000000000..dc3023b026
Binary files /dev/null and b/docs/public/readme/model_en.webp differ
diff --git a/docs/public/readme/model_zh.webp b/docs/public/readme/model_zh.webp
new file mode 100644
index 0000000000..d44c0e1b34
Binary files /dev/null and b/docs/public/readme/model_zh.webp differ
diff --git a/docs/public/readme/plugins_en.webp b/docs/public/readme/plugins_en.webp
new file mode 100644
index 0000000000..388e0ec477
Binary files /dev/null and b/docs/public/readme/plugins_en.webp differ
diff --git a/docs/public/readme/plugins_zh.webp b/docs/public/readme/plugins_zh.webp
new file mode 100644
index 0000000000..b1bce412e7
Binary files /dev/null and b/docs/public/readme/plugins_zh.webp differ
diff --git a/docs/public/readme/session-orchestrator-overview.webp b/docs/public/readme/session-orchestrator-overview.webp
new file mode 100644
index 0000000000..fe9ebf4fb6
Binary files /dev/null and b/docs/public/readme/session-orchestrator-overview.webp differ
diff --git a/docs/public/readme/session-orchestrator-worker.webp b/docs/public/readme/session-orchestrator-worker.webp
new file mode 100644
index 0000000000..7085ba5e6a
Binary files /dev/null and b/docs/public/readme/session-orchestrator-worker.webp differ
diff --git a/docs/zh-CN/index.md b/docs/zh-CN/index.md
index fa4652ba39..f765ed086f 100644
--- a/docs/zh-CN/index.md
+++ b/docs/zh-CN/index.md
@@ -1,19 +1,16 @@
 ---
 layout: home
-title: PI-Desktop 文档
-titleTemplate: 面向 AI 智能体的模块化桌面工作区
+title: PI-Desktop
+titleTemplate: 可拆卸的 AI Agent 桌面工作台
 hero:
   name: PI-Desktop
-  text: 给 AI 智能体一个桌面工作区。
-  tagline: 把项目、智能体、模型、插件和工作流收进同一个持续存在的本地环境。模型可替换，插件可扩展。
+  text: 可拆卸的 AI Agent 桌面工作台。
+  tagline: 把项目、Agent、模型、插件和工作流，装进一个长期可用的桌面环境。
   actions:
     - theme: brand
-      text: 先读快速开始
-      link: /zh-CN/guide/
-    - theme: alt
-      text: 产品一览
-      link: /zh-CN/guide/screenshots
+      text: 立即下载
+      link: https://github.com/vastsa/PI-Desktop/releases/latest
     - theme: alt
-      text: 规格地图
-      link: /zh-CN/spec/README
+      text: 使用文档
+      link: /zh-CN/guide/
 ---