diff --git a/index.html b/index.html
index 8388c4b..c92582b 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
   </head>
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..7709a74
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..8d7f47a
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/components/CinematicVideoPlayer.vue b/src/components/CinematicVideoPlayer.vue
new file mode 100644
index 0000000..98108f0
--- /dev/null
+++ b/src/components/CinematicVideoPlayer.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Maximize2, Pause, Play, RotateCcw, Volume2, VolumeX } from 'lucide-vue-next'
+
+interface CinematicVideoPlayerProps {
+  src: string
+  poster?: string
+  title?: string
+  accent?: string
+}
+
+const props = withDefaults(defineProps<CinematicVideoPlayerProps>(), {
+  poster: '',
+  title: '产品演示视频',
+  accent: '#14b8a6'
+})
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+const frameRef = ref<HTMLElement | null>(null)
+const isPlaying = ref(false)
+const isMuted = ref(false)
+const isLoading = ref(true)
+const hasError = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+const progressPreview = ref(0)
+const isScrubbing = ref(false)
+const reduceMotion = ref(false)
+
+let motionQuery: MediaQueryList | null = null
+
+const progress = computed(() => {
+  if (!duration.value) return 0
+  return (currentTime.value / duration.value) * 100
+})
+
+const progressStyle = computed(() => ({
+  '--video-progress': `${isScrubbing.value ? progressPreview.value : progress.value}%`,
+  '--video-accent': props.accent
+}))
+
+function formatTime(value: number) {
+  if (!Number.isFinite(value)) return '00:00'
+  const minutes = Math.floor(value / 60)
+  const seconds = Math.floor(value % 60)
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}
+
+function syncState() {
+  const video = videoRef.value
+  if (!video) return
+
+  isPlaying.value = !video.paused
+  isMuted.value = video.muted
+  currentTime.value = video.currentTime
+  duration.value = video.duration || 0
+}
+
+async function togglePlay() {
+  const video = videoRef.value
+  if (!video || hasError.value) return
+
+  try {
+    if (video.paused) {
+      await video.play()
+    } else {
+      video.pause()
+    }
+    syncState()
+  } catch {
+    hasError.value = true
+  }
+}
+
+function replay() {
+  const video = videoRef.value
+  if (!video || hasError.value) return
+
+  video.currentTime = 0
+  void video.play()
+  syncState()
+}
+
+function toggleMute() {
+  const video = videoRef.value
+  if (!video) return
+
+  video.muted = !video.muted
+  syncState()
+}
+
+function handleProgressInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  const nextProgress = Number(input.value)
+  progressPreview.value = nextProgress
+  isScrubbing.value = true
+
+  if (duration.value && videoRef.value) {
+    videoRef.value.currentTime = (nextProgress / 100) * duration.value
+    currentTime.value = videoRef.value.currentTime
+  }
+}
+
+function finishScrubbing() {
+  isScrubbing.value = false
+  syncState()
+}
+
+async function enterFullscreen() {
+  const target = frameRef.value
+  if (!target || !document.fullscreenEnabled) return
+
+  if (document.fullscreenElement) {
+    await document.exitFullscreen()
+    return
+  }
+
+  await target.requestFullscreen()
+}
+
+function readMotionPreference() {
+  reduceMotion.value = Boolean(motionQuery?.matches)
+}
+
+watch(
+  () => props.src,
+  () => {
+    hasError.value = false
+    isLoading.value = true
+    isPlaying.value = false
+    currentTime.value = 0
+    duration.value = 0
+    nextTick(() => videoRef.value?.load())
+  }
+)
+
+onMounted(() => {
+  motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+  readMotionPreference()
+  motionQuery.addEventListener('change', readMotionPreference)
+})
+
+onBeforeUnmount(() => {
+  motionQuery?.removeEventListener('change', readMotionPreference)
+})
+</script>
+
+<template>
+  <section
+    ref="frameRef"
+    class="cinematic-player"
+    :class="{ 'cinematic-player-reduced': reduceMotion, 'cinematic-player-error': hasError }"
+    :style="progressStyle"
+    :aria-label="title"
+  >
+    <video
+      ref="videoRef"
+      class="cinematic-player-video"
+      :src="src"
+      :poster="poster"
+      playsinline
+      preload="metadata"
+      @click="togglePlay"
+      @loadedmetadata="syncState"
+      @loadeddata="isLoading = false"
+      @canplay="isLoading = false"
+      @waiting="isLoading = true"
+      @playing="isLoading = false; syncState()"
+      @pause="syncState"
+      @timeupdate="syncState"
+      @ended="syncState"
+      @error="hasError = true; isLoading = false"
+    />
+
+    <div class="cinematic-player-vignette" aria-hidden="true"></div>
+
+    <div v-if="isLoading && !hasError" class="cinematic-player-state" aria-live="polite">
+      <span></span>
+      正在准备视频
+    </div>
+
+    <div v-if="hasError" class="cinematic-player-state cinematic-player-state-error" aria-live="polite">
+      视频暂时无法加载，请稍后重试
+    </div>
+
+    <button
+      v-if="!hasError && !isPlaying"
+      type="button"
+      class="cinematic-player-main"
+      :aria-label="isPlaying ? '暂停视频' : '播放视频'"
+      @click="togglePlay"
+    >
+      <Pause v-if="isPlaying" :size="30" fill="currentColor" aria-hidden="true" />
+      <Play v-else :size="30" fill="currentColor" aria-hidden="true" />
+    </button>
+
+    <div class="cinematic-player-controls" :class="{ 'cinematic-player-controls-visible': !isPlaying }">
+      <button type="button" :aria-label="isPlaying ? '暂停视频' : '播放视频'" @click="togglePlay">
+        <Pause v-if="isPlaying" :size="18" fill="currentColor" aria-hidden="true" />
+        <Play v-else :size="18" fill="currentColor" aria-hidden="true" />
+      </button>
+
+      <button type="button" aria-label="重新播放" @click="replay">
+        <RotateCcw :size="17" aria-hidden="true" />
+      </button>
+
+      <span class="cinematic-player-time">{{ formatTime(currentTime) }}</span>
+
+      <input
+        class="cinematic-player-progress"
+        type="range"
+        min="0"
+        max="100"
+        step="0.1"
+        :value="progress"
+        aria-label="视频播放进度"
+        @input="handleProgressInput"
+        @change="finishScrubbing"
+        @pointerup="finishScrubbing"
+        @keyup.enter="finishScrubbing"
+      >
+
+      <span class="cinematic-player-time">{{ formatTime(duration) }}</span>
+
+      <button type="button" :aria-label="isMuted ? '打开声音' : '静音'" @click="toggleMute">
+        <VolumeX v-if="isMuted" :size="18" aria-hidden="true" />
+        <Volume2 v-else :size="18" aria-hidden="true" />
+      </button>
+
+      <button type="button" aria-label="全屏播放" @click="enterFullscreen">
+        <Maximize2 :size="18" aria-hidden="true" />
+      </button>
+    </div>
+  </section>
+</template>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 4574a94..2c3ea2d 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,10 +1,35 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-import { ChevronDown, Menu, Monitor, Moon, Search, Stethoscope, Sun, User, X } from 'lucide-vue-next'
-import { siteConfig } from '@/site.config'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
+import {
+  ArrowRight,
+  ChevronDown,
+  Clock,
+  FileText,
+  History,
+  Menu,
+  Monitor,
+  Moon,
+  Search,
+  Stethoscope,
+  Sun,
+  Trash2,
+  User,
+  X
+} from 'lucide-vue-next'
+import {
+  caseStudies,
+  faqs,
+  homeCaseCards,
+  homeServiceItems,
+  pricingPlans,
+  productFeatures,
+  siteConfig,
+  videoShowcase
+} from '@/site.config'
 
 const route = useRoute()
+const router = useRouter()
 const themeMode = ref('system')
 const resolvedTheme = ref('light')
 const isThemeOpen = ref(false)
@@ -13,6 +38,13 @@ const themePopoverStyle = ref({})
 const isMobileOpen = ref(false)
 const openDesktopMenu = ref(null)
 const openMobileGroups = ref(['home'])
+const isPastFirstScreen = ref(false)
+const isSearchOpen = ref(false)
+const searchQuery = ref('')
+const searchInputRef = ref(null)
+const searchHistory = ref([])
+
+const SEARCH_HISTORY_KEY = 'xiaokang-search-history'
 
 const themeOptions = [
   { value: 'system', label: '跟随系统', icon: Monitor },
@@ -22,18 +54,209 @@ const themeOptions = [
 
 const menuGroups = [
   { key: 'home', label: '首页', to: '/', links: siteConfig.navigation.secondary.home },
-  { key: 'product', label: '产品', to: '/product', links: siteConfig.navigation.secondary.product }
+  { key: 'product', label: '产品', to: '/product', links: siteConfig.navigation.secondary.product },
+  { key: 'video', label: '视频', to: '/video/user', activePath: '/video', links: siteConfig.navigation.secondary.video }
 ]
 
 const activeTheme = computed(() => themeOptions.find((item) => item.value === themeMode.value) || themeOptions[0])
 const isHome = computed(() => route.path === '/')
 const isProduct = computed(() => route.path.startsWith('/product'))
+const isVideo = computed(() => route.path.startsWith('/video'))
+const isNavSolid = computed(() => isPastFirstScreen.value)
 const navTone = computed(() => {
-  if (isHome.value) return 'dark'
+  if (isHome.value && !isNavSolid.value) return 'dark'
   return resolvedTheme.value === 'dark' ? 'dark' : 'light'
 })
 
+const routeSearchItems = computed(() => [
+  {
+    id: 'route-home',
+    title: '首页',
+    description: siteConfig.brand.tagline,
+    to: '/',
+    category: '页面',
+    keywords: [siteConfig.brand.name, siteConfig.brand.description, 'home']
+  },
+  {
+    id: 'route-product',
+    title: '产品',
+    description: '功能说明、演示视频、定价计划、FAQ 与联系方式。',
+    to: '/product',
+    category: '页面',
+    keywords: ['产品介绍', '功能', '价格', 'FAQ']
+  },
+  {
+    id: 'route-video',
+    title: '视频',
+    description: '用户端、医生端、小程序店长管理端视频库。',
+    to: '/video/user',
+    category: '页面',
+    keywords: ['视频库', '演示视频', '用户端', '医生端', '店长端']
+  }
+])
+
+const navigationSearchItems = computed(() => {
+  const groups = [
+    { category: '首页标题', links: siteConfig.navigation.secondary.home },
+    { category: '产品标题', links: siteConfig.navigation.secondary.product },
+    { category: '视频分区', links: siteConfig.navigation.secondary.video }
+  ]
+
+  return groups.flatMap((group) =>
+    group.links.map((link) => ({
+      id: `nav-${link.to}`,
+      title: link.label,
+      description: `前往${group.category.replace('标题', '')}中的「${link.label}」。`,
+      to: link.to,
+      category: group.category,
+      keywords: [link.label, link.to]
+    }))
+  )
+})
+
+const contentSearchItems = computed(() => {
+  const homeItems = [
+    ...homeServiceItems.map((item) => ({
+      id: `home-service-${item.number}`,
+      title: item.name,
+      description: item.description,
+      to: '/#intro',
+      category: '首页标题',
+      keywords: [item.number, item.name, item.description]
+    })),
+    ...homeCaseCards.map((item) => ({
+      id: `home-case-${item.number}`,
+      title: item.name,
+      description: item.summary,
+      to: '/#cases',
+      category: '客户案例',
+      keywords: [item.category, item.name, item.summary]
+    }))
+  ]
+
+  const productItems = [
+    ...productFeatures.map((item) => ({
+      id: `product-feature-${item.title}`,
+      title: item.title,
+      description: item.body,
+      to: '/product#features',
+      category: '产品功能',
+      keywords: [item.title, item.body]
+    })),
+    ...caseStudies.map((item) => ({
+      id: `product-case-${item.client}`,
+      title: item.client,
+      description: item.result,
+      to: '/product',
+      category: '客户案例',
+      keywords: [item.client, item.result, item.quote]
+    })),
+    ...pricingPlans.map((item) => ({
+      id: `pricing-${item.name}`,
+      title: `${item.name}方案`,
+      description: item.description,
+      to: '/product#pricing',
+      category: '定价计划',
+      keywords: [item.name, item.price, item.unit, item.description, ...item.features]
+    })),
+    ...faqs.map((item) => ({
+      id: `faq-${item.q}`,
+      title: item.q,
+      description: item.a,
+      to: '/product#faq',
+      category: 'FAQ',
+      keywords: [item.q, item.a]
+    }))
+  ]
+
+  const videoItems = Object.entries(videoShowcase).flatMap(([audience, config]) => [
+    {
+      id: `video-audience-${audience}`,
+      title: config.label,
+      description: config.subtitle,
+      to: `/video/${audience}`,
+      category: '视频分区',
+      keywords: [config.badge, config.title, config.subtitle, ...config.scenes]
+    },
+    ...config.videos.map((video) => ({
+      id: `video-${audience}-${video.id}`,
+      title: video.title,
+      description: video.description,
+      to: `/video/${audience}?video=${video.id}`,
+      category: config.label,
+      keywords: [
+        config.label,
+        config.title,
+        video.title,
+        video.description,
+        video.tag,
+        video.duration,
+        ...video.highlights,
+        ...video.chapters.flatMap((chapter) => [chapter.title, chapter.body, chapter.time])
+      ]
+    }))
+  ])
+
+  return [...homeItems, ...productItems, ...videoItems]
+})
+
+const searchItems = computed(() => {
+  const seen = new Set()
+  return [...routeSearchItems.value, ...navigationSearchItems.value, ...contentSearchItems.value]
+    .filter((item) => {
+      const key = `${item.to}-${item.title}`
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+})
+
+const normalizedSearchQuery = computed(() => searchQuery.value.trim().toLowerCase())
+
+const searchResults = computed(() => {
+  const query = normalizedSearchQuery.value
+  if (!query) return searchItems.value.slice(0, 8)
+
+  return searchItems.value
+    .map((item) => {
+      const haystack = [
+        item.title,
+        item.description,
+        item.category,
+        ...(item.keywords || [])
+      ].join(' ').toLowerCase()
+
+      let score = 0
+      if (item.title.toLowerCase().includes(query)) score += 6
+      if (item.category.toLowerCase().includes(query)) score += 3
+      if (haystack.includes(query)) score += 2
+      return { ...item, score }
+    })
+    .filter((item) => item.score > 0)
+    .sort((a, b) => b.score - a.score || a.title.length - b.title.length)
+    .slice(0, 10)
+})
+
+const visibleHistory = computed(() => {
+  const available = new Map(searchItems.value.map((item) => [item.to, item]))
+  return searchHistory.value
+    .map((item) => available.get(item.to) || item)
+    .slice(0, 6)
+})
+
 let mediaQuery
+let scrollRaf = 0
+
+function updateHeaderScrollState() {
+  scrollRaf = 0
+  const firstScreenBottom = Math.max(0, window.innerHeight - 1)
+  isPastFirstScreen.value = window.scrollY > firstScreenBottom
+}
+
+function requestHeaderScrollState() {
+  if (scrollRaf) return
+  scrollRaf = window.requestAnimationFrame(updateHeaderScrollState)
+}
 
 function syncThemePopoverPosition() {
   if (!themeButtonRef.value) return
@@ -89,10 +312,74 @@ function toggleMobileGroup(key) {
     : [...openMobileGroups.value, key]
 }
 
+function openSearch() {
+  isSearchOpen.value = true
+  isThemeOpen.value = false
+  openDesktopMenu.value = null
+  nextTick(() => searchInputRef.value?.focus())
+}
+
+function closeSearch() {
+  isSearchOpen.value = false
+  searchQuery.value = ''
+}
+
+function loadSearchHistory() {
+  try {
+    const saved = JSON.parse(localStorage.getItem(SEARCH_HISTORY_KEY) || '[]')
+    searchHistory.value = Array.isArray(saved) ? saved.slice(0, 8) : []
+  } catch {
+    searchHistory.value = []
+  }
+}
+
+function saveSearchHistory(item) {
+  const record = {
+    id: item.id,
+    title: item.title,
+    description: item.description,
+    to: item.to,
+    category: item.category
+  }
+  const nextHistory = [
+    record,
+    ...searchHistory.value.filter((historyItem) => historyItem.to !== item.to)
+  ].slice(0, 8)
+
+  searchHistory.value = nextHistory
+  localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(nextHistory))
+}
+
+function clearSearchHistory() {
+  searchHistory.value = []
+  localStorage.removeItem(SEARCH_HISTORY_KEY)
+}
+
+function goSearchResult(item) {
+  saveSearchHistory(item)
+  closeSearch()
+  router.push(item.to)
+}
+
+function handleSearchKeydown(event) {
+  const isShortcut = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k'
+  if (isShortcut) {
+    event.preventDefault()
+    openSearch()
+    return
+  }
+
+  if (event.key === 'Escape' && isSearchOpen.value) {
+    closeSearch()
+  }
+}
+
 watch(() => route.fullPath, () => {
   isMobileOpen.value = false
   isThemeOpen.value = false
+  isSearchOpen.value = false
   openDesktopMenu.value = null
+  nextTick(updateHeaderScrollState)
 })
 
 watch(isThemeOpen, (isOpen) => {
@@ -111,12 +398,21 @@ onMounted(() => {
   themeMode.value = localStorage.getItem('xiaokang-theme-mode') || 'system'
   applyTheme()
   mediaQuery.addEventListener('change', applyTheme)
+  loadSearchHistory()
+  window.addEventListener('keydown', handleSearchKeydown)
+  updateHeaderScrollState()
+  window.addEventListener('scroll', requestHeaderScrollState, { passive: true })
+  window.addEventListener('resize', requestHeaderScrollState)
 })
 
 onBeforeUnmount(() => {
   mediaQuery?.removeEventListener('change', applyTheme)
   window.removeEventListener('resize', syncThemePopoverPosition)
   window.removeEventListener('scroll', syncThemePopoverPosition, true)
+  window.removeEventListener('scroll', requestHeaderScrollState)
+  window.removeEventListener('resize', requestHeaderScrollState)
+  window.removeEventListener('keydown', handleSearchKeydown)
+  if (scrollRaf) window.cancelAnimationFrame(scrollRaf)
 })
 </script>
 
@@ -126,9 +422,10 @@ onBeforeUnmount(() => {
     :class="[
       `site-header-tone-${navTone}`,
       {
-        'site-header-home': isHome,
-        'site-header-solid': !isHome,
-        'site-header-product': isProduct
+        'site-header-home': isHome && !isNavSolid,
+        'site-header-solid': isNavSolid,
+        'site-header-product': isProduct,
+        'site-header-video': isVideo
       }
     ]"
   >
@@ -137,16 +434,17 @@ onBeforeUnmount(() => {
       :class="[
         `site-nav-tone-${navTone}`,
         {
-          'site-nav-overlay': isHome,
-          'site-nav-solid': !isHome,
-          'site-nav-product': isProduct
+          'site-nav-solid': isNavSolid,
+          'site-nav-overlay': !isNavSolid,
+          'site-nav-product': isProduct,
+          'site-nav-video': isVideo
         }
       ]"
       style="animation-delay: 0ms"
     >
       <RouterLink to="/" class="site-logo" aria-label="萧康云医首页">
         <span class="site-logo-mark">
-          <Stethoscope :size="20" stroke-width="2.4" aria-hidden="true" />
+          <img src="/logo.png" alt="">
         </span>
         <span>{{ siteConfig.brand.name }}</span>
       </RouterLink>
@@ -163,7 +461,7 @@ onBeforeUnmount(() => {
           <RouterLink
             :to="group.to"
             class="primary-nav-link"
-            :class="{ 'primary-nav-link-active': isActive(group.to) }"
+            :class="{ 'primary-nav-link-active': isActive(group.activePath || group.to) }"
           >
             {{ group.label }}
             <ChevronDown :size="15" aria-hidden="true" />
@@ -185,7 +483,13 @@ onBeforeUnmount(() => {
       </nav>
 
       <div class="site-actions">
-        <button type="button" class="action-pill liquid-glass nav-action animate-blur-fade-up" style="animation-delay: 300ms">
+        <button
+          type="button"
+          class="action-pill liquid-glass site-search-trigger animate-blur-fade-up"
+          style="animation-delay: 300ms"
+          aria-label="打开全站搜索"
+          @click="openSearch"
+        >
           <Search :size="18" aria-hidden="true" />
           <span>搜索</span>
         </button>
@@ -266,4 +570,91 @@ onBeforeUnmount(() => {
       </div>
     </Transition>
   </Teleport>
+
+  <Teleport to="body">
+    <Transition name="search-panel">
+      <div v-if="isSearchOpen" class="site-search-overlay" @click.self="closeSearch">
+        <section
+          class="site-search-panel"
+          :class="`site-search-panel-tone-${navTone}`"
+          role="dialog"
+          aria-modal="true"
+          aria-label="全站搜索"
+        >
+          <div class="site-search-input-shell">
+            <Search :size="20" aria-hidden="true" />
+            <input
+              ref="searchInputRef"
+              v-model="searchQuery"
+              type="search"
+              placeholder="搜索页面、标题、视频、FAQ..."
+              aria-label="搜索页面、标题、视频、FAQ"
+            >
+            <button type="button" class="site-search-close" aria-label="关闭搜索" @click="closeSearch">
+              <X :size="18" aria-hidden="true" />
+            </button>
+          </div>
+
+          <div class="site-search-meta">
+            <span v-if="normalizedSearchQuery">找到 {{ searchResults.length }} 个相关结果</span>
+            <span v-else>可搜索全部路由、页面标题和视频条目</span>
+            <span class="site-search-shortcut">Ctrl K</span>
+          </div>
+
+          <div v-if="!normalizedSearchQuery && visibleHistory.length" class="site-search-history">
+            <div class="site-search-section-title">
+              <span><History :size="15" aria-hidden="true" /> 最近搜索</span>
+              <button type="button" @click="clearSearchHistory">
+                <Trash2 :size="14" aria-hidden="true" />
+                清空
+              </button>
+            </div>
+            <div class="site-search-results">
+              <button
+                v-for="item in visibleHistory"
+                :key="`history-${item.to}`"
+                type="button"
+                class="site-search-result site-search-result-history"
+                @click="goSearchResult(item)"
+              >
+                <span class="site-search-result-icon"><Clock :size="17" aria-hidden="true" /></span>
+                <span class="site-search-result-copy">
+                  <strong>{{ item.title }}</strong>
+                  <small>{{ item.category }} · {{ item.description }}</small>
+                </span>
+                <ArrowRight :size="16" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+
+          <div class="site-search-results">
+            <div class="site-search-section-title">
+              <span><FileText :size="15" aria-hidden="true" /> {{ normalizedSearchQuery ? '搜索结果' : '推荐入口' }}</span>
+            </div>
+
+            <button
+              v-for="item in searchResults"
+              :key="item.id"
+              type="button"
+              class="site-search-result"
+              @click="goSearchResult(item)"
+            >
+              <span class="site-search-result-icon">{{ item.category.slice(0, 1) }}</span>
+              <span class="site-search-result-copy">
+                <strong>{{ item.title }}</strong>
+                <small>{{ item.category }} · {{ item.description }}</small>
+              </span>
+              <ArrowRight :size="16" aria-hidden="true" />
+            </button>
+
+            <div v-if="normalizedSearchQuery && !searchResults.length" class="site-search-empty">
+              <Search :size="22" aria-hidden="true" />
+              <strong>没有找到匹配内容</strong>
+              <span>可以试试“医生端”“FAQ”“随访”“店长”这些关键词。</span>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 89e1a38..92f4ee1 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -6,7 +6,11 @@ import ThemeBackdrop from '@/components/ThemeBackdrop.vue'
 import { siteConfig } from '@/site.config'
 
 const route = useRoute()
-const backdropClass = computed(() => route.path.startsWith('/product') ? 'product-route-backdrop' : 'home-route-backdrop')
+const backdropClass = computed(() => {
+  if (route.path.startsWith('/video')) return 'video-route-backdrop'
+  if (route.path.startsWith('/product')) return 'product-route-backdrop'
+  return 'home-route-backdrop'
+})
 </script>
 
 <template>
@@ -25,6 +29,7 @@ const backdropClass = computed(() => route.path.startsWith('/product') ? 'produc
           <nav aria-label="底部导航">
             <RouterLink to="/">首页</RouterLink>
             <RouterLink to="/product">产品</RouterLink>
+            <RouterLink to="/video/user">视频</RouterLink>
             <RouterLink to="/#business">业务介绍</RouterLink>
             <RouterLink to="/product#pricing">定价计划</RouterLink>
             <RouterLink to="/product#contact">联系咨询</RouterLink>
diff --git a/src/router/index.js b/src/router/index.js
index 1534939..54925e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,8 @@ const routes = [
     children: [
       { path: '', name: 'Home', component: () => import('@/views/index/index.vue') },
       { path: 'product', name: 'Product', component: () => import('@/views/product/index.vue') },
+      { path: 'video', redirect: '/video/user' },
+      { path: 'video/:audience(user|doctor|manager)', name: 'VideoShowcase', component: () => import('@/views/video/index.vue') },
     ],
   },
 ]
diff --git a/src/site.config.js b/src/site.config.js
index bc12b76..c51513a 100644
--- a/src/site.config.js
+++ b/src/site.config.js
@@ -7,7 +7,8 @@ export const siteConfig = {
   navigation: {
     primary: [
       { label: '首页', to: '/' },
-      { label: '产品', to: '/product' }
+      { label: '产品', to: '/product' },
+      { label: '视频', to: '/video/user' }
     ],
     secondary: {
       home: [
@@ -22,6 +23,11 @@ export const siteConfig = {
         { label: '定价计划', to: '/product#pricing' },
         { label: 'FAQ', to: '/product#faq' },
         { label: '联系方式', to: '/product#contact' }
+      ],
+      video: [
+        { label: '用户端', to: '/video/user' },
+        { label: '医生端', to: '/video/doctor' },
+        { label: '小程序店长管理端', to: '/video/manager' }
       ]
     }
   },
@@ -39,6 +45,192 @@ export const siteConfig = {
   }
 }
 
+export const videoShowcase = {
+  user: {
+    label: '用户端',
+    badge: 'Patient App',
+    title: '把就医、复诊和健康管理放进一个温柔的移动体验。',
+    subtitle: '面向患者和家属，展示预约复诊、报告查看、用药提醒、随访沟通与健康档案的完整路径。',
+    cta: '预约用户端演示',
+    accent: '#14b8a6',
+    metrics: [
+      { value: '3 步', label: '完成复诊预约' },
+      { value: '24h', label: '随访消息触达' },
+      { value: '1 个档案', label: '串联全周期记录' }
+    ],
+    scenes: ['互联网医院入口', '慢病随访服务', '复诊预约与报告查询'],
+    videos: [
+      {
+        id: 'patient-home',
+        title: '用户端总览',
+        description: '从健康首页进入，快速看懂预约、报告、提醒和随访任务如何集中管理。',
+        duration: '01:12',
+        tag: '入门必看',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:08', title: '首页健康卡片', body: '把待办、报告和医生提醒集中呈现，用户打开就知道下一步。' },
+          { time: '00:28', title: '复诊与随访', body: '支持线上复诊、随访问卷、用药提醒和医患消息闭环。' },
+          { time: '00:52', title: '家庭成员管理', body: '家属可协助老人和儿童管理档案、预约与健康任务。' }
+        ],
+        highlights: ['报告与处方清晰可追踪', '消息提醒不打扰但不错过', '适配移动端单手操作']
+      },
+      {
+        id: 'patient-followup',
+        title: '随访与复诊流程',
+        description: '展示患者收到提醒、填写问卷、提交复诊申请到收到医生建议的完整闭环。',
+        duration: '01:36',
+        tag: '服务流程',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:06', title: '提醒触达', body: '用清楚的任务卡片提示患者按时完成随访和复诊动作。' },
+          { time: '00:31', title: '问卷填写', body: '把症状、用药、指标和反馈拆成移动端易填写的步骤。' },
+          { time: '01:05', title: '医生建议回传', body: '医生处理后，患者端能看到复诊建议、宣教内容和下一次提醒。' }
+        ],
+        highlights: ['随访任务清单化', '复诊状态实时可见', '医患沟通自然衔接']
+      },
+      {
+        id: 'patient-family',
+        title: '家庭成员代管',
+        description: '面向老人、儿童和家庭照护场景，展示家属如何代管健康档案与复诊任务。',
+        duration: '01:08',
+        tag: '家庭场景',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:05', title: '成员切换', body: '同一账号下快速切换家庭成员，避免档案和任务混淆。' },
+          { time: '00:26', title: '健康档案', body: '重要报告、处方、随访记录按成员沉淀，后续查询更省心。' },
+          { time: '00:49', title: '照护提醒', body: '把用药、复诊和随访提醒同步给家属，减少遗漏。' }
+        ],
+        highlights: ['多成员管理清晰', '适合家庭照护', '降低老人操作压力']
+      }
+    ]
+  },
+  doctor: {
+    label: '医生端',
+    badge: 'Doctor Console',
+    title: '让医生快速看清患者状态，并把关键任务稳稳接住。',
+    subtitle: '面向医生团队，展示患者画像、风险提醒、复诊处理、随访审核和协同任务流。',
+    cta: '预约医生端演示',
+    accent: '#22d3ee',
+    metrics: [
+      { value: '1 屏', label: '查看患者概况' },
+      { value: 'AI', label: '辅助风险分层' },
+      { value: '多角色', label: '协同处理任务' }
+    ],
+    scenes: ['专科医生工作台', '慢病管理中心', '区域会诊协同'],
+    videos: [
+      {
+        id: 'doctor-workbench',
+        title: '医生工作台总览',
+        description: '展示医生如何在一个视图里查看患者状态、风险标签、待处理任务和沟通记录。',
+        duration: '01:20',
+        tag: '工作台',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:10', title: '患者画像', body: '聚合就诊、检查、随访和风险标签，减少医生来回切换。' },
+          { time: '00:34', title: '任务分诊', body: '把高风险、待复诊、待审核事项按优先级推送给责任医生。' },
+          { time: '01:04', title: '医患沟通', body: '复诊建议、处方流转和健康宣教在同一工作台完成。' }
+        ],
+        highlights: ['患者状态清楚呈现', '高风险任务优先处理', '适合医生和护理团队协同']
+      },
+      {
+        id: 'doctor-risk',
+        title: '风险预警处理',
+        description: '聚焦 AI 风险分层、高危患者提醒和医生处理路径，适合慢病中心演示。',
+        duration: '01:28',
+        tag: '风险管理',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:07', title: '风险列表', body: '按风险等级、异常指标和随访反馈筛选需要优先处理的患者。' },
+          { time: '00:39', title: '详情研判', body: '把历史指标、用药、报告和沟通记录放到同一判断上下文。' },
+          { time: '01:02', title: '处理闭环', body: '医生可下发建议、发起复诊或转给护理团队继续跟进。' }
+        ],
+        highlights: ['风险分层可解释', '高危患者不遗漏', '处理动作可追踪']
+      },
+      {
+        id: 'doctor-collaboration',
+        title: '医护协同任务流',
+        description: '展示医生、护士、运营人员如何围绕同一个患者任务分工协同。',
+        duration: '01:18',
+        tag: '协同流程',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:09', title: '任务分派', body: '责任医生发起任务后，可按角色分派给护理或运营团队。' },
+          { time: '00:33', title: '进度同步', body: '每个处理节点都有状态记录，团队成员看到同一份进度。' },
+          { time: '00:58', title: '结果归档', body: '复诊、随访和沟通结果沉淀到患者档案中，方便复盘。' }
+        ],
+        highlights: ['多角色分工清晰', '任务状态实时同步', '结果自动沉淀']
+      }
+    ]
+  },
+  manager: {
+    label: '小程序店长管理端',
+    badge: 'Mini Program Manager',
+    title: '让店长在小程序里看懂运营、服务和团队执行。',
+    subtitle: '面向门店店长和运营负责人，展示门店指标、服务进度、人员任务、客户触达与异常提醒。',
+    cta: '预约店长端演示',
+    accent: '#059669',
+    metrics: [
+      { value: '实时', label: '查看门店经营状态' },
+      { value: '清单化', label: '跟进服务任务' },
+      { value: '移动端', label: '随时处理异常' }
+    ],
+    scenes: ['连锁诊所门店', '康复服务中心', '健康管理机构'],
+    videos: [
+      {
+        id: 'manager-dashboard',
+        title: '门店经营总览',
+        description: '把今日服务、预约、复诊、随访和转化指标放到店长能快速扫读的移动看板。',
+        duration: '01:16',
+        tag: '经营看板',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:12', title: '门店经营总览', body: '把今日服务量、预约、复诊、随访和转化指标放到一张看板。' },
+          { time: '00:38', title: '团队任务管理', body: '按成员查看待处理事项，帮助店长及时调度服务资源。' },
+          { time: '01:02', title: '客户触达跟进', body: '沉淀客户服务记录，异常提醒和回访动作可直接闭环。' }
+        ],
+        highlights: ['移动端看板适合巡店', '服务进度一眼可见', '异常提醒可快速处理']
+      },
+      {
+        id: 'manager-team',
+        title: '团队任务排班',
+        description: '展示店长如何查看成员任务、调度服务资源，并及时处理未完成事项。',
+        duration: '01:22',
+        tag: '团队管理',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:08', title: '成员视图', body: '按成员查看今日待办、超时任务和服务完成情况。' },
+          { time: '00:36', title: '任务调度', body: '店长可以快速调整负责人，让门店服务节奏更稳定。' },
+          { time: '01:01', title: '执行复盘', body: '服务结果和异常原因保留记录，方便日后复盘团队执行。' }
+        ],
+        highlights: ['成员状态清晰', '调度动作更快', '适合移动巡店']
+      },
+      {
+        id: 'manager-customer',
+        title: '客户触达与回访',
+        description: '面向客户运营，展示门店如何查看触达任务、回访状态和异常提醒。',
+        duration: '01:14',
+        tag: '客户运营',
+        src: siteConfig.hero.video.src,
+        poster: siteConfig.hero.video.poster,
+        chapters: [
+          { time: '00:06', title: '触达清单', body: '把待回访、待确认、待复诊的客户集中到清单里。' },
+          { time: '00:29', title: '回访记录', body: '客户沟通结果实时记录，避免门店多人跟进时信息丢失。' },
+          { time: '00:56', title: '异常提醒', body: '异常反馈会进入店长视图，便于快速介入处理。' }
+        ],
+        highlights: ['客户任务集中呈现', '回访结果有记录', '异常反馈更快闭环']
+      }
+    ]
+  }
+}
+
 export const metrics = [
   { value: '1200+', label: '接入医疗机构' },
   { value: '38%', label: '随访效率提升' },
@@ -182,26 +374,104 @@ export const homeCaseCards = [
 
 export const pricingPlans = [
   {
-    name: '标准版',
-    price: '¥6,800',
-    unit: '机构 / 月',
-    description: '适合单体医院、门诊部或成长型诊所。',
-    features: ['患者档案云管理', '在线复诊与随访', '基础运营报表', '标准接口支持']
+    name: '免费版',
+    step: '01',
+    tagline: '基础开诊',
+    visualTone: 'starter',
+    price: '¥3,888',
+    unit: '机构 / 年',
+    audience: '适合刚开始数字化运营的诊所或门诊。',
+    description: '覆盖医生、处方、挂号、对账和推广员等基础经营闭环。',
+    highlights: ['3 个医生账号开通', '处方挂号经营闭环', '推广员与对账可用'],
+    features: ['3 个医生账号', '分账功能', '开具处方功能', '挂号功能', '对账功能', '推广员模块'],
+    ctaLabel: '咨询开通',
+    ctaIntent: '我想了解免费版开通'
   },
   {
-    name: '专业版',
-    price: '¥18,000',
-    unit: '医疗集团 / 月',
-    description: '适合多院区协同、连锁机构与医共体。',
-    features: ['区域协同工作台', 'AI 风险预警', '高级权限治理', '专属实施顾问'],
-    highlighted: true
+    name: '高级版',
+    step: '02',
+    tagline: '推荐成长型机构',
+    visualTone: 'growth',
+    price: '¥5,888',
+    unit: '机构 / 年',
+    audience: '适合需要持续回访、客户沉淀和转诊协同的门店。',
+    description: '在免费版基础上强化客户管理和转诊流转。',
+    highlights: ['包含免费版全部能力', '客户快捷回访', '转诊协同流程'],
+    features: ['客户管理', '快捷回访', '转诊功能'],
+    includedFrom: '包含免费版所有功能',
+    isRecommended: true,
+    highlighted: true,
+    ctaLabel: '预约高级版方案',
+    ctaIntent: '我想了解高级版方案'
   },
   {
-    name: '旗舰版',
-    price: '定制',
-    unit: '私有化 / 混合云',
-    description: '适合大型医疗集团、政府平台与高合规场景。',
-    features: ['私有化部署', '数据中台集成', '定制模型与流程', 'SLA 与驻场支持']
+    name: '定制版',
+    step: '03',
+    tagline: '互联网诊疗',
+    visualTone: 'clinical',
+    price: '¥13,888',
+    unit: '机构 / 年',
+    audience: '适合计划开展在线诊疗、品牌化运营的医疗机构。',
+    description: '在高级版基础上增加线上诊疗合规协助和店铺装修。',
+    highlights: ['包含高级版全部能力', '在线诊疗开通', '备案协助与店装'],
+    features: ['在线诊疗功能', '协助备案', '店铺装修'],
+    includedFrom: '包含高级版所有功能',
+    ctaLabel: '咨询定制方案',
+    ctaIntent: '我想了解定制版方案'
+  },
+  {
+    name: '私有化部署',
+    step: '04',
+    tagline: '企业私有化',
+    visualTone: 'enterprise',
+    price: '面议',
+    unit: '客户服务器 / 定制项目',
+    audience: '适合对服务器归属、合规备案和流程定制要求更高的客户。',
+    description: '支持备案到客户自有服务器，并按项目做定制化开发。',
+    highlights: ['包含定制版全部能力', '客户自有服务器备案', '按项目定制开发'],
+    features: ['备案到客户自有服务器', '私有化部署支持', '定制化开发'],
+    includedFrom: '包含定制版所有功能',
+    isEnterprise: true,
+    ctaLabel: '联系部署顾问',
+    ctaIntent: '我想了解私有化部署'
+  }
+]
+
+export const pricingFeatureGroups = [
+  {
+    name: '基础经营',
+    rows: [
+      { label: '医生账号', values: { 免费版: '3 个', 高级版: '3 个', 定制版: '3 个', 私有化部署: '3 个起' } },
+      { label: '分账功能', values: { 免费版: true, 高级版: true, 定制版: true, 私有化部署: true } },
+      { label: '开具处方功能', values: { 免费版: true, 高级版: true, 定制版: true, 私有化部署: true } },
+      { label: '挂号功能', values: { 免费版: true, 高级版: true, 定制版: true, 私有化部署: true } },
+      { label: '对账功能', values: { 免费版: true, 高级版: true, 定制版: true, 私有化部署: true } },
+      { label: '推广员模块', values: { 免费版: true, 高级版: true, 定制版: true, 私有化部署: true } }
+    ]
+  },
+  {
+    name: '客户运营',
+    rows: [
+      { label: '客户管理', values: { 免费版: false, 高级版: true, 定制版: true, 私有化部署: true } },
+      { label: '快捷回访', values: { 免费版: false, 高级版: true, 定制版: true, 私有化部署: true } },
+      { label: '转诊功能', values: { 免费版: false, 高级版: true, 定制版: true, 私有化部署: true } }
+    ]
+  },
+  {
+    name: '互联网诊疗',
+    rows: [
+      { label: '在线诊疗功能', values: { 免费版: false, 高级版: false, 定制版: true, 私有化部署: true } },
+      { label: '协助备案', values: { 免费版: false, 高级版: false, 定制版: true, 私有化部署: true } },
+      { label: '店铺装修', values: { 免费版: false, 高级版: false, 定制版: true, 私有化部署: true } }
+    ]
+  },
+  {
+    name: '部署与定制',
+    rows: [
+      { label: '备案到客户自有服务器', values: { 免费版: false, 高级版: false, 定制版: false, 私有化部署: true } },
+      { label: '私有化部署支持', values: { 免费版: false, 高级版: false, 定制版: false, 私有化部署: true } },
+      { label: '定制化开发', values: { 免费版: false, 高级版: false, 定制版: false, 私有化部署: true } }
+    ]
   }
 ]
 
diff --git a/src/style.css b/src/style.css
index f540851..3c824a9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -994,6 +994,607 @@ button {
   color: #062c32;
 }
 
+.pricing-toolbar {
+  align-items: center;
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  display: flex;
+  gap: 0.25rem;
+  margin: 2rem auto 0;
+  max-width: max-content;
+  padding: 0.25rem;
+}
+
+.pricing-toolbar button {
+  border-radius: 999px;
+  color: var(--muted);
+  cursor: pointer;
+  font-weight: 800;
+  min-height: 40px;
+  padding: 0.55rem 0.9rem;
+  transition: background 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out;
+}
+
+.pricing-toolbar button:focus-visible,
+.pricing-card:focus-visible,
+.pricing-button:focus-visible,
+.pricing-detail-action:focus-visible,
+.comparison-head-action:focus-visible,
+.comparison-plan-head:focus-visible,
+.comparison-tabs button:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--brand) 52%, transparent);
+  outline-offset: 3px;
+}
+
+.pricing-toggle-active {
+  background: var(--text);
+  box-shadow: 0 10px 22px rgba(8, 28, 31, 0.14);
+  color: var(--app-bg) !important;
+}
+
+.pricing-grid {
+  display: grid;
+  gap: 1rem;
+  margin-top: 2.2rem;
+}
+
+.pricing-section-inner {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.pricing-card {
+  --pricing-accent: var(--brand);
+  --pricing-accent-strong: var(--brand-strong);
+  --pricing-accent-soft: color-mix(in srgb, var(--pricing-accent) 12%, transparent);
+  cursor: pointer;
+  isolation: isolate;
+  overflow: hidden;
+  position: relative;
+  transition:
+    background 180ms ease-out,
+    border-color 180ms ease-out,
+    box-shadow 220ms ease-out,
+    transform 180ms ease-out;
+}
+
+.pricing-card > *:not(.pricing-card-rail) {
+  position: relative;
+  z-index: 1;
+}
+
+.pricing-tone-starter {
+  --pricing-accent: #0891b2;
+  --pricing-accent-strong: #155e75;
+}
+
+.pricing-tone-growth {
+  --pricing-accent: #059669;
+  --pricing-accent-strong: #065f46;
+}
+
+.pricing-tone-clinical {
+  --pricing-accent: #0f766e;
+  --pricing-accent-strong: #115e59;
+}
+
+.pricing-tone-enterprise {
+  --pricing-accent: #475569;
+  --pricing-accent-strong: #111827;
+}
+
+.pricing-card-rail {
+  background:
+    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.46), transparent 26%),
+    linear-gradient(135deg, color-mix(in srgb, var(--pricing-accent) 24%, transparent), transparent 62%);
+  height: 7.5rem;
+  inset: 0 0 auto;
+  opacity: 0.82;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.pricing-card-rail span {
+  color: color-mix(in srgb, var(--pricing-accent) 28%, transparent);
+  font-family: "MapleMono NF CN", "Microsoft YaHei", system-ui, sans-serif;
+  font-size: 4.25rem;
+  font-weight: 900;
+  line-height: 1;
+  position: absolute;
+  right: 0.8rem;
+  top: 0.55rem;
+}
+
+.pricing-selected {
+  border-color: color-mix(in srgb, var(--pricing-accent) 58%, var(--border));
+  box-shadow:
+    var(--shadow-card),
+    0 0 0 3px color-mix(in srgb, var(--pricing-accent) 18%, transparent),
+    0 0 46px color-mix(in srgb, var(--pricing-accent) 20%, transparent);
+}
+
+.pricing-selected::after {
+  background:
+    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--pricing-accent) 24%, transparent), transparent 52%),
+    radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--pricing-accent) 12%, transparent), transparent 42%);
+  border-radius: inherit;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--pricing-accent) 28%, transparent),
+    inset 0 0 44px color-mix(in srgb, var(--pricing-accent) 12%, transparent);
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.pricing-enterprise {
+  background:
+    linear-gradient(145deg, color-mix(in srgb, var(--text) 8%, var(--panel)), var(--panel));
+}
+
+.pricing-tagline-row {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  margin-bottom: 0.8rem;
+  min-height: 30px;
+}
+
+.pricing-tagline,
+.pricing-recommended,
+.pricing-included {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.pricing-tagline {
+  background: color-mix(in srgb, var(--pricing-accent) 12%, var(--panel));
+  color: var(--pricing-accent-strong);
+  padding: 0.45rem 0.7rem;
+}
+
+.pricing-recommended {
+  background: color-mix(in srgb, var(--pricing-accent) 18%, transparent);
+  color: var(--pricing-accent-strong);
+  padding: 0.45rem 0.62rem;
+}
+
+.pricing-audience {
+  font-weight: 800;
+}
+
+.pricing-included {
+  border: 1px solid color-mix(in srgb, var(--pricing-accent) 24%, var(--border));
+  color: var(--pricing-accent-strong);
+  margin-top: 1rem;
+  padding: 0.55rem 0.7rem;
+}
+
+.pricing-highlights {
+  background: color-mix(in srgb, var(--pricing-accent) 6%, transparent);
+  border: 1px solid color-mix(in srgb, var(--pricing-accent) 14%, transparent);
+  border-radius: 18px;
+  padding: 0.85rem !important;
+}
+
+.pricing-detail-shell {
+  margin-top: 1rem;
+}
+
+.pricing-comparison-shell {
+  margin-top: 1rem;
+}
+
+.pricing-comparison {
+  background: color-mix(in srgb, var(--panel) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
+  border-radius: 26px;
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  padding: 1rem;
+}
+
+.comparison-head {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 0.25rem 0.25rem 1rem;
+}
+
+.comparison-head span {
+  color: var(--brand-strong);
+  display: block;
+  font-size: 0.82rem;
+  font-weight: 900;
+}
+
+.comparison-head h3 {
+  color: var(--text);
+  font-size: 1.35rem;
+  margin: 0.18rem 0 0;
+}
+
+.comparison-head-action {
+  align-items: center;
+  background: var(--text);
+  border-radius: 999px;
+  color: var(--app-bg);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-weight: 800;
+  gap: 0.45rem;
+  min-height: 42px;
+  padding: 0.65rem 0.9rem;
+  text-decoration: none;
+  transition: background 180ms ease-out, color 180ms ease-out;
+}
+
+.comparison-head-action:hover {
+  background: var(--brand-strong);
+  color: #062c32;
+}
+
+.comparison-desktop {
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  max-width: 100%;
+  overflow: auto;
+}
+
+.comparison-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 880px;
+  width: 100%;
+}
+
+.comparison-table th,
+.comparison-table td {
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.82rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.comparison-table thead th {
+  background: color-mix(in srgb, var(--panel) 92%, transparent);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.comparison-table thead th:first-child,
+.comparison-table tbody th[scope="row"] {
+  left: 0;
+  position: sticky;
+  text-align: left;
+  z-index: 3;
+}
+
+.comparison-table thead th:first-child,
+.comparison-table tbody th[scope="row"] {
+  background: color-mix(in srgb, var(--panel) 96%, transparent);
+}
+
+.comparison-plan-head {
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  display: grid;
+  gap: 0.18rem;
+  justify-items: center;
+  min-height: 88px;
+  padding: 0.65rem;
+  transition: background 180ms ease-out, box-shadow 180ms ease-out;
+  width: 100%;
+}
+
+.comparison-plan-head:hover,
+.comparison-selected-col .comparison-plan-head {
+  background: color-mix(in srgb, var(--brand) 9%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
+}
+
+.comparison-tone-starter {
+  --comparison-accent: #0891b2;
+  --comparison-accent-strong: #155e75;
+}
+
+.comparison-tone-growth {
+  --comparison-accent: #059669;
+  --comparison-accent-strong: #065f46;
+}
+
+.comparison-tone-clinical {
+  --comparison-accent: #0f766e;
+  --comparison-accent-strong: #115e59;
+}
+
+.comparison-tone-enterprise {
+  --comparison-accent: #475569;
+  --comparison-accent-strong: #111827;
+}
+
+.comparison-plan-head span {
+  color: var(--text);
+  font-weight: 900;
+}
+
+.comparison-plan-head strong {
+  color: var(--text);
+  font-family: "MapleMono NF CN", "Microsoft YaHei", system-ui, sans-serif;
+  font-size: 1.08rem;
+}
+
+.comparison-plan-head small {
+  color: var(--muted);
+}
+
+.comparison-group-row th {
+  background: color-mix(in srgb, var(--brand) 8%, transparent) !important;
+  color: var(--brand-strong);
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-align: left;
+}
+
+.comparison-value {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  font-weight: 800;
+  gap: 0.35rem;
+  justify-content: center;
+  min-height: 32px;
+  min-width: 58px;
+  padding: 0.35rem 0.6rem;
+}
+
+.comparison-cell-on .comparison-value {
+  background: color-mix(in srgb, var(--comparison-accent, var(--cta)) 12%, transparent);
+  color: var(--comparison-accent-strong, var(--cta));
+}
+
+.comparison-plan-head.comparison-tone-starter span,
+.comparison-plan-head.comparison-tone-starter strong,
+.comparison-plan-head.comparison-tone-growth span,
+.comparison-plan-head.comparison-tone-growth strong,
+.comparison-plan-head.comparison-tone-clinical span,
+.comparison-plan-head.comparison-tone-clinical strong,
+.comparison-plan-head.comparison-tone-enterprise span,
+.comparison-plan-head.comparison-tone-enterprise strong,
+.mobile-comparison-row strong.comparison-tone-starter,
+.mobile-comparison-row strong.comparison-tone-growth,
+.mobile-comparison-row strong.comparison-tone-clinical,
+.mobile-comparison-row strong.comparison-tone-enterprise {
+  color: var(--comparison-accent-strong);
+}
+
+.mobile-comparison-row strong.comparison-tone-starter,
+.mobile-comparison-row strong.comparison-tone-growth,
+.mobile-comparison-row strong.comparison-tone-clinical,
+.mobile-comparison-row strong.comparison-tone-enterprise {
+  background: color-mix(in srgb, var(--comparison-accent) 12%, transparent);
+  border-radius: 999px;
+  min-height: 30px;
+  padding: 0.32rem 0.56rem;
+}
+
+.comparison-cell-off .comparison-value,
+.mobile-comparison-row .comparison-cell-off {
+  color: var(--muted);
+  opacity: 0.72;
+}
+
+.comparison-selected-col {
+  background: color-mix(in srgb, var(--brand) 5%, transparent);
+}
+
+.comparison-mobile {
+  display: none;
+}
+
+.comparison-tabs {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.comparison-tabs button {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  color: var(--text);
+  cursor: pointer;
+  display: grid;
+  font-weight: 900;
+  gap: 0.18rem;
+  min-height: 68px;
+  padding: 0.7rem;
+  text-align: left;
+  transition: background 180ms ease-out, border-color 180ms ease-out;
+}
+
+.comparison-tabs small {
+  color: var(--muted);
+}
+
+.comparison-tab-active {
+  background: color-mix(in srgb, var(--comparison-accent, var(--brand)) 10%, transparent);
+  border-color: color-mix(in srgb, var(--comparison-accent, var(--brand)) 34%, var(--border)) !important;
+}
+
+.mobile-comparison-group {
+  border-top: 1px solid var(--border);
+  margin-top: 1rem;
+  padding-top: 1rem;
+}
+
+.mobile-comparison-group h4 {
+  color: var(--brand-strong);
+  font-size: 0.86rem;
+  margin: 0 0 0.7rem;
+}
+
+.mobile-comparison-row {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  min-height: 42px;
+}
+
+.mobile-comparison-row span {
+  color: var(--text);
+  font-weight: 800;
+}
+
+.mobile-comparison-row strong {
+  align-items: center;
+  color: var(--cta);
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 0.3rem;
+}
+
+.pricing-detail {
+  align-items: center;
+  background: color-mix(in srgb, var(--panel) 94%, transparent);
+  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border));
+  border-radius: 22px;
+  box-shadow: var(--shadow-card);
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.pricing-detail span,
+.selected-plan-note span {
+  color: var(--brand-strong);
+  display: block;
+  font-size: 0.82rem;
+  font-weight: 800;
+}
+
+.pricing-detail h3 {
+  color: var(--text);
+  font-size: 1.25rem;
+  margin: 0.15rem 0 0;
+}
+
+.pricing-detail p {
+  color: var(--muted);
+  line-height: 1.7;
+  margin: 0.25rem 0 0;
+}
+
+.pricing-detail-action {
+  align-items: center;
+  background: var(--text);
+  border-radius: 999px;
+  color: var(--app-bg);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-weight: 800;
+  gap: 0.45rem;
+  justify-content: center;
+  min-height: 46px;
+  padding: 0.75rem 1rem;
+  text-decoration: none;
+  transition: background 180ms ease-out, color 180ms ease-out;
+}
+
+.pricing-detail-action:hover {
+  background: var(--brand-strong);
+  color: #062c32;
+}
+
+.selected-plan-note {
+  background: color-mix(in srgb, var(--brand) 8%, var(--panel-soft));
+  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
+  border-radius: 18px;
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.9rem;
+}
+
+.selected-plan-note strong {
+  color: var(--text);
+  font-size: 1rem;
+}
+
+.selected-plan-note small {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+@media (min-width: 768px) {
+  .pricing-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1180px) {
+  .pricing-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767px) {
+  .pricing-toolbar {
+    max-width: none;
+    width: 100%;
+  }
+
+  .pricing-toolbar button {
+    flex: 1 1 0;
+    padding-inline: 0.6rem;
+  }
+
+  .pricing-detail-shell {
+    bottom: 0.75rem;
+    position: sticky;
+    z-index: 6;
+  }
+
+  .pricing-detail {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .pricing-detail-action {
+    width: 100%;
+  }
+
+  .comparison-head {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .comparison-head-action {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .comparison-desktop {
+    display: none;
+  }
+
+  .comparison-mobile {
+    display: block;
+  }
+}
+
 .stars {
   color: var(--amber);
   display: flex;
@@ -3260,13 +3861,29 @@ textarea {
 }
 
 .product-page .pricing-card {
+  background:
+    linear-gradient(145deg, color-mix(in srgb, var(--pricing-accent) 12%, var(--product-panel-solid)), var(--product-panel) 58%),
+    var(--product-panel);
+  border-color: color-mix(in srgb, var(--pricing-accent) 22%, var(--product-line));
   min-height: 0;
 }
 
+.product-page .pricing-card-rail {
+  background:
+    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--pricing-accent) 30%, rgba(255, 255, 255, 0.82)), transparent 24%),
+    linear-gradient(135deg, color-mix(in srgb, var(--pricing-accent) 30%, transparent), transparent 62%);
+  opacity: 0.96;
+}
+
+.product-page .pricing-card-rail span {
+  color: color-mix(in srgb, var(--pricing-accent) 36%, transparent);
+}
+
 .product-page .pricing-featured {
   background:
-    linear-gradient(180deg, color-mix(in srgb, var(--product-accent) 10%, var(--product-panel-solid)), var(--product-panel));
-  border-color: var(--product-line-strong);
+    linear-gradient(145deg, color-mix(in srgb, var(--pricing-accent) 18%, var(--product-panel-solid)), var(--product-panel) 62%),
+    var(--product-panel);
+  border-color: color-mix(in srgb, var(--pricing-accent) 40%, var(--product-line));
   transform: none;
 }
 
@@ -3285,6 +3902,224 @@ textarea {
   color: #041012;
 }
 
+.product-page .pricing-toolbar,
+.product-page .pricing-comparison,
+.product-page .comparison-desktop,
+.product-page .pricing-detail,
+.product-page .selected-plan-note {
+  background: var(--product-panel);
+  border-color: var(--product-line);
+  box-shadow: var(--product-shadow);
+}
+
+.product-page .pricing-toolbar button {
+  color: var(--product-muted);
+}
+
+.product-page .pricing-toggle-active,
+.product-page .pricing-detail-action,
+.product-page .comparison-head-action {
+  background: var(--product-ink);
+  color: var(--product-bg) !important;
+}
+
+.product-page .pricing-detail-action:hover,
+.product-page .comparison-head-action:hover {
+  background: linear-gradient(135deg, #ffffff 0%, #c8fff2 48%, #ffffff 100%);
+  color: #041012 !important;
+}
+
+.product-page .pricing-selected {
+  border-color: color-mix(in srgb, var(--pricing-accent) 72%, var(--product-line));
+  box-shadow:
+    var(--product-shadow-hover),
+    0 0 0 3px color-mix(in srgb, var(--pricing-accent) 24%, transparent),
+    0 0 54px color-mix(in srgb, var(--pricing-accent) 22%, transparent),
+    0 26px 92px color-mix(in srgb, var(--pricing-accent) 18%, transparent);
+}
+
+.product-page .pricing-selected .pricing-card-rail {
+  opacity: 1;
+}
+
+.product-page .pricing-enterprise {
+  background:
+    linear-gradient(145deg, color-mix(in srgb, var(--pricing-accent) 14%, var(--product-panel-solid)), var(--product-panel) 62%),
+    var(--product-panel);
+}
+
+:root[data-theme="dark"] .product-page .pricing-tone-starter {
+  --pricing-accent: #22d3ee;
+  --pricing-accent-strong: #a5f3fc;
+}
+
+:root[data-theme="dark"] .product-page .pricing-tone-growth {
+  --pricing-accent: #34d399;
+  --pricing-accent-strong: #bbf7d0;
+}
+
+:root[data-theme="dark"] .product-page .pricing-tone-clinical {
+  --pricing-accent: #2dd4bf;
+  --pricing-accent-strong: #99f6e4;
+}
+
+:root[data-theme="dark"] .product-page .pricing-tone-enterprise {
+  --pricing-accent: #94a3b8;
+  --pricing-accent-strong: #e2e8f0;
+}
+
+:root[data-theme="dark"] .product-page .comparison-tone-starter {
+  --comparison-accent: #22d3ee;
+  --comparison-accent-strong: #a5f3fc;
+}
+
+:root[data-theme="dark"] .product-page .comparison-tone-growth {
+  --comparison-accent: #34d399;
+  --comparison-accent-strong: #bbf7d0;
+}
+
+:root[data-theme="dark"] .product-page .comparison-tone-clinical {
+  --comparison-accent: #2dd4bf;
+  --comparison-accent-strong: #99f6e4;
+}
+
+:root[data-theme="dark"] .product-page .comparison-tone-enterprise {
+  --comparison-accent: #94a3b8;
+  --comparison-accent-strong: #e2e8f0;
+}
+
+:root[data-theme="dark"] .product-page .pricing-card {
+  background:
+    linear-gradient(145deg, color-mix(in srgb, var(--pricing-accent) 20%, rgba(18, 24, 27, 0.98)), rgba(12, 12, 12, 0.88) 68%),
+    var(--product-panel);
+  border-color: color-mix(in srgb, var(--pricing-accent) 24%, var(--product-line));
+}
+
+:root[data-theme="dark"] .product-page .pricing-card-rail {
+  background:
+    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--pricing-accent) 44%, transparent), transparent 24%),
+    linear-gradient(135deg, color-mix(in srgb, var(--pricing-accent) 38%, transparent), transparent 64%);
+  opacity: 0.98;
+}
+
+:root[data-theme="dark"] .product-page .pricing-card-rail span {
+  color: color-mix(in srgb, var(--pricing-accent) 42%, transparent);
+}
+
+:root[data-theme="dark"] .product-page .pricing-featured {
+  background:
+    linear-gradient(145deg, color-mix(in srgb, var(--pricing-accent) 28%, rgba(18, 24, 27, 0.98)), rgba(12, 12, 12, 0.86) 66%),
+    var(--product-panel);
+}
+
+:root[data-theme="dark"] .product-page .pricing-selected {
+  border-color: color-mix(in srgb, var(--pricing-accent) 74%, var(--product-line));
+  box-shadow:
+    var(--product-shadow-hover),
+    0 0 0 3px color-mix(in srgb, var(--pricing-accent) 28%, transparent),
+    0 26px 86px color-mix(in srgb, var(--pricing-accent) 20%, transparent);
+}
+
+.product-page .pricing-tagline,
+.product-page .pricing-included,
+.product-page .comparison-head span,
+.product-page .comparison-group-row th,
+.product-page .pricing-detail span,
+.product-page .selected-plan-note span {
+  color: var(--product-primary);
+}
+
+.product-page .pricing-tagline {
+  background: color-mix(in srgb, var(--pricing-accent) 13%, var(--product-panel-solid));
+  color: color-mix(in srgb, var(--pricing-accent) 64%, var(--product-ink));
+}
+
+.product-page .pricing-recommended {
+  background: color-mix(in srgb, var(--pricing-accent) 18%, transparent);
+  color: color-mix(in srgb, var(--pricing-accent) 72%, var(--product-ink));
+}
+
+.product-page .pricing-included {
+  border-color: var(--product-line-strong);
+}
+
+.product-page .pricing-highlights {
+  background: color-mix(in srgb, var(--pricing-accent) 7%, var(--product-panel-solid));
+  border-color: color-mix(in srgb, var(--pricing-accent) 18%, var(--product-line));
+}
+
+.product-page .comparison-head h3,
+.product-page .comparison-plan-head span,
+.product-page .comparison-plan-head strong,
+.product-page .comparison-table th,
+.product-page .mobile-comparison-row span,
+.product-page .pricing-detail h3,
+.product-page .selected-plan-note strong {
+  color: var(--product-ink);
+}
+
+.product-page .comparison-plan-head small,
+.product-page .comparison-table td,
+.product-page .pricing-detail p,
+.product-page .selected-plan-note small {
+  color: var(--product-muted);
+}
+
+.product-page .comparison-table thead th,
+.product-page .comparison-table thead th:first-child,
+.product-page .comparison-table tbody th[scope="row"] {
+  background: var(--product-panel);
+}
+
+.product-page .comparison-table th,
+.product-page .comparison-table td,
+.product-page .comparison-desktop,
+.product-page .mobile-comparison-group {
+  border-color: var(--product-line);
+}
+
+.product-page .comparison-group-row th {
+  background: var(--product-accent-soft) !important;
+}
+
+.product-page .comparison-plan-head:hover,
+.product-page .comparison-selected-col .comparison-plan-head,
+.product-page .comparison-selected-col,
+.product-page .comparison-tab-active {
+  background: var(--product-accent-soft);
+}
+
+.product-page .comparison-cell-on .comparison-value,
+.product-page .mobile-comparison-row strong.comparison-tone-starter,
+.product-page .mobile-comparison-row strong.comparison-tone-growth,
+.product-page .mobile-comparison-row strong.comparison-tone-clinical,
+.product-page .mobile-comparison-row strong.comparison-tone-enterprise {
+  background: color-mix(in srgb, var(--comparison-accent, var(--product-primary)) 12%, transparent);
+  color: color-mix(in srgb, var(--comparison-accent-strong, var(--product-primary)) 76%, var(--product-ink));
+}
+
+.product-page .comparison-plan-head.comparison-tone-starter span,
+.product-page .comparison-plan-head.comparison-tone-starter strong,
+.product-page .comparison-plan-head.comparison-tone-growth span,
+.product-page .comparison-plan-head.comparison-tone-growth strong,
+.product-page .comparison-plan-head.comparison-tone-clinical span,
+.product-page .comparison-plan-head.comparison-tone-clinical strong,
+.product-page .comparison-plan-head.comparison-tone-enterprise span,
+.product-page .comparison-plan-head.comparison-tone-enterprise strong {
+  color: color-mix(in srgb, var(--comparison-accent-strong) 74%, var(--product-ink));
+}
+
+.product-page .comparison-tabs button {
+  border-color: var(--product-line);
+  color: var(--product-ink);
+}
+
+.product-page .comparison-tabs small,
+.product-page .comparison-cell-off .comparison-value,
+.product-page .mobile-comparison-row .comparison-cell-off {
+  color: var(--product-muted);
+}
+
 .product-page .stars {
   color: var(--product-star);
 }
@@ -3647,6 +4482,7 @@ textarea {
   color: var(--nav-ink);
   min-height: 64px;
   padding: 0.42rem;
+  transition: background-color 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, color 220ms ease-out;
 }
 
 .site-header .site-nav-overlay {
@@ -3756,3 +4592,1348 @@ textarea {
   background: var(--nav-control-hover);
   color: var(--nav-ink);
 }
+
+.site-search-trigger {
+  cursor: pointer;
+  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
+}
+
+.site-search-overlay {
+  align-items: flex-start;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.18), transparent 34rem),
+    rgba(8, 15, 18, 0.38);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 6.25rem 1rem 1.25rem;
+  position: fixed;
+  z-index: 1600;
+}
+
+.site-search-panel {
+  --search-ink: #101416;
+  --search-muted: #52636b;
+  --search-panel: rgba(255, 255, 255, 0.94);
+  --search-panel-strong: rgba(255, 255, 255, 0.98);
+  --search-border: rgba(15, 23, 42, 0.12);
+  --search-soft: rgba(20, 184, 166, 0.1);
+  --search-hover: rgba(15, 23, 42, 0.055);
+  --search-shadow: 0 30px 90px rgba(10, 25, 31, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.76);
+  backdrop-filter: blur(22px) saturate(1.2);
+  background: var(--search-panel);
+  border: 1px solid var(--search-border);
+  border-radius: 28px;
+  box-shadow: var(--search-shadow);
+  color: var(--search-ink);
+  display: grid;
+  gap: 0.85rem;
+  max-height: min(76vh, 720px);
+  max-width: 760px;
+  overflow: hidden;
+  padding: 0.8rem;
+  width: min(760px, 100%);
+}
+
+.site-search-panel-tone-dark,
+:root[data-theme="dark"] .site-search-panel {
+  --search-ink: #f6feff;
+  --search-muted: rgba(215, 226, 234, 0.72);
+  --search-panel: rgba(10, 18, 21, 0.94);
+  --search-panel-strong: rgba(16, 28, 31, 0.98);
+  --search-border: rgba(215, 226, 234, 0.15);
+  --search-soft: rgba(34, 211, 238, 0.13);
+  --search-hover: rgba(255, 255, 255, 0.08);
+  --search-shadow: 0 34px 92px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.site-search-input-shell {
+  align-items: center;
+  background: var(--search-panel-strong);
+  border: 1px solid var(--search-border);
+  border-radius: 20px;
+  display: grid;
+  gap: 0.7rem;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  padding: 0.7rem 0.78rem;
+}
+
+.site-search-input-shell svg {
+  color: color-mix(in srgb, var(--brand) 68%, var(--search-muted));
+  flex: 0 0 auto;
+}
+
+.site-search-input-shell input {
+  background: transparent;
+  border: 0;
+  color: var(--search-ink);
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 650;
+  min-width: 0;
+  outline: 0;
+  width: 100%;
+}
+
+.site-search-input-shell input::placeholder {
+  color: var(--search-muted);
+  font-weight: 560;
+}
+
+.site-search-close {
+  align-items: center;
+  background: var(--search-hover);
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--search-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
+  width: 2rem;
+}
+
+.site-search-close:hover,
+.site-search-close:focus-visible {
+  background: var(--search-soft);
+  border-color: color-mix(in srgb, var(--brand) 28%, var(--search-border));
+  color: var(--search-ink);
+}
+
+.site-search-meta,
+.site-search-section-title {
+  align-items: center;
+  color: var(--search-muted);
+  display: flex;
+  font-size: 0.78rem;
+  font-weight: 700;
+  justify-content: space-between;
+  letter-spacing: 0;
+  padding: 0 0.25rem;
+}
+
+.site-search-shortcut {
+  border: 1px solid var(--search-border);
+  border-radius: 999px;
+  color: var(--search-muted);
+  font-size: 0.72rem;
+  padding: 0.18rem 0.52rem;
+}
+
+.site-search-section-title span,
+.site-search-section-title button {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.35rem;
+}
+
+.site-search-section-title button {
+  background: transparent;
+  border: 0;
+  color: var(--search-muted);
+  cursor: pointer;
+  font: inherit;
+  padding: 0.2rem 0;
+}
+
+.site-search-section-title button:hover,
+.site-search-section-title button:focus-visible {
+  color: var(--search-ink);
+}
+
+.site-search-history,
+.site-search-results {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.site-search-panel > .site-search-results {
+  overflow: auto;
+  padding-right: 0.1rem;
+}
+
+.site-search-result {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 18px;
+  color: var(--search-ink);
+  cursor: pointer;
+  display: grid;
+  gap: 0.72rem;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  min-width: 0;
+  padding: 0.78rem;
+  text-align: left;
+  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
+  width: 100%;
+}
+
+.site-search-result:hover,
+.site-search-result:focus-visible {
+  background: var(--search-hover);
+  border-color: color-mix(in srgb, var(--brand) 22%, var(--search-border));
+  outline: 0;
+}
+
+.site-search-result-icon {
+  align-items: center;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, transparent), color-mix(in srgb, var(--cta) 13%, transparent)),
+    var(--search-panel-strong);
+  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--search-border));
+  border-radius: 14px;
+  color: color-mix(in srgb, var(--brand-strong) 78%, var(--search-ink));
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 0.82rem;
+  font-weight: 800;
+  height: 2.45rem;
+  justify-content: center;
+  width: 2.45rem;
+}
+
+.site-search-result-copy {
+  display: grid;
+  gap: 0.18rem;
+  min-width: 0;
+}
+
+.site-search-result-copy strong,
+.site-search-result-copy small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.site-search-result-copy strong {
+  color: var(--search-ink);
+  font-size: 0.95rem;
+  font-weight: 760;
+}
+
+.site-search-result-copy small {
+  color: var(--search-muted);
+  font-size: 0.78rem;
+  line-height: 1.55;
+}
+
+.site-search-result > svg {
+  color: var(--search-muted);
+  transition: transform 180ms ease, color 180ms ease;
+}
+
+.site-search-result:hover > svg,
+.site-search-result:focus-visible > svg {
+  color: color-mix(in srgb, var(--brand) 78%, var(--search-ink));
+  transform: translateX(2px);
+}
+
+.site-search-empty {
+  align-items: center;
+  color: var(--search-muted);
+  display: grid;
+  gap: 0.35rem;
+  justify-items: center;
+  padding: 2.2rem 1rem;
+  text-align: center;
+}
+
+.site-search-empty strong {
+  color: var(--search-ink);
+}
+
+.search-panel-enter-active,
+.search-panel-leave-active {
+  transition: opacity 180ms ease;
+}
+
+.search-panel-enter-active .site-search-panel,
+.search-panel-leave-active .site-search-panel {
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+
+.search-panel-enter-from,
+.search-panel-leave-to {
+  opacity: 0;
+}
+
+.search-panel-enter-from .site-search-panel,
+.search-panel-leave-to .site-search-panel {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.985);
+}
+
+@media (max-width: 639px) {
+  .site-search-trigger {
+    border-radius: 999px;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    padding: 0;
+    width: 2.5rem;
+  }
+
+  .site-search-trigger span {
+    display: none;
+  }
+
+  .site-search-overlay {
+    padding: 5.4rem 0.7rem 0.7rem;
+  }
+
+  .site-search-panel {
+    border-radius: 24px;
+    max-height: calc(100vh - 6.1rem);
+    padding: 0.65rem;
+  }
+
+  .site-search-input-shell {
+    border-radius: 18px;
+    gap: 0.55rem;
+  }
+
+  .site-search-result {
+    border-radius: 16px;
+    gap: 0.58rem;
+    padding: 0.68rem;
+  }
+
+  .site-search-result-icon {
+    border-radius: 12px;
+    height: 2.2rem;
+    width: 2.2rem;
+  }
+
+  .site-search-result-copy strong {
+    font-size: 0.9rem;
+  }
+}
+
+/* Video showcase: cinematic but accessible C-end demo experience */
+.video-route-backdrop {
+  background:
+    radial-gradient(circle at 20% 0%, color-mix(in srgb, #14b8a6 14%, transparent), transparent 34rem),
+    radial-gradient(circle at 86% 18%, color-mix(in srgb, #22d3ee 16%, transparent), transparent 30rem),
+    var(--app-bg);
+}
+
+.video-route-backdrop::before {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(236, 254, 255, 0.46) 30%, rgba(255, 255, 255, 0.7));
+}
+
+:root[data-theme="dark"] .video-route-backdrop::before {
+  background:
+    linear-gradient(180deg, rgba(5, 13, 15, 0.72), rgba(5, 13, 15, 0.44) 32%, rgba(5, 13, 15, 0.76));
+}
+
+.video-route-backdrop .theme-backdrop-canvas {
+  opacity: 0.2;
+}
+
+:root[data-theme="dark"] .video-route-backdrop .theme-backdrop-canvas {
+  opacity: 0.34;
+}
+
+.video-page {
+  --video-accent: #14b8a6;
+  --video-ink: #102a32;
+  --video-muted: #4d6570;
+  --video-panel: rgba(255, 255, 255, 0.84);
+  --video-panel-solid: #ffffff;
+  --video-line: rgba(15, 78, 90, 0.14);
+  --video-line-strong: color-mix(in srgb, var(--video-accent) 36%, rgba(15, 78, 90, 0.16));
+  --video-shadow: 0 24px 76px rgba(10, 66, 74, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  color: var(--video-ink);
+  max-width: 100vw;
+  overflow-x: clip;
+}
+
+:root[data-theme="dark"] .video-page {
+  --video-ink: #f1fdff;
+  --video-muted: #a9c1c8;
+  --video-panel: rgba(12, 24, 27, 0.78);
+  --video-panel-solid: #0d1c20;
+  --video-line: rgba(196, 244, 245, 0.14);
+  --video-line-strong: color-mix(in srgb, var(--video-accent) 38%, rgba(196, 244, 245, 0.18));
+  --video-shadow: 0 28px 86px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.video-hero {
+  min-height: 92vh;
+}
+
+.video-hero-shell,
+.video-player-shell,
+.video-hero-copy,
+.video-player-layout,
+.video-player-stage,
+.video-playlist,
+.video-section .mx-auto,
+.video-metrics-section .mx-auto {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.video-hero-shell {
+  align-items: center;
+  width: 100%;
+}
+
+.video-hero-copy {
+  align-self: center;
+  max-width: 660px;
+}
+
+.video-eyebrow {
+  align-items: center;
+  background: color-mix(in srgb, var(--video-accent) 12%, var(--video-panel));
+  border: 1px solid var(--video-line-strong);
+  border-radius: 999px;
+  color: color-mix(in srgb, var(--video-accent) 78%, var(--video-ink));
+  display: inline-flex;
+  font-weight: 800;
+  gap: 0.5rem;
+  padding: 0.48rem 0.82rem;
+}
+
+.video-hero-title {
+  color: var(--video-ink);
+  font-family: "MapleMono NF CN", "Microsoft YaHei", system-ui, sans-serif;
+  font-size: clamp(2.55rem, 4.1vw, 3.75rem);
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1.08;
+  margin: 1.15rem 0 1.25rem;
+  max-width: min(100%, 660px);
+  overflow-wrap: anywhere;
+  text-wrap: balance;
+  word-break: break-word;
+}
+
+.video-hero-title .split-line,
+.video-hero-title .split-word,
+.video-hero-title .split-char {
+  overflow: visible !important;
+}
+
+.video-hero-subtitle {
+  color: var(--video-muted);
+  font-size: 1.08rem;
+  line-height: 1.86;
+  margin: 0;
+  max-width: min(100%, 620px);
+}
+
+.video-role-tabs {
+  background: color-mix(in srgb, var(--video-panel) 84%, transparent);
+  border: 1px solid var(--video-line);
+  border-radius: 999px;
+  box-shadow: var(--video-shadow);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.38rem;
+  margin-top: 1.8rem;
+  padding: 0.4rem;
+  width: fit-content;
+}
+
+.video-role-tab {
+  align-items: center;
+  border-radius: 999px;
+  color: var(--video-muted);
+  display: inline-flex;
+  font-weight: 800;
+  gap: 0.45rem;
+  min-height: 44px;
+  padding: 0.66rem 0.9rem;
+  text-decoration: none;
+  transition: background 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out;
+}
+
+.video-role-tab:hover,
+.video-role-tab:focus-visible,
+.video-role-tab-active {
+  background: color-mix(in srgb, var(--video-accent) 16%, var(--video-panel-solid));
+  color: var(--video-ink);
+  outline: none;
+}
+
+.video-role-tab:focus-visible {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--video-accent) 22%, transparent);
+}
+
+.video-hero-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+  margin-top: 1.75rem;
+}
+
+.video-primary-action,
+.video-secondary-action {
+  align-items: center;
+  border-radius: 999px;
+  display: inline-flex;
+  font-weight: 900;
+  gap: 0.55rem;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0.82rem 1.12rem;
+  text-decoration: none;
+  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
+}
+
+.video-primary-action {
+  background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--video-accent) 30%, #ffffff) 55%, #ffffff 100%);
+  border: 1px solid color-mix(in srgb, var(--video-accent) 36%, rgba(255, 255, 255, 0.72));
+  box-shadow: 0 18px 42px color-mix(in srgb, var(--video-accent) 20%, rgba(10, 66, 74, 0.12));
+  color: #061316;
+}
+
+.video-primary-action:hover {
+  transform: translateY(-1px);
+}
+
+.video-secondary-action {
+  background: var(--video-panel);
+  border: 1px solid var(--video-line);
+  color: var(--video-ink);
+}
+
+.video-secondary-action:hover {
+  background: color-mix(in srgb, var(--video-accent) 10%, var(--video-panel));
+  border-color: var(--video-line-strong);
+}
+
+.video-player-layout {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.video-player-stage {
+  display: grid;
+  gap: 0.9rem;
+  min-width: 0;
+}
+
+.video-now-playing {
+  align-items: center;
+  background: var(--video-panel);
+  border: 1px solid var(--video-line);
+  border-radius: 24px;
+  box-shadow: var(--video-shadow);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr auto;
+  min-width: 0;
+  padding: 1rem;
+}
+
+.video-now-playing > span,
+.video-playlist-card span {
+  color: color-mix(in srgb, var(--video-accent) 78%, var(--video-ink));
+  font-size: 0.76rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.video-now-playing h2 {
+  color: var(--video-ink);
+  font-size: 1.2rem;
+  font-weight: 900;
+  line-height: 1.25;
+  margin: 0;
+}
+
+.video-now-playing p {
+  color: var(--video-muted);
+  line-height: 1.65;
+  margin: 0.32rem 0 0;
+}
+
+.video-now-playing small {
+  background: color-mix(in srgb, var(--video-accent) 12%, var(--video-panel-solid));
+  border: 1px solid var(--video-line);
+  border-radius: 999px;
+  color: var(--video-ink);
+  font-weight: 900;
+  padding: 0.48rem 0.62rem;
+  white-space: nowrap;
+}
+
+.video-playlist {
+  align-self: stretch;
+  background: color-mix(in srgb, var(--video-panel) 82%, transparent);
+  border: 1px solid var(--video-line);
+  border-radius: 28px;
+  box-shadow: var(--video-shadow);
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  max-height: 100%;
+  min-width: 0;
+  padding: 0.85rem;
+}
+
+.video-playlist-head {
+  align-items: center;
+  color: var(--video-ink);
+  display: flex;
+  gap: 0.65rem;
+  grid-column: 1 / -1;
+  padding: 0.3rem 0.25rem 0.1rem;
+}
+
+.video-playlist-head svg {
+  color: color-mix(in srgb, var(--video-accent) 82%, var(--video-ink));
+}
+
+.video-playlist-head strong,
+.video-playlist-head span {
+  display: block;
+}
+
+.video-playlist-head strong {
+  font-weight: 900;
+}
+
+.video-playlist-head span {
+  color: var(--video-muted);
+  font-size: 0.84rem;
+  margin-top: 0.08rem;
+}
+
+.video-playlist-card {
+  align-items: center;
+  background: color-mix(in srgb, var(--video-panel-solid) 70%, transparent);
+  border: 1px solid transparent;
+  border-radius: 22px;
+  color: var(--video-ink);
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: 86px minmax(0, 1fr);
+  min-height: 112px;
+  min-width: 0;
+  padding: 0.65rem;
+  text-decoration: none;
+  transition: background 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
+}
+
+.video-playlist-card:hover,
+.video-playlist-card:focus-visible,
+.video-playlist-card-active {
+  background: color-mix(in srgb, var(--video-accent) 12%, var(--video-panel-solid));
+  border-color: var(--video-line-strong);
+  box-shadow: 0 18px 48px color-mix(in srgb, var(--video-accent) 12%, transparent);
+  outline: none;
+}
+
+.video-playlist-card:hover {
+  transform: translateY(-1px);
+}
+
+.video-playlist-card:focus-visible {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--video-accent) 22%, transparent);
+}
+
+.video-playlist-card img {
+  aspect-ratio: 16 / 10;
+  border-radius: 16px;
+  height: 100%;
+  object-fit: cover;
+  width: 86px;
+}
+
+.video-playlist-card strong {
+  color: var(--video-ink);
+  display: block;
+  font-size: 0.98rem;
+  font-weight: 900;
+  line-height: 1.28;
+  margin-top: 0.22rem;
+}
+
+.video-playlist-card p {
+  color: var(--video-muted);
+  display: -webkit-box;
+  font-size: 0.84rem;
+  line-height: 1.5;
+  margin: 0.22rem 0 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.video-playlist-card small {
+  color: var(--video-muted);
+  font-size: 0.8rem;
+  font-weight: 900;
+  grid-column: 2;
+  white-space: nowrap;
+}
+
+.video-player-layout .cinematic-player {
+  min-height: 340px;
+}
+
+.cinematic-player {
+  aspect-ratio: 16 / 10;
+  background: #061316;
+  border: 1px solid var(--video-line-strong);
+  border-radius: 30px;
+  box-shadow: var(--video-shadow), 0 30px 100px color-mix(in srgb, var(--video-accent) 12%, transparent);
+  max-width: 100%;
+  min-height: 380px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.cinematic-player::before {
+  background:
+    linear-gradient(90deg, transparent, color-mix(in srgb, var(--video-accent) 30%, transparent), transparent);
+  content: "";
+  height: 1px;
+  left: 10%;
+  opacity: 0.8;
+  position: absolute;
+  right: 10%;
+  top: 0;
+  z-index: 3;
+}
+
+.cinematic-player-video {
+  cursor: pointer;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.cinematic-player-vignette {
+  background:
+    linear-gradient(180deg, rgba(6, 19, 22, 0.18), transparent 36%, rgba(6, 19, 22, 0.74)),
+    radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.32));
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.cinematic-player-main {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.58);
+  border-radius: 999px;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
+  color: color-mix(in srgb, var(--video-accent) 84%, #061316);
+  display: flex;
+  height: 82px;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  transition: opacity 180ms ease-out, transform 180ms ease-out;
+  width: 82px;
+  z-index: 4;
+}
+
+.cinematic-player:hover .cinematic-player-main,
+.cinematic-player:focus-within .cinematic-player-main {
+  transform: translate3d(-50%, -50%, 0) scale(1.03);
+}
+
+.cinematic-player-controls {
+  align-items: center;
+  background: rgba(6, 19, 22, 0.76);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  bottom: 1rem;
+  color: #f1fdff;
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: auto auto auto minmax(110px, 1fr) auto auto auto;
+  left: 1rem;
+  opacity: 0;
+  padding: 0.42rem;
+  position: absolute;
+  right: 1rem;
+  transform: translate3d(0, 8px, 0);
+  transition: opacity 180ms ease-out, transform 180ms ease-out;
+  z-index: 5;
+}
+
+.cinematic-player:hover .cinematic-player-controls,
+.cinematic-player:focus-within .cinematic-player-controls,
+.cinematic-player-controls-visible {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
+.cinematic-player-controls button {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  color: inherit;
+  display: inline-flex;
+  height: 40px;
+  justify-content: center;
+  transition: background 180ms ease-out, border-color 180ms ease-out;
+  width: 40px;
+}
+
+.cinematic-player-controls button:hover,
+.cinematic-player-controls button:focus-visible {
+  background: rgba(255, 255, 255, 0.16);
+  border-color: color-mix(in srgb, var(--video-accent) 44%, rgba(255, 255, 255, 0.18));
+  outline: none;
+}
+
+.cinematic-player-time {
+  color: rgba(241, 253, 255, 0.82);
+  font-size: 0.82rem;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.cinematic-player-progress {
+  accent-color: var(--video-accent);
+  background:
+    linear-gradient(90deg, var(--video-accent) 0%, var(--video-accent) var(--video-progress), rgba(255, 255, 255, 0.24) var(--video-progress), rgba(255, 255, 255, 0.24) 100%);
+  border-radius: 999px;
+  cursor: pointer;
+  height: 8px;
+  min-width: 0;
+  width: 100%;
+}
+
+.cinematic-player-progress:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--video-accent) 38%, transparent);
+  outline-offset: 4px;
+}
+
+.cinematic-player-progress::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: #ffffff;
+  border: 3px solid var(--video-accent);
+  border-radius: 999px;
+  height: 18px;
+  width: 18px;
+}
+
+.cinematic-player-progress::-moz-range-thumb {
+  background: #ffffff;
+  border: 3px solid var(--video-accent);
+  border-radius: 999px;
+  height: 18px;
+  width: 18px;
+}
+
+.cinematic-player-state {
+  align-items: center;
+  background: rgba(6, 19, 22, 0.72);
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 999px;
+  color: #f1fdff;
+  display: inline-flex;
+  font-weight: 800;
+  gap: 0.6rem;
+  left: 50%;
+  min-height: 44px;
+  padding: 0.65rem 1rem;
+  position: absolute;
+  top: 1rem;
+  transform: translateX(-50%);
+  z-index: 6;
+}
+
+.cinematic-player-state span {
+  animation: videoPulse 900ms ease-in-out infinite alternate;
+  background: var(--video-accent);
+  border-radius: 999px;
+  height: 10px;
+  width: 10px;
+}
+
+.cinematic-player-state-error {
+  background: rgba(127, 29, 29, 0.88);
+}
+
+.video-metrics-section {
+  margin-top: -2.5rem;
+  padding-bottom: 4rem;
+  position: relative;
+  z-index: 2;
+}
+
+.video-metric-card,
+.video-chapter-card,
+.video-highlight-card,
+.video-scene-panel {
+  background: var(--video-panel);
+  border: 1px solid var(--video-line);
+  box-shadow: var(--video-shadow);
+  color: var(--video-ink);
+  overflow: hidden;
+  position: relative;
+}
+
+.video-metric-card {
+  border-radius: 24px;
+  display: grid;
+  gap: 0.25rem;
+  min-height: 132px;
+  padding: 1.2rem;
+}
+
+.video-metric-card strong {
+  color: color-mix(in srgb, var(--video-accent) 76%, var(--video-ink));
+  font-size: 2.2rem;
+  line-height: 1;
+}
+
+.video-metric-card span {
+  color: var(--video-muted);
+  font-weight: 800;
+}
+
+.video-section {
+  padding: 5.5rem 0;
+}
+
+.video-section-muted {
+  background:
+    linear-gradient(120deg, color-mix(in srgb, var(--video-accent) 8%, transparent), transparent 44%),
+    color-mix(in srgb, var(--video-panel-solid) 74%, transparent);
+}
+
+:root[data-theme="dark"] .video-section-muted {
+  background:
+    linear-gradient(120deg, color-mix(in srgb, var(--video-accent) 10%, transparent), transparent 44%),
+    rgba(7, 20, 23, 0.36);
+}
+
+.video-section-heading {
+  max-width: 680px;
+}
+
+.video-section-heading.centered {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.video-section-heading span {
+  color: color-mix(in srgb, var(--video-accent) 76%, var(--video-ink));
+  font-size: 0.78rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.video-section-heading h2,
+.video-final-copy h2 {
+  color: var(--video-ink);
+  font-size: 2.7rem;
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1.1;
+  margin: 0.65rem 0 0;
+  text-wrap: balance;
+}
+
+.video-section-heading p,
+.video-final-copy p,
+.video-highlight-card p,
+.video-chapter-card p {
+  color: var(--video-muted);
+  line-height: 1.78;
+}
+
+.video-chapter-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.video-chapter-card {
+  align-items: center;
+  border-radius: 22px;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr auto;
+  min-height: 132px;
+  padding: 1rem;
+  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
+}
+
+.video-chapter-card:hover {
+  border-color: var(--video-line-strong);
+  box-shadow: 0 24px 72px color-mix(in srgb, var(--video-accent) 12%, rgba(10, 66, 74, 0.12));
+  transform: translateY(-2px);
+}
+
+.video-chapter-card > span {
+  align-items: center;
+  background: color-mix(in srgb, var(--video-accent) 14%, var(--video-panel-solid));
+  border-radius: 999px;
+  color: color-mix(in srgb, var(--video-accent) 76%, var(--video-ink));
+  display: inline-flex;
+  font-weight: 900;
+  height: 44px;
+  justify-content: center;
+  width: 68px;
+}
+
+.video-chapter-card h3,
+.video-highlight-card h3 {
+  color: var(--video-ink);
+  font-size: 1.18rem;
+  font-weight: 900;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.video-chapter-card p,
+.video-highlight-card p {
+  margin: 0.42rem 0 0;
+}
+
+.video-chapter-card svg,
+.video-highlight-card svg,
+.video-scene-head svg,
+.video-duration-note svg {
+  color: color-mix(in srgb, var(--video-accent) 82%, var(--video-ink));
+}
+
+.video-highlight-grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: 2.2rem;
+}
+
+.video-highlight-card {
+  border-radius: 24px;
+  display: grid;
+  gap: 0.75rem;
+  min-height: 232px;
+  padding: 1.2rem;
+}
+
+.video-final-section {
+  padding-top: 3rem;
+}
+
+.video-final-copy {
+  align-self: center;
+}
+
+.video-scene-panel {
+  border-radius: 26px;
+  display: grid;
+  gap: 1.2rem;
+  padding: 1.3rem;
+}
+
+.video-scene-head,
+.video-duration-note {
+  align-items: center;
+  display: flex;
+  gap: 0.62rem;
+}
+
+.video-scene-head span {
+  color: var(--video-ink);
+  font-size: 1.18rem;
+  font-weight: 900;
+}
+
+.video-scene-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+}
+
+.video-scene-list span {
+  background: color-mix(in srgb, var(--video-accent) 10%, var(--video-panel-solid));
+  border: 1px solid var(--video-line);
+  border-radius: 999px;
+  color: var(--video-ink);
+  font-weight: 800;
+  padding: 0.68rem 0.9rem;
+}
+
+.video-timeline {
+  align-items: center;
+  background: color-mix(in srgb, var(--video-accent) 8%, var(--video-panel-solid));
+  border: 1px solid var(--video-line);
+  border-radius: 999px;
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(3, 1fr);
+  min-height: 48px;
+  padding: 0.5rem;
+}
+
+.video-timeline span {
+  background: linear-gradient(90deg, var(--video-accent), color-mix(in srgb, var(--video-accent) 30%, #ffffff));
+  border-radius: 999px;
+  height: 10px;
+}
+
+.video-duration-note {
+  color: var(--video-muted);
+  font-weight: 800;
+}
+
+@keyframes videoPulse {
+  from {
+    opacity: 0.45;
+    transform: scale(0.82);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (min-width: 1440px) {
+  .video-hero-shell {
+    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important;
+  }
+
+  .video-player-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
+  }
+
+  .video-playlist {
+    align-content: start;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .video-playlist-card {
+    gap: 0.62rem;
+    grid-template-columns: 78px minmax(0, 1fr);
+    padding: 0.58rem;
+  }
+
+  .video-playlist-card small {
+    font-size: 0.72rem;
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  .video-playlist-card img {
+    border-radius: 14px;
+    width: 78px;
+  }
+
+  .video-playlist-card span {
+    font-size: 0.68rem;
+    line-height: 1.35;
+  }
+
+  .video-playlist-card strong {
+    font-size: 0.84rem;
+    line-height: 1.22;
+    margin-top: 0.18rem;
+  }
+
+  .video-playlist-card p {
+    font-size: 0.74rem;
+    line-height: 1.42;
+    -webkit-line-clamp: 2;
+  }
+}
+
+@media (max-width: 1439px) {
+  .video-hero-shell {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .video-player-shell {
+    order: -1;
+  }
+}
+
+@media (max-width: 1180px) {
+  .video-hero-title {
+    font-size: clamp(2.2rem, 6vw, 3.2rem);
+  }
+
+  .video-hero-copy {
+    max-width: 760px;
+  }
+
+  .video-playlist {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 767px) {
+  .video-page {
+    max-width: 100vw;
+    overflow-x: clip;
+  }
+
+  .video-hero {
+    min-height: auto;
+  }
+
+  .video-hero-title {
+    font-size: clamp(1.82rem, 8.2vw, 2rem);
+    line-height: 1.16;
+    margin-bottom: 1rem;
+    max-width: 100%;
+  }
+
+  .video-hero-subtitle {
+    font-size: 1rem;
+  }
+
+  .video-role-tabs {
+    border-radius: 22px;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .video-role-tab {
+    flex: 1 1 100%;
+    justify-content: center;
+  }
+
+  .video-hero-actions,
+  .video-primary-action,
+  .video-secondary-action {
+    width: 100%;
+  }
+
+  .cinematic-player {
+    border-radius: 22px;
+    min-height: 0;
+  }
+
+  .video-player-layout {
+    grid-template-columns: 1fr;
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .video-player-layout .cinematic-player {
+    min-height: 0;
+  }
+
+  .video-now-playing {
+    align-items: flex-start;
+    border-radius: 20px;
+    grid-template-columns: 1fr;
+  }
+
+  .video-playlist {
+    border-radius: 22px;
+    max-width: 100%;
+    padding: 0.7rem;
+  }
+
+  .video-playlist-card {
+    align-items: flex-start;
+    grid-template-columns: 92px minmax(0, 1fr);
+    max-width: 100%;
+    min-height: 0;
+  }
+
+  .video-playlist-card img {
+    height: auto;
+    width: 92px;
+  }
+
+  .video-playlist-card small {
+    grid-column: 2;
+  }
+
+  .cinematic-player-main {
+    height: 64px;
+    width: 64px;
+  }
+
+  .cinematic-player-controls {
+    border-radius: 20px;
+    bottom: 0.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.38rem;
+    justify-content: center;
+    left: 0.75rem;
+    padding: 0.38rem;
+    right: 0.75rem;
+  }
+
+  .cinematic-player-controls .cinematic-player-time:first-of-type {
+    display: none;
+  }
+
+  .cinematic-player-controls button {
+    flex: 0 0 38px;
+    height: 38px;
+    width: 38px;
+  }
+
+  .cinematic-player-progress {
+    flex: 1 1 100%;
+    order: -1;
+    width: 100%;
+  }
+
+  .video-metrics-section {
+    margin-top: 0;
+    padding-bottom: 2rem;
+  }
+
+  .video-section {
+    padding: 4rem 0;
+  }
+
+  .video-section-heading h2,
+  .video-final-copy h2 {
+    font-size: 2rem;
+  }
+
+  .video-highlight-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .video-chapter-card {
+    align-items: flex-start;
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cinematic-player-state span {
+    animation: none !important;
+  }
+
+  .video-primary-action,
+  .video-secondary-action,
+  .video-role-tab,
+  .video-chapter-card,
+  .video-playlist-card,
+  .cinematic-player-main,
+  .cinematic-player-controls {
+    transition: none !important;
+  }
+
+  .video-chapter-card:hover,
+  .video-playlist-card:hover,
+  .video-primary-action:hover,
+  .cinematic-player:hover .cinematic-player-main,
+  .cinematic-player:focus-within .cinematic-player-main {
+    transform: none !important;
+  }
+}
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index 42be678..20414fe 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -1,12 +1,57 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { ArrowRight, BadgeCheck, Check, CircleDollarSign, ClipboardCheck, Headphones, MessageCircle, Play, ShieldCheck, Star, Video } from 'lucide-vue-next'
-import { caseStudies, faqs, pricingPlans, productFeatures, siteConfig } from '@/site.config'
+import { caseStudies, faqs, pricingFeatureGroups, pricingPlans, productFeatures, siteConfig } from '@/site.config'
 import AnimatedContent from '@/components/vue-bits/AnimatedContent.vue'
 import DecryptedText from '@/components/vue-bits/DecryptedText.vue'
 import Magnet from '@/components/vue-bits/Magnet.vue'
 
 const openFaq = ref(0)
+const demoVideoPlaying = ref(false)
+const selectedPricingPlanName = ref(
+  pricingPlans.find((plan) => plan.isRecommended)?.name ?? pricingPlans[0]?.name ?? ''
+)
+const selectedComparisonPlanName = ref(selectedPricingPlanName.value)
+
+const selectedPricingPlan = computed(() => (
+  pricingPlans.find((plan) => plan.name === selectedPricingPlanName.value) ?? pricingPlans[0]
+))
+
+function selectPricingPlan(plan) {
+  selectedPricingPlanName.value = plan.name
+  selectedComparisonPlanName.value = plan.name
+}
+
+function selectComparisonPlan(plan) {
+  selectedComparisonPlanName.value = plan.name
+  selectedPricingPlanName.value = plan.name
+}
+
+function featureValueLabel(value) {
+  if (value === true) {
+    return '包含'
+  }
+
+  if (!value) {
+    return '—'
+  }
+
+  return value
+}
+
+function isFeatureAvailable(value) {
+  return value === true || typeof value === 'string'
+}
+
+function featureOriginTone(row, planName) {
+  if (!isFeatureAvailable(row.values[planName])) {
+    return 'off'
+  }
+
+  const originPlan = pricingPlans.find((plan) => isFeatureAvailable(row.values[plan.name]))
+
+  return originPlan?.visualTone ?? 'starter'
+}
 
 const users = [
   '医疗集团信息化负责人',
@@ -149,10 +194,13 @@ const reviews = [
               class="demo-video"
               controls
               :poster="siteConfig.hero.video.poster"
+              @play="demoVideoPlaying = true"
+              @pause="demoVideoPlaying = false"
+              @ended="demoVideoPlaying = false"
             >
               <source :src="siteConfig.hero.video.src" type="video/mp4">
             </video>
-            <div class="demo-play" aria-hidden="true">
+            <div v-if="!demoVideoPlaying" class="demo-play" aria-hidden="true">
               <Play :size="28" fill="currentColor" />
             </div>
           </div>
@@ -202,18 +250,34 @@ const reviews = [
     </section>
 
     <section id="pricing" class="section-band">
-      <div class="mx-auto max-w-7xl px-5 md:px-8">
+      <div class="pricing-section-inner px-5 md:px-8">
         <AnimatedContent :distance="48" :duration="0.9" class-name="section-heading">
           <span>定价计划</span>
           <h2>按机构规模和部署要求选择服务方案。</h2>
         </AnimatedContent>
 
-        <div class="mt-10 grid gap-5 lg:grid-cols-3">
+        <div class="pricing-grid">
           <AnimatedContent v-for="(plan, index) in pricingPlans" :key="plan.name" :delay="index * 0.08" :distance="52" class-name="pricing-reveal">
             <article
               class="pricing-card"
-              :class="{ 'pricing-featured': plan.highlighted }"
+              :class="{
+                'pricing-featured': plan.highlighted,
+                'pricing-selected': selectedPricingPlanName === plan.name,
+                'pricing-enterprise': plan.isEnterprise,
+                [`pricing-tone-${plan.visualTone}`]: plan.visualTone
+              }"
+              tabindex="0"
+              :aria-label="`${plan.name}，${plan.price}，${plan.audience}`"
+              @click="selectPricingPlan(plan)"
+              @focus="selectPricingPlan(plan)"
             >
+              <div class="pricing-card-rail" aria-hidden="true">
+                <span>{{ plan.step }}</span>
+              </div>
+              <div class="pricing-tagline-row">
+                <span class="pricing-tagline">{{ plan.tagline }}</span>
+                <span v-if="plan.isRecommended" class="pricing-recommended">推荐</span>
+              </div>
               <div class="pricing-head">
                 <span>{{ plan.name }}</span>
                 <CircleDollarSign :size="24" aria-hidden="true" />
@@ -222,17 +286,143 @@ const reviews = [
                 <strong>{{ plan.price }}</strong>
                 <small>{{ plan.unit }}</small>
               </div>
+              <p class="pricing-audience">{{ plan.audience }}</p>
               <p>{{ plan.description }}</p>
-              <ul>
-                <li v-for="feature in plan.features" :key="feature">
+              <div v-if="plan.includedFrom" class="pricing-included">
+                {{ plan.includedFrom }}
+              </div>
+              <ul class="pricing-highlights">
+                <li v-for="highlight in plan.highlights" :key="highlight">
                   <Check :size="17" aria-hidden="true" />
-                  {{ feature }}
+                  {{ highlight }}
                 </li>
               </ul>
-              <a href="#contact" class="pricing-button">{{ plan.highlighted ? '预约方案顾问' : '开始咨询' }}</a>
+              <a
+                href="#contact"
+                class="pricing-button"
+                :aria-label="`${plan.ctaLabel}：${plan.name}`"
+                @click="selectPricingPlan(plan)"
+              >
+                {{ plan.ctaLabel }}
+              </a>
             </article>
           </AnimatedContent>
         </div>
+
+        <AnimatedContent :distance="40" :duration="0.8" class-name="pricing-comparison-shell">
+          <section class="pricing-comparison" aria-labelledby="pricing-comparison-title">
+            <div class="comparison-head">
+              <div>
+                <span>功能对比</span>
+                <h3 id="pricing-comparison-title">所有版本包含项一屏看清。</h3>
+              </div>
+              <a href="#contact" class="comparison-head-action">
+                咨询{{ selectedPricingPlan.name }}
+                <ArrowRight :size="17" aria-hidden="true" />
+              </a>
+            </div>
+
+            <div class="comparison-desktop" tabindex="0" aria-label="套餐功能对比表">
+              <table class="comparison-table">
+                <thead>
+                  <tr>
+                    <th scope="col">功能项</th>
+                    <th
+                      v-for="plan in pricingPlans"
+                      :key="plan.name"
+                      scope="col"
+                      :class="{ 'comparison-selected-col': selectedComparisonPlanName === plan.name }"
+                    >
+                      <button
+                        type="button"
+                        class="comparison-plan-head"
+                        :class="`comparison-tone-${plan.visualTone}`"
+                        @click="selectComparisonPlan(plan)"
+                      >
+                        <span>{{ plan.name }}</span>
+                        <strong>{{ plan.price }}</strong>
+                        <small>{{ plan.tagline }}</small>
+                      </button>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody v-for="group in pricingFeatureGroups" :key="group.name">
+                  <tr class="comparison-group-row">
+                    <th scope="rowgroup" :colspan="pricingPlans.length + 1">{{ group.name }}</th>
+                  </tr>
+                  <tr v-for="row in group.rows" :key="row.label">
+                    <th scope="row">{{ row.label }}</th>
+                    <td
+                      v-for="plan in pricingPlans"
+                      :key="plan.name"
+                      :class="{
+                        'comparison-cell-on': isFeatureAvailable(row.values[plan.name]),
+                        'comparison-cell-off': !isFeatureAvailable(row.values[plan.name]),
+                        'comparison-selected-col': selectedComparisonPlanName === plan.name,
+                        [`comparison-tone-${featureOriginTone(row, plan.name)}`]: isFeatureAvailable(row.values[plan.name])
+                      }"
+                    >
+                      <span class="comparison-value">
+                        <Check v-if="isFeatureAvailable(row.values[plan.name])" :size="15" aria-hidden="true" />
+                        {{ featureValueLabel(row.values[plan.name]) }}
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="comparison-mobile">
+              <div class="comparison-tabs" role="tablist" aria-label="选择套餐查看功能">
+                <button
+                  v-for="plan in pricingPlans"
+                  :key="plan.name"
+                  type="button"
+                  role="tab"
+                  :aria-selected="selectedComparisonPlanName === plan.name"
+                  :class="{
+                    'comparison-tab-active': selectedComparisonPlanName === plan.name,
+                    [`comparison-tone-${plan.visualTone}`]: plan.visualTone
+                  }"
+                  @click="selectComparisonPlan(plan)"
+                >
+                  <span>{{ plan.name }}</span>
+                  <small>{{ plan.price }}</small>
+                </button>
+              </div>
+
+              <div v-for="group in pricingFeatureGroups" :key="group.name" class="mobile-comparison-group">
+                <h4>{{ group.name }}</h4>
+                <div v-for="row in group.rows" :key="row.label" class="mobile-comparison-row">
+                  <span>{{ row.label }}</span>
+                  <strong
+                    :class="{
+                      'comparison-cell-off': !isFeatureAvailable(row.values[selectedComparisonPlanName]),
+                      [`comparison-tone-${featureOriginTone(row, selectedComparisonPlanName)}`]: isFeatureAvailable(row.values[selectedComparisonPlanName])
+                    }"
+                  >
+                    <Check v-if="isFeatureAvailable(row.values[selectedComparisonPlanName])" :size="15" aria-hidden="true" />
+                    {{ featureValueLabel(row.values[selectedComparisonPlanName]) }}
+                  </strong>
+                </div>
+              </div>
+            </div>
+          </section>
+        </AnimatedContent>
+
+        <AnimatedContent :distance="34" :duration="0.72" class-name="pricing-detail-shell">
+          <div class="pricing-detail" aria-live="polite">
+            <div>
+              <span>已选择</span>
+              <h3>{{ selectedPricingPlan.name }} · {{ selectedPricingPlan.tagline }}</h3>
+              <p>{{ selectedPricingPlan.audience }}</p>
+            </div>
+            <a href="#contact" class="pricing-detail-action">
+              {{ selectedPricingPlan.ctaLabel }}
+              <ArrowRight :size="18" aria-hidden="true" />
+            </a>
+          </div>
+        </AnimatedContent>
       </div>
     </section>
 
@@ -298,6 +488,11 @@ const reviews = [
 
         <AnimatedContent :distance="56" direction="horizontal" :reverse="true" :duration="0.95" class-name="contact-form-shell">
           <form class="contact-form" aria-label="预约演示表单">
+            <div class="selected-plan-note">
+              <span>已选择套餐</span>
+              <strong>{{ selectedPricingPlan.name }} · {{ selectedPricingPlan.price }}</strong>
+              <small>{{ selectedPricingPlan.ctaIntent }}</small>
+            </div>
             <label>
               姓名
               <input type="text" placeholder="请输入姓名">
@@ -312,7 +507,7 @@ const reviews = [
             </label>
             <label>
               关注场景
-              <textarea rows="4" placeholder="例如医共体协同、慢病随访、互联网医院建设"></textarea>
+              <textarea rows="4" :placeholder="`${selectedPricingPlan.ctaIntent}，也想了解例如医共体协同、慢病随访、互联网医院建设。`"></textarea>
             </label>
             <button type="button" class="btn-primary justify-center">
               提交预约
diff --git a/src/views/video/index.vue b/src/views/video/index.vue
new file mode 100644
index 0000000..5c32ed8
--- /dev/null
+++ b/src/views/video/index.vue
@@ -0,0 +1,266 @@
+<script setup>
+import { computed } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { ArrowRight, BadgeCheck, CheckCircle2, Clock3, Layers3, ListVideo, Play, Smartphone, Sparkles, Stethoscope, Store } from 'lucide-vue-next'
+import CinematicVideoPlayer from '@/components/CinematicVideoPlayer.vue'
+import AnimatedContent from '@/components/vue-bits/AnimatedContent.vue'
+import DecryptedText from '@/components/vue-bits/DecryptedText.vue'
+import Magnet from '@/components/vue-bits/Magnet.vue'
+import SplitText from '@/components/vue-bits/SplitText.vue'
+import { videoShowcase } from '@/site.config'
+
+const route = useRoute()
+
+const videoTabs = [
+  { key: 'user', label: '用户端', to: '/video/user', icon: Smartphone },
+  { key: 'doctor', label: '医生端', to: '/video/doctor', icon: Stethoscope },
+  { key: 'manager', label: '小程序店长管理端', to: '/video/manager', icon: Store }
+]
+
+const currentKey = computed(() => {
+  const key = route.params.audience
+  return Object.prototype.hasOwnProperty.call(videoShowcase, key) ? key : 'user'
+})
+
+const currentVideo = computed(() => videoShowcase[currentKey.value])
+const videoQueue = computed(() => currentVideo.value.videos || [])
+const queryVideoId = computed(() => {
+  const value = route.query.video
+  return Array.isArray(value) ? value[0] : value
+})
+const selectedVideo = computed(() => (
+  videoQueue.value.find((video) => video.id === queryVideoId.value) || videoQueue.value[0]
+))
+
+function videoTo(id) {
+  return {
+    name: 'VideoShowcase',
+    params: { audience: currentKey.value },
+    query: { video: id }
+  }
+}
+</script>
+
+<template>
+  <main class="video-page" :style="{ '--video-accent': currentVideo.accent }">
+    <section class="video-hero section-pad">
+      <div class="video-hero-shell mx-auto grid max-w-7xl gap-10 px-5 pt-24 md:px-8 xl:grid-cols-[0.88fr_1.12fr]">
+        <AnimatedContent :key="`${currentKey}-copy`" :distance="54" :duration="0.9" class-name="video-hero-copy">
+          <div class="video-eyebrow">
+            <BadgeCheck :size="16" aria-hidden="true" />
+            视频中心 · {{ currentVideo.badge }}
+          </div>
+
+          <SplitText
+            :key="`${currentKey}-title`"
+            :text="currentVideo.title"
+            tag="h1"
+            class-name="video-hero-title"
+            split-type="lines"
+            :delay="64"
+            :duration="0.95"
+            ease="power4.out"
+            :from="{ opacity: 0, y: 42, filter: 'blur(14px)' }"
+            :to="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
+          />
+
+          <p class="video-hero-subtitle">
+            <DecryptedText
+              :key="`${currentKey}-subtitle`"
+              :text="currentVideo.subtitle"
+              animate-on="view"
+              reveal-direction="center"
+              :speed="30"
+              :max-iterations="10"
+              encrypted-class-name="decrypted-ghost"
+              class-name="decrypted-final"
+            />
+          </p>
+
+          <nav class="video-role-tabs" aria-label="视频角色导航">
+            <RouterLink
+              v-for="tab in videoTabs"
+              :key="tab.key"
+              :to="tab.to"
+              class="video-role-tab"
+              :class="{ 'video-role-tab-active': tab.key === currentKey }"
+            >
+              <component :is="tab.icon" :size="18" aria-hidden="true" />
+              <span>{{ tab.label }}</span>
+            </RouterLink>
+          </nav>
+
+          <div class="video-hero-actions">
+            <Magnet :padding="80" :magnet-strength="5.2">
+              <RouterLink to="/product#contact" class="video-primary-action">
+                {{ currentVideo.cta }}
+                <ArrowRight :size="18" aria-hidden="true" />
+              </RouterLink>
+            </Magnet>
+            <a href="#chapters" class="video-secondary-action">
+              查看章节
+            </a>
+          </div>
+        </AnimatedContent>
+
+        <AnimatedContent :key="`${currentKey}-player`" :distance="68" direction="horizontal" :reverse="true" :duration="0.95" class-name="video-player-shell">
+          <div class="video-player-layout">
+            <div class="video-player-stage">
+              <CinematicVideoPlayer
+                :key="selectedVideo.id"
+                :src="selectedVideo.src"
+                :poster="selectedVideo.poster"
+                :title="selectedVideo.title"
+                :accent="currentVideo.accent"
+              />
+
+              <div class="video-now-playing">
+                <span>{{ selectedVideo.tag }}</span>
+                <div>
+                  <h2>{{ selectedVideo.title }}</h2>
+                  <p>{{ selectedVideo.description }}</p>
+                </div>
+                <small>{{ selectedVideo.duration }}</small>
+              </div>
+            </div>
+
+            <aside class="video-playlist" aria-label="视频播放列表">
+              <div class="video-playlist-head">
+                <ListVideo :size="20" aria-hidden="true" />
+                <div>
+                  <strong>{{ currentVideo.label }}视频库</strong>
+                  <span>{{ videoQueue.length }} 个视频</span>
+                </div>
+              </div>
+
+              <RouterLink
+                v-for="(video, index) in videoQueue"
+                :key="video.id"
+                :to="videoTo(video.id)"
+                class="video-playlist-card"
+                :class="{ 'video-playlist-card-active': video.id === selectedVideo.id }"
+              >
+                <img :src="video.poster" :alt="`${video.title}封面`" loading="lazy">
+                <div>
+                  <span>{{ String(index + 1).padStart(2, '0') }} · {{ video.tag }}</span>
+                  <strong>{{ video.title }}</strong>
+                  <p>{{ video.description }}</p>
+                </div>
+                <small>{{ video.duration }}</small>
+              </RouterLink>
+            </aside>
+          </div>
+        </AnimatedContent>
+      </div>
+    </section>
+
+    <section class="video-metrics-section">
+      <div class="mx-auto grid max-w-7xl gap-4 px-5 md:grid-cols-3 md:px-8">
+        <AnimatedContent
+          v-for="(metric, index) in currentVideo.metrics"
+          :key="`${currentKey}-${metric.label}`"
+          :delay="index * 0.07"
+          :distance="38"
+          class-name="video-metric-reveal"
+        >
+          <article class="video-metric-card">
+            <strong>{{ metric.value }}</strong>
+            <span>{{ metric.label }}</span>
+          </article>
+        </AnimatedContent>
+      </div>
+    </section>
+
+    <section id="chapters" class="video-section video-section-muted">
+      <div class="mx-auto grid max-w-7xl gap-10 px-5 md:px-8 lg:grid-cols-[0.82fr_1.18fr]">
+        <AnimatedContent :distance="44" :duration="0.85" class-name="video-section-heading">
+          <span>Chapter Flow</span>
+          <h2>按观看节奏拆解关键场景。</h2>
+          <p>适合销售演示、客户培训和内部对齐，先让用户看懂价值，再进入细节。</p>
+        </AnimatedContent>
+
+        <div class="video-chapter-list">
+          <AnimatedContent
+            v-for="(chapter, index) in selectedVideo.chapters"
+            :key="`${currentKey}-${selectedVideo.id}-${chapter.title}`"
+            :delay="index * 0.08"
+            :distance="46"
+            direction="horizontal"
+            :reverse="index % 2 === 1"
+            class-name="video-chapter-reveal"
+          >
+            <article class="video-chapter-card">
+              <span>{{ chapter.time }}</span>
+              <div>
+                <h3>{{ chapter.title }}</h3>
+                <p>{{ chapter.body }}</p>
+              </div>
+              <Play :size="19" fill="currentColor" aria-hidden="true" />
+            </article>
+          </AnimatedContent>
+        </div>
+      </div>
+    </section>
+
+    <section class="video-section">
+      <div class="mx-auto max-w-7xl px-5 md:px-8">
+        <AnimatedContent :distance="42" :duration="0.85" class-name="video-section-heading centered">
+          <span>Experience Details</span>
+          <h2>{{ currentVideo.label }}体验亮点</h2>
+        </AnimatedContent>
+
+        <div class="video-highlight-grid">
+          <AnimatedContent
+            v-for="(highlight, index) in selectedVideo.highlights"
+            :key="`${currentKey}-${selectedVideo.id}-${highlight}`"
+            :delay="index * 0.08"
+            :distance="42"
+            class-name="video-highlight-reveal"
+          >
+            <article class="video-highlight-card">
+              <CheckCircle2 :size="24" aria-hidden="true" />
+              <h3>{{ highlight }}</h3>
+              <p>围绕真实 C 端观看和演示场景，保持内容清楚、交互轻盈、重点突出。</p>
+            </article>
+          </AnimatedContent>
+        </div>
+      </div>
+    </section>
+
+    <section class="video-section video-final-section">
+      <div class="mx-auto grid max-w-7xl gap-8 px-5 md:px-8 lg:grid-cols-[1fr_0.9fr]">
+        <AnimatedContent :distance="48" :duration="0.9" class-name="video-final-copy">
+          <div class="video-eyebrow">
+            <Sparkles :size="16" aria-hidden="true" />
+            Demo Ready
+          </div>
+          <h2>需要替换真实视频素材时，只改配置即可。</h2>
+          <p>三端页面已经按视频库建模，后续可以为每条视频单独配置地址、封面、章节、标签、时长和讲解重点。</p>
+          <Magnet :padding="84" :magnet-strength="5">
+            <RouterLink to="/product#contact" class="video-primary-action">
+              联系顾问
+              <ArrowRight :size="18" aria-hidden="true" />
+            </RouterLink>
+          </Magnet>
+        </AnimatedContent>
+
+        <AnimatedContent :distance="48" direction="horizontal" :reverse="true" :duration="0.9" class-name="video-scene-panel">
+          <div class="video-scene-head">
+            <Layers3 :size="24" aria-hidden="true" />
+            <span>适用场景</span>
+          </div>
+          <div class="video-scene-list">
+            <span v-for="scene in currentVideo.scenes" :key="scene">{{ scene }}</span>
+          </div>
+          <div class="video-timeline" aria-hidden="true">
+            <span v-for="chapter in selectedVideo.chapters" :key="chapter.time"></span>
+          </div>
+          <div class="video-duration-note">
+            <Clock3 :size="18" aria-hidden="true" />
+            建议演示时长 90 秒以内
+          </div>
+        </AnimatedContent>
+      </div>
+    </section>
+  </main>
+</template>
