From e24e4f8ca00b677204c6141d4b17c3cf6456d7c1 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 14:25:11 +0800
Subject: [PATCH 1/9] feat(design): unify nav, redesign homepage/pricing/skill
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace VPNav with custom AppNav (sticky, unified across all pages)
- Add AppFooter component
- Fix nav width to match content (1240px via html:root specificity)
- Remove extra VPContent padding-top from VitePress fixed-nav compensation
- Add Features dropdown menu with left-aligned popup and correct positioning
- Add active state highlighting for nav links with route-aware detection
- Lock app-nav font-family to system font to prevent flicker on page transition
- Redesign NewHomePage, Pricing, Skill pages with new layout components
- Add useLbDarkSync composable for dark mode sync
- Fix normalize-md plugin to handle layout: false correctly
- Update homepage stat: 50K+ developers → 130+ API endpoints

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/.vitepress/md-plugins/normalize-md.ts    |    3 +-
 .../.vitepress/theme/components/AppFooter.vue |  102 +
 docs/.vitepress/theme/components/AppNav.vue   |  344 +
 .../theme/components/FeaturesMenu.vue         |   10 +-
 .../theme/components/NewHomePage/index.vue    |  739 +-
 docs/.vitepress/theme/components/Pricing.vue  | 1199 +--
 .../theme/components/QuotePermission.vue      |    3 +-
 docs/.vitepress/theme/components/Skill.vue    | 7223 ++++-------------
 docs/.vitepress/theme/components/index.ts     |    2 +
 docs/.vitepress/theme/composables/index.ts    |    1 +
 .../theme/composables/useLbDarkSync.ts        |    9 +
 docs/.vitepress/theme/layouts/Content.vue     |    4 -
 docs/.vitepress/theme/layouts/Layout.vue      |   10 +-
 docs/.vitepress/theme/layouts/LayoutInner.vue |   17 +-
 docs/.vitepress/theme/style/app-styles.css    | 2739 +++++++
 docs/.vitepress/theme/style/index.css         |   12 +
 docs/.vitepress/theme/style/lbus-tokens.css   |  259 +
 docs/en/index.md                              |    3 +-
 docs/en/pricing/index.md                      |    2 +-
 docs/en/skill/index.md                        |    2 +-
 docs/zh-CN/index.md                           |    3 +-
 docs/zh-CN/pricing/index.md                   |    2 +-
 docs/zh-CN/skill/index.md                     |    2 +-
 docs/zh-HK/index.md                           |    3 +-
 docs/zh-HK/pricing/index.md                   |    2 +-
 docs/zh-HK/skill/index.md                     |    2 +-
 26 files changed, 6487 insertions(+), 6210 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/AppFooter.vue
 create mode 100644 docs/.vitepress/theme/components/AppNav.vue
 create mode 100644 docs/.vitepress/theme/composables/useLbDarkSync.ts
 create mode 100644 docs/.vitepress/theme/style/app-styles.css
 create mode 100644 docs/.vitepress/theme/style/lbus-tokens.css

diff --git a/docs/.vitepress/md-plugins/normalize-md.ts b/docs/.vitepress/md-plugins/normalize-md.ts
index 68a87f13..4024d6f4 100644
--- a/docs/.vitepress/md-plugins/normalize-md.ts
+++ b/docs/.vitepress/md-plugins/normalize-md.ts
@@ -111,7 +111,8 @@ export const NormalizeMdPlugin = (md: MarkdownIt) => {
     const layout = state.env.frontmatter?.layout
 
     // 只对 layout 没有定义，或者 layout 为 'doc' 的文档生效
-    if (layout && layout !== 'doc') {
+    // 注意：layout: false 是 falsy，需要单独判断
+    if (layout === false || (layout && layout !== 'doc')) {
       return
     }
 
diff --git a/docs/.vitepress/theme/components/AppFooter.vue b/docs/.vitepress/theme/components/AppFooter.vue
new file mode 100644
index 00000000..a34717e7
--- /dev/null
+++ b/docs/.vitepress/theme/components/AppFooter.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { localePath, getBasenameLocale } from '../utils/i18n'
+
+function switchLocale(locale: string) {
+  if (typeof window === 'undefined') return
+  const path = window.location.pathname
+  const cur = getBasenameLocale()
+  if (cur) {
+    const newPath = locale === 'en' ? path.replace(`/${cur}`, '') || '/' : path.replace(`/${cur}`, `/${locale}`)
+    window.location.href = newPath
+  } else {
+    window.location.href = locale === 'en' ? path : `/${locale}${path}`
+  }
+}
+
+const year = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="app-footer">
+    <div class="app-footer-inner-v2">
+      <!-- Brand column -->
+      <div class="app-footer-brand">
+        <a :href="localePath('/')" class="app-brand" aria-label="Longbridge Developers">
+          <img class="brand-logo brand-logo-light"
+            src="https://assets.lbkrs.com/uploads/e76f6d93-80f8-4f9b-8b8d-2c86f0c94a78/longbridge-developers-light.png"
+            alt="Longbridge Developers" style="height:24px" />
+          <img class="brand-logo brand-logo-dark"
+            src="https://assets.lbkrs.com/uploads/37a18fa4-46a4-408c-a36a-560004eb3cfb/longbridge-developers-dark.png"
+            alt="Longbridge Developers" style="height:24px" />
+        </a>
+        <p>
+          Real-time market data, trading, and financial intelligence — delivered
+          through AI Skill, CLI, MCP, SDK and OpenAPI for developers worldwide.
+        </p>
+        <div class="footer-status">
+          <span style="width:6px;height:6px;border-radius:999px;background:var(--lb-up);box-shadow:0 0 0 3px color-mix(in srgb,var(--lb-up) 25%,transparent);flex-shrink:0" />
+          <span>All systems operational</span>
+        </div>
+      </div>
+
+      <!-- Products -->
+      <div>
+        <h5>Products</h5>
+        <ul>
+          <li><a :href="localePath('/skill')">AI Skill</a></li>
+          <li><a :href="localePath('/docs/cli')">CLI</a></li>
+          <li><a :href="localePath('/docs/mcp')">MCP</a></li>
+          <li><a :href="localePath('/docs')">SDK</a></li>
+          <li><a :href="localePath('/api')">OpenAPI</a></li>
+          <li><a :href="localePath('/docs')">LLM &amp; llms.txt</a></li>
+        </ul>
+      </div>
+
+      <!-- Resources -->
+      <div>
+        <h5>Resources</h5>
+        <ul>
+          <li><a :href="localePath('/docs')">Getting Started</a></li>
+          <li><a :href="localePath('/api')">API Reference</a></li>
+          <li><a :href="localePath('/docs/quote/pull/quote')">Quote API</a></li>
+          <li><a :href="localePath('/docs/trade/order/submit')">Trade API</a></li>
+          <li><a :href="localePath('/docs/changelog')">Changelog</a></li>
+          <li><a href="https://github.com/longbridge/developers/issues" target="_blank" rel="noreferrer">Feedback</a></li>
+        </ul>
+      </div>
+
+      <!-- Company -->
+      <div>
+        <h5>Company</h5>
+        <ul>
+          <li><a href="https://longbridge.com" target="_blank" rel="noreferrer">Longbridge</a></li>
+          <li><a href="https://longbridge.com/download" target="_blank" rel="noreferrer">Download</a></li>
+          <li><a href="https://status.longbridge.com" target="_blank" rel="noreferrer">Status</a></li>
+          <li><a href="https://longbridge.com/about" target="_blank" rel="noreferrer">About</a></li>
+          <li><a href="https://github.com/longbridge" target="_blank" rel="noreferrer">GitHub</a></li>
+        </ul>
+      </div>
+
+      <!-- Legal -->
+      <div>
+        <h5>Legal</h5>
+        <ul>
+          <li><a href="#">Terms of Service</a></li>
+          <li><a href="#">Privacy Policy</a></li>
+          <li><a href="#">Risk Disclosure</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="app-footer-bottom">
+      <div>© {{ year }} Longbridge Technology Limited. All rights reserved.</div>
+      <div class="app-footer-bottom-links">
+        <span>Hong Kong · Singapore · New York</span>
+        <span style="color:var(--lb-fg-3)">·</span>
+        <a href="#" @click.prevent="switchLocale('en')">English</a>
+        <a href="#" @click.prevent="switchLocale('zh-CN')">简体中文</a>
+        <a href="#" @click.prevent="switchLocale('zh-HK')">繁體中文</a>
+      </div>
+    </div>
+  </footer>
+</template>
diff --git a/docs/.vitepress/theme/components/AppNav.vue b/docs/.vitepress/theme/components/AppNav.vue
new file mode 100644
index 00000000..15335860
--- /dev/null
+++ b/docs/.vitepress/theme/components/AppNav.vue
@@ -0,0 +1,344 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import { localePath, getBasenameLocale } from '../utils/i18n'
+import { isLoginState, initLoginState } from '../composables/useLoginState'
+import { useAvatar } from './UserAvatar/uesAvatar'
+import UserAvatarIcon from './UserAvatar/UserAvatarIcon.vue'
+import UserAvatarDropdown from './UserAvatar/UserAvatarDropdown.vue'
+import FeaturesMenu from './FeaturesMenu.vue'
+
+const VPNavBarSearch = defineAsyncComponent(
+  () => import('vitepress/dist/client/theme-default/components/VPNavBarSearch.vue')
+)
+
+const { isDark } = useData()
+const route = useRoute()
+
+const currentPath = computed(() => {
+  route.path // reactive dependency
+  if (typeof window === 'undefined') return ''
+  const cur = getBasenameLocale()
+  const path = window.location.pathname
+  return cur ? path.replace(`/${cur}`, '') || '/' : path
+})
+
+function isNavActive(href: string): boolean {
+  const path = currentPath.value
+  if (href === '/docs') {
+    return (path === '/docs' || path.startsWith('/docs/'))
+      && !path.startsWith('/docs/cli')
+      && !path.startsWith('/docs/mcp')
+  }
+  return path === href || path.startsWith(href + '/')
+}
+
+const langOpen = ref(false)
+const mobileOpen = ref(false)
+
+const APP_NAV = [
+  { key: 'pricing', label: 'Pricing', href: '/pricing' },
+  { key: 'skill', label: 'Skill', href: '/skill' },
+  { key: 'cli', label: 'CLI', href: '/docs/cli' },
+  { key: 'mcp', label: 'MCP', href: '/docs/mcp' },
+  { key: 'docs', label: 'Docs', href: '/docs' },
+]
+
+const currentLocale = computed(() => {
+  if (typeof window === 'undefined') return 'en'
+  return getBasenameLocale() || 'en'
+})
+
+const langLabels: Record<string, string> = {
+  en: 'English',
+  'zh-CN': '简体中文',
+  'zh-HK': '繁體中文',
+}
+
+function switchLocale(locale: string) {
+  if (typeof window === 'undefined') return
+  const path = window.location.pathname
+  const cur = getBasenameLocale()
+  if (cur) {
+    const newPath = locale === 'en' ? path.replace(`/${cur}`, '') || '/' : path.replace(`/${cur}`, `/${locale}`)
+    window.location.href = newPath
+  } else {
+    window.location.href = locale === 'en' ? path : `/${locale}${path}`
+  }
+}
+
+const enableTransitions = () =>
+  typeof document !== 'undefined' && 'startViewTransition' in document &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+async function toggleTheme(e: MouseEvent) {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+  const { clientX: x, clientY: y } = e
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`,
+  ]
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    { duration: 300, easing: 'ease-in', pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)` }
+  )
+}
+
+// Login / avatar
+const isLogin = isLoginState
+const { avatar } = useAvatar()
+const avatarOpen = ref(false)
+const avatarEl = ref<HTMLElement>()
+const avatarCloseTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+const avatarMenuItems = computed(() => [
+  { title: 'Dashboard', href: localePath('/account') },
+  { title: 'Log out', href: localePath('/log-out') },
+])
+
+function onAvatarMouseEnter() {
+  if (avatarCloseTimer.value) { clearTimeout(avatarCloseTimer.value); avatarCloseTimer.value = null }
+  avatarOpen.value = true
+}
+function onAvatarMouseLeave() {
+  avatarCloseTimer.value = setTimeout(() => { avatarOpen.value = false }, 150)
+}
+function onAvatarClickOutside(e: Event) {
+  if (avatarEl.value && !avatarEl.value.contains(e.target as Node)) avatarOpen.value = false
+}
+
+function openSearch() {
+  const isMac = typeof navigator !== 'undefined' && /Mac/.test(navigator.userAgent)
+  document.dispatchEvent(
+    new KeyboardEvent('keydown', { key: 'k', metaKey: isMac, ctrlKey: !isMac, bubbles: true, cancelable: true })
+  )
+}
+
+onMounted(() => {
+  initLoginState()
+  document.addEventListener('click', onAvatarClickOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onAvatarClickOutside)
+  if (avatarCloseTimer.value) clearTimeout(avatarCloseTimer.value)
+})
+</script>
+
+<template>
+  <nav class="app-nav">
+    <div class="app-nav-inner">
+      <!-- Brand -->
+      <a :href="localePath('/')" class="app-brand" aria-label="Longbridge Developers">
+        <img class="brand-logo brand-logo-light"
+          src="https://assets.lbkrs.com/uploads/e76f6d93-80f8-4f9b-8b8d-2c86f0c94a78/longbridge-developers-light.png"
+          alt="Longbridge Developers" style="height:30px" />
+        <img class="brand-logo brand-logo-dark"
+          src="https://assets.lbkrs.com/uploads/37a18fa4-46a4-408c-a36a-560004eb3cfb/longbridge-developers-dark.png"
+          alt="Longbridge Developers" style="height:30px" />
+      </a>
+
+      <!-- Desktop nav links -->
+      <div class="app-nav-links">
+        <FeaturesMenu />
+        <a v-for="n in APP_NAV" :key="n.key" :href="localePath(n.href)" :class="{ 'is-active': isNavActive(n.href) }">
+          {{ n.label }}
+        </a>
+      </div>
+
+      <!-- Nav tail -->
+      <div class="app-nav-tail">
+        <!-- Search -->
+        <button type="button" class="app-nav-search" @click="openSearch" aria-label="Search docs">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
+          </svg>
+          Search docs…
+          <span class="app-nav-search-kbd">⌘K</span>
+        </button>
+
+        <!-- Language dropdown -->
+        <div class="nav-lang-wrap"
+          @mouseenter="langOpen = true"
+          @mouseleave="langOpen = false">
+          <button class="app-nav-icon-btn" aria-label="Language">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z" />
+            </svg>
+          </button>
+          <Transition name="dropdown">
+            <div v-if="langOpen" class="nav-lang-menu">
+              <a :class="{ 'is-active': currentLocale === 'en' }" @click.prevent="switchLocale('en')" href="#">English</a>
+              <a :class="{ 'is-active': currentLocale === 'zh-CN' }" @click.prevent="switchLocale('zh-CN')" href="#">简体中文</a>
+              <a :class="{ 'is-active': currentLocale === 'zh-HK' }" @click.prevent="switchLocale('zh-HK')" href="#">繁體中文</a>
+            </div>
+          </Transition>
+        </div>
+
+        <!-- Theme toggle -->
+        <button class="app-nav-icon-btn" @click="toggleTheme" aria-label="Toggle theme">
+          <!-- sun (dark mode active → show sun to switch to light) -->
+          <svg v-if="isDark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+          </svg>
+          <!-- moon (light mode → show moon) -->
+          <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        </button>
+
+        <!-- GitHub -->
+        <a class="app-nav-icon-btn" href="https://github.com/longbridge/developers" target="_blank" rel="noreferrer" aria-label="GitHub">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+          </svg>
+        </a>
+
+        <!-- Logged-in: Dashboard + Avatar -->
+        <ClientOnly>
+          <template v-if="isLogin">
+            <a class="btn btn-ghost btn-sm" :href="localePath('/account')">Dashboard</a>
+            <div
+              ref="avatarEl"
+              class="app-nav-avatar"
+              @mouseenter="onAvatarMouseEnter"
+              @mouseleave="onAvatarMouseLeave">
+              <button
+                type="button"
+                class="app-nav-avatar-btn"
+                :aria-expanded="avatarOpen"
+                @click="avatarOpen = !avatarOpen">
+                <UserAvatarIcon :src="avatar" size="sm" />
+              </button>
+              <div class="app-nav-avatar-menu" :class="{ 'is-open': avatarOpen }">
+                <UserAvatarDropdown :list="avatarMenuItems" v-model:open="avatarOpen" />
+              </div>
+            </div>
+          </template>
+          <!-- Not logged in: Get Started -->
+          <a v-else class="btn btn-primary btn-sm" :href="localePath('/login')">
+            Get Started
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
+            </svg>
+          </a>
+        </ClientOnly>
+
+        <!-- Mobile menu toggle -->
+        <button class="app-nav-icon-btn app-nav-mobile-menu" @click="mobileOpen = !mobileOpen" aria-label="Menu">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Mobile menu -->
+    <Transition name="slide-down">
+      <div v-if="mobileOpen" class="app-nav-mobile">
+        <FeaturesMenu :screenMenu="true" />
+        <a v-for="n in APP_NAV" :key="n.key" :href="localePath(n.href)" @click="mobileOpen = false">
+          {{ n.label }}
+        </a>
+        <a :href="localePath('/')" @click="mobileOpen = false">Home</a>
+      </div>
+    </Transition>
+
+    <!-- Hidden VPNavBarSearch: provides ⌘K search modal without VPNav -->
+    <ClientOnly>
+      <div style="position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none" aria-hidden="true">
+        <VPNavBarSearch />
+      </div>
+    </ClientOnly>
+  </nav>
+</template>
+
+<style scoped>
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.15s, transform 0.15s;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.app-nav-mobile {
+  display: none;
+  flex-direction: column;
+  gap: 0;
+  padding: 8px 16px 16px;
+  border-top: 1px solid var(--lb-stroke);
+  background: var(--lb-bg-1);
+}
+
+.app-nav-mobile a {
+  display: block;
+  padding: 10px 0;
+  font-size: 15px;
+  color: var(--lb-fg-1);
+  text-decoration: none;
+  border-bottom: 1px solid var(--lb-stroke);
+}
+
+.app-nav-mobile-menu {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .app-nav-mobile {
+    display: flex;
+  }
+  .app-nav-mobile-menu {
+    display: inline-flex;
+  }
+}
+
+.app-nav-avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.app-nav-avatar-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+.app-nav-avatar-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+  z-index: 100;
+}
+.app-nav-avatar-menu.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/FeaturesMenu.vue b/docs/.vitepress/theme/components/FeaturesMenu.vue
index 5336cfeb..a37355f3 100644
--- a/docs/.vitepress/theme/components/FeaturesMenu.vue
+++ b/docs/.vitepress/theme/components/FeaturesMenu.vue
@@ -190,7 +190,7 @@ function close() {
   </div>
 
   <!-- Desktop hover dropdown layout -->
-  <div v-else class="relative flex items-center px-3" @mouseenter="open" @mouseleave="close">
+  <div v-else class="relative flex h-full items-center px-3" @mouseenter="open" @mouseleave="close">
     <button
       class="flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 font-[inherit] text-sm font-medium whitespace-nowrap transition-colors duration-250"
       :class="isOpen ? 'text-[var(--vp-c-brand-1)]' : 'text-[var(--vp-c-text-1)] hover:text-[var(--vp-c-brand-1)]'">
@@ -214,7 +214,7 @@ function close() {
     <Transition name="dropdown">
       <div
         v-if="isOpen"
-        class="dropdown-panel absolute top-[calc(100%-8px)] left-1/2 z-100 w-160 overflow-hidden rounded-xl border border-[var(--vp-c-divider)] bg-[var(--vp-c-bg)] p-2 shadow-lg dark:shadow-2xl">
+        class="dropdown-panel absolute top-full left-0 z-100 mt-3 w-160 overflow-hidden rounded-xl border border-[var(--vp-c-divider)] bg-[var(--vp-c-bg)] p-2 shadow-lg dark:shadow-2xl">
         <div class="grid grid-cols-3 gap-1">
           <a
             v-for="item in features"
@@ -308,7 +308,7 @@ function close() {
 }
 
 .dropdown-panel {
-  transform: translateX(-50%) translateZ(0);
+  transform: translateZ(0);
 }
 
 .dropdown-enter-active,
@@ -321,12 +321,12 @@ function close() {
 .dropdown-enter-from,
 .dropdown-leave-to {
   opacity: 0;
-  transform: translateX(-50%) translateZ(0) translateY(-4px);
+  transform: translateZ(0) translateY(-4px);
 }
 
 .dropdown-enter-to,
 .dropdown-leave-from {
   opacity: 1;
-  transform: translateX(-50%) translateZ(0) translateY(0);
+  transform: translateZ(0) translateY(0);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/NewHomePage/index.vue b/docs/.vitepress/theme/components/NewHomePage/index.vue
index e4d5402f..0a92a3ca 100644
--- a/docs/.vitepress/theme/components/NewHomePage/index.vue
+++ b/docs/.vitepress/theme/components/NewHomePage/index.vue
@@ -1,37 +1,720 @@
 <script setup lang="ts">
-import HeroSection from './HeroSection.vue'
-import PlatformStats from './PlatformStats.vue'
-import ArchSection from './ArchSection.vue'
-import CapSection from './CapSection.vue'
-import CoreFeaturesSection from './CoreFeaturesSection.vue'
-import ProductCLI from './ProductCLI.vue'
-import ProductSkill from './ProductSkill.vue'
-import ProductMCP from './ProductMCP.vue'
-import ProductOpenAPI from './ProductOpenAPI.vue'
-import GetStarted from './GetStarted.vue'
-// import MarketCoverage from './MarketCoverage.vue'
+import { ref, computed } from 'vue'
+import AppNav from '../AppNav.vue'
+import AppFooter from '../AppFooter.vue'
+import { localePath } from '../../utils/i18n'
+
+// CLI OS tab
+const cliOs = ref('macOS')
+const installCmds: Record<string, string> = {
+  macOS: 'brew install --cask longbridge/tap/longbridge-terminal',
+  Linux: 'curl -sSL https://open.longbridge.com/longbridge/longbridge-terminal/install | sh',
+  Windows: 'iwr https://open.longbridge.com/longbridge/longbridge-terminal/install.ps1 | iex',
+}
+
+// SDK section
+const sdkLang = ref('Python')
+const sdkTab = ref('Get Quote')
+
+const SDK_LANGUAGES = [
+  { name: 'Python', installer: 'pip', cmd: 'pip3 install longbridge', color: '#3776AB' },
+  { name: 'Rust', installer: 'cargo', cmd: 'cargo add longport', color: '#CE422B' },
+  { name: 'Node.js', installer: 'npm', cmd: 'npm install longport', color: '#339933' },
+  { name: 'Go', installer: 'go', cmd: 'go get github.com/longbridgeapp/openapi-go', color: '#00ADD8' },
+  { name: 'Java', installer: 'maven', cmd: 'mvn install io.github.longbridge:openapi', color: '#E76F00' },
+  { name: 'C++', installer: 'cmake', cmd: 'git clone github.com/longbridge/openapi-cpp', color: '#00599C' },
+]
+
+type CodeLine = [string, string]
+const SDK_SAMPLES: Record<string, CodeLine[]> = {
+  'Get Quote': [
+    ['c', '# Real-time quote for 4 symbols'],
+    ['', 'from longbridge.openapi import QuoteContext, Config'],
+    ['', ''],
+    ['', 'config = Config.from_env()'],
+    ['', 'ctx = QuoteContext(config)'],
+    ['', ''],
+    ['', 'resp = ctx.quote(["AAPL.US", "TSLA.US", "NVDA.US", "GOOG.US"])'],
+    ['', 'print(resp)'],
+  ],
+  'Place Order': [
+    ['c', '# Submit a buy order with limit price'],
+    ['', 'from longbridge.openapi import TradeContext, OrderType, OrderSide'],
+    ['', ''],
+    ['', 'ctx = TradeContext(Config.from_env())'],
+    ['', 'order = ctx.submit_order('],
+    ['', '    symbol="TSLA.US",'],
+    ['', '    order_type=OrderType.LO,'],
+    ['', '    side=OrderSide.Buy,'],
+    ['', '    submitted_quantity=Decimal("10"),'],
+    ['', '    submitted_price=Decimal("420.00"),'],
+    ['', ')'],
+  ],
+  'Subscribe Push': [
+    ['c', '# WebSocket streaming — quote + depth'],
+    ['', 'from longbridge.openapi import SubType'],
+    ['', ''],
+    ['', 'ctx.subscribe(["TSLA.US","700.HK"], [SubType.Quote, SubType.Depth], True)'],
+    ['', ''],
+    ['', 'def on_quote(sym, ev):'],
+    ['', '    print(f"{sym} {ev.last_done} {ev.change_rate}")'],
+    ['', ''],
+    ['', 'ctx.set_on_quote(on_quote)'],
+  ],
+  'Account Balance': [
+    ['c', '# Balance + buying power across sub-accounts'],
+    ['', 'balance = ctx.account_balance()'],
+    ['', 'for b in balance:'],
+    ['', '    print(b.currency, b.net_assets, b.buy_power)'],
+    ['', ''],
+    ['o', 'USD  128,365.42  42,118.20'],
+    ['o', 'HKD   84,920.11  12,008.30'],
+  ],
+}
+
+const currentSdkSample = computed(() => SDK_SAMPLES[sdkTab.value] || [])
+const currentSdkLang = computed(() => SDK_LANGUAGES.find(l => l.name === sdkLang.value))
+
+const PY_KEYWORDS = new Set([
+  'from','import','def','class','for','while','if','elif','else','in','not',
+  'and','or','is','True','False','None','return','with','as','async','await',
+  'try','except','raise','pass','break','continue','lambda','yield','print','len',
+])
+
+function escHtml(s: string) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+}
+
+function highlightPython(code: string): string {
+  let out = ''
+  let i = 0
+  while (i < code.length) {
+    const ch = code[i]
+    // f/b/r-prefixed string
+    if (/^[fFbBrR]$/.test(ch) && (code[i+1] === '"' || code[i+1] === "'")) {
+      const prefix = ch; i++
+      const q = code[i]; let s = prefix + q; i++
+      while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
+      s += code[i]||''; i++
+      out += `<span class="ln-str">${escHtml(s)}</span>`; continue
+    }
+    // string
+    if (ch === '"' || ch === "'") {
+      const q = ch; let s = q; i++
+      while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
+      s += code[i]||''; i++
+      out += `<span class="ln-str">${escHtml(s)}</span>`; continue
+    }
+    // comment
+    if (ch === '#') {
+      out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`; break
+    }
+    // number
+    if (/\d/.test(ch)) {
+      let n = ''
+      while (i < code.length && /[\d._]/.test(code[i])) n += code[i++]
+      out += `<span class="ln-num">${escHtml(n)}</span>`; continue
+    }
+    // identifier / keyword / function call
+    if (/[a-zA-Z_]/.test(ch)) {
+      let w = ''
+      while (i < code.length && /[a-zA-Z0-9_]/.test(code[i])) w += code[i++]
+      if (PY_KEYWORDS.has(w)) out += `<span class="ln-key">${w}</span>`
+      else if (code[i] === '(') out += `<span class="ln-fn">${escHtml(w)}</span>`
+      else out += escHtml(w)
+      continue
+    }
+    out += escHtml(ch); i++
+  }
+  return out
+}
+
+function formatCodeLine([type, text]: CodeLine): string {
+  const t = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+  if (type === 'c') return `<span class="ln-comment">${t}</span>`
+  if (type === 'o') return `<span style="color:var(--lb-fg-2)">${t}</span>`
+  if (!text) return '&nbsp;'
+  return highlightPython(text)
+}
+
+async function copyToClipboard(text: string) {
+  try { await navigator.clipboard.writeText(text) } catch {}
+}
+
+const HERO_HIGHLIGHTS = [
+  { v: '4', u: 'markets', d: 'US · HK · SG · CN' },
+  { v: '7', u: 'SDKs', d: 'Python · Rust · Node · Go · Java · C · C++' },
+  { v: '100+', u: 'endpoints', d: 'Quote · Trade · Research · News' },
+  { v: '60ms', u: 'p50 latency', d: 'WebSocket streaming' },
+]
+
+const PRODUCTS = [
+  { key: 'skill', icon: 'ai', label: 'AI Skill',
+    title: 'Investment analysis agent for any AI',
+    desc: 'Real-time quotes, portfolio data, news sentiment, and market intelligence — works with Claude, ChatGPT, Cursor, Gemini, Codex, Zed, Cherry Studio.',
+    tags: ['100+ Skills'], href: '/skill', accent: 'var(--lb-brand)' },
+  { key: 'cli', icon: 'terminal', label: 'CLI',
+    title: 'AI-native terminal for trading',
+    desc: 'Interactive TUI dashboard, 120+ commands, and --format json output for scripting and AI agent integration. OAuth 2.0 works on SSH and headless servers.',
+    tags: ['120+ cmds', '--format json', 'TUI'], href: '/docs/cli', accent: 'var(--lb-status-alert)' },
+  { key: 'mcp', icon: 'bolt', label: 'MCP',
+    title: 'Hosted MCP server',
+    desc: 'OAuth 2.1 authentication — drop into Claude Code, Cursor, Codex, Zed, Cherry Studio in one line. Your AI gets real positions and live quotes.',
+    tags: ['OAuth 2.1', 'Hosted'], href: '/docs/mcp', accent: 'var(--lb-ai-mention)' },
+  { key: 'sdk', icon: 'stack', label: 'SDK',
+    title: '7 languages, one Rust core',
+    desc: 'Get your first quote in minutes. Python, Node.js, Rust, Go, Java, C, C++ — with async support and built-in rate control.',
+    tags: ['Python', 'Rust', 'Go', '+ 4'], href: '/docs', accent: 'var(--lb-status-neutral)' },
+  { key: 'paper', icon: 'shield', label: 'Paper Trading',
+    title: 'Sandbox at zero cost',
+    desc: 'Test orders with real market data — simulated matching based on live bid-ask spreads. No securities account required.',
+    tags: ['Sandbox', 'Zero Cost'], href: '/docs', accent: 'var(--lb-up)' },
+  { key: 'llm', icon: 'book', label: 'LLM Ready',
+    title: 'Built for retrieval & RAG',
+    desc: 'llms.txt standard compliance, every doc available as .md for RAG pipelines, and Accept: text/markdown header support on longbridge.com.',
+    tags: ['Markdown', 'llms.txt'], href: '/docs', accent: 'var(--lb-chart-purple)' },
+]
+
+const SUPPORTED_AGENTS = [
+  { name: 'Claude Code', initial: 'C', color: '#D97757' },
+  { name: 'Codex', initial: 'O', color: '#000000' },
+  { name: 'Cursor', initial: 'C', color: '#000000' },
+  { name: 'Gemini', initial: 'G', color: '#1A73E8' },
+  { name: 'OpenClaw', initial: 'O', color: 'var(--lb-brand)' },
+  { name: 'Zed', initial: 'Z', color: '#0E40D9' },
+]
+
+const MCP_CLIENTS = ['Claude Code', 'Codex', 'Gemini', 'Cursor', 'Zed']
+
+const API_CAPS = [
+  { icon: 'chart', color: 'var(--lb-status-neutral)', title: 'Market Data', count: '30+',
+    desc: 'Real-time quotes, order depth, candlestick, intraday, capital flow, and push subscriptions',
+    items: ['Real-time quotes', 'Order book depth', 'Candlestick charts', 'Intraday timeline', 'Capital flow', 'WebSocket push'] },
+  { icon: 'shield', color: 'var(--lb-brand)', title: 'Trading & Orders', count: '14+',
+    desc: 'Submit, replace, and withdraw orders. Track positions, balance, and execution history',
+    items: ['Submit orders', 'Modify & cancel', 'Positions & balance', 'Execution history', 'Order status push'] },
+  { icon: 'bolt', color: 'var(--lb-ai-mention)', title: 'Derivatives', count: '8+',
+    desc: 'Full option chains with Greeks, warrants listing, and real-time derivative quotes',
+    items: ['Option chains + Greeks', 'Warrant filtering', 'Issuer directory', 'Derivative quotes'] },
+  { icon: 'book', color: 'var(--lb-chart-purple)', title: 'Financial Research', count: '7+',
+    desc: 'Financial statements, valuation metrics, dividend history, EPS forecasts, analyst ratings',
+    items: ['Financial statements', 'Valuation metrics', 'Dividend history', 'EPS forecasts', 'Analyst ratings'] },
+  { icon: 'globe', color: 'var(--lb-status-alert)', title: 'Content & News', count: '8+',
+    desc: 'Real-time news feeds, community discussions, topics, and engagement metrics',
+    items: ['News feeds', 'Community topics', 'Discussions', 'Engagement data'] },
+]
+
+const GETSTARTED = [
+  { key: 'auth', icon: 'key', title: 'Authentication setup',
+    desc: 'Register an OAuth 2.0 client, obtain credentials, and configure your SDK with automatic token management.',
+    cta: 'Setup guide', href: '/docs' },
+  { key: 'api', icon: 'book', title: 'API Reference',
+    desc: 'Browse 100+ endpoints for quotes, trading, portfolio, and content. Try requests directly in the browser.',
+    cta: 'Explore APIs', href: '/api' },
+  { key: 'cli', icon: 'terminal', title: 'Install CLI',
+    desc: 'One-line install for macOS, Linux, and Windows. 120+ commands with interactive TUI and JSON output.',
+    cta: 'Install now', href: '/docs/cli' },
+]
 </script>
 
 <template>
-  <div class="new-home-page">
-    <HeroSection />
-    <PlatformStats />
-    <ArchSection />
-    <CoreFeaturesSection />
-    <ProductCLI />
-    <ProductSkill />
-    <ProductMCP />
-    <CapSection />
-    <ProductOpenAPI />
-    <GetStarted />
-    <!-- <MarketCoverage /> -->
+  <div class="page-root">
+    <AppNav />
+
+    <!-- ===== Hero ===== -->
+    <section class="home-hero home-hero-centered">
+      <div class="hero-bg-data" aria-hidden="true">
+        <div class="hero-bg-blobs">
+          <span class="hero-blob hero-blob-1" />
+          <span class="hero-blob hero-blob-2" />
+          <span class="hero-blob hero-blob-3" />
+          <span class="hero-blob hero-blob-4" />
+        </div>
+        <div class="hero-bg-dots" />
+        <div class="hero-bg-vignette" />
+        <div class="hero-bg-horizon" />
+      </div>
+      <div class="home-hero-inner-centered">
+        <span class="eyebrow">LONGBRIDGE OPENAPI</span>
+        <h1 class="h-display home-hero-title">
+          Real-time markets,<br />
+          <span :style="{ color: 'var(--lb-brand)' }">delivered to your code.</span>
+        </h1>
+        <p class="t-body home-hero-sub">
+          Real-time market data, trading, and financial intelligence — delivered through
+          <b :style="{ color: 'var(--lb-fg-1)' }">AI Skill, CLI, MCP, SDK and OpenAPI</b>
+          for developers worldwide. One credential, seven SDKs, zero ceremony.
+        </p>
+        <div class="home-hero-cta">
+          <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
+            Get Started
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          </a>
+          <a class="btn btn-outline btn-lg" :href="localePath('/docs')">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+            Read the Docs
+          </a>
+        </div>
+        <div class="home-hero-highlights">
+          <template v-for="(h, i) in HERO_HIGHLIGHTS" :key="h.u">
+            <div class="home-hero-stat">
+              <div class="home-hero-stat-line">
+                <span class="home-hero-stat-v">{{ h.v }}</span>
+                <span class="home-hero-stat-u">{{ h.u }}</span>
+              </div>
+              <div class="home-hero-stat-d">{{ h.d }}</div>
+            </div>
+            <span v-if="i < HERO_HIGHLIGHTS.length - 1" class="home-hero-stat-sep" />
+          </template>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== Products matrix ===== -->
+    <section class="section">
+      <div class="section-inner">
+        <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:48px">
+          <div style="max-width:560px">
+            <span class="eyebrow">FEATURES</span>
+            <h2 class="h-section" style="margin-top:16px">Everything you need to build, test, and ship financial apps.</h2>
+          </div>
+          <a class="btn btn-ghost" :href="localePath('/docs')">
+            Compare all
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          </a>
+        </div>
+        <div class="products-grid">
+          <a v-for="p in PRODUCTS" :key="p.key" :href="localePath(p.href)" class="product-card" :style="{ '--card-accent': p.accent }">
+            <div class="product-card-head">
+              <span class="product-card-label" :style="{ color: p.accent }">{{ p.label }}</span>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </div>
+            <h3 class="product-card-title">{{ p.title }}</h3>
+            <p class="product-card-desc">{{ p.desc }}</p>
+            <div class="product-card-tags">
+              <span v-for="t in p.tags" :key="t" class="product-card-tag">{{ t }}</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== CLI Spotlight ===== -->
+    <section class="section cli-spotlight">
+      <div class="section-inner cli-spotlight-grid">
+        <div>
+          <span class="eyebrow">Longbridge CLI</span>
+          <h2 class="h-section" style="margin-top:18px">AI-native command-line tool, covering every OpenAPI.</h2>
+          <ul class="cli-feat-list">
+            <li v-for="([h, d]) in [
+              ['120+ commands','Market data, trading, fundamentals — all in your shell.'],
+              ['--format json output','Pipe into jq, awk, or any AI agent\'s tool channel.'],
+              ['Multi-period candlesticks','Daily, hourly, 15-min, 5-min, 1-min — all from one flag.'],
+              ['Portfolio P&L view','Position breakdown with allocation drill-down.'],
+              ['OAuth 2.0 on SSH','Works on headless servers and inside Docker.']
+            ]" :key="h">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-up)' }"><polyline points="20 6 9 17 4 12"/></svg>
+              <div>
+                <div style="font-weight:600;color:var(--lb-fg-1);font-size:14px">{{ h }}</div>
+                <div class="t-meta" style="font-size:13px;margin-top:2px">{{ d }}</div>
+              </div>
+            </li>
+          </ul>
+          <a class="btn btn-outline" :href="localePath('/docs/cli')" style="margin-top:24px">
+            CLI Documentation
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          </a>
+        </div>
+        <div class="cli-demo-col">
+          <div class="cli-os-tabs">
+            <button v-for="o in ['macOS','Linux','Windows']" :key="o"
+              :class="['cli-os-tab', o === cliOs ? 'is-active' : '']"
+              @click="cliOs = o">{{ o }}</button>
+          </div>
+          <div class="code" style="margin-top:12px">
+            <div class="code-head">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+              <span style="font-size:11.5px;color:var(--lb-fg-3)">{{ cliOs.toLowerCase() }} · bash</span>
+              <button class="code-copy" title="Copy" @click="copyToClipboard(installCmds[cliOs])">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+              </button>
+            </div>
+            <div class="code-body">
+              <div><span class="ln-prompt">$ </span>{{ installCmds[cliOs] }}</div>
+              <div>&nbsp;</div>
+              <div><span class="ln-prompt">$ </span>longbridge auth login</div>
+              <div style="color:var(--lb-fg-2)">✓ Browser opened. Logged in as alex@longbridge.com</div>
+              <div>&nbsp;</div>
+              <div><span class="ln-prompt">$ </span>longbridge quote <span class="ln-str">"TSLA.US"</span> <span class="ln-str">"NVDA.US"</span> <span class="ln-str">"700.HK"</span></div>
+              <div style="color:var(--lb-fg-2)">SYMBOL &nbsp; LAST &nbsp; &nbsp; CHANGE &nbsp; &nbsp;VOLUME</div>
+              <div style="color:var(--lb-fg-2)">TSLA.US &nbsp; 421.65 &nbsp; <span class="is-up">+2.31%</span> &nbsp; 18.2M</div>
+              <div style="color:var(--lb-fg-2)">NVDA.US &nbsp; 142.83 &nbsp; <span class="is-up">+1.18%</span> &nbsp; 62.7M</div>
+              <div style="color:var(--lb-fg-2)">700.HK &nbsp; &nbsp;528.50 &nbsp; <span class="is-up">+0.86%</span> &nbsp; &nbsp;5.4M</div>
+              <div>&nbsp;</div>
+              <div><span class="ln-prompt">$ </span>longbridge portfolio --format json | jq <span class="ln-str">'.positions[] | select(.pnl_pct > 5)'</span></div>
+            </div>
+          </div>
+          <div class="cli-mini-stats">
+            <div><span class="num" style="font-weight:700;font-size:22px">120<span style="color:var(--lb-fg-3);font-size:13px">+</span></span><span class="t-meta" style="display:block;font-size:11.5px">commands</span></div>
+            <div><span class="num" style="font-weight:700;font-size:22px">7</span><span class="t-meta" style="display:block;font-size:11.5px">output formats</span></div>
+            <div><span class="num" style="font-weight:700;font-size:22px">3</span><span class="t-meta" style="display:block;font-size:11.5px">platforms</span></div>
+            <div><span class="num" style="font-weight:700;font-size:22px">40<span style="color:var(--lb-fg-3);font-size:13px">ms</span></span><span class="t-meta" style="display:block;font-size:11.5px">p50 query</span></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== AI Spotlight ===== -->
+    <section class="section ai-spotlight">
+      <div class="section-inner">
+        <div class="ai-spotlight-card">
+          <div class="ai-spotlight-text">
+            <span class="eyebrow" :style="{ color: 'var(--lb-ai-mention)' }">AI Skill · 100+ packaged tools</span>
+            <h2 class="h-section" style="margin-top:18px;color:#fff">Unlock market insights, deep research,<br />and intelligent trading for your AI.</h2>
+            <p style="margin-top:18px;color:rgba(255,255,255,0.66);max-width:520px;line-height:1.65;font-size:15px">
+              With Longbridge Skill, your AI assistant can screen stocks, decode earnings,
+              track insider moves, and place orders — all in plain conversation, no app-switching required.
+            </p>
+
+            <div class="ai-install-block">
+              <div class="ai-install-label">Copy and send to any AI — it walks you through install:</div>
+              <div class="ai-install-cmd">
+                <code>Install Longbridge AI toolkit following the guide:<br />https://open.longbridge.com/skill/install.md</code>
+                <button class="code-copy" title="Copy" @click="copyToClipboard('Install Longbridge AI toolkit following the guide:\nhttps://open.longbridge.com/skill/install.md')">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                </button>
+              </div>
+              <div class="ai-install-or">— or via package manager —</div>
+              <div class="ai-install-cmd">
+                <code><span :style="{ color: 'var(--lb-ai-mention)' }">$</span> npx skills add longbridge/skills -g</code>
+                <button class="code-copy" title="Copy" @click="copyToClipboard('npx skills add longbridge/skills -g')">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                </button>
+              </div>
+            </div>
+
+            <div class="ai-agents-row">
+              <div v-for="a in SUPPORTED_AGENTS" :key="a.name" class="ai-agent-chip" :title="a.name">
+                <span class="ai-agent-mark" :style="{ background: a.color }">{{ a.initial }}</span>
+                {{ a.name }}
+              </div>
+              <div class="ai-agent-chip ai-agent-more">+ any Skill-compatible agent</div>
+            </div>
+
+            <div style="display:flex;gap:12px;margin-top:24px;flex-wrap:wrap">
+              <a class="btn btn-lg" :href="localePath('/skill')" style="background:#fff;color:#09252A">
+                Browse Skill catalog
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+              </a>
+            </div>
+          </div>
+
+          <div class="ai-spotlight-chat code" style="background:#0A0E19;border:1px solid rgba(255,255,255,0.08)">
+            <div class="code-head" style="background:#141826;border-bottom:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.7)">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" :style="{ color: 'var(--lb-ai-mention)' }"><path d="M12 2.5 13.4 9.2 20.5 10.5 13.6 12 12 18.5 10.4 12 3.5 10.5 10.6 9.2z"/></svg>
+              Claude Code · skill: longbridge
+              <span style="margin-left:auto;font-size:11px;color:rgba(255,255,255,0.4)">connected</span>
+            </div>
+            <div class="ai-chat-body">
+              <div class="ai-msg user">
+                <div class="ai-msg-text">Pull NVDA's daily chart for the past 6 months and tell me if I should hold my position.</div>
+              </div>
+              <div class="ai-msg assistant">
+                <div class="ai-msg-tool">
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-ai-mention)' }"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+                  <span>used <code>longbridge-kline</code> · 6mo · daily</span>
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="margin-left:auto" :style="{ color: 'var(--lb-up)' }"><polyline points="20 6 9 17 4 12"/></svg>
+                </div>
+                <div class="ai-msg-tool">
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-ai-mention)' }"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+                  <span>used <code>longbridge-positions</code></span>
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="margin-left:auto" :style="{ color: 'var(--lb-up)' }"><polyline points="20 6 9 17 4 12"/></svg>
+                </div>
+                <div class="ai-msg-text" style="color:rgba(255,255,255,0.88)">
+                  NVDA broke its 50-day MA on heavy volume <span class="num" :style="{ color: 'var(--lb-ai-mention)' }">3 sessions ago</span>.
+                  Your <b>247 shares</b> at avg <b>$127.40</b> are up <span class="is-up num" style="font-weight:600">+12.1%</span>.
+                  Concentration risk is <span :style="{ color: 'var(--lb-status-alert)', fontWeight: '600' }">medium</span> — NVDA is 31% of your portfolio. Consider trimming if it hits $150.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== MCP Section ===== -->
+    <section class="section">
+      <div class="section-inner mcp-grid">
+        <div>
+          <span class="eyebrow">Hosted MCP</span>
+          <h2 class="h-section" style="margin-top:18px">Connect any AI assistant to live market data — no API keys.</h2>
+          <p class="t-body" style="margin-top:14px;max-width:520px">
+            Hosted HTTP MCP service with OAuth 2.1 authentication. Your AI coding assistant
+            gets real-time quotes, account info, and trading — all in one connection.
+          </p>
+          <div class="mcp-clients">
+            <span v-for="c in MCP_CLIENTS" :key="c" class="mcp-client-pill">
+              <span class="mcp-client-dot" />
+              {{ c }}
+            </span>
+          </div>
+          <a class="btn btn-outline" style="margin-top:24px" :href="localePath('/docs/mcp')">
+            MCP Documentation
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          </a>
+        </div>
+        <div class="code mcp-code">
+          <div class="code-head">
+            <span style="display:flex;gap:6px;align-items:center">
+              <span style="width:10px;height:10px;border-radius:999px;background:#FF5F57" />
+              <span style="width:10px;height:10px;border-radius:999px;background:#FEBC2E" />
+              <span style="width:10px;height:10px;border-radius:999px;background:#28C840" />
+            </span>
+            <span style="margin-left:8px;font-size:11.5px;color:var(--lb-fg-3)">~/projects/quant — claude</span>
+            <button class="code-copy" @click="copyToClipboard('claude mcp add --transport http longbridge \\\n  https://openapi.longbridge.com/mcp')">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+            </button>
+          </div>
+          <div class="code-body" style="font-size:13.5px;line-height:1.8">
+            <div><span class="ln-comment"># One-line install for Claude Code</span></div>
+            <div><span class="ln-prompt">$ </span>claude mcp add --transport http longbridge \</div>
+            <div>&nbsp;&nbsp;<span class="ln-str">https://openapi.longbridge.com/mcp</span></div>
+            <div>&nbsp;</div>
+            <div style="color:var(--lb-fg-2)">→ Opening browser for OAuth 2.1…</div>
+            <div style="color:var(--lb-fg-2)">✓ Authenticated as alex@longbridge.com</div>
+            <div style="color:var(--lb-fg-2)">✓ Connected · 47 tools available</div>
+            <div>&nbsp;</div>
+            <div><span class="ln-comment"># Verify the connection</span></div>
+            <div><span class="ln-prompt">$ </span>claude mcp list</div>
+            <div style="color:var(--lb-fg-2)">longbridge &nbsp; <span :style="{ color: 'var(--lb-up)' }">✓ ready</span> &nbsp; 47 tools</div>
+          </div>
+          <div style="padding:10px 16px;border-top:1px solid var(--app-card-stroke);display:flex;align-items:center;gap:8px">
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><circle cx="7" cy="15" r="4"/><path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3"/></svg>
+            <span class="t-meta" style="font-size:11.5px">OAuth 2.1 — browser opens automatically on first use. No API key needed.</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== API Capabilities ===== -->
+    <section class="section" style="background:var(--app-canvas);border-top:1px solid var(--app-card-stroke);border-bottom:1px solid var(--app-card-stroke)">
+      <div class="section-inner">
+        <div style="max-width:560px;margin-bottom:48px">
+          <span class="eyebrow">API Capabilities</span>
+          <h2 class="h-section" style="margin-top:16px">Everything you need to build trading and market data apps.</h2>
+        </div>
+        <div class="api-caps-grid">
+          <a v-for="c in API_CAPS" :key="c.title" :href="localePath('/api')" class="api-cap-card">
+            <div class="api-cap-head">
+              <div class="api-cap-icon" :style="{ background: `color-mix(in srgb, ${c.color} 14%, transparent)`, color: c.color }">
+                <!-- icon by name -->
+                <svg v-if="c.icon === 'chart'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+                <svg v-else-if="c.icon === 'shield'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                <svg v-else-if="c.icon === 'bolt'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+                <svg v-else-if="c.icon === 'book'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+                <svg v-else-if="c.icon === 'globe'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/></svg>
+              </div>
+              <span class="api-cap-count" :style="{ color: c.color, background: `color-mix(in srgb, ${c.color} 12%, transparent)` }">{{ c.count }}</span>
+            </div>
+            <h3 class="h-card" style="margin-top:18px">{{ c.title }}</h3>
+            <p class="t-meta" style="margin-top:8px;line-height:1.55">{{ c.desc }}</p>
+            <ul class="api-cap-list">
+              <li v-for="item in c.items" :key="item">
+                <svg width="10" height="10" viewBox="0 0 24 24" :style="{ color: c.color, flexShrink: '0' }"><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>
+                {{ item }}
+              </li>
+            </ul>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== SDK Section ===== -->
+    <section class="section">
+      <div class="section-inner">
+        <div style="max-width:640px;margin-bottom:40px">
+          <span class="eyebrow">OpenAPI SDK</span>
+          <h2 class="h-section" style="margin-top:16px">Production-grade SDKs with real-time streaming.</h2>
+          <p class="t-body" style="margin-top:14px">
+            7 SDKs built on a shared Rust core — subscribe to live data, place orders, and monitor positions with
+            async/await patterns and built-in rate limiting.
+          </p>
+        </div>
+
+        <div class="sdk-tabs">
+          <button v-for="l in SDK_LANGUAGES" :key="l.name"
+            :class="['sdk-tab', l.name === sdkLang ? 'is-active' : '']"
+            @click="sdkLang = l.name">
+            <span class="sdk-tab-dot" :style="{ background: l.color }" />
+            {{ l.name }}
+          </button>
+        </div>
+
+        <div class="sdk-frame">
+          <div class="sdk-frame-l">
+            <div class="sdk-action-tabs">
+              <button v-for="t in Object.keys(SDK_SAMPLES)" :key="t"
+                :class="['sdk-action-tab', t === sdkTab ? 'is-active' : '']"
+                @click="sdkTab = t">{{ t }}</button>
+            </div>
+            <div class="code" style="margin-top:12px;flex:1;display:flex;flex-direction:column">
+              <div class="code-head">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                <span style="font-size:11.5px;color:var(--lb-fg-3)">{{ sdkLang.toLowerCase() }} · {{ sdkTab.toLowerCase().replace(' ', '_') }}.py</span>
+                <button class="code-copy" @click="copyToClipboard(currentSdkSample.map(l => l[1]).join('\n'))">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                </button>
+              </div>
+              <div class="code-body" style="flex:1">
+                <div v-for="(line, idx) in currentSdkSample" :key="idx" v-html="formatCodeLine(line)" />
+              </div>
+            </div>
+            <div class="sdk-install">
+              <span style="font-size:11.5px;color:var(--lb-fg-3);text-transform:uppercase;letter-spacing:0.06em;font-weight:600">{{ currentSdkLang?.installer }}</span>
+              <code style="flex:1;font-family:var(--app-mono);font-size:13px;color:var(--lb-fg-1)">{{ currentSdkLang?.cmd }}</code>
+              <button class="code-copy" @click="copyToClipboard(currentSdkLang?.cmd || '')">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="sdk-frame-r">
+            <!-- Multi-Market -->
+            <div class="sdk-feat">
+              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-status-neutral) 14%,transparent);color:var(--lb-status-neutral)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/></svg>
+              </div>
+              <div style="flex:1;min-width:0">
+                <div class="sdk-feat-h">Multi-Market</div>
+                <div class="sdk-feat-body">
+                  US · HK · SG · CN (SH/SZ) — stocks, ETFs, options, warrants.
+                  <div class="sdk-feat-pills">
+                    <span v-for="m in ['US','HK','SG','CN']" :key="m">{{ m }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Free & Paper Trading -->
+            <div class="sdk-feat">
+              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-up) 14%,transparent);color:var(--lb-up)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+              </div>
+              <div style="flex:1;min-width:0">
+                <div class="sdk-feat-h">Free &amp; Paper Trading</div>
+                <div class="sdk-feat-body">
+                  No additional API charges. Paper trading with real market data, no securities account required.
+                  <div class="sdk-feat-strong">$0 API charges</div>
+                </div>
+              </div>
+            </div>
+            <!-- Real-time Push -->
+            <div class="sdk-feat">
+              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-ai-mention) 14%,transparent);color:var(--lb-ai-mention)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+              </div>
+              <div style="flex:1;min-width:0">
+                <div class="sdk-feat-h">Real-time Push</div>
+                <div class="sdk-feat-body">WebSocket push for quotes, order depth, trades, and order status — &lt;60 ms latency.</div>
+              </div>
+            </div>
+            <!-- OAuth 2.0 -->
+            <div class="sdk-feat">
+              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-chart-purple) 14%,transparent);color:var(--lb-chart-purple)">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="15" r="4"/><path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3"/></svg>
+              </div>
+              <div style="flex:1;min-width:0">
+                <div class="sdk-feat-h">OAuth 2.0 + Async</div>
+                <div class="sdk-feat-body">Automatic token management with modern async/await patterns and built-in rate control.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style="margin-top:32px;display:flex;justify-content:center">
+          <a class="btn btn-outline btn-lg" :href="localePath('/docs')">
+            SDK Documentation
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== Stats band ===== -->
+    <section class="section" style="padding-top:0">
+      <div class="section-inner">
+        <div class="stats-band card">
+          <div class="stats-band-cell">
+            <div class="num h-display" style="font-size:44px;font-weight:600">130<span style="font-size:20px;color:var(--lb-fg-3)">+</span></div>
+            <div class="t-meta">API endpoints<br />across all markets</div>
+          </div>
+          <div class="stats-band-cell">
+            <div class="num h-display" style="font-size:44px;font-weight:600">60<span style="font-size:20px;color:var(--lb-fg-3)">ms</span></div>
+            <div class="t-meta">Median quote latency<br />P99 &lt; 180 ms</div>
+          </div>
+          <div class="stats-band-cell">
+            <div class="num h-display" style="font-size:44px;font-weight:600">99.99<span style="font-size:20px;color:var(--lb-fg-3)">%</span></div>
+            <div class="t-meta">API uptime SLO<br />Last 12 months</div>
+          </div>
+          <div class="stats-band-cell">
+            <div class="num h-display" style="font-size:44px;font-weight:600">$0</div>
+            <div class="t-meta">OpenAPI access fee<br />For integrated accounts</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== Get Started ===== -->
+    <section class="section" style="border-top:1px solid var(--app-card-stroke);background:var(--app-canvas)">
+      <div class="section-inner">
+        <div style="text-align:center;max-width:640px;margin:0 auto">
+          <span class="eyebrow">Get started</span>
+          <h2 class="h-section" style="margin-top:18px">Start building in minutes</h2>
+          <p class="t-body" style="margin-top:14px">
+            Set up your environment, authenticate, and make your first API call — everything you need to go from zero to live data.
+          </p>
+        </div>
+        <div class="gs-grid">
+          <a v-for="(g, i) in GETSTARTED" :key="g.key" class="gs-card" :href="localePath(g.href)">
+            <div class="gs-card-step">{{ String(i + 1).padStart(2, '0') }}</div>
+            <div class="gs-card-icon-wrap">
+              <svg v-if="g.icon === 'key'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="15" r="4"/><path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3"/></svg>
+              <svg v-else-if="g.icon === 'book'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+              <svg v-else-if="g.icon === 'terminal'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+            </div>
+            <h3 class="h-card" style="margin-top:18px">{{ g.title }}</h3>
+            <p class="t-meta" style="margin-top:8px;line-height:1.55;flex:1">{{ g.desc }}</p>
+            <span class="product-card-cta">
+              {{ g.cta }}
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== Final CTA ===== -->
+    <section class="section">
+      <div class="section-inner final-cta">
+        <h2 class="h-section" style="max-width:680px">Ship your trading product faster than the markets move.</h2>
+        <div style="display:flex;gap:12px;flex-wrap:wrap">
+          <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
+            Start building
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          </a>
+          <a class="btn btn-outline btn-lg" :href="localePath('/pricing')">See pricing</a>
+        </div>
+      </div>
+    </section>
+
+    <AppFooter />
   </div>
 </template>
 
-<style scoped>
-.new-home-page {
-  width: 100%;
-  max-width: 100vw;
-  overflow-x: hidden;
+<style>
+.page-root {
+  min-height: 100vh;
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-1);
+  font-family: var(--lb-font-sans);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/Pricing.vue b/docs/.vitepress/theme/components/Pricing.vue
index e0056220..370fe0f8 100644
--- a/docs/.vitepress/theme/components/Pricing.vue
+++ b/docs/.vitepress/theme/components/Pricing.vue
@@ -1,569 +1,704 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useData } from 'vitepress'
-import { LEVEL_COLORS } from './QuotePermissionData'
+import { ref, computed } from 'vue'
+import AppNav from './AppNav.vue'
+import AppFooter from './AppFooter.vue'
+import { localePath } from '../utils/i18n'
 
-const { lang } = useData()
+const FREE_BASELINE = [
+  { icon: "shield",  color: "var(--lb-up)",
+    title: "Trading & Account APIs", price: "Free",
+    desc: "Fundamentals, analysis, news, assets, orders — every core API is free." },
+  { icon: "chart",   color: "var(--lb-status-neutral)",
+    title: "Basic Market Data", price: "Free",
+    desc: "Nasdaq Basic, HK Level 1, CN Level 1 — bundled with your account." },
+  { icon: "bolt",    color: "var(--lb-brand)",
+    title: "Push & Pull Data", price: "Free",
+    desc: "WebSocket real-time push and REST API pull — unlimited." }
+]
 
-const showDialog = ref(false)
+const BILLING_CYCLES = [
+  { key: "monthly",   label: "Monthly",   mult: 1.00 },
+  { key: "quarterly", label: "Quarterly", mult: 0.92 },
+  { key: "annual",    label: "Annual",    mult: 0.78, badge: "Best" }
+]
 
-function openDialog() {
-  showDialog.value = true
-}
+const PAID_PLANS = [
+  { id: "us-lv1", market: "US Market", name: "US LV1 Real-time",
+    base: 558, currency: "HK$", suffix: "/mo",
+    tagline: "Nasdaq LV1 real-time quotes with best bid/ask, including pre / post-market.",
+    coverage: "US market only",
+    color: "var(--lb-market-us)",
+    feats: ["Nasdaq LV1 real-time quotes", "Pre / post-market (overnight)", "WebSocket real-time push"]
+  },
+  { id: "hk-lv2", market: "HK Market", name: "HK LV2 Advanced",
+    base: 558, currency: "HK$", suffix: "/mo", badge: "Global (incl. HK)",
+    tagline: "HKEX real-time quotes with 10-level order book and broker queue.",
+    coverage: "HK market only (excludes US)",
+    color: "var(--lb-market-hk)",
+    feats: ["10-level bid/ask depth", "Real-time depth push", "Broker queue (HK)"]
+  },
+  { id: "opra", market: "US Options", name: "OPRA US Options",
+    base: 22, currency: "HK$", suffix: "/mo",
+    tagline: "US options real-time quotes with best bid/ask — sold separately, any tier.",
+    coverage: "Adds onto any tier",
+    color: "var(--lb-ai-mention)",
+    feats: ["Option chain lookup", "Real-time option quotes", "Option quote push"]
+  }
+]
 
-function closeDialog() {
-  showDialog.value = false
-}
+const FEATURE_MATRIX_PLANS = [
+  { key: "nasdaq-basic", label: "Nasdaq Basic", tag: "Free",         color: "var(--lb-up)" },
+  { key: "us-lv1",       label: "US LV1",       tag: "Paid",         color: "var(--lb-market-us)" },
+  { key: "opra",         label: "OPRA",         tag: "Paid",         color: "var(--lb-ai-mention)" },
+  { key: "hk-lv1",       label: "HK LV1",       tag: "Free (promo)", color: "var(--lb-up)" },
+  { key: "hk-lv2",       label: "HK LV2",       tag: "Paid",         color: "var(--lb-market-hk)" },
+  { key: "cn-lv1",       label: "CN LV1",       tag: "Free (promo)", color: "var(--lb-up)" }
+]
 
-type BillingPeriod = 'continuous' | 'monthly' | 'quarterly' | 'yearly'
-const billing = ref<BillingPeriod>('continuous')
+const FEATURE_MATRIX = [
+  { f: "Basic APIs",                      g: "Core",    row: [1,1,1,1,1,1] },
+  { f: "WebSocket real-time push",        g: "Core",    row: [1,1,1,1,1,1] },
+  { f: "Pull quote (REST)",               g: "Core",    row: [1,1,1,1,1,1] },
+  { f: "US best bid/ask",                 g: "US",      row: [1,1,0,0,0,0] },
+  { f: "Pre / post-market (overnight)",   g: "US",      row: [0,1,0,0,0,0] },
+  { f: "Option chain & real-time quotes", g: "Options", row: [0,0,1,0,0,0] },
+  { f: "HK real-time (basic)",            g: "HK",      row: [0,0,0,1,1,0] },
+  { f: "Hang Seng Index",                 g: "HK",      row: [0,0,0,1,1,0] },
+  { f: "HK 10-level order book",          g: "HK",      row: [0,0,0,0,1,0] },
+  { f: "Real-time depth push",            g: "HK",      row: [0,0,0,0,1,0] },
+  { f: "Broker queue (HK)",               g: "HK",      row: [0,0,0,0,1,0] },
+  { f: "CN A-shares real-time",           g: "CN",      row: [0,0,0,0,0,1] }
+]
 
-const PRICES = {
-  us_lv1: { continuous: 558, monthly: 718, quarterly: 1748, yearly: 5788 },
-  opra: { continuous: 22, monthly: 40, quarterly: 83, yearly: 269 },
-  hk_lv2_global: { continuous: 558, monthly: 718, quarterly: 1428, yearly: 5288 },
-  hk_lv2_mainland: { continuous: 269, monthly: 313, quarterly: 618, yearly: 1999 },
-} as const
+const FAQ = [
+  ["Are OpenAPI quote subscriptions separate from the App?",
+   "Yes. OpenAPI quote permissions are independent from App / PC / Web. Activate via Longbridge App → Me → Quote Store."],
+  ["Do I need a subscription to test the API?",
+   "No. Trading, account, and fundamentals APIs are free. You can also use Basic Market Data tiers (Nasdaq Basic, HK LV1, CN LV1) for free."],
+  ["Can I cancel anytime?",
+   "Yes. Cancel any time before the next billing cycle. Quote permissions stay active until the end of the paid period."],
+  ["What about paper trading?",
+   "Paper trading runs against the canary environment with simulated matching on live bid-ask spreads. Free for all integrated accounts — no quote subscription required."],
+  ["Are there usage limits on REST or WebSocket?",
+   "No hard usage caps. Rate limits scale with your account tier. See the Rate Limits doc for details."],
+  ["What payment methods are accepted?",
+   "All payments are processed through your Longbridge account. Settled in HKD; cross-currency settled at exchange-rate."]
+]
 
-function priceOf(key: keyof typeof PRICES): number {
-  return PRICES[key][billing.value]
-}
+const cycle = ref("annual")
+const currentCycle = computed(() => BILLING_CYCLES.find(c => c.key === cycle.value)!)
 
-function perMonthOf(key: keyof typeof PRICES): string | null {
-  const unit = lang.value.startsWith('zh') ? '/月' : '/mo'
-  if (billing.value === 'quarterly') return `≈ HK$${Math.round(PRICES[key].quarterly / 3)}${unit}`
-  if (billing.value === 'yearly') return `≈ HK$${Math.round(PRICES[key].yearly / 12)}${unit}`
-  return null
+function cyclePrice(base: number) {
+  return Math.round(base * currentCycle.value.mult)
 }
-
-function savingsOf(key: keyof typeof PRICES): string | null {
-  const monthly = PRICES[key].monthly
-  if (billing.value === 'monthly') return null
-  if (billing.value === 'continuous') {
-    const pct = Math.round((1 - PRICES[key].continuous / monthly) * 100)
-    return pct > 0 ? `-${pct}%` : null
-  }
-  if (billing.value === 'quarterly') {
-    const pct = Math.round((1 - PRICES[key].quarterly / (monthly * 3)) * 100)
-    return pct > 0 ? `-${pct}%` : null
-  }
-  if (billing.value === 'yearly') {
-    const pct = Math.round((1 - PRICES[key].yearly / (monthly * 12)) * 100)
-    return pct > 0 ? `-${pct}%` : null
-  }
-  return null
+function cycleDiscount(base: number) {
+  const off = Math.round((1 - currentCycle.value.mult) * 100)
+  return off > 0 ? off : 0
 }
 
-const billingUnit = computed(() => {
-  const zh = lang.value.startsWith('zh')
-  if (billing.value === 'quarterly') return zh ? '/季度' : '/quarter'
-  if (billing.value === 'yearly') return zh ? '/年' : '/year'
-  return zh ? '/月' : '/mo'
-})
-
-const t = computed(() => {
-  const zh = lang.value.startsWith('zh')
-  return {
-    heroTitle: zh ? '开发者平台定价' : 'Developer Platform Pricing',
-    heroSubtitle: zh
-      ? '核心 API 功能完全免费，只有实时行情数据需要按需订阅'
-      : 'Core API features are completely free — subscribe to real-time market data only when you need it',
-
-    freeSectionTitle: zh ? '免费' : 'FREE',
-    freeItems: zh
-      ? [
-          { name: '交易 & 账户 API', note: '个股基本面、分析、资讯、资产、订单等基础 API 功能免费' },
-          { name: '基础行情', note: 'Nasdaq Basic（含盘前、盘中、盘后）、港股 LV1、沪深 LV1' },
-          { name: '数据推送 & 拉取', note: 'WebSocket 实时推送、REST API 主动拉取，无限制' },
-        ]
-      : [
-          { name: 'Trading & Account APIs', note: 'Fundamentals, analysis, news, assets, orders — core APIs free' },
-          { name: 'Basic Market Data', note: 'Nasdaq Basic (pre-market, regular & after-hours), HK LV1, CN LV1' },
-          { name: 'Push & Pull Data', note: 'WebSocket real-time push and REST API pull — unlimited' },
-        ],
-
-    billingPeriods: [
-      { id: 'continuous' as BillingPeriod, label: zh ? '连续包月' : 'Auto-renew' },
-      { id: 'monthly' as BillingPeriod, label: zh ? '月付' : 'Monthly' },
-      { id: 'quarterly' as BillingPeriod, label: zh ? '季付' : 'Quarterly' },
-      { id: 'yearly' as BillingPeriod, label: zh ? '年付' : 'Annual', badge: zh ? '最省' : 'Best', badgeGreen: true },
-    ],
-
-    usLv1Title: zh ? '美股 LV1 实时行情' : 'US LV1 Real-time',
-    usLv1Market: zh ? '美股市场' : 'US Market',
-    usLv1Desc: zh
-      ? '纳斯达克实时成交行情及最优买卖一档报价（含盘前盘后夜盘），专属美股市场'
-      : 'Nasdaq LV1 real-time quotes with best bid/ask incl. pre/post-market — US market only',
-    usLv1Features: zh
-      ? ['Nasdaq LV1 实时报价', '盘前盘后（夜盘）行情', 'WebSocket 实时推送']
-      : ['Nasdaq LV1 real-time quotes', 'Pre/post-market (overnight)', 'WebSocket real-time push'],
-
-    hkLv2Title: zh ? '港股 LV2 高级行情' : 'HK LV2 Advanced',
-    hkLv2Market: zh ? '港股市场' : 'HK Market',
-    hkLv2Desc: zh
-      ? '港交所股票实时成交行情及十档买卖盘报价，专属港股市场（不含美股）'
-      : 'HKEX real-time quotes with 10-level order book — HK market only (excludes US)',
-    hkLv2Features: zh
-      ? ['十档买卖盘口深度', '深度行情实时推送', '券商持仓队列（港股）']
-      : ['10-level bid/ask depth', 'Real-time depth push', 'Broker queue (HK)'],
-    hkLv2GlobalLabel: zh ? '全球版（含香港）' : 'Global (incl. HK)',
-    hkLv2MainlandLabel: zh ? '中国大陆用户优惠价' : 'Mainland China price',
-    hkLv2MainlandNote: zh
-      ? '港交所对中国大陆用户的特批优惠，以实际购买页面为准'
-      : 'Special HKEx rate for mainland China users — subject to verification',
-
-    opraTitle: zh ? 'OPRA 美股期权行情' : 'OPRA US Options',
-    opraMarket: zh ? '美股期权' : 'US Options',
-    opraBadge: zh ? '加购项' : 'Add-on',
-    opraDesc: zh
-      ? '美股期权实时成交行情及最优买卖报价，独立于基础行情，可单独加购'
-      : 'US options real-time quotes with best bid/ask — sold separately, any tier',
-    opraFeatures: zh
-      ? ['期权链查询', '期权实时报价', '期权行情推送']
-      : ['Option chain lookup', 'Real-time option quotes', 'Option quote push'],
-
-    cta: zh ? '前往购买' : 'Purchase',
-    noteText: zh
-      ? 'OpenAPI 行情权限独立于 App / PC / Web，需单独购买。在 Longbridge App「我的」→「行情商店」购买后自动激活。'
-      : 'OpenAPI quote permissions are independent from App / PC / Web and must be purchased separately. Activate via Longbridge App "Me" → "Quote Store".',
-    qrTitle: zh ? '购买行情权限' : 'Purchase Quote Packages',
-    qrDesc: zh
-      ? '在 Longbridge App「我的」中使用扫码功能，或前往「我的」→「行情商店」。'
-      : 'In the Longbridge App, use the QR scanner in the "Me" tab, or go to "Me" → "Quote Store".',
-
-    compareTitle: zh ? '权益对比' : 'Feature Comparison',
-    // column order: nasdaq_basic | us_lv1 | opra | hk_lv1 | hk_lv2 | cn_lv1
-    compareColumns: [
-      { id: 'nasdaq_basic', label: 'Nasdaq Basic', badge: zh ? '免费' : 'Free', color: LEVEL_COLORS.basic },
-      { id: 'us_lv1', label: zh ? '美股 LV1' : 'US LV1', badge: zh ? '付费' : 'Paid', color: LEVEL_COLORS.lv1 },
-      { id: 'opra', label: 'OPRA', badge: zh ? '付费' : 'Paid', color: null },
-      {
-        id: 'hk_lv1',
-        label: zh ? '港股 LV1' : 'HK LV1',
-        badge: zh ? '推广免费' : 'Free (promo)',
-        color: LEVEL_COLORS.basic,
-      },
-      { id: 'hk_lv2', label: zh ? '港股 LV2' : 'HK LV2', badge: zh ? '付费' : 'Paid', color: LEVEL_COLORS.lv2 },
-      {
-        id: 'cn_lv1',
-        label: zh ? '沪深 LV1' : 'CN LV1',
-        badge: zh ? '推广免费' : 'Free (promo)',
-        color: LEVEL_COLORS.basic,
-      },
-    ] as Array<{ id: string; label: string; badge: string; color: typeof LEVEL_COLORS.basic | null }>,
-    compareRows: (zh
-      ? [
-          { feature: '基础 API', values: [true, true, true, true, true, true] },
-          { feature: 'WebSocket 实时行情推送', values: [true, true, true, true, true, true] },
-          { feature: 'Pull 主动拉取行情', values: [true, true, true, true, true, true] },
-          { feature: '美股实时行情（买卖一档）', values: [true, true, false, false, false, false] },
-          { feature: '盘前、盘中、盘后行情', values: [true, true, false, false, false, false] },
-          { feature: '夜盘行情', values: [false, true, false, false, false, false] },
-          { feature: '期权链 & 实时报价', values: [false, false, true, false, false, false] },
-          { feature: '港股实时行情（基础）', values: [false, false, false, true, true, false] },
-          { feature: '恒生指数行情', values: [false, false, false, true, true, false] },
-          { feature: '十档买卖盘口深度', values: [false, false, false, false, true, false] },
-          { feature: '深度实时行情', values: [false, false, false, false, true, false] },
-          { feature: '券商持仓队列（港股）', values: [false, false, false, false, true, false] },
-          { feature: '沪深 A 股实时行情', values: [false, false, false, false, false, true] },
-        ]
-      : [
-          { feature: 'Basic APIs', values: [true, true, true, true, true, true] },
-          { feature: 'WebSocket Real-time Quote Push', values: [true, true, true, true, true, true] },
-          { feature: 'Pull Quote (REST API)', values: [true, true, true, true, true, true] },
-          { feature: 'US Quotes (Best Bid/Ask)', values: [true, true, false, false, false, false] },
-          { feature: 'Pre-market, regular & after-hours', values: [true, true, false, false, false, false] },
-          { feature: 'Overnight (night session)', values: [false, true, false, false, false, false] },
-          { feature: 'Options Chain & Real-time Quotes', values: [false, false, true, false, false, false] },
-          { feature: 'HK Real-time (basic)', values: [false, false, false, true, true, false] },
-          { feature: 'Hang Seng Index', values: [false, false, false, true, true, false] },
-          { feature: 'HK 10-level Order Book', values: [false, false, false, false, true, false] },
-          { feature: 'Real-time Depth Push', values: [false, false, false, false, true, false] },
-          { feature: 'Broker Queue (HK)', values: [false, false, false, false, true, false] },
-          { feature: 'CN A-shares Real-time', values: [false, false, false, false, false, true] },
-        ]) as Array<{ feature: string; values: boolean[] }>,
+// Group rows — build a flat list with group separators
+interface MatrixRow {
+  type: 'group' | 'row'
+  label?: string
+  f?: string
+  row?: number[]
+}
+const matrixRows = computed<MatrixRow[]>(() => {
+  const result: MatrixRow[] = []
+  let lastGroup = ''
+  for (const m of FEATURE_MATRIX) {
+    if (m.g !== lastGroup) {
+      result.push({ type: 'group', label: m.g })
+      lastGroup = m.g
+    }
+    result.push({ type: 'row', f: m.f, row: m.row })
   }
+  return result
 })
 </script>
 
 <template>
-  <div class="max-w-300 mx-auto px-4 sm:px-8 pt-8 pb-16">
-    <!-- Hero -->
-    <div class="text-center mb-12 pt-6">
-      <h1 class="text-[1.8rem]! sm:text-[2.8rem]! font-bold! leading-tight! mb-4! border-none! p-0! mt-0!">
-        {{ t.heroTitle }}
-      </h1>
-      <p class="text-[1.05rem] text-[var(--vp-c-text-2)] m-0 mx-auto leading-relaxed">
-        {{ t.heroSubtitle }}
-      </p>
-    </div>
+  <div class="page-root pricing-page-root">
+    <AppNav />
 
-    <!-- Free included -->
-    <div class="grid grid-cols-1 md:grid-cols-3 bg-[var(--vp-c-default-soft)] rounded-[14px] overflow-hidden mb-8">
-      <div
-        v-for="(item, i) in t.freeItems"
-        :key="item.name"
-        class="p-[18px_20px]"
-        :class="{ 'border-t-2 md:border-t-0 md:border-l-2 border-dashed border-[var(--vp-c-divider)]': i > 0 }">
-        <div class="flex items-center gap-1.5 mb-1.5">
-          <svg class="w-4 h-4 shrink-0" viewBox="0 0 20 20" fill="none">
-            <circle cx="10" cy="10" r="10" fill="#22c538" fill-opacity="0.18" />
-            <path
-              d="M6 10.5l2.5 2.5 5.5-5.5"
-              stroke="#198f28"
-              stroke-width="1.8"
-              stroke-linecap="round"
-              stroke-linejoin="round" />
-          </svg>
-          <span class="text-[0.875rem] font-semibold text-[var(--vp-c-text-1)]">{{ item.name }}</span>
-          <span
-            class="text-[0.65rem] ml-2 tracking-[0.03em text-[#198f28] leading-4 px-2 py-0 rounded-[3px] bg-[#22c53844] shrink-0"
-            >Free</span
-          >
+    <!-- Hero -->
+    <section class="pricing-hero">
+      <div class="pricing-hero-bg" />
+      <div class="section-inner pricing-hero-inner">
+        <div style="text-align:center;max-width:760px;margin:0 auto">
+          <span class="eyebrow">PRICING</span>
+          <h1 class="h-display" style="margin-top:20px;font-size:clamp(40px,5vw,60px)">
+            Build for free.
+            <br />
+            <span style="color:var(--lb-brand)">Pay only for real-time market data.</span>
+          </h1>
+          <p class="t-body" style="margin-top:20px;max-width:580px;margin-left:auto;margin-right:auto">
+            Core API features — trading, accounts, fundamentals, news — are completely free.
+            Subscribe to real-time market data only when you need it.
+          </p>
         </div>
-        <div class="text-[0.75rem] text-[var(--vp-c-text-3)] leading-[1.55] pl-[22px]">{{ item.note }}</div>
-      </div>
-    </div>
-
-    <!-- Billing period selector -->
-    <div class="flex justify-center items-center gap-3 mb-6">
-      <div class="flex gap-0.5 p-1 rounded-lg bg-[var(--vp-c-default-soft)]">
-        <button
-          v-for="p in t.billingPeriods"
-          :key="p.id"
-          class="relative px-2.5 sm:px-3.5 py-1.5 text-xs sm:text-sm sm:min-w-28 rounded-md font-medium transition-all duration-150 cursor-pointer whitespace-nowrap"
-          :class="
-            billing === p.id
-              ? 'bg-[var(--vp-c-bg)] shadow-sm text-[var(--vp-c-text-1)]'
-              : 'text-[var(--vp-c-text-3)] hover:text-[var(--vp-c-text-2)]'
-          "
-          @click="billing = p.id">
-          {{ p.label
-          }}<span
-            v-if="p.badge"
-            class="ml-1 text-[0.6rem] font-bold"
-            :style="{ color: p.badgeGreen ? '#22c55e' : '#f97316' }"
-            >{{ p.badge }}</span
-          >
-        </button>
       </div>
-    </div>
+    </section>
 
-    <!-- Product cards -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
-      <!-- US LV1 -->
-      <div
-        class="relative flex flex-col p-6 border border-[var(--vp-c-divider)] rounded-[18px] overflow-hidden isolate transition-[transform,box-shadow] duration-[220ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[3px] hover:shadow-[0_16px_36px_-10px_rgba(10,14,25,0.13),0_3px_12px_-5px_rgba(10,14,25,0.06)]"
-        :style="{
-          '--card-accent': LEVEL_COLORS.lv1.hex,
-          background: `radial-gradient(300px 150px at 100% 0%, color-mix(in srgb, ${LEVEL_COLORS.lv1.hex} 9%, transparent), transparent 70%), var(--vp-c-bg)`,
-        }">
-        <div class="flex items-center justify-between mb-[18px]">
-          <span
-            class="text-[12px] font-semibold px-2 py-1 rounded-full leading-none whitespace-nowrap"
-            :style="{
-              background: `color-mix(in srgb, ${LEVEL_COLORS.lv1.hex} 13%, transparent)`,
-              color: LEVEL_COLORS.lv1.text,
-            }"
-            >{{ t.usLv1Market }}</span
-          >
-          <button
-            class="inline-flex items-center gap-[5px] text-[0.78rem] font-medium bg-transparent border-none cursor-pointer p-0 transition-[gap] duration-[180ms] hover:gap-2"
-            :style="{ color: LEVEL_COLORS.lv1.text }"
-            @click="openDialog">
-            {{ t.cta }}
-            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M5 12H19M13 6l6 6-6 6"
-                stroke="currentColor"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-            </svg>
-          </button>
-        </div>
-        <div class="text-[1.0625rem] font-semibold text-[var(--vp-c-text-1)] mb-3 tracking-[-0.005em]">
-          {{ t.usLv1Title }}
-        </div>
-        <div class="flex items-baseline gap-[5px] flex-wrap mb-1">
-          <span
-            class="text-[1.9rem] font-bold leading-none tracking-[-0.02em]"
-            style="font-feature-settings: 'tnum'"
-            :style="{ color: LEVEL_COLORS.lv1.hex }"
-            >HK${{ priceOf('us_lv1') }}</span
-          >
-          <span class="text-[0.82rem] text-[var(--vp-c-text-3)]">{{ billingUnit }}</span>
-          <span v-if="savingsOf('us_lv1')" class="text-[0.7rem] font-bold text-orange-500">{{
-            savingsOf('us_lv1')
-          }}</span>
-        </div>
-        <div v-if="perMonthOf('us_lv1')" class="text-[0.73rem] text-[var(--vp-c-text-3)] mb-1">
-          {{ perMonthOf('us_lv1') }}
+    <!-- Free Baseline -->
+    <section class="section" style="padding-top:32px">
+      <div class="section-inner">
+        <div class="pricing-free-grid">
+          <div v-for="b in FREE_BASELINE" :key="b.title" class="pricing-free-card">
+            <div class="pricing-free-head">
+              <div class="pricing-free-icon" :style="{ background: `color-mix(in srgb, ${b.color} 14%, transparent)`, color: b.color }">
+                <!-- shield -->
+                <svg v-if="b.icon === 'shield'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                </svg>
+                <!-- chart -->
+                <svg v-else-if="b.icon === 'chart'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
+                </svg>
+                <!-- bolt -->
+                <svg v-else-if="b.icon === 'bolt'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/>
+                </svg>
+              </div>
+              <span class="pricing-free-price">{{ b.price }}</span>
+            </div>
+            <h3 class="h-card" style="margin-top:16px">{{ b.title }}</h3>
+            <p class="t-meta" style="margin-top:8px;line-height:1.55">{{ b.desc }}</p>
+          </div>
         </div>
-        <div class="border-t border-dashed border-[var(--vp-c-divider)] my-[14px]"></div>
-        <p class="text-[0.82rem] text-[var(--vp-c-text-2)] leading-[1.6] m-0 mb-[14px]">{{ t.usLv1Desc }}</p>
-        <ul class="m-0 p-0 list-none flex flex-col gap-[7px]">
-          <li
-            v-for="f in t.usLv1Features"
-            :key="f"
-            class="flex items-center gap-[7px] text-[0.82rem] text-[var(--vp-c-text-2)]">
-            <svg class="w-[14px] h-[14px] shrink-0" viewBox="0 0 20 20" fill="none">
-              <circle cx="10" cy="10" r="10" fill="#22c538" fill-opacity="0.15" />
-              <path
-                d="M6 10.5l2.5 2.5 5.5-5.5"
-                stroke="#198f28"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-            </svg>
-            {{ f }}
-          </li>
-        </ul>
       </div>
+    </section>
 
-      <!-- HK LV2 -->
-      <div
-        class="relative flex flex-col p-6 border border-[var(--vp-c-divider)] rounded-[18px] overflow-hidden isolate transition-[transform,box-shadow] duration-[220ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[3px] hover:shadow-[0_16px_36px_-10px_rgba(10,14,25,0.13),0_3px_12px_-5px_rgba(10,14,25,0.06)]"
-        :style="{
-          '--card-accent': LEVEL_COLORS.lv2.hex,
-          background: `radial-gradient(300px 150px at 100% 0%, color-mix(in srgb, ${LEVEL_COLORS.lv2.hex} 9%, transparent), transparent 70%), var(--vp-c-bg)`,
-        }">
-        <div class="flex items-center justify-between mb-[18px]">
-          <span
-            class="text-[12px] font-semibold px-2 py-1 rounded-full leading-none whitespace-nowrap"
-            :style="{
-              background: `color-mix(in srgb, ${LEVEL_COLORS.lv2.hex} 13%, transparent)`,
-              color: LEVEL_COLORS.lv2.text,
-            }"
-            >{{ t.hkLv2Market }}</span
-          >
-          <button
-            class="inline-flex items-center gap-[5px] text-[0.78rem] font-medium bg-transparent border-none cursor-pointer p-0 transition-[gap] duration-[180ms] hover:gap-2"
-            :style="{ color: LEVEL_COLORS.lv2.text }"
-            @click="openDialog">
-            {{ t.cta }}
-            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M5 12H19M13 6l6 6-6 6"
-                stroke="currentColor"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-            </svg>
-          </button>
-        </div>
-        <div class="text-[1.0625rem] font-semibold text-[var(--vp-c-text-1)] mb-3 tracking-[-0.005em]">
-          {{ t.hkLv2Title }}
-        </div>
-        <!-- Global price -->
-        <div class="text-[0.68rem] text-[var(--vp-c-text-3)] mb-0.5">{{ t.hkLv2GlobalLabel }}</div>
-        <div class="flex items-baseline gap-[5px] flex-wrap mb-1">
-          <span
-            class="text-[1.9rem] font-bold leading-none tracking-[-0.02em]"
-            style="font-feature-settings: 'tnum'"
-            :style="{ color: LEVEL_COLORS.lv2.hex }"
-            >HK${{ priceOf('hk_lv2_global') }}</span
-          >
-          <span class="text-[0.82rem] text-[var(--vp-c-text-3)]">{{ billingUnit }}</span>
-          <span v-if="savingsOf('hk_lv2_global')" class="text-[0.7rem] font-bold text-orange-500">{{
-            savingsOf('hk_lv2_global')
-          }}</span>
-        </div>
-        <div v-if="perMonthOf('hk_lv2_global')" class="text-[0.73rem] text-[var(--vp-c-text-3)] mb-1">
-          {{ perMonthOf('hk_lv2_global') }}
+    <!-- Paid Plans -->
+    <section class="section" style="padding-top:32px">
+      <div class="section-inner">
+        <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:32px">
+          <div style="max-width:520px">
+            <span class="eyebrow">REAL-TIME MARKET DATA</span>
+            <h2 class="h-section" style="margin-top:14px">Subscribe only to what you need.</h2>
+            <p class="t-meta" style="margin-top:10px;line-height:1.55">
+              OpenAPI quote permissions are independent from App / PC / Web and must be purchased separately.
+              Activate via Longbridge App → Me → Quote Store.
+            </p>
+          </div>
+
+          <div class="pricing-cycle">
+            <span class="pricing-cycle-label">Billing</span>
+            <div class="pricing-cycle-tabs">
+              <button v-for="c in BILLING_CYCLES" :key="c.key"
+                :class="['pricing-cycle-tab', c.key === cycle ? 'is-active' : '']"
+                @click="cycle = c.key">
+                {{ c.label }}
+                <span v-if="c.badge" class="pricing-cycle-badge">{{ c.badge }}</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <!-- Mainland price, zh only -->
-        <div v-if="lang.startsWith('zh')" class="mt-[10px] px-3 py-[10px] rounded-[10px] bg-[var(--vp-c-default-soft)]">
-          <div class="flex items-baseline gap-1">
-            <span class="text-[1rem] font-bold leading-none text-[var(--vp-c-text-2)]"
-              >HK${{ priceOf('hk_lv2_mainland') }}</span
-            >
-            <span class="text-[0.72rem] text-[var(--vp-c-text-3)]">{{ billingUnit }}</span>
-            <span class="ml-3 text-[0.72rem] text-[var(--vp-c-text-3)]">{{ t.hkLv2MainlandLabel }}</span>
+
+        <div class="pricing-plans-grid">
+          <div v-for="p in PAID_PLANS" :key="p.id" class="pricing-plan-card">
+            <div class="pricing-plan-head">
+              <span class="pricing-plan-market" :style="{ color: p.color, background: `color-mix(in srgb, ${p.color} 12%, transparent)` }">
+                {{ p.market }}
+              </span>
+              <span v-if="p.badge" class="pricing-plan-badge">{{ p.badge }}</span>
+            </div>
+            <h3 class="pricing-plan-name">{{ p.name }}</h3>
+            <div class="pricing-plan-price">
+              <span class="pricing-plan-cur">{{ p.currency }}</span>
+              <span class="pricing-plan-num">{{ cyclePrice(p.base) }}</span>
+              <span class="pricing-plan-suf">{{ p.suffix }}</span>
+              <span v-if="cycleDiscount(p.base) > 0" class="pricing-plan-discount">-{{ cycleDiscount(p.base) }}%</span>
+            </div>
+            <div v-if="cycleDiscount(p.base) > 0" class="pricing-plan-was">
+              Was <s>{{ p.currency }}{{ p.base }}{{ p.suffix }}</s> · billed {{ currentCycle.label.toLowerCase() }}
+            </div>
+            <p class="pricing-plan-tag">{{ p.tagline }}</p>
+            <div class="pricing-plan-cov">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="color:var(--lb-fg-3);flex-shrink:0">
+                <circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/>
+              </svg>
+              {{ p.coverage }}
+            </div>
+            <ul class="pricing-plan-feats">
+              <li v-for="f in p.feats" :key="f">
+                <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
+                  <circle cx="10" cy="10" r="10" :fill="p.color" fill-opacity="0.15"/>
+                  <path d="M6 10.5l2.5 2.5 5.5-5.5" :stroke="p.color" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span>{{ f }}</span>
+              </li>
+            </ul>
+            <a class="btn btn-primary pricing-plan-cta" href="https://longbridge.com/download" target="_blank" rel="noreferrer">
+              Subscribe
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
+              </svg>
+            </a>
           </div>
-          <div class="text-[0.63rem] text-[var(--vp-c-text-3)] mt-1 leading-snug">{{ t.hkLv2MainlandNote }}</div>
         </div>
-        <div class="border-t border-dashed border-[var(--vp-c-divider)] my-[14px]"></div>
-        <p class="text-[0.82rem] text-[var(--vp-c-text-2)] leading-[1.6] m-0 mb-[14px]">{{ t.hkLv2Desc }}</p>
-        <ul class="m-0 p-0 list-none flex flex-col gap-[7px]">
-          <li
-            v-for="f in t.hkLv2Features"
-            :key="f"
-            class="flex items-center gap-[7px] text-[0.82rem] text-[var(--vp-c-text-2)]">
-            <svg class="w-[14px] h-[14px] shrink-0" viewBox="0 0 20 20" fill="none">
-              <circle cx="10" cy="10" r="10" fill="#22c538" fill-opacity="0.15" />
-              <path
-                d="M6 10.5l2.5 2.5 5.5-5.5"
-                stroke="#198f28"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-            </svg>
-            {{ f }}
-          </li>
-        </ul>
       </div>
+    </section>
 
-      <!-- OPRA -->
-      <div
-        class="relative flex flex-col p-6 border border-[var(--vp-c-divider)] rounded-[18px] overflow-hidden isolate transition-[transform,box-shadow] duration-[220ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-[3px] hover:shadow-[0_16px_36px_-10px_rgba(10,14,25,0.13),0_3px_12px_-5px_rgba(10,14,25,0.06)]"
-        :style="{
-          '--card-accent': LEVEL_COLORS.opra.hex,
-          background: `radial-gradient(300px 150px at 100% 0%, color-mix(in srgb, ${LEVEL_COLORS.opra.hex} 9%, transparent), transparent 70%), var(--vp-c-bg)`,
-        }">
-        <div class="flex items-center justify-between mb-[18px]">
-          <span
-            class="text-[12px] font-semibold px-2 py-1 rounded-full leading-none whitespace-nowrap"
-            :style="{
-              background: `color-mix(in srgb, ${LEVEL_COLORS.opra.hex} 13%, transparent)`,
-              color: LEVEL_COLORS.opra.text,
-            }"
-            >{{ t.opraMarket }}</span
-          >
-          <button
-            class="inline-flex items-center gap-[5px] text-[0.78rem] font-medium bg-transparent border-none cursor-pointer p-0 transition-[gap] duration-[180ms] hover:gap-2"
-            :style="{ color: LEVEL_COLORS.opra.text }"
-            @click="openDialog">
-            {{ t.cta }}
-            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M5 12H19M13 6l6 6-6 6"
-                stroke="currentColor"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-            </svg>
-          </button>
+    <!-- Feature Matrix -->
+    <section class="section" style="padding-top:48px;padding-bottom:80px">
+      <div class="section-inner">
+        <div style="max-width:540px;margin-bottom:24px">
+          <span class="eyebrow">FEATURE COMPARISON</span>
+          <h2 class="h-section" style="margin-top:14px">What's included in each plan.</h2>
         </div>
-        <div class="text-[1.0625rem] font-semibold text-[var(--vp-c-text-1)] mb-3 tracking-[-0.005em]">
-          {{ t.opraTitle }}
+        <div class="pricing-matrix-wrap">
+          <table class="pricing-matrix">
+            <thead>
+              <tr>
+                <th class="pricing-matrix-feat-h"></th>
+                <th v-for="p in FEATURE_MATRIX_PLANS" :key="p.key">
+                  <div class="pricing-matrix-col">
+                    <span class="pricing-matrix-plan" :style="{ color: p.color }">{{ p.label }}</span>
+                    <span class="pricing-matrix-tag">{{ p.tag }}</span>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <template v-for="r in matrixRows" :key="r.label || r.f">
+                <tr v-if="r.type === 'group'" class="pricing-matrix-group">
+                  <td :colspan="FEATURE_MATRIX_PLANS.length + 1">{{ r.label }}</td>
+                </tr>
+                <tr v-else>
+                  <td class="pricing-matrix-feat">{{ r.f }}</td>
+                  <td v-for="(v, j) in r.row" :key="j" class="pricing-matrix-cell">
+                    <svg v-if="v" width="16" height="16" viewBox="0 0 20 20" fill="none">
+                      <circle cx="10" cy="10" r="10" fill="var(--lb-up)" fill-opacity="0.15"/>
+                      <path d="M6 10.5l2.5 2.5 5.5-5.5" stroke="var(--lb-up)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    <span v-else style="color:var(--lb-fg-3)">—</span>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
         </div>
-        <div class="flex items-baseline gap-[5px] flex-wrap mb-1">
-          <span
-            class="text-[1.9rem] font-bold leading-none tracking-[-0.02em]"
-            style="font-feature-settings: 'tnum'"
-            :style="{ color: LEVEL_COLORS.opra.hex }"
-            >HK${{ priceOf('opra') }}</span
-          >
-          <span class="text-[0.82rem] text-[var(--vp-c-text-3)]">{{ billingUnit }}</span>
-          <span v-if="savingsOf('opra')" class="text-[0.7rem] font-bold text-orange-500">{{ savingsOf('opra') }}</span>
+      </div>
+    </section>
+
+    <!-- FAQ -->
+    <section class="section" style="border-top:1px solid var(--app-card-stroke);background:var(--app-canvas)">
+      <div class="section-inner">
+        <div style="max-width:560px;margin-bottom:32px">
+          <span class="eyebrow">FAQ</span>
+          <h2 class="h-section" style="margin-top:14px">Frequently asked questions</h2>
         </div>
-        <div v-if="perMonthOf('opra')" class="text-[0.73rem] text-[var(--vp-c-text-3)] mb-1">
-          {{ perMonthOf('opra') }}
+        <div class="pricing-faq-grid">
+          <div v-for="([q, a]) in FAQ" :key="q" class="pricing-faq-card">
+            <h4 class="pricing-faq-q">{{ q }}</h4>
+            <p class="pricing-faq-a">{{ a }}</p>
+          </div>
         </div>
-        <div class="border-t border-dashed border-[var(--vp-c-divider)] my-[14px]"></div>
-        <p class="text-[0.82rem] text-[var(--vp-c-text-2)] leading-[1.6] m-0 mb-[14px]">{{ t.opraDesc }}</p>
-        <ul class="m-0 p-0 list-none flex flex-col gap-[7px]">
-          <li
-            v-for="f in t.opraFeatures"
-            :key="f"
-            class="flex items-center gap-[7px] text-[0.82rem] text-[var(--vp-c-text-2)]">
-            <svg class="w-[14px] h-[14px] shrink-0" viewBox="0 0 20 20" fill="none">
-              <circle cx="10" cy="10" r="10" fill="#22c538" fill-opacity="0.15" />
-              <path
-                d="M6 10.5l2.5 2.5 5.5-5.5"
-                stroke="#198f28"
-                stroke-width="1.8"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-            </svg>
-            {{ f }}
-          </li>
-        </ul>
       </div>
-    </div>
+    </section>
 
-    <!-- Feature comparison table -->
-    <div class="mb-10 overflow-x-auto rounded-xl border border-[var(--vp-c-divider)]">
-      <table class="w-full text-sm border-collapse" style="min-width: 580px">
-        <thead>
-          <tr>
-            <th
-              class="text-left py-2.5 px-3 text-[0.8rem] font-medium text-[var(--vp-c-text-3)] border-b border-[var(--vp-c-divider)] w-[30%]"></th>
-            <th
-              v-for="col in t.compareColumns"
-              :key="col.id"
-              class="py-2.5 pt-10 px-2 text-center border-b border-[var(--vp-c-divider)]">
-              <div class="flex flex-col items-center gap-1">
-                <span
-                  class="text-[0.7rem] font-semibold px-2 py-0.5 rounded-full whitespace-nowrap"
-                  :style="
-                    col.color
-                      ? { background: `color-mix(in srgb, ${col.color.hex} 15%, transparent)`, color: col.color.text }
-                      : { background: 'var(--vp-c-default-soft)', color: 'var(--vp-c-text-2)' }
-                  ">
-                  {{ col.label }}
-                </span>
-                <span class="text-[0.65rem] text-[var(--vp-c-text-3)] whitespace-nowrap">{{ col.badge }}</span>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="row in t.compareRows"
-            :key="row.feature"
-            class="border-b border-[var(--vp-c-divider)] last:border-0 odd:bg-[var(--vp-c-default-soft)]">
-            <td class="py-2.5 px-3 text-[0.82rem] text-[var(--vp-c-text-2)]">{{ row.feature }}</td>
-            <td v-for="(val, i) in row.values" :key="i" class="py-2.5 px-2 text-center">
-              <svg v-if="val" class="w-4 h-4 mx-auto" viewBox="0 0 20 20" fill="none">
-                <circle cx="10" cy="10" r="10" fill="#22c538" fill-opacity="0.15" />
-                <path
-                  d="M6 10.5l2.5 2.5 5.5-5.5"
-                  stroke="#198f28"
-                  stroke-width="1.8"
-                  stroke-linecap="round"
-                  stroke-linejoin="round" />
-              </svg>
-              <span v-else class="text-[var(--vp-c-text-3)] text-base leading-none">—</span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- Note -->
-    <div class="flex items-start gap-2 text-xs text-[var(--vp-c-text-3)] leading-relaxed">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="shrink-0 mt-[1px] w-3.5 h-3.5"
-        viewBox="0 0 20 20"
-        fill="currentColor">
-        <path
-          fill-rule="evenodd"
-          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-          clip-rule="evenodd" />
-      </svg>
-      <span>{{ t.noteText }}</span>
-    </div>
+    <AppFooter />
   </div>
-
-  <!-- Purchase Dialog -->
-  <Teleport to="body">
-    <div v-if="showDialog" class="fixed inset-0 z-[200] flex items-center justify-center" @click.self="closeDialog">
-      <div class="absolute inset-0 bg-black/50" @click="closeDialog"></div>
-      <div
-        class="relative bg-[var(--vp-c-bg)] rounded-2xl shadow-2xl w-full max-w-xs mx-4 p-6 flex flex-col items-center gap-4">
-        <button
-          class="absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-full text-[var(--vp-c-text-3)] hover:bg-[var(--vp-c-default-soft)] transition-colors cursor-pointer"
-          style="background: transparent; border: none"
-          aria-label="Close"
-          @click="closeDialog">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
-            <path
-              fill-rule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd" />
-          </svg>
-        </button>
-        <div class="text-base font-semibold text-[var(--vp-c-text-1)] text-center">{{ t.qrTitle }}</div>
-        <div class="rounded-xl overflow-hidden bg-white p-2 flex items-center justify-center">
-          <img
-            class="w-56 h-56"
-            src="https://assets.lbctrl.com/uploads/01c3494f-7a78-4e69-a50f-c9ce5cd5a859/my-quotes.svg" />
-        </div>
-        <p class="text-sm text-[var(--vp-c-text-2)] text-center leading-relaxed m-0">{{ t.qrDesc }}</p>
-      </div>
-    </div>
-  </Teleport>
 </template>
+
+<style scoped>
+.pricing-page-root {
+  min-height: 100vh;
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-1);
+}
+
+/* ---- Hero ---- */
+.pricing-hero {
+  position: relative;
+  padding: 100px 0 80px;
+  overflow: hidden;
+}
+.pricing-hero-bg {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--lb-brand) 14%, transparent), transparent 70%);
+  pointer-events: none;
+}
+.pricing-hero-inner {
+  position: relative;
+  z-index: 1;
+}
+
+/* ---- Free Baseline ---- */
+.pricing-free-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 900px) {
+  .pricing-free-grid { grid-template-columns: 1fr; }
+}
+.pricing-free-card {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  padding: 24px;
+}
+.pricing-free-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pricing-free-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.pricing-free-price {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--lb-up);
+  background: color-mix(in srgb, var(--lb-up) 12%, transparent);
+  padding: 3px 10px;
+  border-radius: 999px;
+}
+
+/* ---- Billing Cycle ---- */
+.pricing-cycle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.pricing-cycle-label {
+  font-size: 13px;
+  color: var(--lb-fg-3);
+  font-weight: 500;
+}
+.pricing-cycle-tabs {
+  display: flex;
+  gap: 0;
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.pricing-cycle-tab {
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lb-fg-2);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.pricing-cycle-tab:hover { color: var(--lb-fg-1); }
+.pricing-cycle-tab.is-active {
+  background: var(--lb-brand);
+  color: #fff;
+}
+.pricing-cycle-tab.is-active .pricing-cycle-badge {
+  background: rgba(255,255,255,0.25);
+  color: #fff;
+}
+.pricing-cycle-badge {
+  font-size: 10px;
+  font-weight: 700;
+  background: color-mix(in srgb, var(--lb-up) 15%, transparent);
+  color: var(--lb-up);
+  padding: 2px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.04em;
+}
+
+/* ---- Paid Plans ---- */
+.pricing-plans-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 900px) {
+  .pricing-plans-grid { grid-template-columns: 1fr; }
+}
+.pricing-plan-card {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  transition: box-shadow 0.15s, border-color 0.15s;
+}
+.pricing-plan-card:hover {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--lb-fg-1) 8%, transparent);
+}
+.pricing-plan-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.pricing-plan-market {
+  font-size: 11.5px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 999px;
+  letter-spacing: 0.03em;
+}
+.pricing-plan-badge {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: var(--lb-fg-3);
+  background: var(--lb-bg-1);
+  border: 1px solid var(--app-card-stroke);
+  padding: 2px 8px;
+  border-radius: 999px;
+  margin-left: auto;
+}
+.pricing-plan-name {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  margin: 0 0 12px;
+}
+.pricing-plan-price {
+  display: flex;
+  align-items: baseline;
+  gap: 3px;
+  margin-bottom: 4px;
+}
+.pricing-plan-cur {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--lb-fg-2);
+}
+.pricing-plan-num {
+  font-size: 36px;
+  font-weight: 800;
+  color: var(--lb-fg-1);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.pricing-plan-suf {
+  font-size: 14px;
+  color: var(--lb-fg-3);
+}
+.pricing-plan-discount {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--lb-up);
+  background: color-mix(in srgb, var(--lb-up) 12%, transparent);
+  padding: 2px 7px;
+  border-radius: 999px;
+  margin-left: 6px;
+}
+.pricing-plan-was {
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  margin-bottom: 12px;
+}
+.pricing-plan-was s { text-decoration: line-through; }
+.pricing-plan-tag {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.55;
+  margin: 12px 0 10px;
+}
+.pricing-plan-cov {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  margin-bottom: 16px;
+}
+.pricing-plan-feats {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+.pricing-plan-feats li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+}
+.pricing-plan-cta {
+  margin-top: auto;
+  width: 100%;
+  justify-content: center;
+}
+
+/* ---- Feature Matrix ---- */
+.pricing-matrix-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+}
+.pricing-matrix {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+.pricing-matrix thead th {
+  padding: 12px 16px;
+  background: var(--lb-bg-2);
+  border-bottom: 1px solid var(--app-card-stroke);
+  text-align: center;
+  vertical-align: bottom;
+}
+.pricing-matrix-feat-h {
+  text-align: left !important;
+  min-width: 220px;
+}
+.pricing-matrix-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.pricing-matrix-plan {
+  font-size: 13px;
+  font-weight: 700;
+}
+.pricing-matrix-tag {
+  font-size: 10px;
+  color: var(--lb-fg-3);
+  font-weight: 500;
+}
+.pricing-matrix-group td {
+  padding: 8px 16px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--lb-fg-3);
+  background: var(--lb-bg-2);
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.pricing-matrix-feat {
+  padding: 11px 16px;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  border-bottom: 1px solid var(--app-card-stroke);
+  vertical-align: middle;
+}
+.pricing-matrix tbody tr:last-child td { border-bottom: none; }
+.pricing-matrix-cell {
+  padding: 11px 16px;
+  text-align: center;
+  border-bottom: 1px solid var(--app-card-stroke);
+  vertical-align: middle;
+}
+.pricing-matrix tbody tr:hover .pricing-matrix-feat,
+.pricing-matrix tbody tr:hover .pricing-matrix-cell {
+  background: var(--lb-hover);
+}
+
+/* ---- FAQ ---- */
+.pricing-faq-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+@media (max-width: 768px) {
+  .pricing-faq-grid { grid-template-columns: 1fr; }
+}
+.pricing-faq-card {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  padding: 20px;
+}
+.pricing-faq-q {
+  font-size: 14.5px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  margin: 0 0 8px;
+  line-height: 1.4;
+}
+.pricing-faq-a {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* ---- Shared ---- */
+.section {
+  padding: 80px 0;
+}
+.section-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--lb-brand);
+}
+.h-display {
+  font-size: clamp(32px, 5vw, 52px);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--lb-fg-1);
+}
+.h-section {
+  font-size: clamp(22px, 3vw, 30px);
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--lb-fg-1);
+  margin: 0;
+}
+.h-card {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  margin: 0;
+}
+.t-body {
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--lb-fg-2);
+}
+.t-meta {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+  margin: 0;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 18px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.15s;
+}
+.btn:hover { opacity: 0.85; }
+.btn-primary {
+  background: var(--lb-brand);
+  color: #fff;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/QuotePermission.vue b/docs/.vitepress/theme/components/QuotePermission.vue
index 24a96bcf..f8ac90eb 100644
--- a/docs/.vitepress/theme/components/QuotePermission.vue
+++ b/docs/.vitepress/theme/components/QuotePermission.vue
@@ -242,7 +242,7 @@ const marketLabel = computed(() =>
 .qp-badge {
   display: inline-block;
   font-size: 0.8125rem;
-  font-weight: 700;
+  line-height: 1;
   padding: 0.2rem 0.5rem;
   border-radius: 0.25rem;
   white-space: nowrap;
@@ -296,5 +296,4 @@ const marketLabel = computed(() =>
   font-size: 0.7rem;
   opacity: 0.8;
 }
-
 </style>
diff --git a/docs/.vitepress/theme/components/Skill.vue b/docs/.vitepress/theme/components/Skill.vue
index daa5dee8..ff304d7b 100644
--- a/docs/.vitepress/theme/components/Skill.vue
+++ b/docs/.vitepress/theme/components/Skill.vue
@@ -1,5837 +1,1848 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
-import { useData } from 'vitepress'
-import Footer from './HomePage/Footer.vue'
-import { locale as enLocale } from './skill-catalog/en'
-import { locale as zhCNLocale } from './skill-catalog/zh-CN'
-import { locale as zhHKLocale } from './skill-catalog/zh-HK'
+import { ref, computed } from 'vue'
+import AppNav from './AppNav.vue'
+import AppFooter from './AppFooter.vue'
+import { localePath } from '../utils/i18n'
 
-const { lang } = useData()
-
-// ─── i18n ─────────────────────────────────────────────────────────────────────
+const SKILLS = [
+  {
+    id: 'longbridge',
+    name: 'Longbridge Overview',
+    cat: 'Platform',
+    desc: 'Full-stack financial data and trading platform — CLI, Python/Rust SDK, MCP, and LLM integration.',
+    example: "What is NVDA's current price, recent news, and how does it affect my positions?",
+  },
+  {
+    id: 'longbridge-quote',
+    name: 'Real-time Quote',
+    cat: 'Market',
+    tag: 'Popular',
+    desc: 'Real-time quotes, static reference, and valuation indices for HK/US/A-share/Singapore stocks — price, change, volume, PE/PB, turnover rate.',
+    example: 'Get me AAPL, TSLA, and 9988.HK current price and change.',
+  },
+  {
+    id: 'longbridge-depth',
+    name: 'Order Book Depth',
+    cat: 'Market',
+    desc: 'Level-2 5/10-level bid/ask orderbook, HK broker queue, and tick-by-tick trade data.',
+    example: "What does TSLA's 5-level bid/ask orderbook look like right now?",
+  },
+  {
+    id: 'longbridge-kline',
+    name: 'K-line / Intraday',
+    cat: 'Market',
+    desc: "Candlestick/OHLCV data for 1m/5m/15m/30m/1h/day/week/month/year periods, plus today's intraday minute series.",
+    example: "Pull NVDA's daily chart for the past 6 months and show the trend.",
+  },
+  {
+    id: 'longbridge-capital-flow',
+    name: 'Capital Flow',
+    cat: 'Market',
+    desc: 'Intraday capital-flow time series and large/medium/small order distribution for a single stock. Same-day data only.',
+    example: 'How much net institutional inflow did 700.HK see today?',
+  },
+  {
+    id: 'longbridge-fx',
+    name: 'Exchange Rate',
+    cat: 'Market',
+    desc: 'Real-time FX rates for all Longbridge-supported currencies. Multi-currency portfolio conversion and cross-rate derivation.',
+    example: "What's USD/HKD today? Convert my whole portfolio to USD.",
+  },
+  {
+    id: 'longbridge-fundamental',
+    name: 'Fundamentals',
+    cat: 'Research',
+    desc: 'Company financials — revenue, net income, EPS, ROE, margins, cash flow, dividend history, analyst consensus, and ratings.',
+    example: "Give me NVDA's latest quarterly revenue, gross margin, and EPS.",
+  },
+  {
+    id: 'longbridge-valuation',
+    name: 'Valuation',
+    cat: 'Research',
+    desc: 'Current PE/PB/PS/EV-EBITDA snapshot, 1–3 year historical percentile, industry median, and industry rank.',
+    example: "Where does Apple's current PE sit in its historical percentile?",
+  },
+  {
+    id: 'longbridge-peer-comparison',
+    name: 'Peer Comparison',
+    cat: 'Research',
+    desc: '2–5 symbol comparison matrix — valuation, price, revenue KPIs, and market cap, with cross-currency caveats.',
+    example: 'Compare NVDA, AMD, and INTC on valuation and revenue growth.',
+  },
+  {
+    id: 'longbridge-filings',
+    name: 'SEC Filings',
+    cat: 'Research',
+    desc: 'Full-text regulatory filings (10-K, 10-Q, 8-K) returned as parsed Markdown for LLM ingestion.',
+    example: "Summarize TSLA's last 10-K risk factors.",
+  },
+  {
+    id: 'longbridge-eps-forecast',
+    name: 'EPS Forecast',
+    cat: 'Research',
+    desc: 'Analyst consensus revenue/EPS forecasts, beat-miss history, and target-price distribution.',
+    example: "What's the analyst consensus for AAPL's next quarter EPS?",
+  },
+  {
+    id: 'longbridge-institutional',
+    name: 'Institutional Holders',
+    cat: 'Research',
+    desc: 'Institutional shareholders with position changes and aggregated fund-manager moves.',
+    example: 'Who are the top institutional holders of NVDA and how have they moved?',
+  },
+  {
+    id: 'longbridge-dividend',
+    name: 'Dividend History',
+    cat: 'Research',
+    desc: 'Dividend history and distribution details — ex-date, pay-date, amount, yield trend.',
+    example: "Show me 700.HK's 5-year dividend history.",
+  },
+  {
+    id: 'longbridge-rating',
+    name: 'Analyst Ratings',
+    cat: 'Research',
+    desc: 'Institution ratings, upgrade/downgrade history, and target price distribution.',
+    example: 'What ratings has Goldman issued on TSLA over the last year?',
+  },
+  {
+    id: 'longbridge-funds',
+    name: 'Funds Holding',
+    cat: 'Research',
+    desc: 'Funds and ETFs that hold a given symbol, with position weight and rebalance dates.',
+    example: 'Which ETFs hold AMD with weight >2%?',
+  },
+  {
+    id: 'longbridge-options',
+    name: 'Option Chain',
+    cat: 'Derivatives',
+    desc: 'Full option chain with Greeks, IV surface, open interest by strike, and unusual options activity.',
+    example: "Show me TSLA's weekly options chain with IV and Greeks.",
+  },
+  {
+    id: 'longbridge-news',
+    name: 'News',
+    cat: 'Discovery',
+    desc: 'Real-time news articles for one or more symbols, with provenance, sentiment, and full body.',
+    example: "What's the latest news on NVDA earnings?",
+  },
+  {
+    id: 'longbridge-community',
+    name: 'Community',
+    cat: 'Discovery',
+    desc: 'Community discussion topics, hot threads, and engagement metrics by symbol.',
+    example: 'What are people saying about 9988.HK on the community right now?',
+  },
+  {
+    id: 'longbridge-watchlist',
+    name: 'Watchlist',
+    cat: 'Discovery',
+    desc: 'List, create, update, and delete watchlist groups across the Longbridge account.',
+    example: 'Add NVDA, TSLA, and 700.HK to my Semis watchlist.',
+  },
+  {
+    id: 'longbridge-calendar',
+    name: 'Calendar & Events',
+    cat: 'Discovery',
+    desc: 'Upcoming earnings, macro events, dividend ex-dates, and trading session/holiday schedules.',
+    example: 'Which earnings reports drop next week from my watchlist?',
+  },
+  {
+    id: 'longbridge-sentiment',
+    name: 'Market Sentiment',
+    cat: 'Discovery',
+    desc: 'Market temperature index (0–100), put/call ratio, and breadth indicators by market.',
+    example: "What's HK's market temperature right now and historically?",
+  },
+  {
+    id: 'longbridge-screener',
+    name: 'Stock Screener',
+    cat: 'Discovery',
+    desc: 'Multi-factor stock screener — combine valuation, momentum, fundamentals, and ratings filters.',
+    example: 'Find US tech stocks with PE under 25 and revenue growth above 15%.',
+  },
+  {
+    id: 'longbridge-hot',
+    name: 'Hot Stocks',
+    cat: 'Discovery',
+    desc: 'Top movers by volume, gainers/losers, and unusual-volume detection by market.',
+    example: "What are today's most-traded HK stocks by volume?",
+  },
+  {
+    id: 'longbridge-order',
+    name: 'Submit Order',
+    cat: 'Trade',
+    desc: 'Limit, market, stop-limit, or auction orders. Includes trailing stops and conditional orders.',
+    example: 'Buy 100 shares of TSLA limit $420 day-only.',
+  },
+  {
+    id: 'longbridge-modify',
+    name: 'Modify / Cancel',
+    cat: 'Trade',
+    desc: "List today's orders, modify quantity/price, cancel pending orders.",
+    example: 'Cancel my open limit order on NVDA.',
+  },
+  {
+    id: 'longbridge-estimate',
+    name: 'Estimate Max Qty',
+    cat: 'Trade',
+    desc: 'Estimate max buy/sell quantity for a symbol based on buying power and margin ratio.',
+    example: 'How many TSLA shares can I buy with my buying power?',
+  },
+  {
+    id: 'longbridge-margin',
+    name: 'Margin Ratio',
+    cat: 'Trade',
+    desc: 'Margin ratio requirements per symbol — initial margin, maintenance margin, and short rate.',
+    example: "What's the margin requirement for shorting 700.HK?",
+  },
+  {
+    id: 'longbridge-positions',
+    name: 'Positions',
+    cat: 'Portfolio',
+    desc: 'Stock and fund positions across all sub-accounts with cost basis, P&L, and allocation.',
+    example: 'Show me all my positions sorted by unrealized P&L.',
+  },
+  {
+    id: 'longbridge-balance',
+    name: 'Account Balance',
+    cat: 'Portfolio',
+    desc: 'Account cash balance, financing/buying power, and currency breakdown across sub-accounts.',
+    example: "What's my buying power in USD across sub-accounts?",
+  },
+  {
+    id: 'longbridge-cashflow',
+    name: 'Cash Flow',
+    cat: 'Portfolio',
+    desc: 'Cash flow records — deposits, withdrawals, dividends, fees, and statements (daily / monthly).',
+    example: "Show me all dividends I've received in the last 3 months.",
+  },
+]
 
-const isEN = computed(() => lang.value === 'en-US')
-const isHK = computed(() => lang.value === 'zh-HK')
-const installGuideUrl = computed(() => (isEN.value ? '/skill/install' : `/${lang.value}/skill/install`))
+const SKILL_CATS = [
+  { key: 'All', count: 30 },
+  { key: 'Market', count: 6 },
+  { key: 'Research', count: 9 },
+  { key: 'Derivatives', count: 1 },
+  { key: 'Discovery', count: 7 },
+  { key: 'Trade', count: 4 },
+  { key: 'Portfolio', count: 3 },
+  { key: 'Platform', count: 1 },
+]
 
-function topicUrl(id: string) {
-  const isCN = typeof window !== 'undefined' && window.location.hostname.endsWith('.cn')
-  const origin = isCN ? 'https://longbridge.cn' : 'https://longbridge.com'
-  const langPrefix = isEN.value ? '' : `/${lang.value}`
-  return `${origin}${langPrefix}/topics/${id}`
-}
+const SKILL_AGENTS = [
+  { name: 'Claude', mark: 'C', color: '#D97757' },
+  { name: 'Claude Code', mark: 'C', color: '#D97757' },
+  { name: 'ChatGPT', mark: 'G', color: '#10A37F' },
+  { name: 'Codex', mark: 'O', color: '#000000' },
+  { name: 'Cursor', mark: '➤', color: '#000000' },
+  { name: 'Gemini', mark: 'G', color: '#1A73E8' },
+  { name: 'OpenClaw', mark: 'O', color: 'var(--lb-brand)' },
+  { name: 'Zed', mark: 'Z', color: '#0E40D9' },
+]
 
-const t = {
-  badge: computed(() => (isEN.value ? 'Longbridge Developers · Skill' : 'Longbridge Developers · Skill')),
-  heroTitle1: computed(() => 'Longbridge Skill'),
-  heroTitle2: computed(() =>
-    isEN.value
-      ? 'Unlock market insights, deep research and intelligent trading for your AI'
-      : isHK.value
-        ? '為你的 AI 解鎖市場洞察、深度研究與智能交易'
-        : '为你的 AI 解锁市场洞察、深度研究与智能交易'
-  ),
-  heroSubtitle: computed(() =>
-    isEN.value
-      ? 'With Longbridge Skill, your AI assistant (OpenClaw, Claude Code, Cursor, etc.) can screen stocks across markets, decode earnings, track insider moves, and place orders — all in plain conversation, no app-switching required.'
-      : isHK.value
-        ? '安裝 Longbridge Skill 後，你的 AI 助手（OpenClaw、Claude Code、Cursor 等）就能幫你跨市場選股、解讀財報、追蹤主力持倉、直接下單——全部在對話裡完成，不用再切換 App 或手動查數據。'
-        : '安装 Longbridge Skill 后，你的 AI 助手（OpenClaw、Claude Code、Cursor 等）就能帮你跨市场选股、解读财报、追踪主力持仓、直接下单——全部在对话里完成，不用再切换 App 或手动查数据。'
-  ),
-  downloadZip: computed(() => (isEN.value ? 'Download Skill ZIP' : isHK.value ? '下載 Skill ZIP' : '下载 Skill ZIP')),
-  recommended: computed(() => (isEN.value ? 'Recommended' : isHK.value ? '推薦' : '推荐')),
-  orCli: computed(() => (isEN.value ? 'Or install via CLI' : isHK.value ? '或命令行安裝' : '或命令行安装')),
-  copy: computed(() => (isEN.value ? 'Copy' : isHK.value ? '複製' : '复制')),
-  copied: computed(() => (isEN.value ? 'Copied!' : isHK.value ? '已複製' : '已复制')),
-  ctaHint: computed(() =>
-    isEN.value
-      ? 'Copy and send to any AI — it will walk you through the installation:'
-      : isHK.value
-        ? '複製以下內容發送給任意 AI，它會引導你完成 Skill 安裝：'
-        : '复制以下内容发送给任意 AI，它会引导你完成 Skill 安装：'
-  ),
-  installGuide: computed(() =>
-    isEN.value
-      ? 'View installation guide for each client →'
-      : isHK.value
-        ? '查看各客戶端具體安裝方式 →'
-        : '查看各客户端具体安装方式 →'
-  ),
-  supportedBy: computed(() =>
-    isEN.value ? 'Supported AI tools' : isHK.value ? '支持以下 AI 工具' : '支持以下 AI 工具'
-  ),
-  scenariosTitle: computed(() =>
-    isEN.value
-      ? 'What you can do with natural language'
-      : isHK.value
-        ? '用自然語言，完成以前只有專業系統才能做的事'
-        : '用自然语言，完成以前只有专业系统才能做的事'
-  ),
-  scenariosSubtitle: computed(() =>
-    isEN.value
-      ? "Tell your AI assistant what you want — it calls Longbridge's data and trading APIs for you."
-      : isHK.value
-        ? '直接告訴你的 AI 助手你想做什麼——它來調用 Longbridge 的數據與交易能力。'
-        : '直接告诉你的 AI 助手你想做什么——它来调用 Longbridge 的数据与交易能力。'
-  ),
-  capabilitiesTitle: computed(() => (isEN.value ? 'Capability Reference' : isHK.value ? '功能清單' : '功能清单')),
-  capabilitiesSubtitle: computed(() =>
-    isEN.value
-      ? 'Full coverage of Longbridge CLI commands and MCP tools — available to your AI in plain conversation.'
-      : isHK.value
-        ? '覆蓋所有 Longbridge CLI 命令與 MCP 工具，AI 通過對話幫你調用。'
-        : '覆盖所有 Longbridge CLI 命令与 MCP 工具，AI 通过对话帮你调用。'
-  ),
-  demoTitle: computed(() =>
-    isEN.value ? 'See it in action' : isHK.value ? '了解 Skill 能做什麼' : '了解 Skill 能做什么'
-  ),
-  demoSubtitle: computed(() =>
-    isEN.value
-      ? 'Select a scenario and AI tool to see the live demo'
-      : isHK.value
-        ? '選擇場景，查看你的 AI 助手如何工作'
-        : '选择场景，查看你的 AI 助手如何工作'
-  ),
-  installTitle: computed(() => (isEN.value ? 'Get Started' : isHK.value ? '開始安裝' : '开始安装')),
-  installSubtitle: computed(() =>
-    isEN.value ? 'Choose your AI tool' : isHK.value ? '選擇你使用的 AI 工具' : '选择你使用的 AI 工具'
-  ),
-  manualInstallLabel: computed(() => (isEN.value ? 'Manual Install' : isHK.value ? '手動安裝' : '手动安装')),
-  manualInstallHint: computed(() =>
-    isEN.value
-      ? 'Extract and import into Claude, ChatGPT, Cursor and other AI clients.'
-      : isHK.value
-        ? '解壓後導入 Claude、ChatGPT、Cursor 等 AI 客戶端。'
-        : '解压后导入 Claude、ChatGPT、Cursor 等 AI 客户端。'
-  ),
-  cliInstallHint: computed(() =>
-    isEN.value
-      ? 'Install into your project for Claude Code, Codex and similar tools.'
-      : isHK.value
-        ? '安裝到項目目錄，適用於 Claude Code、Codex 等工具。'
-        : '安装到项目目录，适用于 Claude Code、Codex 等工具。'
-  ),
-  oneLinerLabel: computed(() =>
-    isEN.value ? 'Copy and send to any AI' : isHK.value ? '複製後發送給任意 AI' : '复制后发送给任意 AI'
-  ),
-  oneLinerHint: computed(() =>
-    isEN.value
-      ? 'Paste this message into any AI assistant (Claude, ChatGPT, etc.) and it will guide you through the installation.'
-      : isHK.value
-        ? '將以下這句話發送給任意 AI 助手（Claude、ChatGPT 等），它會自動引導你完成安裝。'
-        : '将以下这句话发送给任意 AI 助手（Claude、ChatGPT 等），它会自动引导你完成安装。'
-  ),
-  alsoAvailablePrefix: computed(() => (isEN.value ? 'Also available on ' : isHK.value ? '同樣可在 ' : '同样可在 ')),
-  alsoAvailableAnd: computed(() => (isEN.value ? ' and ' : isHK.value ? ' 和 ' : ' 和 ')),
-  userCasesTitle: computed(() => (isEN.value ? 'User Cases' : isHK.value ? '用戶案例' : '用户案例')),
-  userCasesSubtitle: computed(() =>
-    isEN.value
-      ? 'Award-winning cases from real Longbridge Skill users around the world'
-      : isHK.value
-        ? '來自全球真實用戶的最燃獲獎案例'
-        : '来自全球真实用户的最燃获奖案例'
-  ),
-}
+const USER_CASES = [
+  {
+    id: 'options',
+    title: 'Scanning Options Opportunities with AI',
+    desc: 'AI-scanned 39 contracts to surface the best options plays — peak annualized return of 423%.',
+    metric: '423%',
+    metricLabel: 'MAX ANNUALIZED',
+    href: 'https://longbridge.com/topics/39722881',
+    accent: 'var(--lb-up)',
+  },
+  {
+    id: 'first',
+    title: 'First Impressions of Longbridge Skill — Pretty Cool',
+    desc: 'Control a trading terminal with natural language, explore quotes and analyze positions — surprisingly cool.',
+    metric: 'Cool',
+    metricLabel: 'FIRST IMPRESSION',
+    href: 'https://longbridge.com/topics/39679744',
+    accent: 'var(--lb-brand)',
+  },
+  {
+    id: 'qqq',
+    title: 'QQQ 0DTE Quant System: From Zero to Live',
+    desc: 'End-to-end walkthrough: strategy design, backtesting, and deploying a QQQ 0DTE options quant system.',
+    metric: '0DTE',
+    metricLabel: 'QUANT LIVE',
+    href: 'https://longbridge.com/topics/39996427',
+    accent: 'var(--lb-ai-mention)',
+  },
+]
 
-// ─── Data ─────────────────────────────────────────────────────────────────────
+const DEMO_AGENTS = ['OpenClaw', 'ChatGPT', 'Claude', 'Claude Code']
 
-interface UserCaseCard {
-  rank: string
-  accent: 'orange' | 'red' | 'yellow'
-  cardVariant: '' | 'minimal'
-  title: string
-  titleEn: string
-  titleHK: string
-  summary: string
-  summaryEn: string
-  summaryHK: string
-  metricValue: string | null
-  metricLabel: string | null
-  metricLabelEn: string | null
-  metricLabelHK: string | null
-  author: string
-  authorId: string
-  topicId: string
-}
+const DEMO_SCENARIOS = [
+  {
+    id: 'screen',
+    nav: 'Cross-Market Screening',
+    title: 'HK · US · A-share · Singapore — multi-market screening in one shot.',
+    desc: 'Tracking opportunities across markets is brittle. Tell the AI your criteria — market cap, PE range, sector — and layer in technical signals like KDJ golden cross or MACD bullish. Cross-market filter, unified results.',
+    prompt:
+      'From US + HK markets, screen for tech stocks with market cap above ¥50B, PE under 25, and recent MACD golden cross — sort by market cap.',
+    summary:
+      'US + HK tech sector screen complete — 8 stocks match market cap ≥ ¥50B and PE < 25. 3 of them have confirmed recent MACD golden cross (DIF crossed up through DEA).',
+    tableHead: ['Symbol', 'Name', 'Mkt Cap', 'PE', 'MACD', 'Signal'],
+    tableRows: [
+      ['700.HK', 'Tencent', 'HK$4,689B', '18.84', 'DIF<DEA', 'Watch', false],
+      ['9988.HK', 'Alibaba', 'HK$2,353B', '22.90', 'DIF<DEA', 'Watch', false],
+      ['IBM.US', 'IBM', '$233B', '22.01', 'DIF>DEA ✓', 'Cross', true],
+      ['1810.HK', 'Xiaomi', 'HK$847B', '17.53', 'DIF<DEA', 'Watch', false],
+      ['9999.HK', 'NetEase', 'HK$560B', '15.00', 'DIF>DEA ✓', 'Cross', true],
+      ['9618.HK', 'JD.com', 'HK$304B', '14.00', 'DIF=+0.22 ★', 'Strongest', 'best'],
+      ['992.HK', 'Lenovo', 'HK$114B', '9.95', 'DIF<DEA', 'Watch', false],
+      ['285.HK', 'BYD Electronics', 'HK$70B', '14.69', 'DIF>DEA ✓', 'Cross', true],
+    ],
+    callout:
+      'Strongest MACD golden cross: 9618.HK (JD.com) — DIF crossed up from −0.08 through the zero axis to +0.22, the strongest near-zero-axis cross with the cleanest trend. IBM.US and 9999.HK also confirm. Tencent / Alibaba / Xiaomi DIF still below DEA — signal not yet satisfied.',
+  },
+  {
+    id: 'tech',
+    nav: 'Technical Diagnosis',
+    title: 'Read the chart for any symbol — MACD, KDJ, RSI, BOLL, in one prompt.',
+    desc: 'Skip the screenshots. Ask for a technical readout on any symbol and Skill pulls the daily / hourly candles, runs the indicators, and tells you what to look at — golden crosses, divergence, oversold zones.',
+    prompt: 'Diagnose NVDA.US — MACD, KDJ, RSI on the daily, and tell me which signals to trust.',
+    summary:
+      'NVDA.US daily chart, last 90 sessions: trend strong but MACD histogram is shrinking — momentum cooling. KDJ overbought (J=92.4), RSI 71.8 — short-term pullback risk elevated.',
+    tableHead: ['Indicator', 'Value', 'Reading', 'Conviction'],
+    tableRows: [
+      ['MACD', 'DIF +1.42 / DEA +1.18', 'Above zero · histogram ↓', 'Watch', false],
+      ['KDJ', 'K=88.4 D=84.2 J=92.4', 'Overbought · J > 80', 'Caution', false],
+      ['RSI(14)', '71.8', 'Overbought · > 70', 'Caution', false],
+      ['BOLL', 'Mid: $138.4 Upper: $152.1', 'Riding upper band', 'Strong trend', true],
+      ['Volume', 'vs 20D avg 1.18×', 'Above average — confirmed', 'Confirmed', 'best'],
+    ],
+    callout:
+      'Bias: short-term pullback risk, medium-term trend intact. KDJ + RSI both overbought, MACD histogram shrinking — first leg of a corrective pullback likely. Watch the $135 level (20D MA + lower BOLL band confluence) for re-entry.',
+  },
+  {
+    id: 'earnings',
+    nav: 'Earnings Research',
+    title: 'Decode earnings before the print — consensus, options pricing, key items.',
+    desc: 'Skill pulls analyst consensus, the EPS surprise history, and the IV-implied move from the options market. You get the numbers to beat and what the call should address — before you commit capital.',
+    prompt: 'NVDA reports tonight. Pull consensus, the IV-implied move, and what to watch for on the call.',
+    summary: 'NVDA Q3 FY26 print tonight after close. Consensus and post-earnings move expectations below.',
+    tableHead: ['Item', 'Consensus', 'Last quarter', 'Y/Y'],
+    tableRows: [
+      ['Revenue', '$33.10B', '$30.04B', '+90.4%', 'best'],
+      ['EPS (adj.)', '$0.85', '$0.68', '+90.0%', true],
+      ['Data-center', '$29.20B', '$26.27B', '+108.0%', true],
+      ['Gross margin', '75.0%', '75.1%', '−10 bps', false],
+      ['IV-implied move', '±9.2%', '—', 'ATM 30-day weekly', false],
+    ],
+    callout:
+      '3 things to watch on the call: (1) Data-center growth rate vs the +108% bar, (2) China commentary post-export controls, (3) FY26 capacity / supply guide. Options IV pricing a ±9.2% move — historical 4-quarter realized move averages ±7.4%.',
+  },
+  {
+    id: 'smartmoney',
+    nav: 'Smart-Money Tracking',
+    title: 'See where institutional capital is rotating — same-day, by sector.',
+    desc: 'Aggregate same-day capital flow across symbols, weighted by large-order share. Skill compares net inflow to 20-day baselines, surfaces the sectors institutions are accumulating or distributing.',
+    prompt:
+      'Which HK sectors are seeing institutional accumulation today? Show me the top 3 with net inflow > 2× 20-day baseline.',
+    summary:
+      'HK same-session capital flow snapshot: 3 sectors with abnormal institutional accumulation. Top of the leaderboard is consumer discretionary, on a 2.4× 20-day average.',
+    tableHead: ['Sector', 'Net inflow', 'vs 20D avg', 'Large-order share', 'Leader'],
+    tableRows: [
+      ['Consumer Discretionary', '+HK$3.82B', '2.40×', '61%', '9618.HK · +HK$1.21B', 'best'],
+      ['Semis & Hardware', '+HK$2.14B', '2.18×', '57%', '1810.HK · +HK$680M', true],
+      ['Internet', '+HK$1.92B', '2.05×', '52%', '700.HK · +HK$520M', true],
+      ['Real Estate', '−HK$0.84B', '−1.10×', '48%', '1109.HK · −HK$210M', false],
+    ],
+    callout:
+      "Highest conviction: Consumer Discretionary — 2.4× baseline net inflow, 61% large-order share suggests institutional rather than retail. 9618.HK leads at +HK$1.21B; the same name showed the strongest MACD cross in this morning's screen.",
+  },
+  {
+    id: 'order',
+    nav: 'Advanced Orders',
+    title: 'Conditional orders, multi-leg options — described in plain English.',
+    desc: 'Trailing stops, OCO brackets, dollar-cost-average ladders, multi-leg option spreads — describe the structure once and Skill places the legs with proper risk checks. Confirmation step before submission.',
+    prompt: 'Sell to open a TSLA $450/$470 call credit spread for next Friday — size for $500 max risk.',
+    summary: 'Two-leg spread sized to your risk budget. Awaiting confirmation before submission.',
+    tableHead: ['Leg', 'Action', 'Strike', 'Expiry', 'Mid', 'Qty'],
+    tableRows: [
+      ['1 · Short call', 'Sell to open', '$450', 'Nov 28', '$5.20', '2', true],
+      ['2 · Long call', 'Buy to open', '$470', 'Nov 28', '$2.40', '2', true],
+    ],
+    callout:
+      'Net credit: +$5.60 per spread × 2 = +$1,120. Max risk $2,880, breakeven $455.60. Reply confirm to submit both legs; Skill places the short leg first, then the long, with a 5s timeout safety.',
+  },
+  {
+    id: 'review',
+    nav: 'Portfolio Review',
+    title: 'Weekly portfolio check-up — concentration, factor exposure, drawdown risk.',
+    desc: 'Skill scans your positions across sub-accounts, calculates concentration risk per name and per sector, and flags the highest-drawdown-risk holdings using current options IV as a forward proxy.',
+    prompt: 'Review my portfolio. Flag concentration risks and the 3 highest forward-volatility holdings.',
+    summary:
+      'Portfolio total value $128,365. Tech weighting 52% — well above the 35% target. Three holdings carry elevated forward IV.',
+    tableHead: ['Symbol', 'Weight', 'P&L', 'Forward IV', 'Risk'],
+    tableRows: [
+      ['NVDA.US', '31.2%', '+12.1%', '42% — high', 'Concentration', 'best'],
+      ['TSLA.US', '11.4%', '+4.6%', '58% — earnings', 'Earnings IV', true],
+      ['700.HK', '9.8%', '+8.2%', '31%', 'Healthy', false],
+      ['9988.HK', '5.4%', '−2.1%', '34%', 'Healthy', false],
+      ['AAPL.US', '4.7%', '+1.8%', '22%', 'Healthy', false],
+    ],
+    callout:
+      'Recommendation: trim NVDA by 10–15% on next strength — sector cap of 35% is breached and earnings IV crush is approaching. Consider a TSLA collar through earnings (sell upside call, buy ATM put) to neutralize the +58% IV print risk without closing the position.',
+  },
+]
 
-const userCases: UserCaseCard[] = [
+const CAP_REFERENCE = [
+  {
+    title: 'Real-time Market Data',
+    items: [
+      'Live quotes for one or more symbols',
+      'Level 2 order book depth (bid/ask ladder)',
+      'Tick-by-tick recent trades',
+      'Intraday minute-by-minute price & volume',
+      'OHLCV candlesticks & historical date-range data',
+      'Intraday capital flow & distribution',
+      'Market sentiment temperature index (0–100)',
+      'Static reference info (lot size, shares, EPS)',
+      'Option quotes & option chain',
+      'Warrant quotes & warrants by underlying',
+    ],
+  },
   {
-    rank: '1',
-    accent: 'orange',
-    cardVariant: '',
-    title: '用 AI 扫描期权机会',
-    titleEn: 'Scanning Options Opportunities with AI',
-    titleHK: '用 AI 掃描期權機會',
-    summary: '对 39 个合约进行 AI 全量扫描，最高年化收益 423%，让 AI 帮你找到市场里最值得关注的机会。',
-    summaryEn: 'AI-scanned 39 contracts to surface the best options plays — peak annualized return of 423%.',
-    summaryHK: '對 39 個合約進行 AI 全量掃描，最高年化收益 423%，讓 AI 幫你找到市場裡最值得關注的機會。',
-    metricValue: '423%',
-    metricLabel: '最高年化收益',
-    metricLabelEn: 'MAX ANNUALIZED',
-    metricLabelHK: '最高年化收益',
-    author: '纳指嘉措',
-    authorId: '12105449',
-    topicId: '39722881',
+    title: 'Fundamentals & Research',
+    items: [
+      'Income statement, balance sheet, cash flow',
+      'P/E, P/B, P/S, dividend yield + peer comparison',
+      'Analyst EPS forecasts',
+      'Revenue & profit consensus with beat/miss',
+      'Institution ratings & target price distribution',
+      'Calculated financial indexes (PE, PB, DPS rate)',
+      'Institutional shareholders with position changes',
+      'Funds & ETFs that hold a given symbol',
+      'Dividend history & distribution details',
+      'SEC / regulatory filings (full Markdown content)',
+    ],
+  },
+  {
+    title: 'Calendar & Events',
+    items: [
+      'Upcoming earnings events by symbol',
+      'High-importance macro data events',
+      'Upcoming dividend events by market',
+      'Trading session schedule & holiday calendar',
+    ],
   },
   {
-    rank: '2',
-    accent: 'red',
-    cardVariant: '',
-    title: '长桥 Skill 使用初体验，很 Cool',
-    titleEn: 'First Impressions of Longbridge Skill — Pretty Cool',
-    titleHK: '長橋 Skill 使用初體驗，很 Cool',
-    summary: '用自然语言操控交易终端，和 AI 一起探索行情、分析持仓——这体验出乎意料的 Cool。',
-    summaryEn:
-      'Control a trading terminal with natural language, explore quotes and analyze positions — surprisingly cool.',
-    summaryHK: '用自然語言操控交易終端，和 AI 一起探索行情、分析持倉——這體驗出乎意料的 Cool。',
-    metricValue: 'Cool',
-    metricLabel: '初体验评价',
-    metricLabelEn: 'FIRST IMPRESSION',
-    metricLabelHK: '初體驗評價',
-    author: '不奋东西',
-    authorId: '14442740',
-    topicId: '39679744',
+    title: 'News, Community & Watchlist',
+    items: [
+      'Latest news articles for a symbol',
+      'Community discussion topics',
+      'Watchlist groups: list, create, update, delete',
+    ],
+  },
+  {
+    title: 'Account & Portfolio',
+    items: [
+      'Stock positions across all sub-accounts',
+      'Fund positions across all sub-accounts',
+      'Account cash balance & financing info',
+      'Cash flow records (deposits, withdrawals, dividends)',
+      'Account statements (daily / monthly)',
+      'Exchange rates for all supported currencies',
+    ],
   },
   {
-    rank: '3',
-    accent: 'yellow',
-    cardVariant: '',
-    title: 'QQQ 0DTE 量化交易系统：从零到实盘',
-    titleEn: 'QQQ 0DTE Quant System: From Zero to Live',
-    titleHK: 'QQQ 0DTE 量化交易系統：從零到實盤',
-    summary: '完整记录从策略设计、回测优化到实盘部署的全过程，构建 QQQ 当日到期期权量化系统。',
-    summaryEn: 'End-to-end walkthrough: strategy design, backtesting, and deploying a QQQ 0DTE options quant system.',
-    summaryHK: '完整記錄從策略設計、回測優化到實盤部署的全過程，構建 QQQ 當日到期期權量化系統。',
-    metricValue: '0DTE',
-    metricLabel: '量化实盘',
-    metricLabelEn: 'QUANT LIVE',
-    metricLabelHK: '量化實盤',
-    author: '热血青年',
-    authorId: '17928542',
-    topicId: '39996427',
+    title: 'Trading',
+    items: [
+      'Limit, market, or stop-limit orders',
+      "List today's orders, view detail, executions",
+      'Cancel a pending order',
+      'Modify quantity or price of a pending order',
+      'Estimate max buy/sell quantity',
+      'Margin ratio requirements for a symbol',
+    ],
   },
 ]
 
-interface ScenarioCard {
-  id: string
-  color: string
-  label: string
-  title: string
-  desc: string
-  example: string
-  claudeCodeExample?: string
-}
+const activeCat = ref('All')
+const scenarioIdx = ref(0)
+const activeAgent = ref('OpenClaw')
+const copied = ref(false)
+const copiedGetStarted = ref(false)
 
-const scenarioCards = computed<ScenarioCard[]>(() =>
-  isEN.value
-    ? [
-        {
-          id: 'monitor',
-          color: '#00b8b8',
-          label: 'Cross-Market Screener',
-          title: 'HK, US, A-shares, Singapore — screen across markets in one go',
-          desc: 'Multi-market opportunities are hard to track simultaneously. Tell the AI your criteria: market cap range, P/E ratio, sector — and layer in technical signals like KDJ golden cross or bullish MACD. Cross-market screening, results returned together.',
-          example:
-            'From US and HK stocks, find tech stocks with market cap above $50B, P/E below 25, and a recent MACD golden cross — sorted by market cap.',
-          claudeCodeExample: 'US + HK tech screener: mkt cap >$50B, P/E <25, recent MACD golden cross, sort by mkt cap',
-        },
-        {
-          id: 'research',
-          color: '#4781ff',
-          label: 'Technical Diagnosis',
-          title: 'Not just reading charts — let AI give you a direct technical read',
-          desc: 'The analysis after getting the candlesticks is often the most time-consuming part. Tell the AI which stock you want. It pulls daily, hourly, and 15-minute data, combines MACD, KDJ, RSI and other indicators to assess the current trend and key price levels — including pre/post-market data.',
-          example:
-            "Diagnose TSLA's technicals: what's the daily trend, is it near support or resistance, and do short-term signals lean bullish or bearish?",
-          claudeCodeExample:
-            'TSLA technical diagnosis: daily trend, support/resistance levels, bullish or bearish signals',
-        },
-        {
-          id: 'trade',
-          color: '#1890ff',
-          label: 'Earnings Deep Dive',
-          title: 'Earnings out? Unpack it in 5 minutes: actuals vs. estimates, revenue breakdown, analyst views',
-          desc: "The hardest part of earnings season isn't reading the numbers — it's putting them in context. AI pulls the three financial statements, consensus analyst estimates (high/low/mean), historical revenue by segment and region, valuation metrics, and SEC filings — cross-references everything and generates a complete summary.",
-          example:
-            'NVDA just reported. Compare actual results against analyst estimates, break down revenue changes by segment, and check whether the current valuation is reasonable.',
-          claudeCodeExample: 'NVDA earnings: actuals vs estimates, revenue by segment, valuation check',
-        },
-        {
-          id: 'chart',
-          color: '#ff5000',
-          label: 'Smart Money Tracker',
-          title: 'Are insiders buying or selling? Has institutional ownership changed?',
-          desc: 'Researching a stock goes beyond earnings — you need to follow the money. AI pulls insider trading records for executives and major shareholders over the past three months, plus the top 20 holders ranked by position changes across institution types (mutual funds, hedge funds, pension funds, etc.).',
-          example:
-            "Check AAPL's recent insider trading — are any executives selling heavily? How did hedge fund positions change versus last quarter?",
-          claudeCodeExample: 'AAPL insider trades + institutional position changes, past 3 months',
-        },
-        {
-          id: 'portfolio',
-          color: '#ff7333',
-          label: 'Advanced Orders',
-          title: 'Beyond buy/sell — set conditional orders, trailing stops, and options in one sentence',
-          desc: 'When you spot an opportunity or want to lock in risk protection, just express your intent in the conversation. Supports limit orders, market orders, stop-limit orders, trailing stops, and options and warrants order placement and modification. AI shows order details and waits for your confirmation before executing.',
-          example:
-            'Set a trailing stop on TSLA: trigger a sell if it drops more than 8%, and show me the order details for confirmation before executing.',
-          claudeCodeExample: 'TSLA trailing stop: sell on -8% drop, show order details before executing',
-        },
-        {
-          id: 'coding',
-          color: '#00b99a',
-          label: 'Portfolio Review',
-          title: 'Did you make or lose money this month? What worked, what dragged you down?',
-          desc: "The value of a review is understanding what your portfolio is doing — not just looking at up/down numbers. AI pulls the P&L trend for a selected period, a ranking of each position's P&L, portfolio allocation breakdown, and a detailed P&L transaction log — consolidated into a complete portfolio review report.",
-          example:
-            'Review my portfolio performance this month: how the overall P&L trended, which stock contributed most, which performed worst, and what percentage is US vs. HK stocks?',
-          claudeCodeExample: 'Monthly portfolio recap: P&L trend, top/worst performers, US vs HK breakdown',
-        },
-      ]
-    : [
-        {
-          id: 'monitor',
-          color: '#00b8b8',
-          label: isHK.value ? '跨市場選股' : '跨市场选股',
-          title: isHK.value
-            ? '港股、美股、A 股、新加坡，跨市場條件篩選，一次完成'
-            : '港股、美股、A 股、新加坡，跨市场条件筛选，一次完成',
-          desc: isHK.value
-            ? '多市場機會往往難以同步追蹤。直接告訴 AI 你的條件：市值範圍、PE 區間、行業板塊，還可以疊加技術信號——比如只看 KDJ 金叉、MACD 看漲的標的。跨市場篩選，結果統一返回。'
-            : '多市场机会往往难以同步追踪。直接告诉 AI 你的条件：市值范围、PE 区间、行业板块，还可以叠加技术信号——比如只看 KDJ 金叉、MACD 看涨的标的。跨市场筛选，结果统一返回。',
-          example: isHK.value
-            ? '幫我從美股和港股裡，篩出市值 500 億以上、PE 低於 25、近期 MACD 出現金叉的科技股，按市值排列'
-            : '帮我从美股和港股里，筛出市值 500 亿以上、PE 低于 25、近期 MACD 出现金叉的科技股，按市值排列',
-          claudeCodeExample: isHK.value
-            ? '美股 + 港股科技股篩選：市值>500 億、PE<25、近期 MACD 金叉'
-            : '美股 + 港股科技股筛选：市值>500 亿、PE<25、近期 MACD 金叉',
-        },
-        {
-          id: 'research',
-          color: '#4781ff',
-          label: isHK.value ? '技術面綜合診斷' : '技术面综合诊断',
-          title: isHK.value ? '不只是看圖——讓 AI 直接給你一個技術面判斷' : '不只是看图——让 AI 直接给你一个技术面判断',
-          desc: isHK.value
-            ? '拿到 K 線之後的分析，往往才是最耗時的部分。告訴 AI 你想看哪隻股票，它會調取日線、小時線、15 分鐘線數據，結合 MACD、KDJ、RSI 等技術指標，判斷當前趨勢與關鍵價位，給你一份清晰的技術面參考——含盤前盤後數據。'
-            : '拿到 K 线之后的分析，往往才是最耗时的部分。告诉 AI 你想看哪只股票，它会调取日线、小时线、15 分钟线数据，结合 MACD、KDJ、RSI 等技术指标，判断当前趋势与关键价位，给你一份清晰的技术面参考——含盘前盘后数据。',
-          example: isHK.value
-            ? '幫我診斷一下 TSLA 的技術面：日線趨勢怎樣，當前在支撐位還是壓力位，短期信號偏多還是偏空？'
-            : '帮我诊断一下 TSLA 的技术面：日线趋势怎样，当前在支撑位还是压力位，短期信号偏多还是偏空？',
-          claudeCodeExample: isHK.value
-            ? 'TSLA 技術面診斷：日線趨勢、支撐壓力位、多空信號偏向'
-            : 'TSLA 技术面诊断：日线趋势、支撑压力位、多空信号偏向',
-        },
-        {
-          id: 'trade',
-          color: '#1890ff',
-          label: isHK.value ? '財報季深度研究' : '财报季深度研究',
-          title: isHK.value
-            ? '財報一出，5 分鐘完成拆解：實際 vs 預期，收入結構，機構怎麼看'
-            : '财报一出，5 分钟完成拆解：实际 vs 预期，收入结构，机构怎么看',
-          desc: isHK.value
-            ? '財報季最耗時的，不是讀數字，而是把數字放在一起理解。AI 同時調取財務三表、分析師一致預期（含高/低/均值）、按業務線和地區拆分的歷史營收、估值指標及 SEC 申報原文，交叉對比，生成一份從數據到結論的完整分析摘要。'
-            : '财报季最耗时的，不是读数字，而是把数字放在一起理解。AI 同时调取财务三表、分析师一致预期（含高/低/均值）、按业务线和地区拆分的历史营收、估值指标及 SEC 申报原文，交叉对比，生成一份从数据到结论的完整分析摘要。',
-          example: isHK.value
-            ? 'NVDA 剛出財報，幫我對比實際業績和分析師預期的差距，拆一下各業務線的營收變化，順便看看當前估值是否合理'
-            : 'NVDA 刚出财报，帮我对比实际业绩和分析师预期的差距，拆一下各业务线的营收变化，顺便看看当前估值是否合理',
-          claudeCodeExample: isHK.value
-            ? 'NVDA 財報分析：實際業績 vs 預期、業務線營收拆解、估值是否合理'
-            : 'NVDA 财报分析：实际业绩 vs 预期、业务线营收拆解、估值是否合理',
-        },
-        {
-          id: 'chart',
-          color: '#ff5000',
-          label: isHK.value ? '聰明錢追蹤' : '聪明钱追踪',
-          title: isHK.value ? '大股東在買還是賣？機構持倉有沒有變化？' : '大股东在买还是卖？机构持仓有没有变化？',
-          desc: isHK.value
-            ? '研究一隻股票，財報之外還要關注資金動向。AI 幫你調取近三個月高管與大股東的內幕交易記錄，以及按機構類型（共同基金、對沖基金、養老金等）分組的前 20 大持股變動，清晰呈現「聰明錢」的最新動態。'
-            : '研究一只股票，财报之外还要关注资金动向。AI 帮你调取近三个月高管与大股东的内幕交易记录，以及按机构类型（共同基金、对冲基金、养老金等）分组的前 20 大持股变动，清晰呈现"聪明钱"的最新动态。',
-          example: isHK.value
-            ? '幫我查一下 AAPL 近期的內幕交易，有沒有高管在大量減持？對沖基金的持倉和上季度相比有什麼變化？'
-            : '帮我查一下 AAPL 近期的内幕交易，有没有高管在大量减持？对冲基金的持仓和上季度相比有什么变化？',
-          claudeCodeExample: isHK.value
-            ? 'AAPL 內幕交易 + 機構持倉變化（近三個月）'
-            : 'AAPL 内幕交易 + 机构持仓变化（近三个月）',
-        },
-        {
-          id: 'portfolio',
-          color: '#ff7333',
-          label: isHK.value ? '進階下單' : '进阶下单',
-          title: isHK.value
-            ? '不只是買入賣出——條件單、追蹤止損、期權，一句話設好'
-            : '不只是买入卖出——条件单、追踪止损、期权，一句话设好',
-          desc: isHK.value
-            ? '捕捉到機會，或想提前設好風險保護，直接在對話中表達意圖即可。支持限價單、市價單、觸價限價單、追蹤止損，以及股票期權和權證的下單與改單。AI 展示訂單詳情，等你確認後才執行。'
-            : '捕捉到机会，或想提前设好风险保护，直接在对话中表达意图即可。支持限价单、市价单、触价限价单、追踪止损，以及股票期权和权证的下单与改单。AI 展示订单详情，等你确认后才执行。',
-          example: isHK.value
-            ? '幫我給 TSLA 設一個追蹤止損，跌幅超過 8% 自動觸發賣出，執行前把訂單詳情給我確認'
-            : '帮我给 TSLA 设一个追踪止损，跌幅超过 8% 自动触发卖出，执行前把订单详情给我确认',
-          claudeCodeExample: isHK.value
-            ? 'TSLA 追蹤止損：跌幅 >8% 觸發賣出，執行前顯示訂單詳情'
-            : 'TSLA 追踪止损：跌幅 >8% 触发卖出，执行前显示订单详情',
-        },
-        {
-          id: 'coding',
-          color: '#00b99a',
-          label: isHK.value ? '持倉復盤' : '持仓复盘',
-          title: isHK.value
-            ? '這個月賺了還是虧了？哪些決策對了，哪些拖了後腿？'
-            : '这个月赚了还是亏了？哪些决策对了，哪些拖了后腿？',
-          desc: isHK.value
-            ? '復盤的價值在於理解自己的組合在做什麼，而不只是看漲跌數字。AI 調取指定週期內的盈虧趨勢、各標的盈虧排行、持倉結構佔比，以及單隻股票的盈虧流水明細，彙總成一份完整的組合復盤報告。'
-            : '复盘的价值在于理解自己的组合在做什么，而不只是看涨跌数字。AI 调取指定周期内的盈亏趋势、各标的盈亏排行、持仓结构占比，以及单只股票的盈亏流水明细，汇总成一份完整的组合复盘报告。',
-          example: isHK.value
-            ? '幫我復盤這個月的持倉表現：總盈虧趨勢如何，哪隻股票貢獻最大、哪隻表現最弱，組合裡美股和港股各佔多少？'
-            : '帮我复盘这个月的持仓表现：总盈亏趋势如何，哪只股票贡献最大、哪只表现最弱，组合里美股和港股各占多少？',
-          claudeCodeExample: isHK.value
-            ? '本月持倉復盤：盈虧趨勢、各標的排行、美股/港股佔比'
-            : '本月持仓复盘：盈亏趋势、各标的排行、美股/港股占比',
-        },
-      ]
+const filteredSkills = computed(() =>
+  activeCat.value === 'All' ? SKILLS : SKILLS.filter((s) => s.cat === activeCat.value)
 )
+const activeScenario = computed(() => DEMO_SCENARIOS[scenarioIdx.value])
 
-interface DemoScenario {
-  id: string
-  label: string
-  messages: DemoMessage[]
-  clientMessages?: Record<string, DemoMessage[]>
-}
-
-interface DemoMessage {
-  role: 'user' | 'tool' | 'assistant'
-  content: string
-  command?: string
-  rich?: boolean // if true, content is HTML rendered via v-html
-}
-
-// ─── Lightweight syntax highlighter for demo code blocks ──────────────────────
-
-function escHtml(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-function colorizeTokens(raw: string): string {
-  // Single-pass tokenizer: processes raw text once to avoid regex-on-html corruption
-  const KW =
-    /^(from|import|def|class|for|if|else|elif|return|in|as|with|not|and|or|True|False|None|print|float|int|str|dict|list|abs|len|range)\b/
-  const NUM = /^\d+(?:\.\d+)?(?:[BKMbkm])?\b/
-  let out = ''
-  let i = 0
-  while (i < raw.length) {
-    // String literal (double or single quoted)
-    if (raw[i] === '"' || raw[i] === "'") {
-      const q = raw[i]
-      let j = i + 1
-      while (j < raw.length && raw[j] !== q) j++
-      if (j < raw.length) j++
-      out += `<span class="hl-s">${escHtml(raw.slice(i, j))}</span>`
-      i = j
-      continue
-    }
-    // Keyword (at word boundary)
-    if (/\w/.test(raw[i]) && (i === 0 || !/\w/.test(raw[i - 1]))) {
-      const m = raw.slice(i).match(KW)
-      if (m) {
-        out += `<span class="hl-k">${m[1]}</span>`
-        i += m[1].length
-        continue
-      }
-    }
-    // Number (at word boundary)
-    if (/\d/.test(raw[i]) && (i === 0 || !/\w/.test(raw[i - 1]))) {
-      const m = raw.slice(i).match(NUM)
-      if (m) {
-        out += `<span class="hl-n">${m[0]}</span>`
-        i += m[0].length
-        continue
-      }
-    }
-    out += escHtml(raw[i])
-    i++
-  }
-  return out
-}
-
-function highlightCode(raw: string): string {
-  return raw
-    .split('\n')
-    .map((line) => {
-      // Shell prompt line (starts with $)
-      if (/^\s*\$\s/.test(line)) {
-        const esc = escHtml(line)
-        return `<span class="hl-prompt">$</span>${esc.slice(esc.indexOf('$') + 1)}`
-      }
-      // Full-line comment
-      const ci = line.indexOf('#')
-      if (ci >= 0) {
-        return colorizeTokens(line.slice(0, ci)) + `<span class="hl-c">${escHtml(line.slice(ci))}</span>`
-      }
-      return colorizeTokens(line)
-    })
-    .join('\n')
-}
-
-function codeHTML(raw: string): string {
-  return `<pre class="demo-code-block"><code>${highlightCode(raw)}</code></pre>`
-}
-
-// Terminal block: raw HTML with t-* span classes pre-applied
-function termHTML(raw: string): string {
-  return `<div class="demo-term">${raw}</div>`
-}
+const installCmd = `Install Longbridge AI toolkit following the guide:\nhttps://open.longbridge.com/skill/install.md`
 
-function klineSvg(): string {
-  const prices = [
-    190.04, 188.54, 190.05, 186.94, 182.81, 184.97, 187.98, 187.9, 189.82, 191.55, 192.85, 195.56, 184.89, 177.19,
-    182.48, 180.05, 183.04, 183.34, 177.82, 182.65, 184.77, 186.03, 183.14, 180.25, 183.22, 181.93, 180.4, 178.56,
-    172.7, 175.64,
-  ]
-  const dates = [
-    '2/9',
-    '2/10',
-    '2/11',
-    '2/12',
-    '2/13',
-    '2/17',
-    '2/18',
-    '2/19',
-    '2/20',
-    '2/23',
-    '2/24',
-    '2/25',
-    '2/26',
-    '2/27',
-    '3/2',
-    '3/3',
-    '3/4',
-    '3/5',
-    '3/6',
-    '3/9',
-    '3/10',
-    '3/11',
-    '3/12',
-    '3/13',
-    '3/16',
-    '3/17',
-    '3/18',
-    '3/19',
-    '3/20',
-    '3/23',
-  ]
-  const w = 540,
-    h = 110,
-    pad = { t: 10, b: 22, l: 8, r: 8 }
-  const iw = w - pad.l - pad.r,
-    ih = h - pad.t - pad.b
-  const min = Math.min(...prices) - 2,
-    max = Math.max(...prices) + 2
-  const px = (i: number) => pad.l + (i / (prices.length - 1)) * iw
-  const py = (v: number) => pad.t + (1 - (v - min) / (max - min)) * ih
-  const pts = prices.map((p, i) => `${px(i).toFixed(1)},${py(p).toFixed(1)}`).join(' ')
-  const fp =
-    `M${px(0)},${py(prices[0])} ` +
-    prices
-      .slice(1)
-      .map((p, i) => `L${px(i + 1).toFixed(1)},${py(p).toFixed(1)}`)
-      .join(' ') +
-    ` L${px(prices.length - 1)},${pad.t + ih} L${px(0)},${pad.t + ih} Z`
-  const peakI = prices.indexOf(Math.max(...prices))
-  const troughI = prices.indexOf(Math.min(...prices))
-  const xLbls = dates
-    .map((d, i) =>
-      i % 7 === 0
-        ? `<text x="${px(i).toFixed(1)}" y="${
-            h - 4
-          }" text-anchor="middle" font-size="9" fill="currentColor" opacity="0.4">${d}</text>`
-        : ''
-    )
-    .join('')
-  const curY = py(prices[prices.length - 1])
-  return `<svg viewBox="0 0 ${w} ${h}" style="width:100%;height:auto" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="kg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="var(--vp-c-brand-1)" stop-opacity="0.2"/><stop offset="100%" stop-color="var(--vp-c-brand-1)" stop-opacity="0"/></linearGradient></defs><path d="${fp}" fill="url(#kg)"/><polyline points="${pts}" fill="none" stroke="var(--vp-c-brand-1)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"/><line x1="${
-    pad.l
-  }" y1="${curY.toFixed(1)}" x2="${w - pad.r}" y2="${curY.toFixed(
-    1
-  )}" stroke="var(--vp-c-brand-1)" stroke-width="1" stroke-dasharray="3,3" opacity="0.35"/><circle cx="${px(
-    peakI
-  ).toFixed(1)}" cy="${py(prices[peakI]).toFixed(1)}" r="3.5" fill="var(--vp-c-yellow-1)"/><text x="${(
-    px(peakI) + 5
-  ).toFixed(1)}" y="${(py(prices[peakI]) - 3).toFixed(
-    1
-  )}" font-size="9" fill="var(--vp-c-yellow-1)" font-weight="700">峰 $195.56</text><circle cx="${px(troughI).toFixed(
-    1
-  )}" cy="${py(prices[troughI]).toFixed(1)}" r="3.5" fill="#ff4d4f"/><text x="${(px(troughI) + 5).toFixed(1)}" y="${(
-    py(prices[troughI]) + 13
-  ).toFixed(1)}" font-size="9" fill="#ff4d4f" font-weight="700">低 $172.70</text><rect x="${pad.l}" y="${py(
-    174.5
-  ).toFixed(1)}" width="${iw}" height="${(py(171.5) - py(174.5)).toFixed(
-    1
-  )}" fill="#ff4d4f" opacity="0.05"/>${xLbls}</svg>`
+function copyInstall() {
+  if (typeof navigator === 'undefined') return
+  navigator.clipboard.writeText(installCmd).then(() => {
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  })
 }
 
-function portfolioPieSvg(cn: boolean, hk: boolean): string {
-  // Colors already used throughout this component
-  const data = [
-    { sym: 'AAPL.US', val: 32585, color: '#4781ff' },
-    { sym: 'NVDA.US', val: 17740, color: '#00c88c' },
-    { sym: 'MSFT.US', val: 5670, color: '#a78bfa' },
-    { sym: '9988.HK', val: 855, color: '#f59e0b' },
-  ]
-  const total = data.reduce((a, b) => a + b.val, 0)
-  const cx = 76,
-    cy = 76,
-    r = 64,
-    ri = 40
-  let ang = -Math.PI / 2,
-    paths = ''
-  for (const d of data) {
-    const slice = (d.val / total) * 2 * Math.PI
-    const end = ang + slice
-    const la = slice > Math.PI ? 1 : 0
-    const [x1, y1] = [cx + r * Math.cos(ang), cy + r * Math.sin(ang)]
-    const [x2, y2] = [cx + r * Math.cos(end), cy + r * Math.sin(end)]
-    const [x3, y3] = [cx + ri * Math.cos(end), cy + ri * Math.sin(end)]
-    const [x4, y4] = [cx + ri * Math.cos(ang), cy + ri * Math.sin(ang)]
-    paths += `<path d="M${x1.toFixed(1)},${y1.toFixed(1)} A${r},${r} 0 ${la},1 ${x2.toFixed(1)},${y2.toFixed(
-      1
-    )} L${x3.toFixed(1)},${y3.toFixed(1)} A${ri},${ri} 0 ${la},0 ${x4.toFixed(1)},${y4.toFixed(1)} Z" fill="${
-      d.color
-    }" opacity=".9" stroke="var(--vp-c-bg)" stroke-width="2"/>`
-    ang = end
-  }
-  const legendRows = data
-    .map((ld, li) => {
-      const pct = ((ld.val / total) * 100).toFixed(1)
-      const sep = li > 0 ? 'border-top:1px solid var(--vp-c-divider);' : ''
-      return `<div style="${sep}display:flex;align-items:center;gap:8px;padding:6px 0"><span style="width:10px;height:10px;border-radius:3px;background:${
-        ld.color
-      };flex-shrink:0;display:inline-block"></span><span style="font-size:12px;font-weight:600;color:var(--vp-c-text-1);flex:1">${
-        ld.sym
-      }</span><span style="font-size:13px;font-weight:700;color:${
-        ld.color
-      }">${pct}%</span><span style="font-size:11px;color:var(--vp-c-text-3);width:44px;text-align:right">$${(
-        ld.val / 1000
-      ).toFixed(1)}k</span></div>`
-    })
-    .join('')
-  return `<div style="display:flex;align-items:center;gap:14px;margin:10px 0 12px"><svg width="152" height="152" viewBox="0 0 152 152" style="flex-shrink:0">${paths}<text x="${cx}" y="${
-    cy - 5
-  }" text-anchor="middle" font-size="9" fill="currentColor" opacity="0.4" letter-spacing=".05em">${
-    cn ? (hk ? '市值佔比' : '市值占比') : 'ALLOCATION'
-  }</text><text x="${cx}" y="${
-    cy + 12
-  }" text-anchor="middle" font-size="15" font-weight="800" fill="currentColor">$56.8k</text></svg><div style="flex:1;border:1px solid var(--vp-c-divider);border-radius:9px;padding:4px 12px;background:var(--vp-c-bg)">${legendRows}</div></div>`
+function copyGetStarted() {
+  if (typeof navigator === 'undefined') return
+  navigator.clipboard.writeText(installCmd).then(() => {
+    copiedGetStarted.value = true
+    setTimeout(() => {
+      copiedGetStarted.value = false
+    }, 2000)
+  })
 }
 
-const demoScenarios = computed<DemoScenario[]>(() => {
-  const cn = !isEN.value
-  const hk = isHK.value
-
-  return [
-    // ── 1. 跨市场选股
-    {
-      id: 'monitor',
-      label: isEN.value ? 'Cross-Market Screen' : isHK.value ? '跨市場選股' : '跨市场选股',
-      messages: [
-        {
-          role: 'user',
-          content: isEN.value
-            ? 'Screen US and HK tech stocks: market cap >$50B, PE <25, recent MACD golden cross. Sort by market cap.'
-            : isHK.value
-              ? '幫我從美股和港股裡，篩出市值 500 億以上、PE 低於 25、近期 MACD 出現金叉的科技股，按市值排列'
-              : '帮我从美股和港股里，筛出市值 500 亿以上、PE 低于 25、近期 MACD 出现金叉的科技股，按市值排列',
-        },
-        {
-          role: 'tool',
-          command:
-            'longbridge calc-index 700.HK 9988.HK IBM.US 1810.HK 9999.HK 9618.HK 992.HK 285.HK --indicators MACD,PE',
-          content: '',
-        },
-        {
-          role: 'assistant',
-          rich: true,
-          content: `
-<div style="font-size:13px;line-height:1.75;color:var(--vp-c-text-2);margin-bottom:12px">${
-            isEN.value
-              ? 'US + HK tech screening done. 8 stocks pass market cap ≥$50B and PE<25. 3 have confirmed MACD golden crosses (DIF turned positive and crossed above DEA).'
-              : hk
-                ? '美股 + 港股科技板塊篩選完成，共 8 隻股票滿足市值 ≥500 億、PE<25 條件，其中 3 隻近期 MACD 金叉信號確認（DIF 由負轉正並上穿 DEA）。'
-                : '美股 + 港股科技板块筛选完成，共 8 只股票满足市值 ≥500 亿、PE<25 条件，其中 3 只近期 MACD 金叉信号确认（DIF 由负转正并上穿 DEA）。'
-          }</div>
-<div class="demo-table-wrap"><table class="demo-table">
-  <thead><tr>
-    <th>${isEN.value ? 'Symbol' : hk ? '代碼' : '代码'}</th>
-    <th style="text-align:left">${isEN.value ? 'Name' : hk ? '名稱' : '名称'}</th>
-    <th>${isEN.value ? 'Mkt Cap' : '市值'}</th>
-    <th>PE</th>
-    <th>MACD</th>
-    <th>${isEN.value ? 'Signal' : hk ? '信號' : '信号'}</th>
-  </tr></thead>
-  <tbody>
-    <tr><td style="font-weight:700">700.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Tencent' : hk ? '騰訊控股' : '腾讯控股'
-    }</td><td>HK$4,689B</td><td>18.84</td><td class="demo-muted">DIF&lt;DEA</td><td><span style="font-size:10px;background:var(--vp-c-bg-mute);padding:1px 6px;border-radius:4px;color:var(--vp-c-text-2)">${
-      isEN.value ? 'Watch' : hk ? '觀望' : '观望'
-    }</span></td></tr>
-    <tr><td style="font-weight:700">9988.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Alibaba' : '阿里巴巴'
-    }</td><td>HK$2,353B</td><td>22.90</td><td class="demo-muted">DIF&lt;DEA</td><td><span style="font-size:10px;background:var(--vp-c-bg-mute);padding:1px 6px;border-radius:4px;color:var(--vp-c-text-2)">${
-      isEN.value ? 'Watch' : hk ? '觀望' : '观望'
-    }</span></td></tr>
-    <tr><td style="font-weight:700">IBM.US</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">IBM</td><td>$233B</td><td>22.01</td><td class="demo-pos">DIF&gt;DEA ✓</td><td><span style="font-size:10px;background:var(--vp-c-green-soft);padding:1px 6px;border-radius:4px;color:var(--up-color)">${
-      isEN.value ? 'Golden X' : '金叉'
-    }</span></td></tr>
-    <tr><td style="font-weight:700">1810.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Xiaomi' : hk ? '小米集團' : '小米集团'
-    }</td><td>HK$847B</td><td>17.53</td><td class="demo-muted">DIF&lt;DEA</td><td><span style="font-size:10px;background:var(--vp-c-bg-mute);padding:1px 6px;border-radius:4px;color:var(--vp-c-text-2)">${
-      isEN.value ? 'Watch' : hk ? '觀望' : '观望'
-    }</span></td></tr>
-    <tr><td style="font-weight:700">9999.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'NetEase' : hk ? '網易' : '网易'
-    }</td><td>HK$560B</td><td>15.00</td><td class="demo-pos">DIF&gt;DEA ✓</td><td><span style="font-size:10px;background:var(--vp-c-green-soft);padding:1px 6px;border-radius:4px;color:var(--up-color)">${
-      isEN.value ? 'Golden X' : '金叉'
-    }</span></td></tr>
-    <tr><td style="font-weight:700;color:var(--up-color)">9618.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'JD.com' : hk ? '京東集團' : '京东集团'
-    }</td><td>HK$304B</td><td>14.00</td><td class="demo-pos">DIF=+0.22 ★</td><td><span style="font-size:10px;background:var(--vp-c-green-soft);padding:1px 6px;border-radius:4px;color:var(--up-color)">${
-      isEN.value ? 'Strongest' : hk ? '金叉最強' : '金叉最强'
-    }</span></td></tr>
-    <tr><td style="font-weight:700">992.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Lenovo' : hk ? '聯想集團' : '联想集团'
-    }</td><td>HK$114B</td><td>9.95</td><td class="demo-muted">DIF&lt;DEA</td><td><span style="font-size:10px;background:var(--vp-c-bg-mute);padding:1px 6px;border-radius:4px;color:var(--vp-c-text-2)">${
-      isEN.value ? 'Watch' : hk ? '觀望' : '观望'
-    }</span></td></tr>
-    <tr><td style="font-weight:700">285.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'BYD Electronic' : hk ? '比亞迪電子' : '比亚迪电子'
-    }</td><td>HK$70B</td><td>14.69</td><td class="demo-pos">DIF&gt;DEA ✓</td><td><span style="font-size:10px;background:var(--vp-c-green-soft);padding:1px 6px;border-radius:4px;color:var(--up-color)">${
-      isEN.value ? 'Golden X' : '金叉'
-    }</span></td></tr>
-  </tbody>
-</table></div>
-<div class="demo-hi-box"><strong>${
-            isEN.value
-              ? 'Strongest MACD golden cross: 9618.HK (JD.com)'
-              : hk
-                ? 'MACD 金叉信號最強：9618.HK（京東）'
-                : 'MACD 金叉信号最强：9618.HK（京东）'
-          }</strong>——${
-            isEN.value
-              ? 'DIF crossed zero axis from −0.08 to +0.22 — zero-axis golden cross, strongest trend signal. IBM.US and 9999.HK also confirmed. Tencent, Alibaba, Xiaomi DIF still below DEA.'
-              : hk
-                ? 'DIF 由 −0.08 上穿零軸至 +0.22，為零軸附近金叉，趨勢性最強。IBM.US 和 9999.HK 同樣確認。騰訊、阿里、小米 DIF 仍在 DEA 下方，暫不滿足信號要求。'
-                : 'DIF 由 −0.08 上穿零轴至 +0.22，为零轴附近金叉，趋势性最强。IBM.US 和 9999.HK 同样确认。腾讯、阿里、小米 DIF 仍在 DEA 下方，暂不满足信号要求。'
-          }</div>`,
-        },
-      ],
-      clientMessages: {
-        claude: [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'Screen US and HK tech stocks: market cap >$50B, PE <25, recent MACD golden cross. Sort by market cap.'
-              : isHK.value
-                ? '幫我從美股和港股裡，篩出市值 500 億以上、PE 低於 25、近期 MACD 出現金叉的科技股，按市值排列'
-                : '帮我从美股和港股里，筛出市值 500 亿以上、PE 低于 25、近期 MACD 出现金叉的科技股，按市值排列',
-          },
-          {
-            role: 'tool',
-            command:
-              'longbridge calc-index 700.HK 9988.HK IBM.US 1810.HK 9999.HK 9618.HK 992.HK 285.HK --indicators MACD,PE',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: `<div style="font-size:13.5px;line-height:1.8;margin-bottom:14px">${
-              isEN.value
-                ? 'Screening complete. Of 8 stocks meeting cap + valuation criteria, 3 show recent MACD golden crosses:'
-                : hk
-                  ? '篩選完成。8 隻滿足市值和估值條件的科技股中，有 3 隻近期確認 MACD 金叉：'
-                  : '筛选完成。8 只满足市值和估值条件的科技股中，有 3 只近期确认 MACD 金叉：'
-            }</div>
-<div style="font-size:13px;line-height:1.85;color:var(--vp-c-text-2)">
-<strong style="color:var(--up-color)">① 9618.HK（京东）</strong> — ${
-              isEN.value
-                ? 'DIF crossed zero from −0.08 to +0.22. Zero-axis golden cross — strongest trend signal. PE 14, cap HK$304B.'
-                : hk
-                  ? 'DIF 由 −0.08 上穿零軸至 +0.22，零軸附近金叉，信號最強。PE 14，市值 HK$304B。'
-                  : 'DIF 由 −0.08 上穿零轴至 +0.22，零轴附近金叉，信号最强。PE 14，市值 HK$304B。'
-            }<br>
-<strong style="color:var(--up-color)">② IBM.US</strong> — ${
-              isEN.value
-                ? 'DIF turned positive and rising. PE 22.01, cap $233B. AI infrastructure demand driving upside.'
-                : hk
-                  ? 'DIF 由負轉正並持續上移，PE 22.01，市值 $233B。AI 基礎設施需求驅動上行。'
-                  : 'DIF 由负转正并持续上移，PE 22.01，市值 $233B。AI 基础设施需求驱动上行。'
-            }<br>
-<strong style="color:var(--up-color)">③ 9999.HK（网易）</strong> — ${
-              isEN.value
-                ? 'DIF crossed above DEA. PE 15.00, cap HK$560B.'
-                : hk
-                  ? 'DIF 穿越 DEA 金叉成立，PE 15.00，市值 HK$560B。'
-                  : 'DIF 穿越 DEA 金叉成立，PE 15.00，市值 HK$560B。'
-            }<br><br>
-${
-  isEN.value
-    ? 'Tencent (PE 18.84), Alibaba (PE 22.90), and Xiaomi (PE 17.53) all pass filters but DIF is still below DEA — no golden cross yet.'
-    : hk
-      ? '騰訊（PE 18.84）、阿里（PE 22.90）和小米（PE 17.53）均滿足估值和市值條件，但 DIF 仍在 DEA 下方，金叉信號尚未確認。'
-      : '腾讯（PE 18.84）、阿里（PE 22.90）和小米（PE 17.53）均满足估值和市值条件，但 DIF 仍在 DEA 下方，金叉信号尚未确认。'
+function rowClass(flag: string | boolean) {
+  if (flag === 'best') return 'is-best'
+  if (flag === true) return 'is-cross'
+  return ''
 }
-</div>
-<div class="demo-ai-sig">${
-              isEN.value
-                ? 'Data: 2026-03-24 · MACD 12/26/9 daily'
-                : hk
-                  ? '數據時間：2026-03-24 · MACD 參數 12/26/9 日線'
-                  : '数据时间：2026-03-24 · MACD 参数 12/26/9 日线'
-            }</div>`,
-          },
-        ],
-        'claude-code': [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'Screen US+HK tech: cap >$50B, PE<25, recent MACD golden cross'
-              : isHK.value
-                ? '美股 + 港股科技股篩選：市值>500 億、PE<25、近期 MACD 金叉'
-                : '美股 + 港股科技股筛选：市值>500 亿、PE<25、近期 MACD 金叉',
-          },
-          {
-            role: 'tool',
-            command:
-              'longbridge calc-index 700.HK 9988.HK IBM.US 1810.HK 9999.HK 9618.HK 992.HK 285.HK --indicators MACD,PE',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: hk
-              ? termHTML(`<span class="t-p">$</span> longbridge calc-index 700.HK 9988.HK IBM.US 1810.HK 9999.HK 9618.HK 992.HK 285.HK --indicators MACD,PE
-
-<span class="t-hd">跨市場篩選結果 · PE<25 + MACD金叉 · 2026-03-24</span>
-<span class="t-dim">──────────────────────────────────────────────────────────</span>
-<span class="t-hd">Symbol     名稱           市值        PE     DIF      DEA     金叉</span>
-<span class="t-dim">──────────────────────────────────────────────────────────</span>
-700.HK     騰訊控股     HK$4,689B   18.84   <span class="t-neg">-2.15</span>   <span class="t-neg">-1.84</span>    <span class="t-neg">✗</span>
-9988.HK    阿里巴巴     HK$2,353B   22.90   <span class="t-neg">-1.42</span>   <span class="t-neg">-0.93</span>    <span class="t-neg">✗</span>
-IBM.US     IBM            $233B    22.01   <span class="t-pos">+0.86</span>   <span class="t-pos">+0.31</span>    <span class="t-pos">✓</span>
-1810.HK    小米集團      HK$847B    17.53   <span class="t-neg">-0.58</span>   <span class="t-neg">-0.41</span>    <span class="t-neg">✗</span>
-<span class="t-pos">9999.HK    網易          HK$560B    15.00   +0.19    +0.07    ✓</span>
-<span class="t-pos">9618.HK    京東集團     HK$304B    14.00   +0.22    -0.08    ✓ ★</span>
-992.HK     聯想集團      HK$114B     9.95   <span class="t-neg">-0.44</span>   <span class="t-neg">-0.31</span>    <span class="t-neg">✗</span>
-285.HK     比亞迪電子    HK$70B     14.69   <span class="t-pos">+0.11</span>   <span class="t-pos">+0.04</span>    <span class="t-pos">✓</span>
-<span class="t-dim">──────────────────────────────────────────────────────────</span>
-符合全部條件 (PE<25 + 金叉): <span class="t-pos">4 只</span>  IBM.US  9999.HK  <span class="t-hi">9618.HK★</span>  285.HK
-<span class="t-c"># ★ 9618.HK 零軸附近金叉，信號最強</span>`)
-              : termHTML(`<span class="t-p">$</span> longbridge calc-index 700.HK 9988.HK IBM.US 1810.HK 9999.HK 9618.HK 992.HK 285.HK --indicators MACD,PE
-
-<span class="t-hd">跨市场筛选结果 · PE<25 + MACD金叉 · 2026-03-24</span>
-<span class="t-dim">──────────────────────────────────────────────────────────</span>
-<span class="t-hd">Symbol     名称           市值        PE     DIF      DEA     金叉</span>
-<span class="t-dim">──────────────────────────────────────────────────────────</span>
-700.HK     腾讯控股     HK$4,689B   18.84   <span class="t-neg">-2.15</span>   <span class="t-neg">-1.84</span>    <span class="t-neg">✗</span>
-9988.HK    阿里巴巴     HK$2,353B   22.90   <span class="t-neg">-1.42</span>   <span class="t-neg">-0.93</span>    <span class="t-neg">✗</span>
-IBM.US     IBM            $233B    22.01   <span class="t-pos">+0.86</span>   <span class="t-pos">+0.31</span>    <span class="t-pos">✓</span>
-1810.HK    小米集团      HK$847B    17.53   <span class="t-neg">-0.58</span>   <span class="t-neg">-0.41</span>    <span class="t-neg">✗</span>
-<span class="t-pos">9999.HK    网易          HK$560B    15.00   +0.19    +0.07    ✓</span>
-<span class="t-pos">9618.HK    京东集团     HK$304B    14.00   +0.22    -0.08    ✓ ★</span>
-992.HK     联想集团      HK$114B     9.95   <span class="t-neg">-0.44</span>   <span class="t-neg">-0.31</span>    <span class="t-neg">✗</span>
-285.HK     比亚迪电子    HK$70B     14.69   <span class="t-pos">+0.11</span>   <span class="t-pos">+0.04</span>    <span class="t-pos">✓</span>
-<span class="t-dim">──────────────────────────────────────────────────────────</span>
-符合全部条件 (PE<25 + 金叉): <span class="t-pos">4 只</span>  IBM.US  9999.HK  <span class="t-hi">9618.HK★</span>  285.HK
-<span class="t-c"># ★ 9618.HK 零轴附近金叉，信号最强</span>`),
-          },
-        ],
-      },
-    },
-
-    // ── 2. 技术面综合诊断
-    {
-      id: 'research',
-      label: isEN.value ? 'Technical Diagnosis' : isHK.value ? '技術面診斷' : '技术面诊断',
-      messages: [
-        {
-          role: 'user',
-          content: isEN.value
-            ? "Diagnose TSLA's technicals: daily trend, support or resistance, short-term signal bullish or bearish?"
-            : isHK.value
-              ? '幫我診斷一下 TSLA 的技術面：日線趨勢怎樣，當前在支撐位還是壓力位，短期信號偏多還是偏空？'
-              : '帮我诊断一下 TSLA 的技术面：日线趋势怎样，当前在支撑位还是压力位，短期信号偏多还是偏空？',
-        },
-        {
-          role: 'tool',
-          command:
-            'longbridge kline TSLA.US --period day --count 60 && longbridge calc-index TSLA.US --indicators MA,MACD,KDJ,RSI',
-          content: '',
-        },
-        {
-          role: 'assistant',
-          rich: true,
-          content: `
-<div class="demo-kw">
-  <div class="demo-kh">
-    <div><div style="font-size:11px;color:var(--vp-c-text-3);margin-bottom:2px">TSLA.US · ${
-      isEN.value ? 'Daily 60d' : hk ? '日線 60 天' : '日线 60 天'
-    } · 2026-03-24</div><span class="demo-kprice">$380.85</span><span class="demo-kchg" style="background:var(--vp-c-red-soft);color:var(--down-color);margin-left:8px">-$7.68 · -1.98%</span></div>
-    <div class="demo-kmeta"><div>${isEN.value ? 'Support $380 / $364' : hk ? '支撐 $380 / $364' : '支撑 $380 / $364'}</div><div>${
-      isEN.value ? 'Resistance $395 / $400' : hk ? '壓力 $395 / $400' : '压力 $395 / $400'
-    }</div></div>
-  </div>
-  ${klineSvg()}
-  <div class="demo-kstats">
-    <div class="demo-kstat"><div class="demo-ksl">MA5</div><div class="demo-ksv demo-neg">$384.23</div><div style="font-size:10px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'above price' : hk ? '價格上方' : '价格上方'
-    }</div></div>
-    <div class="demo-kstat"><div class="demo-ksl">MA20</div><div class="demo-ksv demo-neg">$397.53</div><div style="font-size:10px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'resistance' : hk ? '壓制' : '压制'
-    }</div></div>
-    <div class="demo-kstat"><div class="demo-ksl">RSI</div><div class="demo-ksv" style="color:#f59e0b">39.63</div><div style="font-size:10px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'near oversold' : hk ? '接近超賣' : '接近超卖'
-    }</div></div>
-  </div>
-</div>
-<div class="demo-res-section" style="margin-top:12px">
-  <div class="demo-res-hd"><span class="demo-res-hd-text">${
-    isEN.value ? 'Indicators' : hk ? '技術指標' : '技术指标'
-  }</span><span class="demo-res-signal" style="background:var(--vp-c-red-soft);color:var(--down-color)">${
-    isEN.value ? 'Bearish' : '偏空'
-  }</span></div>
-  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px">
-    <div style="font-size:12px"><span style="color:var(--vp-c-text-3)">MACD</span><br><strong class="demo-neg">DIF -9.75 / DEA -8.28</strong><br><span style="font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Hist -2.93, bearish expansion' : hk ? 'Hist -2.93，空頭擴張' : 'Hist -2.93，空头扩张'
-    }</span></div>
-    <div style="font-size:12px"><span style="color:var(--vp-c-text-3)">KDJ</span><br><strong style="color:#f59e0b">K 24.74 / D 30.15 / J 13.92</strong><br><span style="font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'J extremely oversold — bounce possible' : hk ? 'J 極度超賣，有反彈可能' : 'J 极度超卖，有反弹可能'
-    }</span></div>
-    <div style="font-size:12px"><span style="color:var(--vp-c-text-3)">RSI(14)</span><br><strong style="color:#f59e0b">39.63</strong><br><span style="font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Approaching oversold zone (<30)' : hk ? '接近超賣區（<30），未觸發' : '接近超卖区（<30），未触发'
-    }</span></div>
-    <div style="font-size:12px"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'MA Structure' : hk ? '均線結構' : '均线结构'
-    }</span><br><strong class="demo-neg">${
-      isEN.value ? 'Bearish stack' : hk ? '空頭排列' : '空头排列'
-    }</strong><br><span style="font-size:11px;color:var(--vp-c-text-3)">MA5 &lt; MA10 &lt; MA20 &lt; MA60</span></div>
-  </div>
-</div>
-<div class="demo-verdict">
-  <div class="demo-verdict-hd">${isEN.value ? 'Diagnosis' : hk ? '綜合診斷' : '综合诊断'}</div>
-  <div class="demo-verdict-rows">
-    <div class="demo-verdict-row"><span class="demo-verdict-label">${
-      isEN.value ? 'Trend' : hk ? '趨勢' : '趋势'
-    }</span><span class="demo-verdict-val">${
-      isEN.value
-        ? 'Daily downtrend confirmed — all MAs above price in bearish stack. Near resistance $395, key resistance $400.'
-        : hk
-          ? '日線下降趨勢明確，均線全線空頭排列（MA5→MA60 均在價格上方）。短期壓力 $395，有效阻力 $400。'
-          : '日线下降趋势明确，均线全线空头排列（MA5→MA60 均在价格上方）。短期压力 $395，有效阻力 $400。'
-    }</span></div>
-    <div class="demo-verdict-row"><span class="demo-verdict-label">${
-      isEN.value ? 'Position' : '位置'
-    }</span><span class="demo-verdict-val">${
-      isEN.value
-        ? 'Current $380.85 at prior support (Nov 2025 base). $380 is key support; break below targets $364.'
-        : hk
-          ? '當前 $380.85 處於前期支撐位（2025 年 11 月平台），$380 為重要支撐，若跌破關注 $364。'
-          : '当前 $380.85 处于前期支撑位（2025 年 11 月平台），$380 为重要支撑，若跌破关注 $364。'
-    }</span></div>
-    <div class="demo-verdict-row"><span class="demo-verdict-label">${
-      isEN.value ? 'Short-term' : hk ? '短期信號' : '短期信号'
-    }</span><span class="demo-verdict-val">${
-      isEN.value
-        ? '<strong style="color:var(--vp-c-text-1)">Overall bearish, but KDJ J=13.92 is extremely oversold — technical bounce possible.</strong> Bounce target $393–$395. Failure to reclaim MA5 ($384) means downtrend resumes.'
-        : hk
-          ? '<strong style="color:var(--vp-c-text-1)">整體偏空，但 KDJ J=13.92 極度超賣，短期有技術性反彈可能。</strong>反彈目標 $393–$395。若不能有效收復 MA5($384)，反彈後仍有下探風險。'
-          : '<strong style="color:var(--vp-c-text-1)">整体偏空，但 KDJ J=13.92 极度超卖，短期有技术性反弹可能。</strong>反弹目标 $393–$395。若不能有效收复 MA5($384)，反弹后仍有下探风险。'
-    }</span></div>
-  </div>
-</div>`,
-        },
-      ],
-      clientMessages: {
-        claude: [
-          {
-            role: 'user',
-            content: isEN.value
-              ? "Diagnose TSLA's technicals: daily trend, support or resistance, short-term signal bullish or bearish?"
-              : isHK.value
-                ? '幫我診斷一下 TSLA 的技術面：日線趨勢怎樣，當前在支撐位還是壓力位，短期信號偏多還是偏空？'
-                : '帮我诊断一下 TSLA 的技术面：日线趋势怎样，当前在支撑位还是压力位，短期信号偏多还是偏空？',
-          },
-          {
-            role: 'tool',
-            command:
-              'longbridge kline TSLA.US --period day --count 60 && longbridge calc-index TSLA.US --indicators MA,MACD,KDJ,RSI',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: `<div style="font-size:13.5px;line-height:1.8;margin-bottom:14px">${
-              isEN.value
-                ? "I've analyzed TSLA's technicals across three dimensions:"
-                : hk
-                  ? '我從趨勢、指標、位置三個維度分析了 TSLA 當前技術面：'
-                  : '我从趋势、指标、位置三个维度分析了 TSLA 当前技术面：'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">① ${
-              isEN.value ? 'Daily Trend' : hk ? '日線趨勢' : '日线趋势'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'TSLA is in a clear daily downtrend. MA5 ($384), MA10 ($391), MA20 ($398), MA60 ($420) all above price — classic bearish stack. MACD DIF=-9.75, DEA=-8.28, histogram -2.93 and expanding. Bearish momentum continuing.'
-                : hk
-                  ? 'TSLA 處於明確的日線下降趨勢。MA5（$384）、MA10（$391）、MA20（$398）、MA60（$420）全線在價格上方，形成標準空頭排列。MACD DIF=-9.75，DEA=-8.28，柱狀圖 -2.93 且仍在擴張，空頭動能延續。'
-                  : 'TSLA 处于明确的日线下降趋势。MA5（$384）、MA10（$391）、MA20（$398）、MA60（$420）全线在价格上方，形成标准空头排列。MACD DIF=-9.75，DEA=-8.28，柱状图 -2.93 且仍在扩张，空头动能延续。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">② ${
-              isEN.value ? 'Key Levels' : hk ? '關鍵位置' : '关键位置'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'Current $380.85 sits on support (Nov 2025 base, held multiple times). If lost, next support $364. Overhead: $395 dense cost zone, $400 round-number resistance.'
-                : hk
-                  ? '當前 $380.85 正處於支撐位（2025 年 11 月平台，多次測試有效）。若此位丟失，下一支撐在 $364。上方 $395 為近期密集成本區，$400 為整數關口阻力。'
-                  : '当前 $380.85 正处于支撑位（2025 年 11 月平台，多次测试有效）。若此位丢失，下一支撑在 $364。上方 $395 为近期密集成本区，$400 为整数关口阻力。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">③ ${
-              isEN.value ? 'Short-term Signal' : hk ? '短期信號' : '短期信号'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'KDJ J=13.92 is in extreme oversold territory (<20). Historically this level produces technical bounces with high frequency. RSI(14)=39.63, near oversold but not triggered.'
-                : hk
-                  ? 'KDJ J 值 =13.92，已進入極度超賣區間（<20），歷史上此區間出現技術性反彈概率較高。RSI(14)=39.63，接近超賣但未破位。'
-                  : 'KDJ J 值 =13.92，已进入极度超卖区间（<20），历史上此区间出现技术性反弹概率较高。RSI(14)=39.63，接近超卖但未破位。'
-            }</div>
-<div class="demo-verdict">
-  <div class="demo-verdict-hd">${isEN.value ? 'My Assessment' : hk ? '我的判斷' : '我的判断'}</div>
-  <div style="font-size:13px;line-height:1.85;color:var(--vp-c-text-2)">${
-    isEN.value
-      ? '<strong style="color:var(--vp-c-text-1)">Overall bearish, KDJ oversold bounce possible short-term.</strong> For longs: consider reducing at $393–$395. For new buyers: wait to see if MA5 ($384) is reclaimed before entering.'
-      : hk
-        ? '<strong style="color:var(--vp-c-text-1)">整體偏空，短期 KDJ 超賣有反彈可能。</strong>若持有多單，建議在 $393–$395 反彈區間考慮減倉；若空倉，等待 MA5 ($384) 能否有效收復再決策。'
-        : '<strong style="color:var(--vp-c-text-1)">整体偏空，短期 KDJ 超卖有反弹可能。</strong>若持有多单，建议在 $393–$395 反弹区间考虑减仓；若空仓，等待 MA5 ($384) 能否有效收复再决策。'
-  }</div>
-</div>`,
-          },
-        ],
-        'claude-code': [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'TSLA technical analysis: MA, MACD, KDJ, RSI signals and key levels'
-              : isHK.value
-                ? 'TSLA 技術分析：均線、MACD/KDJ/RSI 指標、關鍵位'
-                : 'TSLA 技术分析：均线、MACD/KDJ/RSI 指标、关键位',
-          },
-          {
-            role: 'tool',
-            command:
-              'longbridge kline TSLA.US --period day --count 60 && longbridge calc-index TSLA.US --indicators MA,MACD,KDJ,RSI',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: hk
-              ? termHTML(`<span class="t-p">$</span> longbridge calc-index TSLA.US --indicators MA,MACD,KDJ,RSI
-
-<span class="t-hd">TSLA.US 技術指標 · 日線 · 2026-03-24</span>
-<span class="t-dim">──────────────────────────────────────────</span>
-現價:  <span class="t-neg">$380.85  -1.98%</span>
-
-<span class="t-hd">均線結構（空頭排列）</span>
-MA5:   <span class="t-neg">$384.23</span>  MA10: <span class="t-neg">$391.00</span>
-MA20:  <span class="t-neg">$397.53</span>  MA60: <span class="t-neg">$420.39</span>
-<span class="t-c"># 均線全在價格上方 → 下降趨勢</span>
-
-<span class="t-hd">MACD(12,26,9)</span>
-DIF:  <span class="t-neg">-9.75</span>   DEA:  <span class="t-neg">-8.28</span>   Hist: <span class="t-neg">-2.93</span>
-<span class="t-c"># 柱狀圖擴張，空頭動能延續</span>
-
-<span class="t-hd">KDJ</span>
-K: <span class="t-hi">24.74</span>   D: <span class="t-hi">30.15</span>   J: <span class="t-hi">13.92</span>
-<span class="t-c"># J<20 極度超賣，短期反彈概率較高</span>
-
-<span class="t-hd">RSI(14)</span>
-RSI: <span class="t-hi">39.63</span>  <span class="t-c"># 接近超賣(<30)，尚未觸發</span>
-
-<span class="t-dim">──────────────────────────────────────────</span>
-支撐: <span class="t-pos">$380</span> / <span class="t-pos">$364</span>   壓力: <span class="t-neg">$395</span> / <span class="t-neg">$400</span>
-結論: <span class="t-neg">整體偏空</span> · KDJ超賣有短期反彈 · 關注MA5($384)能否收復`)
-              : termHTML(`<span class="t-p">$</span> longbridge calc-index TSLA.US --indicators MA,MACD,KDJ,RSI
-
-<span class="t-hd">TSLA.US 技术指标 · 日线 · 2026-03-24</span>
-<span class="t-dim">──────────────────────────────────────────</span>
-现价:  <span class="t-neg">$380.85  -1.98%</span>
-
-<span class="t-hd">均线结构（空头排列）</span>
-MA5:   <span class="t-neg">$384.23</span>  MA10: <span class="t-neg">$391.00</span>
-MA20:  <span class="t-neg">$397.53</span>  MA60: <span class="t-neg">$420.39</span>
-<span class="t-c"># 均线全在价格上方 → 下降趋势</span>
-
-<span class="t-hd">MACD(12,26,9)</span>
-DIF:  <span class="t-neg">-9.75</span>   DEA:  <span class="t-neg">-8.28</span>   Hist: <span class="t-neg">-2.93</span>
-<span class="t-c"># 柱状图扩张，空头动能延续</span>
-
-<span class="t-hd">KDJ</span>
-K: <span class="t-hi">24.74</span>   D: <span class="t-hi">30.15</span>   J: <span class="t-hi">13.92</span>
-<span class="t-c"># J<20 极度超卖，短期反弹概率较高</span>
-
-<span class="t-hd">RSI(14)</span>
-RSI: <span class="t-hi">39.63</span>  <span class="t-c"># 接近超卖(<30)，尚未触发</span>
-
-<span class="t-dim">──────────────────────────────────────────</span>
-支撑: <span class="t-pos">$380</span> / <span class="t-pos">$364</span>   压力: <span class="t-neg">$395</span> / <span class="t-neg">$400</span>
-结论: <span class="t-neg">整体偏空</span> · KDJ超卖有短期反弹 · 关注MA5($384)能否收复`),
-          },
-        ],
-      },
-    },
-
-    // ── 3. 财报季深度研究
-    {
-      id: 'trade',
-      label: isEN.value ? 'Earnings Research' : isHK.value ? '財報研究' : '财报研究',
-      messages: [
-        {
-          role: 'user',
-          content: isEN.value
-            ? 'NVDA just reported — compare actual vs analyst estimates, break down revenue by segment, check if valuation is reasonable'
-            : isHK.value
-              ? 'NVDA 剛出財報，幫我對比實際業績和分析師預期的差距，拆一下各業務線的營收變化，順便看看當前估值是否合理'
-              : 'NVDA 刚出财报，帮我对比实际业绩和分析师预期的差距，拆一下各业务线的营收变化，顺便看看当前估值是否合理',
-        },
-        {
-          role: 'tool',
-          command: 'longbridge filings NVDA.US --count 5 && longbridge news NVDA.US --count 3',
-          content: '',
-        },
-        {
-          role: 'assistant',
-          rich: true,
-          content: `
-<div class="demo-res-section">
-  <div class="demo-res-hd"><span class="demo-res-hd-text">${
-    isEN.value ? 'Q4 FY2026 Actual vs Estimates' : hk ? 'Q4 FY2026 業績 vs 預期' : 'Q4 FY2026 业绩 vs 预期'
-  }</span><span class="demo-res-signal" style="background:var(--vp-c-green-soft);color:var(--up-color)">${
-    isEN.value ? 'Beat' : hk ? '超預期' : '超预期'
-  }</span></div>
-  <div class="demo-table-wrap"><table class="demo-table" style="margin:0">
-    <thead><tr><th>${isEN.value ? 'Metric' : hk ? '指標' : '指标'}</th><th>${isEN.value ? 'Actual' : hk ? '實際' : '实际'}</th><th>${
-      isEN.value ? 'Est. (mean)' : hk ? '預期（均值）' : '预期（均值）'
-    }</th><th>${isEN.value ? 'Beat' : hk ? '超預期' : '超预期'}</th></tr></thead>
-    <tbody>
-      <tr><td>${
-        isEN.value ? 'Revenue' : hk ? '總營收' : '总营收'
-      }</td><td class="demo-pos">$39.33B</td><td class="demo-muted">$38.04B</td><td class="demo-pos">+3.4%</td></tr>
-      <tr><td>${
-        isEN.value ? 'Data Center' : hk ? '數據中心' : '数据中心'
-      }</td><td class="demo-pos">$36.74B</td><td class="demo-muted">$35.80B</td><td class="demo-pos">+2.6%</td></tr>
-      <tr><td>${
-        isEN.value ? 'Adj. EPS' : hk ? '調整後 EPS' : '调整后 EPS'
-      }</td><td class="demo-pos">$0.89</td><td class="demo-muted">$0.85</td><td class="demo-pos">+4.7%</td></tr>
-      <tr><td>${
-        isEN.value ? 'Gross Margin' : '毛利率'
-      }</td><td class="demo-pos">73.5%</td><td class="demo-muted">72.1%</td><td class="demo-pos">+140bp</td></tr>
-    </tbody>
-  </table></div>
-</div>
-<div class="demo-res-section">
-  <div class="demo-res-hd"><span class="demo-res-hd-text">${isEN.value ? 'Revenue by Segment' : hk ? '各業務線營收' : '各业务线营收'}</span></div>
-  <div style="padding:10px 12px;display:flex;flex-direction:column;gap:8px">
-    <div style="font-size:12px"><div style="display:flex;justify-content:space-between;margin-bottom:3px"><span>${
-      isEN.value ? 'Data Center' : hk ? '數據中心' : '数据中心'
-    }</span><span class="demo-pos">$36.74B  +93% YoY</span></div><div style="background:var(--vp-c-bg-mute);height:5px;border-radius:3px"><div style="background:var(--up-color);height:5px;border-radius:3px;width:93%"></div></div></div>
-    <div style="font-size:12px"><div style="display:flex;justify-content:space-between;margin-bottom:3px"><span>${
-      isEN.value ? 'Gaming' : hk ? '遊戲' : '游戏'
-    }</span><span class="demo-pos">$2.36B  +11% YoY</span></div><div style="background:var(--vp-c-bg-mute);height:5px;border-radius:3px"><div style="background:#4781ff;height:5px;border-radius:3px;width:40%"></div></div></div>
-    <div style="font-size:12px"><div style="display:flex;justify-content:space-between;margin-bottom:3px"><span>${
-      isEN.value ? 'Pro Visualization' : hk ? '專業可視化' : '专业可视化'
-    }</span><span class="demo-muted">$0.51B  +5% YoY</span></div><div style="background:var(--vp-c-bg-mute);height:5px;border-radius:3px"><div style="background:var(--vp-c-text-3);height:5px;border-radius:3px;width:18%"></div></div></div>
-  </div>
-</div>
-<div class="demo-res-section">
-  <div class="demo-res-hd"><span class="demo-res-hd-text">${
-    isEN.value ? 'Valuation' : hk ? '當前估值' : '当前估值'
-  }</span><span class="demo-res-signal" style="background:var(--vp-c-yellow-soft);color:var(--vp-c-yellow-1)">${
-    isEN.value ? 'Rich' : '偏高'
-  }</span></div>
-  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 12px">
-    <div style="text-align:center"><div style="font-size:11px;color:var(--vp-c-text-3);margin-bottom:3px">${
-      isEN.value ? 'Mkt Cap' : '市值'
-    }</div><div style="font-weight:700;font-size:14px">$4.27T</div></div>
-    <div style="text-align:center"><div style="font-size:11px;color:var(--vp-c-text-3);margin-bottom:3px">PE (TTM)</div><div style="font-weight:700;font-size:14px;color:#f59e0b">35.6×</div></div>
-    <div style="text-align:center"><div style="font-size:11px;color:var(--vp-c-text-3);margin-bottom:3px">PB</div><div style="font-weight:700;font-size:14px;color:#f59e0b">27.1×</div></div>
-  </div>
-</div>
-<div class="demo-hi-box"><strong>${isEN.value ? 'Summary' : hk ? '結論' : '结论'}</strong>：${
-            isEN.value
-              ? 'Q4 beat on revenue and EPS. Data Center +93% YoY is the core driver. PE 35.6× above peers, but $1T FY2027 AI demand forecast would justify the premium. <strong style="color:var(--vp-c-text-1)">High growth, high valuation — suitable for long-horizon positioning.</strong>'
-              : hk
-                ? 'Q4 營收和 EPS 均超預期，數據中心 +93% YoY 是核心驅動。當前 PE 35.6× 高於行業均值，但若 FY2027 $1T AI 需求預測兌現，成長溢價可消化。<strong style="color:var(--vp-c-text-1)">高成長、高估值，適合看長做強。</strong>'
-                : 'Q4 营收和 EPS 均超预期，数据中心 +93% YoY 是核心驱动。当前 PE 35.6× 高于行业均值，但若 FY2027 $1T AI 需求预测兑现，成长溢价可消化。<strong style="color:var(--vp-c-text-1)">高成长、高估值，适合看长做强。</strong>'
-          }</div>`,
-        },
-      ],
-      clientMessages: {
-        claude: [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'NVDA just reported — compare actual vs analyst estimates, break down revenue by segment, check if valuation is reasonable'
-              : isHK.value
-                ? 'NVDA 剛出財報，幫我對比實際業績和分析師預期的差距，拆一下各業務線的營收變化，順便看看當前估值是否合理'
-                : 'NVDA 刚出财报，帮我对比实际业绩和分析师预期的差距，拆一下各业务线的营收变化，顺便看看当前估值是否合理',
-          },
-          {
-            role: 'tool',
-            command: 'longbridge filings NVDA.US --count 5 && longbridge news NVDA.US --count 3',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: `<div style="font-size:13.5px;line-height:1.8;margin-bottom:14px">${
-              isEN.value
-                ? 'NVDA Q4 FY2026 results are in. Full breakdown of performance, revenue mix, and valuation:'
-                : hk
-                  ? 'NVDA Q4 FY2026 財報已出，以下是業績、收入結構與估值的完整分析：'
-                  : 'NVDA Q4 FY2026 财报已出，以下是业绩、收入结构与估值的完整分析：'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">① ${
-              isEN.value ? 'Actual vs Estimates' : hk ? '業績 vs 預期' : '业绩 vs 预期'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'Total revenue $39.33B beat consensus $38.04B by ~3.4%. Adj. EPS $0.89 beat $0.85 by ~4.7%. Gross margin 73.5% vs estimate 72.1%. Broad beat — gross margin quality is a particularly strong signal.'
-                : hk
-                  ? '總營收 $39.33B 超一致預期 $38.04B 約 3.4%，調整後 EPS $0.89 超預期 $0.85 約 4.7%。毛利率 73.5% 高於預期 72.1%——全面超預期，尤其是毛利率超出是盈利質量的積極信號。'
-                  : '总营收 $39.33B 超一致预期 $38.04B 约 3.4%，调整后 EPS $0.89 超预期 $0.85 约 4.7%。毛利率 73.5% 高于预期 72.1%——全面超预期，尤其是毛利率超出是盈利质量的积极信号。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">② ${
-              isEN.value ? 'Revenue Mix' : hk ? '收入結構' : '收入结构'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'Data Center $36.74B (93.4% of revenue), +93% YoY — overwhelmingly the core driver. Gaming $2.36B (+11%) is stable. Concentration creates both a growth engine and a single-segment risk.'
-                : hk
-                  ? '數據中心貢獻 $36.74B（占比 93.4%），同比 +93%，是絕對核心。Gaming $2.36B (+11%) 穩健。業務集中在數據中心，既是增長引擎，也是集中度風險。'
-                  : '数据中心贡献 $36.74B（占比 93.4%），同比 +93%，是绝对核心。Gaming $2.36B (+11%) 稳健。业务集中在数据中心，既是增长引擎，也是集中度风险。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">③ ${
-              isEN.value ? 'Valuation' : hk ? '估值判斷' : '估值判断'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'Market cap $4.27T, PE 35.6× (TTM), PB 27.1×. Expensive in absolute terms, but against $1T FY2027 AI demand forecast, current PS ~2.7× is not extreme. Key risk: execution timeline.'
-                : hk
-                  ? '當前市值 $4.27T，PE 35.6×（TTM），PB 27.1×。絕對值偏高，但考慮 FY2027 AI 需求 $1T 預測，當前 PS 約 2.7× 並不極端。關鍵在於需求兌現節奏——若推遲，高估值將承壓。'
-                  : '当前市值 $4.27T，PE 35.6×（TTM），PB 27.1×。绝对值偏高，但考虑 FY2027 AI 需求 $1T 预测，当前 PS 约 2.7× 并不极端。关键在于需求兑现节奏——若推迟，高估值将承压。'
-            }</div>
-<div class="demo-ai-sig">${
-              isEN.value
-                ? 'Source: NVDA latest earnings + SEC Form 4 + Longbridge quote · 2026-03-24'
-                : hk
-                  ? '數據來源：NVDA 最新財報 + SEC Form 4 + Longbridge 行情 · 2026-03-24'
-                  : '数据来源：NVDA 最新财报 + SEC Form 4 + Longbridge 行情 · 2026-03-24'
-            }</div>`,
-          },
-        ],
-        'claude-code': [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'Pull NVDA earnings: actual vs estimates, segment breakdown, valuation metrics'
-              : isHK.value
-                ? '取 NVDA 財報數據：業績 vs 預期、分業務線拆解、估值指標'
-                : '取 NVDA 财报数据：业绩 vs 预期、分业务线拆解、估值指标',
-          },
-          {
-            role: 'tool',
-            command: 'longbridge filings NVDA.US --count 5 && longbridge news NVDA.US --count 3',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: hk
-              ? termHTML(`<span class="t-p">$</span> longbridge filings NVDA.US --count 5
-
-<span class="t-hd">NVDA SEC 文件 · 2026-03-24</span>
-<span class="t-dim">──────────────────────────────────────────────────</span>
-Form4  03-24 ×7  內部人交易  <span class="t-c"># 今日多次申報，無大額淨賣出 ✓</span>
-8-K    03-02     GTC 2026 產品公告
-10-K   02-01     FY2026 年報（已申報）
-
-<span class="t-p">$</span> longbridge news NVDA.US --count 3
-
-<span class="t-hd">NVDA 最新新聞</span>
-<span class="t-dim">──────────────────────────────────────────────────</span>
-<span class="t-pos">++</span> NVIDIA is packaging the world — GTC 2026 系統戰略
-<span class="t-pos">++</span> SemiAnalysis: GTC 深度解析，Blackwell Ultra 出貨節奏超預期
-   NVDA Q4 FY2026: 數據中心 $36.74B (+93% YoY)，EPS $0.89 超預期
-
-<span class="t-dim">──────────────────────────────────────────────────</span>
-<span class="t-hd">估值快覽 · 2026-03-24</span>
-市值: <span class="t-hi">$4.27T</span>   PE(TTM): <span class="t-hi">35.6×</span>   PB: <span class="t-hi">27.1×</span>
-現價: <span class="t-neg">$175.64</span>  Q4營收實際/預期: <span class="t-pos">$39.33B / $38.04B (+3.4%)</span>
-<span class="t-c"># 全面超預期；數據中心佔比 93.4%，估值偏高但需求預測支撐</span>`)
-              : termHTML(`<span class="t-p">$</span> longbridge filings NVDA.US --count 5
-
-<span class="t-hd">NVDA SEC 文件 · 2026-03-24</span>
-<span class="t-dim">──────────────────────────────────────────────────</span>
-Form4  03-24 ×7  内部人交易  <span class="t-c"># 今日多次申报，无大额净卖出 ✓</span>
-8-K    03-02     GTC 2026 产品公告
-10-K   02-01     FY2026 年报（已申报）
-
-<span class="t-p">$</span> longbridge news NVDA.US --count 3
-
-<span class="t-hd">NVDA 最新新闻</span>
-<span class="t-dim">──────────────────────────────────────────────────</span>
-<span class="t-pos">++</span> NVIDIA is packaging the world — GTC 2026 系统战略
-<span class="t-pos">++</span> SemiAnalysis: GTC 深度解析，Blackwell Ultra 出货节奏超预期
-   NVDA Q4 FY2026: 数据中心 $36.74B (+93% YoY)，EPS $0.89 超预期
-
-<span class="t-dim">──────────────────────────────────────────────────</span>
-<span class="t-hd">估值快览 · 2026-03-24</span>
-市值: <span class="t-hi">$4.27T</span>   PE(TTM): <span class="t-hi">35.6×</span>   PB: <span class="t-hi">27.1×</span>
-现价: <span class="t-neg">$175.64</span>  Q4营收实际/预期: <span class="t-pos">$39.33B / $38.04B (+3.4%)</span>
-<span class="t-c"># 全面超预期；数据中心占比 93.4%，估值偏高但需求预测支撑</span>`),
-          },
-        ],
-      },
-    },
+</script>
 
-    // ── 4. 聪明钱追踪
-    {
-      id: 'chart',
-      label: isEN.value ? 'Smart Money' : isHK.value ? '聰明錢追蹤' : '聪明钱追踪',
-      messages: [
-        {
-          role: 'user',
-          content: isEN.value
-            ? "Check AAPL's recent insider trades — any executives selling heavily? How did hedge fund positions change vs last quarter?"
-            : isHK.value
-              ? '幫我查一下 AAPL 近期的內幕交易，有沒有高管在大量減持？對沖基金的持倉和上季度相比有什麼變化？'
-              : '帮我查一下 AAPL 近期的内幕交易，有没有高管在大量减持？对冲基金的持仓和上季度相比有什么变化？',
-        },
-        {
-          role: 'tool',
-          command: 'longbridge filings AAPL.US --type Form4 --count 10 && longbridge capital-dist AAPL.US',
-          content: '',
-        },
-        {
-          role: 'assistant',
-          rich: true,
-          content: `
-<div class="demo-res-section">
-  <div class="demo-res-hd"><span class="demo-res-hd-text">${
-    isEN.value
-      ? 'Insider Transactions · Form 4 · Last 90d'
-      : hk
-        ? '內幕交易 · Form 4 · 近 90 天'
-        : '内幕交易 · Form 4 · 近 90 天'
-  }</span><span class="demo-res-signal" style="background:var(--vp-c-bg-mute);color:var(--vp-c-text-2)">${
-    isEN.value ? 'Neutral' : '中性'
-  }</span></div>
-  <div style="padding:10px 12px;display:flex;flex-direction:column;gap:6px">
-    <div style="display:flex;gap:8px;align-items:baseline;font-size:12.5px"><span style="font-size:10px;color:var(--vp-c-text-3);width:105px;flex-shrink:0">Form 4 · 03/21</span><span style="color:var(--vp-c-text-2)">${
-      isEN.value
-        ? 'New board director · Form 3 initial filing (not a trade)'
-        : hk
-          ? '董事會新成員 · Form 3 申報（初始登記，非交易）'
-          : '董事会新成员 · Form 3 申报（初始登记，非交易）'
-    }</span></div>
-    <div style="display:flex;gap:8px;align-items:baseline;font-size:12.5px"><span style="font-size:10px;color:var(--vp-c-text-3);width:105px;flex-shrink:0">Form 4 · 03/18</span><span style="color:var(--vp-c-text-2)">${
-      isEN.value
-        ? 'SVP RSU vest + automatic tax-withholding sale ~$1.8M — not discretionary selling'
-        : hk
-          ? 'SVP 薪酬激勵股（RSU 歸屬），自動出售約 $1.8M 用於繳稅，非主動減持'
-          : 'SVP 薪酬激励股（RSU 归属），自动出售约 $1.8M 用于缴税，非主动减持'
-    }</span></div>
-    <div style="display:flex;gap:8px;align-items:baseline;font-size:12.5px"><span style="font-size:10px;color:var(--vp-c-text-3);width:105px;flex-shrink:0">Form 4 · 03/14</span><span style="color:var(--vp-c-text-2)">${
-      isEN.value
-        ? 'CFO exercised options + sold $3.2M under 10b5-1 plan (pre-scheduled, not discretionary)'
-        : hk
-          ? 'CFO 執行期權並同步出售 $3.2M（10b5-1 計劃，提前鎖定，非信息驅動）'
-          : 'CFO 执行期权并同步出售 $3.2M（10b5-1 计划，提前锁定，非信息驱动）'
-    }</span></div>
-    <div style="display:flex;gap:8px;align-items:baseline;font-size:12.5px"><span style="font-size:10px;color:var(--vp-c-text-3);width:105px;flex-shrink:0">Form 4 · 02/28</span><span style="color:var(--vp-c-text-2)">${
-      isEN.value
-        ? 'VP bought 2,500 shares @$264 — discretionary buy signal'
-        : hk
-          ? 'VP 買入 2,500 股 @$264 · 主動增持信號'
-          : 'VP 买入 2,500 股 @$264 · 主动增持信号'
-    }</span><span class="demo-pos" style="font-size:11px;flex-shrink:0">↑ ${isEN.value ? 'Buy' : '增持'}</span></div>
-  </div>
-</div>
-<div class="demo-res-section">
-  <div class="demo-res-hd"><span class="demo-res-hd-text">${
-    isEN.value ? 'Institutional Holdings QoQ' : hk ? '機構持倉變動（QoQ）' : '机构持仓变动（QoQ）'
-  }</span><span class="demo-res-signal" style="background:var(--vp-c-bg-mute);color:var(--vp-c-text-2)">${
-    isEN.value ? 'Small net outflow' : hk ? '小幅淨流出' : '小幅净流出'
-  }</span></div>
-  <div style="padding:10px 12px;display:flex;flex-direction:column;gap:6px">
-    <div style="display:flex;justify-content:space-between;align-items:center;font-size:12.5px"><span>${
-      isEN.value ? 'Mutual Funds (Vanguard/Fidelity)' : '共同基金（Vanguard/Fidelity 等）'
-    }</span><span class="demo-pos">+0.3%</span></div>
-    <div style="display:flex;justify-content:space-between;align-items:center;font-size:12.5px"><span>${
-      isEN.value ? 'Hedge Funds (top 20)' : hk ? '對沖基金（前 20 大）' : '对冲基金（前 20 大）'
-    }</span><span class="demo-neg">−1.2%</span></div>
-    <div style="display:flex;justify-content:space-between;align-items:center;font-size:12.5px"><span>${
-      isEN.value ? 'Pensions / Sovereign' : hk ? '養老金 / 主權基金' : '养老金 / 主权基金'
-    }</span><span class="demo-muted">±0.0%</span></div>
-    <div style="display:flex;justify-content:space-between;align-items:center;font-size:12.5px"><span>${
-      isEN.value ? 'ETFs (passive)' : hk ? 'ETF（被動）' : 'ETF（被动）'
-    }</span><span class="demo-pos">+0.8%</span></div>
-  </div>
-</div>
-<div class="demo-hi-box"><strong>${isEN.value ? 'Summary' : hk ? '結論' : '结论'}</strong>：${
-            isEN.value
-              ? 'No red flags in insider activity — all selling is 10b5-1 or RSU tax withholding, all routine. The only discretionary trade was a VP buy. Hedge funds trimmed (-1.2%) but mutual fund and ETF inflows offset this. <strong style="color:var(--vp-c-text-1)">No sign of smart money exiting at scale.</strong>'
-              : hk
-                ? '內幕交易無異常——所有賣出均屬 10b5-1 計劃或 RSU 納稅性質，是例行行為。唯一的主動交易是 VP 的增持。對沖基金小幅減持（-1.2%），但共同基金和 ETF 被動增持抵消，整體持倉結構穩定，<strong style="color:var(--vp-c-text-1)">未見聰明錢大規模撤退信號。</strong>'
-                : '内幕交易无异常——所有卖出均属 10b5-1 计划或 RSU 纳税性质，是例行行为。唯一的主动交易是 VP 的增持。对冲基金小幅减持（-1.2%），但共同基金和 ETF 被动增持抵消，整体持仓结构稳定，<strong style="color:var(--vp-c-text-1)">未见聪明钱大规模撤退信号。</strong>'
-          }</div>`,
-        },
-      ],
-      clientMessages: {
-        claude: [
-          {
-            role: 'user',
-            content: isEN.value
-              ? "Check AAPL's recent insider trades — any executives selling heavily? How did hedge fund positions change vs last quarter?"
-              : isHK.value
-                ? '幫我查一下 AAPL 近期的內幕交易，有沒有高管在大量減持？對沖基金的持倉和上季度相比有什麼變化？'
-                : '帮我查一下 AAPL 近期的内幕交易，有没有高管在大量减持？对冲基金的持仓和上季度相比有什么变化？',
-          },
-          {
-            role: 'tool',
-            command: 'longbridge filings AAPL.US --type Form4 --count 10 && longbridge capital-dist AAPL.US',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: `<div style="font-size:13.5px;line-height:1.8;margin-bottom:14px">${
-              isEN.value
-                ? "I've analyzed AAPL's Form 4 insider filings over the past 90 days and institutional position changes:"
-                : hk
-                  ? '我分析了 AAPL 近 90 天的 SEC Form 4 內幕交易申報及機構持倉變動：'
-                  : '我分析了 AAPL 近 90 天的 SEC Form 4 内幕交易申报及机构持仓变动：'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">① ${
-              isEN.value ? 'Insider Transactions' : hk ? '內幕交易' : '内幕交易'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'Four Form 4 filings in 90 days. <strong style="color:var(--vp-c-text-1)">No executives selling in bulk on discretion.</strong> Two sell transactions are 10b5-1 pre-scheduled or RSU tax withholding — routine. The only discretionary trade was a VP buying 2,500 shares at $264 in February — a bullish signal.'
-                : hk
-                  ? '近 90 天共 4 份 Form 4，<strong style="color:var(--vp-c-text-1)">沒有高管主動大規模減持</strong>。兩筆賣出均屬 10b5-1 預設計劃或 RSU 納稅性質，是例行行為。唯一值得關注的主動交易是 VP 在 2 月以 $264 買入 2,500 股——偏多信號。'
-                  : '近 90 天共 4 份 Form 4，<strong style="color:var(--vp-c-text-1)">没有高管主动大规模减持</strong>。两笔卖出均属 10b5-1 预设计划或 RSU 纳税性质，是例行行为。唯一值得关注的主动交易是 VP 在 2 月以 $264 买入 2,500 股——偏多信号。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">② ${
-              isEN.value ? 'Institutional Holdings' : hk ? '機構持倉' : '机构持仓'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? "Top 20 hedge fund holdings down -1.2% QoQ, consistent with AAPL's -5.7% correction — some risk reduction. But passive ETFs (+0.8%) and mutual funds (+0.3%) are stable, broadly offsetting."
-                : hk
-                  ? '對沖基金前 20 大持倉環比下降 -1.2%，與 AAPL 近期 -5.7% 回調有關，部分基金減少暴露。但被動資金（ETF +0.8%）和共同基金（+0.3%）整體穩定，淨流向基本平衡。'
-                  : '对冲基金前 20 大持仓环比下降 -1.2%，与 AAPL 近期 -5.7% 回调有关，部分基金减少暴露。但被动资金（ETF +0.8%）和共同基金（+0.3%）整体稳定，净流向基本平衡。'
-            }</div>
-<div class="demo-verdict">
-  <div class="demo-verdict-hd">${isEN.value ? 'My Assessment' : hk ? '我的判斷' : '我的判断'}</div>
-  <div style="font-size:13px;line-height:1.85;color:var(--vp-c-text-2)">${
-    isEN.value
-      ? 'Capital picture is healthy. No insider warning signals. Hedge fund trimming is consistent with broad market correction, passive flows continue. <strong style="color:var(--vp-c-text-1)">No systemic exit in AAPL — current pullback appears sentiment-driven, not fundamental.</strong>'
-      : hk
-        ? '資金面整體健康。內部人行為無預警信號，對沖基金的輕微減持與近期大盤回調一致，被動資金持續流入。<strong style="color:var(--vp-c-text-1)">AAPL 未見系統性撤退，當前回調更多是市場情緒驅動而非基本面惡化。</strong>'
-        : '资金面整体健康。内部人行为无预警信号，对冲基金的轻微减持与近期大盘回调一致，被动资金持续流入。<strong style="color:var(--vp-c-text-1)">AAPL 未见系统性撤退，当前回调更多是市场情绪驱动而非基本面恶化。</strong>'
-  }</div>
-</div>`,
-          },
-        ],
-        'claude-code': [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'AAPL insider filings + institutional capital distribution'
-              : isHK.value
-                ? 'AAPL 內幕申報 + 機構資金分佈'
-                : 'AAPL 内幕申报 + 机构资金分布',
-          },
-          {
-            role: 'tool',
-            command: 'longbridge filings AAPL.US --type Form4 --count 10 && longbridge capital-dist AAPL.US',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: hk
-              ? termHTML(`<span class="t-p">$</span> longbridge filings AAPL.US --type Form4 --count 5
+<template>
+  <div class="page-root skill-page-root">
+    <AppNav />
+
+    <!-- Hero -->
+    <section class="skill-hero">
+      <div class="skill-hero-bg" />
+      <div class="section-inner skill-hero-inner">
+        <div style="text-align: center; max-width: 760px; margin: 0 auto">
+          <span class="eyebrow">Longbridge Developers · Skill</span>
+          <h1 class="h-display" style="margin-top: 20px; font-size: clamp(36px, 4.8vw, 56px)">
+            Longbridge Skill
+            <br />
+            <span style="color: var(--lb-brand)">your AI's trading desk.</span>
+          </h1>
+          <p
+            class="t-body"
+            style="margin-top: 24px; max-width: 640px; margin-left: auto; margin-right: auto; font-size: 16px">
+            Unlock market insights, deep research and intelligent trading for your AI. With Longbridge Skill, your AI
+            assistant — Claude, Cursor, ChatGPT, Gemini, Codex — can screen stocks, decode earnings, track insider
+            moves, and place orders, all in plain conversation.
+          </p>
 
-<span class="t-hd">AAPL 內幕交易 (Form 4) · 近 90 天</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-03/21  Form3   新任董事初始登記           <span class="t-c"># 非交易</span>
-03/18  Form4   SVP  RSU歸屬+稅款賣出  -$1.8M   <span class="t-c"># 例行，非主動</span>
-03/14  Form4   CFO  10b5-1計劃賣出   -$3.2M   <span class="t-c"># 預設，非主動</span>
-02/28  Form4   VP   主動買入 +2500股 @$264    <span class="t-pos">↑ 增持信號</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-主動減持: <span class="t-pos">$0</span>   10b5-1/納稅賣出: -$5.0M   主動買入: <span class="t-pos">+$660k</span>
+          <div class="skill-hero-install">
+            <div class="skill-hero-install-label">Copy and send to any AI — it will walk you through install:</div>
+            <div class="skill-hero-install-cmd">
+              <code>{{ installCmd }}</code>
+              <button class="code-copy" @click="copyInstall" :title="copied ? 'Copied!' : 'Copy'">
+                <svg
+                  v-if="!copied"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                <svg
+                  v-else
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </button>
+            </div>
+            <a class="skill-hero-install-link" :href="localePath('/docs/mcp')">
+              View installation guide for each client
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M5 12h14" />
+                <path d="m12 5 7 7-7 7" />
+              </svg>
+            </a>
+          </div>
 
-<span class="t-p">$</span> longbridge capital-dist AAPL.US
+          <div class="skill-hero-agents">
+            <span
+              class="t-meta"
+              style="
+                font-size: 11.5px;
+                font-weight: 600;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                color: var(--lb-fg-3);
+              "
+              >Supported AI tools</span
+            >
+            <div class="skill-hero-agents-row">
+              <div v-for="a in SKILL_AGENTS" :key="a.name" class="ai-agent-chip">
+                <span class="ai-agent-mark" :style="{ background: a.color }">{{ a.mark }}</span>
+                {{ a.name }}
+              </div>
+              <div class="ai-agent-chip ai-agent-more">+ any Skill-compatible agent</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Demo -->
+    <section class="section" style="padding-top: 60px">
+      <div class="section-inner">
+        <div style="text-align: center; max-width: 560px; margin: 0 auto 36px">
+          <h2 class="h-section" style="margin-top: 0">See what Skill can do for you.</h2>
+          <p class="t-meta" style="margin-top: 12px; line-height: 1.55">
+            Pick a scenario to see your AI assistant in action.
+          </p>
+        </div>
 
-<span class="t-hd">AAPL 機構持倉變動 (QoQ)</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-共同基金 (Vanguard/BLK/Fidelity)     <span class="t-pos">+0.3%</span>
-對沖基金 (前20大)                     <span class="t-neg">-1.2%</span>   <span class="t-c"># 小幅減持</span>
-ETF 被動                             <span class="t-pos">+0.8%</span>
-養老金/主權基金                       <span class="t-dim">±0.0%</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-<span class="t-c"># 結論：內部人無主動減持，對沖基金微幅減倉屬常規。未見系統性撤退。</span>`)
-              : termHTML(`<span class="t-p">$</span> longbridge filings AAPL.US --type Form4 --count 5
+        <div class="skill-demo-shell">
+          <div class="skill-demo-agent-tabs">
+            <button
+              v-for="a in DEMO_AGENTS"
+              :key="a"
+              :class="['skill-demo-agent-tab', a === activeAgent ? 'is-active' : '']"
+              @click="activeAgent = a">
+              {{ a }}
+            </button>
+          </div>
 
-<span class="t-hd">AAPL 内幕交易 (Form 4) · 近 90 天</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-03/21  Form3   新任董事初始登记           <span class="t-c"># 非交易</span>
-03/18  Form4   SVP  RSU归属+税款卖出  -$1.8M   <span class="t-c"># 例行，非主动</span>
-03/14  Form4   CFO  10b5-1计划卖出   -$3.2M   <span class="t-c"># 预设，非主动</span>
-02/28  Form4   VP   主动买入 +2500股 @$264    <span class="t-pos">↑ 增持信号</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-主动减持: <span class="t-pos">$0</span>   10b5-1/纳税卖出: -$5.0M   主动买入: <span class="t-pos">+$660k</span>
+          <div class="skill-demo-body-grid">
+            <aside class="skill-demo-nav">
+              <button
+                v-for="(sc, i) in DEMO_SCENARIOS"
+                :key="sc.id"
+                :class="['skill-demo-nav-item', i === scenarioIdx ? 'is-active' : '']"
+                @click="scenarioIdx = i">
+                {{ sc.nav }}
+              </button>
+            </aside>
 
-<span class="t-p">$</span> longbridge capital-dist AAPL.US
+            <div class="skill-demo-main">
+              <h3 class="skill-demo-title">{{ activeScenario.title }}</h3>
+              <p class="skill-demo-desc">{{ activeScenario.desc }}</p>
 
-<span class="t-hd">AAPL 机构持仓变动 (QoQ)</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-共同基金 (Vanguard/BLK/Fidelity)     <span class="t-pos">+0.3%</span>
-对冲基金 (前20大)                     <span class="t-neg">-1.2%</span>   <span class="t-c"># 小幅减持</span>
-ETF 被动                             <span class="t-pos">+0.8%</span>
-养老金/主权基金                       <span class="t-dim">±0.0%</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-<span class="t-c"># 结论：内部人无主动减持，对冲基金微幅减仓属常规。未见系统性撤退。</span>`),
-          },
-        ],
-      },
-    },
+              <div class="skill-demo-prompt-label">Try asking</div>
+              <div class="skill-demo-prompt">
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  style="color: var(--lb-brand); flex-shrink: 0; margin-top: 3px">
+                  <path
+                    d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.949 49.949 0 0 0-9.902 3.912l-.003.002-.34.18a.75.75 0 0 1-.707 0A50.009 50.009 0 0 0 7.5 12.174v-.224c0-.131.067-.248.172-.311a54.614 54.614 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.129 56.129 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" />
+                  <path
+                    d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.285a.75.75 0 0 1-.46.71 47.878 47.878 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.877 47.877 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286A48.4 48.4 0 0 1 6 13.18v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.661a6.729 6.729 0 0 0 .551-1.608 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.668 2.25 2.25 0 0 0 2.12 0Z" />
+                </svg>
+                <span>{{ activeScenario.prompt }}</span>
+              </div>
 
-    // ── 5. 进阶下单
-    {
-      id: 'portfolio',
-      label: isEN.value ? 'Advanced Orders' : isHK.value ? '進階下單' : '进阶下单',
-      messages: [
-        {
-          role: 'user',
-          content: isEN.value
-            ? 'Set a trailing stop for TSLA — trigger a sell if it drops more than 8%. Show me the order details before executing.'
-            : isHK.value
-              ? '幫我給 TSLA 設一個追蹤止損，跌幅超過 8% 自動觸發賣出，執行前把訂單詳情給我確認'
-              : '帮我给 TSLA 设一个追踪止损，跌幅超过 8% 自动触发卖出，执行前把订单详情给我确认',
-        },
-        {
-          role: 'tool',
-          command:
-            'longbridge quote TSLA.US && longbridge submit-order TSLA.US --type trailing-stop --trail-pct 8 --side sell --qty all --preview',
-          content: '',
-        },
-        {
-          role: 'assistant',
-          rich: true,
-          content: `
-<div class="demo-scards" style="margin-bottom:14px">
-  <div class="demo-scard"><div class="demo-sl">TSLA.US</div><div class="demo-sv">$380.85</div><div class="demo-ss demo-neg">-$7.68 · -1.98%</div></div>
-  <div class="demo-scard"><div class="demo-sl">${
-    isEN.value ? 'Trail %' : hk ? '追蹤比例' : '追踪比例'
-  }</div><div class="demo-sv" style="color:#f59e0b">8.00%</div><div class="demo-ss demo-muted">${
-    isEN.value ? 'dynamic' : hk ? '動態跟蹤' : '动态跟踪'
-  }</div></div>
-  <div class="demo-scard"><div class="demo-sl">${
-    isEN.value ? 'Trigger (now)' : hk ? '當前觸發價' : '当前触发价'
-  }</div><div class="demo-sv demo-neg">$350.38</div><div class="demo-ss demo-muted">$380.85 × 0.92</div></div>
-</div>
-<div style="border:1px solid var(--vp-c-divider);border-radius:10px;overflow:hidden;margin-bottom:14px">
-  <div style="background:var(--vp-c-bg-mute);padding:8px 14px;font-size:12px;font-weight:700;color:var(--vp-c-text-2);letter-spacing:.04em">${
-    isEN.value ? 'Order Preview (pending confirmation)' : hk ? '訂單預覽（待確認）' : '订单预览（待确认）'
-  }</div>
-  <div style="padding:12px 14px;display:flex;flex-direction:column;gap:7px;font-size:13px">
-    <div style="display:flex;justify-content:space-between"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'Type' : hk ? '類型' : '类型'
-    }</span><span>${isEN.value ? 'Trailing Stop Order' : hk ? '追蹤止損單 (Trailing Stop)' : '追踪止损单 (Trailing Stop)'}</span></div>
-    <div style="display:flex;justify-content:space-between"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'Side' : '方向'
-    }</span><span class="demo-neg">${isEN.value ? 'SELL' : hk ? '賣出' : '卖出'}</span></div>
-    <div style="display:flex;justify-content:space-between"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'Qty' : hk ? '數量' : '数量'
-    }</span><span>${isEN.value ? 'All holdings' : hk ? '全部持倉' : '全部持仓'}</span></div>
-    <div style="display:flex;justify-content:space-between"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'Trail' : hk ? '追蹤參數' : '追踪参数'
-    }</span><span style="color:#f59e0b">8.00%</span></div>
-    <div style="display:flex;justify-content:space-between"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'Initial Trigger' : hk ? '初始觸發價' : '初始触发价'
-    }</span><span class="demo-neg">$350.38</span></div>
-    <div style="display:flex;justify-content:space-between"><span style="color:var(--vp-c-text-3)">${
-      isEN.value ? 'Execution' : hk ? '執行方式' : '执行方式'
-    }</span><span>${isEN.value ? 'Market order on trigger' : hk ? '觸發後市價成交' : '触发后市价成交'}</span></div>
-  </div>
-</div>
-<div class="demo-warn-box">🔒 <strong>${isEN.value ? 'Awaiting your confirmation' : hk ? '等待您的確認' : '等待您的确认'}</strong>——${
-            isEN.value
-              ? 'This is a preview only — not yet submitted. The trailing stop auto-adjusts upward as TSLA rises, locking in profits. A market sell triggers if price drops 8% from any high. Confirm to submit or reply to modify.'
-              : hk
-                ? '以上為訂單預覽，尚未提交。追蹤止損將隨 TSLA 價格上漲自動上調觸發價（鎖定利潤）；價格從最高點下跌超過 8% 時觸發市價賣單。請確認後執行，或回覆修改參數。'
-                : '以上为订单预览，尚未提交。追踪止损将随 TSLA 价格上涨自动上调触发价（锁定利润）；价格从最高点下跌超过 8% 时触发市价卖单。请确认后执行，或回复修改参数。'
-          }</div>`,
-        },
-      ],
-      clientMessages: {
-        claude: [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'Set a trailing stop for TSLA — trigger a sell if it drops more than 8%. Show me the order details before executing.'
-              : isHK.value
-                ? '幫我給 TSLA 設一個追蹤止損，跌幅超過 8% 自動觸發賣出，執行前把訂單詳情給我確認'
-                : '帮我给 TSLA 设一个追踪止损，跌幅超过 8% 自动触发卖出，执行前把订单详情给我确认',
-          },
-          {
-            role: 'tool',
-            command:
-              'longbridge quote TSLA.US && longbridge submit-order TSLA.US --type trailing-stop --trail-pct 8 --side sell --qty all --preview',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: `<div style="font-size:13.5px;line-height:1.8;margin-bottom:14px">${
-              isEN.value
-                ? "I've prepared a TSLA trailing stop order preview. Please review and confirm before I submit:"
-                : hk
-                  ? '已為您生成 TSLA 追蹤止損訂單預覽，請確認後再提交：'
-                  : '已为您生成 TSLA 追踪止损订单预览，请确认后再提交：'
-            }</div>
-<div style="border:1px solid var(--vp-c-brand-1);border-radius:10px;overflow:hidden;margin-bottom:14px;box-shadow:0 0 0 1px color-mix(in srgb,var(--vp-c-brand-1) 20%,transparent)">
-  <div style="background:color-mix(in srgb,var(--vp-c-brand-1) 10%,transparent);padding:8px 14px;font-size:13px;font-weight:700">${
-    isEN.value ? '✦ Trailing Stop · TSLA.US' : hk ? '✦ 追蹤止損 · TSLA.US' : '✦ 追踪止损 · TSLA.US'
-  }</div>
-  <div style="padding:12px 14px;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--vp-c-text-2)">
-    <div>${
-      isEN.value
-        ? '• Trail: <strong style="color:#f59e0b">8%</strong> (dynamic, tracks from position high)'
-        : hk
-          ? '• 追蹤比例：<strong style="color:#f59e0b">8%</strong>（從持倉最高價動態下移）'
-          : '• 追踪比例：<strong style="color:#f59e0b">8%</strong>（从持仓最高价动态下移）'
-    }</div>
-    <div>${
-      isEN.value
-        ? '• Current ref $380.85 → initial trigger <strong class="demo-neg">$350.38</strong>'
-        : hk
-          ? '• 當前參考價 $380.85 → 初始觸發價 <strong class="demo-neg">$350.38</strong>'
-          : '• 当前参考价 $380.85 → 初始触发价 <strong class="demo-neg">$350.38</strong>'
-    }</div>
-    <div>${isEN.value ? '• On trigger: market sell of entire TSLA position' : hk ? '• 觸發後以市價全量賣出 TSLA 持倉' : '• 触发后以市价全量卖出 TSLA 持仓'}</div>
-    <div>${
-      isEN.value
-        ? '• If TSLA rises to $410, trigger auto-adjusts to $377.20'
-        : hk
-          ? '• 如 TSLA 上漲至 $410，觸發價自動上調至 $377.20'
-          : '• 如 TSLA 上涨至 $410，触发价自动上调至 $377.20'
-    }</div>
-  </div>
-</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.8">🔒 ${
-              isEN.value
-                ? 'Order not submitted yet. Reply "confirm" to execute, or tell me if you want to adjust the trail % (e.g. 5%/10%), quantity, or switch to a limit stop.'
-                : hk
-                  ? '此訂單尚未提交。請回覆「確認」執行，或告訴我是否需要調整追蹤比例（如 5%/10%）、數量，或改為限價止損。'
-                  : '此订单尚未提交。请回复「确认」执行，或告诉我是否需要调整追踪比例（如 5%/10%）、数量，或改为限价止损。'
-            }</div>`,
-          },
-        ],
-        'claude-code': [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'TSLA trailing stop 8%, sell all, preview first'
-              : isHK.value
-                ? 'TSLA 追蹤止損 8%，賣出全部，提交前預覽'
-                : 'TSLA 追踪止损 8%，卖出全部，提交前预览',
-          },
-          {
-            role: 'tool',
-            command:
-              'longbridge quote TSLA.US && longbridge submit-order TSLA.US --type trailing-stop --trail-pct 8 --side sell --qty all --preview',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: hk
-              ? termHTML(`<span class="t-p">$</span> longbridge quote TSLA.US
+              <div class="skill-demo-chat">
+                <div class="skill-demo-chat-head">
+                  <span style="display: flex; gap: 6px">
+                    <span style="width: 10px; height: 10px; border-radius: 999px; background: #ff5f57" />
+                    <span style="width: 10px; height: 10px; border-radius: 999px; background: #febc2e" />
+                    <span style="width: 10px; height: 10px; border-radius: 999px; background: #28c840" />
+                  </span>
+                  <span style="margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--lb-fg-1)">{{
+                    activeAgent
+                  }}</span>
+                  <span style="margin-left: auto; font-size: 11px; color: var(--lb-fg-3)">skill: longbridge</span>
+                </div>
+                <div class="skill-demo-chat-body">
+                  <div class="skill-demo-bubble-user">{{ activeScenario.prompt }}</div>
+
+                  <div class="skill-demo-bubble-assistant">
+                    <p class="skill-demo-bubble-text">{{ activeScenario.summary }}</p>
+                    <table class="skill-demo-table">
+                      <thead>
+                        <tr>
+                          <th v-for="h in activeScenario.tableHead" :key="h">{{ h }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          v-for="(row, i) in activeScenario.tableRows"
+                          :key="i"
+                          :class="rowClass(row[row.length - 1] as string | boolean)">
+                          <td v-for="(cell, j) in row.slice(0, -1)" :key="j" :class="j === 0 ? 'is-sym' : ''">
+                            {{ cell }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
 
-TSLA.US  Tesla, Inc.    <span class="t-neg">$380.85  -$7.68 (-1.98%)</span>
+                  <div class="skill-demo-callout">{{ activeScenario.callout }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Skill Catalog -->
+    <section
+      class="section"
+      style="
+        padding-top: 32px;
+        background: var(--app-canvas);
+        border-top: 1px solid var(--app-card-stroke);
+        border-bottom: 1px solid var(--app-card-stroke);
+      ">
+      <div class="section-inner">
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            gap: 24px;
+            margin-bottom: 24px;
+          ">
+          <div style="max-width: 540px">
+            <span class="eyebrow">Skill catalog</span>
+            <h2 class="h-section" style="margin-top: 14px">100+ Skills, covering every move in your trading day.</h2>
+            <p class="t-meta" style="margin-top: 10px; line-height: 1.55">
+              Each Skill is a packaged set of tools, callable by any supported AI client. Click any card to see install
+              instructions and details.
+            </p>
+          </div>
+          <div class="skill-marketplace-card">
+            <div class="skill-marketplace-label">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style="color: var(--lb-brand)">
+                <path d="M12 2.5 13.4 9.2 20.5 10.5 13.6 12 12 18.5 10.4 12 3.5 10.5 10.6 9.2z" />
+              </svg>
+              <span>Available on Claude Code Plugin Marketplace</span>
+              <span class="skill-marketplace-pill">PLUGIN</span>
+            </div>
+            <code class="skill-marketplace-cmd">/plugin marketplace add longbridge/skills</code>
+            <code class="skill-marketplace-cmd">/plugin install longbridge@longbridge-skills</code>
+          </div>
+        </div>
 
-<span class="t-p">$</span> longbridge submit-order TSLA.US --type trailing-stop --trail-pct 8 --side sell --qty all --preview
+        <div class="skill-cat-tabs">
+          <button
+            v-for="c in SKILL_CATS"
+            :key="c.key"
+            :class="['skill-cat-tab', c.key === activeCat ? 'is-active' : '']"
+            @click="activeCat = c.key">
+            {{ c.key }}
+            <span class="skill-cat-count">{{ c.count }}</span>
+          </button>
+        </div>
 
-<span class="t-hd">訂單預覽 · 未提交</span>
-<span class="t-dim">──────────────────────────────────────────────</span>
-類型:     追蹤止損單 (Trailing Stop)
-方向:     <span class="t-neg">SELL</span>
-標的:     TSLA.US
-追蹤比例: <span class="t-hi">8.00%</span>
-參考價:   $380.85
-觸發價:   <span class="t-neg">$350.38</span>   <span class="t-c"># $380.85 × (1 − 0.08)</span>
-執行方式: 觸發後市價成交
-<span class="t-dim">──────────────────────────────────────────────</span>
-<span class="t-c"># 價格每上漲 $1，觸發價同步上移 $0.92</span>
-<span class="t-c"># 確認提交：longbridge submit-order ... --confirm</span>
-<span class="t-pos">🔒 等待確認，尚未提交</span>`)
-              : termHTML(`<span class="t-p">$</span> longbridge quote TSLA.US
+        <div class="skill-grid">
+          <a v-for="s in filteredSkills" :key="s.id" href="#" class="skill-card">
+            <div class="skill-card-head">
+              <h3 class="skill-card-name">{{ s.name }}</h3>
+              <code class="skill-card-id">{{ s.id }}</code>
+              <span v-if="s.tag" class="skill-card-tag">{{ s.tag }}</span>
+            </div>
+            <p class="skill-card-desc">{{ s.desc }}</p>
+            <div class="skill-card-example">
+              <svg
+                width="11"
+                height="11"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                style="color: var(--lb-brand); flex-shrink: 0">
+                <path d="M12 2.5 13.4 9.2 20.5 10.5 13.6 12 12 18.5 10.4 12 3.5 10.5 10.6 9.2z" />
+              </svg>
+              <span>"{{ s.example }}"</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Capability Reference -->
+    <section class="section">
+      <div class="section-inner">
+        <div style="max-width: 640px; margin-bottom: 40px">
+          <span class="eyebrow">Capability reference</span>
+          <h2 class="h-section" style="margin-top: 14px">Full coverage of Longbridge CLI commands and MCP tools.</h2>
+          <p class="t-meta" style="margin-top: 10px; line-height: 1.55">
+            Every capability below is available to your AI in plain conversation.
+          </p>
+        </div>
+        <div class="skill-cap-grid">
+          <div v-for="g in CAP_REFERENCE" :key="g.title" class="skill-cap-col">
+            <h3 class="h-card" style="font-size: 14px; color: var(--lb-fg-1)">{{ g.title }}</h3>
+            <ul>
+              <li v-for="item in g.items" :key="item">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  style="color: var(--lb-up); flex-shrink: 0; margin-top: 4px">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+                <span>{{ item }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- User Cases -->
+    <section class="section" style="padding-top: 48px">
+      <div class="section-inner">
+        <div style="text-align: left; max-width: 640px; margin-bottom: 32px">
+          <span class="eyebrow">SEE IT IN ACTION</span>
+          <h2 class="h-section" style="margin-top: 14px">Real user cases, real returns.</h2>
+          <p class="t-meta" style="margin-top: 10px; line-height: 1.55">
+            Hand-picked write-ups from the Longbridge community. From quick experiments to fully-deployed quant systems
+            — see what people are shipping with Skill.
+          </p>
+        </div>
 
-TSLA.US  Tesla, Inc.    <span class="t-neg">$380.85  -$7.68 (-1.98%)</span>
+        <div class="user-cases-grid">
+          <a href="https://longbridge.com/topics/39630019" target="_blank" rel="noreferrer" class="user-case-award">
+            <div class="user-case-award-tag">AWARD</div>
+            <div>
+              <h3 class="user-case-award-h">Each winner receives 10,000 Task Coins + 1 × AirPods 4</h3>
+              <p class="user-case-award-d">
+                Winning cases are showcased on the Longbridge Skill website — visible to users worldwide, including the
+                winner's ID and creative work.
+              </p>
+            </div>
+            <div class="user-case-award-rewards">
+              <div>
+                <div class="user-case-award-num">10,000</div>
+                <div class="user-case-award-l">TASK COINS</div>
+              </div>
+              <div>
+                <div class="user-case-award-num">AirPods 4</div>
+                <div class="user-case-award-l">PER WINNER</div>
+              </div>
+            </div>
+          </a>
 
-<span class="t-p">$</span> longbridge submit-order TSLA.US --type trailing-stop --trail-pct 8 --side sell --qty all --preview
-
-<span class="t-hd">订单预览 · 未提交</span>
-<span class="t-dim">──────────────────────────────────────────────</span>
-类型:     追踪止损单 (Trailing Stop)
-方向:     <span class="t-neg">SELL</span>
-标的:     TSLA.US
-追踪比例: <span class="t-hi">8.00%</span>
-参考价:   $380.85
-触发价:   <span class="t-neg">$350.38</span>   <span class="t-c"># $380.85 × (1 − 0.08)</span>
-执行方式: 触发后市价成交
-<span class="t-dim">──────────────────────────────────────────────</span>
-<span class="t-c"># 价格每上涨 $1，触发价同步上移 $0.92</span>
-<span class="t-c"># 确认提交：longbridge submit-order ... --confirm</span>
-<span class="t-pos">🔒 等待确认，尚未提交</span>`),
-          },
-        ],
-      },
-    },
-
-    // ── 6. 持仓复盘
-    {
-      id: 'coding',
-      label: isEN.value ? 'Portfolio Review' : isHK.value ? '持倉複盤' : '持仓复盘',
-      messages: [
-        {
-          role: 'user',
-          content: isEN.value
-            ? 'Review my portfolio this month: total P&L trend, top contributor, worst performer, US vs HK allocation?'
-            : isHK.value
-              ? '幫我複盤這個月的持倉表現：總盈虧趨勢如何，哪隻股票貢獻最大、哪隻表現最弱，組合裡美股和港股各佔多少？'
-              : '帮我复盘这个月的持仓表现：总盈亏趋势如何，哪只股票贡献最大、哪只表现最弱，组合里美股和港股各占多少？',
-        },
-        {
-          role: 'tool',
-          command: 'longbridge positions && longbridge profit --from 2026-03-01 --to 2026-03-24',
-          content: '',
-        },
-        {
-          role: 'assistant',
-          rich: true,
-          content: `
-<div class="demo-scards">
-  <div class="demo-scard"><div class="demo-sl">${
-    isEN.value ? 'March P&L' : hk ? '3 月總盈虧' : '3 月总盈亏'
-  }</div><div class="demo-sv demo-neg">-$4,287</div><div class="demo-ss demo-neg">-4.8%</div></div>
-  <div class="demo-scard"><div class="demo-sl">${
-    isEN.value ? 'Best' : '最佳'
-  }</div><div class="demo-sv demo-pos">9618.HK</div><div class="demo-ss demo-pos">+5.8%</div></div>
-  <div class="demo-scard"><div class="demo-sl">${
-    isEN.value ? 'Worst' : '最弱'
-  }</div><div class="demo-sv demo-neg">9988.HK</div><div class="demo-ss demo-neg">-9.7%</div></div>
-</div>
-<div class="demo-table-wrap"><table class="demo-table">
-  <thead><tr>
-    <th>${isEN.value ? 'Symbol' : hk ? '代碼' : '代码'}</th>
-    <th style="text-align:left">${isEN.value ? 'Name' : hk ? '名稱' : '名称'}</th>
-    <th>${isEN.value ? 'Mar 1' : hk ? '月初價' : '月初价'}</th>
-    <th>${isEN.value ? 'Now' : hk ? '當前價' : '当前价'}</th>
-    <th>${isEN.value ? 'MTD%' : hk ? '月漲跌' : '月涨跌'}</th>
-    <th>${isEN.value ? 'Contrib' : hk ? '貢獻' : '贡献'}</th>
-  </tr></thead>
-  <tbody>
-    <tr><td style="font-weight:700;color:var(--up-color)">9618.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'JD.com' : hk ? '京東集團' : '京东集团'
-    }</td><td class="demo-muted">HK$101.30</td><td>HK$107.20</td><td class="demo-pos">+5.8%</td><td class="demo-pos">+$412</td></tr>
-    <tr><td style="font-weight:700">NVDA.US</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">NVIDIA</td><td class="demo-muted">$182.48</td><td>$175.64</td><td class="demo-neg">-4.1%</td><td class="demo-neg">-$691</td></tr>
-    <tr><td style="font-weight:700">MSFT.US</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">Microsoft</td><td class="demo-muted">$398.55</td><td>$379.85</td><td class="demo-neg">-4.7%</td><td class="demo-neg">-$281</td></tr>
-    <tr><td style="font-weight:700">AAPL.US</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">Apple</td><td class="demo-muted">$264.72</td><td>$249.66</td><td class="demo-neg">-5.7%</td><td class="demo-neg">-$2,003</td></tr>
-    <tr><td style="font-weight:700">700.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Tencent' : hk ? '騰訊控股' : '腾讯控股'
-    }</td><td class="demo-muted">HK$163.20</td><td>HK$163.40</td><td class="demo-muted">+0.1%</td><td class="demo-muted">+$12</td></tr>
-    <tr><td style="font-weight:700">9988.HK</td><td style="text-align:left;font-size:11px;color:var(--vp-c-text-3)">${
-      isEN.value ? 'Alibaba' : '阿里巴巴'
-    }</td><td class="demo-muted">HK$136.80</td><td>HK$123.20</td><td class="demo-neg">-9.7%</td><td class="demo-neg">-$1,736</td></tr>
-  </tbody>
-</table></div>
-${portfolioPieSvg(cn, hk)}
-<div class="demo-hi-box"><strong>${isEN.value ? 'March Summary' : hk ? '3 月小結' : '3 月小结'}</strong>：${
-            isEN.value
-              ? 'AAPL (−5.7%, −$2,003) and 9988.HK (−9.7%, −$1,736) were the biggest drags — combined -$3,739, 87% of total loss. 9618.HK (+5.8%) was the only positive contributor. <strong style="color:var(--vp-c-text-1)">Portfolio is US-heavy (~78%). HK (~22%) is split: JD strong, Alibaba weak.</strong>'
-              : hk
-                ? 'AAPL（-5.7%，-$2,003）和 9988.HK（-9.7%，-$1,736）是本月最大拖累，合計貢獻 -$3,739，佔總虧損的 87%。9618.HK（+5.8%）是唯一正收益標的。<strong style="color:var(--vp-c-text-1)">組合美股比例偏高（約 78%），港股（約 22%）表現分化：京東強、阿里弱。</strong>'
-                : 'AAPL（-5.7%，-$2,003）和 9988.HK（-9.7%，-$1,736）是本月最大拖累，合计贡献 -$3,739，占总亏损的 87%。9618.HK（+5.8%）是唯一正收益标的。<strong style="color:var(--vp-c-text-1)">组合美股比例偏高（约 78%），港股（约 22%）表现分化：京东强、阿里弱。</strong>'
-          }</div>`,
-        },
-      ],
-      clientMessages: {
-        claude: [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'Review my portfolio this month: total P&L trend, top contributor, worst performer, US vs HK allocation?'
-              : isHK.value
-                ? '幫我複盤這個月的持倉表現：總盈虧趨勢如何，哪隻股票貢獻最大、哪隻表現最弱，組合裡美股和港股各佔多少？'
-                : '帮我复盘这个月的持仓表现：总盈亏趋势如何，哪只股票贡献最大、哪只表现最弱，组合里美股和港股各占多少？',
-          },
-          {
-            role: 'tool',
-            command: 'longbridge positions && longbridge profit --from 2026-03-01 --to 2026-03-24',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: `<div style="font-size:13.5px;line-height:1.8;margin-bottom:14px">${
-              isEN.value
-                ? "I pulled your portfolio data from March 1–24. Here's the full review:"
-                : hk
-                  ? '我調取了你 3 月 1 日到 3 月 24 日的持倉數據，以下是完整復盤：'
-                  : '我调取了你 3 月 1 日到 3 月 24 日的持仓数据，以下是完整复盘：'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">① ${
-              isEN.value ? 'Total P&L' : hk ? '總盈虧' : '总盈亏'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'March portfolio down -$4,287 (−4.8%), underperforming S&P 500 by ~1.2pp. Losses concentrated in mid-to-late month (3/10–3/20), coinciding with the broad tech selloff.'
-                : hk
-                  ? '3 月組合整體下跌 -$4,287（-4.8%），跑輸同期標普 500 約 1.2 個百分點。虧損主要集中在月中下旬（3/10–3/20），與美股科技股整體回調時間一致。'
-                  : '3 月组合整体下跌 -$4,287（-4.8%），跑输同期标普 500 约 1.2 个百分点。亏损主要集中在月中下旬（3/10–3/20），与美股科技股整体回调时间一致。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">② ${
-              isEN.value ? 'Contribution Breakdown' : hk ? '貢獻拆解' : '贡献拆解'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'Biggest drags: <strong class="demo-neg">AAPL (−$2,003)</strong> + <strong class="demo-neg">9988.HK (−$1,736)</strong> = 87% of losses. AAPL is largest position (~38% weight). 9618.HK was the sole positive contributor (+$412), bucking the trend.'
-                : hk
-                  ? '最大拖累：<strong class="demo-neg">AAPL (-$2,003)</strong> + <strong class="demo-neg">9988.HK (-$1,736)</strong>，合計 87% 虧損來源。AAPL 倉位最重（約 38% 組合權重），是主要風險敞口。9618.HK 是唯一正貢獻（+$412），表現逆勢。'
-                  : '最大拖累：<strong class="demo-neg">AAPL (-$2,003)</strong> + <strong class="demo-neg">9988.HK (-$1,736)</strong>，合计 87% 亏损来源。AAPL 仓位最重（约 38% 组合权重），是主要风险敞口。9618.HK 是唯一正贡献（+$412），表现逆势。'
-            }</div>
-<div style="font-size:12px;font-weight:700;color:var(--vp-c-text-2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px">③ ${
-              isEN.value ? 'Market Allocation' : hk ? '市場分佈' : '市场分布'
-            }</div>
-<div style="font-size:13px;color:var(--vp-c-text-2);line-height:1.85;margin-bottom:14px">${
-              isEN.value
-                ? 'US stocks ~78% (AAPL 38% + NVDA 20% + MSFT 20%), HK ~22% (9988, 700, 9618). Heavy US tech concentration amplified the drawdown during the correction.'
-                : hk
-                  ? '美股約佔 78%（AAPL 38% + NVDA 20% + MSFT 20%），港股約 22%（9988、700、9618）。集中在美股科技，在科技回調期間放大了下行幅度。'
-                  : '美股约占 78%（AAPL 38% + NVDA 20% + MSFT 20%），港股约 22%（9988、700、9618）。集中在美股科技，在科技回调期间放大了下行幅度。'
-            }</div>
-<div class="demo-ai-sig">${
-              isEN.value
-                ? 'Period: 2026-03-01 → 2026-03-24 · includes HKD/USD conversion'
-                : hk
-                  ? '數據區間：2026-03-01 → 2026-03-24 · 含 HKD/USD 匯率折算'
-                  : '数据区间：2026-03-01 → 2026-03-24 · 含 HKD/USD 汇率折算'
-            }</div>`,
-          },
-        ],
-        'claude-code': [
-          {
-            role: 'user',
-            content: isEN.value
-              ? 'Monthly portfolio review: P&L by position, allocation breakdown'
-              : isHK.value
-                ? '月度持倉複盤：各標的盈虧、倉位分佈'
-                : '月度持仓复盘：各标的盈亏、仓位分布',
-          },
-          {
-            role: 'tool',
-            command: 'longbridge positions && longbridge profit --from 2026-03-01 --to 2026-03-24',
-            content: '',
-          },
-          {
-            role: 'assistant',
-            rich: true,
-            content: hk
-              ? termHTML(`<span class="t-p">$</span> longbridge profit --from 2026-03-01 --to 2026-03-24
-
-<span class="t-hd">持倉複盤 · 2026-03-01 → 03-24</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-<span class="t-hd">Symbol     月初價       當前價    MTD%     貢獻$</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-<span class="t-pos">9618.HK</span>   HK$101.30   HK$107.20  <span class="t-pos">+5.8%</span>    <span class="t-pos">+$412</span>
-700.HK    HK$163.20   HK$163.40   <span class="t-dim">+0.1%</span>     <span class="t-dim">+$12</span>
-NVDA.US    $182.48     $175.64    <span class="t-neg">-4.1%</span>    <span class="t-neg">-$691</span>
-MSFT.US    $398.55     $379.85    <span class="t-neg">-4.7%</span>    <span class="t-neg">-$281</span>
-AAPL.US    $264.72     $249.66    <span class="t-neg">-5.7%</span>  <span class="t-neg">-$2,003</span>
-<span class="t-neg">9988.HK</span>   HK$136.80   HK$123.20   <span class="t-neg">-9.7%</span>  <span class="t-neg">-$1,736</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-3月總盈虧: <span class="t-neg">-$4,287 (-4.8%)</span>
-
-倉位分佈: 美股 <span class="t-hi">~78%</span> (AAPL 38%, NVDA 20%, MSFT 20%)
-         港股 <span class="t-hi">~22%</span> (9988, 700, 9618)
-<span class="t-c"># AAPL + 9988.HK 貢獻 87% 虧損，建議審視集中度風險</span>`)
-              : termHTML(`<span class="t-p">$</span> longbridge profit --from 2026-03-01 --to 2026-03-24
-
-<span class="t-hd">持仓复盘 · 2026-03-01 → 03-24</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-<span class="t-hd">Symbol     月初价       当前价    MTD%     贡献$</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-<span class="t-pos">9618.HK</span>   HK$101.30   HK$107.20  <span class="t-pos">+5.8%</span>    <span class="t-pos">+$412</span>
-700.HK    HK$163.20   HK$163.40   <span class="t-dim">+0.1%</span>     <span class="t-dim">+$12</span>
-NVDA.US    $182.48     $175.64    <span class="t-neg">-4.1%</span>    <span class="t-neg">-$691</span>
-MSFT.US    $398.55     $379.85    <span class="t-neg">-4.7%</span>    <span class="t-neg">-$281</span>
-AAPL.US    $264.72     $249.66    <span class="t-neg">-5.7%</span>  <span class="t-neg">-$2,003</span>
-<span class="t-neg">9988.HK</span>   HK$136.80   HK$123.20   <span class="t-neg">-9.7%</span>  <span class="t-neg">-$1,736</span>
-<span class="t-dim">──────────────────────────────────────────────────────</span>
-3月总盈亏: <span class="t-neg">-$4,287 (-4.8%)</span>
-
-仓位分布: 美股 <span class="t-hi">~78%</span> (AAPL 38%, NVDA 20%, MSFT 20%)
-         港股 <span class="t-hi">~22%</span> (9988, 700, 9618)
-<span class="t-c"># AAPL + 9988.HK 贡献 87% 亏损，建议审视集中度风险</span>`),
-          },
-        ],
-      },
-    },
-  ]
-})
-
-interface Client {
-  id: string
-  label: string
-  color: string
-}
-
-// ─── Capability groups ────────────────────────────────────────────────────────
-
-interface CapabilityItem {
-  desc: string
-}
-interface CapabilityGroup {
-  iconSvg: string
-  color: string
-  label: string
-  items: CapabilityItem[]
-}
-
-const capIcons: Record<string, string> = {
-  trending: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>`,
-  barChart: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`,
-  users: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`,
-  calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>`,
-  fileText: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>`,
-  layers: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>`,
-  briefcase: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>`,
-  zap: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`,
-}
-
-const capabilityGroups = computed<CapabilityGroup[]>(() =>
-  isEN.value
-    ? [
-        {
-          iconSvg: capIcons.trending,
-          color: '#00b8b8',
-          label: 'Real-time Market Data',
-          items: [
-            { desc: 'Live quotes for one or more symbols' },
-            { desc: 'Level 2 order book depth (bid/ask ladder)' },
-            { desc: 'Tick-by-tick recent trades' },
-            { desc: 'Intraday minute-by-minute price & volume' },
-            { desc: 'OHLCV candlesticks & historical date-range data' },
-            { desc: 'Intraday capital flow & distribution' },
-            { desc: 'Market sentiment temperature index (0–100)' },
-            { desc: 'Static reference info (lot size, shares, EPS…)' },
-            { desc: 'Option quotes & option chain' },
-            { desc: 'Warrant quotes & warrants by underlying' },
-          ],
-        },
-        {
-          iconSvg: capIcons.barChart,
-          color: '#4781ff',
-          label: 'Fundamentals & Research',
-          items: [
-            { desc: 'Income statement, balance sheet, cash flow' },
-            { desc: 'P/E, P/B, P/S, dividend yield + peer comparison' },
-            { desc: 'Analyst EPS forecasts' },
-            { desc: 'Revenue & profit consensus with beat/miss' },
-            { desc: 'Institution ratings & target price distribution' },
-            { desc: 'Calculated financial indexes (PE, PB, DPS rate…)' },
-            { desc: 'Institutional shareholders with position changes' },
-            { desc: 'Funds & ETFs that hold a given symbol' },
-            { desc: 'Dividend history & distribution details' },
-            { desc: 'SEC / regulatory filings with full Markdown content' },
-          ],
-        },
-        {
-          iconSvg: capIcons.calendar,
-          color: '#8b5cf6',
-          label: 'Calendar & Events',
-          items: [
-            { desc: 'Upcoming earnings events by symbol' },
-            { desc: 'High-importance macro data events' },
-            { desc: 'Upcoming dividend events by market' },
-            { desc: 'Trading session schedule & holiday calendar' },
-          ],
-        },
-        {
-          iconSvg: capIcons.fileText,
-          color: '#f59e0b',
-          label: 'News, Community & Watchlist',
-          items: [
-            { desc: 'Latest news articles for a symbol' },
-            { desc: 'Community discussion topics' },
-            { desc: 'Watchlist groups: list, create, update, delete' },
-          ],
-        },
-        {
-          iconSvg: capIcons.briefcase,
-          color: '#6366f1',
-          label: 'Account & Portfolio',
-          items: [
-            { desc: 'Stock positions across all sub-accounts' },
-            { desc: 'Fund positions across all sub-accounts' },
-            { desc: 'Account cash balance & financing info' },
-            { desc: 'Cash flow records (deposits, withdrawals, dividends)' },
-            { desc: 'Account statements (daily / monthly)' },
-            { desc: 'Exchange rates for all supported currencies' },
-          ],
-        },
-        {
-          iconSvg: capIcons.zap,
-          color: '#ef4444',
-          label: 'Trading',
-          items: [
-            { desc: 'Limit, market, or stop-limit orders' },
-            { desc: "List today's orders, view detail, executions" },
-            { desc: 'Cancel a pending order' },
-            { desc: 'Modify quantity or price of a pending order' },
-            { desc: 'Estimate max buy/sell quantity' },
-            { desc: 'Margin ratio requirements for a symbol' },
-          ],
-        },
-      ]
-    : [
-        {
-          iconSvg: capIcons.trending,
-          color: '#00b8b8',
-          label: isHK.value ? '實時行情' : '实时行情',
-          items: [
-            { desc: isHK.value ? '一個或多個標的實時報價' : '一个或多个标的实时报价' },
-            { desc: isHK.value ? 'Level 2 盤口深度（買賣盤階梯）' : 'Level 2 盘口深度（买卖盘阶梯）' },
-            { desc: isHK.value ? '逐筆成交記錄' : '逐笔成交记录' },
-            { desc: isHK.value ? '盤中分鐘線價格與成交量' : '盘中分钟线价格与成交量' },
-            { desc: isHK.value ? 'K 線 / 歷史區間 OHLCV 數據' : 'K 线 / 历史区间 OHLCV 数据' },
-            { desc: isHK.value ? '盤中資金流向與分布' : '盘中资金流向与分布' },
-            { desc: isHK.value ? '市場情緒溫度指數（0–100）' : '市场情绪温度指数（0–100）' },
-            { desc: isHK.value ? '靜態參考信息（手數、股本、EPS…）' : '静态参考信息（手数、股本、EPS…）' },
-            { desc: isHK.value ? '期權報價與期權鏈' : '期权报价与期权链' },
-            { desc: isHK.value ? '權證報價及掛鉤標的的權證列表' : '权证报价及挂钩标的的权证列表' },
-          ],
-        },
-        {
-          iconSvg: capIcons.barChart,
-          color: '#4781ff',
-          label: isHK.value ? '基本面研究' : '基本面研究',
-          items: [
-            {
-              desc: isHK.value
-                ? '財務三表（收入表、資產負債表、現金流量表）'
-                : '财务三表（收入表、资产负债表、现金流量表）',
-            },
-            { desc: isHK.value ? 'PE/PB/PS、股息率 + 同行估值對比' : 'PE/PB/PS、股息率 + 同行估值对比' },
-            { desc: isHK.value ? '分析師 EPS 預測' : '分析师 EPS 预测' },
-            {
-              desc: isHK.value
-                ? '營收與利潤一致性預期（含超預期/不及預期標注）'
-                : '营收与利润一致性预期（含超预期/不及预期标注）',
-            },
-            { desc: isHK.value ? '機構評級與目標價分布' : '机构评级与目标价分布' },
-            { desc: isHK.value ? '計算財務指標（PE、PB、股息率…）' : '计算财务指标（PE、PB、股息率…）' },
-            { desc: isHK.value ? '機構持股及變動追蹤' : '机构持股及变动追踪' },
-            { desc: isHK.value ? '持有某標的的基金與 ETF' : '持有某标的的基金与 ETF' },
-            { desc: isHK.value ? '股息歷史與派息詳情' : '股息历史与派息详情' },
-            { desc: isHK.value ? 'SEC / 監管申報原文（完整 Markdown）' : 'SEC / 监管申报原文（完整 Markdown）' },
-          ],
-        },
-        {
-          iconSvg: capIcons.calendar,
-          color: '#8b5cf6',
-          label: isHK.value ? '日曆與事件' : '日历与事件',
-          items: [
-            { desc: isHK.value ? '個股財報日曆' : '个股财报日历' },
-            { desc: isHK.value ? '高重要性宏觀數據事件' : '高重要性宏观数据事件' },
-            { desc: isHK.value ? '按市場的即將派息事件' : '按市场的即将派息事件' },
-            { desc: isHK.value ? '交易時段安排與假期日曆' : '交易时段安排与假期日历' },
-          ],
-        },
-        {
-          iconSvg: capIcons.fileText,
-          color: '#f59e0b',
-          label: isHK.value ? '新聞、社區與自選' : '新闻、社区与自选',
-          items: [
-            { desc: isHK.value ? '個股最新新聞資訊' : '个股最新新闻资讯' },
-            { desc: isHK.value ? '社區話題討論' : '社区话题讨论' },
-            { desc: isHK.value ? '自選股管理（查詢、新增、更新、刪除）' : '自选股管理（查询、新增、更新、删除）' },
-          ],
-        },
-        {
-          iconSvg: capIcons.briefcase,
-          color: '#6366f1',
-          label: isHK.value ? '賬戶與持倉' : '账户与持仓',
-          items: [
-            { desc: isHK.value ? '全子賬戶股票持倉' : '全子账户股票持仓' },
-            { desc: isHK.value ? '全子賬戶基金持倉' : '全子账户基金持仓' },
-            { desc: isHK.value ? '賬戶現金餘額與融資信息' : '账户现金余额与融资信息' },
-            { desc: isHK.value ? '資金流水（入金、出金、股息）' : '资金流水（入金、出金、股息）' },
-            { desc: isHK.value ? '賬戶對賬單（日報 / 月報）' : '账户对账单（日报 / 月报）' },
-            { desc: isHK.value ? '各幣種匯率' : '各币种汇率' },
-          ],
-        },
-        {
-          iconSvg: capIcons.zap,
-          color: '#ef4444',
-          label: isHK.value ? '交易執行' : '交易执行',
-          items: [
-            { desc: isHK.value ? '限價、市價、止損限價下單' : '限价、市价、止损限价下单' },
-            { desc: isHK.value ? '訂單列表、詳情、成交記錄' : '订单列表、详情、成交记录' },
-            { desc: isHK.value ? '撤銷待成交訂單' : '撤销待成交订单' },
-            { desc: isHK.value ? '修改訂單數量或價格' : '修改订单数量或价格' },
-            { desc: isHK.value ? '最大可買賣數量估算' : '最大可买卖数量估算' },
-            { desc: isHK.value ? '標的保證金比例' : '标的保证金比例' },
-          ],
-        },
-      ]
-)
-
-// SVG icons for each client (Simple Icons paths, viewBox="0 0 24 24")
-const clientIcons: Record<string, string> = {
-  openclaw: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="currentColor" width="15" height="15"><path d="M60 10 C30 10 15 35 15 55 C15 75 30 95 45 100 L45 110 L55 110 L55 100 C55 100 60 102 65 100 L65 110 L75 110 L75 100 C90 95 105 75 105 55 C105 35 90 10 60 10Z"/><path d="M20 45 C5 40 0 50 5 60 C10 70 20 65 25 55 C28 48 25 45 20 45Z"/><path d="M100 45 C115 40 120 50 115 60 C110 70 100 65 95 55 C92 48 95 45 100 45Z"/></svg>`,
-  chatgpt: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="15" height="15"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.19 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.376-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>`,
-  claude: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248 248" fill="currentColor" width="15" height="15"><path d="M52.4285 162.873L98.7844 136.879L99.5485 134.602L98.7844 133.334H96.4921L88.7237 132.862L62.2346 132.153L39.3113 131.207L17.0249 130.026L11.4214 128.844L6.2 121.873L6.7094 118.447L11.4214 115.257L18.171 115.847L33.0711 116.911L55.485 118.447L71.6586 119.392L95.728 121.873H99.5485L100.058 120.337L98.7844 119.392L97.7656 118.447L74.5877 102.732L49.4995 86.1905L36.3823 76.62L29.3779 71.7757L25.8121 67.2858L24.2839 57.3608L30.6515 50.2716L39.3113 50.8623L41.4763 51.4531L50.2636 58.1879L68.9842 72.7209L93.4357 90.6804L97.0015 93.6343L98.4374 92.6652L98.6571 91.9801L97.0015 89.2625L83.757 65.2772L69.621 40.8192L63.2534 30.6579L61.5978 24.632C60.9565 22.1032 60.579 20.0111 60.579 17.4246L67.8381 7.49965L71.9133 6.19995L81.7193 7.49965L85.7946 11.0443L91.9074 24.9865L101.714 46.8451L116.996 76.62L121.453 85.4816L123.873 93.6343L124.764 96.1155H126.292V94.6976L127.566 77.9197L129.858 57.3608L132.15 30.8942L132.915 23.4505L136.608 14.4708L143.994 9.62643L149.725 12.344L154.437 19.0788L153.8 23.4505L150.998 41.6463L145.522 70.1215L141.957 89.2625H143.994L146.414 86.7813L156.093 74.0206L172.266 53.698L179.398 45.6635L187.803 36.802L193.152 32.5484H203.34L210.726 43.6549L207.415 55.1159L196.972 68.3492L188.312 79.5739L175.896 96.2095L168.191 109.585L168.882 110.689L170.738 110.53L198.755 104.504L213.91 101.787L231.994 98.7149L240.144 102.496L241.036 106.395L237.852 114.311L218.495 119.037L195.826 123.645L162.07 131.592L161.696 131.893L162.137 132.547L177.36 133.925L183.855 134.279H199.774L229.447 136.524L237.215 141.605L241.8 147.867L241.036 152.711L229.065 158.737L213.019 154.956L175.45 145.977L162.587 142.787H160.805V143.85L171.502 154.366L191.242 172.089L215.82 195.011L217.094 200.682L213.91 205.172L210.599 204.699L188.949 188.394L180.544 181.069L161.696 165.118H160.422V166.772L164.752 173.152L187.803 207.771L188.949 218.405L187.294 221.832L181.308 223.959L174.813 222.777L161.187 203.754L147.305 182.486L136.098 163.345L134.745 164.2L128.075 235.42L125.019 239.082L117.887 241.8L111.902 237.31L108.718 229.984L111.902 215.452L115.722 196.547L118.779 181.541L121.58 162.873L123.291 156.636L123.14 156.219L121.773 156.449L107.699 175.752L86.304 204.699L69.3663 222.777L65.291 224.431L58.2867 220.768L58.9235 214.27L62.8713 208.48L86.304 178.705L100.44 160.155L109.551 149.507L109.462 147.967L108.959 147.924L46.6977 188.512L35.6182 189.93L30.7788 185.44L31.4156 178.115L33.7079 175.752L52.4285 162.873Z"/></svg>`,
-  'claude-code': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
-  codex: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="15" height="15"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
-}
-
-// All clients shown in hero chip row (popularity order)
-const heroClients: Client[] = [
-  { id: 'openclaw', label: 'OpenClaw', color: '#f59e0b' },
-  { id: 'chatgpt', label: 'ChatGPT', color: '#10b981' },
-  { id: 'claude', label: 'Claude', color: '#f97316' },
-  { id: 'claude-code', label: 'Claude Code', color: '#818cf8' },
-  { id: 'codex', label: 'Codex', color: '#94a3b8' },
-]
-
-// Clients available in demo tabs
-const clients: Client[] = [
-  { id: 'openclaw', label: 'OpenClaw', color: '#f59e0b' },
-  { id: 'chatgpt', label: 'ChatGPT', color: '#10b981' },
-  { id: 'claude', label: 'Claude', color: '#f97316' },
-  { id: 'claude-code', label: 'Claude Code', color: '#818cf8' },
-]
-
-// ─── Demo animation state ─────────────────────────────────────────────────────
-
-const activeScenario = ref('monitor')
-const activeClient = ref('openclaw')
-
-// Visible messages for the chat window (built up by animation)
-const phase = ref<'idle' | 'user' | 'tool' | 'assistant'>('idle')
-const isRichResponse = ref(false)
-const visibleUserMsg = ref('')
-const visibleToolCmd = ref('')
-const visibleAssistantMsg = ref('')
-const toolExpanded = ref(false)
-
-let animTimer: ReturnType<typeof setTimeout> | null = null
-
-function clearAnim() {
-  if (animTimer) clearTimeout(animTimer)
-  animTimer = null
-  phase.value = 'idle'
-  isRichResponse.value = false
-  visibleUserMsg.value = ''
-  visibleToolCmd.value = ''
-  visibleAssistantMsg.value = ''
-  toolExpanded.value = false
-}
-
-function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => {
-    animTimer = setTimeout(resolve, ms)
-  })
-}
-
-async function typewrite(target: { value: string }, text: string, speed = 5) {
-  for (let i = 0; i < text.length; i++) {
-    if (phase.value === 'idle') return // aborted
-    target.value = text.slice(0, i + 1)
-    await delay(speed)
-  }
-}
-
-async function runAnimation() {
-  clearAnim()
-  const msgs = currentMessages.value
-  if (!msgs.length) return
-
-  const [userMsg, toolMsg, assistantMsg] = msgs
-
-  await delay(50)
-
-  // Phase 1: user message appears
-  phase.value = 'user'
-  await typewrite(visibleUserMsg, userMsg.content, 8)
-
-  await delay(100)
-
-  // Phase 2: tool call appears
-  phase.value = 'tool'
-  toolExpanded.value = true
-  await typewrite(visibleToolCmd, toolMsg.command ?? '', 5)
-  await delay(150)
-  toolExpanded.value = false
-
-  await delay(60)
-
-  // Phase 3: assistant response
-  isRichResponse.value = !!assistantMsg.rich
-  phase.value = 'assistant'
-  if (assistantMsg.rich) {
-    // Rich HTML content: show at once (fade-in via CSS)
-    visibleAssistantMsg.value = assistantMsg.content
-  } else {
-    await typewrite(visibleAssistantMsg, assistantMsg.content, 10)
-  }
-}
-
-watch([activeScenario, activeClient], () => {
-  clearAnim()
-  phase.value = 'idle'
-  runAnimation()
-})
-
-onMounted(() => {
-  runAnimation()
-})
-
-onUnmounted(() => {
-  clearAnim()
-})
-
-// ─── Copy button ──────────────────────────────────────────────────────────────
-
-const npxCommand = 'npx skills add longbridge/skills -g'
-const openclawCommand = '/skills add longbridge/skills'
-import { siteHostname } from '../utils/region'
-const oneLinerCommand = computed(() =>
-  isEN.value
-    ? `Install Longbridge AI toolkit following the guide: \n${siteHostname}/skill/install.md`
-    : isHK.value
-      ? `根據指引安裝 Longbridge AI toolkit：\n${siteHostname}/skill/install.md`
-      : `根据指引安装 Longbridge AI toolkit：\n${siteHostname}/skill/install.md`
-)
-
-const copiedNpx = ref(false)
-const copiedOpenclaw = ref(false)
-const copiedOneLiner = ref(false)
-
-async function copyText(text: string, indicator: { value: boolean }) {
-  await navigator.clipboard.writeText(text)
-  indicator.value = true
-  setTimeout(() => (indicator.value = false), 1500)
-}
-
-const copyOneLiner = () => copyText(oneLinerCommand.value, copiedOneLiner)
-const copyNpxCmd = () => copyText(npxCommand, copiedNpx)
-
-// ─── Skills Catalog ───────────────────────────────────────────────────────────
-
-import type { SkillEntry } from './skill-catalog/types'
-
-type CatalogSkill = SkillEntry & { tag?: string }
-
-const catalogLocale = computed(() => (isEN.value ? enLocale : isHK.value ? zhHKLocale : zhCNLocale))
-
-const CATALOG_SKILLS = computed<CatalogSkill[]>(() =>
-  catalogLocale.value.skills.map((s) => ({
-    ...s,
-    tag: s.tagType ? catalogLocale.value.ui.tagLabels[s.tagType] : undefined,
-  }))
-)
-
-const CATALOG_CATS = computed(() =>
-  Object.entries(catalogLocale.value.ui.catLabels).map(([id, label]) => ({ id, label }))
-)
-
-const activeCatalogCat = ref('all')
-const catalogQuery = ref('')
-const copiedPluginCmd1 = ref(false)
-function copyPluginCmd1() {
-  navigator.clipboard?.writeText('/plugin marketplace add longbridge/skills\n/plugin install longbridge@longbridge-skills')
-  copiedPluginCmd1.value = true
-  setTimeout(() => (copiedPluginCmd1.value = false), 1400)
-}
-const catalogExpanded = ref(false)
-const openCatalogSkill = ref<CatalogSkill | null>(null)
-const catalogCols = ref(3)
-const installClient = ref('cli')
-const modalCopiedKey = ref<string | null>(null)
-
-const _SVG_COMMON = 'width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#00b8b8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"'
-const CAT_ICONS: Record<string, string> = {
-  meta: `<svg ${_SVG_COMMON}><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>`,
-  quote: `<svg ${_SVG_COMMON}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`,
-  research: `<svg ${_SVG_COMMON}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>`,
-  derivative: `<svg ${_SVG_COMMON}><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>`,
-  discovery: `<svg ${_SVG_COMMON}><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>`,
-  trade: `<svg ${_SVG_COMMON}><path d="m17 1 4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="m7 23-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>`,
-  portfolio: `<svg ${_SVG_COMMON}><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>`,
-}
-
-function handleModalCopy(text: string, key: string) {
-  navigator.clipboard?.writeText(text)
-  modalCopiedKey.value = key
-  setTimeout(() => {
-    modalCopiedKey.value = null
-  }, 1400)
-}
-
-const INSTALL_CLIENTS = computed(() => {
-  const pkg = openCatalogSkill.value?.pkg ?? ''
-  return {
-    cli: {
-      label: 'CLI',
-      cmd: `npx skills add longbridge/skills -g --skill ${pkg}`,
-      uninstall: `npx skills remove ${pkg} -g`,
-      upgrade: `npx skills update ${pkg} -g`,
-      verify: `npx skills list | grep ${pkg}`,
-    },
-    claude: {
-      label: 'Claude Code',
-      cmd: `claude skill add longbridge/skills -g --skill ${pkg}`,
-      uninstall: `claude skill remove ${pkg} -g`,
-      upgrade: `claude skill update ${pkg} -g`,
-      verify: `claude skill list | grep ${pkg}`,
-    },
-    cursor: {
-      label: 'Cursor',
-      cmd: `cursor skill add longbridge/skills -g --skill ${pkg}`,
-      uninstall: `cursor skill remove ${pkg} -g`,
-      upgrade: `cursor skill update ${pkg} -g`,
-      verify: `cursor skill list | grep ${pkg}`,
-    },
-    codex: {
-      label: 'Codex',
-      cmd: `codex skill add longbridge/skills -g --skill ${pkg}`,
-      uninstall: `codex skill remove ${pkg} -g`,
-      upgrade: `codex skill update ${pkg} -g`,
-      verify: `codex skill list | grep ${pkg}`,
-    },
-    zed: {
-      label: 'Zed',
-      cmd: `zed skill add longbridge/skills -g --skill ${pkg}`,
-      uninstall: `zed skill remove ${pkg} -g`,
-      upgrade: `zed skill update ${pkg} -g`,
-      verify: `zed skill list | grep ${pkg}`,
-    },
-    manual: {
-      label: isEN.value ? 'Manual' : '手动安装',
-      cmd: `# 1. Download ZIP\ncurl -LO https://open.longbridge.com/skill/${pkg}.zip\n# 2. Extract\nunzip ${pkg}.zip -d ~/.claude/skills/\n# 3. Restart AI client`,
-      uninstall: `rm -rf ~/.claude/skills/${pkg}/`,
-      upgrade: `curl -LO https://open.longbridge.com/skill/${pkg}.zip\nunzip -o ${pkg}.zip -d ~/.claude/skills/`,
-      verify: `ls ~/.claude/skills/${pkg}/`,
-    },
-  } as Record<string, { label: string; cmd: string; uninstall: string; upgrade: string; verify: string }>
-})
-
-const tabsEl = ref<HTMLElement | null>(null)
-const indicatorStyle = ref({ left: '0px', width: '0px' })
-function updateIndicator() {
-  if (!tabsEl.value) return
-  const active = tabsEl.value.querySelector<HTMLElement>('.sc-tab--active')
-  if (!active) return
-  const base = tabsEl.value.getBoundingClientRect()
-  const rect = active.getBoundingClientRect()
-  indicatorStyle.value = { left: rect.left - base.left + 'px', width: rect.width + 'px' }
-  const wrap = tabsEl.value.parentElement
-  if (wrap) {
-    const targetScroll = active.offsetLeft - wrap.clientWidth / 2 + active.offsetWidth / 2
-    wrap.scrollTo({ left: targetScroll, behavior: 'smooth' })
-  }
-}
-watch(activeCatalogCat, () => nextTick(updateIndicator))
-
-function updateCatalogCols() {
-  if (typeof window === 'undefined') return
-  const w = window.innerWidth
-  catalogCols.value = w <= 600 ? 1 : w <= 960 ? 2 : 3
-}
-
-function onModalKey(e: KeyboardEvent) {
-  if (e.key === 'Escape') openCatalogSkill.value = null
-}
-onMounted(() => {
-  updateCatalogCols()
-  window.addEventListener('resize', updateCatalogCols)
-  window.addEventListener('keydown', onModalKey)
-  nextTick(updateIndicator)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', updateCatalogCols)
-  window.removeEventListener('keydown', onModalKey)
-})
-
-watch([activeCatalogCat, catalogQuery], () => {
-  catalogExpanded.value = false
-})
-watch(openCatalogSkill, () => {
-  installClient.value = 'cli'
-  modalCopiedKey.value = null
-})
-
-const filteredCatalogSkills = computed(() => {
-  const q = catalogQuery.value.trim().toLowerCase()
-  return CATALOG_SKILLS.value.filter((s) => {
-    if (q) return (s.pkg + ' ' + s.name + ' ' + s.desc).toLowerCase().includes(q)
-    return activeCatalogCat.value === 'all' || s.cat === activeCatalogCat.value
-  })
-})
-
-const catalogCap = computed(() => catalogCols.value * 3)
-
-const shownCatalogSkills = computed(() =>
-  catalogExpanded.value || filteredCatalogSkills.value.length <= catalogCap.value
-    ? filteredCatalogSkills.value
-    : filteredCatalogSkills.value.slice(0, catalogCap.value)
-)
-
-const catalogCounts = computed(() =>
-  Object.fromEntries(
-    CATALOG_CATS.value.map((c) => [
-      c.id,
-      c.id === 'all' ? CATALOG_SKILLS.value.length : CATALOG_SKILLS.value.filter((s) => s.cat === c.id).length,
-    ])
-  )
-)
-
-
-function triggerRipple(event: MouseEvent, el: HTMLElement) {
-  const ripple = el.querySelector<HTMLElement>('.sc-ripple')
-  if (!ripple) return
-  const r = el.getBoundingClientRect()
-  const x = event.clientX - r.left
-  const y = event.clientY - r.top
-  ripple.style.left = x + 'px'
-  ripple.style.top = y + 'px'
-  ripple.getAnimations().forEach((a) => a.cancel())
-  ripple.animate(
-    [
-      { width: '0px', height: '0px', opacity: 0.6 },
-      { width: '600px', height: '600px', opacity: 0 },
-    ],
-    { duration: 400, easing: 'ease-out', fill: 'forwards' }
-  )
-}
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-const currentClient = computed(() => clients.find((c) => c.id === activeClient.value) ?? clients[0])
-
-const currentMessages = computed(() => {
-  const scenario = demoScenarios.value.find((s) => s.id === activeScenario.value)
-  if (!scenario) return []
-  return scenario.clientMessages?.[activeClient.value] ?? scenario.messages
-})
-
-const currentScenarioCard = computed(
-  () => scenarioCards.value.find((c) => c.id === activeScenario.value) ?? scenarioCards.value[0]
-)
-
-const currentExample = computed(() => {
-  const card = currentScenarioCard.value
-  if (activeClient.value === 'claude-code' && card.claudeCodeExample) {
-    return card.claudeCodeExample
-  }
-  return card.example
-})
-</script>
-
-<template>
-  <!-- ─── Hero ──────────────────────────────────────────────────────────────── -->
-  <div class="skill-hero border-b border-[var(--vp-c-divider)]">
-    <div class="max-w-3xl mx-auto px-6 py-16 text-center">
-      <div class="skill-badge">{{ t.badge.value }}</div>
-      <h1 class="skill-title">
-        {{ t.heroTitle1.value }}
-      </h1>
-      <div class="skill-title1">{{ t.heroTitle2.value }}</div>
-
-      <p class="skill-subtitle">{{ t.heroSubtitle.value }}</p>
+          <a v-for="(c, i) in USER_CASES" :key="c.id" :href="c.href" target="_blank" rel="noreferrer" class="user-case">
+            <div class="user-case-head">
+              <span class="user-case-idx">{{ String(i + 1).padStart(2, '0') }}</span>
+              <span class="user-case-read">
+                Read case
+                <svg
+                  width="11"
+                  height="11"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                  <polyline points="15 3 21 3 21 9" />
+                  <line x1="10" y1="14" x2="21" y2="3" />
+                </svg>
+              </span>
+            </div>
+            <h3 class="user-case-title">{{ c.title }}</h3>
+            <p class="user-case-desc">{{ c.desc }}</p>
+            <div class="user-case-metric">
+              <span class="user-case-metric-v" :style="{ color: c.accent }">{{ c.metric }}</span>
+              <span class="user-case-metric-l">{{ c.metricLabel }}</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+
+    <!-- Get Started -->
+    <section class="section" style="border-top: 1px solid var(--app-card-stroke); background: var(--app-canvas)">
+      <div class="section-inner">
+        <div style="text-align: center; max-width: 560px; margin: 0 auto">
+          <span class="eyebrow">Get started</span>
+          <h2 class="h-section" style="margin-top: 14px">Choose your AI tool</h2>
+        </div>
+        <div class="skill-getstarted-grid">
+          <div class="skill-getstarted-card">
+            <div
+              class="skill-getstarted-icon"
+              style="background: color-mix(in srgb, var(--lb-brand) 12%, transparent); color: var(--lb-brand)">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+              </svg>
+            </div>
+            <h3 class="h-card" style="margin-top: 16px">Copy and send to any AI</h3>
+            <p class="t-meta" style="margin-top: 8px; line-height: 1.55; flex: 1">
+              Paste this message into any AI assistant (Claude, ChatGPT, Cursor) and it will guide you through the
+              installation.
+            </p>
+            <div class="skill-getstarted-cmd">
+              <code>{{ installCmd }}</code>
+              <button class="code-copy" @click="copyGetStarted" :title="copiedGetStarted ? 'Copied!' : 'Copy'">
+                <svg
+                  v-if="!copiedGetStarted"
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                <svg
+                  v-else
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
 
-      <!-- CTA block -->
-      <div class="skill-cta">
-        <p class="skill-cta-hint">{{ t.ctaHint.value }}</p>
-        <!-- One-liner -->
-        <div class="skill-cmd-block skill-cmd-block--prominent">
-          <pre class="skill-cmd-text">{{ oneLinerCommand }}</pre>
-          <div class="skill-copy-wrap">
-            <button class="skill-copy-btn" @click="copyOneLiner">
+          <div class="skill-getstarted-card recommended">
+            <span class="skill-getstarted-badge">Recommended</span>
+            <div
+              class="skill-getstarted-icon"
+              style="background: color-mix(in srgb, var(--lb-up) 14%, transparent); color: var(--lb-up)">
               <svg
-                v-if="!copiedOneLiner"
-                xmlns="http://www.w3.org/2000/svg"
-                width="13"
-                height="13"
+                width="18"
+                height="18"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
+                stroke-width="1.6"
                 stroke-linecap="round"
                 stroke-linejoin="round">
-                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+                <polygon points="12 2 2 7 12 12 22 7 12 2" />
+                <polyline points="2 17 12 22 22 17" />
+                <polyline points="2 12 12 17 22 12" />
               </svg>
+            </div>
+            <h3 class="h-card" style="margin-top: 16px">Download Skill ZIP</h3>
+            <p class="t-meta" style="margin-top: 8px; line-height: 1.55; flex: 1">
+              Extract and import into Claude, ChatGPT, Cursor and other AI clients. Includes the full Skill manifest.
+            </p>
+            <a class="btn btn-primary" style="margin-top: 14px; align-self: flex-start" href="#">
               <svg
-                v-else
-                xmlns="http://www.w3.org/2000/svg"
                 width="13"
                 height="13"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2.5"
+                stroke-width="1.6"
                 stroke-linecap="round"
                 stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              {{ copiedOneLiner ? t.copied.value : t.copy.value }}
-            </button>
-            <span class="skill-copy-tooltip" :class="{ 'skill-copy-tooltip--show': copiedOneLiner }">{{
-              t.copied.value
-            }}</span>
-          </div>
-        </div>
-
-        <!-- Guide link -->
-        <a :href="installGuideUrl" class="skill-guide-link">{{ t.installGuide.value }}</a>
-      </div>
-
-      <!-- Client labels -->
-      <div class="skill-clients-label">{{ t.supportedBy.value }}</div>
-      <div class="skill-clients-row">
-        <span v-for="c in heroClients" :key="c.id" class="skill-client-chip">
-          <span v-if="clientIcons[c.id]" class="skill-client-icon" v-html="clientIcons[c.id]" />
-          {{ c.label }}
-        </span>
-        <span class="skill-client-more">
-          {{ isEN ? 'Cursor, Zed, and more...' : 'Cursor, Zed, 更多...' }}
-        </span>
-      </div>
-    </div>
-  </div>
-
-  <!-- ─── Demo ──────────────────────────────────────────────────────────────── -->
-  <div class="skill-section skill-section-dark">
-    <div class="skill-section-inner">
-      <div class="skill-section-header">
-        <h2 class="skill-section-title">{{ t.demoTitle.value }}</h2>
-        <div class="skill-section-sub">{{ t.demoSubtitle.value }}</div>
-      </div>
-
-      <ClientOnly>
-        <div class="skill-demo">
-          <!-- Left: scenario list -->
-          <div class="skill-demo-scenarios">
-            <button
-              v-for="s in demoScenarios"
-              :key="s.id"
-              class="skill-demo-scenario-btn"
-              :class="{ 'skill-demo-scenario-active': activeScenario === s.id }"
-              @click="activeScenario = s.id">
-              {{ s.label }}
-            </button>
-          </div>
-
-          <!-- Right: client tabs + chat window -->
-          <div class="skill-demo-panel">
-            <!-- Client tabs -->
-            <div class="skill-demo-clients">
-              <button
-                v-for="c in clients"
-                :key="c.id"
-                class="skill-demo-client-tab"
-                :class="{ 'skill-demo-client-active': activeClient === c.id }"
-                @click="activeClient = c.id">
-                {{ c.label }}
-              </button>
-            </div>
-
-            <!-- Ability info + Try bridge (above chat window) -->
-            <div class="skill-chat-info">
-              <div class="skill-chat-ability">
-                <h3 class="skill-chat-ability-title">{{ currentScenarioCard.title }}</h3>
-                <p class="skill-chat-ability-desc">{{ currentScenarioCard.desc }}</p>
-              </div>
-              <div class="skill-chat-try-bridge">
-                <span class="skill-chat-try-label">{{ isEN ? 'Try asking' : isHK ? '試試這樣問' : '试试这样问' }}</span>
-                <div class="skill-chat-prompt-card">
-                  <svg
-                    class="skill-chat-prompt-quote skill-chat-prompt-quote--open"
-                    width="14"
-                    height="11"
-                    viewBox="0 0 14 11"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M0 11V6.76c0-1.307.224-2.464.672-3.472C1.12 2.28 1.867 1.4 2.912.648L4.312 2c-.64.512-1.107 1.056-1.4 1.632C2.619 4.208 2.456 4.9 2.424 5.72H4.44V11H0Zm7.56 0V6.76c0-1.307.224-2.464.672-3.472C8.68 2.28 9.427 1.4 10.472.648L11.872 2c-.64.512-1.107 1.056-1.4 1.632-.293.576-.456 1.268-.488 2.088H12V11H7.56Z"
-                      fill="currentColor" />
-                  </svg>
-                  <span class="skill-chat-prompt-text">{{ currentExample }}</span>
-                  <svg
-                    class="skill-chat-prompt-quote skill-chat-prompt-quote--close"
-                    width="14"
-                    height="11"
-                    viewBox="0 0 14 11"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                      d="M14 0v4.24c0 1.307-.224 2.464-.672 3.472-.448 1.008-1.195 1.888-2.24 2.64L9.688 9c.64-.512 1.107-1.056 1.4-1.632.293-.576.456-1.268.488-2.088H9.56V0H14Zm-7.56 0v4.24c0 1.307-.224 2.464-.672 3.472-.448 1.008-1.195 1.888-2.24 2.64L2.128 9c.64-.512 1.107-1.056 1.4-1.632.293-.576.456-1.268.488-2.088H2V0h4.44Z"
-                      fill="currentColor" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-
-            <!-- Chat window -->
-            <div class="skill-chat-window">
-              <!-- Chrome bar -->
-              <div class="skill-chat-chrome">
-                <div class="skill-chat-traffic">
-                  <span class="skill-chat-tl tl-r" />
-                  <span class="skill-chat-tl tl-y" />
-                  <span class="skill-chat-tl tl-g" />
-                </div>
-                <span class="skill-chat-chrome-title">{{ currentClient.label }}</span>
-              </div>
-
-              <!-- Messages -->
-              <div class="skill-chat-body">
-                <!-- User message -->
-                <div v-if="phase !== 'idle'" class="skill-chat-user">
-                  <div class="skill-chat-bubble skill-chat-bubble-user">
-                    {{ visibleUserMsg }}
-                  </div>
-                </div>
-
-                <!-- Tool call -->
-                <div v-if="phase === 'tool' || phase === 'assistant'" class="skill-chat-tool">
-                  <div class="skill-chat-tool-bar" :class="{ expanded: toolExpanded }">
-                    <code>{{ visibleToolCmd }}</code>
-                  </div>
-                </div>
-
-                <!-- Assistant response -->
-                <div v-if="phase === 'assistant'" class="skill-chat-assistant">
-                  <div class="skill-chat-bubble skill-chat-bubble-assistant">
-                    <!-- Rich HTML (chat clients) -->
-                    <div v-if="isRichResponse" class="skill-chat-rich" v-html="visibleAssistantMsg" />
-                    <!-- Plain text / code (code clients) -->
-                    <pre
-                      v-else
-                      class="skill-chat-pre">{{ visibleAssistantMsg }}<span v-if="visibleAssistantMsg.length < (currentMessages[2]?.content.length ?? 0)" class="skill-cursor" /></pre>
-                  </div>
-                </div>
-
-                <!-- Idle state -->
-                <div v-if="phase === 'idle'" class="skill-chat-idle">
-                  <span class="skill-thinking-dot" /><span class="skill-thinking-dot" /><span
-                    class="skill-thinking-dot" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </ClientOnly>
-    </div>
-  </div>
-
-  <!-- ─── Skills Catalog ───────────────────────────────────────────────────── -->
-  <div class="skill-section">
-    <div class="skill-section-inner">
-      <!-- Header -->
-      <div class="sc-header">
-        <div class="sc-badge">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 1.5 L14 10 L22 12 L14 14 L12 22.5 L10 14 L2 12 L10 10 Z" />
-          </svg>
-          SKILL CATALOG
-        </div>
-        <h2 class="skill-section-title">
-          {{ catalogLocale.ui.title }}
-        </h2>
-        <p class="skill-section-sub">
-          {{ catalogLocale.ui.subtitle }}
-        </p>
-        <div class="sc-plugin-bar">
-          <div class="sc-plugin-left">
-            <div class="sc-plugin-icon">
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 158, 11)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                <polyline points="15 3 21 3 21 9" />
+                <line x1="10" y1="14" x2="21" y2="3" />
               </svg>
-            </div>
-            <div>
-              <div class="sc-plugin-title">
-                {{ isEN ? 'Available on Claude Code Plugin Marketplace' : isHK ? '已上架 Claude Code 插件市場' : '已上架 Claude Code 插件市场' }}
-                <span class="sc-plugin-badge">PLUGIN</span>
-              </div>
-              <div class="sc-plugin-desc">
-                {{ isEN ? 'Copy the commands and run them in Claude Code.' : isHK ? '複製命令，在 Claude Code 中運行即可。' : '复制命令，在 Claude Code 中运行即可。' }}
-              </div>
-            </div>
-          </div>
-          <div class="sc-plugin-right">
-            <div class="sc-plugin-cmd-block">
-              <div class="sc-plugin-cmd-lines">
-                <code><span class="sc-plugin-kw">/plugin</span> marketplace add longbridge/skills</code>
-                <code><span class="sc-plugin-kw">/plugin</span> install longbridge@longbridge-skills</code>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Tabs + Search row -->
-      <div class="sc-toolbar">
-        <div class="sc-tabs-wrap">
-          <div ref="tabsEl" class="sc-tabs" role="tablist">
-            <button
-              v-for="cat in CATALOG_CATS"
-              :key="cat.id"
-              role="tab"
-              :aria-selected="activeCatalogCat === cat.id"
-              class="sc-tab"
-              :class="{ 'sc-tab--active': activeCatalogCat === cat.id }"
-              @click="activeCatalogCat = cat.id">
-              {{ cat.label }}
-              <span class="sc-tab-count">{{ catalogCounts[cat.id] }}</span>
-            </button>
-            <span class="sc-tabs-indicator" :style="indicatorStyle"></span>
+              Download longbridge-all.zip
+            </a>
           </div>
-        </div>
-        <div class="sc-search-wrap">
-          <svg
-            class="sc-search-icon"
-            width="13"
-            height="13"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.4"
-            stroke-linecap="round">
-            <circle cx="11" cy="11" r="7" />
-            <path d="M21 21l-4.3-4.3" />
-          </svg>
-          <input v-model="catalogQuery" class="sc-search-input" :placeholder="catalogLocale.ui.searchPlaceholder" />
-          <button v-if="catalogQuery" class="sc-search-clear" @click="catalogQuery = ''">×</button>
-        </div>
-      </div>
 
-      <!-- Grid -->
-      <div class="sc-grid" :key="activeCatalogCat + (catalogQuery ? '1' : '0')">
-        <div
-          v-for="(skill, i) in shownCatalogSkills"
-          :key="skill.id"
-          class="sc-card"
-          :style="{ '--sc-i': i }"
-          @mouseenter="triggerRipple($event, $event.currentTarget as HTMLElement)"
-          @click="openCatalogSkill = skill">
-          <div class="sc-ripple" />
-          <div class="sc-card-inner">
-            <div class="sc-card-header">
-              <div class="sc-card-title">
-                <span class="sc-card-name">{{ skill.name }}</span>
-                <span class="sc-card-pkg">{{ skill.pkg }}</span>
-                <span v-if="skill.tag" class="sc-card-tag" :class="'sc-card-tag--' + (skill.tagType ?? 'default')">{{
-                  skill.tag
-                }}</span>
-              </div>
+          <div class="skill-getstarted-card">
+            <div
+              class="skill-getstarted-icon"
+              style="
+                background: color-mix(in srgb, var(--lb-status-alert) 14%, transparent);
+                color: var(--lb-status-alert);
+              ">
               <svg
-                class="sc-card-arrow"
-                width="14"
-                height="14"
+                width="18"
+                height="18"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round">
-                <path d="M5 12h14M12 5l7 7-7 7" />
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
               </svg>
             </div>
-            <p class="sc-card-desc">{{ skill.desc }}</p>
-            <div class="sc-card-prompt">
-              <svg
-                class="min-w-3"
-                width="12"
-                height="12"
-                viewBox="0 0 1024 1024"
-                fill="#00B8B8"
-                aria-hidden="true"
-                data-om-id="jsx:/https:/019dd842-41fb-76c9-a965-9b3af0bc8917.claudeusercontent.com/v1/design/projects/019dd842-41fb-76c9-a965-9b3af0bc8917/serve/SkillsPage.jsx:17514:366:11"
-                style="flex: 0 0 auto; margin-top: 2px; opacity: 0.55">
-                <path
-                  d="M470.9888 261.77536v98.54976c0 13.3632-10.83392 24.19712-24.19712 24.19712-47.68768 0-73.6256 48.90624-77.21984 145.43872h77.21984c13.3632 0 24.19712 10.84416 24.19712 24.19712v208.0768c0 13.3632-10.83392 24.19712-24.19712 24.19712H240.90624c-13.37344 0-24.19712-10.84416-24.19712-24.19712V554.15808c0-46.27456 4.6592-88.73984 13.84448-126.22848 9.4208-38.44096 23.87968-72.04864 42.96704-99.90144 19.64032-28.6208 44.20608-51.07712 73.02144-66.72384 29.00992-15.73888 62.74048-23.72608 100.25984-23.72608 13.34272 0 24.17664 10.83392 24.17664 24.19712zM783.09376 384.52224c13.3632 0 24.19712-10.84416 24.19712-24.19712V261.77536c0-13.3632-10.83392-24.19712-24.19712-24.19712-37.50912 0-71.23968 7.9872-100.2496 23.72608-28.81536 15.64672-53.39136 38.10304-73.03168 66.72384-19.08736 27.8528-33.54624 61.46048-42.96704 99.91168-9.17504 37.49888-13.83424 79.96416-13.83424 126.21824v208.0768c0 13.3632 10.83392 24.19712 24.19712 24.19712h205.8752c13.3632 0 24.19712-10.84416 24.19712-24.19712V554.15808c0-13.3632-10.83392-24.19712-24.19712-24.19712h-76.1344c3.54304-96.5325 29.10208-145.43872 76.12416-145.43872z"
-                  data-om-id="jsx:/https:/019dd842-41fb-76c9-a965-9b3af0bc8917.claudeusercontent.com/v1/design/projects/019dd842-41fb-76c9-a965-9b3af0bc8917/serve/SkillsPage.jsx:17678:368:13"></path>
-              </svg>
-              <span class="sc-card-prompt-text">{{ skill.prompt }}</span>
-              <svg
-                class="min-w-3"
-                width="12"
-                height="12"
-                viewBox="0 0 1024 1024"
-                fill="#00B8B8"
-                aria-hidden="true"
-                data-om-id="jsx:/https:/019dd842-41fb-76c9-a965-9b3af0bc8917.claudeusercontent.com/v1/design/projects/019dd842-41fb-76c9-a965-9b3af0bc8917/serve/SkillsPage.jsx:19082:376:13"
-                style="margin-left: 4px; opacity: 0.55; vertical-align: -2px; display: inline-block">
-                <path
-                  d="M553.0112 762.23488v-98.54976c0-13.3632 10.84416-24.19712 24.19712-24.19712 47.68768 0 73.6256-48.896 77.21984-145.42848h-77.21984c-13.3632 0-24.19712-10.84416-24.19712-24.19712V261.77536c0-13.3632 10.84416-24.19712 24.19712-24.19712h205.88544c13.3632 0 24.19712 10.84416 24.19712 24.19712v208.0768c0 46.27456-4.66944 88.7296-13.83424 126.22848-9.4208 38.44096-23.87968 72.04864-42.97728 99.90144-19.63008 28.6208-44.20608 51.07712-73.0112 66.72384-29.02016 15.73888-62.75072 23.72608-100.27008 23.72608-13.34272 0-24.17664-10.84416-24.17664-24.19712zM240.90624 639.47776c-13.3632 0-24.19712 10.84416-24.19712 24.19712v98.54976c0 13.3632 10.83392 24.19712 24.19712 24.19712 37.49888 0 71.24992-7.9872 100.2496-23.72608 28.81536-15.64672 53.39136-38.0928 73.02144-66.72384 19.0976-27.8528 33.55648-61.46048 42.97728-99.92192 9.17504-37.49888 13.83424-79.95392 13.83424-126.208V261.77536c0-13.3632-10.84416-24.19712-24.19712-24.19712H240.90624c-13.3632 0-24.19712 10.84416-24.19712 24.19712v208.0768c0 13.3632 10.83392 24.19712 24.19712 24.19712h76.1344c-3.54304 96.51456-29.11232 145.41056-76.13952 145.41056z"
-                  data-om-id="jsx:/https:/019dd842-41fb-76c9-a965-9b3af0bc8917.claudeusercontent.com/v1/design/projects/019dd842-41fb-76c9-a965-9b3af0bc8917/serve/SkillsPage.jsx:19285:378:15"></path>
-              </svg>
+            <h3 class="h-card" style="margin-top: 16px">Install via CLI</h3>
+            <p class="t-meta" style="margin-top: 8px; line-height: 1.55; flex: 1">
+              For Claude Code, Codex, and similar tools — installs all skills globally.
+            </p>
+            <div class="skill-getstarted-cmd">
+              <code><span style="color: var(--lb-brand)">$</span> npx skills add longbridge/skills -g</code>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- Empty state -->
-      <div v-if="filteredCatalogSkills.length === 0" class="sc-empty">
-        {{ catalogLocale.ui.noResults(catalogQuery) }}
-        <button class="sc-empty-clear" @click="catalogQuery = ''">{{ catalogLocale.ui.clear }}</button>。
+        <div class="skill-getstarted-foot">
+          Also available on <a href="#">skills.sh</a> and <a href="#">GitHub</a>.
+          <span style="color: var(--lb-fg-3)">·</span>
+          <a :href="localePath('/docs/mcp')" style="color: var(--lb-brand); font-weight: 600">
+            View installation guide for each client
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              style="display: inline; vertical-align: middle; margin-left: 3px">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
+          </a>
+        </div>
       </div>
+    </section>
 
-      <!-- Expand / collapse -->
-      <div v-if="filteredCatalogSkills.length > catalogCap" class="sc-expand-row">
-        <button class="sc-expand-btn" @click="catalogExpanded = !catalogExpanded">
-          {{
-            catalogExpanded
-              ? catalogLocale.ui.collapse
-              : catalogLocale.ui.showMore(filteredCatalogSkills.length - catalogCap)
-          }}
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            :style="{ transform: catalogExpanded ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }">
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
-        </button>
-      </div>
-    </div>
+    <AppFooter />
   </div>
+</template>
 
-  <!-- Skills Catalog Modal -->
-  <Teleport to="body">
-    <Transition name="sc-modal">
-      <div v-if="openCatalogSkill" class="sc-modal-backdrop" @click.self="openCatalogSkill = null">
-        <div class="sc-modal">
-          <!-- Header -->
-          <div class="sc-modal-head">
-            <svg class="sc-modal-deco" width="180" height="180" viewBox="0 0 24 24">
-              <path d="M12 1.5 L14 10 L22 12 L14 14 L12 22.5 L10 14 L2 12 L10 10 Z" fill="#00b8b8" />
-            </svg>
-            <button class="sc-modal-close" @click="openCatalogSkill = null" aria-label="关闭">×</button>
-            <div class="sc-modal-hero">
-              <div
-                class="sc-modal-icon"
-                v-html="CAT_ICONS[openCatalogSkill.cat] ?? CAT_ICONS.meta"></div>
-              <div>
-                <h2 class="sc-modal-title">{{ openCatalogSkill.name }}</h2>
-                <div class="sc-modal-meta">
-                  <code>{{ openCatalogSkill.pkg }}</code>
-                  <span class="sc-modal-dot">·</span>
-                  <span>{{ catalogLocale.ui.catLabels[openCatalogSkill.cat] }}</span>
-                  <span class="sc-modal-dot">·</span>
-                  <span>{{ openCatalogSkill.tools }} {{ isEN ? 'tools' : isHK ? '個工具' : '个工具' }}</span>
-                </div>
-              </div>
-            </div>
-            <p class="sc-modal-desc">{{ openCatalogSkill.desc }}</p>
-            <div class="sc-modal-actions">
-<a
-                class="sc-modal-btn-outline"
-                :href="`https://github.com/longbridge/skills/blob/main/skills/${openCatalogSkill.pkg}/SKILL.md`"
-                target="_blank"
-                rel="noreferrer">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
-                  <path
-                    d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2.18c-3.2.7-3.87-1.37-3.87-1.37-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.35.96.1-.74.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.16 1.18a10.94 10.94 0 0 1 5.76 0c2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5Z" />
-                </svg>
-                {{ isEN ? 'View Full Skill' : isHK ? '查看完整技能' : '查看完整技能' }}
-                <svg
-                  width="10"
-                  height="10"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2.5"
-                  stroke-linecap="round">
-                  <path d="M7 17 17 7M9 7h8v8" />
-                </svg>
-              </a>
-              <a
-                class="sc-modal-btn-outline"
-                :href="`https://open.longbridge.com/skill/${openCatalogSkill.pkg}.zip`">
-                <svg
-                  width="13"
-                  height="13"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" />
-                </svg>
-                {{ isEN ? 'Download ZIP' : '下载 ZIP' }}
-              </a>
-            </div>
-          </div>
+<style scoped>
+.skill-page-root {
+  min-height: 100vh;
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-1);
+}
 
-          <!-- Body -->
-          <div class="sc-modal-body">
-            <!-- Install section -->
-            <div class="sc-modal-section">
-              <div class="sc-modal-client-tabs">
-                <button
-                  v-for="(v, key) in INSTALL_CLIENTS"
-                  v-show="key === 'cli' || key === 'manual'"
-                  :key="key"
-                  class="sc-modal-client-tab"
-                  :class="{ 'sc-modal-client-tab--active': installClient === key }"
-                  @click="installClient = key">
-                  {{ v.label }}
-                </button>
-              </div>
-              <div class="sc-modal-section-hd">
-                <span class="sc-modal-section-label">{{ isEN ? 'Install' : isHK ? '安裝' : '安装' }}</span>
-                <span class="sc-modal-section-hint">{{
-                  isEN
-                    ? 'Copy the command for your AI client.'
-                    : isHK
-                      ? '選擇你使用的客戶端，複製命令到對應終端。'
-                      : '选择你使用的客户端，复制命令到对应终端。'
-                }}</span>
-              </div>
-              <div class="sc-modal-cmd-block">
-                <code
-                  class="sc-modal-cmd-text"
-                  :class="{ 'sc-modal-cmd-text--multi': INSTALL_CLIENTS[installClient].cmd.includes('\n') }"
-                  >{{ INSTALL_CLIENTS[installClient].cmd }}</code
-                >
-                <button class="sc-modal-cmd-copy" @click="handleModalCopy(INSTALL_CLIENTS[installClient].cmd, 'inst')">
-                  <svg
-                    v-if="modalCopiedKey === 'inst'"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="#00b88a"
-                    stroke-width="2.6"
-                    stroke-linecap="round">
-                    <path d="M20 6 9 17l-5-5" />
-                  </svg>
-                  <svg
-                    v-else
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round">
-                    <rect x="9" y="9" width="11" height="11" rx="2" />
-                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-
-            <!-- Upgrade / Verify section -->
-            <div class="sc-modal-section">
-              <div class="sc-modal-section-hd">
-                <span class="sc-modal-section-label">{{
-                  isEN
-                    ? `Upgrade / Verify (${INSTALL_CLIENTS[installClient].label})`
-                    : `升级 / 验证（${INSTALL_CLIENTS[installClient].label}）`
-                }}</span>
-              </div>
-              <div class="sc-modal-labeled-cmd">
-                <div class="sc-modal-cmd-label">
-                  {{ isEN ? 'Upgrade to latest' : isHK ? '升級到最新版' : '升级到最新版' }}
-                </div>
-                <div class="sc-modal-cmd-block">
-                  <code class="sc-modal-cmd-text">{{ INSTALL_CLIENTS[installClient].upgrade }}</code>
-                  <button
-                    class="sc-modal-cmd-copy"
-                    @click="handleModalCopy(INSTALL_CLIENTS[installClient].upgrade, 'upg')">
-                    <svg
-                      v-if="modalCopiedKey === 'upg'"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="#00b88a"
-                      stroke-width="2.6"
-                      stroke-linecap="round">
-                      <path d="M20 6 9 17l-5-5" />
-                    </svg>
-                    <svg
-                      v-else
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round">
-                      <rect x="9" y="9" width="11" height="11" rx="2" />
-                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-              <div class="sc-modal-labeled-cmd">
-                <div class="sc-modal-cmd-label">
-                  {{ isEN ? 'Verify installed' : isHK ? '驗證已安裝' : '验证已安装' }}
-                </div>
-                <div class="sc-modal-cmd-block">
-                  <code class="sc-modal-cmd-text">{{ INSTALL_CLIENTS[installClient].verify }}</code>
-                  <button
-                    class="sc-modal-cmd-copy"
-                    @click="handleModalCopy(INSTALL_CLIENTS[installClient].verify, 'ver')">
-                    <svg
-                      v-if="modalCopiedKey === 'ver'"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="#00b88a"
-                      stroke-width="2.6"
-                      stroke-linecap="round">
-                      <path d="M20 6 9 17l-5-5" />
-                    </svg>
-                    <svg
-                      v-else
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round">
-                      <rect x="9" y="9" width="11" height="11" rx="2" />
-                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-
-            <!-- Uninstall section -->
-            <div class="sc-modal-section">
-              <div class="sc-modal-section-hd">
-                <span class="sc-modal-section-label">{{
-                  isEN
-                    ? `Uninstall (${INSTALL_CLIENTS[installClient].label})`
-                    : `卸载（${INSTALL_CLIENTS[installClient].label}）`
-                }}</span>
-                <span class="sc-modal-section-hint">{{
-                  isEN
-                    ? "Removing a Skill won't affect your Longbridge account or API key."
-                    : isHK
-                      ? '移除 Skill 不會影響你的 Longbridge 賬戶與 API key。'
-                      : '移除 Skill 不会影响你的 Longbridge 账户与 API key。'
-                }}</span>
-              </div>
-              <div class="sc-modal-cmd-block">
-                <code class="sc-modal-cmd-text">{{ INSTALL_CLIENTS[installClient].uninstall }}</code>
-                <button
-                  class="sc-modal-cmd-copy"
-                  @click="handleModalCopy(INSTALL_CLIENTS[installClient].uninstall, 'uni')">
-                  <svg
-                    v-if="modalCopiedKey === 'uni'"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="#00b88a"
-                    stroke-width="2.6"
-                    stroke-linecap="round">
-                    <path d="M20 6 9 17l-5-5" />
-                  </svg>
-                  <svg
-                    v-else
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round">
-                    <rect x="9" y="9" width="11" height="11" rx="2" />
-                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                  </svg>
-                </button>
-              </div>
-              <ul class="sc-modal-notes">
-                <li>
-                  {{
-                    isEN
-                      ? 'Client config is cleaned up automatically. For manual installs, delete'
-                      : isHK
-                        ? '客戶端配置會自動清理；如手動安裝，刪除'
-                        : '客户端配置会自动清理；如手动安装，删除'
-                  }}
-                  <code>~/.skills/{{ openCatalogSkill.pkg }}/</code> {{ isEN ? 'directory.' : '目录即可。' }}
-                </li>
-                <li>
-                  {{
-                    isEN
-                      ? 'Reinstalling after uninstall reuses the cached API key from your keychain.'
-                      : isHK
-                        ? '卸載後再次安裝會沿用上次的 API key 緩存（位於鑰匙串）。'
-                        : '卸载后再次安装会沿用上次的 API key 缓存（位于钥匙串）。'
-                  }}
-                </li>
-              </ul>
-            </div>
-
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-
-  <!-- ─── Capabilities ─────────────────────────────────────────────────────── -->
-  <div class="skill-section">
-    <div class="skill-section-inner">
-      <div class="skill-section-header">
-        <h2 class="skill-section-title">{{ t.capabilitiesTitle.value }}</h2>
-        <p class="skill-section-sub">{{ t.capabilitiesSubtitle.value }}</p>
-      </div>
-      <div class="skill-cap-grid">
-        <div v-for="group in capabilityGroups" :key="group.label" class="skill-cap-card">
-          <div class="skill-cap-header">
-            <span class="skill-cap-icon" :style="{ color: group.color }" v-html="group.iconSvg" />
-            <span class="skill-cap-label" :style="{ color: group.color }">{{ group.label }}</span>
-          </div>
-          <ul class="skill-cap-list">
-            <li v-for="(item, i) in group.items" :key="i">
-              <span class="skill-cap-desc">{{ item.desc }}</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- ─── User Cases ──────────────────────────────────────────────────────── -->
-  <div class="skill-section">
-    <div class="skill-section-inner">
-      <!-- Header -->
-      <div class="skill-section-header">
-        <h2 class="skill-section-title">{{ t.userCasesTitle.value }}</h2>
-      </div>
-
-      <!-- Award Banner -->
-      <a class="uc-banner" :href="topicUrl('39630019')" target="_blank">
-        <div class="uc-banner-glow"></div>
-        <div class="uc-banner-inner">
-          <div>
-            <div class="uc-banner-eyebrow">
-              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none">
-                <path d="M12 2 L13.6 9.4 L21 11 L13.6 12.6 L12 20 L10.4 12.6 L3 11 L10.4 9.4 Z" fill="currentColor" />
-                <path
-                  d="M19 3 L19.6 5.4 L22 6 L19.6 6.6 L19 9 L18.4 6.6 L16 6 L18.4 5.4 Z"
-                  fill="currentColor"
-                  opacity="0.6" />
-              </svg>
-              {{ isEN ? 'Award' : isHK ? '最燃案例獎' : '最燃案例奖' }}
-            </div>
-            <p class="uc-banner-title">
-              {{ isEN ? 'Each winner receives' : isHK ? '每人獲得' : '每人获得' }}
-              <span class="uc-banner-coin">{{
-                isEN ? '10,000 Task Coins' : isHK ? '10,000 任務幣' : '10,000 任务币'
-              }}</span>
-              {{ isEN ? '+' : '+' }}
-              <span class="uc-banner-pod">1 × AirPods 4</span>
-            </p>
-            <p class="uc-banner-desc">
-              {{
-                isEN
-                  ? "Winning cases are showcased on the Longbridge Skill website — visible to users worldwide, including the winner's ID and creative work."
-                  : isHK
-                    ? '獲獎案例將被收錄並展示在 Longbridge Skill 官網，全球用戶均可看到獲獎者 ID 及創意。'
-                    : '获奖案例将被收录并展示在 Longbridge Skill 官网，全球用户均可看到获奖者 ID 及创意。'
-              }}
-            </p>
-          </div>
-          <div class="uc-prize-stack">
-            <div class="uc-prize">
-              <div class="uc-prize-icon" data-icon="coin">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
-                  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.6" />
-                  <path
-                    d="M9 9.5 c0 -1.4 1.3 -2.2 3 -2.2 c1.6 0 2.8 0.8 2.8 2.1 M9 14.5 c0 1.4 1.3 2.2 3 2.2 c1.6 0 2.8 -0.8 2.8 -2.1 c0 -1.4 -1.3 -1.9 -3 -2.3 c-1.6 -0.4 -2.8 -0.8 -2.8 -2.3 M12 6 v12"
-                    stroke="currentColor"
-                    stroke-width="1.6"
-                    stroke-linecap="round" />
-                </svg>
-              </div>
-              <div>
-                <div class="uc-prize-value">10,000</div>
-                <div class="uc-prize-label">{{ isEN ? 'TASK COINS' : isHK ? '任務幣' : '任务币' }}</div>
-              </div>
-            </div>
-            <div class="uc-prize">
-              <div class="uc-prize-icon" data-icon="airpods">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
-                  <path
-                    d="M7.5 4 c-1.4 0 -2.5 1 -2.5 2.4 v9.4 c0 1.5 1 2.6 2.4 2.7 c1.5 0.1 2.6 -1 2.6 -2.5 V6.4 C10 5 9 4 7.6 4 Z"
-                    stroke="currentColor"
-                    stroke-width="1.6"
-                    stroke-linejoin="round" />
-                  <path d="M7.5 18.5 v2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-                  <path
-                    d="M16.5 4 c-1.4 0 -2.5 1 -2.5 2.4 v9.4 c0 1.5 1 2.6 2.4 2.7 c1.5 0.1 2.6 -1 2.6 -2.5 V6.4 C19 5 18 4 16.6 4 Z"
-                    stroke="currentColor"
-                    stroke-width="1.6"
-                    stroke-linejoin="round" />
-                  <path d="M16.5 18.5 v2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
-                </svg>
-              </div>
-              <div>
-                <div class="uc-prize-value">AirPods 4</div>
-                <div class="uc-prize-label">{{ isEN ? 'PER WINNER' : isHK ? '每位獲獎者' : '每位获奖者' }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </a>
-
-      <!-- Cards -->
-      <div class="uc-grid">
-        <a
-          v-for="c in userCases"
-          :key="c.authorId"
-          :href="topicUrl(c.topicId)"
-          :class="['uc-card', `uc-accent-${c.accent}`, c.cardVariant ? `uc-card-${c.cardVariant}` : '']"
-          target="_blank"
-          rel="noopener noreferrer">
-          <div class="uc-card-shine"></div>
-          <div class="uc-card-top">
-            <span class="uc-rank">{{ c.rank }}</span>
-            <span class="uc-cta">
-              {{ isEN ? 'Read case' : isHK ? '查看案例' : '查看案例' }}
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none">
-                <path
-                  d="M5 12 H19 M13 6 L19 12 L13 18"
-                  stroke="currentColor"
-                  stroke-width="1.8"
-                  stroke-linecap="round"
-                  stroke-linejoin="round" />
-              </svg>
-            </span>
-          </div>
-          <h3 class="uc-case-title">{{ isEN ? c.titleEn : isHK ? c.titleHK : c.title }}</h3>
-          <p class="uc-case-summary">{{ isEN ? c.summaryEn : isHK ? c.summaryHK : c.summary }}</p>
-          <div class="uc-card-foot">
-            <div v-if="c.metricValue" class="uc-metric">
-              <span class="uc-metric-value">{{ c.metricValue }}</span>
-              <span class="uc-metric-label">{{ isEN ? c.metricLabelEn : isHK ? c.metricLabelHK : c.metricLabel }}</span>
-            </div>
-          </div>
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <!-- ─── Install ───────────────────────────────────────────────────────────── -->
-  <div id="install" class="skill-section">
-    <div class="skill-section-inner">
-      <div class="skill-section-header">
-        <h2 class="skill-section-title">{{ t.installTitle.value }}</h2>
-        <p class="skill-section-sub">{{ t.installSubtitle.value }}</p>
-      </div>
-
-      <!-- One-liner install (top, full width) -->
-      <div class="skill-one-liner">
-        <div class="skill-one-liner-header">
-          <span class="skill-one-liner-label">{{ t.oneLinerLabel.value }}</span>
-          <span class="skill-one-liner-hint">{{ t.oneLinerHint.value }}</span>
-        </div>
-        <div class="skill-cmd-block skill-cmd-block--prominent">
-          <pre class="skill-cmd-text">{{ oneLinerCommand }}</pre>
-          <div class="skill-copy-wrap">
-            <button class="skill-copy-btn" @click="copyOneLiner">
-              <svg
-                v-if="!copiedOneLiner"
-                xmlns="http://www.w3.org/2000/svg"
-                width="13"
-                height="13"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-              </svg>
-              <svg
-                v-else
-                xmlns="http://www.w3.org/2000/svg"
-                width="13"
-                height="13"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-              {{ copiedOneLiner ? t.copied.value : t.copy.value }}
-            </button>
-            <span class="skill-copy-tooltip" :class="{ 'skill-copy-tooltip--show': copiedOneLiner }">{{
-              t.copied.value
-            }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Manual install (left-right split) -->
-      <div class="skill-install-split">
-        <!-- Left: ZIP download -->
-        <div class="skill-install-panel">
-          <div class="skill-install-panel-header">
-            <span class="skill-install-panel-label">{{ t.downloadZip.value }}</span>
-            <span class="skill-tag">{{ t.recommended.value }}</span>
-          </div>
-          <p class="skill-install-panel-hint">{{ t.manualInstallHint.value }}</p>
-          <a href="/skill/longbridge-all.zip" download class="skill-btn-primary">
-            {{ t.downloadZip.value }}
-          </a>
-          <p class="skill-also-available">
-            {{ t.alsoAvailablePrefix.value
-            }}<a href="https://skills.sh/longbridge/developers" target="_blank" rel="noopener">skills.sh</a
-            >{{ t.alsoAvailableAnd.value
-            }}<a href="https://github.com/longbridge/developers" target="_blank" rel="noopener">GitHub</a>.
-          </p>
-          <a :href="installGuideUrl" class="skill-guide-link" style="margin-top: auto">{{ t.installGuide.value }}</a>
-        </div>
-
-        <!-- Right: CLI -->
-        <div class="skill-install-panel">
-          <div class="skill-install-panel-header">
-            <span class="skill-install-panel-label">{{ t.orCli.value }}</span>
-          </div>
-          <p class="skill-install-panel-hint">{{ t.cliInstallHint.value }}</p>
-          <div class="skill-cmd-block">
-            <code class="skill-cmd-text">{{ npxCommand }}</code>
-            <div class="skill-copy-wrap">
-              <button class="skill-copy-btn" @click="copyNpxCmd">
-                <svg
-                  v-if="!copiedNpx"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="13"
-                  height="13"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-                  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-                </svg>
-                <svg
-                  v-else
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="13"
-                  height="13"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round">
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-                {{ copiedNpx ? t.copied.value : t.copy.value }}
-              </button>
-              <span class="skill-copy-tooltip" :class="{ 'skill-copy-tooltip--show': copiedNpx }">{{
-                t.copied.value
-              }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="skill-footer-wrap">
-    <Footer />
-  </div>
-</template>
-
-<style scoped>
-/* ─── Layout ─────────────────────────────────────────────────────────────── */
+/* ---- Hero ---- */
 .skill-hero {
-  background: var(--vp-c-bg);
-}
-.skill-section {
-  padding: 64px 0;
-}
-.skill-section-dark {
-  background: var(--vp-c-bg-soft);
-}
-.skill-section-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-.skill-section-header {
-  text-align: center;
-  margin-bottom: 40px;
-}
-.skill-section-dark .skill-section-header {
-  margin-bottom: 24px;
-}
-.skill-section-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin: 0;
-  color: var(--vp-c-text-1);
-  margin-bottom: 8px;
-  border: none;
-  padding: 0;
-}
-.skill-section-sub {
-  font-size: 0.9375rem;
-  color: var(--vp-c-text-2);
-}
-
-/* ─── Capabilities ───────────────────────────────────────────────────────── */
-.skill-cap-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-@media (max-width: 768px) {
-  .skill-cap-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (max-width: 480px) {
-  .skill-cap-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.skill-cap-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 18px 20px;
-}
-.skill-cap-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-.skill-cap-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.skill-cap-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-.skill-cap-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.skill-cap-list li {
-  line-height: 1.5;
-}
-.skill-cap-desc {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-2);
-}
-
-/* ─── User Cases ─────────────────────────────────────────────────────────── */
-/* ─── Award Banner ─── */
-.uc-banner {
   position: relative;
-  margin: 0 0 40px;
-  border-radius: 20px;
+  padding: 100px 0 80px;
   overflow: hidden;
-  background: linear-gradient(135deg, #0a0e19 0%, #14202e 60%, #0e2a2c 100%);
-  color: #fff;
-  isolation: isolate;
-  cursor: pointer;
-  display: block;
-  text-decoration: none !important;
-  color: #fff !important;
-  transition: opacity 200ms ease;
-}
-.uc-banner:hover {
-  opacity: 0.88;
 }
-.uc-banner-glow {
+.skill-hero-bg {
   position: absolute;
   inset: 0;
+  background: radial-gradient(
+    ellipse 80% 60% at 50% -10%,
+    color-mix(in srgb, var(--lb-brand) 16%, transparent),
+    transparent 70%
+  );
   pointer-events: none;
-  z-index: -1;
-  background: radial-gradient(480px 220px at 12% 110%, rgba(0, 184, 184, 0.34), transparent 70%);
 }
-.uc-banner-inner {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 40px;
-  align-items: center;
-  padding: 28px 36px;
+.skill-hero-inner {
+  position: relative;
+  z-index: 1;
 }
-.uc-banner-eyebrow {
-  display: inline-flex;
+.skill-hero-install {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  color: #5de5e5;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-bottom: 10px;
-}
-.uc-banner-title {
-  font-size: 1.375rem;
-  font-weight: 600;
-  line-height: 1.4;
-  margin: 0 0 8px;
-  letter-spacing: -0.005em;
-}
-.uc-banner-coin {
-  color: #ffd84d;
-}
-.uc-banner-pod {
-  color: #5de5e5;
+  gap: 12px;
 }
-.uc-banner-desc {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: rgba(255, 255, 255, 0.7);
-  margin: 0;
-  max-width: 580px;
+.skill-hero-install-label {
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  font-weight: 500;
 }
-.uc-prize-stack {
+.skill-hero-install-cmd {
   display: flex;
-  gap: 12px;
+  align-items: flex-start;
+  gap: 10px;
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 10px;
+  padding: 12px 16px;
+  max-width: 480px;
+  width: 100%;
 }
-.uc-prize {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 18px;
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(4px);
-  white-space: nowrap;
+.skill-hero-install-cmd code {
+  font-size: 12.5px;
+  color: var(--lb-fg-1);
+  font-family: var(--vp-font-family-mono);
+  line-height: 1.6;
+  white-space: pre;
+  flex: 1;
+  text-align: left;
 }
-.uc-prize-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
+.skill-hero-install-link {
+  font-size: 13px;
+  color: var(--lb-brand);
+  font-weight: 500;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  flex-shrink: 0;
-}
-.uc-prize-icon[data-icon='coin'] {
-  background: rgba(255, 199, 0, 0.18);
-}
-.uc-prize-icon[data-icon='airpods'] {
-  background: rgba(0, 184, 184, 0.2);
-}
-.uc-prize-value {
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.1;
-  letter-spacing: -0.01em;
-}
-.uc-prize-label {
-  font-size: 0.6875rem;
-  color: rgba(255, 255, 255, 0.55);
-  margin-top: 3px;
-  letter-spacing: 0.04em;
+  gap: 4px;
+  text-decoration: none;
 }
-/* ─── Grid ─── */
-.uc-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+.skill-hero-install-link:hover {
+  text-decoration: underline;
 }
-/* ─── Card ─── */
-.uc-card {
-  position: relative;
+.skill-hero-agents {
+  margin-top: 40px;
   display: flex;
   flex-direction: column;
-  padding: 28px 26px 24px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 18px;
-  text-decoration: none !important;
-  color: inherit;
-  transition:
-    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
-    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
-    border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  overflow: hidden;
-  isolation: isolate;
-  min-height: 296px;
-}
-.uc-card:hover {
-  transform: translateY(-4px);
-  box-shadow:
-    0 18px 40px -12px rgba(10, 14, 25, 0.14),
-    0 4px 14px -6px rgba(10, 14, 25, 0.06);
-  border-color: transparent;
-  text-decoration: none;
-}
-.uc-card:hover .uc-cta {
-  gap: 8px;
-}
-.uc-card:hover .uc-card-shine {
-  opacity: 1;
-}
-.uc-card-shine {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 280ms ease;
-  z-index: -1;
-}
-.uc-accent-orange .uc-card-shine {
-  background: radial-gradient(420px 200px at 100% 0%, rgba(255, 80, 0, 0.09), transparent 70%);
-}
-.uc-accent-red .uc-card-shine {
-  background: radial-gradient(420px 200px at 100% 0%, rgba(245, 184, 0, 0.12), transparent 70%);
-}
-.uc-accent-yellow .uc-card-shine {
-  background: radial-gradient(420px 200px at 100% 0%, rgba(255, 199, 0, 0.14), transparent 70%);
+  align-items: center;
+  gap: 14px;
 }
-.uc-card-top {
+.skill-hero-agents-row {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 22px;
-}
-.uc-rank {
-  font-size: 1.875rem;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  line-height: 1;
-  font-feature-settings: 'tnum';
-}
-.uc-accent-orange .uc-rank {
-  color: #ff5000;
-}
-.uc-accent-red .uc-rank {
-  color: #f5b800;
-}
-.uc-accent-yellow .uc-rank {
-  color: #c99500;
-}
-.uc-case-title {
-  font-size: 1.0625rem;
-  font-weight: 600;
-  line-height: 1.45;
-  color: var(--vp-c-text-1);
-  margin: 0 0 10px;
-  letter-spacing: -0.005em;
-  border: none;
-  padding: 0;
-}
-.uc-case-summary {
-  font-size: 0.875rem;
-  line-height: 1.65;
-  color: var(--vp-c-text-2);
-  margin: 0 0 24px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-.uc-card-foot {
-  margin-top: auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 18px;
-  border-top: 1px dashed var(--vp-c-divider);
-}
-.uc-metric {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.uc-metric-value {
-  font-size: 1.375rem;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-feature-settings: 'tnum';
-}
-.uc-accent-orange .uc-metric-value {
-  color: #ff5000;
-}
-.uc-accent-red .uc-metric-value {
-  color: #f5b800;
-}
-.uc-accent-yellow .uc-metric-value {
-  color: #c99500;
-}
-.uc-metric-label {
-  font-size: 0.6875rem;
-  color: var(--vp-c-text-2);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.uc-cta {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  transition: gap 220ms ease;
-}
-.uc-accent-orange .uc-cta {
-  color: #ff5000;
-}
-.uc-accent-red .uc-cta {
-  color: #c99000;
-}
-.uc-accent-yellow .uc-cta {
-  color: #b58300;
-}
-/* minimal variant */
-.uc-card-minimal .uc-card-top {
-  margin-bottom: 18px;
-  align-items: center;
-}
-.uc-card-minimal .uc-rank {
-  font-size: 0.875rem;
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: 999px;
-}
-.uc-card-minimal.uc-accent-orange .uc-rank {
-  color: #ff5000;
-  background: #ffede5;
-}
-.uc-card-minimal.uc-accent-red .uc-rank {
-  color: #c99000;
-  background: #fff8dc;
-}
-.uc-card-minimal.uc-accent-yellow .uc-rank {
-  color: #b58300;
-  background: #fff7da;
-}
-.uc-card-minimal .uc-case-summary {
-  -webkit-line-clamp: 4;
-  margin-bottom: 22px;
-}
-.uc-card-minimal .uc-card-foot {
-  justify-content: flex-end;
-  padding-top: 0;
-  border-top: 0;
-}
-/* responsive */
-@media (max-width: 960px) {
-  .uc-grid {
-    grid-template-columns: 1fr;
-  }
-  .uc-banner-inner {
-    grid-template-columns: 1fr;
-  }
-  .uc-prize-stack {
-    flex-wrap: wrap;
-  }
-}
-@media (max-width: 640px) {
-  .uc-banner-inner {
-    padding: 24px 20px;
-  }
-}
-
-/* ─── Hero ───────────────────────────────────────────────────────────────── */
-.skill-badge {
-  display: inline-block;
-  background: color-mix(in srgb, var(--vp-c-brand-1) 12%, transparent);
-  border-radius: var(--lb-badge-radius, 9999px);
-  padding: var(--lb-badge-py, 4px) var(--lb-badge-px, 8px);
-  font-size: var(--lb-badge-fs, 12px);
-  font-weight: var(--lb-badge-fw, 600);
-  line-height: var(--lb-badge-lh, 1);
-  color: var(--vp-c-brand-1);
-  margin-bottom: 20px;
-}
-.skill-title {
-  font-size: 2.5rem;
-  font-weight: 800;
-  line-height: 1.2;
-  color: var(--vp-c-text-1);
-  margin-bottom: 16px;
-  border: none;
-  padding: 0;
-  letter-spacing: -0.02em;
-}
-.skill-title1 {
-  font-size: 1.875rem;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--vp-c-brand-1);
-  margin-bottom: 24px;
-  border: none;
-  padding: 0;
-}
-@media (max-width: 768px) {
-  .skill-title {
-    font-size: 1.875rem;
-  }
-}
-.skill-gradient {
-  color: var(--vp-c-brand-1);
-}
-.skill-subtitle {
-  color: var(--vp-c-text-2);
-  line-height: 1.7;
-  margin-bottom: 36px;
-}
-
-/* ─── CTA block ──────────────────────────────────────────────────────────── */
-.skill-cta {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-width: 480px;
-  margin: 0 auto 36px;
-}
-.skill-btn-primary {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  background: var(--vp-c-brand-1);
-  color: var(--vp-button-brand-text) !important;
-  padding: 12px 20px;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  text-decoration: none !important;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-.skill-btn-primary:hover {
-  opacity: 0.9;
-}
-.dark .skill-btn-primary {
-  background: var(--brand-60);
-}
-.skill-tag {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 0.6875rem;
-  font-weight: 400;
-}
-.skill-divider {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.skill-divider-line {
-  flex: 1;
-  height: 1px;
-  background: var(--vp-c-divider);
-}
-.skill-divider-text {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  white-space: nowrap;
-}
-.skill-cmd-block {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 11px 14px;
-}
-.skill-cmd-text {
-  flex: 1;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.75rem;
-  color: var(--vp-c-text-1);
-  white-space: pre-wrap;
-  word-break: break-all;
-  text-align: left;
-  margin: 0;
-  background: none;
-  border: none;
-  padding: 0;
-}
-.skill-copy-btn {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  padding: 4px 10px;
-  font-size: 0.6875rem;
-  color: var(--vp-c-text-2);
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-.skill-copy-btn:hover {
-  color: var(--vp-c-text-1);
-}
-.skill-copy-wrap {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-}
-.skill-copy-tooltip {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%) translateY(4px);
-  background: var(--vp-c-text-1);
-  color: var(--vp-c-bg);
-  font-size: 0.6875rem;
-  font-weight: 500;
-  padding: 3px 8px;
-  border-radius: 4px;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 100;
-  opacity: 0;
-  transition:
-    opacity 0.15s,
-    transform 0.15s;
-}
-.skill-copy-tooltip--show {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-.skill-copy-tooltip::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 4px solid transparent;
-  border-top-color: var(--vp-c-text-1);
-}
-.skill-cta-hint {
-  font-size: 0.875rem;
-  color: var(--vp-c-text-2);
-  margin: 0 0 4px;
-}
-.skill-guide-link {
-  font-size: 0.8125rem;
-  color: var(--vp-c-brand-1);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  cursor: pointer;
-}
-.skill-also-available {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  margin: 6px 0 0;
-}
-.skill-also-available a {
-  color: var(--vp-c-text-2);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-/* ─── Client chips ───────────────────────────────────────────────────────── */
-.skill-clients-label {
-  font-size: 0.6875rem;
-  color: var(--vp-c-text-3);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 10px;
-}
-.skill-clients-row {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-.skill-client-chip {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 5px 14px;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.skill-client-icon {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  opacity: 0.8;
-}
-.skill-client-more {
-  color: var(--vp-c-text-3);
-  font-size: 0.8125rem;
-  font-weight: 400;
-  align-self: center;
-}
-
-/* ─── Scenario cards ─────────────────────────────────────────────────────── */
-.skill-cards-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-@media (max-width: 768px) {
-  .skill-cards-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (max-width: 480px) {
-  .skill-cards-grid {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-.skill-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.skill-card-label {
-  font-size: 0.875rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.skill-card-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  line-height: 1.35;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-.skill-card-desc {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.7;
-  flex: 1;
-}
-.skill-card-example {
-  margin: 4px -20px -20px;
-  padding: 10px 20px;
-  background: var(--vp-c-bg-soft);
-  border-top: 1px solid var(--vp-c-divider);
-  border-radius: 0 0 8px 8px;
-}
-.skill-card-example-text {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-3);
-  line-height: 1.2;
-}
-
-/* ─── Demo layout ────────────────────────────────────────────────────────── */
-.skill-demo {
-  display: flex;
-  gap: 16px;
-  min-height: 420px;
-}
-.skill-demo-scenarios {
-  margin-top: 50px;
-  width: 160px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-@media (max-width: 768px) {
-  .skill-demo {
-    flex-direction: column;
-  }
-  .skill-demo-scenarios {
-    width: 100%;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-}
-.skill-demo-scenario-btn {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 6px 12px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  cursor: pointer;
-  text-align: left;
-  transition: all 0.15s;
-}
-.skill-demo-scenario-btn:hover {
-  color: var(--vp-c-text-1);
-  border-color: var(--vp-c-brand-1);
-}
-.skill-demo-scenario-active {
-  background: var(--vp-c-brand-1) !important;
-  border-color: var(--vp-c-brand-1) !important;
-  color: var(--vp-button-brand-text) !important;
-}
-.dark .skill-demo-scenario-active {
-  background: var(--brand-60) !important;
-  border-color: var(--brand-60) !important;
-}
-
-/* ─── Demo panel ─────────────────────────────────────────────────────────── */
-.skill-demo-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 0;
-}
-.skill-demo-clients {
-  display: flex;
-  gap: 0;
-  border-bottom: 1px solid var(--vp-c-divider);
-  flex-wrap: wrap;
-}
-.skill-demo-client-tab {
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  padding: 6px 14px;
-  font-size: 0.8125rem;
-  font-weight: 400;
-  color: var(--vp-c-text-3);
-  cursor: pointer;
-  transition: color 0.15s;
-}
-.skill-demo-client-tab:hover {
-  color: var(--vp-c-text-1);
-}
-.skill-demo-client-active {
-  color: var(--vp-c-text-1) !important;
-  font-weight: 600;
-  border-bottom-color: var(--vp-c-brand-1) !important;
-}
-.dark .skill-demo-client-active {
-  border-bottom-color: var(--brand-60) !important;
-}
-
-/* ─── Chat window ────────────────────────────────────────────────────────── */
-.skill-chat-window {
-  flex: 1;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--lb-card-border);
-  border-radius: 10px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  min-height: 340px;
-}
-
-/* Info block above chat window */
-.skill-chat-info {
-  padding: 18px 24px 0 0;
-}
-
-/* Ability section */
-.skill-chat-ability {
-  padding: 0 0 0;
-}
-.skill-chat-ability-title {
-  font-size: 17px;
-  font-weight: 600;
-  line-height: 1.35;
-  color: var(--vp-c-text-1);
-  margin: 0 0 8px;
-  letter-spacing: -0.005em;
-}
-.skill-chat-ability-desc {
-  font-size: 13.5px;
-  line-height: 1.65;
-  color: var(--vp-c-text-2);
-  margin: 0;
-}
-
-/* Try bridge */
-.skill-chat-try-bridge {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 14px 0 18px;
-}
-.skill-chat-try-label {
-  flex-shrink: 0;
-  font-size: 11px;
-  font-weight: 400;
-  color: var(--vp-c-text-3);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-.skill-chat-prompt-card {
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background: linear-gradient(135deg, rgba(0, 184, 184, 0.06), rgba(0, 184, 184, 0.02));
-  border: 1px solid rgba(0, 184, 184, 0.22);
-  border-radius: 10px;
-  padding: 10px 14px;
-}
-.skill-chat-prompt-quote {
-  flex-shrink: 0;
-  color: rgba(0, 184, 184, 0.5);
-}
-.skill-chat-prompt-quote--open {
-  margin-top: 2px;
-}
-.skill-chat-prompt-quote--close {
-  align-self: flex-end;
-  margin-bottom: 2px;
-}
-.dark .skill-chat-prompt-card {
-  background: linear-gradient(135deg, rgba(0, 184, 184, 0.09), rgba(0, 184, 184, 0.03));
-  border-color: rgba(0, 184, 184, 0.18);
-}
-.skill-chat-prompt-text {
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-chrome {
-  background: var(--vp-c-bg-soft);
-  border-bottom: 1px solid var(--vp-c-divider);
-  padding: 9px 14px;
-  display: flex;
-  align-items: center;
-}
-.skill-chat-traffic {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-}
-.skill-chat-tl {
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.tl-r {
-  background: #ff5f57;
-}
-.tl-y {
-  background: #febc2e;
-}
-.tl-g {
-  background: #28c840;
-}
-.skill-chat-chrome-title {
-  flex: 1;
-  text-align: left;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  margin-left: 8px;
-}
-.skill-chat-body {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  overflow-y: auto;
-}
-.skill-chat-user {
-  display: flex;
-  justify-content: flex-end;
-}
-.skill-chat-bubble {
-  border-radius: 12px;
-  padding: 10px 14px;
-  font-size: 0.875rem;
-  max-width: 72%;
-  line-height: 1.5;
-}
-.skill-chat-bubble-user {
-  background: var(--vp-c-brand-1);
-  color: var(--vp-button-brand-text);
-  border-radius: 12px 12px 2px 12px;
-}
-.dark .skill-chat-bubble-user {
-  background: var(--brand-60);
-}
-
-.skill-chat-tool {
-  display: flex;
-  gap: 8px;
-}
-.skill-chat-tool-bar {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 8px 12px;
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-3);
-  transition:
-    max-height 0.3s ease,
-    opacity 0.3s;
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0 12px;
-}
-.skill-chat-tool-bar.expanded {
-  max-height: 60px;
-  opacity: 1;
-  padding: 8px 12px;
-}
-.skill-chat-assistant {
-}
-.skill-chat-bubble-assistant {
-  background: var(--vp-c-bg-soft);
-  color: var(--vp-c-text-1);
-  border-radius: 2px 12px 12px 12px;
-  max-width: 92%;
-}
-
-/* ── Rich content (v-html) ── */
-.skill-chat-rich {
-  animation: demo-fadein 0.25s ease;
-}
-@keyframes demo-fadein {
-  from {
-    opacity: 0;
-    transform: translateY(3px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-/* Shadcn-style table: wrapper div holds outer border+radius, tr provides row dividers */
-.skill-chat-bubble-assistant :deep(.demo-table-wrap) {
-  overflow: hidden;
-  margin-bottom: 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-table) {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8125rem;
-}
-.skill-chat-bubble-assistant :deep(.demo-table thead tr) {
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.skill-chat-bubble-assistant :deep(.demo-table tbody tr) {
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.skill-chat-bubble-assistant :deep(.demo-table tbody tr:last-child) {
-  border-bottom: none;
-}
-.skill-chat-bubble-assistant :deep(.demo-table th) {
-  text-align: left;
-  color: var(--vp-c-text-3);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 7px 14px;
-}
-.skill-chat-bubble-assistant :deep(.demo-table td) {
-  padding: 8px 14px;
-}
-.skill-chat-bubble-assistant :deep(.demo-table th:not(:first-child)),
-.skill-chat-bubble-assistant :deep(.demo-table td:not(:first-child)) {
-  text-align: right;
-}
-.skill-chat-bubble-assistant :deep(.demo-pos) {
-  color: var(--up-color);
-  font-weight: 600;
-}
-.skill-chat-bubble-assistant :deep(.demo-neg) {
-  color: var(--down-color);
-  font-weight: 600;
-}
-.skill-chat-bubble-assistant :deep(.demo-muted) {
-  color: var(--vp-c-text-3);
-}
-.skill-chat-bubble-assistant :deep(.demo-highlight td) {
-  background: var(--brand-5);
-}
-.skill-chat-bubble-assistant :deep(.demo-note) {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin: 8px 0 0;
-}
-.skill-chat-bubble-assistant :deep(.demo-summary) {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-2);
-  padding-top: 8px;
-  border-top: 1px solid var(--vp-c-divider);
-  margin-top: 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-chart-row) {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 8px 0 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-legend) {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-.skill-chat-bubble-assistant :deep(.demo-legend-item) {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-.skill-chat-bubble-assistant :deep(.demo-dot) {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.skill-chat-bubble-assistant :deep(.demo-price-row) {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  padding: 6px 0;
-}
-.skill-chat-bubble-assistant :deep(.demo-price-big) {
-  font-size: 1.375rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-alerts) {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-alert-item) {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  padding: 4px 10px;
-}
-.skill-chat-pre {
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.8125rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin: 0;
-}
-
-/* ── Sparkline chart (quote scenario) ── */
-.skill-chat-bubble-assistant :deep(.demo-sparkline-row) {
-  display: flex;
-  gap: 12px;
-  padding: 8px 0 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-sparkline-item) {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-}
-.skill-chat-bubble-assistant :deep(.demo-sparkline-label) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-sparkline-chart) {
-  width: 100%;
-  height: 64px;
-}
-.skill-chat-bubble-assistant :deep(.demo-sparkline-svg) {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-.skill-chat-bubble-assistant :deep(.demo-sparkline-price) {
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-/* ── Code blocks with syntax highlighting ── */
-.skill-chat-bubble-assistant :deep(.demo-code-block) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 12px 14px;
-  margin: 4px 0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.78125rem;
-  line-height: 1.65;
-  overflow-x: auto;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-code-block code) {
-  background: none;
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  white-space: pre;
-}
-.skill-chat-bubble-assistant :deep(.hl-k) {
-  color: var(--vp-c-indigo-1);
-}
-.skill-chat-bubble-assistant :deep(.hl-s) {
-  color: var(--up-color);
-}
-.skill-chat-bubble-assistant :deep(.hl-c) {
-  color: var(--vp-c-text-3);
-  font-style: italic;
-}
-.skill-chat-bubble-assistant :deep(.hl-n) {
-  color: var(--vp-c-yellow-1);
-}
-.skill-chat-bubble-assistant :deep(.hl-b) {
-  color: var(--vp-c-brand-1);
-}
-.skill-chat-bubble-assistant :deep(.hl-prompt) {
-  color: var(--vp-c-brand-1);
-  user-select: none;
-}
-
-.skill-chat-idle {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-}
-
-/* Thinking dots */
-.skill-thinking-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--vp-c-text-3);
-  animation: skill-dot-pulse 1.2s ease-in-out infinite;
-}
-.skill-thinking-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.skill-thinking-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-@keyframes skill-dot-pulse {
-  0%,
-  60%,
-  100% {
-    opacity: 0.3;
-    transform: scale(1);
-  }
-  30% {
-    opacity: 1;
-    transform: scale(1.25);
-  }
-}
-
-/* ─── Install section ────────────────────────────────────────────────────── */
-.skill-one-liner {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 20px 24px;
-  margin-bottom: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.skill-one-liner-header {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.skill-one-liner-label {
-  font-size: 0.9375rem;
-  font-weight: 700;
-  color: var(--vp-c-brand-1);
-}
-.skill-one-liner-hint {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-}
-
-.skill-install-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-top: 16px;
-}
-@media (max-width: 640px) {
-  .skill-install-split {
-    grid-template-columns: 1fr;
-  }
-}
-.skill-install-panel {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-.skill-install-panel-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.skill-install-panel-label {
-  font-size: 0.9375rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-install-panel-hint {
-  font-size: 0.8125rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-  margin: 0;
-}
-
-/* ─── Rich demo content styles ────────────────────────────────────────────── */
-
-/* Summary cards (持仓盈亏 / 美股今日) */
-.skill-chat-bubble-assistant :deep(.demo-scards) {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  margin-bottom: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-scard) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-.skill-chat-bubble-assistant :deep(.demo-sl) {
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-bottom: 2px;
-}
-.skill-chat-bubble-assistant :deep(.demo-sv) {
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-ss) {
-  font-size: 0.78rem;
-  margin-top: 1px;
-}
-
-/* Market bar (美股今日) */
-.skill-chat-bubble-assistant :deep(.demo-mkt-bar) {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 8px 12px;
-  margin-bottom: 10px;
-  flex-wrap: wrap;
-}
-.skill-chat-bubble-assistant :deep(.demo-mkt-item) {
-  display: flex;
-  flex-direction: column;
-  padding: 0 12px;
-}
-.skill-chat-bubble-assistant :deep(.demo-mkt-sym) {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-3);
-}
-.skill-chat-bubble-assistant :deep(.demo-mkt-price) {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-mkt-chg) {
-  font-size: 0.75rem;
-}
-.skill-chat-bubble-assistant :deep(.demo-mkt-divider) {
-  width: 1px;
-  height: 32px;
-  background: var(--vp-c-divider);
-}
-
-/* Quote cards (美股今日) */
-.skill-chat-bubble-assistant :deep(.demo-qcards) {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  margin-bottom: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-qcard) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-.skill-chat-bubble-assistant :deep(.demo-qcard-sym) {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-qcard-name) {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-3);
-  margin-bottom: 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-qcard-price) {
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-qcard-chg) {
-  font-size: 0.78rem;
-  margin-top: 1px;
-}
-.skill-chat-bubble-assistant :deep(.demo-qcard-meta) {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-  margin-top: 3px;
-}
-
-/* News feed (美股今日) */
-.skill-chat-bubble-assistant :deep(.demo-news-feed) {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-news-item) {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-.skill-chat-bubble-assistant :deep(.demo-news-dot) {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-top: 5px;
-}
-.skill-chat-bubble-assistant :deep(.demo-news-body) {
-  flex: 1;
-}
-.skill-chat-bubble-assistant :deep(.demo-news-title) {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-1);
-  line-height: 1.4;
-}
-.skill-chat-bubble-assistant :deep(.demo-news-meta) {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-  margin-top: 1px;
-}
-.skill-chat-bubble-assistant :deep(.demo-news-signal) {
-  font-size: 0.68rem;
-  padding: 1px 6px;
-  border-radius: 4px;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-
-/* Highlight / warning boxes */
-.skill-chat-bubble-assistant :deep(.demo-hi-box) {
-  background: var(--vp-c-green-soft);
-  border-left: 3px solid var(--up-color);
-  border-radius: 0 6px 6px 0;
-  padding: 8px 12px;
-  font-size: 0.8rem;
-  color: var(--vp-c-text-1);
-  line-height: 1.55;
-  margin-top: 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-warn-box) {
-  background: var(--vp-c-yellow-soft);
-  border-left: 3px solid var(--vp-c-yellow-1);
-  border-radius: 0 6px 6px 0;
-  padding: 8px 12px;
-  font-size: 0.8rem;
-  color: var(--vp-c-text-1);
-  line-height: 1.55;
-  margin-top: 4px;
-}
-
-/* Research sections (深度研究) */
-.skill-chat-bubble-assistant :deep(.demo-res-section) {
-  margin-bottom: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-res-hd) {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: 6px;
-}
-.skill-chat-bubble-assistant :deep(.demo-res-hd-text) {
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.skill-chat-bubble-assistant :deep(.demo-res-signal) {
-  font-size: 0.68rem;
-  padding: 1px 6px;
-  border-radius: 4px;
-}
-.skill-chat-bubble-assistant :deep(.demo-res-body) {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.55;
-}
-
-/* K-line wrapper */
-.skill-chat-bubble-assistant :deep(.demo-kw) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px;
-  margin-bottom: 10px;
-  overflow: hidden;
-}
-.skill-chat-bubble-assistant :deep(.demo-kw svg) {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-.skill-chat-bubble-assistant :deep(.demo-kh) {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-.skill-chat-bubble-assistant :deep(.demo-kprice) {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-kchg) {
-  font-size: 0.82rem;
-  margin-top: 1px;
-}
-.skill-chat-bubble-assistant :deep(.demo-kmeta) {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-3);
-  margin-top: 1px;
-}
-.skill-chat-bubble-assistant :deep(.demo-kstats) {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-  margin-top: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-kstat) {
-  background: var(--vp-c-bg-mute);
-  border-radius: 6px;
-  padding: 6px 8px;
-}
-.skill-chat-bubble-assistant :deep(.demo-ksl) {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-}
-.skill-chat-bubble-assistant :deep(.demo-ksv) {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-/* Verdict block (深度研究) */
-.skill-chat-bubble-assistant :deep(.demo-verdict) {
-  background: var(--vp-c-bg-mute);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px 12px;
-  margin-top: 8px;
-}
-.skill-chat-bubble-assistant :deep(.demo-verdict-hd) {
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--vp-c-text-2);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.skill-chat-bubble-assistant :deep(.demo-verdict-rows) {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.skill-chat-bubble-assistant :deep(.demo-verdict-row) {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  font-size: 0.78rem;
-}
-.skill-chat-bubble-assistant :deep(.demo-verdict-label) {
-  flex-shrink: 0;
-  width: 52px;
-  color: var(--vp-c-text-3);
-  padding-top: 1px;
-}
-.skill-chat-bubble-assistant :deep(.demo-verdict-val) {
-  flex: 1;
-  color: var(--vp-c-text-1);
-  line-height: 1.65;
-}
-
-/* Conditional order cards (条件委托) */
-.skill-chat-bubble-assistant :deep(.demo-cond-block) {
-  margin-bottom: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-header) {
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 6px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-body) {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.55;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-cards) {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  margin-bottom: 10px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-card) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px 12px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-card-buy) {
-  border-top: 2px solid var(--up-color);
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-card-sell) {
-  border-top: 2px solid var(--down-color);
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-card-hd) {
-  font-size: 0.82rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  margin-bottom: 6px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-detail-row) {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.75rem;
-  margin-bottom: 2px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-key) {
-  color: var(--vp-c-text-3);
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-status) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px 12px;
-  margin-top: 8px;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-status-hd) {
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--vp-c-text-2);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-status-row) {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 0.78rem;
-  padding: 3px 0;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.skill-chat-bubble-assistant :deep(.demo-cond-status-row:last-child) {
-  border-bottom: none;
-}
-
-/* Progress bar */
-.skill-chat-bubble-assistant :deep(.demo-progress-bar) {
-  background: var(--vp-c-divider);
-  border-radius: 4px;
-  height: 6px;
-  overflow: hidden;
-  margin: 8px 0;
-}
-.skill-chat-bubble-assistant :deep(.demo-progress-fill) {
-  height: 100%;
-  border-radius: 4px;
-  background: linear-gradient(90deg, var(--vp-c-indigo-1), var(--up-color));
-}
-
-/* AI signal badge */
-.skill-chat-bubble-assistant :deep(.demo-ai-sig) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.68rem;
-  color: var(--vp-c-indigo-1);
-  background: var(--vp-c-indigo-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  padding: 1px 6px;
-}
-
-/* Terminal block (no dark background) */
-.skill-chat-bubble-assistant :deep(.demo-term) {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px 12px;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
-  font-size: 0.75rem;
-  line-height: 1.75;
-  white-space: pre;
-  overflow-x: auto;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-p) {
-  color: var(--vp-c-brand-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-hd) {
-  color: var(--vp-c-text-1);
-  font-weight: 700;
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-dim) {
-  color: var(--vp-c-text-3);
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-pos) {
-  color: var(--up-color);
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-neg) {
-  color: var(--down-color);
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-hi) {
-  color: var(--vp-c-yellow-1);
-}
-.skill-chat-bubble-assistant :deep(.demo-term .t-c) {
-  color: var(--vp-c-indigo-1);
-}
-.skill-footer-wrap {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-/* ─── Skills Catalog ──────────────────────────────────────────────────────── */
-.sc-header {
-  margin-bottom: 24px;
-}
-.sc-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 9px;
-  border-radius: 999px;
-  background: rgba(0, 184, 184, 0.1);
-  color: #00b8b8;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  margin-bottom: 10px;
-}
-.dark .sc-badge {
-  background: rgba(0, 184, 184, 0.15);
-}
-
-/* Toolbar */
-.sc-toolbar {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  margin-bottom: 20px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-.sc-tabs-wrap {
-  flex: 1;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.sc-tabs-wrap::-webkit-scrollbar {
-  display: none;
-}
-.sc-tabs {
-  display: flex;
-  gap: 2px;
-  position: relative;
-}
-.sc-tab {
-  padding: 8px 9px;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  color: var(--vp-c-text-2);
-  font-size: 13px;
-  font-weight: 500;
-  transition: color 0.15s;
-}
-.sc-tab:hover {
-  color: var(--vp-c-text-1);
-}
-.sc-tab--active {
-  color: var(--vp-c-text-1);
-  font-weight: 600;
-}
-.sc-tabs-indicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background: #00b8b8;
-  border-radius: 1px;
-  transition:
-    left 0.2s ease,
-    width 0.2s ease;
-  pointer-events: none;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
 }
-.sc-tab-count {
-  margin-left: 5px;
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-  font-variant-numeric: tabular-nums;
-  padding: 1px 6px;
+.ai-agent-chip {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 12px 5px 6px;
   border-radius: 999px;
-  background: var(--vp-c-bg-soft);
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1;
+  background: var(--lb-card);
+  color: var(--lb-fg-1);
+  border: 1px solid var(--app-card-stroke);
+  white-space: nowrap;
 }
-.sc-tab--active .sc-tab-count {
-  background: rgba(0, 184, 184, 0.12);
-  color: #00b8b8;
+.ai-agent-more {
+  background: transparent !important;
+  border: 1px dashed var(--app-card-stroke) !important;
+  color: var(--lb-fg-3) !important;
 }
-.dark .sc-tab--active .sc-tab-count {
-  background: rgba(0, 184, 184, 0.18);
+.ai-agent-mark {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  color: #fff;
+  flex-shrink: 0;
 }
 
-/* Search */
-.sc-search-wrap {
-  flex: 0 0 140px;
+/* ---- Copy button ---- */
+.code-copy {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--lb-fg-3);
+  padding: 2px;
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 5px 8px;
-  border-radius: 7px;
-  background: var(--vp-c-bg-soft);
-  margin-bottom: 6px;
-}
-.sc-search-icon {
-  color: var(--vp-c-text-3);
+  border-radius: 4px;
+  transition: color 0.15s;
   flex-shrink: 0;
-  transition: color 0.18s;
 }
-.sc-search-wrap:focus-within .sc-search-icon {
-  color: #00b8b8;
+.code-copy:hover {
+  color: var(--lb-fg-1);
 }
-.sc-search-input {
-  flex: 1;
-  border: 0;
-  outline: none;
-  background: transparent;
-  font: inherit;
-  font-size: 12.5px;
-  color: var(--vp-c-text-1);
-  min-width: 0;
+
+/* ---- Demo shell ---- */
+.skill-demo-shell {
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--lb-bg-1);
 }
-.sc-search-clear {
-  border: 0;
+.skill-demo-agent-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--app-card-stroke);
+  background: var(--lb-bg-2);
+  padding: 0 16px;
+  overflow-x: auto;
+}
+.skill-demo-agent-tab {
+  padding: 10px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--lb-fg-3);
   background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
   cursor: pointer;
-  color: var(--vp-c-text-3);
-  font-size: 14px;
-  padding: 0 2px;
-  line-height: 1;
+  white-space: nowrap;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
 }
-
-/* Grid */
-.sc-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  animation: sc-grid-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+.skill-demo-agent-tab:hover {
+  color: var(--lb-fg-1);
 }
-@media (max-width: 960px) {
-  .sc-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.skill-demo-agent-tab.is-active {
+  color: var(--lb-fg-1);
+  border-bottom-color: var(--lb-brand);
 }
-@media (max-width: 600px) {
-  .sc-grid {
+.skill-demo-body-grid {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+}
+@media (max-width: 768px) {
+  .skill-demo-body-grid {
     grid-template-columns: 1fr;
   }
 }
-
-@keyframes sc-grid-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
+.skill-demo-nav {
+  border-right: 1px solid var(--app-card-stroke);
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
 }
-
-/* Card */
-.sc-card {
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
+.skill-demo-nav-item {
+  padding: 10px 20px;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  background: transparent;
+  border: none;
+  text-align: left;
   cursor: pointer;
+  border-left: 2px solid transparent;
   transition:
-    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
-    box-shadow 0.25s;
-  animation: sc-card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
-  animation-delay: calc(var(--sc-i, 0) * 30ms);
+    color 0.15s,
+    background 0.15s;
+  line-height: 1.4;
 }
-@keyframes sc-card-in {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
+.skill-demo-nav-item:hover {
+  background: var(--lb-hover);
+  color: var(--lb-fg-1);
+}
+.skill-demo-nav-item.is-active {
+  color: var(--lb-fg-1);
+  font-weight: 600;
+  background: color-mix(in srgb, var(--lb-brand) 6%, transparent);
+}
+.skill-demo-main {
+  padding: 28px 32px;
+  min-width: 0;
+}
+@media (max-width: 768px) {
+  .skill-demo-main {
+    padding: 20px 16px;
   }
 }
-.sc-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 12px 30px rgba(43, 62, 92, 0.12);
+.skill-demo-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  margin: 0 0 10px;
+  line-height: 1.35;
 }
-.dark .sc-card:hover {
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+.skill-demo-desc {
+  font-size: 13.5px;
+  color: var(--lb-fg-2);
+  line-height: 1.6;
+  margin: 0 0 20px;
 }
-
-.sc-ripple {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(0, 184, 184, 0.4) 0%, rgba(0, 184, 184, 0.16) 45%, transparent 75%);
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  opacity: 0;
-  z-index: 0;
+.skill-demo-prompt-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--lb-fg-3);
+  margin-bottom: 8px;
 }
-.sc-card-inner {
-  position: relative;
-  z-index: 1;
+.skill-demo-prompt {
+  display: flex;
+  gap: 10px;
+  background: color-mix(in srgb, var(--lb-brand) 6%, transparent);
+  border: 1px solid color-mix(in srgb, var(--lb-brand) 25%, transparent);
+  border-radius: 10px;
+  padding: 12px 14px;
+  font-size: 13.5px;
+  color: var(--lb-fg-1);
+  line-height: 1.55;
+  margin-bottom: 20px;
+}
+.skill-demo-chat {
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.skill-demo-chat-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  background: var(--lb-bg-2);
+  border-bottom: 1px solid var(--app-card-stroke);
+  gap: 4px;
+}
+.skill-demo-chat-body {
   padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  height: 100%;
-  box-sizing: border-box;
+  gap: 12px;
+  max-height: 420px;
+  overflow-y: auto;
 }
-.sc-card-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
+.skill-demo-bubble-user {
+  align-self: flex-end;
+  max-width: 80%;
+  background: var(--lb-brand);
+  color: #fff;
+  border-radius: 12px 12px 2px 12px;
+  padding: 10px 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
-.sc-card-title {
+.skill-demo-bubble-assistant {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px 12px 12px 2px;
+  padding: 14px;
   display: flex;
-  align-items: baseline;
-  gap: 6px;
-  flex-wrap: wrap;
-  min-width: 0;
+  flex-direction: column;
+  gap: 12px;
 }
-.sc-card-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  line-height: 1.4;
-  white-space: nowrap;
+.skill-demo-bubble-text {
+  font-size: 13px;
+  color: var(--lb-fg-1);
+  line-height: 1.55;
+  margin: 0;
 }
-.sc-card-pkg {
-  font-family: var(--vp-font-family-mono);
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-  white-space: nowrap;
+.skill-demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
 }
-.sc-card-tag {
-  font-size: 10px;
+.skill-demo-table th {
+  text-align: left;
+  padding: 6px 10px;
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-3);
   font-weight: 600;
-  padding: 1px 6px;
-  border-radius: 999px;
-  flex-shrink: 0;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid var(--app-card-stroke);
 }
-.sc-card-tag--hot {
-  background: rgba(245, 158, 11, 0.12);
-  color: rgb(217, 119, 6);
+.skill-demo-table td {
+  padding: 7px 10px;
+  color: var(--lb-fg-2);
+  border-bottom: 1px solid var(--app-card-stroke);
+  vertical-align: middle;
 }
-.dark .sc-card-tag--hot {
-  background: rgba(245, 158, 11, 0.18);
-  color: rgb(245, 158, 11);
+.skill-demo-table tr:last-child td {
+  border-bottom: none;
 }
-.sc-card-tag--risk {
-  background: rgba(255, 80, 0, 0.1);
-  color: #ff5000;
+.skill-demo-table td.is-sym {
+  font-weight: 600;
+  color: var(--lb-fg-1);
+  font-family: var(--vp-font-family-mono);
+  font-size: 11.5px;
 }
-.sc-card-tag--default {
-  background: var(--vp-c-bg-soft);
-  color: var(--vp-c-text-2);
+.skill-demo-table tr.is-best {
+  background: color-mix(in srgb, var(--lb-brand) 8%, transparent);
 }
-.sc-card-arrow {
-  color: var(--vp-c-text-3);
-  flex-shrink: 0;
-  margin-top: 2px;
-  transition:
-    transform 0.2s,
-    color 0.2s;
+.skill-demo-table tr.is-best td {
+  color: var(--lb-fg-1);
 }
-.sc-card:hover .sc-card-arrow {
-  color: #00b8b8;
-  transform: translateX(3px);
+.skill-demo-table tr.is-cross td {
+  color: var(--lb-fg-1);
 }
-.sc-card-desc {
-  font-size: 12px;
+.skill-demo-callout {
+  font-size: 12.5px;
   line-height: 1.6;
-  color: var(--vp-c-text-2);
-  flex: 1;
-  margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  color: var(--lb-fg-2);
+  background: color-mix(in srgb, var(--lb-brand) 5%, transparent);
+  border-left: 3px solid var(--lb-brand);
+  padding: 10px 12px;
+  border-radius: 0 6px 6px 0;
+}
+
+/* ---- Skill Catalog ---- */
+.skill-marketplace-card {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  padding: 14px 16px;
+  min-width: 300px;
+  max-width: 340px;
 }
-.sc-card-prompt {
+.skill-marketplace-label {
   display: flex;
-  align-items: flex-start;
-  gap: 5px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  padding: 8px 10px;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--lb-fg-2);
+  font-weight: 500;
+  margin-bottom: 10px;
 }
-.dark .sc-card-prompt {
-  background: var(--vp-c-bg-soft);
+.skill-marketplace-pill {
+  font-size: 10px;
+  font-weight: 700;
+  background: color-mix(in srgb, var(--lb-brand) 15%, transparent);
+  color: var(--lb-brand);
+  padding: 2px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.05em;
+  margin-left: auto;
 }
-.sc-card-quote-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  margin-top: 2px;
+.skill-marketplace-cmd {
+  display: block;
+  font-size: 11.5px;
+  font-family: var(--vp-font-family-mono);
+  color: var(--lb-fg-1);
+  background: var(--lb-bg-1);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 6px;
+  padding: 6px 10px;
+  margin-bottom: 6px;
+  word-break: break-all;
 }
-.sc-card-prompt-text {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--vp-c-text-2);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.skill-marketplace-cmd:last-child {
+  margin-bottom: 0;
 }
-
-/* Empty */
-.sc-empty {
-  padding: 40px 16px;
-  text-align: center;
-  color: var(--vp-c-text-3);
-  font-size: 13px;
-  border: 1px dashed var(--vp-c-divider);
-  border-radius: 10px;
+.skill-cat-tabs {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-.sc-empty-clear {
-  border: 0;
-  background: transparent;
-  color: #00b8b8;
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  padding: 0;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 20px;
 }
-
-/* Expand */
-.sc-expand-row {
+.skill-cat-tab {
   display: flex;
-  justify-content: center;
-  margin-top: 24px;
-}
-.sc-expand-btn {
-  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 18px;
+  gap: 6px;
+  padding: 5px 12px;
   border-radius: 999px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-  font: inherit;
   font-size: 13px;
   font-weight: 500;
+  color: var(--lb-fg-2);
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
   cursor: pointer;
-  transition:
-    border-color 0.15s,
-    background 0.15s;
-}
-.sc-expand-btn:hover {
-  border-color: #00b8b8;
-}
-
-/* Install bar */
-
-/* Modal */
-/* ── Modal ── */
-.sc-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(10, 14, 25, 0.55);
-  backdrop-filter: blur(2px);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-}
-.sc-modal {
-  width: 100%;
-  max-width: 760px;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 16px;
-  box-shadow:
-    0 20px 60px -10px rgba(0, 0, 0, 0.35),
-    0 8px 24px rgba(0, 0, 0, 0.18);
-  color: var(--vp-c-text-1);
-  overflow: clip;
-}
-/* Header */
-.sc-modal-head {
-  padding: 24px 28px 20px;
-  position: relative;
-  overflow: visible;
-  background: linear-gradient(135deg, rgba(0, 184, 184, 0.1) 0%, transparent 70%);
-  border-bottom: 1px solid var(--vp-c-divider);
-  flex-shrink: 0;
-}
-.dark .sc-modal-head {
-  background: linear-gradient(135deg, rgba(0, 184, 184, 0.18) 0%, transparent 70%);
-}
-.sc-modal-deco {
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  opacity: 0.07;
-  pointer-events: none;
-}
-.dark .sc-modal-deco {
-  opacity: 0.1;
+  transition: all 0.15s;
 }
-.sc-modal-close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: 0;
-  background: rgba(0, 0, 0, 0.05);
-  color: var(--vp-c-text-2);
-  cursor: pointer;
-  font-size: 18px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.skill-cat-tab:hover {
+  color: var(--lb-fg-1);
+  border-color: var(--lb-fg-3);
 }
-.dark .sc-modal-close {
-  background: rgba(255, 255, 255, 0.06);
+.skill-cat-tab.is-active {
+  background: var(--lb-brand);
+  color: #fff;
+  border-color: var(--lb-brand);
 }
-.sc-modal-close:hover {
-  background: rgba(0, 0, 0, 0.1);
+.skill-cat-tab.is-active .skill-cat-count {
+  background: rgba(255, 255, 255, 0.25);
+  color: #fff;
 }
-.dark .sc-modal-close:hover {
-  background: rgba(255, 255, 255, 0.1);
+.skill-cat-count {
+  font-size: 11px;
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-3);
+  border-radius: 999px;
+  padding: 1px 7px;
+  font-weight: 600;
 }
-.sc-modal-hero {
-  display: flex;
-  align-items: center;
+.skill-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 12px;
-  margin-bottom: 14px;
 }
-.sc-modal-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
-  flex-shrink: 0;
-  background: rgba(0, 184, 184, 0.12);
+.skill-card {
   display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.dark .sc-modal-icon {
-  background: rgba(0, 184, 184, 0.18);
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  background: var(--lb-bg-1);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  text-decoration: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
 }
-.sc-modal-title {
-  font-size: 22px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin: 0 0 6px;
-  line-height: 1.2;
+.skill-card:hover {
+  border-color: var(--lb-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-brand) 10%, transparent);
 }
-.sc-modal-meta {
+.skill-card-head {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  font-size: 12px;
-  color: var(--vp-c-text-3);
 }
-.sc-modal-meta code {
+.skill-card-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--lb-fg-1);
+  margin: 0;
+}
+.skill-card-id {
+  font-size: 11px;
+  color: var(--lb-fg-3);
   font-family: var(--vp-font-family-mono);
-  font-size: 12px;
-  color: var(--vp-c-text-3);
+  background: var(--lb-bg-2);
+  line-height: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--app-card-stroke);
 }
-.sc-modal-dot {
-  opacity: 0.4;
+.skill-card-tag {
+  font-size: 10px;
+  font-weight: 700;
+  background: color-mix(in srgb, var(--lb-brand) 15%, transparent);
+  color: var(--lb-brand);
+  padding: 2px 7px;
+  border-radius: 4px;
+  letter-spacing: 0.04em;
+  margin-left: auto;
 }
-.sc-modal-desc {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--vp-c-text-2);
-  margin: 0 0 16px;
-  max-width: 580px;
+.skill-card-desc {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.55;
+  margin: 0;
+  flex: 1;
+}
+.skill-card-example {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  font-style: italic;
+  padding-top: 8px;
+  border-top: 1px solid var(--app-card-stroke);
+  line-height: 1.5;
+}
+
+/* ---- Capability Reference ---- */
+.skill-cap-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 24px 32px;
 }
-.sc-modal-actions {
+.skill-cap-col ul {
+  list-style: none;
+  padding: 0;
+  margin: 10px 0 0;
   display: flex;
+  flex-direction: column;
   gap: 8px;
-  flex-wrap: wrap;
 }
-.sc-modal-btn-outline {
-  padding: 8px 14px;
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-  background: transparent;
-  color: var(--vp-c-text-1);
+.skill-cap-col ul li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
   font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  font-family: inherit;
+  color: var(--lb-fg-2);
+  line-height: 1.5;
+}
+
+/* ---- User Cases ---- */
+.user-cases-grid {
+  display: grid;
+  grid-template-columns: 1fr repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 1024px) {
+  .user-cases-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (max-width: 640px) {
+  .user-cases-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.user-case-award {
+  background: linear-gradient(135deg, color-mix(in srgb, var(--lb-brand) 15%, var(--lb-bg-2)), var(--lb-bg-2));
+  border: 1px solid color-mix(in srgb, var(--lb-brand) 30%, transparent);
+  border-radius: 16px;
+  padding: 24px;
   text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  transition: background 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  transition: box-shadow 0.15s;
 }
-.sc-modal-btn-outline:hover {
-  background: var(--vp-c-bg-soft);
+.user-case-award:hover {
+  box-shadow: 0 4px 24px color-mix(in srgb, var(--lb-brand) 20%, transparent);
 }
-/* Body */
-.sc-modal-body {
-  padding: 22px 28px 28px;
-  overflow-y: auto;
-  flex: 1;
+.user-case-award-tag {
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  color: var(--lb-brand);
+  background: color-mix(in srgb, var(--lb-brand) 15%, transparent);
+  padding: 3px 8px;
+  border-radius: 4px;
+  width: fit-content;
 }
-.sc-modal-section {
-  margin-bottom: 22px;
+.user-case-award-h {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  line-height: 1.4;
+  margin: 0;
 }
-.sc-modal-section:last-child {
-  margin-bottom: 0;
+.user-case-award-d {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.55;
+  margin: 6px 0 0;
 }
-.sc-modal-section-hd {
+.user-case-award-rewards {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
+  gap: 24px;
+  margin-top: auto;
 }
-.sc-modal-section-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--vp-c-text-3);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+.user-case-award-num {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--lb-brand);
 }
-.sc-modal-section-hint {
-  font-size: 11px;
-  color: var(--vp-c-text-3);
-  text-align: right;
+.user-case-award-l {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--lb-fg-3);
+  letter-spacing: 0.08em;
+  margin-top: 2px;
 }
-/* Client tabs */
-.sc-modal-client-tabs {
+.user-case {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  padding: 20px;
+  text-decoration: none;
   display: flex;
-  gap: 2px;
-  border-bottom: 1px solid var(--vp-c-divider);
-  margin-bottom: 12px;
-  overflow-x: auto;
-}
-.sc-modal-client-tab {
-  padding: 8px 12px;
-  border: 0;
-  background: transparent;
-  color: var(--vp-c-text-2);
-  font-weight: 500;
-  border-bottom: 2px solid transparent;
-  font-size: 12.5px;
-  cursor: pointer;
-  font-family: inherit;
-  white-space: nowrap;
-  transition: color 0.15s;
-  margin-bottom: -1px;
+  flex-direction: column;
+  gap: 10px;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
 }
-.sc-modal-client-tab--active {
-  color: var(--vp-c-text-1);
-  font-weight: 600;
-  border-bottom-color: #00b8b8;
+.user-case:hover {
+  border-color: var(--lb-fg-3);
+  box-shadow: 0 2px 12px color-mix(in srgb, var(--lb-fg-1) 6%, transparent);
 }
-/* Command block */
-.sc-modal-cmd-block {
-  position: relative;
-  padding: 10px 42px 10px 14px;
-  border-radius: 8px;
-  background: var(--vp-c-bg-soft);
+.user-case-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.sc-modal-cmd-text {
-  display: block;
-  font-size: 12px;
+.user-case-idx {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--lb-fg-3);
   font-family: var(--vp-font-family-mono);
-  color: var(--vp-c-text-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.sc-modal-cmd-text--multi {
-  white-space: pre;
-  overflow-x: auto;
 }
-.sc-modal-cmd-copy {
-  position: absolute;
-  top: 8px;
-  right: 6px;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: 0;
-  background: transparent;
-  color: var(--vp-c-text-3);
-  cursor: pointer;
-  display: inline-flex;
+.user-case-read {
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  display: flex;
   align-items: center;
-  justify-content: center;
-  transition: background 0.15s;
+  gap: 4px;
 }
-.sc-modal-cmd-copy:hover {
-  background: rgba(0, 0, 0, 0.06);
+.user-case:hover .user-case-read {
+  color: var(--lb-fg-1);
 }
-.dark .sc-modal-cmd-copy:hover {
-  background: rgba(255, 255, 255, 0.08);
+.user-case-title {
+  font-size: 14.5px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  line-height: 1.4;
+  margin: 0;
 }
-
-.sc-modal-labeled-cmd {
-  margin-bottom: 10px;
+.user-case-desc {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.55;
+  margin: 0;
+  flex: 1;
 }
-.sc-modal-labeled-cmd:last-child {
-  margin-bottom: 0;
+.user-case-metric {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px solid var(--app-card-stroke);
 }
-.sc-modal-cmd-label {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  margin-bottom: 6px;
+.user-case-metric-v {
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1;
 }
-.sc-modal-notes {
-  margin: 10px 0 0;
-  font-size: 12.5px;
-  color: var(--vp-c-text-2);
-  line-height: 1.7;
+.user-case-metric-l {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--lb-fg-3);
+  letter-spacing: 0.08em;
 }
-.sc-modal-notes code {
-  font-family: var(--vp-font-family-mono);
-  font-size: 11.5px;
-  color: var(--vp-c-text-3);
+
+/* ---- Get Started ---- */
+.skill-getstarted-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 36px;
 }
-/* Plugin bar */
-.sc-plugin-bar {
-  margin-top: 12px;
+@media (max-width: 900px) {
+  .skill-getstarted-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.skill-getstarted-card {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  padding: 24px;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 16px;
-  border-radius: 10px;
-  background: rgba(245, 158, 11, 0.08);
-  flex-wrap: wrap;
+  flex-direction: column;
+  position: relative;
+}
+.skill-getstarted-card.recommended {
+  border-color: var(--lb-brand);
+  background: color-mix(in srgb, var(--lb-brand) 4%, var(--lb-bg-2));
 }
-.dark .sc-plugin-bar {
-  background: rgba(245, 158, 11, 0.12);
+.skill-getstarted-badge {
+  position: absolute;
+  top: -1px;
+  left: 20px;
+  font-size: 10px;
+  font-weight: 700;
+  background: var(--lb-brand);
+  color: #fff;
+  padding: 3px 10px;
+  border-radius: 0 0 6px 6px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
-.sc-plugin-left {
+.skill-getstarted-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
   display: flex;
   align-items: center;
-  gap: 12px;
-  min-width: 0;
+  justify-content: center;
 }
-.sc-plugin-icon {
-  width: 34px;
-  height: 34px;
+.skill-getstarted-cmd {
+  margin-top: 14px;
+  background: var(--lb-bg-1);
+  border: 1px solid var(--app-card-stroke);
   border-radius: 8px;
-  background: rgba(245, 158, 11, 0.15);
+  padding: 10px 12px;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+  align-items: flex-start;
+  gap: 8px;
 }
-.sc-plugin-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
+.skill-getstarted-cmd code {
+  font-size: 12px;
+  font-family: var(--vp-font-family-mono);
+  color: var(--lb-fg-1);
+  line-height: 1.6;
+  white-space: pre;
+  flex: 1;
+}
+.skill-getstarted-foot {
   display: flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 28px;
+  font-size: 13px;
+  color: var(--lb-fg-2);
   flex-wrap: wrap;
 }
-.sc-plugin-badge {
-  font-size: 9px;
-  padding: 1px 5px;
-  border-radius: 0;
-  background: rgb(245, 158, 11);
-  color: #fff;
-  letter-spacing: 0.04em;
-  scale: 0.8;
-}
-.sc-plugin-desc {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  margin-top: 3px;
-  line-height: 1.5;
+.skill-getstarted-foot a {
+  color: var(--lb-fg-2);
+  text-decoration: none;
 }
-.sc-plugin-right {
-  flex-shrink: 0;
+.skill-getstarted-foot a:hover {
+  text-decoration: underline;
 }
-.sc-plugin-cmd-block {
-  position: relative;
-  padding: 10px 36px 10px 12px;
-  border-radius: 6px;
-  background: rgba(0, 0, 0, 0.045);
+
+/* ---- Shared section ---- */
+.section {
+  padding: 80px 0;
 }
-.dark .sc-plugin-cmd-block {
-  background: rgba(255, 255, 255, 0.045);
+.section-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
 }
-.sc-plugin-cmd-lines {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  font-size: 12px;
-  font-family: var(--vp-font-family-mono);
-  color: var(--vp-c-text-1);
-  white-space: nowrap;
+.eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--lb-brand);
 }
-.sc-plugin-cmd-lines code {
-  background: transparent;
-  padding: 0;
-  border-radius: 0;
+.h-display {
+  font-size: clamp(32px, 5vw, 52px);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  color: var(--lb-fg-1);
 }
-.sc-plugin-kw {
-  color: #e09765;
+.h-section {
+  font-size: clamp(22px, 3vw, 30px);
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--lb-fg-1);
+  margin: 0;
 }
-
-/* Transitions */
-.sc-modal-enter-active {
-  transition: opacity 0.18s ease-out;
+.h-card {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  margin: 0;
 }
-.sc-modal-leave-active {
-  transition: opacity 0.15s;
+.t-body {
+  font-size: 16px;
+  line-height: 1.65;
+  color: var(--lb-fg-2);
 }
-.sc-modal-enter-from,
-.sc-modal-leave-to {
-  opacity: 0;
+.t-meta {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+  margin: 0;
 }
-.sc-modal-enter-active .sc-modal,
-.sc-modal-leave-active .sc-modal {
-  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 18px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.15s;
 }
-.sc-modal-enter-from .sc-modal {
-  transform: translateY(12px) scale(0.98);
+.btn:hover {
+  opacity: 0.85;
 }
-.sc-modal-leave-to .sc-modal {
-  transform: scale(0.97);
+.btn-primary {
+  background: var(--lb-brand);
+  color: #fff;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/index.ts b/docs/.vitepress/theme/components/index.ts
index 05679cd9..c434df1d 100644
--- a/docs/.vitepress/theme/components/index.ts
+++ b/docs/.vitepress/theme/components/index.ts
@@ -1,3 +1,5 @@
+export { default as AppNav } from './AppNav.vue'
+export { default as AppFooter } from './AppFooter.vue'
 export { default as CliCommand } from './CliCommand.vue'
 export { default as FeaturesMenu } from './FeaturesMenu.vue'
 export { default as Tabs } from './Tabs.vue'
diff --git a/docs/.vitepress/theme/composables/index.ts b/docs/.vitepress/theme/composables/index.ts
index c0421df5..f180e869 100644
--- a/docs/.vitepress/theme/composables/index.ts
+++ b/docs/.vitepress/theme/composables/index.ts
@@ -1,4 +1,5 @@
 export { useThemeToggle } from './useThemeToggle'
+export { useLbDarkSync } from './useLbDarkSync'
 export { isLoginState, initLoginState, toggleMockLogin } from './useLoginState'
 export { useI18nSync } from './useI18nSync'
 export { useHighlighter } from './useHighlighter'
diff --git a/docs/.vitepress/theme/composables/useLbDarkSync.ts b/docs/.vitepress/theme/composables/useLbDarkSync.ts
new file mode 100644
index 00000000..53c5f325
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useLbDarkSync.ts
@@ -0,0 +1,9 @@
+import { watch } from 'vue'
+import { useData } from 'vitepress'
+
+export function useLbDarkSync() {
+  const { isDark } = useData()
+  watch(isDark, (dark) => {
+    document.documentElement.classList.toggle('lb-dark', dark)
+  }, { immediate: true })
+}
diff --git a/docs/.vitepress/theme/layouts/Content.vue b/docs/.vitepress/theme/layouts/Content.vue
index 3ec050a3..4c5ae9e7 100644
--- a/docs/.vitepress/theme/layouts/Content.vue
+++ b/docs/.vitepress/theme/layouts/Content.vue
@@ -28,10 +28,6 @@ const { isHome, hasSidebar } = useLayout()
 }
 
 @media (min-width: 960px) {
-  .VPContent {
-    padding-top: var(--vp-nav-height);
-  }
-
   .VPContent.has-sidebar {
     margin: var(--vp-layout-top-height, 0px) 0 0;
     padding-left: var(--vp-sidebar-width);
diff --git a/docs/.vitepress/theme/layouts/Layout.vue b/docs/.vitepress/theme/layouts/Layout.vue
index 72c7eb00..4d57468f 100644
--- a/docs/.vitepress/theme/layouts/Layout.vue
+++ b/docs/.vitepress/theme/layouts/Layout.vue
@@ -1,26 +1,20 @@
 <script setup lang="ts">
-import UserAvatar from '../components/UserAvatar/index.vue'
-import DashboardNavLink from '../components/DashboardNavLink.vue'
 import MockLoginPanel from '../components/MockLoginPanel.vue'
 import Breadcrumb from '../components/Breadcrumb/index.vue'
 import Layout from './LayoutInner.vue'
-import { useI18nSync, useHighlighter, useLLMMarkdownLink } from '../composables'
+import { useI18nSync, useHighlighter, useLLMMarkdownLink, useLbDarkSync } from '../composables'
 
 const isDev = import.meta.env.DEV
 
-// 使用抽离的 hooks
 useI18nSync()
 useHighlighter()
+useLbDarkSync()
 
 const { llmMarkdownLink } = useLLMMarkdownLink()
 </script>
 
 <template>
   <Layout>
-    <template #nav-bar-content-after>
-      <DashboardNavLink />
-      <UserAvatar />
-    </template>
     <template #layout-bottom>
       <MockLoginPanel v-if="isDev" />
     </template>
diff --git a/docs/.vitepress/theme/layouts/LayoutInner.vue b/docs/.vitepress/theme/layouts/LayoutInner.vue
index 2475590b..3da8b774 100644
--- a/docs/.vitepress/theme/layouts/LayoutInner.vue
+++ b/docs/.vitepress/theme/layouts/LayoutInner.vue
@@ -6,15 +6,15 @@ import VPContent from 'vitepress/dist/client/theme-default/components/VPContent.
 import VPFooter from 'vitepress/dist/client/theme-default/components/VPFooter.vue'
 import Footer from '../components/HomePage/Footer.vue'
 import VPLocalNav from 'vitepress/dist/client/theme-default/components/VPLocalNav.vue'
-import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'
 import VPSidebar from 'vitepress/dist/client/theme-default/components/VPSidebar.vue'
 import VPSkipLink from 'vitepress/dist/client/theme-default/components/VPSkipLink.vue'
+import AppNav from '../components/AppNav.vue'
 import { useData } from 'vitepress'
 import { registerWatchers } from 'vitepress/dist/client/theme-default/composables/layout.js'
 import { useSidebarControl } from 'vitepress/dist/client/theme-default/composables/sidebar.js'
 import { useTryItMode } from '../composables'
 import TryItContent from '../components/TryIt/Content.vue'
-import Content from './Content.vue'
+import ContentWrapper from './Content.vue'
 import 'vitepress/theme'
 import ApiReference from '../components/ApiReference.vue'
 
@@ -39,14 +39,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     <slot name="layout-top" />
     <VPSkipLink />
     <VPBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
-    <VPNav>
-      <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
-      <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
-      <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
-      <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
-      <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
-      <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
-    </VPNav>
+    <AppNav />
     <VPLocalNav v-if="!isApiReference" :open="isSidebarOpen" @open-menu="openSidebar" />
 
     <VPSidebar v-if="!isApiReference" :open="isSidebarOpen">
@@ -91,9 +84,9 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
     <ClientOnly v-else-if="showTryIt">
-      <Content>
+      <ContentWrapper>
         <TryItContent />
-      </Content>
+      </ContentWrapper>
     </ClientOnly>
     <ClientOnly v-else-if="isApiReference">
       <ApiReference />
diff --git a/docs/.vitepress/theme/style/app-styles.css b/docs/.vitepress/theme/style/app-styles.css
new file mode 100644
index 00000000..0501262a
--- /dev/null
+++ b/docs/.vitepress/theme/style/app-styles.css
@@ -0,0 +1,2739 @@
+/* ============================================================
+   Longbridge Developers — LBUS 5.0 App Styles
+   Merged: app.css + app-pages.css + app-skill.css + app-pricing.css
+   Element-level resets are intentionally omitted to avoid
+   conflicting with VitePress doc page styles.
+   ============================================================ */
+
+/* App-specific extra tokens */
+:root {
+  --app-max: 1240px;
+  --nav-h: 60px;
+  --app-canvas: #fafafa;
+  --app-card-stroke: #ecedef;
+  --app-card-stroke-strong: #e0e1e4;
+  --app-shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 0 0 1px rgba(15, 17, 21, 0.04);
+  --app-shadow-2: 0 8px 24px -6px rgba(15, 17, 21, 0.1), 0 2px 6px rgba(15, 17, 21, 0.04);
+  --app-shadow-3: 0 24px 60px -16px rgba(15, 17, 21, 0.18), 0 4px 12px rgba(15, 17, 21, 0.04);
+  --app-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+}
+
+.lb-dark {
+  --app-canvas: #06080f;
+  --app-card-stroke: #1f232e;
+  --app-card-stroke-strong: #2c3039;
+  --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --app-shadow-2: 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
+  --app-shadow-3: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
+}
+
+/* ---- Nav ---- */
+.app-nav {
+  position: sticky;
+  top: 0;
+  z-index: 1020;
+  height: var(--nav-h);
+  font-family: var(--lb-font-sans);
+  background: color-mix(in srgb, var(--lb-bg-1) 80%, transparent);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.app-nav-inner {
+  height: 100%;
+  max-width: var(--app-max);
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+.app-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: -0.01em;
+  color: var(--lb-fg-1);
+  white-space: nowrap;
+}
+.brand-logo {
+  display: block;
+  height: 22px;
+  width: auto;
+}
+.brand-logo-dark {
+  display: none;
+}
+.lb-dark .brand-logo-light {
+  display: none;
+}
+.lb-dark .brand-logo-dark {
+  display: block;
+}
+.app-brand-mark {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: var(--lb-fg-1);
+  color: var(--lb-bg-1);
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 13px;
+  letter-spacing: -0.05em;
+}
+.app-brand-sep {
+  width: 1px;
+  height: 14px;
+  background: var(--app-card-stroke-strong);
+  margin: 0 2px;
+}
+.app-brand-product {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--lb-fg-2);
+}
+.app-nav-links {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+.app-nav-links a {
+  padding: 6px 12px;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--lb-fg-1);
+  opacity: 0.78;
+  border-radius: 6px;
+  white-space: nowrap;
+  transition:
+    opacity var(--lb-transition-fast),
+    background var(--lb-transition-fast);
+}
+.app-nav-links a:hover {
+  background: var(--lb-bg-2);
+  opacity: 1;
+}
+.app-nav-links a.is-active {
+  opacity: 1;
+  font-weight: 600;
+}
+.app-nav-tail {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+  padding-left: 0;
+}
+.app-nav-icon-btn {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--lb-fg-2);
+  transition:
+    background var(--lb-transition-fast),
+    color var(--lb-transition-fast);
+}
+.app-nav-icon-btn:hover {
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-1);
+}
+.app-nav-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px 0 10px;
+  width: 220px;
+  background: var(--lb-bg-2);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--lb-fg-3);
+  font-size: 13px;
+  transition: border-color var(--lb-transition-fast);
+}
+.app-nav-search:hover {
+  border-color: var(--app-card-stroke-strong);
+}
+.app-nav-search-kbd {
+  margin-left: auto;
+  font-family: var(--app-mono);
+  font-size: 11px;
+  line-height: 11px;
+  padding: 2px 5px;
+  background: var(--lb-bg-1);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 4px;
+  color: var(--lb-fg-3);
+}
+
+/* ---- Buttons ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  transition: all var(--lb-transition-fast);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.btn-primary {
+  background: var(--lb-fg-1);
+  color: var(--lb-fg-invert);
+}
+.btn-primary:hover {
+  opacity: 0.88;
+  transform: translateY(-1px);
+}
+.btn-teal {
+  background: var(--lb-brand);
+  color: #003234;
+}
+.lb-dark .btn-teal {
+  color: #002424;
+}
+.btn-teal:hover {
+  filter: brightness(1.05);
+  transform: translateY(-1px);
+}
+.btn-ghost {
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-1);
+}
+.btn-ghost:hover {
+  background: color-mix(in srgb, var(--lb-bg-2) 60%, var(--lb-bg-1));
+}
+.btn-outline {
+  background: transparent;
+  color: var(--lb-fg-1);
+  border-color: var(--app-card-stroke-strong);
+}
+.btn-outline:hover {
+  background: var(--lb-bg-2);
+}
+.btn-sm {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12.5px;
+}
+.btn-lg {
+  height: 44px;
+  padding: 0 22px;
+  font-size: 15px;
+}
+
+/* ---- Generic chrome ---- */
+.section {
+  padding: 80px 24px;
+}
+.section-inner {
+  max-width: var(--app-max);
+  margin: 0 auto;
+}
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lb-brand);
+}
+.eyebrow::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
+}
+.h-display {
+  font-size: clamp(40px, 5.4vw, 64px);
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  margin: 0;
+  color: var(--lb-fg-1);
+}
+.h-section {
+  font-size: clamp(28px, 3vw, 36px);
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+  margin: 0;
+  color: var(--lb-fg-1);
+}
+.h-card {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin: 0;
+  color: var(--lb-fg-1);
+}
+.t-meta {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.55;
+}
+.t-body {
+  font-size: 15px;
+  color: var(--lb-fg-2);
+  line-height: 1.65;
+}
+
+/* ---- Footer ---- */
+.app-footer {
+  border-top: 1px solid var(--app-card-stroke);
+  padding: 56px 24px 40px;
+  background: var(--lb-bg-1);
+}
+.app-footer-inner {
+  max-width: var(--app-max);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1.4fr repeat(4, 1fr);
+  gap: 48px;
+}
+.app-footer-brand p {
+  margin-top: 12px;
+  max-width: 24em;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  line-height: 1.55;
+}
+.app-footer h5 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--lb-fg-3);
+  margin: 0 0 14px;
+}
+.app-footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+.app-footer ul a {
+  font-size: 13.5px;
+  color: var(--lb-fg-2);
+}
+.app-footer ul a:hover {
+  color: var(--lb-fg-1);
+}
+.app-footer-bottom {
+  max-width: var(--app-max);
+  margin: 40px auto 0;
+  padding-top: 24px;
+  border-top: 1px solid var(--app-card-stroke);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12.5px;
+  color: var(--lb-fg-3);
+}
+.app-footer-bottom-links {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+/* ---- Nav dropdowns ---- */
+.nav-features-wrap,
+.nav-lang-wrap {
+  position: relative;
+}
+.nav-features-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  color: var(--lb-fg-1);
+  opacity: 0.78;
+  border-radius: 6px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    opacity var(--lb-transition-fast),
+    background var(--lb-transition-fast);
+}
+.nav-features-trigger:hover {
+  background: var(--lb-bg-2);
+  opacity: 1;
+}
+.nav-features-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  width: 460px;
+  padding: 8px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  box-shadow: var(--app-shadow-3);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  z-index: 1100;
+}
+.nav-features-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  transition: background var(--lb-transition-fast);
+}
+.nav-features-item:hover {
+  background: var(--lb-bg-2);
+}
+.nav-features-icon {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--lb-brand) 12%, transparent);
+  color: var(--lb-brand);
+}
+.nav-features-label {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--lb-fg-1);
+}
+.nav-features-desc {
+  font-size: 11.5px;
+  color: var(--lb-fg-3);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+.nav-lang-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 160px;
+  padding: 6px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 10px;
+  box-shadow: var(--app-shadow-2);
+  z-index: 1100;
+  display: grid;
+}
+.nav-lang-menu a {
+  padding: 6px 12px;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  border-radius: 6px;
+  cursor: pointer;
+}
+.nav-lang-menu a:hover {
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-1);
+}
+.nav-lang-menu a.is-active {
+  color: var(--lb-brand);
+  font-weight: 600;
+}
+
+/* Footer v2 — 5 columns */
+.app-footer-inner-v2 {
+  max-width: var(--app-max);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1.6fr repeat(4, 1fr);
+  gap: 48px;
+}
+@media (max-width: 1024px) {
+  .app-footer-inner-v2 {
+    grid-template-columns: 1fr 1fr;
+    gap: 32px;
+  }
+}
+.footer-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 18px;
+  padding: 6px 12px;
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--lb-fg-2);
+}
+
+/* ---- Code block ---- */
+.code {
+  font-family: var(--app-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-1);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.code-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 30px;
+  padding: 0 10px;
+  background: var(--lb-bg-2);
+  border-bottom: 1px solid var(--app-card-stroke);
+  font-size: 11.5px;
+  color: var(--lb-fg-2);
+}
+.code-tabs {
+  display: flex;
+  gap: 2px;
+  margin-left: 8px;
+}
+.code-tab {
+  padding: 4px 10px;
+  font-size: 12px;
+  border-radius: 6px;
+  color: var(--lb-fg-3);
+  cursor: pointer;
+  font-weight: 500;
+  transition: all var(--lb-transition-fast);
+  border: none;
+  background: transparent;
+}
+.code-tab:hover {
+  color: var(--lb-fg-1);
+}
+.code-tab.is-active {
+  color: var(--lb-fg-1);
+  background: var(--lb-bg-1);
+  box-shadow: var(--app-shadow-1);
+}
+.code-copy {
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  color: var(--lb-fg-3);
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+}
+.code-copy:hover {
+  color: var(--lb-fg-1);
+  background: var(--lb-bg-1);
+}
+.code-body {
+  padding: 14px 16px;
+  overflow-x: auto;
+  white-space: pre;
+  min-height: 80px;
+}
+.code-body .ln-comment {
+  color: var(--lb-fg-3);
+}
+.code-body .ln-key {
+  color: var(--lb-chart-purple);
+}
+.code-body .ln-str {
+  color: var(--lb-up);
+}
+.code-body .ln-fn {
+  color: var(--lb-chart-blue);
+}
+.code-body .ln-num {
+  color: var(--lb-chart-orange);
+}
+.code-body .ln-tok {
+  color: var(--lb-down);
+}
+.code-body .ln-prompt {
+  color: var(--lb-brand);
+  user-select: none;
+}
+
+.is-up {
+  color: var(--lb-up);
+}
+.is-down {
+  color: var(--lb-down);
+}
+.num {
+  font-variant-numeric: tabular-nums;
+}
+
+.card {
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--lb-brand) 32%, transparent);
+  color: var(--lb-fg-1);
+}
+.page-fade-enter {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.page-fade-enter-active {
+  transition:
+    opacity 220ms,
+    transform 220ms;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ============================================================
+   HOME PAGE STYLES (from app-pages.css)
+   ============================================================ */
+
+.home-hero {
+  position: relative;
+  padding: 56px 24px 72px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.home-hero-centered {
+  padding: 80px 24px 88px;
+  min-height: 560px;
+}
+.home-hero-inner-centered {
+  position: relative;
+  z-index: 5;
+  max-width: 880px;
+  margin: 0 auto;
+  text-align: center;
+}
+.home-hero-title {
+  margin-top: 28px;
+  font-size: clamp(44px, 6vw, 72px);
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+}
+.home-hero-sub {
+  margin: 28px auto 0;
+  max-width: 580px;
+  font-size: 16px;
+  line-height: 1.7;
+}
+.home-hero-cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 36px;
+}
+.home-hero-trust-centered {
+  margin-top: 64px;
+  justify-content: center;
+  border-top: 1px solid var(--app-card-stroke);
+  padding-top: 28px;
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.home-hero-highlights {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  margin: 56px auto 0;
+  max-width: 960px;
+}
+.home-hero-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+  text-align: center;
+}
+.home-hero-stat-line {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.home-hero-stat-v {
+  font-family: var(--lb-font-sans);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  font-size: 22px;
+  letter-spacing: -0.025em;
+  color: var(--lb-fg-1);
+  line-height: 1;
+}
+.home-hero-stat-u {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+}
+.home-hero-stat-d {
+  margin-top: 4px;
+  font-size: 11.5px;
+  color: var(--lb-fg-3);
+  white-space: nowrap;
+}
+.home-hero-stat-sep {
+  width: 1px;
+  height: 32px;
+  background: var(--app-card-stroke);
+  flex-shrink: 0;
+}
+@media (max-width: 820px) {
+  .home-hero-highlights {
+    flex-wrap: wrap;
+    gap: 14px 24px;
+  }
+  .home-hero-stat-sep {
+    display: none;
+  }
+}
+
+.hero-bg-data {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.hero-bg-orb {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  width: 720px;
+  height: 720px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(
+    circle at center,
+    color-mix(in srgb, var(--lb-brand) 18%, transparent) 0%,
+    color-mix(in srgb, var(--lb-brand) 6%, transparent) 35%,
+    transparent 65%
+  );
+  filter: blur(4px);
+}
+.lb-dark .hero-bg-orb {
+  background: radial-gradient(
+    circle at center,
+    color-mix(in srgb, var(--lb-brand) 28%, transparent) 0%,
+    color-mix(in srgb, var(--lb-brand) 10%, transparent) 35%,
+    transparent 65%
+  );
+}
+.hero-bg-blobs {
+  position: absolute;
+  inset: 0;
+  filter: blur(80px);
+  opacity: 0.32;
+}
+.lb-dark .hero-bg-blobs {
+  opacity: 0.18;
+}
+.hero-blob {
+  position: absolute;
+  border-radius: 50%;
+}
+.hero-blob-1 {
+  top: -10%;
+  left: 18%;
+  width: 480px;
+  height: 480px;
+  background: color-mix(in srgb, var(--lb-brand) 14%, transparent);
+  animation: heroBlob1 22s ease-in-out infinite;
+}
+.hero-blob-2 {
+  top: 8%;
+  right: 12%;
+  width: 380px;
+  height: 380px;
+  background: color-mix(in srgb, var(--lb-status-neutral) 7%, transparent);
+  animation: heroBlob2 26s ease-in-out infinite;
+}
+.hero-blob-3 {
+  bottom: -16%;
+  left: 36%;
+  width: 520px;
+  height: 520px;
+  background: color-mix(in srgb, var(--lb-ai-mention) 7%, transparent);
+  animation: heroBlob3 28s ease-in-out infinite;
+}
+.lb-dark .hero-blob-1 {
+  background: color-mix(in srgb, var(--lb-brand) 34%, transparent);
+}
+.lb-dark .hero-blob-2 {
+  background: color-mix(in srgb, var(--lb-status-neutral) 22%, transparent);
+}
+.lb-dark .hero-blob-3 {
+  background: color-mix(in srgb, var(--lb-ai-mention) 20%, transparent);
+}
+.hero-blob-4 {
+  display: none;
+}
+@keyframes heroBlob1 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(80px, 60px) scale(1.08);
+  }
+}
+@keyframes heroBlob2 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-60px, 40px) scale(1.1);
+  }
+}
+@keyframes heroBlob3 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(40px, -50px) scale(1.06);
+  }
+}
+.hero-bg-vignette {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 55% 50% at center,
+    color-mix(in srgb, var(--lb-bg-1) 30%, transparent) 0%,
+    transparent 60%
+  );
+}
+.hero-bg-dots {
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(
+    circle 0.8px at center,
+    color-mix(in srgb, var(--lb-fg-1) 28%, transparent) 0%,
+    transparent 100%
+  );
+  background-size: 24px 24px;
+  mask-image:
+    radial-gradient(ellipse 40% 35% at 50% 38%, transparent 0%, black 60%),
+    radial-gradient(ellipse 90% 75% at center, black 30%, transparent 100%);
+  -webkit-mask-image:
+    radial-gradient(ellipse 40% 35% at 50% 38%, transparent 0%, black 60%),
+    radial-gradient(ellipse 90% 75% at center, black 30%, transparent 100%);
+  mask-composite: intersect;
+  -webkit-mask-composite: source-in;
+}
+.lb-dark .hero-bg-dots {
+  background-image: radial-gradient(circle 0.8px at center, rgba(255, 255, 255, 0.22) 0%, transparent 100%);
+}
+.hero-bg-horizon {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 220px;
+  background: linear-gradient(to top, color-mix(in srgb, var(--lb-bg-1) 92%, transparent) 0%, transparent 100%);
+}
+@media (max-width: 700px) {
+  .home-hero-centered {
+    padding: 72px 20px 96px;
+    min-height: 560px;
+  }
+  .home-hero-trust-centered {
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+}
+.hero-code {
+  border-radius: 14px;
+  box-shadow: var(--app-shadow-3);
+  border: 1px solid var(--app-card-stroke-strong);
+  background: var(--lb-bg-1);
+}
+.hero-widget {
+  border-radius: 14px;
+  padding: 0;
+  box-shadow: var(--app-shadow-2);
+}
+.hero-widget-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.hero-widget-rows {
+  padding: 4px;
+  display: grid;
+  gap: 0;
+}
+.hero-widget-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+.hero-widget-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-top: 1px solid var(--app-card-stroke);
+}
+.home-hero-trust {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid var(--app-card-stroke);
+}
+.home-hero-trust-sep {
+  width: 1px;
+  height: 36px;
+  background: var(--app-card-stroke);
+}
+
+/* Products grid */
+.products-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 980px) {
+  .products-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .products-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.product-card {
+  display: flex;
+  flex-direction: column;
+  padding: 28px 24px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+  transition:
+    transform var(--lb-transition-normal),
+    box-shadow var(--lb-transition-normal),
+    border-color var(--lb-transition-normal);
+  min-height: 220px;
+  position: relative;
+}
+.product-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--app-shadow-2);
+  border-color: var(--app-card-stroke-strong);
+}
+.product-card:hover .product-card-head svg {
+  color: var(--lb-fg-1) !important;
+  transform: translateX(2px);
+}
+.product-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.product-card-head svg {
+  transition:
+    transform var(--lb-transition-fast),
+    color var(--lb-transition-fast);
+}
+.product-card-label {
+  font-size: 11.5px;
+  line-height: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+.product-card-title {
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  line-height: 1.25;
+  margin: 0;
+  color: var(--lb-fg-1);
+}
+.product-card-desc {
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--lb-fg-2);
+  margin: 10px 0 0;
+}
+.product-card-cta {
+  margin-top: auto;
+  padding-top: 18px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--lb-fg-1);
+  transition: gap var(--lb-transition-fast);
+}
+.product-card:hover .product-card-cta {
+  gap: 8px;
+  color: var(--lb-brand);
+}
+.product-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 14px;
+}
+.product-card-tag {
+  font-family: var(--app-mono);
+  font-size: 10.5px;
+  line-height: 12px;
+  font-weight: 500;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-2);
+  border: 1px solid var(--app-card-stroke);
+  white-space: nowrap;
+}
+
+/* CLI spotlight */
+.cli-spotlight {
+  padding-top: 32px;
+}
+.cli-spotlight-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  gap: 56px;
+  align-items: start;
+}
+@media (max-width: 980px) {
+  .cli-spotlight-grid {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+.cli-demo-col {
+  min-width: 0;
+}
+.cli-demo-col .code {
+  min-height: 280px;
+  overflow: hidden;
+}
+.cli-demo-col .code-body {
+  overflow-x: auto;
+  white-space: pre;
+}
+.cli-feat-list {
+  list-style: none;
+  padding: 0;
+  margin: 28px 0 0;
+  display: grid;
+  gap: 14px;
+}
+.cli-feat-list li {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.cli-feat-list svg {
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.cli-os-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--lb-bg-2);
+  border-radius: 8px;
+}
+.cli-os-tab {
+  padding: 5px 14px;
+  font-size: 12.5px;
+  border-radius: 5px;
+  color: var(--lb-fg-2);
+  border: none;
+  background: transparent;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+}
+.cli-os-tab.is-active {
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-1);
+  box-shadow: var(--app-shadow-1);
+}
+.cli-mini-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin-top: 20px;
+  padding: 18px 0;
+  border-top: 1px solid var(--app-card-stroke);
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.cli-mini-stats > div {
+  text-align: center;
+  border-right: 1px solid var(--app-card-stroke);
+}
+.cli-mini-stats > div:last-child {
+  border-right: none;
+}
+
+/* AI install block */
+.ai-install-block {
+  margin-top: 24px;
+  padding: 16px;
+  background: rgba(0, 240, 196, 0.04);
+  border: 1px solid rgba(0, 240, 196, 0.12);
+  border-radius: 12px;
+}
+.ai-install-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.55);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 10px;
+}
+.ai-install-cmd {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 10px 14px;
+  background: rgba(10, 14, 25, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+}
+.ai-install-cmd code {
+  flex: 1;
+  font-family: var(--app-mono);
+  font-size: 12.5px;
+  color: rgba(255, 255, 255, 0.92);
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.ai-install-cmd .code-copy {
+  color: rgba(255, 255, 255, 0.5);
+}
+.ai-install-cmd .code-copy:hover {
+  color: var(--lb-ai-mention);
+  background: rgba(0, 240, 196, 0.1);
+}
+.ai-install-or {
+  text-align: center;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  margin: 10px 0;
+}
+.ai-agents-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 20px;
+}
+.ai-agent-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px 4px 4px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.82);
+  font-weight: 500;
+}
+.ai-agent-mark {
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  font-size: 10px;
+  font-weight: 700;
+  color: #fff;
+}
+.ai-agent-more {
+  padding: 4px 10px;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* MCP section */
+.mcp-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.1fr;
+  gap: 56px;
+  align-items: center;
+}
+@media (max-width: 980px) {
+  .mcp-grid {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+.mcp-clients {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 22px;
+}
+.mcp-client-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 14px;
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--lb-fg-2);
+  background: var(--lb-card);
+}
+.mcp-client-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--lb-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lb-brand) 18%, transparent);
+}
+.mcp-code {
+  box-shadow: var(--app-shadow-2);
+}
+
+/* API capability cards */
+.api-caps-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 980px) {
+  .api-caps-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .api-caps-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.api-cap-card {
+  display: flex;
+  flex-direction: column;
+  padding: 28px 24px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+  transition: all var(--lb-transition-normal);
+}
+.api-cap-card:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--app-shadow-2);
+  border-color: var(--app-card-stroke-strong);
+}
+.api-cap-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.api-cap-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+}
+.api-cap-count {
+  font-family: var(--app-mono);
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 999px;
+}
+.api-cap-list {
+  list-style: none;
+  padding: 0;
+  margin: 18px 0 0;
+  display: grid;
+  gap: 6px;
+}
+.api-cap-list li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+}
+
+/* SDK section */
+.sdk-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 24px;
+  justify-content: center;
+}
+.sdk-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--app-card-stroke);
+  background: var(--lb-card);
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--lb-fg-2);
+  cursor: pointer;
+  font-family: inherit;
+  transition: all var(--lb-transition-fast);
+}
+.sdk-tab:hover {
+  color: var(--lb-fg-1);
+  border-color: var(--app-card-stroke-strong);
+}
+.sdk-tab.is-active {
+  background: var(--lb-fg-1);
+  color: var(--lb-fg-invert);
+  border-color: var(--lb-fg-1);
+}
+.sdk-tab-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+.sdk-tab.is-active .sdk-tab-dot {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lb-fg-1) 50%, transparent);
+}
+.sdk-frame {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 16px;
+  padding: 16px;
+  background: var(--app-canvas);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+}
+@media (max-width: 980px) {
+  .sdk-frame {
+    grid-template-columns: 1fr;
+  }
+}
+.sdk-frame-l {
+  display: flex;
+  flex-direction: column;
+  min-height: 380px;
+}
+.sdk-action-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--lb-bg-2);
+  border-radius: 8px;
+  align-self: flex-start;
+}
+.sdk-action-tab {
+  padding: 6px 14px;
+  font-size: 12.5px;
+  font-weight: 500;
+  border-radius: 5px;
+  background: transparent;
+  border: none;
+  color: var(--lb-fg-2);
+  cursor: pointer;
+  font-family: inherit;
+}
+.sdk-action-tab.is-active {
+  background: var(--lb-bg-1);
+  color: var(--lb-fg-1);
+  box-shadow: var(--app-shadow-1);
+}
+.sdk-install {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 10px 14px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 8px;
+}
+.sdk-frame-r {
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+.sdk-feat {
+  display: flex;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 10px;
+}
+.sdk-feat-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+}
+.sdk-feat-h {
+  font-size: 13.5px;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+}
+.sdk-feat-body {
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--lb-fg-2);
+  margin-top: 4px;
+}
+.sdk-feat-pills {
+  display: flex;
+  gap: 4px;
+  margin-top: 6px;
+  flex-wrap: wrap;
+}
+.sdk-feat-pills span {
+  font-family: var(--app-mono);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-1);
+}
+.sdk-feat-strong {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--lb-up);
+  margin-top: 6px;
+  letter-spacing: -0.02em;
+}
+
+/* Stats band */
+.stats-band {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 32px 0;
+}
+.stats-band-cell {
+  padding: 8px 32px;
+  border-right: 1px solid var(--app-card-stroke);
+}
+.stats-band-cell:last-child {
+  border-right: none;
+}
+@media (max-width: 720px) {
+  .stats-band {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .stats-band-cell:nth-child(2) {
+    border-right: none;
+  }
+  .stats-band-cell:nth-child(1),
+  .stats-band-cell:nth-child(2) {
+    border-bottom: 1px solid var(--app-card-stroke);
+    padding-bottom: 24px;
+    margin-bottom: 8px;
+  }
+}
+
+/* AI spotlight */
+.ai-spotlight {
+  padding-top: 32px;
+}
+.ai-spotlight-card {
+  display: grid;
+  grid-template-columns: 1fr 1.05fr;
+  gap: 56px;
+  align-items: center;
+  background: #09252a;
+  border-radius: 24px;
+  padding: 56px;
+  overflow: hidden;
+  position: relative;
+  border: 1px solid rgba(0, 240, 196, 0.08);
+}
+.ai-spotlight-card::before {
+  content: '';
+  position: absolute;
+  width: 600px;
+  height: 600px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(0, 240, 196, 0.18), transparent 60%);
+  top: -200px;
+  right: -200px;
+}
+.ai-spotlight-card > * {
+  position: relative;
+  z-index: 1;
+}
+.ai-spotlight-chat {
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
+}
+.ai-chat-body {
+  padding: 16px;
+  display: grid;
+  gap: 12px;
+}
+.ai-msg.user {
+  align-self: flex-end;
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+  padding: 10px 14px;
+  border-radius: 12px 12px 4px 12px;
+  margin-left: 60px;
+}
+.ai-msg.assistant {
+  background: rgba(0, 240, 196, 0.06);
+  border: 1px solid rgba(0, 240, 196, 0.16);
+  padding: 12px 14px;
+  border-radius: 12px 12px 12px 4px;
+}
+.ai-msg-tool {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  color: rgba(255, 255, 255, 0.6);
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
+}
+.ai-msg-tool code {
+  font-family: var(--app-mono);
+  color: var(--lb-ai-mention);
+}
+.ai-msg-text {
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.92);
+}
+@media (max-width: 980px) {
+  .ai-spotlight-card {
+    grid-template-columns: 1fr;
+    padding: 40px 28px;
+    gap: 32px;
+  }
+}
+
+/* Get started + final CTA */
+.gs-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 40px;
+}
+@media (max-width: 820px) {
+  .gs-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.gs-card {
+  display: flex;
+  flex-direction: column;
+  padding: 28px;
+  border-radius: 16px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  transition: all var(--lb-transition-normal);
+  position: relative;
+}
+.gs-card:hover {
+  box-shadow: var(--app-shadow-2);
+  transform: translateY(-3px);
+}
+.gs-card-step {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  font-family: var(--app-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--lb-fg-3);
+  letter-spacing: 0.05em;
+}
+.gs-card-icon-wrap {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--lb-brand) 12%, transparent);
+  color: var(--lb-brand);
+  display: grid;
+  place-items: center;
+}
+.final-cta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 32px;
+  flex-wrap: wrap;
+  padding: 56px;
+  border-radius: 24px;
+  border: 1px solid var(--app-card-stroke);
+  background: var(--lb-card);
+}
+
+.lb-dark .product-card-icon,
+.lb-dark .gs-card-icon-wrap {
+  background: color-mix(in srgb, var(--lb-brand) 18%, transparent);
+}
+
+/* ============================================================
+   SKILL PAGE STYLES (from app-skill.css)
+   ============================================================ */
+
+.skill-hero {
+  position: relative;
+  padding: 72px 24px 56px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.skill-hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background:
+    radial-gradient(
+      ellipse 60% 50% at 50% 0%,
+      color-mix(in srgb, var(--lb-brand) 10%, transparent) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 30% 30% at 20% 100%,
+      color-mix(in srgb, var(--lb-ai-mention) 8%, transparent) 0%,
+      transparent 60%
+    );
+}
+.lb-dark .skill-hero-bg {
+  background:
+    radial-gradient(
+      ellipse 60% 50% at 50% 0%,
+      color-mix(in srgb, var(--lb-brand) 22%, transparent) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 30% 30% at 20% 100%,
+      color-mix(in srgb, var(--lb-ai-mention) 16%, transparent) 0%,
+      transparent 60%
+    );
+}
+.skill-hero-inner {
+  position: relative;
+  z-index: 1;
+}
+.skill-hero-install {
+  margin: 36px auto 0;
+  max-width: 560px;
+  padding: 16px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  text-align: left;
+  box-shadow: var(--app-shadow-1);
+}
+.skill-hero-install-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--lb-fg-3);
+}
+.skill-hero-install-cmd {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px 14px;
+  background: var(--lb-bg-2);
+  border-radius: 8px;
+  border: 1px solid var(--app-card-stroke);
+}
+.skill-hero-install-cmd code {
+  flex: 1;
+  font-family: var(--app-mono);
+  font-size: 12.5px;
+  color: var(--lb-fg-1);
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 1.55;
+}
+.skill-hero-install-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--lb-brand);
+}
+.skill-hero-install-link:hover {
+  gap: 8px;
+  transition: gap 0.2s;
+}
+.skill-hero-agents {
+  margin-top: 40px;
+}
+.skill-hero-agents-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  margin-top: 14px;
+}
+
+.user-cases-grid {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr 1fr;
+  gap: 12px;
+}
+@media (max-width: 1024px) {
+  .user-cases-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .user-case-award {
+    grid-column: 1 / -1;
+  }
+}
+@media (max-width: 640px) {
+  .user-cases-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.user-case-award {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 18px;
+  padding: 22px 24px;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--lb-brand) 12%, var(--lb-card)) 0%, var(--lb-card) 100%);
+  border: 1px solid color-mix(in srgb, var(--lb-brand) 25%, var(--app-card-stroke));
+  border-radius: 14px;
+  transition: all var(--lb-transition-fast);
+}
+.user-case-award:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--app-shadow-2);
+}
+.user-case-award-tag {
+  align-self: flex-start;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--lb-brand) 18%, transparent);
+  color: var(--lb-brand);
+}
+.user-case-award-h {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  line-height: 1.3;
+  margin: 0;
+  color: var(--lb-fg-1);
+}
+.user-case-award-d {
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+  margin: 8px 0 0;
+}
+.user-case-award-rewards {
+  display: flex;
+  gap: 24px;
+  padding-top: 16px;
+  border-top: 1px solid color-mix(in srgb, var(--lb-brand) 18%, var(--app-card-stroke));
+}
+.user-case-award-num {
+  font-family: var(--lb-font-sans);
+  font-variant-numeric: tabular-nums;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--lb-brand);
+  line-height: 1;
+}
+.user-case-award-l {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--lb-fg-3);
+  margin-top: 4px;
+}
+
+.user-case {
+  display: flex;
+  flex-direction: column;
+  padding: 22px 24px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  transition: all var(--lb-transition-fast);
+}
+.user-case:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--app-shadow-2);
+  border-color: var(--app-card-stroke-strong);
+}
+.user-case-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+.user-case-idx {
+  font-family: var(--app-mono);
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  letter-spacing: 0.04em;
+}
+.user-case-read {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--lb-fg-3);
+}
+.user-case:hover .user-case-read {
+  color: var(--lb-brand);
+}
+.user-case-title {
+  font-size: 15.5px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  margin: 0;
+  color: var(--lb-fg-1);
+}
+.user-case-desc {
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+  margin: 8px 0 0;
+  flex: 1;
+}
+.user-case-metric {
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--app-card-stroke);
+}
+.user-case-metric-v {
+  font-family: var(--lb-font-sans);
+  font-variant-numeric: tabular-nums;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  line-height: 1;
+}
+.user-case-metric-l {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--lb-fg-3);
+  margin-top: 4px;
+}
+
+.skill-demo-shell {
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+  overflow: hidden;
+}
+.skill-demo-agent-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 14px 20px 0;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.skill-demo-agent-tab {
+  position: relative;
+  background: transparent;
+  border: none;
+  padding: 10px 14px 14px;
+  font: 600 14px/1 var(--lb-font-sans);
+  color: var(--lb-fg-3);
+  cursor: pointer;
+  transition: color var(--lb-transition-fast);
+}
+.skill-demo-agent-tab:hover {
+  color: var(--lb-fg-1);
+}
+.skill-demo-agent-tab.is-active {
+  color: var(--lb-brand);
+}
+.skill-demo-agent-tab.is-active::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--lb-brand);
+  border-radius: 2px 2px 0 0;
+}
+.skill-demo-body-grid {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+}
+@media (max-width: 820px) {
+  .skill-demo-body-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.skill-demo-nav {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 16px;
+  border-right: 1px solid var(--app-card-stroke);
+  gap: 2px;
+}
+@media (max-width: 820px) {
+  .skill-demo-nav {
+    flex-direction: row;
+    overflow-x: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--app-card-stroke);
+    padding: 12px 16px;
+  }
+}
+.skill-demo-nav-item {
+  background: transparent;
+  border: none;
+  padding: 10px 14px;
+  text-align: left;
+  font: 500 13.5px/1.4 var(--lb-font-sans);
+  color: var(--lb-fg-2);
+  border-radius: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all var(--lb-transition-fast);
+}
+.skill-demo-nav-item:hover {
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-1);
+}
+.skill-demo-nav-item.is-active {
+  background: color-mix(in srgb, var(--lb-brand) 10%, transparent);
+  color: var(--lb-brand);
+  font-weight: 600;
+}
+.skill-demo-main {
+  padding: 28px 32px 32px;
+  min-width: 0;
+}
+.skill-demo-title {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  margin: 0 0 10px;
+  color: var(--lb-fg-1);
+}
+.skill-demo-desc {
+  font-size: 13.5px;
+  line-height: 1.65;
+  color: var(--lb-fg-2);
+  margin: 0 0 20px;
+}
+.skill-demo-prompt-label {
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--lb-fg-3);
+  margin-bottom: 8px;
+}
+.skill-demo-prompt {
+  display: flex;
+  gap: 10px;
+  padding: 14px 16px;
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 10px;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--lb-fg-1);
+  margin-bottom: 24px;
+  font-style: italic;
+}
+.skill-demo-chat {
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  overflow: hidden;
+}
+.skill-demo-chat-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--app-card-stroke);
+  background: var(--lb-card);
+}
+.skill-demo-chat-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.skill-demo-bubble-user {
+  align-self: flex-end;
+  max-width: 70%;
+  padding: 10px 14px;
+  background: color-mix(in srgb, var(--lb-brand) 18%, var(--lb-bg-2));
+  border: 1px solid color-mix(in srgb, var(--lb-brand) 28%, var(--app-card-stroke));
+  color: var(--lb-fg-1);
+  border-radius: 14px 14px 4px 14px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.skill-demo-bubble-assistant {
+  align-self: flex-start;
+  width: 100%;
+  padding: 14px 16px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px 14px 14px 4px;
+}
+.skill-demo-bubble-text {
+  font-size: 13.5px;
+  line-height: 1.6;
+  color: var(--lb-fg-1);
+  margin: 0 0 14px;
+}
+.skill-demo-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+}
+.skill-demo-table th {
+  padding: 8px 10px;
+  text-align: right;
+  font-weight: 600;
+  color: var(--lb-fg-3);
+  font-size: 11.5px;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.skill-demo-table th:first-child {
+  text-align: left;
+}
+.skill-demo-table td {
+  padding: 8px 10px;
+  text-align: right;
+  color: var(--lb-fg-2);
+  border-bottom: 1px solid var(--lb-bg-2);
+}
+.skill-demo-table td.is-sym {
+  text-align: left;
+  font-weight: 700;
+  color: var(--lb-fg-1);
+  font-family: var(--app-mono);
+}
+.skill-demo-table tbody tr.is-cross td,
+.skill-demo-table tbody tr.is-best td {
+  color: var(--lb-fg-1);
+  font-weight: 600;
+}
+.skill-demo-table tbody tr.is-cross td.is-sym,
+.skill-demo-table tbody tr.is-best td.is-sym {
+  color: var(--lb-brand);
+}
+.skill-demo-table tbody tr.is-cross td:nth-last-child(-n + 2),
+.skill-demo-table tbody tr.is-best td:nth-last-child(-n + 2) {
+  color: var(--lb-brand);
+}
+.skill-demo-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.skill-demo-callout {
+  margin-top: 16px;
+  padding: 14px 16px;
+  background: color-mix(in srgb, var(--lb-brand) 8%, var(--lb-bg-2));
+  border: 1px solid color-mix(in srgb, var(--lb-brand) 22%, var(--app-card-stroke));
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--lb-fg-1);
+}
+.skill-demo-callout code {
+  font-family: var(--app-mono);
+  font-size: 12px;
+  padding: 1px 5px;
+  background: var(--lb-bg-2);
+  border-radius: 3px;
+  color: var(--lb-brand);
+}
+
+.skill-marketplace-card {
+  display: grid;
+  gap: 8px;
+  padding: 16px 18px;
+  background: #0a0e19;
+  border: 1px solid #1f232e;
+  border-radius: 12px;
+  max-width: 400px;
+  box-shadow: var(--app-shadow-1);
+}
+.skill-marketplace-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11.5px;
+  color: rgba(255, 255, 255, 0.72);
+  margin-bottom: 4px;
+}
+.skill-marketplace-pill {
+  margin-left: auto;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(0, 240, 196, 0.14);
+  color: var(--lb-ai-mention);
+}
+.skill-marketplace-cmd {
+  display: block;
+  font-family: var(--app-mono);
+  font-size: 11.5px;
+  color: rgba(255, 255, 255, 0.92);
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.skill-cat-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 24px;
+  padding: 4px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 999px;
+  width: fit-content;
+}
+.skill-cat-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--lb-fg-2);
+  background: transparent;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all var(--lb-transition-fast);
+}
+.skill-cat-tab:hover {
+  color: var(--lb-fg-1);
+}
+.skill-cat-tab.is-active {
+  background: var(--lb-fg-1);
+  color: var(--lb-fg-invert);
+}
+.skill-cat-count {
+  font-family: var(--app-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-2);
+}
+.skill-cat-tab.is-active .skill-cat-count {
+  background: color-mix(in srgb, var(--lb-fg-invert) 12%, transparent);
+  color: var(--lb-fg-invert);
+}
+
+.skill-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+@media (max-width: 1024px) {
+  .skill-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .skill-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.skill-card {
+  display: flex;
+  flex-direction: column;
+  padding: 18px 20px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+  transition: all var(--lb-transition-fast);
+}
+.skill-card:hover {
+  border-color: color-mix(in srgb, var(--lb-brand) 30%, var(--app-card-stroke));
+  box-shadow: var(--app-shadow-1);
+}
+.skill-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.skill-card-name {
+  font-size: 14.5px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--lb-fg-1);
+  margin: 0;
+}
+.skill-card-id {
+  font-family: var(--app-mono);
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-3);
+}
+.skill-card-tag {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--lb-status-alert) 14%, transparent);
+  color: var(--lb-status-alert);
+}
+.skill-card-desc {
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+  margin: 0 0 12px;
+}
+.skill-card-example {
+  display: flex;
+  gap: 6px;
+  padding: 10px 0 0;
+  border-top: 1px solid var(--app-card-stroke);
+  margin-top: auto;
+}
+.skill-card-example span {
+  font-size: 11.5px;
+  font-style: italic;
+  color: var(--lb-fg-2);
+  line-height: 1.4;
+}
+
+.skill-cap-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px 48px;
+}
+@media (max-width: 980px) {
+  .skill-cap-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .skill-cap-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.skill-cap-col h3 {
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--app-card-stroke);
+  margin-bottom: 14px;
+}
+.skill-cap-col ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+.skill-cap-col li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+}
+
+.skill-getstarted-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 40px;
+}
+@media (max-width: 980px) {
+  .skill-getstarted-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.skill-getstarted-card {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  position: relative;
+}
+.skill-getstarted-card.recommended {
+  border-color: color-mix(in srgb, var(--lb-up) 35%, var(--app-card-stroke));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lb-up) 6%, transparent);
+}
+.skill-getstarted-badge {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--lb-up) 14%, transparent);
+  color: var(--lb-up);
+}
+.skill-getstarted-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+}
+.skill-getstarted-cmd {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  background: var(--lb-bg-2);
+  border-radius: 8px;
+  border: 1px solid var(--app-card-stroke);
+  margin-top: 14px;
+}
+.skill-getstarted-cmd code {
+  flex: 1;
+  font-family: var(--app-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--lb-fg-1);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.skill-getstarted-foot {
+  margin-top: 32px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.skill-getstarted-foot a {
+  color: var(--lb-fg-1);
+  font-weight: 500;
+}
+.skill-getstarted-foot a:hover {
+  color: var(--lb-brand);
+}
+
+/* ============================================================
+   PRICING PAGE STYLES (from app-pricing.css)
+   ============================================================ */
+
+.pricing-hero {
+  position: relative;
+  padding: 80px 24px 48px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--app-card-stroke);
+}
+.pricing-hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: radial-gradient(
+    ellipse 60% 50% at 50% 0%,
+    color-mix(in srgb, var(--lb-brand) 9%, transparent) 0%,
+    transparent 60%
+  );
+}
+.lb-dark .pricing-hero-bg {
+  background: radial-gradient(
+    ellipse 60% 50% at 50% 0%,
+    color-mix(in srgb, var(--lb-brand) 20%, transparent) 0%,
+    transparent 60%
+  );
+}
+.pricing-hero-inner {
+  position: relative;
+  z-index: 1;
+}
+
+.pricing-free-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+@media (max-width: 820px) {
+  .pricing-free-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.pricing-free-card {
+  padding: 20px 22px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  position: relative;
+}
+.pricing-free-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pricing-free-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+}
+.pricing-free-price {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--lb-up) 14%, transparent);
+  color: var(--lb-up);
+}
+
+.pricing-cycle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.pricing-cycle-label {
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--lb-fg-3);
+}
+.pricing-cycle-tabs {
+  display: inline-flex;
+  padding: 4px;
+  background: var(--lb-bg-2);
+  border-radius: 999px;
+}
+.pricing-cycle-tab {
+  position: relative;
+  padding: 6px 16px;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-family: inherit;
+  border-radius: 999px;
+  background: transparent;
+  border: none;
+  color: var(--lb-fg-2);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: all var(--lb-transition-fast);
+}
+.pricing-cycle-tab.is-active {
+  background: var(--lb-fg-1);
+  color: var(--lb-fg-invert);
+}
+.pricing-cycle-tab:not(.is-active):hover {
+  color: var(--lb-fg-1);
+}
+.pricing-cycle-badge {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--lb-up) 20%, transparent);
+  color: var(--lb-up);
+}
+.pricing-cycle-tab.is-active .pricing-cycle-badge {
+  background: color-mix(in srgb, var(--lb-up) 30%, transparent);
+}
+
+.pricing-plans-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+@media (max-width: 980px) {
+  .pricing-plans-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.pricing-plan-card {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 16px;
+  transition: all var(--lb-transition-fast);
+}
+.pricing-plan-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--app-card-stroke-strong);
+  box-shadow: var(--app-shadow-2);
+}
+.pricing-plan-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pricing-plan-market {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 999px;
+}
+.pricing-plan-badge {
+  font-size: 10.5px;
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--lb-bg-2);
+  color: var(--lb-fg-2);
+}
+.pricing-plan-name {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  margin: 16px 0 0;
+  color: var(--lb-fg-1);
+}
+.pricing-plan-price {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-top: 14px;
+}
+.pricing-plan-cur {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--lb-fg-2);
+}
+.pricing-plan-num {
+  font-size: 38px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: var(--lb-fg-1);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.pricing-plan-suf {
+  font-size: 13px;
+  color: var(--lb-fg-2);
+  margin-left: 2px;
+}
+.pricing-plan-discount {
+  margin-left: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--lb-up) 14%, transparent);
+  color: var(--lb-up);
+  letter-spacing: 0.04em;
+}
+.pricing-plan-was {
+  font-size: 11.5px;
+  color: var(--lb-fg-3);
+  margin-top: 4px;
+}
+.pricing-plan-tag {
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--lb-fg-2);
+  margin: 16px 0 0;
+}
+.pricing-plan-cov {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  font-size: 11.5px;
+  color: var(--lb-fg-3);
+}
+.pricing-plan-feats {
+  list-style: none;
+  margin: 18px 0 0;
+  padding: 18px 0 0;
+  border-top: 1px solid var(--app-card-stroke);
+  display: grid;
+  gap: 8px;
+  flex: 1;
+}
+.pricing-plan-feats li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--lb-fg-2);
+}
+.pricing-plan-feats li svg {
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.pricing-plan-cta {
+  align-self: stretch;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.pricing-matrix-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 14px;
+  background: var(--lb-card);
+}
+.pricing-matrix {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13.5px;
+}
+.pricing-matrix th,
+.pricing-matrix td {
+  text-align: left;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--app-card-stroke);
+  vertical-align: middle;
+}
+.pricing-matrix thead th {
+  background: var(--lb-bg-2);
+  font-weight: 700;
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--app-card-stroke-strong);
+}
+.pricing-matrix-col {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  white-space: nowrap;
+}
+.pricing-matrix-plan {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.pricing-matrix-tag {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--lb-fg-3);
+}
+.pricing-matrix-feat-h {
+  min-width: 240px;
+}
+.pricing-matrix-feat {
+  color: var(--lb-fg-1);
+  font-weight: 500;
+}
+.pricing-matrix-cell {
+  text-align: center;
+  width: 92px;
+}
+.pricing-matrix-group td {
+  padding: 8px 14px;
+  background: color-mix(in srgb, var(--lb-fg-1) 3%, transparent);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--lb-fg-3);
+}
+.lb-dark .pricing-matrix-group td {
+  background: rgba(255, 255, 255, 0.025);
+}
+.pricing-matrix tbody tr:hover td:not(.pricing-matrix-group td) {
+  background: color-mix(in srgb, var(--lb-fg-1) 2%, transparent);
+}
+
+.pricing-faq-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+@media (max-width: 740px) {
+  .pricing-faq-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.pricing-faq-card {
+  padding: 20px 22px;
+  background: var(--lb-card);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 12px;
+}
+.pricing-faq-q {
+  font-size: 14.5px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 8px;
+  color: var(--lb-fg-1);
+}
+.pricing-faq-a {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--lb-fg-2);
+  margin: 0;
+}
diff --git a/docs/.vitepress/theme/style/index.css b/docs/.vitepress/theme/style/index.css
index 4bbe8175..aef87830 100644
--- a/docs/.vitepress/theme/style/index.css
+++ b/docs/.vitepress/theme/style/index.css
@@ -1,3 +1,5 @@
+@import './lbus-tokens.css';
+@import './app-styles.css';
 @import './marker.css';
 @import './button.css';
 @import './custom-block.css';
@@ -55,6 +57,16 @@ html:root {
   --vp-c-brand-2: var(--brand-90);
   --vp-c-brand-3: var(--brand-80);
   --vp-code-color: var(--vp-c-text-1);
+  /* Override VitePress defaults — html:root wins over :root regardless of load order */
+  --vp-nav-height: 60px;
+  --vp-layout-max-width: 1240px;
+}
+
+/* AppNav is sticky (in document flow), so VitePress's fixed-nav compensation is not needed */
+@media (min-width: 960px) {
+  .VPContent {
+    padding-top: 0 !important;
+  }
 }
 
 /* Inline code — ensure text color, not brand color */
diff --git a/docs/.vitepress/theme/style/lbus-tokens.css b/docs/.vitepress/theme/style/lbus-tokens.css
new file mode 100644
index 00000000..ce286384
--- /dev/null
+++ b/docs/.vitepress/theme/style/lbus-tokens.css
@@ -0,0 +1,259 @@
+/* ============================================================
+   LBUS 5.0 Design System · Colors + Typography tokens
+   (Font-face declarations and element resets are intentionally
+   omitted to avoid conflicting with VitePress doc page styles.)
+   ============================================================ */
+
+:root {
+  /* Brand */
+  --lb-brand:             #00B8B8;
+  --lb-brand-2:           #E5F8F8;
+  --lb-brand-3:           #E5F8F8;
+
+  /* Backgrounds */
+  --lb-bg-1:              #FFFFFF;
+  --lb-bg-2:              #F3F5F6;
+  --lb-bg-tab-active:     #0A0E19;
+  --lb-card:              #FFFFFF;
+  --lb-toast:             rgba(35,38,48,0.70);
+  --lb-mask:              rgba(10,14,25,0.60);
+  --lb-zebra:             #F7F8F9;
+  --lb-bg-btn-secondary:  #F3F5F6;
+  --lb-bg-chip:           #F3F5F6;
+  --lb-bg-ai-home:        #F9F9F9;
+
+  /* Strokes + dividers */
+  --lb-stroke:            #E6E7E8;
+  --lb-line:              #DDDDDF;
+  --lb-avatar-ring:       rgba(204,204,204,0.60);
+  --lb-stroke-btn:        #E6E7E8;
+
+  /* Foreground */
+  --lb-fg-1:              #0A0E19;
+  --lb-fg-2:              #6C6E75;
+  --lb-fg-3:              #A9ABAE;
+  --lb-fg-invert:         #FFFFFF;
+
+  /* Market + chart */
+  --lb-up:                #00ADA2;
+  --lb-down:              #FF3A75;
+  --lb-chart-bg:          #EDF0F4;
+  --lb-chart-blue:        #0CB6FF;
+  --lb-chart-purple:      #5A74FF;
+  --lb-chart-green:       #35C15C;
+  --lb-chart-pink:        #EC54B8;
+  --lb-chart-yellow:      #FFA61F;
+  --lb-chart-red:         #DE3150;
+  --lb-chart-grey:        #C1D0E6;
+  --lb-chart-orange:      #FF7128;
+
+  /* Status */
+  --lb-status-warn:       #F7415F;
+  --lb-status-alert:      #FF9728;
+  --lb-status-neutral:    #2A99FE;
+  --lb-status-safe:       #00CC92;
+
+  /* Gradient fade */
+  --lb-fade-100:          #FFFFFF;
+  --lb-fade-90:           rgba(255,255,255,0.90);
+  --lb-fade-0:            rgba(255,255,255,0.00);
+
+  /* AI chat */
+  --lb-ai-bubble:         #00A9A9;
+  --lb-ai-mention:        #00F0C4;
+  --lb-ai-accent:         #00F0C4;
+  --lb-ai-brand-bg:       #09252A;
+  --lb-ai-card-bg:        #203A3F;
+
+  /* Market identifiers */
+  --lb-market-us:         #2A99FE;
+  --lb-market-hk:         #FF3A9D;
+  --lb-market-sh:         #FF3A3A;
+  --lb-market-sz:         #FF3A3A;
+  --lb-market-jp:         #FF3A89;
+  --lb-market-uk:         #D83AFF;
+  --lb-market-sg:         #3AD8FF;
+  --lb-market-au:         #893AFF;
+  --lb-market-ca:         #3ACEFF;
+  --lb-market-de:         #FFBD3A;
+  --lb-market-my:         #FFE13A;
+  --lb-market-osl:        #FF9D3A;
+  --lb-market-has:        #FF9D3A;
+
+  /* Base palette */
+  --lb-base-blue:         #2A99FE;
+  --lb-base-cyan:         #3ACEFF;
+  --lb-base-green:        #BAE158;
+  --lb-base-magenta:      #FD3CB5;
+  --lb-base-red:          #F7415F;
+  --lb-base-yellow:       #FFE03A;
+  --lb-base-pink:         #E3C4FF;
+
+  /* Heatmap */
+  --lb-heatmap-rise-1:    #E0698D;
+  --lb-heatmap-rise-2:    #F45585;
+  --lb-heatmap-rise-3:    #F2376F;
+  --lb-heatmap-rise-4:    #DB2B66;
+  --lb-heatmap-rise-5:    #C9225A;
+  --lb-heatmap-fall-1:    #31AFA6;
+  --lb-heatmap-fall-2:    #27B9B0;
+  --lb-heatmap-fall-3:    #00ADA2;
+  --lb-heatmap-fall-4:    #009089;
+  --lb-heatmap-fall-5:    #007570;
+  --lb-heatmap-neutral:   #9CA3AF;
+
+  /* Risk */
+  --lb-risk-danger:       #FF3A3A;
+  --lb-risk-warning:      #FF922D;
+  --lb-risk-medium:       #FFC700;
+  --lb-risk-safe:         #00C28B;
+
+  /* Radii */
+  --lb-radius-xs:         2px;
+  --lb-radius-2xs:        4px;
+  --lb-radius-sm:         6px;
+  --lb-radius-lg:         12px;
+  --lb-radius-xl:         18px;
+  --lb-radius-2xl:        20px;
+  --lb-radius-3xl:        28px;
+  --lb-radius-pill:       999px;
+
+  /* Spacing */
+  --lb-sp-1:  4px;
+  --lb-sp-2:  8px;
+  --lb-sp-3:  12px;
+  --lb-sp-4:  16px;
+  --lb-sp-5:  20px;
+  --lb-sp-6:  24px;
+  --lb-sp-8:  32px;
+  --lb-sp-10: 40px;
+
+  /* Shadows */
+  --lb-shadow-card:       0 3px 15px 3px rgba(43,62,92,0.12);
+  --lb-shadow-card-stack: 0 4px 15px 2px rgba(43,62,92,0.13);
+  --lb-shadow-menu:       0 2px 9px 0 rgba(43,62,92,0.14);
+  --lb-shadow-dark:       0 4px 12px 6px rgba(0,0,0,0.40);
+  --lb-shadow-dark-sm:    0 2px 9px 0 rgba(0,0,0,0.14);
+
+  /* Transitions */
+  --lb-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --lb-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --lb-transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Z-index */
+  --lb-z-base:            0;
+  --lb-z-dropdown:        1000;
+  --lb-z-sticky:          1020;
+  --lb-z-fixed:           1030;
+  --lb-z-overlay:         1040;
+  --lb-z-modal:           1050;
+  --lb-z-popover:         1060;
+  --lb-z-toast:           1070;
+  --lb-z-tooltip:         1080;
+
+  /* Fonts */
+  --lb-font-sans:    "SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  --lb-font-cn:      "PingFang SC","Noto Sans SC","Heiti SC","Source Han Sans CN",sans-serif;
+  --lb-font-display: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  --lb-font-mono:    "SF Mono","JetBrains Mono",Menlo,monospace;
+
+  /* Type scale */
+  --lb-s1-size: 32px;    --lb-s1-weight: 700;  --lb-s1-lh: 35px;
+  --lb-h1-size: 24px;    --lb-h1-weight: 700;  --lb-h1-lh: 26px;
+  --lb-h2-size: 20px;    --lb-h2-weight: 700;  --lb-h2-lh: 22px;
+  --lb-h3-size: 16px;    --lb-h3-weight: 700;  --lb-h3-lh: 20px;
+  --lb-s2-size: 15px;    --lb-s2-weight: 500;  --lb-s2-lh: 18px;
+  --lb-l1-size: 14px;    --lb-l1-weight: 400;  --lb-l1-lh: 18px;
+  --lb-body-size: 16px;  --lb-body-weight: 400; --lb-body-lh: 21px;
+  --lb-l2-size: 12px;    --lb-l2-weight: 400;  --lb-l2-lh: 16px;
+  --lb-display-size: 52px; --lb-display-weight: 500; --lb-display-lh: 100%;
+}
+
+.lb-dark,
+[data-theme="dark"] {
+  --lb-brand:             #00F0C4;
+  --lb-brand-2:           #09252A;
+  --lb-brand-3:           #203A3F;
+  --lb-bg-1:              #0A0E19;
+  --lb-bg-2:              #161A26;
+  --lb-bg-tab-active:     #FFFFFF;
+  --lb-card:              #13182A;
+  --lb-toast:             rgba(54,58,71,0.90);
+  --lb-mask:              rgba(10,14,25,0.60);
+  --lb-zebra:             #1A1E28;
+  --lb-bg-btn-secondary:  #1A1E28;
+  --lb-bg-chip:           #181B26;
+  --lb-bg-ai-home:        #0A0E19;
+  --lb-stroke:            #2C3039;
+  --lb-line:              #3B3E47;
+  --lb-avatar-ring:       rgba(204,204,204,0.60);
+  --lb-stroke-btn:        #3B3E47;
+  --lb-fg-1:              #FFFFFF;
+  --lb-fg-2:              #9D9FA3;
+  --lb-fg-3:              #60626A;
+  --lb-fg-invert:         #0A0E19;
+  --lb-up:                #00ADA2;
+  --lb-down:              #FF3A75;
+  --lb-chart-bg:          #2C3039;
+  --lb-base-green:        #BBE158;
+  --lb-base-yellow:       #FFB13A;
+  --lb-base-pink:         #8257A8;
+  --lb-heatmap-rise-1:    #812B46;
+  --lb-heatmap-rise-2:    #8C2B4C;
+  --lb-heatmap-rise-3:    #A32E54;
+  --lb-heatmap-rise-4:    #C63361;
+  --lb-heatmap-rise-5:    #E8376D;
+  --lb-heatmap-fall-1:    #0E6F6B;
+  --lb-heatmap-fall-2:    #0A736F;
+  --lb-heatmap-fall-3:    #078982;
+  --lb-heatmap-fall-4:    #04978F;
+  --lb-heatmap-fall-5:    #00ADA2;
+  --lb-heatmap-neutral:   #4B5563;
+  --lb-risk-danger:       #F7415F;
+  --lb-risk-warning:      #CC7524;
+  --lb-risk-medium:       #BB9F11;
+  --lb-risk-safe:         #00CC92;
+  --lb-fade-100:          #0A0E19;
+  --lb-fade-90:           rgba(10,14,25,0.90);
+  --lb-fade-0:            rgba(10,14,25,0.00);
+  --lb-shadow-card:       0 4px 12px 6px rgba(0,0,0,0.40);
+  --lb-shadow-menu:       0 2px 9px 0 rgba(0,0,0,0.14);
+
+  color-scheme: dark;
+}
+
+/* Semantic type classes */
+.lb-display { font-family: var(--lb-font-display); font-weight: var(--lb-display-weight); font-size: var(--lb-display-size); line-height: var(--lb-display-lh); letter-spacing: -0.3px; color: var(--lb-fg-1); }
+.lb-s1   { font: var(--lb-s1-weight) var(--lb-s1-size)/var(--lb-s1-lh) var(--lb-font-sans); }
+.lb-h1   { font: var(--lb-h1-weight) var(--lb-h1-size)/var(--lb-h1-lh) var(--lb-font-sans); }
+.lb-h2   { font: var(--lb-h2-weight) var(--lb-h2-size)/var(--lb-h2-lh) var(--lb-font-sans); }
+.lb-h3   { font: var(--lb-h3-weight) var(--lb-h3-size)/var(--lb-h3-lh) var(--lb-font-sans); }
+.lb-s2   { font: var(--lb-s2-weight) var(--lb-s2-size)/var(--lb-s2-lh) var(--lb-font-sans); }
+.lb-l1   { font: var(--lb-l1-weight) var(--lb-l1-size)/var(--lb-l1-lh) var(--lb-font-sans); }
+.lb-l2   { font: var(--lb-l2-weight) var(--lb-l2-size)/var(--lb-l2-lh) var(--lb-font-sans); }
+.lb-body { font: var(--lb-body-weight) var(--lb-body-size)/var(--lb-body-lh) var(--lb-font-sans); }
+.lb-num  { font-family: var(--lb-font-sans); font-variant-numeric: tabular-nums; font-weight: 700; }
+
+/* Compatibility aliases */
+:root {
+  --lb-d-bg-1:    #0A0E19;
+  --lb-d-bg-2:    #232630;
+  --lb-d-card:    #232630;
+  --lb-d-stripe:  #1A1E28;
+  --lb-d-line:    #3B3E47;
+  --lb-d-stroke:  #2C3039;
+  --lb-d-fg-1:    #FFFFFF;
+  --lb-d-fg-2:    #9D9FA3;
+  --lb-d-fg-3:    #60626A;
+  --lb-d-toast:   #363A47;
+  --lb-warn:      #FF9728;
+  --lb-info:      #2A99FE;
+  --lb-fg-disabled:       #9D9FA3;
+  --lb-brand-dark:        #00ADA2;
+  --lb-up-dark:           #00ADA2;
+  --lb-down-dark:         #FF3A75;
+  --lb-chart-bg-light:    #EDF0F4;
+  --lb-chart-bg-dark:     #2C3039;
+  --lb-mask-light:        rgba(10,14,25,0.40);
+  --lb-warn-2:            #FFA61F;
+}
diff --git a/docs/en/index.md b/docs/en/index.md
index 9b8853d0..d446b1d3 100644
--- a/docs/en/index.md
+++ b/docs/en/index.md
@@ -1,7 +1,6 @@
 ---
-layout: page
+layout: false
 titleTemplate: APIs, LLM, MCP, CLI & More
-pageClass: new-home-page
 ---
 
 <NewHomePage/>
diff --git a/docs/en/pricing/index.md b/docs/en/pricing/index.md
index 3bbc8faf..ca020abd 100644
--- a/docs/en/pricing/index.md
+++ b/docs/en/pricing/index.md
@@ -1,7 +1,7 @@
 ---
 title: 'Pricing'
 id: pricing
-layout: page
+layout: false
 sidebar: false
 ---
 
diff --git a/docs/en/skill/index.md b/docs/en/skill/index.md
index dbf01cc8..2c278fa8 100644
--- a/docs/en/skill/index.md
+++ b/docs/en/skill/index.md
@@ -3,7 +3,7 @@ sidebar: false
 title: Skill
 description: Give your AI assistant direct access to real-time HK/US stock data and trading capabilities with Longbridge Skill
 id: skill
-layout: home
+layout: false
 ---
 
 <Skill />
diff --git a/docs/zh-CN/index.md b/docs/zh-CN/index.md
index 62bfa6c6..d8455710 100644
--- a/docs/zh-CN/index.md
+++ b/docs/zh-CN/index.md
@@ -1,7 +1,6 @@
 ---
-layout: page
+layout: false
 titleTemplate: API、LLM、MCP、CLI 及更多开放能力
-pageClass: new-home-page
 ---
 
 <NewHomePage/>
diff --git a/docs/zh-CN/pricing/index.md b/docs/zh-CN/pricing/index.md
index 3df96f53..53ed6258 100644
--- a/docs/zh-CN/pricing/index.md
+++ b/docs/zh-CN/pricing/index.md
@@ -1,7 +1,7 @@
 ---
 title: '定价'
 id: pricing
-layout: page
+layout: false
 sidebar: false
 ---
 
diff --git a/docs/zh-CN/skill/index.md b/docs/zh-CN/skill/index.md
index dbf01cc8..2c278fa8 100644
--- a/docs/zh-CN/skill/index.md
+++ b/docs/zh-CN/skill/index.md
@@ -3,7 +3,7 @@ sidebar: false
 title: Skill
 description: Give your AI assistant direct access to real-time HK/US stock data and trading capabilities with Longbridge Skill
 id: skill
-layout: home
+layout: false
 ---
 
 <Skill />
diff --git a/docs/zh-HK/index.md b/docs/zh-HK/index.md
index 6800ac17..6e9c7440 100644
--- a/docs/zh-HK/index.md
+++ b/docs/zh-HK/index.md
@@ -1,7 +1,6 @@
 ---
-layout: page
+layout: false
 titleTemplate: API、LLM、MCP、CLI 及更多開放能力
-pageClass: new-home-page
 ---
 
 <NewHomePage/>
diff --git a/docs/zh-HK/pricing/index.md b/docs/zh-HK/pricing/index.md
index 326e6e47..a528b63b 100644
--- a/docs/zh-HK/pricing/index.md
+++ b/docs/zh-HK/pricing/index.md
@@ -1,7 +1,7 @@
 ---
 title: '定價'
 id: pricing
-layout: page
+layout: false
 sidebar: false
 ---
 
diff --git a/docs/zh-HK/skill/index.md b/docs/zh-HK/skill/index.md
index dbf01cc8..2c278fa8 100644
--- a/docs/zh-HK/skill/index.md
+++ b/docs/zh-HK/skill/index.md
@@ -3,7 +3,7 @@ sidebar: false
 title: Skill
 description: Give your AI assistant direct access to real-time HK/US stock data and trading capabilities with Longbridge Skill
 id: skill
-layout: home
+layout: false
 ---
 
 <Skill />

From da3e3a46faeb4c32f9dcb44b24c774ae40557ca7 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 14:56:30 +0800
Subject: [PATCH 2/9] feat(design): refine skill/home pages and reframe copy
 for investors

- Skill.vue: marketplace card always-dark styling, active tab dark bg,
  count badge visible in dark mode, capability grid fixed to 3 columns
- NewHomePage: shift all copy from developer/app-building framing to
  investor/quantitative-trading framing; expand SDK samples to per-lang
  multi-language strings (Python/Node/Rust/Go/Java/C++) with syntax
  highlighting for each language
- index.css: align dark mode bg vars with LB design system
- app-styles.css: minor canvas bg and border-radius tweaks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../theme/components/NewHomePage/index.vue    | 373 ++++++++++++++----
 docs/.vitepress/theme/components/Skill.vue    |  65 ++-
 docs/.vitepress/theme/style/app-styles.css    |   8 +-
 docs/.vitepress/theme/style/index.css         |   7 +
 4 files changed, 337 insertions(+), 116 deletions(-)

diff --git a/docs/.vitepress/theme/components/NewHomePage/index.vue b/docs/.vitepress/theme/components/NewHomePage/index.vue
index 0a92a3ca..d216c5f1 100644
--- a/docs/.vitepress/theme/components/NewHomePage/index.vue
+++ b/docs/.vitepress/theme/components/NewHomePage/index.vue
@@ -25,72 +25,250 @@ const SDK_LANGUAGES = [
   { name: 'C++', installer: 'cmake', cmd: 'git clone github.com/longbridge/openapi-cpp', color: '#00599C' },
 ]
 
-type CodeLine = [string, string]
-const SDK_SAMPLES: Record<string, CodeLine[]> = {
-  'Get Quote': [
-    ['c', '# Real-time quote for 4 symbols'],
-    ['', 'from longbridge.openapi import QuoteContext, Config'],
-    ['', ''],
-    ['', 'config = Config.from_env()'],
-    ['', 'ctx = QuoteContext(config)'],
-    ['', ''],
-    ['', 'resp = ctx.quote(["AAPL.US", "TSLA.US", "NVDA.US", "GOOG.US"])'],
-    ['', 'print(resp)'],
-  ],
-  'Place Order': [
-    ['c', '# Submit a buy order with limit price'],
-    ['', 'from longbridge.openapi import TradeContext, OrderType, OrderSide'],
-    ['', ''],
-    ['', 'ctx = TradeContext(Config.from_env())'],
-    ['', 'order = ctx.submit_order('],
-    ['', '    symbol="TSLA.US",'],
-    ['', '    order_type=OrderType.LO,'],
-    ['', '    side=OrderSide.Buy,'],
-    ['', '    submitted_quantity=Decimal("10"),'],
-    ['', '    submitted_price=Decimal("420.00"),'],
-    ['', ')'],
-  ],
-  'Subscribe Push': [
-    ['c', '# WebSocket streaming — quote + depth'],
-    ['', 'from longbridge.openapi import SubType'],
-    ['', ''],
-    ['', 'ctx.subscribe(["TSLA.US","700.HK"], [SubType.Quote, SubType.Depth], True)'],
-    ['', ''],
-    ['', 'def on_quote(sym, ev):'],
-    ['', '    print(f"{sym} {ev.last_done} {ev.change_rate}")'],
-    ['', ''],
-    ['', 'ctx.set_on_quote(on_quote)'],
-  ],
-  'Account Balance': [
-    ['c', '# Balance + buying power across sub-accounts'],
-    ['', 'balance = ctx.account_balance()'],
-    ['', 'for b in balance:'],
-    ['', '    print(b.currency, b.net_assets, b.buy_power)'],
-    ['', ''],
-    ['o', 'USD  128,365.42  42,118.20'],
-    ['o', 'HKD   84,920.11  12,008.30'],
-  ],
+const SDK_SAMPLES: Record<string, Record<string, string>> = {
+  'Get Quote': {
+    Python: `from longbridge.openapi import QuoteContext, Config, OAuthBuilder
+
+oauth = OAuthBuilder("your-client-id").build(
+    lambda url: print("Visit:", url))
+config = Config.from_oauth(oauth)
+ctx = QuoteContext(config)
+
+resp = ctx.quote(["AAPL.US", "TSLA.US", "NVDA.US", "GOOG.US"])
+print(resp)`,
+    'Node.js': `const { Config, QuoteContext, OAuth } = require('longbridge')
+
+async function main() {
+  const oauth = await OAuth.build('your-client-id',
+    (_, url) => console.log('Open:', url))
+  const config = Config.fromOAuth(oauth)
+  const ctx = QuoteContext.new(config)
+  const resp = await ctx.quote(['AAPL.US', 'TSLA.US', 'NVDA.US'])
+  for (const obj of resp) console.log(obj.toString())
+}
+main().catch(console.error)`,
+    Rust: `use std::sync::Arc;
+use longbridge::{oauth::OAuthBuilder, quote::QuoteContext, Config};
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let oauth = OAuthBuilder::new("your-client-id")
+        .build(|url| println!("Open: {url}")).await?;
+    let config = Arc::new(Config::from_oauth(oauth));
+    let (ctx, _) = QuoteContext::new(config);
+    let resp = ctx.quote(["AAPL.US", "TSLA.US"]).await?;
+    println!("{:?}", resp);
+    Ok(())
+}`,
+    Go: `conf, _ := config.New(config.WithOAuthClient(o))
+qctx, _ := quote.NewFromCfg(conf)
+defer qctx.Close()
+quotes, _ := qctx.Quote(context.Background(),
+  []string{"AAPL.US", "TSLA.US", "NVDA.US"})
+fmt.Printf("%+v\\n", quotes[0])`,
+    Java: `try (Config config = Config.fromOAuth(oauth);
+     QuoteContext ctx = QuoteContext.create(config)) {
+    SecurityQuote[] resp = ctx.getQuote(
+        new String[]{"AAPL.US", "TSLA.US"}).get();
+    for (SecurityQuote q : resp) System.out.println(q);
+}`,
+    'C++': `Config config = Config::from_oauth(oauth);
+QuoteContext ctx = QuoteContext::create(config);
+ctx.quote({"AAPL.US", "TSLA.US"}, [](auto res) {
+    for (const auto& q : *res)
+        std::cout << q.symbol << " "
+                  << (double)q.last_done << std::endl;
+});`,
+  },
+  'Place Order': {
+    Python: `from decimal import Decimal
+from longbridge.openapi import (
+    TradeContext, Config, OrderType,
+    OrderSide, TimeInForceType, OAuthBuilder)
+
+oauth = OAuthBuilder("your-client-id").build(
+    lambda url: print("Visit:", url))
+ctx = TradeContext(Config.from_oauth(oauth))
+
+resp = ctx.submit_order(
+    "AAPL.US", OrderType.LO, OrderSide.Buy,
+    Decimal(100), TimeInForceType.Day,
+    submitted_price=Decimal(250))
+print(resp)`,
+    'Node.js': `const { Config, TradeContext, OAuth,
+  OrderType, OrderSide, TimeInForceType } = require('longbridge')
+
+async function main() {
+  const oauth = await OAuth.build('your-client-id',
+    (_, url) => console.log('Open:', url))
+  const ctx = TradeContext.new(Config.fromOAuth(oauth))
+  const resp = await ctx.submitOrder({
+    symbol: 'AAPL.US', orderType: OrderType.LO,
+    side: OrderSide.Buy, submittedQuantity: 100,
+    submittedPrice: 250, timeInForce: TimeInForceType.Day })
+  console.log(resp)
+}
+main().catch(console.error)`,
+    Rust: `use longbridge::{trade::{TradeContext, SubmitOrderOptions,
+    OrderType, OrderSide, TimeInForceType}, Config};
+use rust_decimal::Decimal;
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let config = Arc::new(Config::from_oauth(oauth));
+    let (ctx, _) = TradeContext::new(config);
+    let resp = ctx.submit_order(
+        SubmitOrderOptions::new("AAPL.US", OrderType::LO,
+            OrderSide::Buy, Decimal::from(100),
+            TimeInForceType::Day)
+            .submitted_price(Decimal::from(250))
+    ).await?;
+    println!("{:?}", resp);
+    Ok(())
+}`,
+    Go: `tctx, _ := trade.NewFromCfg(conf)
+orderID, _ := tctx.SubmitOrder(ctx, &trade.SubmitOrder{
+    Symbol: "AAPL.US", OrderType: trade.OrderTypeLO,
+    Side: trade.OrderSideBuy, SubmittedQuantity: 100,
+    SubmittedPrice: decimal.NewFromFloat(250),
+    TimeInForce: trade.TimeTypeDay })
+fmt.Println("order_id:", orderID)`,
+    Java: `SubmitOrderResponse resp = ctx.submitOrder(
+    new SubmitOrderOptions("AAPL.US", OrderType.LO,
+        OrderSide.Buy, new BigDecimal("100"),
+        TimeInForceType.Day)
+        .setSubmittedPrice(new BigDecimal("250"))).get();
+System.out.println(resp.orderId);`,
+    'C++': `Config config = Config::from_oauth(oauth);
+TradeContext ctx = TradeContext::create(config);
+SubmitOrderOptions opts{"AAPL.US", OrderType::LO,
+    OrderSide::Buy, 100, TimeInForceType::Day,
+    Decimal(250.0)};
+ctx.submit_order(opts, [](auto res) {
+    std::cout << "order_id: " << res->order_id << std::endl;
+});`,
+  },
+  'Subscribe Push': {
+    Python: `from longbridge.openapi import QuoteContext, Config, SubType, PushQuote
+
+def on_quote(symbol: str, event: PushQuote):
+    print(symbol, event)
+
+oauth = OAuthBuilder("your-client-id").build(
+    lambda url: print("Visit:", url))
+ctx = QuoteContext(Config.from_oauth(oauth))
+ctx.set_on_quote(on_quote)
+ctx.subscribe(["AAPL.US", "TSLA.US"], [SubType.Quote])`,
+    'Node.js': `const { Config, QuoteContext, OAuth, SubType } = require('longbridge')
+
+async function main() {
+  const oauth = await OAuth.build("your-client-id",
+    (_, url) => console.log("Open:", url))
+  const ctx = QuoteContext.new(Config.fromOAuth(oauth))
+  ctx.setOnQuote((event) => console.log(event))
+  await ctx.subscribe(["AAPL.US", "TSLA.US"], [SubType.Quote], true)
+  await new Promise(r => setTimeout(r, 30000))
+}
+main().catch(console.error)`,
+    Rust: `use longbridge::{quote::{QuoteContext, SubFlags}, Config};
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let config = Arc::new(Config::from_oauth(oauth));
+    let (ctx, mut rx) = QuoteContext::new(config);
+    ctx.subscribe(
+        vec!["AAPL.US".into(), "TSLA.US".into()],
+        SubFlags::QUOTE, true,
+    ).await?;
+    while let Some(event) = rx.recv().await {
+        println!("{:?}", event);
+    }
+    Ok(())
+}`,
+    Go: `qctx, _ := quote.NewFromCfg(conf)
+qctx.OnQuote(func(e *quote.PushQuote) {
+    fmt.Println(e.Symbol) })
+qctx.Subscribe(ctx, []string{"AAPL.US", "TSLA.US"},
+    []quote.SubType{quote.SubTypeQuote}, true)
+select {}`,
+    Java: `ctx.setOnQuote(event -> System.out.println(event));
+ctx.subscribe(new String[]{"AAPL.US", "TSLA.US"},
+    new SubType[]{SubType.Quote}, true).get();
+Thread.sleep(30000);`,
+    'C++': `ctx.set_on_quote([](auto e) {
+    std::cout << e->symbol << std::endl; });
+ctx.subscribe({"AAPL.US", "TSLA.US"},
+    SubFlags::QUOTE(), true, [](auto) {});`,
+  },
+  'Account Balance': {
+    Python: `from longbridge.openapi import TradeContext, Config, OAuthBuilder
+
+oauth = OAuthBuilder("your-client-id").build(
+    lambda url: print("Visit:", url))
+ctx = TradeContext(Config.from_oauth(oauth))
+resp = ctx.account_balance()
+for b in resp:
+    print(b.currency, b.net_assets, b.buy_power)`,
+    'Node.js': `const { Config, TradeContext, OAuth } = require('longbridge')
+
+async function main() {
+  const oauth = await OAuth.build('your-client-id',
+    (_, url) => console.log('Open:', url))
+  const ctx = TradeContext.new(Config.fromOAuth(oauth))
+  const resp = await ctx.accountBalance()
+  for (const obj of resp) console.log(obj.toString())
+}
+main().catch(console.error)`,
+    Rust: `use longbridge::{trade::TradeContext, Config};
+
+#[tokio::main]
+async fn main() -> Result<(), Box<dyn std::error::Error>> {
+    let config = Arc::new(Config::from_oauth(oauth));
+    let (ctx, _) = TradeContext::new(config);
+    let resp = ctx.account_balance(None).await?;
+    println!("{:?}", resp);
+    Ok(())
+}`,
+    Go: `tctx, _ := trade.NewFromCfg(conf)
+resp, _ := tctx.AccountBalance(ctx,
+    &trade.GetAccountBalance{})
+for _, b := range resp {
+    fmt.Printf("%s: %s\\n", b.Currency, b.NetAssets)
+}`,
+    Java: `AccountBalance[] resp = ctx.getAccountBalance().get();
+for (AccountBalance obj : resp)
+    System.out.println(obj);`,
+    'C++': `ctx.account_balance([](auto res) {
+    for (const auto& b : *res)
+        std::cout << b.currency << " "
+                  << b.net_assets << std::endl;
+});`,
+  },
 }
 
-const currentSdkSample = computed(() => SDK_SAMPLES[sdkTab.value] || [])
+const currentSdkSample = computed(() =>
+  SDK_SAMPLES[sdkTab.value]?.[sdkLang.value] ?? ''
+)
 const currentSdkLang = computed(() => SDK_LANGUAGES.find(l => l.name === sdkLang.value))
 
+const fileExt: Record<string, string> = {
+  Python: 'py', 'Node.js': 'js', Rust: 'rs', Go: 'go', Java: 'java', 'C++': 'cpp',
+}
+
+function escHtml(s: string) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+}
+
 const PY_KEYWORDS = new Set([
   'from','import','def','class','for','while','if','elif','else','in','not',
   'and','or','is','True','False','None','return','with','as','async','await',
   'try','except','raise','pass','break','continue','lambda','yield','print','len',
 ])
 
-function escHtml(s: string) {
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
-}
-
 function highlightPython(code: string): string {
-  let out = ''
-  let i = 0
+  let out = '', i = 0
   while (i < code.length) {
     const ch = code[i]
-    // f/b/r-prefixed string
     if (/^[fFbBrR]$/.test(ch) && (code[i+1] === '"' || code[i+1] === "'")) {
       const prefix = ch; i++
       const q = code[i]; let s = prefix + q; i++
@@ -98,28 +276,66 @@ function highlightPython(code: string): string {
       s += code[i]||''; i++
       out += `<span class="ln-str">${escHtml(s)}</span>`; continue
     }
-    // string
     if (ch === '"' || ch === "'") {
       const q = ch; let s = q; i++
       while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
       s += code[i]||''; i++
       out += `<span class="ln-str">${escHtml(s)}</span>`; continue
     }
-    // comment
-    if (ch === '#') {
+    if (ch === '#') { out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`; break }
+    if (/\d/.test(ch)) {
+      let n = ''
+      while (i < code.length && /[\d._]/.test(code[i])) n += code[i++]
+      out += `<span class="ln-num">${escHtml(n)}</span>`; continue
+    }
+    if (/[a-zA-Z_]/.test(ch)) {
+      let w = ''
+      while (i < code.length && /[a-zA-Z0-9_]/.test(code[i])) w += code[i++]
+      if (PY_KEYWORDS.has(w)) out += `<span class="ln-key">${w}</span>`
+      else if (code[i] === '(') out += `<span class="ln-fn">${escHtml(w)}</span>`
+      else out += escHtml(w)
+      continue
+    }
+    out += escHtml(ch); i++
+  }
+  return out
+}
+
+const LANG_KEYWORDS: Record<string, Set<string>> = {
+  Rust: new Set(['use','let','mut','fn','async','await','pub','struct','impl','for','while','if','else','match','return','Ok','Err','Some','None','true','false','Arc','Box','Vec','String','println','tokio','main','mod','type','where','in','move','ref','self','super','crate']),
+  'Node.js': new Set(['const','let','var','function','async','await','for','while','if','else','return','new','class','import','from','require','export','default','true','false','null','undefined','console','Promise','of','in']),
+  Go: new Set(['func','var','const','type','struct','interface','for','range','if','else','return','defer','go','chan','select','case','default','break','continue','package','import','map','make','append','len','fmt','nil','true','false','error']),
+  Java: new Set(['public','private','protected','static','final','class','interface','extends','implements','new','return','void','for','while','if','else','try','catch','throws','import','package','this','super','true','false','null','String','int','long','double','boolean','System']),
+  'C++': new Set(['auto','const','void','for','while','if','else','return','new','delete','class','struct','namespace','using','include','template','typename','public','private','protected','std','cout','endl','true','false','nullptr','int','double','float','bool','char','long','unsigned']),
+}
+
+function highlightGeneric(code: string, lang: string): string {
+  const keywords = LANG_KEYWORDS[lang] || new Set()
+  let out = '', i = 0
+  while (i < code.length) {
+    const ch = code[i]
+    // line comment
+    if ((ch === '/' && code[i+1] === '/') || (ch === '#')) {
       out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`; break
     }
+    // string
+    if (ch === '"' || ch === "'") {
+      const q = ch; let s = q; i++
+      while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
+      s += code[i]||''; i++
+      out += `<span class="ln-str">${escHtml(s)}</span>`; continue
+    }
     // number
-    if (/\d/.test(ch)) {
+    if (/\d/.test(ch) && (i === 0 || !/[a-zA-Z_]/.test(code[i-1]))) {
       let n = ''
       while (i < code.length && /[\d._]/.test(code[i])) n += code[i++]
       out += `<span class="ln-num">${escHtml(n)}</span>`; continue
     }
-    // identifier / keyword / function call
+    // identifier / keyword
     if (/[a-zA-Z_]/.test(ch)) {
       let w = ''
       while (i < code.length && /[a-zA-Z0-9_]/.test(code[i])) w += code[i++]
-      if (PY_KEYWORDS.has(w)) out += `<span class="ln-key">${w}</span>`
+      if (keywords.has(w)) out += `<span class="ln-key">${w}</span>`
       else if (code[i] === '(') out += `<span class="ln-fn">${escHtml(w)}</span>`
       else out += escHtml(w)
       continue
@@ -129,14 +345,17 @@ function highlightPython(code: string): string {
   return out
 }
 
-function formatCodeLine([type, text]: CodeLine): string {
-  const t = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-  if (type === 'c') return `<span class="ln-comment">${t}</span>`
-  if (type === 'o') return `<span style="color:var(--lb-fg-2)">${t}</span>`
-  if (!text) return '&nbsp;'
-  return highlightPython(text)
+function formatLine(text: string): string {
+  if (!text.trim()) return '&nbsp;'
+  return sdkLang.value === 'Python'
+    ? highlightPython(text)
+    : highlightGeneric(text, sdkLang.value)
 }
 
+const currentSdkLines = computed(() =>
+  currentSdkSample.value.split('\n')
+)
+
 async function copyToClipboard(text: string) {
   try { await navigator.clipboard.writeText(text) } catch {}
 }
@@ -238,12 +457,12 @@ const GETSTARTED = [
         <span class="eyebrow">LONGBRIDGE OPENAPI</span>
         <h1 class="h-display home-hero-title">
           Real-time markets,<br />
-          <span :style="{ color: 'var(--lb-brand)' }">delivered to your code.</span>
+          <span :style="{ color: 'var(--lb-brand)' }">built for AI.</span>
         </h1>
         <p class="t-body home-hero-sub">
-          Real-time market data, trading, and financial intelligence — delivered through
-          <b :style="{ color: 'var(--lb-fg-1)' }">AI Skill, CLI, MCP, SDK and OpenAPI</b>
-          for developers worldwide. One credential, seven SDKs, zero ceremony.
+          Real-time market data, quantitative research, and AI-powered analysis — through
+          <b :style="{ color: 'var(--lb-fg-1)' }">AI Skill, CLI, MCP, SDK and OpenAPI</b>.
+          One credential, every market, zero overhead.
         </p>
         <div class="home-hero-cta">
           <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
@@ -276,7 +495,7 @@ const GETSTARTED = [
         <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:48px">
           <div style="max-width:560px">
             <span class="eyebrow">FEATURES</span>
-            <h2 class="h-section" style="margin-top:16px">Everything you need to build, test, and ship financial apps.</h2>
+            <h2 class="h-section" style="margin-top:16px">Everything you need for market analysis, quantitative research, and intelligent trading.</h2>
           </div>
           <a class="btn btn-ghost" :href="localePath('/docs')">
             Compare all
@@ -501,7 +720,7 @@ const GETSTARTED = [
       <div class="section-inner">
         <div style="max-width:560px;margin-bottom:48px">
           <span class="eyebrow">API Capabilities</span>
-          <h2 class="h-section" style="margin-top:16px">Everything you need to build trading and market data apps.</h2>
+          <h2 class="h-section" style="margin-top:16px">Real-time data and trading capabilities for every investment workflow.</h2>
         </div>
         <div class="api-caps-grid">
           <a v-for="c in API_CAPS" :key="c.title" :href="localePath('/api')" class="api-cap-card">
@@ -560,13 +779,13 @@ const GETSTARTED = [
             <div class="code" style="margin-top:12px;flex:1;display:flex;flex-direction:column">
               <div class="code-head">
                 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-                <span style="font-size:11.5px;color:var(--lb-fg-3)">{{ sdkLang.toLowerCase() }} · {{ sdkTab.toLowerCase().replace(' ', '_') }}.py</span>
-                <button class="code-copy" @click="copyToClipboard(currentSdkSample.map(l => l[1]).join('\n'))">
+                <span style="font-size:11.5px;color:var(--lb-fg-3)">{{ sdkTab.toLowerCase().replace(/ /g, '_') }}.{{ fileExt[sdkLang] ?? 'py' }}</span>
+                <button class="code-copy" @click="copyToClipboard(currentSdkSample)">
                   <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
                 </button>
               </div>
               <div class="code-body" style="flex:1">
-                <div v-for="(line, idx) in currentSdkSample" :key="idx" v-html="formatCodeLine(line)" />
+                <div v-for="(line, idx) in currentSdkLines" :key="idx" v-html="formatLine(line)" />
               </div>
             </div>
             <div class="sdk-install">
@@ -668,7 +887,7 @@ const GETSTARTED = [
       <div class="section-inner">
         <div style="text-align:center;max-width:640px;margin:0 auto">
           <span class="eyebrow">Get started</span>
-          <h2 class="h-section" style="margin-top:18px">Start building in minutes</h2>
+          <h2 class="h-section" style="margin-top:18px">Get started in minutes</h2>
           <p class="t-body" style="margin-top:14px">
             Set up your environment, authenticate, and make your first API call — everything you need to go from zero to live data.
           </p>
@@ -695,10 +914,10 @@ const GETSTARTED = [
     <!-- ===== Final CTA ===== -->
     <section class="section">
       <div class="section-inner final-cta">
-        <h2 class="h-section" style="max-width:680px">Ship your trading product faster than the markets move.</h2>
+        <h2 class="h-section" style="max-width:680px">Your investment edge, powered by real-time data and AI.</h2>
         <div style="display:flex;gap:12px;flex-wrap:wrap">
           <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
-            Start building
+            Get started
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
           </a>
           <a class="btn btn-outline btn-lg" :href="localePath('/pricing')">See pricing</a>
diff --git a/docs/.vitepress/theme/components/Skill.vue b/docs/.vitepress/theme/components/Skill.vue
index ff304d7b..6ba1fa16 100644
--- a/docs/.vitepress/theme/components/Skill.vue
+++ b/docs/.vitepress/theme/components/Skill.vue
@@ -1131,19 +1131,6 @@ function rowClass(flag: string | boolean) {
   border: 1px dashed var(--app-card-stroke) !important;
   color: var(--lb-fg-3) !important;
 }
-.ai-agent-mark {
-  width: 20px;
-  height: 20px;
-  border-radius: 5px;
-  line-height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 700;
-  color: #fff;
-  flex-shrink: 0;
-}
 
 /* ---- Copy button ---- */
 .code-copy {
@@ -1376,27 +1363,29 @@ function rowClass(flag: string | boolean) {
 
 /* ---- Skill Catalog ---- */
 .skill-marketplace-card {
-  background: var(--lb-bg-2);
-  border: 1px solid var(--app-card-stroke);
+  background: #13182a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   padding: 14px 16px;
-  min-width: 300px;
-  max-width: 340px;
+  min-width: 360px;
+  max-width: 400px;
 }
 .skill-marketplace-label {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: var(--lb-fg-2);
+  line-height: 1.3;
+  color: rgba(255, 255, 255, 0.75);
   font-weight: 500;
   margin-bottom: 10px;
+  white-space: nowrap;
 }
 .skill-marketplace-pill {
   font-size: 10px;
   font-weight: 700;
-  background: color-mix(in srgb, var(--lb-brand) 15%, transparent);
-  color: var(--lb-brand);
+  background: color-mix(in srgb, var(--vp-c-brand-1) 20%, transparent);
+  color: var(--vp-c-brand-1);
   padding: 2px 6px;
   border-radius: 4px;
   letter-spacing: 0.05em;
@@ -1405,14 +1394,15 @@ function rowClass(flag: string | boolean) {
 .skill-marketplace-cmd {
   display: block;
   font-size: 11.5px;
+  line-height: 1.4;
   font-family: var(--vp-font-family-mono);
-  color: var(--lb-fg-1);
-  background: var(--lb-bg-1);
-  border: 1px solid var(--app-card-stroke);
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 6px;
-  padding: 6px 10px;
+  padding: 7px 12px;
   margin-bottom: 6px;
-  word-break: break-all;
+  white-space: nowrap;
 }
 .skill-marketplace-cmd:last-child {
   margin-bottom: 0;
@@ -1426,10 +1416,11 @@ function rowClass(flag: string | boolean) {
 .skill-cat-tab {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 5px 12px;
+  gap: 5px;
+  padding: 4px 10px;
   border-radius: 999px;
   font-size: 13px;
+  line-height: 1.4;
   font-weight: 500;
   color: var(--lb-fg-2);
   background: var(--lb-bg-2);
@@ -1442,20 +1433,21 @@ function rowClass(flag: string | boolean) {
   border-color: var(--lb-fg-3);
 }
 .skill-cat-tab.is-active {
-  background: var(--lb-brand);
-  color: #fff;
-  border-color: var(--lb-brand);
+  background: var(--lb-fg-1);
+  color: var(--lb-bg-1);
+  border-color: var(--lb-fg-1);
 }
 .skill-cat-tab.is-active .skill-cat-count {
-  background: rgba(255, 255, 255, 0.25);
-  color: #fff;
+  background: rgba(0, 0, 0, 0.15);
+  color: var(--lb-bg-1);
 }
 .skill-cat-count {
   font-size: 11px;
+  line-height: 1.4;
   background: var(--lb-bg-1);
   color: var(--lb-fg-3);
   border-radius: 999px;
-  padding: 1px 7px;
+  padding: 1px 6px;
   font-weight: 600;
 }
 .skill-grid {
@@ -1534,9 +1526,14 @@ function rowClass(flag: string | boolean) {
 /* ---- Capability Reference ---- */
 .skill-cap-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
   gap: 24px 32px;
 }
+@media (max-width: 768px) {
+  .skill-cap-grid {
+    grid-template-columns: 1fr;
+  }
+}
 .skill-cap-col ul {
   list-style: none;
   padding: 0;
diff --git a/docs/.vitepress/theme/style/app-styles.css b/docs/.vitepress/theme/style/app-styles.css
index 0501262a..c4bd7ba7 100644
--- a/docs/.vitepress/theme/style/app-styles.css
+++ b/docs/.vitepress/theme/style/app-styles.css
@@ -19,7 +19,7 @@
 }
 
 .lb-dark {
-  --app-canvas: #06080f;
+  --app-canvas: #0a0e19;
   --app-card-stroke: #1f232e;
   --app-card-stroke-strong: #2c3039;
   --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
@@ -1175,7 +1175,7 @@
   width: 18px;
   height: 18px;
   line-height: 18px;
-  border-radius: 999px;
+  border-radius: 100%;
   display: grid;
   place-items: center;
   font-size: 10px;
@@ -1937,7 +1937,6 @@
   text-align: left;
   font: 500 13.5px/1.4 var(--lb-font-sans);
   color: var(--lb-fg-2);
-  border-radius: 8px;
   cursor: pointer;
   white-space: nowrap;
   transition: all var(--lb-transition-fast);
@@ -1947,7 +1946,7 @@
   color: var(--lb-fg-1);
 }
 .skill-demo-nav-item.is-active {
-  background: color-mix(in srgb, var(--lb-brand) 10%, transparent);
+  background: color-mix(in srgb, var(--lb-brand) 40%, transparent);
   color: var(--lb-brand);
   font-weight: 600;
 }
@@ -2014,7 +2013,6 @@
   max-width: 70%;
   padding: 10px 14px;
   background: color-mix(in srgb, var(--lb-brand) 18%, var(--lb-bg-2));
-  border: 1px solid color-mix(in srgb, var(--lb-brand) 28%, var(--app-card-stroke));
   color: var(--lb-fg-1);
   border-radius: 14px 14px 4px 14px;
   font-size: 13px;
diff --git a/docs/.vitepress/theme/style/index.css b/docs/.vitepress/theme/style/index.css
index aef87830..f0b73c08 100644
--- a/docs/.vitepress/theme/style/index.css
+++ b/docs/.vitepress/theme/style/index.css
@@ -62,6 +62,13 @@ html:root {
   --vp-layout-max-width: 1240px;
 }
 
+/* Dark mode: align VitePress doc background with LB design system */
+html.dark {
+  --vp-c-bg: #0A0E19;
+  --vp-c-bg-soft: #13182A;
+  --vp-c-bg-mute: #161A26;
+}
+
 /* AppNav is sticky (in document flow), so VitePress's fixed-nav compensation is not needed */
 @media (min-width: 960px) {
   .VPContent {

From 642682de593ec402006928e3dab43437bac88bbd Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 15:09:39 +0800
Subject: [PATCH 3/9] feat(skill): fix user cases grid to 4 equal columns,
 update AWARD tag style

- Change grid-template-columns from 1.4fr 1fr 1fr 1fr to repeat(4, 1fr)
- Remove grid-column: 1/-1 from 1024px breakpoint (award card no longer spans full row)
- Update AWARD tag from pill badge to text + extending horizontal line
- Include homepage SDK demo multi-language code samples

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../theme/components/NewHomePage/index.vue    | 1333 ++++++++++++++---
 docs/.vitepress/theme/components/Skill.vue    |   17 +-
 docs/.vitepress/theme/style/app-styles.css    |   21 +-
 3 files changed, 1134 insertions(+), 237 deletions(-)

diff --git a/docs/.vitepress/theme/components/NewHomePage/index.vue b/docs/.vitepress/theme/components/NewHomePage/index.vue
index d216c5f1..4f67d8f7 100644
--- a/docs/.vitepress/theme/components/NewHomePage/index.vue
+++ b/docs/.vitepress/theme/components/NewHomePage/index.vue
@@ -246,47 +246,105 @@ for (AccountBalance obj : resp)
   },
 }
 
-const currentSdkSample = computed(() =>
-  SDK_SAMPLES[sdkTab.value]?.[sdkLang.value] ?? ''
-)
-const currentSdkLang = computed(() => SDK_LANGUAGES.find(l => l.name === sdkLang.value))
+const currentSdkSample = computed(() => SDK_SAMPLES[sdkTab.value]?.[sdkLang.value] ?? '')
+const currentSdkLang = computed(() => SDK_LANGUAGES.find((l) => l.name === sdkLang.value))
 
 const fileExt: Record<string, string> = {
-  Python: 'py', 'Node.js': 'js', Rust: 'rs', Go: 'go', Java: 'java', 'C++': 'cpp',
+  Python: 'py',
+  'Node.js': 'js',
+  Rust: 'rs',
+  Go: 'go',
+  Java: 'java',
+  'C++': 'cpp',
 }
 
 function escHtml(s: string) {
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
 const PY_KEYWORDS = new Set([
-  'from','import','def','class','for','while','if','elif','else','in','not',
-  'and','or','is','True','False','None','return','with','as','async','await',
-  'try','except','raise','pass','break','continue','lambda','yield','print','len',
+  'from',
+  'import',
+  'def',
+  'class',
+  'for',
+  'while',
+  'if',
+  'elif',
+  'else',
+  'in',
+  'not',
+  'and',
+  'or',
+  'is',
+  'True',
+  'False',
+  'None',
+  'return',
+  'with',
+  'as',
+  'async',
+  'await',
+  'try',
+  'except',
+  'raise',
+  'pass',
+  'break',
+  'continue',
+  'lambda',
+  'yield',
+  'print',
+  'len',
 ])
 
 function highlightPython(code: string): string {
-  let out = '', i = 0
+  let out = '',
+    i = 0
   while (i < code.length) {
     const ch = code[i]
-    if (/^[fFbBrR]$/.test(ch) && (code[i+1] === '"' || code[i+1] === "'")) {
-      const prefix = ch; i++
-      const q = code[i]; let s = prefix + q; i++
-      while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
-      s += code[i]||''; i++
-      out += `<span class="ln-str">${escHtml(s)}</span>`; continue
+    if (/^[fFbBrR]$/.test(ch) && (code[i + 1] === '"' || code[i + 1] === "'")) {
+      const prefix = ch
+      i++
+      const q = code[i]
+      let s = prefix + q
+      i++
+      while (i < code.length && code[i] !== q) {
+        if (code[i] === '\\') {
+          s += code[i++]
+        }
+        s += code[i] || ''
+        i++
+      }
+      s += code[i] || ''
+      i++
+      out += `<span class="ln-str">${escHtml(s)}</span>`
+      continue
     }
     if (ch === '"' || ch === "'") {
-      const q = ch; let s = q; i++
-      while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
-      s += code[i]||''; i++
-      out += `<span class="ln-str">${escHtml(s)}</span>`; continue
+      const q = ch
+      let s = q
+      i++
+      while (i < code.length && code[i] !== q) {
+        if (code[i] === '\\') {
+          s += code[i++]
+        }
+        s += code[i] || ''
+        i++
+      }
+      s += code[i] || ''
+      i++
+      out += `<span class="ln-str">${escHtml(s)}</span>`
+      continue
+    }
+    if (ch === '#') {
+      out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`
+      break
     }
-    if (ch === '#') { out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`; break }
     if (/\d/.test(ch)) {
       let n = ''
       while (i < code.length && /[\d._]/.test(code[i])) n += code[i++]
-      out += `<span class="ln-num">${escHtml(n)}</span>`; continue
+      out += `<span class="ln-num">${escHtml(n)}</span>`
+      continue
     }
     if (/[a-zA-Z_]/.test(ch)) {
       let w = ''
@@ -296,40 +354,217 @@ function highlightPython(code: string): string {
       else out += escHtml(w)
       continue
     }
-    out += escHtml(ch); i++
+    out += escHtml(ch)
+    i++
   }
   return out
 }
 
 const LANG_KEYWORDS: Record<string, Set<string>> = {
-  Rust: new Set(['use','let','mut','fn','async','await','pub','struct','impl','for','while','if','else','match','return','Ok','Err','Some','None','true','false','Arc','Box','Vec','String','println','tokio','main','mod','type','where','in','move','ref','self','super','crate']),
-  'Node.js': new Set(['const','let','var','function','async','await','for','while','if','else','return','new','class','import','from','require','export','default','true','false','null','undefined','console','Promise','of','in']),
-  Go: new Set(['func','var','const','type','struct','interface','for','range','if','else','return','defer','go','chan','select','case','default','break','continue','package','import','map','make','append','len','fmt','nil','true','false','error']),
-  Java: new Set(['public','private','protected','static','final','class','interface','extends','implements','new','return','void','for','while','if','else','try','catch','throws','import','package','this','super','true','false','null','String','int','long','double','boolean','System']),
-  'C++': new Set(['auto','const','void','for','while','if','else','return','new','delete','class','struct','namespace','using','include','template','typename','public','private','protected','std','cout','endl','true','false','nullptr','int','double','float','bool','char','long','unsigned']),
+  Rust: new Set([
+    'use',
+    'let',
+    'mut',
+    'fn',
+    'async',
+    'await',
+    'pub',
+    'struct',
+    'impl',
+    'for',
+    'while',
+    'if',
+    'else',
+    'match',
+    'return',
+    'Ok',
+    'Err',
+    'Some',
+    'None',
+    'true',
+    'false',
+    'Arc',
+    'Box',
+    'Vec',
+    'String',
+    'println',
+    'tokio',
+    'main',
+    'mod',
+    'type',
+    'where',
+    'in',
+    'move',
+    'ref',
+    'self',
+    'super',
+    'crate',
+  ]),
+  'Node.js': new Set([
+    'const',
+    'let',
+    'var',
+    'function',
+    'async',
+    'await',
+    'for',
+    'while',
+    'if',
+    'else',
+    'return',
+    'new',
+    'class',
+    'import',
+    'from',
+    'require',
+    'export',
+    'default',
+    'true',
+    'false',
+    'null',
+    'undefined',
+    'console',
+    'Promise',
+    'of',
+    'in',
+  ]),
+  Go: new Set([
+    'func',
+    'var',
+    'const',
+    'type',
+    'struct',
+    'interface',
+    'for',
+    'range',
+    'if',
+    'else',
+    'return',
+    'defer',
+    'go',
+    'chan',
+    'select',
+    'case',
+    'default',
+    'break',
+    'continue',
+    'package',
+    'import',
+    'map',
+    'make',
+    'append',
+    'len',
+    'fmt',
+    'nil',
+    'true',
+    'false',
+    'error',
+  ]),
+  Java: new Set([
+    'public',
+    'private',
+    'protected',
+    'static',
+    'final',
+    'class',
+    'interface',
+    'extends',
+    'implements',
+    'new',
+    'return',
+    'void',
+    'for',
+    'while',
+    'if',
+    'else',
+    'try',
+    'catch',
+    'throws',
+    'import',
+    'package',
+    'this',
+    'super',
+    'true',
+    'false',
+    'null',
+    'String',
+    'int',
+    'long',
+    'double',
+    'boolean',
+    'System',
+  ]),
+  'C++': new Set([
+    'auto',
+    'const',
+    'void',
+    'for',
+    'while',
+    'if',
+    'else',
+    'return',
+    'new',
+    'delete',
+    'class',
+    'struct',
+    'namespace',
+    'using',
+    'include',
+    'template',
+    'typename',
+    'public',
+    'private',
+    'protected',
+    'std',
+    'cout',
+    'endl',
+    'true',
+    'false',
+    'nullptr',
+    'int',
+    'double',
+    'float',
+    'bool',
+    'char',
+    'long',
+    'unsigned',
+  ]),
 }
 
 function highlightGeneric(code: string, lang: string): string {
   const keywords = LANG_KEYWORDS[lang] || new Set()
-  let out = '', i = 0
+  let out = '',
+    i = 0
   while (i < code.length) {
     const ch = code[i]
     // line comment
-    if ((ch === '/' && code[i+1] === '/') || (ch === '#')) {
-      out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`; break
+    if ((ch === '/' && code[i + 1] === '/') || ch === '#') {
+      out += `<span class="ln-comment">${escHtml(code.slice(i))}</span>`
+      break
     }
     // string
     if (ch === '"' || ch === "'") {
-      const q = ch; let s = q; i++
-      while (i < code.length && code[i] !== q) { if (code[i]==='\\') { s+=code[i++] }; s+=code[i]||''; i++ }
-      s += code[i]||''; i++
-      out += `<span class="ln-str">${escHtml(s)}</span>`; continue
+      const q = ch
+      let s = q
+      i++
+      while (i < code.length && code[i] !== q) {
+        if (code[i] === '\\') {
+          s += code[i++]
+        }
+        s += code[i] || ''
+        i++
+      }
+      s += code[i] || ''
+      i++
+      out += `<span class="ln-str">${escHtml(s)}</span>`
+      continue
     }
     // number
-    if (/\d/.test(ch) && (i === 0 || !/[a-zA-Z_]/.test(code[i-1]))) {
+    if (/\d/.test(ch) && (i === 0 || !/[a-zA-Z_]/.test(code[i - 1]))) {
       let n = ''
       while (i < code.length && /[\d._]/.test(code[i])) n += code[i++]
-      out += `<span class="ln-num">${escHtml(n)}</span>`; continue
+      out += `<span class="ln-num">${escHtml(n)}</span>`
+      continue
     }
     // identifier / keyword
     if (/[a-zA-Z_]/.test(ch)) {
@@ -340,24 +575,23 @@ function highlightGeneric(code: string, lang: string): string {
       else out += escHtml(w)
       continue
     }
-    out += escHtml(ch); i++
+    out += escHtml(ch)
+    i++
   }
   return out
 }
 
 function formatLine(text: string): string {
   if (!text.trim()) return '&nbsp;'
-  return sdkLang.value === 'Python'
-    ? highlightPython(text)
-    : highlightGeneric(text, sdkLang.value)
+  return sdkLang.value === 'Python' ? highlightPython(text) : highlightGeneric(text, sdkLang.value)
 }
 
-const currentSdkLines = computed(() =>
-  currentSdkSample.value.split('\n')
-)
+const currentSdkLines = computed(() => currentSdkSample.value.split('\n'))
 
 async function copyToClipboard(text: string) {
-  try { await navigator.clipboard.writeText(text) } catch {}
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {}
 }
 
 const HERO_HIGHLIGHTS = [
@@ -368,30 +602,66 @@ const HERO_HIGHLIGHTS = [
 ]
 
 const PRODUCTS = [
-  { key: 'skill', icon: 'ai', label: 'AI Skill',
+  {
+    key: 'skill',
+    icon: 'ai',
+    label: 'AI Skill',
     title: 'Investment analysis agent for any AI',
     desc: 'Real-time quotes, portfolio data, news sentiment, and market intelligence — works with Claude, ChatGPT, Cursor, Gemini, Codex, Zed, Cherry Studio.',
-    tags: ['100+ Skills'], href: '/skill', accent: 'var(--lb-brand)' },
-  { key: 'cli', icon: 'terminal', label: 'CLI',
+    tags: ['100+ Skills'],
+    href: '/skill',
+    accent: 'var(--lb-brand)',
+  },
+  {
+    key: 'cli',
+    icon: 'terminal',
+    label: 'CLI',
     title: 'AI-native terminal for trading',
     desc: 'Interactive TUI dashboard, 120+ commands, and --format json output for scripting and AI agent integration. OAuth 2.0 works on SSH and headless servers.',
-    tags: ['120+ cmds', '--format json', 'TUI'], href: '/docs/cli', accent: 'var(--lb-status-alert)' },
-  { key: 'mcp', icon: 'bolt', label: 'MCP',
+    tags: ['120+ cmds', '--format json', 'TUI'],
+    href: '/docs/cli',
+    accent: 'var(--lb-status-alert)',
+  },
+  {
+    key: 'mcp',
+    icon: 'bolt',
+    label: 'MCP',
     title: 'Hosted MCP server',
     desc: 'OAuth 2.1 authentication — drop into Claude Code, Cursor, Codex, Zed, Cherry Studio in one line. Your AI gets real positions and live quotes.',
-    tags: ['OAuth 2.1', 'Hosted'], href: '/docs/mcp', accent: 'var(--lb-ai-mention)' },
-  { key: 'sdk', icon: 'stack', label: 'SDK',
+    tags: ['OAuth 2.1', 'Hosted'],
+    href: '/docs/mcp',
+    accent: 'var(--lb-ai-mention)',
+  },
+  {
+    key: 'sdk',
+    icon: 'stack',
+    label: 'SDK',
     title: '7 languages, one Rust core',
     desc: 'Get your first quote in minutes. Python, Node.js, Rust, Go, Java, C, C++ — with async support and built-in rate control.',
-    tags: ['Python', 'Rust', 'Go', '+ 4'], href: '/docs', accent: 'var(--lb-status-neutral)' },
-  { key: 'paper', icon: 'shield', label: 'Paper Trading',
+    tags: ['Python', 'Rust', 'Go', '+ 4'],
+    href: '/docs',
+    accent: 'var(--lb-status-neutral)',
+  },
+  {
+    key: 'paper',
+    icon: 'shield',
+    label: 'Paper Trading',
     title: 'Sandbox at zero cost',
     desc: 'Test orders with real market data — simulated matching based on live bid-ask spreads. No securities account required.',
-    tags: ['Sandbox', 'Zero Cost'], href: '/docs', accent: 'var(--lb-up)' },
-  { key: 'llm', icon: 'book', label: 'LLM Ready',
+    tags: ['Sandbox', 'Zero Cost'],
+    href: '/docs',
+    accent: 'var(--lb-up)',
+  },
+  {
+    key: 'llm',
+    icon: 'book',
+    label: 'LLM Ready',
     title: 'Built for retrieval & RAG',
     desc: 'llms.txt standard compliance, every doc available as .md for RAG pipelines, and Accept: text/markdown header support on longbridge.com.',
-    tags: ['Markdown', 'llms.txt'], href: '/docs', accent: 'var(--lb-chart-purple)' },
+    tags: ['Markdown', 'llms.txt'],
+    href: '/docs',
+    accent: 'var(--lb-chart-purple)',
+  },
 ]
 
 const SUPPORTED_AGENTS = [
@@ -406,34 +676,82 @@ const SUPPORTED_AGENTS = [
 const MCP_CLIENTS = ['Claude Code', 'Codex', 'Gemini', 'Cursor', 'Zed']
 
 const API_CAPS = [
-  { icon: 'chart', color: 'var(--lb-status-neutral)', title: 'Market Data', count: '30+',
+  {
+    icon: 'chart',
+    color: 'var(--lb-status-neutral)',
+    title: 'Market Data',
+    count: '30+',
     desc: 'Real-time quotes, order depth, candlestick, intraday, capital flow, and push subscriptions',
-    items: ['Real-time quotes', 'Order book depth', 'Candlestick charts', 'Intraday timeline', 'Capital flow', 'WebSocket push'] },
-  { icon: 'shield', color: 'var(--lb-brand)', title: 'Trading & Orders', count: '14+',
+    items: [
+      'Real-time quotes',
+      'Order book depth',
+      'Candlestick charts',
+      'Intraday timeline',
+      'Capital flow',
+      'WebSocket push',
+    ],
+  },
+  {
+    icon: 'shield',
+    color: 'var(--lb-brand)',
+    title: 'Trading & Orders',
+    count: '14+',
     desc: 'Submit, replace, and withdraw orders. Track positions, balance, and execution history',
-    items: ['Submit orders', 'Modify & cancel', 'Positions & balance', 'Execution history', 'Order status push'] },
-  { icon: 'bolt', color: 'var(--lb-ai-mention)', title: 'Derivatives', count: '8+',
+    items: ['Submit orders', 'Modify & cancel', 'Positions & balance', 'Execution history', 'Order status push'],
+  },
+  {
+    icon: 'bolt',
+    color: 'var(--lb-ai-mention)',
+    title: 'Derivatives',
+    count: '8+',
     desc: 'Full option chains with Greeks, warrants listing, and real-time derivative quotes',
-    items: ['Option chains + Greeks', 'Warrant filtering', 'Issuer directory', 'Derivative quotes'] },
-  { icon: 'book', color: 'var(--lb-chart-purple)', title: 'Financial Research', count: '7+',
+    items: ['Option chains + Greeks', 'Warrant filtering', 'Issuer directory', 'Derivative quotes'],
+  },
+  {
+    icon: 'book',
+    color: 'var(--lb-chart-purple)',
+    title: 'Financial Research',
+    count: '7+',
     desc: 'Financial statements, valuation metrics, dividend history, EPS forecasts, analyst ratings',
-    items: ['Financial statements', 'Valuation metrics', 'Dividend history', 'EPS forecasts', 'Analyst ratings'] },
-  { icon: 'globe', color: 'var(--lb-status-alert)', title: 'Content & News', count: '8+',
+    items: ['Financial statements', 'Valuation metrics', 'Dividend history', 'EPS forecasts', 'Analyst ratings'],
+  },
+  {
+    icon: 'globe',
+    color: 'var(--lb-status-alert)',
+    title: 'Content & News',
+    count: '8+',
     desc: 'Real-time news feeds, community discussions, topics, and engagement metrics',
-    items: ['News feeds', 'Community topics', 'Discussions', 'Engagement data'] },
+    items: ['News feeds', 'Community topics', 'Discussions', 'Engagement data'],
+  },
 ]
 
 const GETSTARTED = [
-  { key: 'auth', icon: 'key', title: 'Authentication setup',
+  {
+    key: 'auth',
+    icon: 'key',
+    title: 'Authentication setup',
     desc: 'Register an OAuth 2.0 client, obtain credentials, and configure your SDK with automatic token management.',
-    cta: 'Setup guide', href: '/docs' },
-  { key: 'api', icon: 'book', title: 'API Reference',
+    cta: 'Setup guide',
+    href: '/docs',
+  },
+  {
+    key: 'api',
+    icon: 'book',
+    title: 'API Reference',
     desc: 'Browse 100+ endpoints for quotes, trading, portfolio, and content. Try requests directly in the browser.',
-    cta: 'Explore APIs', href: '/api' },
-  { key: 'cli', icon: 'terminal', title: 'Install CLI',
+    cta: 'Explore APIs',
+    href: '/api',
+  },
+  {
+    key: 'cli',
+    icon: 'terminal',
+    title: 'Install CLI',
     desc: 'One-line install for macOS, Linux, and Windows. 120+ commands with interactive TUI and JSON output.',
-    cta: 'Install now', href: '/docs/cli' },
+    cta: 'Install now',
+    href: '/docs/cli',
+  },
 ]
+
 </script>
 
 <template>
@@ -461,16 +779,38 @@ const GETSTARTED = [
         </h1>
         <p class="t-body home-hero-sub">
           Real-time market data, quantitative research, and AI-powered analysis — through
-          <b :style="{ color: 'var(--lb-fg-1)' }">AI Skill, CLI, MCP, SDK and OpenAPI</b>.
-          One credential, every market, zero overhead.
+          <b :style="{ color: 'var(--lb-fg-1)' }">AI Skill, CLI, MCP, SDK and OpenAPI</b>. One credential, every market,
+          zero overhead.
         </p>
         <div class="home-hero-cta">
           <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
             Get Started
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
           </a>
           <a class="btn btn-outline btn-lg" :href="localePath('/docs')">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+            </svg>
             Read the Docs
           </a>
         </div>
@@ -492,21 +832,59 @@ const GETSTARTED = [
     <!-- ===== Products matrix ===== -->
     <section class="section">
       <div class="section-inner">
-        <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:48px">
-          <div style="max-width:560px">
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            gap: 24px;
+            margin-bottom: 48px;
+          ">
+          <div style="max-width: 560px">
             <span class="eyebrow">FEATURES</span>
-            <h2 class="h-section" style="margin-top:16px">Everything you need for market analysis, quantitative research, and intelligent trading.</h2>
+            <h2 class="h-section" style="margin-top: 16px">
+              Everything you need for market analysis, quantitative research, and intelligent trading.
+            </h2>
           </div>
           <a class="btn btn-ghost" :href="localePath('/docs')">
             Compare all
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
           </a>
         </div>
         <div class="products-grid">
-          <a v-for="p in PRODUCTS" :key="p.key" :href="localePath(p.href)" class="product-card" :style="{ '--card-accent': p.accent }">
+          <a
+            v-for="p in PRODUCTS"
+            :key="p.key"
+            :href="localePath(p.href)"
+            class="product-card"
+            :style="{ '--card-accent': p.accent }">
             <div class="product-card-head">
               <span class="product-card-label" :style="{ color: p.accent }">{{ p.label }}</span>
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                :style="{ color: 'var(--lb-fg-3)' }">
+                <path d="M5 12h14" />
+                <path d="m12 5 7 7-7 7" />
+              </svg>
             </div>
             <h3 class="product-card-title">{{ p.title }}</h3>
             <p class="product-card-desc">{{ p.desc }}</p>
@@ -523,61 +901,138 @@ const GETSTARTED = [
       <div class="section-inner cli-spotlight-grid">
         <div>
           <span class="eyebrow">Longbridge CLI</span>
-          <h2 class="h-section" style="margin-top:18px">AI-native command-line tool, covering every OpenAPI.</h2>
+          <h2 class="h-section" style="margin-top: 18px">AI-native command-line tool, covering every OpenAPI.</h2>
           <ul class="cli-feat-list">
-            <li v-for="([h, d]) in [
-              ['120+ commands','Market data, trading, fundamentals — all in your shell.'],
-              ['--format json output','Pipe into jq, awk, or any AI agent\'s tool channel.'],
-              ['Multi-period candlesticks','Daily, hourly, 15-min, 5-min, 1-min — all from one flag.'],
-              ['Portfolio P&L view','Position breakdown with allocation drill-down.'],
-              ['OAuth 2.0 on SSH','Works on headless servers and inside Docker.']
-            ]" :key="h">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-up)' }"><polyline points="20 6 9 17 4 12"/></svg>
+            <li
+              v-for="[h, d] in [
+                ['120+ commands', 'Market data, trading, fundamentals — all in your shell.'],
+                ['--format json output', 'Pipe into jq, awk, or any AI agent\'s tool channel.'],
+                ['Multi-period candlesticks', 'Daily, hourly, 15-min, 5-min, 1-min — all from one flag.'],
+                ['Portfolio P&L view', 'Position breakdown with allocation drill-down.'],
+                ['OAuth 2.0 on SSH', 'Works on headless servers and inside Docker.'],
+              ]"
+              :key="h">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                :style="{ color: 'var(--lb-up)' }">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
               <div>
-                <div style="font-weight:600;color:var(--lb-fg-1);font-size:14px">{{ h }}</div>
-                <div class="t-meta" style="font-size:13px;margin-top:2px">{{ d }}</div>
+                <div style="font-weight: 600; color: var(--lb-fg-1); font-size: 14px">{{ h }}</div>
+                <div class="t-meta" style="font-size: 13px; margin-top: 2px">{{ d }}</div>
               </div>
             </li>
           </ul>
-          <a class="btn btn-outline" :href="localePath('/docs/cli')" style="margin-top:24px">
+          <a class="btn btn-outline" :href="localePath('/docs/cli')" style="margin-top: 24px">
             CLI Documentation
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
           </a>
         </div>
         <div class="cli-demo-col">
           <div class="cli-os-tabs">
-            <button v-for="o in ['macOS','Linux','Windows']" :key="o"
+            <button
+              v-for="o in ['macOS', 'Linux', 'Windows']"
+              :key="o"
               :class="['cli-os-tab', o === cliOs ? 'is-active' : '']"
-              @click="cliOs = o">{{ o }}</button>
+              @click="cliOs = o">
+              {{ o }}
+            </button>
           </div>
-          <div class="code" style="margin-top:12px">
+          <div class="code" style="margin-top: 12px">
             <div class="code-head">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
-              <span style="font-size:11.5px;color:var(--lb-fg-3)">{{ cliOs.toLowerCase() }} · bash</span>
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                :style="{ color: 'var(--lb-fg-3)' }">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
+              </svg>
+              <span style="font-size: 11.5px; color: var(--lb-fg-3)">{{ cliOs.toLowerCase() }} · bash</span>
               <button class="code-copy" title="Copy" @click="copyToClipboard(installCmds[cliOs])">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <rect x="8" y="8" width="13" height="13" rx="2" />
+                  <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                </svg>
               </button>
             </div>
             <div class="code-body">
               <div><span class="ln-prompt">$ </span>{{ installCmds[cliOs] }}</div>
               <div>&nbsp;</div>
               <div><span class="ln-prompt">$ </span>longbridge auth login</div>
-              <div style="color:var(--lb-fg-2)">✓ Browser opened. Logged in as alex@longbridge.com</div>
+              <div style="color: var(--lb-fg-2)">✓ Browser opened. Logged in as jason@longbridge.com</div>
               <div>&nbsp;</div>
-              <div><span class="ln-prompt">$ </span>longbridge quote <span class="ln-str">"TSLA.US"</span> <span class="ln-str">"NVDA.US"</span> <span class="ln-str">"700.HK"</span></div>
-              <div style="color:var(--lb-fg-2)">SYMBOL &nbsp; LAST &nbsp; &nbsp; CHANGE &nbsp; &nbsp;VOLUME</div>
-              <div style="color:var(--lb-fg-2)">TSLA.US &nbsp; 421.65 &nbsp; <span class="is-up">+2.31%</span> &nbsp; 18.2M</div>
-              <div style="color:var(--lb-fg-2)">NVDA.US &nbsp; 142.83 &nbsp; <span class="is-up">+1.18%</span> &nbsp; 62.7M</div>
-              <div style="color:var(--lb-fg-2)">700.HK &nbsp; &nbsp;528.50 &nbsp; <span class="is-up">+0.86%</span> &nbsp; &nbsp;5.4M</div>
+              <div>
+                <span class="ln-prompt">$ </span>longbridge quote <span class="ln-str">"TSLA.US"</span>
+                <span class="ln-str">"NVDA.US"</span> <span class="ln-str">"700.HK"</span>
+              </div>
+              <div style="color: var(--lb-fg-2)">SYMBOL &nbsp; LAST &nbsp; &nbsp; CHANGE &nbsp; &nbsp;VOLUME</div>
+              <div style="color: var(--lb-fg-2)">
+                TSLA.US &nbsp; 421.65 &nbsp; <span class="is-up">+2.31%</span> &nbsp; 18.2M
+              </div>
+              <div style="color: var(--lb-fg-2)">
+                NVDA.US &nbsp; 142.83 &nbsp; <span class="is-up">+1.18%</span> &nbsp; 62.7M
+              </div>
+              <div style="color: var(--lb-fg-2)">
+                700.HK &nbsp; &nbsp;528.50 &nbsp; <span class="is-up">+0.86%</span> &nbsp; &nbsp;5.4M
+              </div>
               <div>&nbsp;</div>
-              <div><span class="ln-prompt">$ </span>longbridge portfolio --format json | jq <span class="ln-str">'.positions[] | select(.pnl_pct > 5)'</span></div>
+              <div>
+                <span class="ln-prompt">$ </span>longbridge portfolio --format json | jq
+                <span class="ln-str">'.positions[] | select(.pnl_pct > 5)'</span>
+              </div>
             </div>
           </div>
           <div class="cli-mini-stats">
-            <div><span class="num" style="font-weight:700;font-size:22px">120<span style="color:var(--lb-fg-3);font-size:13px">+</span></span><span class="t-meta" style="display:block;font-size:11.5px">commands</span></div>
-            <div><span class="num" style="font-weight:700;font-size:22px">7</span><span class="t-meta" style="display:block;font-size:11.5px">output formats</span></div>
-            <div><span class="num" style="font-weight:700;font-size:22px">3</span><span class="t-meta" style="display:block;font-size:11.5px">platforms</span></div>
-            <div><span class="num" style="font-weight:700;font-size:22px">40<span style="color:var(--lb-fg-3);font-size:13px">ms</span></span><span class="t-meta" style="display:block;font-size:11.5px">p50 query</span></div>
+            <div>
+              <span class="num" style="font-weight: 700; font-size: 22px"
+                >120<span style="color: var(--lb-fg-3); font-size: 13px">+</span></span
+              ><span class="t-meta" style="display: block; font-size: 11.5px">commands</span>
+            </div>
+            <div>
+              <span class="num" style="font-weight: 700; font-size: 22px">7</span
+              ><span class="t-meta" style="display: block; font-size: 11.5px">output formats</span>
+            </div>
+            <div>
+              <span class="num" style="font-weight: 700; font-size: 22px">3</span
+              ><span class="t-meta" style="display: block; font-size: 11.5px">platforms</span>
+            </div>
+            <div>
+              <span class="num" style="font-weight: 700; font-size: 22px"
+                >40<span style="color: var(--lb-fg-3); font-size: 13px">ms</span></span
+              ><span class="t-meta" style="display: block; font-size: 11.5px">p50 query</span>
+            </div>
           </div>
         </div>
       </div>
@@ -589,25 +1044,67 @@ const GETSTARTED = [
         <div class="ai-spotlight-card">
           <div class="ai-spotlight-text">
             <span class="eyebrow" :style="{ color: 'var(--lb-ai-mention)' }">AI Skill · 100+ packaged tools</span>
-            <h2 class="h-section" style="margin-top:18px;color:#fff">Unlock market insights, deep research,<br />and intelligent trading for your AI.</h2>
-            <p style="margin-top:18px;color:rgba(255,255,255,0.66);max-width:520px;line-height:1.65;font-size:15px">
-              With Longbridge Skill, your AI assistant can screen stocks, decode earnings,
-              track insider moves, and place orders — all in plain conversation, no app-switching required.
+            <h2 class="h-section" style="margin-top: 18px; color: #fff">
+              Unlock market insights, deep research,<br />and intelligent trading for your AI.
+            </h2>
+            <p
+              style="
+                margin-top: 18px;
+                color: rgba(255, 255, 255, 0.66);
+                max-width: 520px;
+                line-height: 1.65;
+                font-size: 15px;
+              ">
+              With Longbridge Skill, your AI assistant can screen stocks, decode earnings, track insider moves, and
+              place orders — all in plain conversation, no app-switching required.
             </p>
 
             <div class="ai-install-block">
               <div class="ai-install-label">Copy and send to any AI — it walks you through install:</div>
               <div class="ai-install-cmd">
-                <code>Install Longbridge AI toolkit following the guide:<br />https://open.longbridge.com/skill/install.md</code>
-                <button class="code-copy" title="Copy" @click="copyToClipboard('Install Longbridge AI toolkit following the guide:\nhttps://open.longbridge.com/skill/install.md')">
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                <code
+                  >Install Longbridge AI toolkit following the guide:<br />https://open.longbridge.com/skill/install.md</code
+                >
+                <button
+                  class="code-copy"
+                  title="Copy"
+                  @click="
+                    copyToClipboard(
+                      'Install Longbridge AI toolkit following the guide:\nhttps://open.longbridge.com/skill/install.md'
+                    )
+                  ">
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <rect x="8" y="8" width="13" height="13" rx="2" />
+                    <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                  </svg>
                 </button>
               </div>
               <div class="ai-install-or">— or via package manager —</div>
               <div class="ai-install-cmd">
-                <code><span :style="{ color: 'var(--lb-ai-mention)' }">$</span> npx skills add longbridge/skills -g</code>
+                <code
+                  ><span :style="{ color: 'var(--lb-ai-mention)' }">$</span> npx skills add longbridge/skills -g</code
+                >
                 <button class="code-copy" title="Copy" @click="copyToClipboard('npx skills add longbridge/skills -g')">
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <rect x="8" y="8" width="13" height="13" rx="2" />
+                    <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                  </svg>
                 </button>
               </div>
             </div>
@@ -620,39 +1117,114 @@ const GETSTARTED = [
               <div class="ai-agent-chip ai-agent-more">+ any Skill-compatible agent</div>
             </div>
 
-            <div style="display:flex;gap:12px;margin-top:24px;flex-wrap:wrap">
-              <a class="btn btn-lg" :href="localePath('/skill')" style="background:#fff;color:#09252A">
+            <div style="display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap">
+              <a class="btn btn-lg" :href="localePath('/skill')" style="background: #fff; color: #09252a">
                 Browse Skill catalog
-                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M5 12h14" />
+                  <path d="m12 5 7 7-7 7" />
+                </svg>
               </a>
             </div>
           </div>
 
-          <div class="ai-spotlight-chat code" style="background:#0A0E19;border:1px solid rgba(255,255,255,0.08)">
-            <div class="code-head" style="background:#141826;border-bottom:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.7)">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" :style="{ color: 'var(--lb-ai-mention)' }"><path d="M12 2.5 13.4 9.2 20.5 10.5 13.6 12 12 18.5 10.4 12 3.5 10.5 10.6 9.2z"/></svg>
+          <div class="ai-spotlight-chat code" style="background: #0a0e19; border: 1px solid rgba(255, 255, 255, 0.08)">
+            <div
+              class="code-head"
+              style="
+                background: #141826;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+                color: rgba(255, 255, 255, 0.7);
+              ">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                :style="{ color: 'var(--lb-ai-mention)' }">
+                <path d="M12 2.5 13.4 9.2 20.5 10.5 13.6 12 12 18.5 10.4 12 3.5 10.5 10.6 9.2z" />
+              </svg>
               Claude Code · skill: longbridge
-              <span style="margin-left:auto;font-size:11px;color:rgba(255,255,255,0.4)">connected</span>
+              <span style="margin-left: auto; font-size: 11px; color: rgba(255, 255, 255, 0.4)">connected</span>
             </div>
             <div class="ai-chat-body">
               <div class="ai-msg user">
-                <div class="ai-msg-text">Pull NVDA's daily chart for the past 6 months and tell me if I should hold my position.</div>
+                <div class="ai-msg-text">
+                  Pull NVDA's daily chart for the past 6 months and tell me if I should hold my position.
+                </div>
               </div>
               <div class="ai-msg assistant">
                 <div class="ai-msg-tool">
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-ai-mention)' }"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+                  <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    :style="{ color: 'var(--lb-ai-mention)' }">
+                    <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+                  </svg>
                   <span>used <code>longbridge-kline</code> · 6mo · daily</span>
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="margin-left:auto" :style="{ color: 'var(--lb-up)' }"><polyline points="20 6 9 17 4 12"/></svg>
+                  <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="margin-left: auto"
+                    :style="{ color: 'var(--lb-up)' }">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
                 </div>
                 <div class="ai-msg-tool">
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-ai-mention)' }"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+                  <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    :style="{ color: 'var(--lb-ai-mention)' }">
+                    <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+                  </svg>
                   <span>used <code>longbridge-positions</code></span>
-                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="margin-left:auto" :style="{ color: 'var(--lb-up)' }"><polyline points="20 6 9 17 4 12"/></svg>
+                  <svg
+                    width="11"
+                    height="11"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="margin-left: auto"
+                    :style="{ color: 'var(--lb-up)' }">
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
                 </div>
-                <div class="ai-msg-text" style="color:rgba(255,255,255,0.88)">
-                  NVDA broke its 50-day MA on heavy volume <span class="num" :style="{ color: 'var(--lb-ai-mention)' }">3 sessions ago</span>.
-                  Your <b>247 shares</b> at avg <b>$127.40</b> are up <span class="is-up num" style="font-weight:600">+12.1%</span>.
-                  Concentration risk is <span :style="{ color: 'var(--lb-status-alert)', fontWeight: '600' }">medium</span> — NVDA is 31% of your portfolio. Consider trimming if it hits $150.
+                <div class="ai-msg-text" style="color: rgba(255, 255, 255, 0.88)">
+                  NVDA broke its 50-day MA on heavy volume
+                  <span class="num" :style="{ color: 'var(--lb-ai-mention)' }">3 sessions ago</span>. Your
+                  <b>247 shares</b> at avg <b>$127.40</b> are up
+                  <span class="is-up num" style="font-weight: 600">+12.1%</span>. Concentration risk is
+                  <span :style="{ color: 'var(--lb-status-alert)', fontWeight: '600' }">medium</span> — NVDA is 31% of
+                  your portfolio. Consider trimming if it hits $150.
                 </div>
               </div>
             </div>
@@ -666,10 +1238,12 @@ const GETSTARTED = [
       <div class="section-inner mcp-grid">
         <div>
           <span class="eyebrow">Hosted MCP</span>
-          <h2 class="h-section" style="margin-top:18px">Connect any AI assistant to live market data — no API keys.</h2>
-          <p class="t-body" style="margin-top:14px;max-width:520px">
-            Hosted HTTP MCP service with OAuth 2.1 authentication. Your AI coding assistant
-            gets real-time quotes, account info, and trading — all in one connection.
+          <h2 class="h-section" style="margin-top: 18px">
+            Connect any AI assistant to live market data — no API keys.
+          </h2>
+          <p class="t-body" style="margin-top: 14px; max-width: 520px">
+            Hosted HTTP MCP service with OAuth 2.1 authentication. Your AI coding assistant gets real-time quotes,
+            account info, and trading — all in one connection.
           </p>
           <div class="mcp-clients">
             <span v-for="c in MCP_CLIENTS" :key="c" class="mcp-client-pill">
@@ -677,69 +1251,191 @@ const GETSTARTED = [
               {{ c }}
             </span>
           </div>
-          <a class="btn btn-outline" style="margin-top:24px" :href="localePath('/docs/mcp')">
+          <a class="btn btn-outline" style="margin-top: 24px" :href="localePath('/docs/mcp')">
             MCP Documentation
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
           </a>
         </div>
         <div class="code mcp-code">
           <div class="code-head">
-            <span style="display:flex;gap:6px;align-items:center">
-              <span style="width:10px;height:10px;border-radius:999px;background:#FF5F57" />
-              <span style="width:10px;height:10px;border-radius:999px;background:#FEBC2E" />
-              <span style="width:10px;height:10px;border-radius:999px;background:#28C840" />
+            <span style="display: flex; gap: 6px; align-items: center">
+              <span style="width: 10px; height: 10px; border-radius: 999px; background: #ff5f57" />
+              <span style="width: 10px; height: 10px; border-radius: 999px; background: #febc2e" />
+              <span style="width: 10px; height: 10px; border-radius: 999px; background: #28c840" />
             </span>
-            <span style="margin-left:8px;font-size:11.5px;color:var(--lb-fg-3)">~/projects/quant — claude</span>
-            <button class="code-copy" @click="copyToClipboard('claude mcp add --transport http longbridge \\\n  https://openapi.longbridge.com/mcp')">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+            <span style="margin-left: 8px; font-size: 11.5px; color: var(--lb-fg-3)">~/projects/quant — claude</span>
+            <button
+              class="code-copy"
+              @click="
+                copyToClipboard('claude mcp add --transport http longbridge \\\n  https://openapi.longbridge.com/mcp')
+              ">
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <rect x="8" y="8" width="13" height="13" rx="2" />
+                <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+              </svg>
             </button>
           </div>
-          <div class="code-body" style="font-size:13.5px;line-height:1.8">
+          <div class="code-body" style="font-size: 13.5px; line-height: 1.8">
             <div><span class="ln-comment"># One-line install for Claude Code</span></div>
             <div><span class="ln-prompt">$ </span>claude mcp add --transport http longbridge \</div>
             <div>&nbsp;&nbsp;<span class="ln-str">https://openapi.longbridge.com/mcp</span></div>
             <div>&nbsp;</div>
-            <div style="color:var(--lb-fg-2)">→ Opening browser for OAuth 2.1…</div>
-            <div style="color:var(--lb-fg-2)">✓ Authenticated as alex@longbridge.com</div>
-            <div style="color:var(--lb-fg-2)">✓ Connected · 47 tools available</div>
+            <div style="color: var(--lb-fg-2)">→ Opening browser for OAuth 2.1…</div>
+            <div style="color: var(--lb-fg-2)">✓ Authenticated as jason@longbridge.com</div>
+            <div style="color: var(--lb-fg-2)">✓ Connected · 130 tools available</div>
             <div>&nbsp;</div>
             <div><span class="ln-comment"># Verify the connection</span></div>
             <div><span class="ln-prompt">$ </span>claude mcp list</div>
-            <div style="color:var(--lb-fg-2)">longbridge &nbsp; <span :style="{ color: 'var(--lb-up)' }">✓ ready</span> &nbsp; 47 tools</div>
+            <div style="color: var(--lb-fg-2)">
+              longbridge &nbsp; <span :style="{ color: 'var(--lb-up)' }">✓ ready</span> &nbsp; 130 tools
+            </div>
           </div>
-          <div style="padding:10px 16px;border-top:1px solid var(--app-card-stroke);display:flex;align-items:center;gap:8px">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><circle cx="7" cy="15" r="4"/><path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3"/></svg>
-            <span class="t-meta" style="font-size:11.5px">OAuth 2.1 — browser opens automatically on first use. No API key needed.</span>
+          <div
+            style="
+              padding: 10px 16px;
+              border-top: 1px solid var(--app-card-stroke);
+              display: flex;
+              align-items: center;
+              gap: 8px;
+            ">
+            <svg
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              :style="{ color: 'var(--lb-fg-3)' }">
+              <circle cx="7" cy="15" r="4" />
+              <path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3" />
+            </svg>
+            <span class="t-meta" style="font-size: 11.5px"
+              >OAuth 2.1 — browser opens automatically on first use. No API key needed.</span
+            >
           </div>
         </div>
       </div>
     </section>
 
     <!-- ===== API Capabilities ===== -->
-    <section class="section" style="background:var(--app-canvas);border-top:1px solid var(--app-card-stroke);border-bottom:1px solid var(--app-card-stroke)">
+    <section
+      class="section"
+      style="
+        background: var(--app-canvas);
+        border-top: 1px solid var(--app-card-stroke);
+        border-bottom: 1px solid var(--app-card-stroke);
+      ">
       <div class="section-inner">
-        <div style="max-width:560px;margin-bottom:48px">
+        <div style="max-width: 560px; margin-bottom: 48px">
           <span class="eyebrow">API Capabilities</span>
-          <h2 class="h-section" style="margin-top:16px">Real-time data and trading capabilities for every investment workflow.</h2>
+          <h2 class="h-section" style="margin-top: 16px">
+            Real-time data and trading capabilities for every investment workflow.
+          </h2>
         </div>
         <div class="api-caps-grid">
           <a v-for="c in API_CAPS" :key="c.title" :href="localePath('/api')" class="api-cap-card">
             <div class="api-cap-head">
-              <div class="api-cap-icon" :style="{ background: `color-mix(in srgb, ${c.color} 14%, transparent)`, color: c.color }">
+              <div
+                class="api-cap-icon"
+                :style="{ background: `color-mix(in srgb, ${c.color} 14%, transparent)`, color: c.color }">
                 <!-- icon by name -->
-                <svg v-if="c.icon === 'chart'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
-                <svg v-else-if="c.icon === 'shield'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-                <svg v-else-if="c.icon === 'bolt'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
-                <svg v-else-if="c.icon === 'book'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
-                <svg v-else-if="c.icon === 'globe'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/></svg>
+                <svg
+                  v-if="c.icon === 'chart'"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+                </svg>
+                <svg
+                  v-else-if="c.icon === 'shield'"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                </svg>
+                <svg
+                  v-else-if="c.icon === 'bolt'"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+                </svg>
+                <svg
+                  v-else-if="c.icon === 'book'"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+                  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+                </svg>
+                <svg
+                  v-else-if="c.icon === 'globe'"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z" />
+                </svg>
               </div>
-              <span class="api-cap-count" :style="{ color: c.color, background: `color-mix(in srgb, ${c.color} 12%, transparent)` }">{{ c.count }}</span>
+              <span
+                class="api-cap-count"
+                :style="{ color: c.color, background: `color-mix(in srgb, ${c.color} 12%, transparent)` }"
+                >{{ c.count }}</span
+              >
             </div>
-            <h3 class="h-card" style="margin-top:18px">{{ c.title }}</h3>
-            <p class="t-meta" style="margin-top:8px;line-height:1.55">{{ c.desc }}</p>
+            <h3 class="h-card" style="margin-top: 18px">{{ c.title }}</h3>
+            <p class="t-meta" style="margin-top: 8px; line-height: 1.55">{{ c.desc }}</p>
             <ul class="api-cap-list">
               <li v-for="item in c.items" :key="item">
-                <svg width="10" height="10" viewBox="0 0 24 24" :style="{ color: c.color, flexShrink: '0' }"><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>
+                <svg width="10" height="10" viewBox="0 0 24 24" :style="{ color: c.color, flexShrink: '0' }">
+                  <circle cx="12" cy="12" r="3" fill="currentColor" />
+                </svg>
                 {{ item }}
               </li>
             </ul>
@@ -751,17 +1447,19 @@ const GETSTARTED = [
     <!-- ===== SDK Section ===== -->
     <section class="section">
       <div class="section-inner">
-        <div style="max-width:640px;margin-bottom:40px">
+        <div style="max-width: 640px; margin-bottom: 40px">
           <span class="eyebrow">OpenAPI SDK</span>
-          <h2 class="h-section" style="margin-top:16px">Production-grade SDKs with real-time streaming.</h2>
-          <p class="t-body" style="margin-top:14px">
+          <h2 class="h-section" style="margin-top: 16px">Production-grade SDKs with real-time streaming.</h2>
+          <p class="t-body" style="margin-top: 14px">
             7 SDKs built on a shared Rust core — subscribe to live data, place orders, and monitor positions with
             async/await patterns and built-in rate limiting.
           </p>
         </div>
 
         <div class="sdk-tabs">
-          <button v-for="l in SDK_LANGUAGES" :key="l.name"
+          <button
+            v-for="l in SDK_LANGUAGES"
+            :key="l.name"
             :class="['sdk-tab', l.name === sdkLang ? 'is-active' : '']"
             @click="sdkLang = l.name">
             <span class="sdk-tab-dot" :style="{ background: l.color }" />
@@ -772,27 +1470,78 @@ const GETSTARTED = [
         <div class="sdk-frame">
           <div class="sdk-frame-l">
             <div class="sdk-action-tabs">
-              <button v-for="t in Object.keys(SDK_SAMPLES)" :key="t"
+              <button
+                v-for="t in Object.keys(SDK_SAMPLES)"
+                :key="t"
                 :class="['sdk-action-tab', t === sdkTab ? 'is-active' : '']"
-                @click="sdkTab = t">{{ t }}</button>
+                @click="sdkTab = t">
+                {{ t }}
+              </button>
             </div>
-            <div class="code" style="margin-top:12px;flex:1;display:flex;flex-direction:column">
+            <div class="code" style="margin-top: 12px; flex: 1; display: flex; flex-direction: column">
               <div class="code-head">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" :style="{ color: 'var(--lb-fg-3)' }"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-                <span style="font-size:11.5px;color:var(--lb-fg-3)">{{ sdkTab.toLowerCase().replace(/ /g, '_') }}.{{ fileExt[sdkLang] ?? 'py' }}</span>
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  :style="{ color: 'var(--lb-fg-3)' }">
+                  <polyline points="16 18 22 12 16 6" />
+                  <polyline points="8 6 2 12 8 18" />
+                </svg>
+                <span style="font-size: 11.5px; color: var(--lb-fg-3)"
+                  >{{ sdkTab.toLowerCase().replace(/ /g, '_') }}.{{ fileExt[sdkLang] ?? 'py' }}</span
+                >
                 <button class="code-copy" @click="copyToClipboard(currentSdkSample)">
-                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.6"
+                    stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <rect x="8" y="8" width="13" height="13" rx="2" />
+                    <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                  </svg>
                 </button>
               </div>
-              <div class="code-body" style="flex:1">
+              <div class="code-body" style="flex: 1">
                 <div v-for="(line, idx) in currentSdkLines" :key="idx" v-html="formatLine(line)" />
               </div>
             </div>
             <div class="sdk-install">
-              <span style="font-size:11.5px;color:var(--lb-fg-3);text-transform:uppercase;letter-spacing:0.06em;font-weight:600">{{ currentSdkLang?.installer }}</span>
-              <code style="flex:1;font-family:var(--app-mono);font-size:13px;color:var(--lb-fg-1)">{{ currentSdkLang?.cmd }}</code>
+              <span
+                style="
+                  font-size: 11.5px;
+                  color: var(--lb-fg-3);
+                  text-transform: uppercase;
+                  letter-spacing: 0.06em;
+                  font-weight: 600;
+                "
+                >{{ currentSdkLang?.installer }}</span
+              >
+              <code style="flex: 1; font-family: var(--app-mono); font-size: 13px; color: var(--lb-fg-1)">{{
+                currentSdkLang?.cmd
+              }}</code>
               <button class="code-copy" @click="copyToClipboard(currentSdkLang?.cmd || '')">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/></svg>
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <rect x="8" y="8" width="13" height="13" rx="2" />
+                  <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3" />
+                </svg>
               </button>
             </div>
           </div>
@@ -800,25 +1549,53 @@ const GETSTARTED = [
           <div class="sdk-frame-r">
             <!-- Multi-Market -->
             <div class="sdk-feat">
-              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-status-neutral) 14%,transparent);color:var(--lb-status-neutral)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/></svg>
+              <div
+                class="sdk-feat-icon"
+                style="
+                  background: color-mix(in srgb, var(--lb-status-neutral) 14%, transparent);
+                  color: var(--lb-status-neutral);
+                ">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z" />
+                </svg>
               </div>
-              <div style="flex:1;min-width:0">
+              <div style="flex: 1; min-width: 0">
                 <div class="sdk-feat-h">Multi-Market</div>
                 <div class="sdk-feat-body">
                   US · HK · SG · CN (SH/SZ) — stocks, ETFs, options, warrants.
                   <div class="sdk-feat-pills">
-                    <span v-for="m in ['US','HK','SG','CN']" :key="m">{{ m }}</span>
+                    <span v-for="m in ['US', 'HK', 'SG', 'CN']" :key="m">{{ m }}</span>
                   </div>
                 </div>
               </div>
             </div>
             <!-- Free & Paper Trading -->
             <div class="sdk-feat">
-              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-up) 14%,transparent);color:var(--lb-up)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+              <div
+                class="sdk-feat-icon"
+                style="background: color-mix(in srgb, var(--lb-up) 14%, transparent); color: var(--lb-up)">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                </svg>
               </div>
-              <div style="flex:1;min-width:0">
+              <div style="flex: 1; min-width: 0">
                 <div class="sdk-feat-h">Free &amp; Paper Trading</div>
                 <div class="sdk-feat-body">
                   No additional API charges. Paper trading with real market data, no securities account required.
@@ -828,54 +1605,106 @@ const GETSTARTED = [
             </div>
             <!-- Real-time Push -->
             <div class="sdk-feat">
-              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-ai-mention) 14%,transparent);color:var(--lb-ai-mention)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
+              <div
+                class="sdk-feat-icon"
+                style="
+                  background: color-mix(in srgb, var(--lb-ai-mention) 14%, transparent);
+                  color: var(--lb-ai-mention);
+                ">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
+                </svg>
               </div>
-              <div style="flex:1;min-width:0">
+              <div style="flex: 1; min-width: 0">
                 <div class="sdk-feat-h">Real-time Push</div>
-                <div class="sdk-feat-body">WebSocket push for quotes, order depth, trades, and order status — &lt;60 ms latency.</div>
+                <div class="sdk-feat-body">
+                  WebSocket push for quotes, order depth, trades, and order status — &lt;60 ms latency.
+                </div>
               </div>
             </div>
             <!-- OAuth 2.0 -->
             <div class="sdk-feat">
-              <div class="sdk-feat-icon" style="background:color-mix(in srgb,var(--lb-chart-purple) 14%,transparent);color:var(--lb-chart-purple)">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="15" r="4"/><path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3"/></svg>
+              <div
+                class="sdk-feat-icon"
+                style="
+                  background: color-mix(in srgb, var(--lb-chart-purple) 14%, transparent);
+                  color: var(--lb-chart-purple);
+                ">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <circle cx="7" cy="15" r="4" />
+                  <path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3" />
+                </svg>
               </div>
-              <div style="flex:1;min-width:0">
+              <div style="flex: 1; min-width: 0">
                 <div class="sdk-feat-h">OAuth 2.0 + Async</div>
-                <div class="sdk-feat-body">Automatic token management with modern async/await patterns and built-in rate control.</div>
+                <div class="sdk-feat-body">
+                  Automatic token management with modern async/await patterns and built-in rate control.
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <div style="margin-top:32px;display:flex;justify-content:center">
+        <div style="margin-top: 32px; display: flex; justify-content: center">
           <a class="btn btn-outline btn-lg" :href="localePath('/docs')">
             SDK Documentation
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
           </a>
         </div>
       </div>
     </section>
 
     <!-- ===== Stats band ===== -->
-    <section class="section" style="padding-top:0">
+    <section class="section" style="padding-top: 0">
       <div class="section-inner">
         <div class="stats-band card">
           <div class="stats-band-cell">
-            <div class="num h-display" style="font-size:44px;font-weight:600">130<span style="font-size:20px;color:var(--lb-fg-3)">+</span></div>
+            <div class="num h-display" style="font-size: 44px; font-weight: 600">
+              130<span style="font-size: 20px; color: var(--lb-fg-3)">+</span>
+            </div>
             <div class="t-meta">API endpoints<br />across all markets</div>
           </div>
           <div class="stats-band-cell">
-            <div class="num h-display" style="font-size:44px;font-weight:600">60<span style="font-size:20px;color:var(--lb-fg-3)">ms</span></div>
+            <div class="num h-display" style="font-size: 44px; font-weight: 600">
+              60<span style="font-size: 20px; color: var(--lb-fg-3)">ms</span>
+            </div>
             <div class="t-meta">Median quote latency<br />P99 &lt; 180 ms</div>
           </div>
           <div class="stats-band-cell">
-            <div class="num h-display" style="font-size:44px;font-weight:600">99.99<span style="font-size:20px;color:var(--lb-fg-3)">%</span></div>
+            <div class="num h-display" style="font-size: 44px; font-weight: 600">
+              99.99<span style="font-size: 20px; color: var(--lb-fg-3)">%</span>
+            </div>
             <div class="t-meta">API uptime SLO<br />Last 12 months</div>
           </div>
           <div class="stats-band-cell">
-            <div class="num h-display" style="font-size:44px;font-weight:600">$0</div>
+            <div class="num h-display" style="font-size: 44px; font-weight: 600">$0</div>
             <div class="t-meta">OpenAPI access fee<br />For integrated accounts</div>
           </div>
         </div>
@@ -883,28 +1712,76 @@ const GETSTARTED = [
     </section>
 
     <!-- ===== Get Started ===== -->
-    <section class="section" style="border-top:1px solid var(--app-card-stroke);background:var(--app-canvas)">
+    <section class="section" style="border-top: 1px solid var(--app-card-stroke); background: var(--app-canvas)">
       <div class="section-inner">
-        <div style="text-align:center;max-width:640px;margin:0 auto">
+        <div style="text-align: center; max-width: 640px; margin: 0 auto">
           <span class="eyebrow">Get started</span>
-          <h2 class="h-section" style="margin-top:18px">Get started in minutes</h2>
-          <p class="t-body" style="margin-top:14px">
-            Set up your environment, authenticate, and make your first API call — everything you need to go from zero to live data.
+          <h2 class="h-section" style="margin-top: 18px">Get started in minutes</h2>
+          <p class="t-body" style="margin-top: 14px">
+            Set up your environment, authenticate, and make your first API call — everything you need to go from zero to
+            live data.
           </p>
         </div>
         <div class="gs-grid">
           <a v-for="(g, i) in GETSTARTED" :key="g.key" class="gs-card" :href="localePath(g.href)">
             <div class="gs-card-step">{{ String(i + 1).padStart(2, '0') }}</div>
             <div class="gs-card-icon-wrap">
-              <svg v-if="g.icon === 'key'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="15" r="4"/><path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3"/></svg>
-              <svg v-else-if="g.icon === 'book'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
-              <svg v-else-if="g.icon === 'terminal'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+              <svg
+                v-if="g.icon === 'key'"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <circle cx="7" cy="15" r="4" />
+                <path d="m10 12 9-9 3 3-3 3 3 3-3 3-3-3-3 3" />
+              </svg>
+              <svg
+                v-else-if="g.icon === 'book'"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+              </svg>
+              <svg
+                v-else-if="g.icon === 'terminal'"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
+              </svg>
             </div>
-            <h3 class="h-card" style="margin-top:18px">{{ g.title }}</h3>
-            <p class="t-meta" style="margin-top:8px;line-height:1.55;flex:1">{{ g.desc }}</p>
+            <h3 class="h-card" style="margin-top: 18px">{{ g.title }}</h3>
+            <p class="t-meta" style="margin-top: 8px; line-height: 1.55; flex: 1">{{ g.desc }}</p>
             <span class="product-card-cta">
               {{ g.cta }}
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M5 12h14" />
+                <path d="m12 5 7 7-7 7" />
+              </svg>
             </span>
           </a>
         </div>
@@ -914,11 +1791,22 @@ const GETSTARTED = [
     <!-- ===== Final CTA ===== -->
     <section class="section">
       <div class="section-inner final-cta">
-        <h2 class="h-section" style="max-width:680px">Your investment edge, powered by real-time data and AI.</h2>
-        <div style="display:flex;gap:12px;flex-wrap:wrap">
+        <h2 class="h-section" style="max-width: 680px">Your investment edge, powered by real-time data and AI.</h2>
+        <div style="display: flex; gap: 12px; flex-wrap: wrap">
           <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
             Get started
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
           </a>
           <a class="btn btn-outline btn-lg" :href="localePath('/pricing')">See pricing</a>
         </div>
@@ -936,4 +1824,5 @@ const GETSTARTED = [
   color: var(--lb-fg-1);
   font-family: var(--lb-font-sans);
 }
+
 </style>
diff --git a/docs/.vitepress/theme/components/Skill.vue b/docs/.vitepress/theme/components/Skill.vue
index 6ba1fa16..af995763 100644
--- a/docs/.vitepress/theme/components/Skill.vue
+++ b/docs/.vitepress/theme/components/Skill.vue
@@ -817,7 +817,10 @@ function rowClass(flag: string | boolean) {
 
         <div class="user-cases-grid">
           <a href="https://longbridge.com/topics/39630019" target="_blank" rel="noreferrer" class="user-case-award">
-            <div class="user-case-award-tag">AWARD</div>
+            <div class="user-case-award-tag">
+              <span>AWARD</span>
+              <span class="user-case-award-tag-line"></span>
+            </div>
             <div>
               <h3 class="user-case-award-h">Each winner receives 10,000 Task Coins + 1 × AirPods 4</h3>
               <p class="user-case-award-d">
@@ -1582,14 +1585,18 @@ function rowClass(flag: string | boolean) {
   box-shadow: 0 4px 24px color-mix(in srgb, var(--lb-brand) 20%, transparent);
 }
 .user-case-award-tag {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.1em;
   color: var(--lb-brand);
-  background: color-mix(in srgb, var(--lb-brand) 15%, transparent);
-  padding: 3px 8px;
-  border-radius: 4px;
-  width: fit-content;
+}
+.user-case-award-tag-line {
+  flex: 1;
+  height: 1px;
+  background: color-mix(in srgb, var(--lb-brand) 30%, transparent);
 }
 .user-case-award-h {
   font-size: 15px;
diff --git a/docs/.vitepress/theme/style/app-styles.css b/docs/.vitepress/theme/style/app-styles.css
index c4bd7ba7..31eedd7c 100644
--- a/docs/.vitepress/theme/style/app-styles.css
+++ b/docs/.vitepress/theme/style/app-styles.css
@@ -246,7 +246,7 @@
 .eyebrow {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 10px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -1714,16 +1714,13 @@
 
 .user-cases-grid {
   display: grid;
-  grid-template-columns: 1.4fr 1fr 1fr 1fr;
-  gap: 12px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
 }
 @media (max-width: 1024px) {
   .user-cases-grid {
     grid-template-columns: 1fr 1fr;
   }
-  .user-case-award {
-    grid-column: 1 / -1;
-  }
 }
 @media (max-width: 640px) {
   .user-cases-grid {
@@ -1746,15 +1743,19 @@
   box-shadow: var(--app-shadow-2);
 }
 .user-case-award-tag {
-  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--lb-brand) 18%, transparent);
   color: var(--lb-brand);
 }
+.user-case-award-tag-line {
+  flex: 1;
+  height: 1px;
+  background: color-mix(in srgb, var(--lb-brand) 30%, transparent);
+}
 .user-case-award-h {
   font-size: 17px;
   font-weight: 700;

From 2c42291e492077900fb38bc6226855b77096588c Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 15:22:12 +0800
Subject: [PATCH 4/9] fix(skill): update install guide links to /skill/install

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/.vitepress/theme/components/Skill.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/theme/components/Skill.vue b/docs/.vitepress/theme/components/Skill.vue
index af995763..2a722b18 100644
--- a/docs/.vitepress/theme/components/Skill.vue
+++ b/docs/.vitepress/theme/components/Skill.vue
@@ -555,7 +555,7 @@ function rowClass(flag: string | boolean) {
                 </svg>
               </button>
             </div>
-            <a class="skill-hero-install-link" :href="localePath('/docs/mcp')">
+            <a class="skill-hero-install-link" :href="localePath('/skill/install')">
               View installation guide for each client
               <svg
                 width="12"
@@ -994,7 +994,7 @@ function rowClass(flag: string | boolean) {
                 <line x1="12" y1="19" x2="20" y2="19" />
               </svg>
             </div>
-            <h3 class="h-card" style="margin-top: 16px">Install via CLI</h3>
+            <h3 class="h-card" style="margin-top: 16px">Install via Npx</h3>
             <p class="t-meta" style="margin-top: 8px; line-height: 1.55; flex: 1">
               For Claude Code, Codex, and similar tools — installs all skills globally.
             </p>
@@ -1007,7 +1007,7 @@ function rowClass(flag: string | boolean) {
         <div class="skill-getstarted-foot">
           Also available on <a href="#">skills.sh</a> and <a href="#">GitHub</a>.
           <span style="color: var(--lb-fg-3)">·</span>
-          <a :href="localePath('/docs/mcp')" style="color: var(--lb-brand); font-weight: 600">
+          <a :href="localePath('/skill/install')" style="color: var(--lb-brand); font-weight: 600">
             View installation guide for each client
             <svg
               width="12"

From 628cd3bc93f56081165930b27507b9e8a4a846c1 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 15:22:27 +0800
Subject: [PATCH 5/9] fix(home): update final CTA headline copy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/.vitepress/theme/components/NewHomePage/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/NewHomePage/index.vue b/docs/.vitepress/theme/components/NewHomePage/index.vue
index 4f67d8f7..3a6c141d 100644
--- a/docs/.vitepress/theme/components/NewHomePage/index.vue
+++ b/docs/.vitepress/theme/components/NewHomePage/index.vue
@@ -1791,7 +1791,7 @@ const GETSTARTED = [
     <!-- ===== Final CTA ===== -->
     <section class="section">
       <div class="section-inner final-cta">
-        <h2 class="h-section" style="max-width: 680px">Your investment edge, powered by real-time data and AI.</h2>
+        <h2 class="h-section" style="max-width: 680px">Build smarter financial tools with real-time data and AI.</h2>
         <div style="display: flex; gap: 12px; flex-wrap: wrap">
           <a class="btn btn-primary btn-lg" :href="localePath('/docs')">
             Get started

From f9b13eec2d89a2d4b0ffd496c19dbe2b2a66a5b6 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 15:29:35 +0800
Subject: [PATCH 6/9] =?UTF-8?q?fix(pricing):=20match=20design=20spec=20?=
 =?UTF-8?q?=E2=80=94=20black=20subscribe=20button,=20dark=20billing=20togg?=
 =?UTF-8?q?le,=20clean=20checkmarks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/.vitepress/theme/components/Pricing.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/.vitepress/theme/components/Pricing.vue b/docs/.vitepress/theme/components/Pricing.vue
index 370fe0f8..64eef8b9 100644
--- a/docs/.vitepress/theme/components/Pricing.vue
+++ b/docs/.vitepress/theme/components/Pricing.vue
@@ -222,9 +222,8 @@ const matrixRows = computed<MatrixRow[]>(() => {
             </div>
             <ul class="pricing-plan-feats">
               <li v-for="f in p.feats" :key="f">
-                <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
-                  <circle cx="10" cy="10" r="10" :fill="p.color" fill-opacity="0.15"/>
-                  <path d="M6 10.5l2.5 2.5 5.5-5.5" :stroke="p.color" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+                  <path d="M5 12l4.5 4.5 9.5-9.5" :stroke="p.color" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
                 <span>{{ f }}</span>
               </li>
@@ -399,12 +398,12 @@ const matrixRows = computed<MatrixRow[]>(() => {
 }
 .pricing-cycle-tab:hover { color: var(--lb-fg-1); }
 .pricing-cycle-tab.is-active {
-  background: var(--lb-brand);
-  color: #fff;
+  background: var(--lb-fg-1);
+  color: var(--lb-fg-invert);
 }
 .pricing-cycle-tab.is-active .pricing-cycle-badge {
-  background: rgba(255,255,255,0.25);
-  color: #fff;
+  background: color-mix(in srgb, var(--lb-up) 20%, transparent);
+  color: var(--lb-up);
 }
 .pricing-cycle-badge {
   font-size: 10px;
@@ -698,7 +697,7 @@ const matrixRows = computed<MatrixRow[]>(() => {
 }
 .btn:hover { opacity: 0.85; }
 .btn-primary {
-  background: var(--lb-brand);
-  color: #fff;
+  background: var(--lb-fg-1);
+  color: var(--lb-fg-invert);
 }
 </style>

From db5ae40dcaf1c0bf8cda18c2c5640264ce6b3904 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 15:37:46 +0800
Subject: [PATCH 7/9] fix(pricing): fix card backgrounds, spacing, and
 line-height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Free and plan cards: background var(--lb-bg-2) → var(--lb-bg-1) (white)
- Plan badge: background var(--lb-bg-1) → var(--lb-bg-2) for contrast on white card
- Was/tag margin: remove double-stacked margin (was 24px gap) → unified 12px tag top margin
- Tagline line-height: 1.55 → 1.6
- ProductSkill: label "Or install via CLI" → "Or install via Npx"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/NewHomePage/ProductSkill.vue   |   2 +-
 docs/.vitepress/theme/components/Pricing.vue  | 399 +++++++++++-------
 docs/.vitepress/theme/style/app-styles.css    |   6 +-
 3 files changed, 260 insertions(+), 147 deletions(-)

diff --git a/docs/.vitepress/theme/components/NewHomePage/ProductSkill.vue b/docs/.vitepress/theme/components/NewHomePage/ProductSkill.vue
index 650e880f..925989c9 100644
--- a/docs/.vitepress/theme/components/NewHomePage/ProductSkill.vue
+++ b/docs/.vitepress/theme/components/NewHomePage/ProductSkill.vue
@@ -193,7 +193,7 @@ function copyCli() {
 
       <!-- CLI alternative -->
       <div class="skill-install-cli">
-        <span class="skill-install-divider">Or install via CLI</span>
+        <span class="skill-install-divider">Or install via Npx</span>
         <div class="skill-install-cmd-wrap">
           <div class="skill-install-tabs">
             <button
diff --git a/docs/.vitepress/theme/components/Pricing.vue b/docs/.vitepress/theme/components/Pricing.vue
index 64eef8b9..9ee3596e 100644
--- a/docs/.vitepress/theme/components/Pricing.vue
+++ b/docs/.vitepress/theme/components/Pricing.vue
@@ -5,88 +5,128 @@ import AppFooter from './AppFooter.vue'
 import { localePath } from '../utils/i18n'
 
 const FREE_BASELINE = [
-  { icon: "shield",  color: "var(--lb-up)",
-    title: "Trading & Account APIs", price: "Free",
-    desc: "Fundamentals, analysis, news, assets, orders — every core API is free." },
-  { icon: "chart",   color: "var(--lb-status-neutral)",
-    title: "Basic Market Data", price: "Free",
-    desc: "Nasdaq Basic, HK Level 1, CN Level 1 — bundled with your account." },
-  { icon: "bolt",    color: "var(--lb-brand)",
-    title: "Push & Pull Data", price: "Free",
-    desc: "WebSocket real-time push and REST API pull — unlimited." }
+  {
+    icon: 'shield',
+    color: 'var(--lb-up)',
+    title: 'Trading & Account APIs',
+    price: 'Free',
+    desc: 'Fundamentals, analysis, news, assets, orders — every core API is free.',
+  },
+  {
+    icon: 'chart',
+    color: 'var(--lb-status-neutral)',
+    title: 'Basic Market Data',
+    price: 'Free',
+    desc: 'Nasdaq Basic, HK Level 1, CN Level 1 — bundled with your account.',
+  },
+  {
+    icon: 'bolt',
+    color: 'var(--lb-brand)',
+    title: 'Push & Pull Data',
+    price: 'Free',
+    desc: 'WebSocket real-time push and REST API pull — unlimited.',
+  },
 ]
 
 const BILLING_CYCLES = [
-  { key: "monthly",   label: "Monthly",   mult: 1.00 },
-  { key: "quarterly", label: "Quarterly", mult: 0.92 },
-  { key: "annual",    label: "Annual",    mult: 0.78, badge: "Best" }
+  { key: 'monthly', label: 'Monthly', mult: 1.0 },
+  { key: 'quarterly', label: 'Quarterly', mult: 0.92 },
+  { key: 'annual', label: 'Annual', mult: 0.78, badge: 'Best' },
 ]
 
 const PAID_PLANS = [
-  { id: "us-lv1", market: "US Market", name: "US LV1 Real-time",
-    base: 558, currency: "HK$", suffix: "/mo",
-    tagline: "Nasdaq LV1 real-time quotes with best bid/ask, including pre / post-market.",
-    coverage: "US market only",
-    color: "var(--lb-market-us)",
-    feats: ["Nasdaq LV1 real-time quotes", "Pre / post-market (overnight)", "WebSocket real-time push"]
+  {
+    id: 'us-lv1',
+    market: 'US Market',
+    name: 'US LV1 Real-time',
+    base: 558,
+    currency: 'HK$',
+    suffix: '/mo',
+    tagline: 'Nasdaq LV1 real-time quotes with best bid/ask, including pre / post-market.',
+    coverage: 'US market only',
+    color: 'var(--lb-market-us)',
+    feats: ['Nasdaq LV1 real-time quotes', 'Pre / post-market (overnight)', 'WebSocket real-time push'],
   },
-  { id: "hk-lv2", market: "HK Market", name: "HK LV2 Advanced",
-    base: 558, currency: "HK$", suffix: "/mo", badge: "Global (incl. HK)",
-    tagline: "HKEX real-time quotes with 10-level order book and broker queue.",
-    coverage: "HK market only (excludes US)",
-    color: "var(--lb-market-hk)",
-    feats: ["10-level bid/ask depth", "Real-time depth push", "Broker queue (HK)"]
+  {
+    id: 'hk-lv2',
+    market: 'HK Market',
+    name: 'HK LV2 Advanced',
+    base: 558,
+    currency: 'HK$',
+    suffix: '/mo',
+    badge: 'Global (incl. HK)',
+    tagline: 'HKEX real-time quotes with 10-level order book and broker queue.',
+    coverage: 'HK market only (excludes US)',
+    color: 'var(--lb-market-hk)',
+    feats: ['10-level bid/ask depth', 'Real-time depth push', 'Broker queue (HK)'],
+  },
+  {
+    id: 'opra',
+    market: 'US Options',
+    name: 'OPRA US Options',
+    base: 22,
+    currency: 'HK$',
+    suffix: '/mo',
+    tagline: 'US options real-time quotes with best bid/ask — sold separately, any tier.',
+    coverage: 'Adds onto any tier',
+    color: 'var(--lb-ai-mention)',
+    feats: ['Option chain lookup', 'Real-time option quotes', 'Option quote push'],
   },
-  { id: "opra", market: "US Options", name: "OPRA US Options",
-    base: 22, currency: "HK$", suffix: "/mo",
-    tagline: "US options real-time quotes with best bid/ask — sold separately, any tier.",
-    coverage: "Adds onto any tier",
-    color: "var(--lb-ai-mention)",
-    feats: ["Option chain lookup", "Real-time option quotes", "Option quote push"]
-  }
 ]
 
 const FEATURE_MATRIX_PLANS = [
-  { key: "nasdaq-basic", label: "Nasdaq Basic", tag: "Free",         color: "var(--lb-up)" },
-  { key: "us-lv1",       label: "US LV1",       tag: "Paid",         color: "var(--lb-market-us)" },
-  { key: "opra",         label: "OPRA",         tag: "Paid",         color: "var(--lb-ai-mention)" },
-  { key: "hk-lv1",       label: "HK LV1",       tag: "Free (promo)", color: "var(--lb-up)" },
-  { key: "hk-lv2",       label: "HK LV2",       tag: "Paid",         color: "var(--lb-market-hk)" },
-  { key: "cn-lv1",       label: "CN LV1",       tag: "Free (promo)", color: "var(--lb-up)" }
+  { key: 'nasdaq-basic', label: 'Nasdaq Basic', tag: 'Free', color: 'var(--lb-up)' },
+  { key: 'us-lv1', label: 'US LV1', tag: 'Paid', color: 'var(--lb-market-us)' },
+  { key: 'opra', label: 'OPRA', tag: 'Paid', color: 'var(--lb-ai-mention)' },
+  { key: 'hk-lv1', label: 'HK LV1', tag: 'Free (promo)', color: 'var(--lb-up)' },
+  { key: 'hk-lv2', label: 'HK LV2', tag: 'Paid', color: 'var(--lb-market-hk)' },
+  { key: 'cn-lv1', label: 'CN LV1', tag: 'Free (promo)', color: 'var(--lb-up)' },
 ]
 
 const FEATURE_MATRIX = [
-  { f: "Basic APIs",                      g: "Core",    row: [1,1,1,1,1,1] },
-  { f: "WebSocket real-time push",        g: "Core",    row: [1,1,1,1,1,1] },
-  { f: "Pull quote (REST)",               g: "Core",    row: [1,1,1,1,1,1] },
-  { f: "US best bid/ask",                 g: "US",      row: [1,1,0,0,0,0] },
-  { f: "Pre / post-market (overnight)",   g: "US",      row: [0,1,0,0,0,0] },
-  { f: "Option chain & real-time quotes", g: "Options", row: [0,0,1,0,0,0] },
-  { f: "HK real-time (basic)",            g: "HK",      row: [0,0,0,1,1,0] },
-  { f: "Hang Seng Index",                 g: "HK",      row: [0,0,0,1,1,0] },
-  { f: "HK 10-level order book",          g: "HK",      row: [0,0,0,0,1,0] },
-  { f: "Real-time depth push",            g: "HK",      row: [0,0,0,0,1,0] },
-  { f: "Broker queue (HK)",               g: "HK",      row: [0,0,0,0,1,0] },
-  { f: "CN A-shares real-time",           g: "CN",      row: [0,0,0,0,0,1] }
+  { f: 'Basic APIs', g: 'Core', row: [1, 1, 1, 1, 1, 1] },
+  { f: 'WebSocket real-time push', g: 'Core', row: [1, 1, 1, 1, 1, 1] },
+  { f: 'Pull quote (REST)', g: 'Core', row: [1, 1, 1, 1, 1, 1] },
+  { f: 'US best bid/ask', g: 'US', row: [1, 1, 0, 0, 0, 0] },
+  { f: 'Pre / post-market (overnight)', g: 'US', row: [0, 1, 0, 0, 0, 0] },
+  { f: 'Option chain & real-time quotes', g: 'Options', row: [0, 0, 1, 0, 0, 0] },
+  { f: 'HK real-time (basic)', g: 'HK', row: [0, 0, 0, 1, 1, 0] },
+  { f: 'Hang Seng Index', g: 'HK', row: [0, 0, 0, 1, 1, 0] },
+  { f: 'HK 10-level order book', g: 'HK', row: [0, 0, 0, 0, 1, 0] },
+  { f: 'Real-time depth push', g: 'HK', row: [0, 0, 0, 0, 1, 0] },
+  { f: 'Broker queue (HK)', g: 'HK', row: [0, 0, 0, 0, 1, 0] },
+  { f: 'CN A-shares real-time', g: 'CN', row: [0, 0, 0, 0, 0, 1] },
 ]
 
 const FAQ = [
-  ["Are OpenAPI quote subscriptions separate from the App?",
-   "Yes. OpenAPI quote permissions are independent from App / PC / Web. Activate via Longbridge App → Me → Quote Store."],
-  ["Do I need a subscription to test the API?",
-   "No. Trading, account, and fundamentals APIs are free. You can also use Basic Market Data tiers (Nasdaq Basic, HK LV1, CN LV1) for free."],
-  ["Can I cancel anytime?",
-   "Yes. Cancel any time before the next billing cycle. Quote permissions stay active until the end of the paid period."],
-  ["What about paper trading?",
-   "Paper trading runs against the canary environment with simulated matching on live bid-ask spreads. Free for all integrated accounts — no quote subscription required."],
-  ["Are there usage limits on REST or WebSocket?",
-   "No hard usage caps. Rate limits scale with your account tier. See the Rate Limits doc for details."],
-  ["What payment methods are accepted?",
-   "All payments are processed through your Longbridge account. Settled in HKD; cross-currency settled at exchange-rate."]
+  [
+    'Are OpenAPI quote subscriptions separate from the App?',
+    'Yes. OpenAPI quote permissions are independent from App / PC / Web. Activate via Longbridge App → Me → Quote Store.',
+  ],
+  [
+    'Do I need a subscription to test the API?',
+    'No. Trading, account, and fundamentals APIs are free. You can also use Basic Market Data tiers (Nasdaq Basic, HK LV1, CN LV1) for free.',
+  ],
+  [
+    'Can I cancel anytime?',
+    'Yes. Cancel any time before the next billing cycle. Quote permissions stay active until the end of the paid period.',
+  ],
+  [
+    'What about paper trading?',
+    'Paper trading runs against the canary environment with simulated matching on live bid-ask spreads. Free for all integrated accounts — no quote subscription required.',
+  ],
+  [
+    'Are there usage limits on REST or WebSocket?',
+    'No hard usage caps. Rate limits scale with your account tier. See the Rate Limits doc for details.',
+  ],
+  [
+    'What payment methods are accepted?',
+    'All payments are processed through your Longbridge account. Settled in HKD; cross-currency settled at exchange-rate.',
+  ],
 ]
 
-const cycle = ref("annual")
-const currentCycle = computed(() => BILLING_CYCLES.find(c => c.key === cycle.value)!)
+const cycle = ref('annual')
+const currentCycle = computed(() => BILLING_CYCLES.find((c) => c.key === cycle.value)!)
 
 function cyclePrice(base: number) {
   return Math.round(base * currentCycle.value.mult)
@@ -125,67 +165,108 @@ const matrixRows = computed<MatrixRow[]>(() => {
     <section class="pricing-hero">
       <div class="pricing-hero-bg" />
       <div class="section-inner pricing-hero-inner">
-        <div style="text-align:center;max-width:760px;margin:0 auto">
+        <div style="text-align: center; max-width: 760px; margin: 0 auto">
           <span class="eyebrow">PRICING</span>
-          <h1 class="h-display" style="margin-top:20px;font-size:clamp(40px,5vw,60px)">
+          <h1 class="h-display" style="margin-top: 20px; font-size: clamp(40px, 5vw, 60px)">
             Build for free.
             <br />
-            <span style="color:var(--lb-brand)">Pay only for real-time market data.</span>
+            <span style="color: var(--lb-brand)">Pay only for real-time market data.</span>
           </h1>
-          <p class="t-body" style="margin-top:20px;max-width:580px;margin-left:auto;margin-right:auto">
-            Core API features — trading, accounts, fundamentals, news — are completely free.
-            Subscribe to real-time market data only when you need it.
+          <p class="t-body" style="margin-top: 20px; max-width: 580px; margin-left: auto; margin-right: auto">
+            Core API features — trading, accounts, fundamentals, news — are completely free. Subscribe to real-time
+            market data only when you need it.
           </p>
         </div>
       </div>
     </section>
 
     <!-- Free Baseline -->
-    <section class="section" style="padding-top:32px">
+    <section class="section" style="padding-top: 32px">
       <div class="section-inner">
         <div class="pricing-free-grid">
           <div v-for="b in FREE_BASELINE" :key="b.title" class="pricing-free-card">
             <div class="pricing-free-head">
-              <div class="pricing-free-icon" :style="{ background: `color-mix(in srgb, ${b.color} 14%, transparent)`, color: b.color }">
+              <div
+                class="pricing-free-icon"
+                :style="{ background: `color-mix(in srgb, ${b.color} 14%, transparent)`, color: b.color }">
                 <!-- shield -->
-                <svg v-if="b.icon === 'shield'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                <svg
+                  v-if="b.icon === 'shield'"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                 </svg>
                 <!-- chart -->
-                <svg v-else-if="b.icon === 'chart'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                  <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
+                <svg
+                  v-else-if="b.icon === 'chart'"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <line x1="18" y1="20" x2="18" y2="10" />
+                  <line x1="12" y1="20" x2="12" y2="4" />
+                  <line x1="6" y1="20" x2="6" y2="14" />
                 </svg>
                 <!-- bolt -->
-                <svg v-else-if="b.icon === 'bolt'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/>
+                <svg
+                  v-else-if="b.icon === 'bolt'"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.6"
+                  stroke-linecap="round"
+                  stroke-linejoin="round">
+                  <path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />
                 </svg>
               </div>
               <span class="pricing-free-price">{{ b.price }}</span>
             </div>
-            <h3 class="h-card" style="margin-top:16px">{{ b.title }}</h3>
-            <p class="t-meta" style="margin-top:8px;line-height:1.55">{{ b.desc }}</p>
+            <h3 class="h-card" style="margin-top: 16px">{{ b.title }}</h3>
+            <p class="t-meta" style="margin-top: 8px; line-height: 1.55">{{ b.desc }}</p>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Paid Plans -->
-    <section class="section" style="padding-top:32px">
+    <section class="section" style="padding-top: 32px">
       <div class="section-inner">
-        <div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;margin-bottom:32px">
-          <div style="max-width:520px">
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            gap: 24px;
+            margin-bottom: 32px;
+          ">
+          <div style="max-width: 520px">
             <span class="eyebrow">REAL-TIME MARKET DATA</span>
-            <h2 class="h-section" style="margin-top:14px">Subscribe only to what you need.</h2>
-            <p class="t-meta" style="margin-top:10px;line-height:1.55">
-              OpenAPI quote permissions are independent from App / PC / Web and must be purchased separately.
-              Activate via Longbridge App → Me → Quote Store.
+            <h2 class="h-section" style="margin-top: 14px">Subscribe only to what you need.</h2>
+            <p class="t-meta" style="margin-top: 10px; line-height: 1.55">
+              OpenAPI quote permissions are independent from App / PC / Web and must be purchased separately. Activate
+              via Longbridge App → Me → Quote Store.
             </p>
           </div>
 
           <div class="pricing-cycle">
             <span class="pricing-cycle-label">Billing</span>
             <div class="pricing-cycle-tabs">
-              <button v-for="c in BILLING_CYCLES" :key="c.key"
+              <button
+                v-for="c in BILLING_CYCLES"
+                :key="c.key"
                 :class="['pricing-cycle-tab', c.key === cycle ? 'is-active' : '']"
                 @click="cycle = c.key">
                 {{ c.label }}
@@ -198,7 +279,9 @@ const matrixRows = computed<MatrixRow[]>(() => {
         <div class="pricing-plans-grid">
           <div v-for="p in PAID_PLANS" :key="p.id" class="pricing-plan-card">
             <div class="pricing-plan-head">
-              <span class="pricing-plan-market" :style="{ color: p.color, background: `color-mix(in srgb, ${p.color} 12%, transparent)` }">
+              <span
+                class="pricing-plan-market"
+                :style="{ color: p.color, background: `color-mix(in srgb, ${p.color} 12%, transparent)` }">
                 {{ p.market }}
               </span>
               <span v-if="p.badge" class="pricing-plan-badge">{{ p.badge }}</span>
@@ -215,23 +298,51 @@ const matrixRows = computed<MatrixRow[]>(() => {
             </div>
             <p class="pricing-plan-tag">{{ p.tagline }}</p>
             <div class="pricing-plan-cov">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="color:var(--lb-fg-3);flex-shrink:0">
-                <circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z"/>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                style="color: var(--lb-fg-3); flex-shrink: 0">
+                <circle cx="12" cy="12" r="10" />
+                <path d="M2 12h20M12 2a15 15 0 0 1 0 20a15 15 0 0 1 0-20z" />
               </svg>
               {{ p.coverage }}
             </div>
             <ul class="pricing-plan-feats">
               <li v-for="f in p.feats" :key="f">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
-                  <path d="M5 12l4.5 4.5 9.5-9.5" :stroke="p.color" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path
+                    d="M5 12l4.5 4.5 9.5-9.5"
+                    :stroke="p.color"
+                    stroke-width="2.2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round" />
                 </svg>
                 <span>{{ f }}</span>
               </li>
             </ul>
-            <a class="btn btn-primary pricing-plan-cta" href="https://longbridge.com/download" target="_blank" rel="noreferrer">
+            <a
+              class="btn btn-primary pricing-plan-cta"
+              href="https://longbridge.com/download"
+              target="_blank"
+              rel="noreferrer">
               Subscribe
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M5 12h14" />
+                <path d="m12 5 7 7-7 7" />
               </svg>
             </a>
           </div>
@@ -240,11 +351,11 @@ const matrixRows = computed<MatrixRow[]>(() => {
     </section>
 
     <!-- Feature Matrix -->
-    <section class="section" style="padding-top:48px;padding-bottom:80px">
+    <section class="section" style="padding-top: 48px; padding-bottom: 80px">
       <div class="section-inner">
-        <div style="max-width:540px;margin-bottom:24px">
+        <div style="max-width: 540px; margin-bottom: 24px">
           <span class="eyebrow">FEATURE COMPARISON</span>
-          <h2 class="h-section" style="margin-top:14px">What's included in each plan.</h2>
+          <h2 class="h-section" style="margin-top: 14px">What's included in each plan.</h2>
         </div>
         <div class="pricing-matrix-wrap">
           <table class="pricing-matrix">
@@ -268,10 +379,15 @@ const matrixRows = computed<MatrixRow[]>(() => {
                   <td class="pricing-matrix-feat">{{ r.f }}</td>
                   <td v-for="(v, j) in r.row" :key="j" class="pricing-matrix-cell">
                     <svg v-if="v" width="16" height="16" viewBox="0 0 20 20" fill="none">
-                      <circle cx="10" cy="10" r="10" fill="var(--lb-up)" fill-opacity="0.15"/>
-                      <path d="M6 10.5l2.5 2.5 5.5-5.5" stroke="var(--lb-up)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+                      <circle cx="10" cy="10" r="10" fill="var(--lb-up)" fill-opacity="0.15" />
+                      <path
+                        d="M6 10.5l2.5 2.5 5.5-5.5"
+                        stroke="var(--lb-up)"
+                        stroke-width="1.8"
+                        stroke-linecap="round"
+                        stroke-linejoin="round" />
                     </svg>
-                    <span v-else style="color:var(--lb-fg-3)">—</span>
+                    <span v-else style="color: var(--lb-fg-3)">—</span>
                   </td>
                 </tr>
               </template>
@@ -282,14 +398,14 @@ const matrixRows = computed<MatrixRow[]>(() => {
     </section>
 
     <!-- FAQ -->
-    <section class="section" style="border-top:1px solid var(--app-card-stroke);background:var(--app-canvas)">
+    <section class="section" style="border-top: 1px solid var(--app-card-stroke); background: var(--app-canvas)">
       <div class="section-inner">
-        <div style="max-width:560px;margin-bottom:32px">
+        <div style="max-width: 560px; margin-bottom: 32px">
           <span class="eyebrow">FAQ</span>
-          <h2 class="h-section" style="margin-top:14px">Frequently asked questions</h2>
+          <h2 class="h-section" style="margin-top: 14px">Frequently asked questions</h2>
         </div>
         <div class="pricing-faq-grid">
-          <div v-for="([q, a]) in FAQ" :key="q" class="pricing-faq-card">
+          <div v-for="[q, a] in FAQ" :key="q" class="pricing-faq-card">
             <h4 class="pricing-faq-q">{{ q }}</h4>
             <p class="pricing-faq-a">{{ a }}</p>
           </div>
@@ -317,7 +433,11 @@ const matrixRows = computed<MatrixRow[]>(() => {
 .pricing-hero-bg {
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--lb-brand) 14%, transparent), transparent 70%);
+  background: radial-gradient(
+    ellipse 80% 60% at 50% -10%,
+    color-mix(in srgb, var(--lb-brand) 14%, transparent),
+    transparent 70%
+  );
   pointer-events: none;
 }
 .pricing-hero-inner {
@@ -332,10 +452,12 @@ const matrixRows = computed<MatrixRow[]>(() => {
   gap: 16px;
 }
 @media (max-width: 900px) {
-  .pricing-free-grid { grid-template-columns: 1fr; }
+  .pricing-free-grid {
+    grid-template-columns: 1fr;
+  }
 }
 .pricing-free-card {
-  background: var(--lb-bg-2);
+  background: var(--lb-bg-1);
   border: 1px solid var(--app-card-stroke);
   border-radius: 14px;
   padding: 24px;
@@ -354,14 +476,6 @@ const matrixRows = computed<MatrixRow[]>(() => {
   justify-content: center;
   flex-shrink: 0;
 }
-.pricing-free-price {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--lb-up);
-  background: color-mix(in srgb, var(--lb-up) 12%, transparent);
-  padding: 3px 10px;
-  border-radius: 999px;
-}
 
 /* ---- Billing Cycle ---- */
 .pricing-cycle {
@@ -374,14 +488,6 @@ const matrixRows = computed<MatrixRow[]>(() => {
   color: var(--lb-fg-3);
   font-weight: 500;
 }
-.pricing-cycle-tabs {
-  display: flex;
-  gap: 0;
-  background: var(--lb-bg-2);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 8px;
-  overflow: hidden;
-}
 .pricing-cycle-tab {
   padding: 7px 14px;
   font-size: 13px;
@@ -396,7 +502,9 @@ const matrixRows = computed<MatrixRow[]>(() => {
   transition: all 0.15s;
   white-space: nowrap;
 }
-.pricing-cycle-tab:hover { color: var(--lb-fg-1); }
+.pricing-cycle-tab:hover {
+  color: var(--lb-fg-1);
+}
 .pricing-cycle-tab.is-active {
   background: var(--lb-fg-1);
   color: var(--lb-fg-invert);
@@ -405,15 +513,6 @@ const matrixRows = computed<MatrixRow[]>(() => {
   background: color-mix(in srgb, var(--lb-up) 20%, transparent);
   color: var(--lb-up);
 }
-.pricing-cycle-badge {
-  font-size: 10px;
-  font-weight: 700;
-  background: color-mix(in srgb, var(--lb-up) 15%, transparent);
-  color: var(--lb-up);
-  padding: 2px 6px;
-  border-radius: 4px;
-  letter-spacing: 0.04em;
-}
 
 /* ---- Paid Plans ---- */
 .pricing-plans-grid {
@@ -422,17 +521,21 @@ const matrixRows = computed<MatrixRow[]>(() => {
   gap: 16px;
 }
 @media (max-width: 900px) {
-  .pricing-plans-grid { grid-template-columns: 1fr; }
+  .pricing-plans-grid {
+    grid-template-columns: 1fr;
+  }
 }
 .pricing-plan-card {
-  background: var(--lb-bg-2);
+  background: var(--lb-bg-1);
   border: 1px solid var(--app-card-stroke);
   border-radius: 16px;
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 0;
-  transition: box-shadow 0.15s, border-color 0.15s;
+  transition:
+    box-shadow 0.15s,
+    border-color 0.15s;
 }
 .pricing-plan-card:hover {
   box-shadow: 0 4px 20px color-mix(in srgb, var(--lb-fg-1) 8%, transparent);
@@ -454,7 +557,7 @@ const matrixRows = computed<MatrixRow[]>(() => {
   font-size: 10.5px;
   font-weight: 600;
   color: var(--lb-fg-3);
-  background: var(--lb-bg-1);
+  background: var(--lb-bg-2);
   border: 1px solid var(--app-card-stroke);
   padding: 2px 8px;
   border-radius: 999px;
@@ -500,14 +603,16 @@ const matrixRows = computed<MatrixRow[]>(() => {
 .pricing-plan-was {
   font-size: 12px;
   color: var(--lb-fg-3);
-  margin-bottom: 12px;
+  margin-bottom: 0;
+}
+.pricing-plan-was s {
+  text-decoration: line-through;
 }
-.pricing-plan-was s { text-decoration: line-through; }
 .pricing-plan-tag {
   font-size: 13px;
   color: var(--lb-fg-2);
-  line-height: 1.55;
-  margin: 12px 0 10px;
+  line-height: 1.6;
+  margin: 12px 0 12px;
 }
 .pricing-plan-cov {
   display: flex;
@@ -593,7 +698,9 @@ const matrixRows = computed<MatrixRow[]>(() => {
   border-bottom: 1px solid var(--app-card-stroke);
   vertical-align: middle;
 }
-.pricing-matrix tbody tr:last-child td { border-bottom: none; }
+.pricing-matrix tbody tr:last-child td {
+  border-bottom: none;
+}
 .pricing-matrix-cell {
   padding: 11px 16px;
   text-align: center;
@@ -612,7 +719,9 @@ const matrixRows = computed<MatrixRow[]>(() => {
   gap: 16px;
 }
 @media (max-width: 768px) {
-  .pricing-faq-grid { grid-template-columns: 1fr; }
+  .pricing-faq-grid {
+    grid-template-columns: 1fr;
+  }
 }
 .pricing-faq-card {
   background: var(--lb-bg-2);
@@ -695,7 +804,9 @@ const matrixRows = computed<MatrixRow[]>(() => {
   border: none;
   transition: opacity 0.15s;
 }
-.btn:hover { opacity: 0.85; }
+.btn:hover {
+  opacity: 0.85;
+}
 .btn-primary {
   background: var(--lb-fg-1);
   color: var(--lb-fg-invert);
diff --git a/docs/.vitepress/theme/style/app-styles.css b/docs/.vitepress/theme/style/app-styles.css
index 31eedd7c..6a627683 100644
--- a/docs/.vitepress/theme/style/app-styles.css
+++ b/docs/.vitepress/theme/style/app-styles.css
@@ -2327,6 +2327,7 @@
   top: 14px;
   right: 14px;
   font-size: 10px;
+  line-height: 10px;
   font-weight: 700;
   letter-spacing: 0.06em;
   padding: 3px 8px;
@@ -2442,6 +2443,7 @@
 }
 .pricing-free-price {
   font-size: 12px;
+  line-height: 1.4;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
@@ -2466,8 +2468,7 @@
 .pricing-cycle-tabs {
   display: inline-flex;
   padding: 4px;
-  background: var(--lb-bg-2);
-  border-radius: 999px;
+  line-height: 1.3;
 }
 .pricing-cycle-tab {
   position: relative;
@@ -2494,6 +2495,7 @@
 }
 .pricing-cycle-badge {
   font-size: 9.5px;
+  line-height: 1.2;
   font-weight: 700;
   letter-spacing: 0.06em;
   padding: 1px 6px;

From 07fb55a9ccfd6e827b91f6bb939ba0c6ed86e1a1 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 15:52:53 +0800
Subject: [PATCH 8/9] refactor(theme): clean up dead CSS/components, remove
 dark-mode transition, fix card colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove 1127 lines of dead CSS from app-styles.css (SKILL PAGE and PRICING PAGE sections fully overridden by scoped styles in Skill.vue / Pricing.vue)
- Delete unused components: DashboardNavLink.vue, HomePage/{index,FeatureItem,HomeFeatures,IconComponent,Market,Markets}.vue, vp-code.css
- Remove View Transition circle animation on light/dark toggle
- Center pricing matrix check icons with display:block + margin auto
- Reduce dark mode card background contrast: --lb-card #13182A → #0E1222 (closer to page bg #0A0E19)
- Strengthen dark card border to compensate: --app-card-stroke #1f232e → #242836

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/.vitepress/theme/components/AppNav.vue   |   26 +-
 .../theme/components/DashboardNavLink.vue     |   43 -
 .../theme/components/HomePage/FeatureItem.vue |   52 -
 .../components/HomePage/HomeFeatures.vue      |   55 -
 .../components/HomePage/IconComponent.vue     |   35 -
 .../theme/components/HomePage/Market.vue      |  148 ---
 .../theme/components/HomePage/Markets.vue     |  139 --
 .../theme/components/HomePage/index.vue       |   11 -
 docs/.vitepress/theme/components/Pricing.vue  |    6 +-
 docs/.vitepress/theme/components/index.ts     |    1 -
 docs/.vitepress/theme/layouts/Layout.vue      |   15 -
 docs/.vitepress/theme/style/app-styles.css    | 1133 +----------------
 docs/.vitepress/theme/style/lbus-tokens.css   |    2 +-
 docs/.vitepress/theme/style/vp-code.css       |   26 -
 14 files changed, 12 insertions(+), 1680 deletions(-)
 delete mode 100644 docs/.vitepress/theme/components/DashboardNavLink.vue
 delete mode 100644 docs/.vitepress/theme/components/HomePage/FeatureItem.vue
 delete mode 100644 docs/.vitepress/theme/components/HomePage/HomeFeatures.vue
 delete mode 100644 docs/.vitepress/theme/components/HomePage/IconComponent.vue
 delete mode 100644 docs/.vitepress/theme/components/HomePage/Market.vue
 delete mode 100644 docs/.vitepress/theme/components/HomePage/Markets.vue
 delete mode 100644 docs/.vitepress/theme/components/HomePage/index.vue
 delete mode 100644 docs/.vitepress/theme/style/vp-code.css

diff --git a/docs/.vitepress/theme/components/AppNav.vue b/docs/.vitepress/theme/components/AppNav.vue
index 15335860..7e76652a 100644
--- a/docs/.vitepress/theme/components/AppNav.vue
+++ b/docs/.vitepress/theme/components/AppNav.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
+import { ref, computed, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import { localePath, getBasenameLocale } from '../utils/i18n'
 import { isLoginState, initLoginState } from '../composables/useLoginState'
@@ -67,28 +67,8 @@ function switchLocale(locale: string) {
   }
 }
 
-const enableTransitions = () =>
-  typeof document !== 'undefined' && 'startViewTransition' in document &&
-  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
-
-async function toggleTheme(e: MouseEvent) {
-  if (!enableTransitions()) {
-    isDark.value = !isDark.value
-    return
-  }
-  const { clientX: x, clientY: y } = e
-  const clipPath = [
-    `circle(0px at ${x}px ${y}px)`,
-    `circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`,
-  ]
-  await document.startViewTransition(async () => {
-    isDark.value = !isDark.value
-    await nextTick()
-  }).ready
-  document.documentElement.animate(
-    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
-    { duration: 300, easing: 'ease-in', pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)` }
-  )
+function toggleTheme(_e: MouseEvent) {
+  isDark.value = !isDark.value
 }
 
 // Login / avatar
diff --git a/docs/.vitepress/theme/components/DashboardNavLink.vue b/docs/.vitepress/theme/components/DashboardNavLink.vue
deleted file mode 100644
index 45aee3e3..00000000
--- a/docs/.vitepress/theme/components/DashboardNavLink.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { localePath } from '../utils/i18n'
-import { isLoginState } from '../composables/useLoginState'
-
-const { t } = useI18n()
-const isLogin = isLoginState
-
-function navigate() {
-  window.location.href = localePath('/account')
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <div v-if="isLogin" class="dashboard-wrap mr-2 ml-6">
-      <a class="dashboard-nav-link" @click.prevent="navigate">{{ t('HD2WD-CgkkcJJW12yOmDM') }}</a>
-    </div>
-  </ClientOnly>
-</template>
-
-<style scoped>
-.dashboard-wrap {
-  display: flex;
-  align-items: center;
-}
-
-.dashboard-nav-link {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-1);
-  text-decoration: none;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: color 0.25s;
-}
-
-.dashboard-nav-link:hover {
-  color: var(--vp-c-brand-1);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/HomePage/FeatureItem.vue b/docs/.vitepress/theme/components/HomePage/FeatureItem.vue
deleted file mode 100644
index 97800534..00000000
--- a/docs/.vitepress/theme/components/HomePage/FeatureItem.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="section" :class="{ reverse: reverse }">
-    <div class="h-auto flex-initial">
-      <img class="w-72" :src="imageUrl" :alt="imageAlt" />
-    </div>
-    <div class="text flex-1">
-      <div class="text-xl font-semibold">
-        <h3 class="title">{{ $t(titleKey) }}</h3>
-        <img class="w-24 mt-4 inline-block" src="/assets/bar.svg" alt="" />
-      </div>
-      <p class="mt-4 text-base desc">
-        <span v-for="(descKey, index) in descriptionKeys" :key="descKey">
-          {{ $t(descKey) }}{{ index < descriptionKeys.length - 1 ? ' ' : '' }}
-        </span>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  imageUrl: string
-  imageAlt: string
-  titleKey: string
-  descriptionKeys: string[]
-  reverse?: boolean
-}
-
-defineProps<Props>()
-</script>
-
-<style scoped>
-.section {
-  @apply mb-5 lg:mb-20 w-full  mx-auto flex flex-col md:flex-row text-center md:text-left gap-10 lg:gap-[100px];
-}
-
-.section.reverse {
-  @apply flex-col md:flex-row-reverse;
-}
-
-.section .text {
-  @apply max-w-full md:max-w-[800px];
-}
-
-.desc {
-  color: var(--text-color-1-supplement);
-}
-
-h3 {
-  font-size: 24px;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/HomePage/HomeFeatures.vue b/docs/.vitepress/theme/components/HomePage/HomeFeatures.vue
deleted file mode 100644
index 0b66b4f1..00000000
--- a/docs/.vitepress/theme/components/HomePage/HomeFeatures.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="w-full p-8 bg-[var(--home-bg-color-1)] lg:py-20 lg:px-0">
-    <FeatureItem
-      v-for="(feature, index) in features"
-      :key="index"
-      :reverse="index === 1"
-      :image-url="feature.imageUrl"
-      :image-alt="feature.imageAlt"
-      :title-key="feature.titleKey"
-      :description-keys="feature.descriptionKeys" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import FeatureItem from './FeatureItem.vue'
-
-interface Feature {
-  imageUrl: string
-  imageAlt: string
-  titleKey: string
-  descriptionKeys: string[]
-}
-
-const features: Feature[] = [
-  {
-    imageUrl: '/assets/quote.svg',
-    imageAlt: 'quote',
-    titleKey: '_yGjtJ-hz3SY',
-    descriptionKeys: [
-      'igUuE7b16XAv4XV1cz2Uo',
-      'IRVNYbFKip3CIbruOx4-4',
-      'Uqmclqxw6dQbP3jwc6G7e',
-      '5diFZtxSkEDAgBUnWcKb5',
-    ],
-  },
-  {
-    imageUrl: '/assets/trade.svg',
-    imageAlt: 'trade',
-    titleKey: '4asTAcBmpkMshtbQ6MTOq',
-    descriptionKeys: ['_mlScbvyg8lDxhHsROlbK', '4iQqxIDsChn9iZmM5571k', 'M8nA_Jg5s7ucI5fLT93x0'],
-  },
-  {
-    imageUrl: '/assets/ai.svg',
-    imageAlt: 'ai',
-    titleKey: 'yGjtJ_hz3SY1',
-    descriptionKeys: ['igUuE7b16XAv4XV1cz2Uo1'],
-  },
-]
-</script>
-
-<style scoped>
-:deep(h3) {
-  color: var(--text-color-1);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/HomePage/IconComponent.vue b/docs/.vitepress/theme/components/HomePage/IconComponent.vue
deleted file mode 100644
index 12602096..00000000
--- a/docs/.vitepress/theme/components/HomePage/IconComponent.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <span :class="['lb-icon', className]" v-bind="$attrs">
-    <svg class="icon" aria-hidden="true">
-      <use :xlink:href="iconHref"></use>
-    </svg>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  type: string
-  className?: string
-}
-
-const props = defineProps<Props>()
-
-const iconHref = computed(() => `#icon-${props.type}`)
-</script>
-
-<style scoped>
-.lb-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon {
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/HomePage/Market.vue b/docs/.vitepress/theme/components/HomePage/Market.vue
deleted file mode 100644
index e4949e21..00000000
--- a/docs/.vitepress/theme/components/HomePage/Market.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <div class="market-com">
-    <div>
-      <div class="market-header">
-        <IconComponent :type="icon" class="market-icon" />
-        <div class="market-info">
-          <span class="market-name">{{ name }}</span>
-          <span v-if="!isEn && enName" class="market-en-name">{{ enName }}</span>
-        </div>
-      </div>
-      <div class="market-table-wrapper">
-        <table>
-          <colgroup>
-            <col width="120px" />
-            <col width="80px" />
-            <col width="80px" />
-          </colgroup>
-          <thead>
-            <tr>
-              <th>{{ $t('gymqj97uGGjyXSp99hh-o') }}</th>
-              <th>{{ $t('u7PCsvYbglQ4mhmnQhK3N') }}</th>
-              <th>{{ $t('pABA78lHD--FSi39tpzwf') }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in data" :key="item.name">
-              <td>{{ item.name }}</td>
-              <td class="support-dot">
-                <IconComponent type="support-dot" />
-              </td>
-              <td class="support-dot">
-                <IconComponent type="support-dot" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import IconComponent from './IconComponent.vue'
-
-interface Props {
-  name: string
-  enName?: string
-  icon: string
-  data: {
-    name: string
-    supportTrade?: boolean
-    supportMarket?: boolean
-  }[]
-}
-
-defineProps<Props>()
-
-const { locale } = useI18n()
-const isEn = computed(() => locale.value === 'en')
-</script>
-
-<style scoped>
-.market-com {
-  background-color: var(--home-bg-color-1);
-  border-radius: 0.5rem;
-  padding: 2rem;
-  margin-top: 1.5rem;
-  display: inline-block;
-}
-
-.market-header {
-  display: flex;
-  align-items: center;
-}
-
-.market-icon {
-  font-size: 3rem;
-}
-
-.market-info {
-  display: flex;
-  flex-direction: column;
-  margin-left: 1.25rem;
-}
-
-.market-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.market-en-name {
-  color: var(--text-color-2);
-}
-
-.market-table-wrapper {
-  margin-top: 1.25rem;
-}
-
-table {
-  display: table;
-}
-
-table tr,
-table th,
-table thead,
-table td {
-  background: transparent;
-  border: none;
-}
-
-table th {
-  color: var(--text-color-2);
-  text-align: left;
-  font-weight: normal;
-}
-
-table td {
-  color: var(--text-color-1-supplement);
-}
-
-table th,
-table td {
-  padding: 0.5rem;
-}
-
-table th:not(:first-child),
-table td:not(:first-child) {
-  text-align: center;
-}
-
-.support-dot {
-  text-align: center;
-}
-
-@media (min-width: 768px) {
-  .market-com {
-    flex: 1;
-    margin-right: 3rem;
-    margin-top: 0;
-  }
-  
-  .market-com:last-child {
-    margin-right: 0;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/HomePage/Markets.vue b/docs/.vitepress/theme/components/HomePage/Markets.vue
deleted file mode 100644
index 2558e9e9..00000000
--- a/docs/.vitepress/theme/components/HomePage/Markets.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-  <div class="markets-container">
-    <div class="markets">
-      <div class="text-center">
-        <h3 class="title">{{ $t('_YvIt0iSGu0EGld6cWVqO') }}</h3>
-        <span class="sub-title">{{ $t('OG258Y1lxxNYjOsg6gH4K') }}</span>
-      </div>
-      <div class="market-list">
-        <Market
-          v-for="market in markets"
-          :key="market.name"
-          :name="market.name"
-          :en-name="market.enName"
-          :icon="market.icon"
-          :data="market.data"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import Market from './Market.vue'
-
-interface IMarketProps {
-  name: string
-  enName?: string
-  icon: string
-  data: {
-    name: string
-    supportTrade?: boolean
-    supportMarket?: boolean
-  }[]
-}
-
-const { t } = useI18n()
-
-const markets = computed((): IMarketProps[] => [
-  {
-    name: t('kjNmyMdY3qW7IM4SMfPXm'),
-    enName: 'HK Market',
-    icon: 'market_round_HK',
-    data: [
-      {
-        name: t('JK4uYamM0gon_wJOP7Hn'),
-      },
-      {
-        name: t('ETF'),
-      },
-      {
-        name: t('X0ttVisvS_Xsb4GKz5tux'),
-      },
-    ],
-  },
-  {
-    name: t('2JEm9E33pUNr1kKiPGi7E'),
-    enName: 'US Market',
-    icon: 'market_round_US',
-    data: [
-      {
-        name: t('JK4uYamM0gon_wJOP7Hn'),
-      },
-      {
-        name: t('ETF'),
-      },
-      {
-        name: t('NnXaw5QqFz0uQLw3JmkqE'),
-      },
-    ],
-  },
-  {
-    name: t('5i7gs89W1HrWZNVhWswfZ'),
-    enName: 'CN Market',
-    icon: 'market_round_CN',
-    data: [
-      {
-        name: t('JK4uYamM0gon_wJOP7Hn'),
-      },
-      {
-        name: t('ETF'),
-      },
-    ],
-  },
-])
-</script>
-
-<style scoped>
-.markets-container {
-  background-color: var(--home-bg-color);
-  @apply px-12;
-}
-
-.markets {
-  padding: 60px 0;
-}
-
-.markets .title {
-  font-size: 1.25rem;
-  color: var(--text-color-1);
-}
-
-.markets .sub-title {
-  font-weight: normal;
-  margin-top: 1rem;
-  color: var(--text-color-1-supplement);
-  display: inline-block;
-}
-
-.markets .market-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-@media (min-width: 768px) {
-  .markets {
-    padding: 2.5rem 0;
-    max-width: 80rem;
-    margin: 0 auto;
-  }
-  
-  .markets .title {
-    font-size: 1.5rem;
-  }
-  
-  .markets .sub-title {
-    font-size: 1rem;
-  }
-  
-  .markets .market-list {
-    justify-content: space-between;
-    align-items: stretch;
-    flex-direction: row;
-    margin-top: 3rem;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/HomePage/index.vue b/docs/.vitepress/theme/components/HomePage/index.vue
deleted file mode 100644
index eb3e6a48..00000000
--- a/docs/.vitepress/theme/components/HomePage/index.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import HomeFeatures from './HomeFeatures.vue'
-import Markets from './Markets.vue'
-import Footer from './Footer.vue'
-</script>
-
-<template>
-  <HomeFeatures />
-  <Markets />
-  <Footer />
-</template>
diff --git a/docs/.vitepress/theme/components/Pricing.vue b/docs/.vitepress/theme/components/Pricing.vue
index 9ee3596e..e9a869bf 100644
--- a/docs/.vitepress/theme/components/Pricing.vue
+++ b/docs/.vitepress/theme/components/Pricing.vue
@@ -657,7 +657,6 @@ const matrixRows = computed<MatrixRow[]>(() => {
 }
 .pricing-matrix thead th {
   padding: 12px 16px;
-  background: var(--lb-bg-2);
   border-bottom: 1px solid var(--app-card-stroke);
   text-align: center;
   vertical-align: bottom;
@@ -707,6 +706,11 @@ const matrixRows = computed<MatrixRow[]>(() => {
   border-bottom: 1px solid var(--app-card-stroke);
   vertical-align: middle;
 }
+.pricing-matrix-cell svg,
+.pricing-matrix-cell span {
+  display: block;
+  margin: 0 auto;
+}
 .pricing-matrix tbody tr:hover .pricing-matrix-feat,
 .pricing-matrix tbody tr:hover .pricing-matrix-cell {
   background: var(--lb-hover);
diff --git a/docs/.vitepress/theme/components/index.ts b/docs/.vitepress/theme/components/index.ts
index c434df1d..30ada383 100644
--- a/docs/.vitepress/theme/components/index.ts
+++ b/docs/.vitepress/theme/components/index.ts
@@ -9,7 +9,6 @@ export { default as SDKLinks } from './SDKLinks.vue'
 export { default as SDK } from './SDK.vue'
 export { default as Skill } from './Skill.vue'
 export { default as TryIt } from './TryIt/index.vue'
-export { default as HomePage } from './HomePage/index.vue'
 export { default as NewHomePage } from './NewHomePage/index.vue'
 export { default as McpTools } from './McpTools.vue'
 export { default as QuantChart } from './QuantChart.vue'
diff --git a/docs/.vitepress/theme/layouts/Layout.vue b/docs/.vitepress/theme/layouts/Layout.vue
index 4d57468f..441506df 100644
--- a/docs/.vitepress/theme/layouts/Layout.vue
+++ b/docs/.vitepress/theme/layouts/Layout.vue
@@ -34,21 +34,6 @@ const { llmMarkdownLink } = useLLMMarkdownLink()
 </template>
 
 <style>
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-
-::view-transition-old(root),
-.dark::view-transition-new(root) {
-  z-index: 1;
-}
-
-::view-transition-new(root),
-.dark::view-transition-old(root) {
-  z-index: 9999;
-}
 
 .VPSwitchAppearance {
   width: 22px !important;
diff --git a/docs/.vitepress/theme/style/app-styles.css b/docs/.vitepress/theme/style/app-styles.css
index 6a627683..f1245341 100644
--- a/docs/.vitepress/theme/style/app-styles.css
+++ b/docs/.vitepress/theme/style/app-styles.css
@@ -1,6 +1,6 @@
 /* ============================================================
    Longbridge Developers — LBUS 5.0 App Styles
-   Merged: app.css + app-pages.css + app-skill.css + app-pricing.css
+   Merged: app.css + app-pages.css
    Element-level resets are intentionally omitted to avoid
    conflicting with VitePress doc page styles.
    ============================================================ */
@@ -20,8 +20,8 @@
 
 .lb-dark {
   --app-canvas: #0a0e19;
-  --app-card-stroke: #1f232e;
-  --app-card-stroke-strong: #2c3039;
+  --app-card-stroke: #242836;
+  --app-card-stroke-strong: #2e3245;
   --app-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
   --app-shadow-2: 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
   --app-shadow-3: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
@@ -1611,1130 +1611,3 @@
   background: color-mix(in srgb, var(--lb-brand) 18%, transparent);
 }
 
-/* ============================================================
-   SKILL PAGE STYLES (from app-skill.css)
-   ============================================================ */
-
-.skill-hero {
-  position: relative;
-  padding: 72px 24px 56px;
-  overflow: hidden;
-  border-bottom: 1px solid var(--app-card-stroke);
-}
-.skill-hero-bg {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background:
-    radial-gradient(
-      ellipse 60% 50% at 50% 0%,
-      color-mix(in srgb, var(--lb-brand) 10%, transparent) 0%,
-      transparent 60%
-    ),
-    radial-gradient(
-      ellipse 30% 30% at 20% 100%,
-      color-mix(in srgb, var(--lb-ai-mention) 8%, transparent) 0%,
-      transparent 60%
-    );
-}
-.lb-dark .skill-hero-bg {
-  background:
-    radial-gradient(
-      ellipse 60% 50% at 50% 0%,
-      color-mix(in srgb, var(--lb-brand) 22%, transparent) 0%,
-      transparent 60%
-    ),
-    radial-gradient(
-      ellipse 30% 30% at 20% 100%,
-      color-mix(in srgb, var(--lb-ai-mention) 16%, transparent) 0%,
-      transparent 60%
-    );
-}
-.skill-hero-inner {
-  position: relative;
-  z-index: 1;
-}
-.skill-hero-install {
-  margin: 36px auto 0;
-  max-width: 560px;
-  padding: 16px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 12px;
-  text-align: left;
-  box-shadow: var(--app-shadow-1);
-}
-.skill-hero-install-label {
-  font-size: 11.5px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--lb-fg-3);
-}
-.skill-hero-install-cmd {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  padding: 12px 14px;
-  background: var(--lb-bg-2);
-  border-radius: 8px;
-  border: 1px solid var(--app-card-stroke);
-}
-.skill-hero-install-cmd code {
-  flex: 1;
-  font-family: var(--app-mono);
-  font-size: 12.5px;
-  color: var(--lb-fg-1);
-  white-space: pre-wrap;
-  word-break: break-all;
-  line-height: 1.55;
-}
-.skill-hero-install-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--lb-brand);
-}
-.skill-hero-install-link:hover {
-  gap: 8px;
-  transition: gap 0.2s;
-}
-.skill-hero-agents {
-  margin-top: 40px;
-}
-.skill-hero-agents-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-  margin-top: 14px;
-}
-
-.user-cases-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-}
-@media (max-width: 1024px) {
-  .user-cases-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-@media (max-width: 640px) {
-  .user-cases-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.user-case-award {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  gap: 18px;
-  padding: 22px 24px;
-  background: linear-gradient(135deg, color-mix(in srgb, var(--lb-brand) 12%, var(--lb-card)) 0%, var(--lb-card) 100%);
-  border: 1px solid color-mix(in srgb, var(--lb-brand) 25%, var(--app-card-stroke));
-  border-radius: 14px;
-  transition: all var(--lb-transition-fast);
-}
-.user-case-award:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--app-shadow-2);
-}
-.user-case-award-tag {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: var(--lb-brand);
-}
-.user-case-award-tag-line {
-  flex: 1;
-  height: 1px;
-  background: color-mix(in srgb, var(--lb-brand) 30%, transparent);
-}
-.user-case-award-h {
-  font-size: 17px;
-  font-weight: 700;
-  letter-spacing: -0.015em;
-  line-height: 1.3;
-  margin: 0;
-  color: var(--lb-fg-1);
-}
-.user-case-award-d {
-  font-size: 12.5px;
-  line-height: 1.55;
-  color: var(--lb-fg-2);
-  margin: 8px 0 0;
-}
-.user-case-award-rewards {
-  display: flex;
-  gap: 24px;
-  padding-top: 16px;
-  border-top: 1px solid color-mix(in srgb, var(--lb-brand) 18%, var(--app-card-stroke));
-}
-.user-case-award-num {
-  font-family: var(--lb-font-sans);
-  font-variant-numeric: tabular-nums;
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  color: var(--lb-brand);
-  line-height: 1;
-}
-.user-case-award-l {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  color: var(--lb-fg-3);
-  margin-top: 4px;
-}
-
-.user-case {
-  display: flex;
-  flex-direction: column;
-  padding: 22px 24px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 14px;
-  transition: all var(--lb-transition-fast);
-}
-.user-case:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--app-shadow-2);
-  border-color: var(--app-card-stroke-strong);
-}
-.user-case-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 14px;
-}
-.user-case-idx {
-  font-family: var(--app-mono);
-  font-size: 12px;
-  color: var(--lb-fg-3);
-  letter-spacing: 0.04em;
-}
-.user-case-read {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--lb-fg-3);
-}
-.user-case:hover .user-case-read {
-  color: var(--lb-brand);
-}
-.user-case-title {
-  font-size: 15.5px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  line-height: 1.3;
-  margin: 0;
-  color: var(--lb-fg-1);
-}
-.user-case-desc {
-  font-size: 12.5px;
-  line-height: 1.55;
-  color: var(--lb-fg-2);
-  margin: 8px 0 0;
-  flex: 1;
-}
-.user-case-metric {
-  display: flex;
-  flex-direction: column;
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid var(--app-card-stroke);
-}
-.user-case-metric-v {
-  font-family: var(--lb-font-sans);
-  font-variant-numeric: tabular-nums;
-  font-size: 22px;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  line-height: 1;
-}
-.user-case-metric-l {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  color: var(--lb-fg-3);
-  margin-top: 4px;
-}
-
-.skill-demo-shell {
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 16px;
-  overflow: hidden;
-}
-.skill-demo-agent-tabs {
-  display: flex;
-  gap: 4px;
-  padding: 14px 20px 0;
-  border-bottom: 1px solid var(--app-card-stroke);
-}
-.skill-demo-agent-tab {
-  position: relative;
-  background: transparent;
-  border: none;
-  padding: 10px 14px 14px;
-  font: 600 14px/1 var(--lb-font-sans);
-  color: var(--lb-fg-3);
-  cursor: pointer;
-  transition: color var(--lb-transition-fast);
-}
-.skill-demo-agent-tab:hover {
-  color: var(--lb-fg-1);
-}
-.skill-demo-agent-tab.is-active {
-  color: var(--lb-brand);
-}
-.skill-demo-agent-tab.is-active::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: 2px;
-  background: var(--lb-brand);
-  border-radius: 2px 2px 0 0;
-}
-.skill-demo-body-grid {
-  display: grid;
-  grid-template-columns: 220px 1fr;
-}
-@media (max-width: 820px) {
-  .skill-demo-body-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.skill-demo-nav {
-  display: flex;
-  flex-direction: column;
-  padding: 24px 16px;
-  border-right: 1px solid var(--app-card-stroke);
-  gap: 2px;
-}
-@media (max-width: 820px) {
-  .skill-demo-nav {
-    flex-direction: row;
-    overflow-x: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--app-card-stroke);
-    padding: 12px 16px;
-  }
-}
-.skill-demo-nav-item {
-  background: transparent;
-  border: none;
-  padding: 10px 14px;
-  text-align: left;
-  font: 500 13.5px/1.4 var(--lb-font-sans);
-  color: var(--lb-fg-2);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all var(--lb-transition-fast);
-}
-.skill-demo-nav-item:hover {
-  background: var(--lb-bg-2);
-  color: var(--lb-fg-1);
-}
-.skill-demo-nav-item.is-active {
-  background: color-mix(in srgb, var(--lb-brand) 40%, transparent);
-  color: var(--lb-brand);
-  font-weight: 600;
-}
-.skill-demo-main {
-  padding: 28px 32px 32px;
-  min-width: 0;
-}
-.skill-demo-title {
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-  margin: 0 0 10px;
-  color: var(--lb-fg-1);
-}
-.skill-demo-desc {
-  font-size: 13.5px;
-  line-height: 1.65;
-  color: var(--lb-fg-2);
-  margin: 0 0 20px;
-}
-.skill-demo-prompt-label {
-  font-size: 11.5px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--lb-fg-3);
-  margin-bottom: 8px;
-}
-.skill-demo-prompt {
-  display: flex;
-  gap: 10px;
-  padding: 14px 16px;
-  background: var(--lb-bg-2);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 10px;
-  font-size: 13.5px;
-  line-height: 1.55;
-  color: var(--lb-fg-1);
-  margin-bottom: 24px;
-  font-style: italic;
-}
-.skill-demo-chat {
-  background: var(--lb-bg-2);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 12px;
-  overflow: hidden;
-}
-.skill-demo-chat-head {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--app-card-stroke);
-  background: var(--lb-card);
-}
-.skill-demo-chat-body {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-.skill-demo-bubble-user {
-  align-self: flex-end;
-  max-width: 70%;
-  padding: 10px 14px;
-  background: color-mix(in srgb, var(--lb-brand) 18%, var(--lb-bg-2));
-  color: var(--lb-fg-1);
-  border-radius: 14px 14px 4px 14px;
-  font-size: 13px;
-  line-height: 1.5;
-}
-.skill-demo-bubble-assistant {
-  align-self: flex-start;
-  width: 100%;
-  padding: 14px 16px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 14px 14px 14px 4px;
-}
-.skill-demo-bubble-text {
-  font-size: 13.5px;
-  line-height: 1.6;
-  color: var(--lb-fg-1);
-  margin: 0 0 14px;
-}
-.skill-demo-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12.5px;
-  font-variant-numeric: tabular-nums;
-}
-.skill-demo-table th {
-  padding: 8px 10px;
-  text-align: right;
-  font-weight: 600;
-  color: var(--lb-fg-3);
-  font-size: 11.5px;
-  border-bottom: 1px solid var(--app-card-stroke);
-}
-.skill-demo-table th:first-child {
-  text-align: left;
-}
-.skill-demo-table td {
-  padding: 8px 10px;
-  text-align: right;
-  color: var(--lb-fg-2);
-  border-bottom: 1px solid var(--lb-bg-2);
-}
-.skill-demo-table td.is-sym {
-  text-align: left;
-  font-weight: 700;
-  color: var(--lb-fg-1);
-  font-family: var(--app-mono);
-}
-.skill-demo-table tbody tr.is-cross td,
-.skill-demo-table tbody tr.is-best td {
-  color: var(--lb-fg-1);
-  font-weight: 600;
-}
-.skill-demo-table tbody tr.is-cross td.is-sym,
-.skill-demo-table tbody tr.is-best td.is-sym {
-  color: var(--lb-brand);
-}
-.skill-demo-table tbody tr.is-cross td:nth-last-child(-n + 2),
-.skill-demo-table tbody tr.is-best td:nth-last-child(-n + 2) {
-  color: var(--lb-brand);
-}
-.skill-demo-table tbody tr:last-child td {
-  border-bottom: none;
-}
-.skill-demo-callout {
-  margin-top: 16px;
-  padding: 14px 16px;
-  background: color-mix(in srgb, var(--lb-brand) 8%, var(--lb-bg-2));
-  border: 1px solid color-mix(in srgb, var(--lb-brand) 22%, var(--app-card-stroke));
-  border-radius: 10px;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--lb-fg-1);
-}
-.skill-demo-callout code {
-  font-family: var(--app-mono);
-  font-size: 12px;
-  padding: 1px 5px;
-  background: var(--lb-bg-2);
-  border-radius: 3px;
-  color: var(--lb-brand);
-}
-
-.skill-marketplace-card {
-  display: grid;
-  gap: 8px;
-  padding: 16px 18px;
-  background: #0a0e19;
-  border: 1px solid #1f232e;
-  border-radius: 12px;
-  max-width: 400px;
-  box-shadow: var(--app-shadow-1);
-}
-.skill-marketplace-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11.5px;
-  color: rgba(255, 255, 255, 0.72);
-  margin-bottom: 4px;
-}
-.skill-marketplace-pill {
-  margin-left: auto;
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  padding: 2px 7px;
-  border-radius: 4px;
-  background: rgba(0, 240, 196, 0.14);
-  color: var(--lb-ai-mention);
-}
-.skill-marketplace-cmd {
-  display: block;
-  font-family: var(--app-mono);
-  font-size: 11.5px;
-  color: rgba(255, 255, 255, 0.92);
-  padding: 6px 10px;
-  background: rgba(255, 255, 255, 0.04);
-  border-radius: 5px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-}
-
-.skill-cat-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 24px;
-  padding: 4px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 999px;
-  width: fit-content;
-}
-.skill-cat-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--lb-fg-2);
-  background: transparent;
-  border: none;
-  border-radius: 999px;
-  cursor: pointer;
-  font-family: inherit;
-  transition: all var(--lb-transition-fast);
-}
-.skill-cat-tab:hover {
-  color: var(--lb-fg-1);
-}
-.skill-cat-tab.is-active {
-  background: var(--lb-fg-1);
-  color: var(--lb-fg-invert);
-}
-.skill-cat-count {
-  font-family: var(--app-mono);
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: var(--lb-bg-2);
-  color: var(--lb-fg-2);
-}
-.skill-cat-tab.is-active .skill-cat-count {
-  background: color-mix(in srgb, var(--lb-fg-invert) 12%, transparent);
-  color: var(--lb-fg-invert);
-}
-
-.skill-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-@media (max-width: 1024px) {
-  .skill-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (max-width: 640px) {
-  .skill-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.skill-card {
-  display: flex;
-  flex-direction: column;
-  padding: 18px 20px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 12px;
-  transition: all var(--lb-transition-fast);
-}
-.skill-card:hover {
-  border-color: color-mix(in srgb, var(--lb-brand) 30%, var(--app-card-stroke));
-  box-shadow: var(--app-shadow-1);
-}
-.skill-card-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.skill-card-name {
-  font-size: 14.5px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--lb-fg-1);
-  margin: 0;
-}
-.skill-card-id {
-  font-family: var(--app-mono);
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--lb-bg-2);
-  color: var(--lb-fg-3);
-}
-.skill-card-tag {
-  margin-left: auto;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--lb-status-alert) 14%, transparent);
-  color: var(--lb-status-alert);
-}
-.skill-card-desc {
-  font-size: 12.5px;
-  line-height: 1.55;
-  color: var(--lb-fg-2);
-  margin: 0 0 12px;
-}
-.skill-card-example {
-  display: flex;
-  gap: 6px;
-  padding: 10px 0 0;
-  border-top: 1px solid var(--app-card-stroke);
-  margin-top: auto;
-}
-.skill-card-example span {
-  font-size: 11.5px;
-  font-style: italic;
-  color: var(--lb-fg-2);
-  line-height: 1.4;
-}
-
-.skill-cap-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 32px 48px;
-}
-@media (max-width: 980px) {
-  .skill-cap-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@media (max-width: 640px) {
-  .skill-cap-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.skill-cap-col h3 {
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--app-card-stroke);
-  margin-bottom: 14px;
-}
-.skill-cap-col ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 8px;
-}
-.skill-cap-col li {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--lb-fg-2);
-}
-
-.skill-getstarted-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  margin-top: 40px;
-}
-@media (max-width: 980px) {
-  .skill-getstarted-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.skill-getstarted-card {
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 14px;
-  position: relative;
-}
-.skill-getstarted-card.recommended {
-  border-color: color-mix(in srgb, var(--lb-up) 35%, var(--app-card-stroke));
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lb-up) 6%, transparent);
-}
-.skill-getstarted-badge {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  font-size: 10px;
-  line-height: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--lb-up) 14%, transparent);
-  color: var(--lb-up);
-}
-.skill-getstarted-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  display: grid;
-  place-items: center;
-}
-.skill-getstarted-cmd {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  padding: 10px 12px;
-  background: var(--lb-bg-2);
-  border-radius: 8px;
-  border: 1px solid var(--app-card-stroke);
-  margin-top: 14px;
-}
-.skill-getstarted-cmd code {
-  flex: 1;
-  font-family: var(--app-mono);
-  font-size: 11.5px;
-  line-height: 1.5;
-  color: var(--lb-fg-1);
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-.skill-getstarted-foot {
-  margin-top: 32px;
-  text-align: center;
-  font-size: 13px;
-  color: var(--lb-fg-2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.skill-getstarted-foot a {
-  color: var(--lb-fg-1);
-  font-weight: 500;
-}
-.skill-getstarted-foot a:hover {
-  color: var(--lb-brand);
-}
-
-/* ============================================================
-   PRICING PAGE STYLES (from app-pricing.css)
-   ============================================================ */
-
-.pricing-hero {
-  position: relative;
-  padding: 80px 24px 48px;
-  overflow: hidden;
-  border-bottom: 1px solid var(--app-card-stroke);
-}
-.pricing-hero-bg {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  background: radial-gradient(
-    ellipse 60% 50% at 50% 0%,
-    color-mix(in srgb, var(--lb-brand) 9%, transparent) 0%,
-    transparent 60%
-  );
-}
-.lb-dark .pricing-hero-bg {
-  background: radial-gradient(
-    ellipse 60% 50% at 50% 0%,
-    color-mix(in srgb, var(--lb-brand) 20%, transparent) 0%,
-    transparent 60%
-  );
-}
-.pricing-hero-inner {
-  position: relative;
-  z-index: 1;
-}
-
-.pricing-free-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-@media (max-width: 820px) {
-  .pricing-free-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.pricing-free-card {
-  padding: 20px 22px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 14px;
-  position: relative;
-}
-.pricing-free-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.pricing-free-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  display: grid;
-  place-items: center;
-}
-.pricing-free-price {
-  font-size: 12px;
-  line-height: 1.4;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  padding: 3px 10px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--lb-up) 14%, transparent);
-  color: var(--lb-up);
-}
-
-.pricing-cycle {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.pricing-cycle-label {
-  font-size: 11.5px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--lb-fg-3);
-}
-.pricing-cycle-tabs {
-  display: inline-flex;
-  padding: 4px;
-  line-height: 1.3;
-}
-.pricing-cycle-tab {
-  position: relative;
-  padding: 6px 16px;
-  font-size: 12.5px;
-  font-weight: 500;
-  font-family: inherit;
-  border-radius: 999px;
-  background: transparent;
-  border: none;
-  color: var(--lb-fg-2);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  transition: all var(--lb-transition-fast);
-}
-.pricing-cycle-tab.is-active {
-  background: var(--lb-fg-1);
-  color: var(--lb-fg-invert);
-}
-.pricing-cycle-tab:not(.is-active):hover {
-  color: var(--lb-fg-1);
-}
-.pricing-cycle-badge {
-  font-size: 9.5px;
-  line-height: 1.2;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--lb-up) 20%, transparent);
-  color: var(--lb-up);
-}
-.pricing-cycle-tab.is-active .pricing-cycle-badge {
-  background: color-mix(in srgb, var(--lb-up) 30%, transparent);
-}
-
-.pricing-plans-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-@media (max-width: 980px) {
-  .pricing-plans-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.pricing-plan-card {
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 16px;
-  transition: all var(--lb-transition-fast);
-}
-.pricing-plan-card:hover {
-  transform: translateY(-3px);
-  border-color: var(--app-card-stroke-strong);
-  box-shadow: var(--app-shadow-2);
-}
-.pricing-plan-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.pricing-plan-market {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  padding: 4px 10px;
-  border-radius: 999px;
-}
-.pricing-plan-badge {
-  font-size: 10.5px;
-  font-weight: 600;
-  padding: 3px 9px;
-  border-radius: 999px;
-  background: var(--lb-bg-2);
-  color: var(--lb-fg-2);
-}
-.pricing-plan-name {
-  font-size: 20px;
-  font-weight: 700;
-  letter-spacing: -0.015em;
-  margin: 16px 0 0;
-  color: var(--lb-fg-1);
-}
-.pricing-plan-price {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-  margin-top: 14px;
-}
-.pricing-plan-cur {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--lb-fg-2);
-}
-.pricing-plan-num {
-  font-size: 38px;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  color: var(--lb-fg-1);
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-}
-.pricing-plan-suf {
-  font-size: 13px;
-  color: var(--lb-fg-2);
-  margin-left: 2px;
-}
-.pricing-plan-discount {
-  margin-left: 8px;
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: color-mix(in srgb, var(--lb-up) 14%, transparent);
-  color: var(--lb-up);
-  letter-spacing: 0.04em;
-}
-.pricing-plan-was {
-  font-size: 11.5px;
-  color: var(--lb-fg-3);
-  margin-top: 4px;
-}
-.pricing-plan-tag {
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--lb-fg-2);
-  margin: 16px 0 0;
-}
-.pricing-plan-cov {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 10px;
-  font-size: 11.5px;
-  color: var(--lb-fg-3);
-}
-.pricing-plan-feats {
-  list-style: none;
-  margin: 18px 0 0;
-  padding: 18px 0 0;
-  border-top: 1px solid var(--app-card-stroke);
-  display: grid;
-  gap: 8px;
-  flex: 1;
-}
-.pricing-plan-feats li {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--lb-fg-2);
-}
-.pricing-plan-feats li svg {
-  flex-shrink: 0;
-  margin-top: 3px;
-}
-.pricing-plan-cta {
-  align-self: stretch;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.pricing-matrix-wrap {
-  overflow-x: auto;
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 14px;
-  background: var(--lb-card);
-}
-.pricing-matrix {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13.5px;
-}
-.pricing-matrix th,
-.pricing-matrix td {
-  text-align: left;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--app-card-stroke);
-  vertical-align: middle;
-}
-.pricing-matrix thead th {
-  background: var(--lb-bg-2);
-  font-weight: 700;
-  position: sticky;
-  top: 0;
-  border-bottom: 1px solid var(--app-card-stroke-strong);
-}
-.pricing-matrix-col {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  white-space: nowrap;
-}
-.pricing-matrix-plan {
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
-.pricing-matrix-tag {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--lb-fg-3);
-}
-.pricing-matrix-feat-h {
-  min-width: 240px;
-}
-.pricing-matrix-feat {
-  color: var(--lb-fg-1);
-  font-weight: 500;
-}
-.pricing-matrix-cell {
-  text-align: center;
-  width: 92px;
-}
-.pricing-matrix-group td {
-  padding: 8px 14px;
-  background: color-mix(in srgb, var(--lb-fg-1) 3%, transparent);
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--lb-fg-3);
-}
-.lb-dark .pricing-matrix-group td {
-  background: rgba(255, 255, 255, 0.025);
-}
-.pricing-matrix tbody tr:hover td:not(.pricing-matrix-group td) {
-  background: color-mix(in srgb, var(--lb-fg-1) 2%, transparent);
-}
-
-.pricing-faq-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-}
-@media (max-width: 740px) {
-  .pricing-faq-grid {
-    grid-template-columns: 1fr;
-  }
-}
-.pricing-faq-card {
-  padding: 20px 22px;
-  background: var(--lb-card);
-  border: 1px solid var(--app-card-stroke);
-  border-radius: 12px;
-}
-.pricing-faq-q {
-  font-size: 14.5px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  margin: 0 0 8px;
-  color: var(--lb-fg-1);
-}
-.pricing-faq-a {
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--lb-fg-2);
-  margin: 0;
-}
diff --git a/docs/.vitepress/theme/style/lbus-tokens.css b/docs/.vitepress/theme/style/lbus-tokens.css
index ce286384..7b9bfbc0 100644
--- a/docs/.vitepress/theme/style/lbus-tokens.css
+++ b/docs/.vitepress/theme/style/lbus-tokens.css
@@ -177,7 +177,7 @@
   --lb-bg-1:              #0A0E19;
   --lb-bg-2:              #161A26;
   --lb-bg-tab-active:     #FFFFFF;
-  --lb-card:              #13182A;
+  --lb-card:              #0E1222;
   --lb-toast:             rgba(54,58,71,0.90);
   --lb-mask:              rgba(10,14,25,0.60);
   --lb-zebra:             #1A1E28;
diff --git a/docs/.vitepress/theme/style/vp-code.css b/docs/.vitepress/theme/style/vp-code.css
deleted file mode 100644
index 8f36c2b1..00000000
--- a/docs/.vitepress/theme/style/vp-code.css
+++ /dev/null
@@ -1,26 +0,0 @@
-
-/* 代码块：增加留空边距 增加阴影 */
-.vp-doc div[class*=language-] {
-  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
-  padding-top: 20px;
-}
-
-/* 代码块：下移行号 隐藏右侧竖线 */
-.vp-doc .line-numbers-wrapper {
-  padding-top: 40px;
-  border-right: none;
-}
-
-/* 代码快：重建行号右侧竖线 */
-.vp-doc .line-numbers-wrapper::after {
-  content: "";
-  position: absolute;
-  top: 40px;
-  right: 0;
-  border-right: 1px solid var(--vp-code-block-divider-color);
-  height: calc(100% - 60px);
-}
-
-.vp-doc div[class*='language-'].line-numbers-mode {
-  margin-bottom: 20px;
-}
\ No newline at end of file

From b07188b3c9ce34811950e8bda394270690b025af Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 20 May 2026 16:06:24 +0800
Subject: [PATCH 9/9] feat(pricing): rewrite billing cycle data with per-plan
 exact prices and Auto-renew tab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/.vitepress/theme/components/Pricing.vue | 84 +++++++++++++++-----
 1 file changed, 62 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/theme/components/Pricing.vue b/docs/.vitepress/theme/components/Pricing.vue
index e9a869bf..9e390342 100644
--- a/docs/.vitepress/theme/components/Pricing.vue
+++ b/docs/.vitepress/theme/components/Pricing.vue
@@ -28,10 +28,18 @@ const FREE_BASELINE = [
   },
 ]
 
+interface PlanCycle {
+  price: number
+  suffix: string
+  discount?: number
+  approxMo?: number
+}
+
 const BILLING_CYCLES = [
-  { key: 'monthly', label: 'Monthly', mult: 1.0 },
-  { key: 'quarterly', label: 'Quarterly', mult: 0.92 },
-  { key: 'annual', label: 'Annual', mult: 0.78, badge: 'Best' },
+  { key: 'auto', label: 'Auto-renew' },
+  { key: 'monthly', label: 'Monthly' },
+  { key: 'quarterly', label: 'Quarterly' },
+  { key: 'annual', label: 'Annual', badge: 'Best' },
 ]
 
 const PAID_PLANS = [
@@ -39,38 +47,50 @@ const PAID_PLANS = [
     id: 'us-lv1',
     market: 'US Market',
     name: 'US LV1 Real-time',
-    base: 558,
     currency: 'HK$',
-    suffix: '/mo',
     tagline: 'Nasdaq LV1 real-time quotes with best bid/ask, including pre / post-market.',
     coverage: 'US market only',
     color: 'var(--lb-market-us)',
     feats: ['Nasdaq LV1 real-time quotes', 'Pre / post-market (overnight)', 'WebSocket real-time push'],
+    cycles: {
+      auto: { price: 558, suffix: '/mo', discount: 22 },
+      monthly: { price: 718, suffix: '/mo' },
+      quarterly: { price: 1748, suffix: '/quarter', discount: 19, approxMo: 583 },
+      annual: { price: 5788, suffix: '/year', discount: 33, approxMo: 482 },
+    } as Record<string, PlanCycle>,
   },
   {
     id: 'hk-lv2',
     market: 'HK Market',
     name: 'HK LV2 Advanced',
-    base: 558,
     currency: 'HK$',
-    suffix: '/mo',
     badge: 'Global (incl. HK)',
     tagline: 'HKEX real-time quotes with 10-level order book and broker queue.',
     coverage: 'HK market only (excludes US)',
     color: 'var(--lb-market-hk)',
     feats: ['10-level bid/ask depth', 'Real-time depth push', 'Broker queue (HK)'],
+    cycles: {
+      auto: { price: 558, suffix: '/mo', discount: 22 },
+      monthly: { price: 718, suffix: '/mo' },
+      quarterly: { price: 1428, suffix: '/quarter', discount: 34, approxMo: 476 },
+      annual: { price: 5288, suffix: '/year', discount: 39, approxMo: 441 },
+    } as Record<string, PlanCycle>,
   },
   {
     id: 'opra',
     market: 'US Options',
     name: 'OPRA US Options',
-    base: 22,
     currency: 'HK$',
-    suffix: '/mo',
     tagline: 'US options real-time quotes with best bid/ask — sold separately, any tier.',
     coverage: 'Adds onto any tier',
     color: 'var(--lb-ai-mention)',
     feats: ['Option chain lookup', 'Real-time option quotes', 'Option quote push'],
+    cycles: {
+      auto: { price: 22, suffix: '/mo', discount: 45 },
+      monthly: { price: 40, suffix: '/mo' },
+      quarterly: { price: 83, suffix: '/quarter', discount: 31, approxMo: 28 },
+      annual: { price: 269, suffix: '/year', discount: 44, approxMo: 22 },
+    } as Record<string, PlanCycle>,
   },
 ]
 
@@ -125,15 +145,14 @@ const FAQ = [
   ],
 ]
 
-const cycle = ref('annual')
+const cycle = ref('auto')
 const currentCycle = computed(() => BILLING_CYCLES.find((c) => c.key === cycle.value)!)
 
-function cyclePrice(base: number) {
-  return Math.round(base * currentCycle.value.mult)
+function planCycle(plan: (typeof PAID_PLANS)[number]): PlanCycle {
+  return plan.cycles[cycle.value] ?? plan.cycles.monthly
 }
-function cycleDiscount(base: number) {
-  const off = Math.round((1 - currentCycle.value.mult) * 100)
-  return off > 0 ? off : 0
+function planMonthlyPrice(plan: (typeof PAID_PLANS)[number]): number {
+  return plan.cycles.monthly.price
 }
 
 // Group rows — build a flat list with group separators
@@ -289,12 +308,15 @@ const matrixRows = computed<MatrixRow[]>(() => {
             <h3 class="pricing-plan-name">{{ p.name }}</h3>
             <div class="pricing-plan-price">
               <span class="pricing-plan-cur">{{ p.currency }}</span>
-              <span class="pricing-plan-num">{{ cyclePrice(p.base) }}</span>
-              <span class="pricing-plan-suf">{{ p.suffix }}</span>
-              <span v-if="cycleDiscount(p.base) > 0" class="pricing-plan-discount">-{{ cycleDiscount(p.base) }}%</span>
+              <span class="pricing-plan-num">{{ planCycle(p).price }}</span>
+              <span class="pricing-plan-suf">{{ planCycle(p).suffix }}</span>
+              <span v-if="planCycle(p).discount" class="pricing-plan-discount">-{{ planCycle(p).discount }}%</span>
             </div>
-            <div v-if="cycleDiscount(p.base) > 0" class="pricing-plan-was">
-              Was <s>{{ p.currency }}{{ p.base }}{{ p.suffix }}</s> · billed {{ currentCycle.label.toLowerCase() }}
+            <div v-if="planCycle(p).approxMo" class="pricing-plan-approx">
+              ≈{{ p.currency }}{{ planCycle(p).approxMo }}/mo
+            </div>
+            <div v-else-if="planCycle(p).discount" class="pricing-plan-was">
+              Was <s>{{ p.currency }}{{ planMonthlyPrice(p) }}/mo</s>
             </div>
             <p class="pricing-plan-tag">{{ p.tagline }}</p>
             <div class="pricing-plan-cov">
@@ -488,8 +510,17 @@ const matrixRows = computed<MatrixRow[]>(() => {
   color: var(--lb-fg-3);
   font-weight: 500;
 }
+.pricing-cycle-tabs {
+  display: flex;
+  align-items: center;
+  background: var(--lb-bg-2);
+  border: 1px solid var(--app-card-stroke);
+  border-radius: 10px;
+  padding: 3px;
+  gap: 2px;
+}
 .pricing-cycle-tab {
-  padding: 7px 14px;
+  padding: 2px 14px;
   font-size: 13px;
   font-weight: 500;
   color: var(--lb-fg-2);
@@ -508,8 +539,12 @@ const matrixRows = computed<MatrixRow[]>(() => {
 .pricing-cycle-tab.is-active {
   background: var(--lb-fg-1);
   color: var(--lb-fg-invert);
+  border-radius: 7px;
 }
-.pricing-cycle-tab.is-active .pricing-cycle-badge {
+.pricing-cycle-tab .pricing-cycle-badge {
+  padding: 0 6px;
+  line-height: 12px;
+  font-size: 10px;
   background: color-mix(in srgb, var(--lb-up) 20%, transparent);
   color: var(--lb-up);
 }
@@ -600,6 +635,11 @@ const matrixRows = computed<MatrixRow[]>(() => {
   border-radius: 999px;
   margin-left: 6px;
 }
+.pricing-plan-approx {
+  font-size: 12px;
+  color: var(--lb-fg-3);
+  margin-bottom: 0;
+}
 .pricing-plan-was {
   font-size: 12px;
   color: var(--lb-fg-3);