From b717fdb0769329f573227f8ccf254954634f04c9 Mon Sep 17 00:00:00 2001
From: MengStack Dev <dev@mengstack.com>
Date: Sat, 3 Oct 2026 00:55:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89=E5=93=81=E7=89=8C=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Home.vue 完整重写为金铜色品牌风格 Vue 3 SFC
- 新增 Hero 终端动画、功能卡片网格、架构可视化、快速开始等模块
- Layout.vue 修复 SPA 路由切换，正确隐藏 VitePress 默认导航
- custom.css 添加 .home-layout 覆盖规则
- index.js 修复未导入 Layout.vue 的问题
- index.md 精简 frontmatter
---
 .vitepress/theme/Home.vue   | 795 +++++++++++++++++-------------------
 .vitepress/theme/Layout.vue |  13 +-
 .vitepress/theme/custom.css |  14 +
 .vitepress/theme/index.js   |   6 +-
 index.md                    |  51 +--
 5 files changed, 400 insertions(+), 479 deletions(-)

diff --git a/.vitepress/theme/Home.vue b/.vitepress/theme/Home.vue
index 388baf3..96d34f7 100644
--- a/.vitepress/theme/Home.vue
+++ b/.vitepress/theme/Home.vue
@@ -1,58 +1,60 @@
 <template>
-  <div class="home-new">
-    <!-- ============ Navbar ============ -->
-    <header class="nav" :class="{ scrolled }" ref="navEl">
-      <div class="nav-inner">
-        <a class="brand" href="#top" aria-label="MengStack 首页">
+  <div class="home-root" :class="{ dark: isDark }">
+
+    <!-- Navbar -->
+    <header class="home-nav" :class="{ scrolled: scrollY > 8, 'nav-menu-open': menuOpen }" ref="navEl">
+      <div class="home-nav-inner">
+        <a class="home-brand" href="#top" aria-label="MengStack 首页">
           <img class="light-logo" src="/logo-light.png" alt="" width="30" height="30" />
           <img class="dark-logo" src="/logo-dark.png" alt="" width="30" height="30" />
           MengStack
         </a>
-        <nav class="nav-links" aria-label="主导航">
+        <nav class="home-nav-links" aria-label="主导航">
           <a href="#top" class="active">首页</a>
-          <a href="/guide/what-is-mengstack.html">指南</a>
-          <a href="/api/overview.html">API 参考</a>
-          <a href="/changelog.html">更新日志</a>
-          <a href="/demo.html">在线演示</a>
-          <a href="/community.html">社区</a>
+          <a href="/guide/what-is-mengstack">指南</a>
+          <a href="/api/overview">API 参考</a>
+          <a href="/changelog">更新日志</a>
+          <a href="/demo">在线演示</a>
+          <a href="/community">社区</a>
         </nav>
-        <div class="nav-actions">
-          <button class="icon-btn" @click="toggleTheme" aria-label="切换明暗主题" title="切换主题">
-            <svg aria-hidden="true" class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4" /><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>
-            <svg aria-hidden="true" class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z" /></svg>
+        <div class="home-nav-actions">
+          <button class="home-icon-btn" aria-label="切换明暗主题" title="切换主题" @click="toggleDark">
+            <svg aria-hidden="true" class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+            <svg aria-hidden="true" class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>
           </button>
-          <button class="icon-btn hamburger" ref="menuBtn" aria-label="展开菜单" aria-expanded="false" @click="toggleMenu">
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
+          <button class="home-icon-btn hamburger" aria-label="展开菜单" :aria-expanded="menuOpen" @click="menuOpen = !menuOpen">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
           </button>
         </div>
       </div>
     </header>
 
     <main id="top">
-      <!-- ============ Hero ============ -->
-      <section class="hero">
-        <div class="wrap hero-grid">
+
+      <!-- Hero -->
+      <section class="home-hero">
+        <div class="home-wrap home-hero-grid">
           <div>
-            <span class="badge"><span class="dot"></span>云原生 × AI 原生 · MIT 开源</span>
+            <span class="home-badge"><span class="dot"></span>云原生 × AI 原生 · MIT 开源</span>
             <h1><span class="grad">MengStack</span><br />企业级 Go 语言微服务开发框架</h1>
             <p class="sub">面向云原生与 AI 时代的一站式全栈开发底座</p>
             <p class="tagline">组件化集成、零侵入依赖注入、全链路国产化适配——开箱即用，让团队专注核心业务，不再重复造轮子。</p>
-            <div class="hero-actions">
-              <a class="btn btn-primary btn-lg" href="/guide/getting-started.html">
+            <div class="home-hero-actions">
+              <a class="home-btn home-btn-primary home-btn-lg" href="/guide/getting-started">
                 快速开始
-                <svg aria-hidden="true" viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+                <svg aria-hidden="true" viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
               </a>
-              <a class="btn btn-ghost btn-lg" href="/demo.html">在线演示</a>
-              <a class="btn btn-ghost btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">
-                <svg aria-hidden="true" viewBox="0 0 24 24" width="17" height="17" 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-.55v-2.15c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .3.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z" /></svg>
+              <a class="home-btn home-btn-ghost home-btn-lg" href="/demo">在线演示</a>
+              <a class="home-btn home-btn-ghost home-btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">
+                <svg aria-hidden="true" viewBox="0 0 24 24" width="17" height="17" 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-.55v-2.15c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.23-1.28-5.23-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.83 1.18 3.09 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .3.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/></svg>
                 GitHub
               </a>
             </div>
           </div>
 
-          <div class="terminal" aria-label="代码示例终端">
-            <div class="terminal-bar"><i></i><i></i><i></i><span>main.go — mengstack</span></div>
-            <div class="terminal-body">
+          <div class="home-terminal" aria-label="代码示例终端">
+            <div class="home-terminal-bar"><i></i><i></i><i></i><span>main.go — mengstack</span></div>
+            <div class="home-terminal-body">
               <div class="ln"><span class="kw">package</span> main</div>
               <div class="ln">&nbsp;</div>
               <div class="ln"><span class="kw">import</span> <span class="str">"github.com/mengstack/mengstack"</span></div>
@@ -66,168 +68,170 @@
         </div>
       </section>
 
-      <!-- ============ Trust strip ============ -->
-      <div class="trust">
-        <div class="trust-inner">
-          <span class="trust-label">运行环境</span>
-          <span class="chip">
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9V3m0 18v-2M3 12h2m14 0h2M6 6l1.5 1.5M16.5 16.5 18 18M18 6l-1.5 1.5M7.5 16.5 6 18" /><circle cx="12" cy="12" r="3.2" /></svg>
+      <!-- Trust strip -->
+      <div class="home-trust">
+        <div class="home-trust-inner">
+          <span class="home-trust-label">运行环境</span>
+          <span class="home-chip">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9V3m0 18v-2M3 12h2m14 0h2M6 6l1.5 1.5M16.5 16.5 18 18M18 6l-1.5 1.5M7.5 16.5 6 18"/><circle cx="12" cy="12" r="3.2"/></svg>
             Go 1.23+
           </span>
-          <span class="chip">
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="8" ry="3" /><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" /></svg>
+          <span class="home-chip">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
             PostgreSQL 14+
           </span>
-          <span class="chip">
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0-6 6v3a6 6 0 0 0 12 0V9" /><path d="M9 21h6M12 18v3" /></svg>
+          <span class="home-chip">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0-6 6v3a6 6 0 0 0 12 0V9"/><path d="M9 21h6M12 18v3"/></svg>
             Redis 7+
           </span>
-          <span class="chip">
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="3" y="9" width="4" height="4" /><rect x="10" y="9" width="4" height="4" /><rect x="17" y="9" width="4" height="4" /><rect x="3" y="15.5" width="4" height="4" /><rect x="10" y="15.5" width="4" height="4" /><rect x="17" y="15.5" width="4" height="4" /><path d="M7 11h3m4 0h3M7 17.5h3m4 0h3" /></svg>
+          <span class="home-chip">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><rect x="3" y="9" width="4" height="4"/><rect x="10" y="9" width="4" height="4"/><rect x="17" y="9" width="4" height="4"/><rect x="3" y="15.5" width="4" height="4"/><rect x="10" y="15.5" width="4" height="4"/><rect x="17" y="15.5" width="4" height="4"/><path d="M7 11h3m4 0h3M7 17.5h3m4 0h3"/></svg>
             Docker Compose
           </span>
-          <span class="chip">
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z" /></svg>
+          <span class="home-chip">
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z"/></svg>
             MIT 开源
           </span>
         </div>
       </div>
 
-      <!-- ============ Features ============ -->
-      <section class="section features" id="features">
-        <div class="wrap">
-          <div class="section-head reveal">
-            <span class="eyebrow">Core Capabilities</span>
+      <!-- Features -->
+      <section class="home-section home-features" id="features">
+        <div class="home-wrap">
+          <div class="home-section-head reveal">
+            <span class="home-eyebrow">Core Capabilities</span>
             <h2>七大核心能力，覆盖企业级开发全链路</h2>
             <p>从架构搭建到 AI 集成，生产验证的模块开箱即用，大幅降低中大型项目的架构成本。</p>
           </div>
-          <div class="feature-grid stagger">
-            <article class="feature reveal" style="--i:0">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><path d="M17.5 14v7M14 17.5h7" /></svg>
+          <div class="home-feature-grid stagger">
+
+            <article class="home-feature reveal" style="--i:0">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M17.5 14v7M14 17.5h7"/></svg>
               </div>
               <h3>全栈组件化集成</h3>
               <p>内置前端模板、API 网关、分布式缓存、消息队列、定时任务等模块，生产验证，开箱即用。</p>
-              <a class="more" href="/guide/what-is-mengstack.html">了解架构<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
+              <a class="home-more" href="/guide/what-is-mengstack">了解架构<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
             </article>
 
-            <article class="feature reveal" style="--i:1">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z" /></svg>
+            <article class="home-feature reveal" style="--i:1">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z"/></svg>
               </div>
               <h3>零侵入依赖注入</h3>
               <p>兼容 Wire 编译时注入与 uber-go/fx 运行时管理，按需切换，兼顾性能与便捷。</p>
-              <a class="more" href="/guide/dependency-injection.html">查看文档<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
+              <a class="home-more" href="/guide/dependency-injection">查看文档<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
             </article>
 
-            <article class="feature reveal" style="--i:2">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="3" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /><circle cx="12" cy="12" r="3" /></svg>
+            <article class="home-feature reveal" style="--i:2">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="3"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/><circle cx="12" cy="12" r="3"/></svg>
               </div>
               <h3>AI 原生开发支持</h3>
               <p>内置大模型调用、Agent 内存管理、向量数据库集成，快速落地智能业务场景。</p>
             </article>
 
-            <article class="feature reveal" style="--i:3">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z" /><path d="m9 12 2 2 4-4" /></svg>
+            <article class="home-feature reveal" style="--i:3">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.4 8.5 8 11 4.6-2.5 8-6 8-11V5z"/><path d="m9 12 2 2 4-4"/></svg>
               </div>
               <h3>全链路国产化适配</h3>
               <p>兼容国产操作系统、数据库、中间件，满足政企金融等保合规要求。</p>
             </article>
 
-            <article class="feature reveal" style="--i:4">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z" /><path d="M8 7h7M8 11h7M4 5v14" /></svg>
+            <article class="home-feature reveal" style="--i:4">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M8 7h7M8 11h7M4 5v14"/></svg>
               </div>
               <h3>极低学习门槛</h3>
               <p>统一代码规范与完善中文文档，新成员接入周期缩短 70% 以上。</p>
-              <a class="more" href="/guide/getting-started.html">快速开始<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
+              <a class="home-more" href="/guide/getting-started">快速开始<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
             </article>
 
-            <article class="feature reveal" style="--i:5">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5" /><path d="M4 19h16" /><rect x="7" y="11" width="3" height="5" /><rect x="12" y="7" width="3" height="9" /><rect x="17" y="13" width="3" height="3" /></svg>
+            <article class="home-feature reveal" style="--i:5">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5"/><path d="M4 19h16"/><rect x="7" y="11" width="3" height="5"/><rect x="12" y="7" width="3" height="9"/><rect x="17" y="13" width="3" height="3"/></svg>
               </div>
               <h3>生产级可观测</h3>
               <p>内置链路追踪、指标监控、日志聚合，无需额外搭建监控体系。</p>
             </article>
 
-            <article class="feature feature--wide reveal" style="--i:6">
-              <div class="ficon">
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 0 1 7.7-1.5" /></svg>
+            <article class="home-feature home-feature--wide reveal" style="--i:6">
+              <div class="home-ficon">
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 7.7-1.5"/></svg>
               </div>
-              <div class="wtext">
+              <div class="home-wtext">
                 <h3>完全开源开放</h3>
                 <p>核心代码 MIT 协议开源，无商业限制，社区持续迭代，可自由定制扩展。</p>
               </div>
-              <a class="btn btn-primary wcta" href="/community.html">加入社区</a>
+              <a class="home-btn home-btn-primary home-wcta" href="/community">加入社区</a>
             </article>
+
           </div>
         </div>
       </section>
 
-      <!-- ============ Architecture ============ -->
-      <section class="section arch" id="architecture">
-        <div class="wrap">
-          <div class="section-head reveal">
-            <span class="eyebrow">Architecture</span>
+      <!-- Architecture -->
+      <section class="home-section home-arch" id="architecture">
+        <div class="home-wrap">
+          <div class="home-section-head reveal">
+            <span class="home-eyebrow">Architecture</span>
             <h2>三层隔离架构，全链路一站打通</h2>
             <p>覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，层间解耦、演进自由。</p>
           </div>
-          <div class="arch-layers stagger">
-            <div class="layer reveal" style="--i:0">
-              <div class="layer-num">LAYER 01</div>
+          <div class="home-arch-layers stagger">
+            <div class="home-layer reveal" style="--i:0">
+              <div class="home-layer-num">LAYER 01</div>
               <h3>前端交互层</h3>
               <p>内置前端模板，统一交互规范，与后端接口无缝对接。</p>
               <ul><li>前端模板</li><li>API 网关</li><li>认证鉴权</li></ul>
             </div>
-            <div class="layer reveal" style="--i:1">
-              <div class="layer-num">LAYER 02</div>
+            <div class="home-layer reveal" style="--i:1">
+              <div class="home-layer-num">LAYER 02</div>
               <h3>后端服务层</h3>
               <p>模块四层模式配合零侵入依赖注入，业务边界清晰，按需装配。</p>
               <ul><li>模块四层模式</li><li>Wire / fx 注入</li><li>消息队列 · 定时任务</li></ul>
             </div>
-            <div class="layer reveal" style="--i:2">
-              <div class="layer-num">LAYER 03</div>
+            <div class="home-layer reveal" style="--i:2">
+              <div class="home-layer-num">LAYER 03</div>
               <h3>数据与 AI 层</h3>
               <p>数据治理与智能能力一体集成，并完成全链路国产化适配。</p>
               <ul><li>分布式缓存</li><li>向量数据库</li><li>大模型 · Agent</li></ul>
             </div>
           </div>
-          <div class="arch-flow reveal">
+          <div class="home-arch-flow reveal">
             前端交互
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
             后端服务
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
             数据治理 · AI 能力
           </div>
         </div>
       </section>
 
-      <!-- ============ Quick start ============ -->
-      <section class="section qs" id="quickstart">
-        <div class="wrap">
-          <div class="section-head reveal">
-            <span class="eyebrow">Quick Start</span>
+      <!-- Quick start -->
+      <section class="home-section home-qs" id="quickstart">
+        <div class="home-wrap">
+          <div class="home-section-head reveal">
+            <span class="home-eyebrow">Quick Start</span>
             <h2>三步启动，5 分钟跑起项目环境</h2>
             <p>推荐使用 Docker Compose 一键拉起 API、PostgreSQL 与 Redis，无需手动配置依赖。</p>
           </div>
-          <div class="qs-grid stagger">
-            <div class="qs-step reveal" style="--i:0">
-              <h3><span class="step-no">1</span>克隆项目</h3>
+          <div class="home-qs-grid stagger">
+            <div class="home-qs-step reveal" style="--i:0">
+              <h3><span class="home-step-no">1</span>克隆项目</h3>
               <p>从 Gitea 仓库拉取最新代码。</p>
-              <div class="codeblock">
-                <button class="copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg></button>
+              <div class="home-codeblock">
+                <button class="home-copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg></button>
                 <pre>git clone https://gitea.softunis.com/mengstack/mengstack.git
 cd mengstack</pre>
               </div>
             </div>
-            <div class="qs-step reveal" style="--i:1">
-              <h3><span class="step-no">2</span>启动服务</h3>
+            <div class="home-qs-step reveal" style="--i:1">
+              <h3><span class="home-step-no">2</span>启动服务</h3>
               <p>一条命令启动全部依赖服务。</p>
-              <div class="codeblock">
-                <button class="copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg></button>
+              <div class="home-codeblock">
+                <button class="home-copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg></button>
                 <pre><span class="c-comment"># 启动所有服务</span>
 docker-compose up -d
 
@@ -235,11 +239,11 @@ docker-compose up -d
 docker-compose logs -f app</pre>
               </div>
             </div>
-            <div class="qs-step reveal" style="--i:2">
-              <h3><span class="step-no">3</span>验证访问</h3>
+            <div class="home-qs-step reveal" style="--i:2">
+              <h3><span class="home-step-no">3</span>验证访问</h3>
               <p>打开浏览器或调用健康检查接口。</p>
-              <div class="codeblock">
-                <button class="copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" /></svg></button>
+              <div class="home-codeblock">
+                <button class="home-copy-btn" aria-label="复制命令" @click="copyCode($event)"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg></button>
                 <pre>API   http://localhost:2222
 Docs  /swagger/index.html
 Check /health</pre>
@@ -249,45 +253,45 @@ Check /health</pre>
         </div>
       </section>
 
-      <!-- ============ Stats ============ -->
-      <section class="stats">
-        <div class="wrap stats-grid">
-          <div class="stat reveal">
+      <!-- Stats -->
+      <section class="home-stats">
+        <div class="home-wrap home-stats-grid">
+          <div class="home-stat reveal">
             <div class="v">5<small style="font-size:.55em">分钟</small></div>
             <div class="l">完成项目环境搭建</div>
           </div>
-          <div class="stat reveal">
+          <div class="home-stat reveal">
             <div class="v">70%+</div>
             <div class="l">新成员接入周期缩短</div>
           </div>
-          <div class="stat reveal">
+          <div class="home-stat reveal">
             <div class="v">MIT</div>
             <div class="l">核心代码开源协议 · 无商业限制</div>
           </div>
         </div>
       </section>
 
-      <!-- ============ About ============ -->
-      <section class="section about" id="about">
-        <div class="wrap">
-          <div class="section-head reveal">
-            <span class="eyebrow">About</span>
+      <!-- About -->
+      <section class="home-section home-about" id="about">
+        <div class="home-wrap">
+          <div class="home-section-head reveal">
+            <span class="home-eyebrow">About</span>
             <h2>关于 MengStack</h2>
           </div>
-          <div class="about-card reveal">
+          <div class="home-about-card reveal">
             <p>MengStack 是面向云原生与 AI 时代的一站式全栈开发底座，整合主流开源技术能力，为开发者提供开箱即用的组件化开发体验，大幅降低中大型项目的架构搭建成本，让团队专注于核心业务逻辑落地，无需重复造轮子。</p>
             <p>我们坚持全栈开源、无厂商锁定的设计理念，覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，适配国产化软硬件生态，为企业级项目提供稳定、高效、可扩展的技术支撑。</p>
-            <div class="about-points">
+            <div class="home-about-points">
               <div>
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                 全栈开源，无厂商锁定
               </div>
               <div>
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                 组件开箱即用
               </div>
               <div>
-                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                 国产化生态适配
               </div>
             </div>
@@ -295,145 +299,119 @@ Check /health</pre>
         </div>
       </section>
 
-      <!-- ============ CTA ============ -->
-      <section class="cta-band">
-        <div class="wrap">
-          <div class="cta-card reveal">
+      <!-- CTA -->
+      <section class="home-cta-band">
+        <div class="home-wrap">
+          <div class="home-cta-card reveal">
             <h2>现在开始，用 MengStack 搭建你的下一个项目</h2>
             <p>完善中文文档与活跃社区，陪你从第一行代码走到生产上线。</p>
-            <div class="hero-actions">
-              <a class="btn btn-primary btn-lg" href="/guide/getting-started.html">5 分钟快速开始</a>
-              <a class="btn btn-ghost btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">访问 Gitea 仓库</a>
+            <div class="home-hero-actions">
+              <a class="home-btn home-btn-primary home-btn-lg" href="/guide/getting-started">5 分钟快速开始</a>
+              <a class="home-btn home-btn-ghost home-btn-lg" href="https://gitea.softunis.com/mengstack" target="_blank" rel="noopener noreferrer">访问 Gitea 仓库</a>
             </div>
           </div>
         </div>
       </section>
+
     </main>
 
-    <!-- ============ Footer ============ -->
-    <footer class="footer">
-      <div class="wrap footer-inner">
+    <!-- Footer -->
+    <footer class="home-footer">
+      <div class="home-wrap home-footer-inner">
         <div>
           <p>Released under the MIT License.</p>
           <p>Copyright &copy; 2026 <a href="https://www.softunis.com/" target="_blank" rel="noopener noreferrer">软盟 SoftUnis</a><br />
           <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2023054965号</a> &nbsp;|&nbsp;
           <a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer">粤公网安备 44030502010466号</a></p>
         </div>
-        <nav class="footer-links" aria-label="页脚导航">
-          <a href="/guide/what-is-mengstack.html">指南</a>
-          <a href="/api/overview.html">API 参考</a>
-          <a href="/demo.html">在线演示</a>
-          <a href="/community.html">社区</a>
+        <nav class="home-footer-links" aria-label="页脚导航">
+          <a href="/guide/what-is-mengstack">指南</a>
+          <a href="/api/overview">API 参考</a>
+          <a href="/demo">在线演示</a>
+          <a href="/community">社区</a>
         </nav>
       </div>
     </footer>
+
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useData } from 'vitepress'
 
 const { isDark } = useData()
 
 const navEl = ref(null)
-const menuBtn = ref(null)
-const scrolled = ref(false)
+const scrollY = ref(0)
+const menuOpen = ref(false)
 
-let scrollHandler = null
-let observer = null
-let mutationObserver = null
-
-function toggleTheme() {
-  const el = document.documentElement
-  el.classList.toggle('dark')
-  const dark = el.classList.contains('dark')
-  isDark.value = dark
-  try { localStorage.setItem('ms-theme', dark ? 'dark' : 'light') } catch (e) {}
+function toggleDark() {
+  isDark.value = !isDark.value
 }
 
-function toggleMenu() {
-  const nav = navEl.value
-  if (!nav) return
-  const open = nav.classList.toggle('nav-menu-open')
-  menuBtn.value?.setAttribute('aria-expanded', open ? 'true' : 'false')
-}
-
-function copyCode(event) {
-  const btn = event.currentTarget
+function copyCode(e) {
+  const btn = e.currentTarget
   const pre = btn.parentElement.querySelector('pre')
   const text = pre ? pre.innerText : ''
-  const done = () => {
+  const originalHTML = btn.innerHTML
+  const markCopied = () => {
     btn.classList.add('copied')
     btn.innerHTML = '<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
     setTimeout(() => {
       btn.classList.remove('copied')
-      btn.innerHTML = '<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>'
+      btn.innerHTML = originalHTML
     }, 1600)
   }
   try {
     if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(text).then(done).catch(done)
-    } else { done() }
-  } catch (e) { done() }
+      navigator.clipboard.writeText(text).then(markCopied).catch(markCopied)
+    } else { markCopied() }
+  } catch { markCopied() }
 }
 
+let io = null
+
 onMounted(() => {
-  const root = document.documentElement
-
-  try {
-    const saved = localStorage.getItem('ms-theme')
-    if (saved === 'dark' || (!saved && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      root.classList.add('dark')
-      isDark.value = true
-    } else {
-      root.classList.remove('dark')
-      isDark.value = false
-    }
-  } catch (e) {}
-
-  mutationObserver = new MutationObserver(() => {
-    isDark.value = root.classList.contains('dark')
-  })
-  mutationObserver.observe(root, { attributes: true, attributeFilter: ['class'] })
-
-  scrollHandler = () => { scrolled.value = window.scrollY > 8 }
-  window.addEventListener('scroll', scrollHandler, { passive: true })
-  scrollHandler()
+  const onScroll = () => { scrollY.value = window.scrollY }
+  onScroll()
+  window.addEventListener('scroll', onScroll, { passive: true })
 
   const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
   if (reduce || !('IntersectionObserver' in window)) {
-    root.querySelectorAll('.reveal').forEach(el => el.classList.add('in'))
+    document.querySelectorAll('.home-root .reveal').forEach(el => el.classList.add('in'))
   } else {
-    observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('in')
-          observer.unobserve(entry.target)
-        }
+    io = new IntersectionObserver((entries) => {
+      entries.forEach(en => {
+        if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target) }
       })
     }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' })
-    root.querySelectorAll('.reveal').forEach(el => observer.observe(el))
+    document.querySelectorAll('.home-root .reveal').forEach(el => io.observe(el))
   }
 })
 
 onUnmounted(() => {
-  if (scrollHandler) window.removeEventListener('scroll', scrollHandler)
-  if (observer) observer.disconnect()
-  if (mutationObserver) mutationObserver.disconnect()
+  if (io) io.disconnect()
+})
+
+watch(menuOpen, (open) => {
+  if (navEl.value) {
+    if (open) navEl.value.classList.add('nav-menu-open')
+    else navEl.value.classList.remove('nav-menu-open')
+  }
 })
 </script>
 
-<style>
+<style scoped>
 /* ============ Design Tokens ============ */
-:root{
-  --ms-gold:#C8963E;
-  --ms-gold-light:#E0B86A;
-  --ms-gold-dark:#A07830;
-  --ms-bronze:#B87333;
-  --ms-bronze-dark:#8B5A2B;
-  --ms-cream:#FDF8EF;
-  --ms-cream-dark:#F5EDD8;
+.home-root{
+  --home-gold:#C8963E;
+  --home-gold-light:#E0B86A;
+  --home-gold-dark:#A07830;
+  --home-bronze:#B87333;
+  --home-bronze-dark:#8B5A2B;
+  --home-cream:#FDF8EF;
+  --home-cream-dark:#F5EDD8;
 
   --home-bg:#ffffff;
   --home-bg-soft:#FAF7F1;
@@ -445,16 +423,15 @@ onUnmounted(() => {
   --home-border-strong:#ddd2bc;
   --home-code-bg:#1d1a14;
   --home-code-ink:#f3ead8;
-  --home-hero-glow:rgba(200,150,62,.16);
+  --home-glow:rgba(200,150,62,.16);
   --home-shadow:0 1px 2px rgba(60,45,15,.05),0 12px 32px -12px rgba(120,86,30,.16);
   --home-shadow-lg:0 2px 4px rgba(60,45,15,.06),0 24px 56px -16px rgba(120,86,30,.22);
   --home-radius:16px;
-  --home-radius-sm:12px;
   --home-maxw:1180px;
-  --home-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
-  --home-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
+  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
+  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
 }
-html.dark{
+.home-root.dark{
   --home-bg:#16140f;
   --home-bg-soft:#1d1a13;
   --home-bg-elev:#221e16;
@@ -463,334 +440,312 @@ html.dark{
   --home-ink-faint:#8d8472;
   --home-border:#312b20;
   --home-border-strong:#443b2a;
-  --home-hero-glow:rgba(200,150,62,.22);
+  --home-glow:rgba(200,150,62,.22);
   --home-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -12px rgba(0,0,0,.55);
   --home-shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 56px -16px rgba(0,0,0,.65);
 }
-
-/* ============ Hide VitePress nav/footer on homepage ============ */
-.home-layout .VPNav,
-.home-layout .VPFooter {
-  display: none !important;
+.home-root{
+  font-family:var(--font);color:var(--home-ink);background:var(--home-bg);
+  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
 }
-.home-layout .VPContent {
-  padding-top: 0 !important;
-}
-
-/* ============ Home Page Base ============ */
-.home-new{
-  font-family:var(--home-font);
-  color:var(--home-ink);
-  background:var(--home-bg);
-  line-height:1.7;
-  font-size:16px;
-  -webkit-font-smoothing:antialiased;
-  overflow-x:hidden;
-}
-.home-new *,.home-new *::before,.home-new *::after{box-sizing:border-box}
-.home-new a{color:inherit;text-decoration:none}
-.home-new img{max-width:100%;display:block}
-.home-new h1,.home-new h2,.home-new h3{line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
-.home-new p{margin:0}
-.home-new .wrap{max-width:var(--home-maxw);margin:0 auto;padding:0 24px}
+.home-root *,.home-root *::before,.home-root *::after{box-sizing:border-box}
+.home-root a{color:inherit;text-decoration:none}
+.home-root img{max-width:100%;display:block}
+.home-root h1,.home-root h2,.home-root h3{line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
+.home-root p{margin:0}
+.home-wrap{max-width:var(--home-maxw);margin:0 auto;padding:0 24px}
 
 /* ============ Navbar ============ */
-.home-new .nav{
+.home-nav{
   position:fixed;top:0;left:0;right:0;z-index:100;
   background:color-mix(in srgb,var(--home-bg) 82%,transparent);
   backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
   border-bottom:1px solid transparent;transition:border-color .25s;
 }
-.home-new .nav.scrolled{border-bottom-color:var(--home-border)}
-.home-new .nav-inner{max-width:var(--home-maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:28px}
-.home-new .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
-.home-new .brand img{width:30px;height:30px}
-.home-new .brand .dark-logo{display:none}
-html.dark .home-new .brand .light-logo{display:none}
-html.dark .home-new .brand .dark-logo{display:block}
-.home-new .nav-links{display:flex;gap:4px;margin-left:auto}
-.home-new .nav-links a{
+.home-nav.scrolled{border-bottom-color:var(--home-border)}
+.home-nav-inner{max-width:var(--home-maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:28px}
+.home-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
+.home-brand img{width:30px;height:30px}
+.home-brand .dark-logo{display:none}
+.home-root.dark .home-brand .light-logo{display:none}
+.home-root.dark .home-brand .dark-logo{display:block}
+.home-nav-links{display:flex;gap:4px;margin-left:auto}
+.home-nav-links a{
   padding:7px 13px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--home-ink-soft);
   transition:color .2s,background .2s;
 }
-.home-new .nav-links a:hover{color:var(--ms-gold-dark);background:var(--home-bg-soft)}
-html.dark .home-new .nav-links a:hover{color:var(--ms-gold-light)}
-.home-new .nav-links a.active{color:var(--ms-gold-dark);font-weight:600}
-html.dark .home-new .nav-links a.active{color:var(--ms-gold-light)}
-.home-new .nav-actions{display:flex;align-items:center;gap:8px}
-.home-new .icon-btn{
+.home-nav-links a:hover{color:var(--home-gold-dark);background:var(--home-bg-soft)}
+.home-root.dark .home-nav-links a:hover{color:var(--home-gold-light)}
+.home-nav-links a.active{color:var(--home-gold-dark);font-weight:600}
+.home-root.dark .home-nav-links a.active{color:var(--home-gold-light)}
+.home-nav-actions{display:flex;align-items:center;gap:8px}
+.home-icon-btn{
   width:38px;height:38px;border-radius:10px;border:1px solid var(--home-border);background:var(--home-bg);
   display:grid;place-items:center;cursor:pointer;color:var(--home-ink-soft);transition:all .2s;
 }
-.home-new .icon-btn:hover{border-color:var(--home-border-strong);color:var(--ms-gold-dark);transform:translateY(-1px)}
-.home-new .icon-btn .moon{display:none}
-html.dark .home-new .icon-btn .sun{display:none}
-html.dark .home-new .icon-btn .moon{display:block}
-.home-new .hamburger{display:none}
+.home-icon-btn:hover{border-color:var(--home-border-strong);color:var(--home-gold-dark);transform:translateY(-1px)}
+.home-icon-btn .moon{display:none}
+.home-root.dark .home-icon-btn .sun{display:none}
+.home-root.dark .home-icon-btn .moon{display:block}
+.hamburger{display:none}
 
 /* ============ Buttons ============ */
-.home-new .btn{
+.home-btn{
   display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;
   font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
   transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;
 }
-.home-new .btn:hover{transform:translateY(-2px)}
-.home-new .btn-primary{
-  background:linear-gradient(135deg,var(--ms-gold) 0%,var(--ms-bronze) 100%);
+.home-btn:hover{transform:translateY(-2px)}
+.home-btn-primary{
+  background:linear-gradient(135deg,var(--home-gold) 0%,var(--home-bronze) 100%);
   color:#fff;box-shadow:0 6px 20px -6px rgba(200,150,62,.55);
 }
-.home-new .btn-primary:hover{box-shadow:0 10px 28px -6px rgba(200,150,62,.65)}
-.home-new .btn-ghost{background:var(--home-bg-elev);border-color:var(--home-border-strong);color:var(--home-ink)}
-.home-new .btn-ghost:hover{border-color:var(--ms-gold);color:var(--ms-gold-dark)}
-html.dark .home-new .btn-ghost:hover{color:var(--ms-gold-light)}
-.home-new .btn-lg{padding:14px 28px;font-size:16px}
+.home-btn-primary:hover{box-shadow:0 10px 28px -6px rgba(200,150,62,.65)}
+.home-btn-ghost{background:var(--home-bg-elev);border-color:var(--home-border-strong);color:var(--home-ink)}
+.home-btn-ghost:hover{border-color:var(--home-gold);color:var(--home-gold-dark)}
+.home-root.dark .home-btn-ghost:hover{color:var(--home-gold-light)}
+.home-btn-lg{padding:14px 28px;font-size:16px}
 
 /* ============ Hero ============ */
-.home-new .hero{position:relative;padding:148px 0 88px;overflow:hidden}
-.home-new .hero::before{
+.home-hero{position:relative;padding:148px 0 88px;overflow:hidden}
+.home-hero::before{
   content:"";position:absolute;inset:0;pointer-events:none;
   background:
-    radial-gradient(640px 380px at 82% -8%,var(--home-hero-glow),transparent 70%),
+    radial-gradient(640px 380px at 82% -8%,var(--home-glow),transparent 70%),
     radial-gradient(520px 360px at 8% 12%,rgba(184,115,51,.08),transparent 70%);
 }
-.home-new .hero::after{
+.home-hero::after{
   content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
   background-image:linear-gradient(var(--home-border) 1px,transparent 1px),linear-gradient(90deg,var(--home-border) 1px,transparent 1px);
   background-size:56px 56px;
   -webkit-mask-image:radial-gradient(720px 420px at 70% 0%,#000 0%,transparent 72%);
   mask-image:radial-gradient(720px 420px at 70% 0%,#000 0%,transparent 72%);
 }
-.home-new .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
-.home-new .badge{
+.home-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
+.home-badge{
   display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
-  background:var(--ms-cream);border:1px solid var(--home-border-strong);color:var(--ms-bronze-dark);
+  background:var(--home-cream);border:1px solid var(--home-border-strong);color:var(--home-bronze-dark);
   font-size:13.5px;font-weight:600;margin-bottom:22px;
 }
-html.dark .home-new .badge{background:rgba(200,150,62,.12);color:var(--ms-gold-light);border-color:var(--home-border-strong)}
-.home-new .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ms-gold);box-shadow:0 0 0 4px rgba(200,150,62,.2)}
-.home-new .hero h1{font-size:clamp(34px,4.6vw,54px)}
-.home-new .hero h1 .grad{
-  background:linear-gradient(120deg,var(--ms-gold) 10%,var(--ms-bronze) 55%,var(--ms-gold-dark) 95%);
+.home-root.dark .home-badge{background:rgba(200,150,62,.12);color:var(--home-gold-light);border-color:var(--home-border-strong)}
+.home-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--home-gold);box-shadow:0 0 0 4px rgba(200,150,62,.2)}
+.home-hero h1{font-size:clamp(34px,4.6vw,54px)}
+.home-hero h1 .grad{
+  background:linear-gradient(120deg,var(--home-gold) 10%,var(--home-bronze) 55%,var(--home-gold-dark) 95%);
   -webkit-background-clip:text;background-clip:text;color:transparent;
 }
-.home-new .hero .sub{font-size:clamp(17px,2vw,21px);color:var(--home-ink-soft);margin-top:14px;font-weight:500}
-.home-new .hero .tagline{font-size:15.5px;color:var(--home-ink-faint);margin-top:12px;max-width:520px}
-.home-new .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
+.home-hero .sub{font-size:clamp(17px,2vw,21px);color:var(--home-ink-soft);margin-top:14px;font-weight:500}
+.home-hero .tagline{font-size:15.5px;color:var(--home-ink-faint);margin-top:12px;max-width:520px}
+.home-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
 
 /* Terminal */
-.home-new .terminal{
+.home-terminal{
   background:var(--home-code-bg);border-radius:14px;overflow:hidden;box-shadow:var(--home-shadow-lg);
-  border:1px solid #3a3326;font-family:var(--home-mono);
+  border:1px solid #3a3326;font-family:var(--mono);
 }
-.home-new .terminal-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#26211a;border-bottom:1px solid #3a3326}
-.home-new .terminal-bar i{width:11px;height:11px;border-radius:50%;display:block}
-.home-new .terminal-bar i:nth-child(1){background:#ff5f57}
-.home-new .terminal-bar i:nth-child(2){background:#febc2e}
-.home-new .terminal-bar i:nth-child(3){background:#28c840}
-.home-new .terminal-bar span{margin-left:8px;font-size:12.5px;color:#8d8472;font-family:var(--home-font)}
-.home-new .terminal-body{padding:20px 20px 22px;font-size:13.5px;line-height:1.85;color:var(--home-code-ink);overflow-x:auto}
-.home-new .terminal-body .ln{white-space:pre;opacity:0;transform:translateY(6px);animation:termIn .45s ease forwards}
-.home-new .terminal-body .cmt{color:#8d8472}
-.home-new .terminal-body .prompt{color:var(--ms-gold-light);user-select:none}
-.home-new .terminal-body .ok{color:#7fd49c}
-.home-new .terminal-body .kw{color:#c792ea}
-.home-new .terminal-body .fn{color:#82b4ff}
-.home-new .terminal-body .str{color:#a5d6a0}
-.home-new .terminal-body .num{color:#f0b97a}
-.home-new .terminal-body .ln:nth-child(1){animation-delay:.15s}
-.home-new .terminal-body .ln:nth-child(2){animation-delay:.35s}
-.home-new .terminal-body .ln:nth-child(3){animation-delay:.55s}
-.home-new .terminal-body .ln:nth-child(4){animation-delay:.85s}
-.home-new .terminal-body .ln:nth-child(5){animation-delay:1.1s}
-.home-new .terminal-body .ln:nth-child(6){animation-delay:1.5s}
-.home-new .terminal-body .ln:nth-child(7){animation-delay:1.9s}
-.home-new .terminal-body .ln:nth-child(8){animation-delay:2.25s}
-.home-new .terminal-body .cursor{display:inline-block;width:8px;height:16px;background:var(--ms-gold-light);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
+.home-terminal-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;background:#26211a;border-bottom:1px solid #3a3326}
+.home-terminal-bar i{width:11px;height:11px;border-radius:50%;display:block}
+.home-terminal-bar i:nth-child(1){background:#ff5f57}.home-terminal-bar i:nth-child(2){background:#febc2e}.home-terminal-bar i:nth-child(3){background:#28c840}
+.home-terminal-bar span{margin-left:8px;font-size:12.5px;color:#8d8472;font-family:var(--font)}
+.home-terminal-body{padding:20px 20px 22px;font-size:13.5px;line-height:1.85;color:var(--home-code-ink);overflow-x:auto}
+.home-terminal-body .ln{white-space:pre;opacity:0;transform:translateY(6px);animation:termIn .45s ease forwards}
+.home-terminal-body .cmt{color:#8d8472}
+.home-terminal-body .prompt{color:var(--home-gold-light);user-select:none}
+.home-terminal-body .ok{color:#7fd49c}
+.home-terminal-body .kw{color:#c792ea}
+.home-terminal-body .fn{color:#82b4ff}
+.home-terminal-body .str{color:#a5d6a0}
+.home-terminal-body .num{color:#f0b97a}
+.home-terminal-body .ln:nth-child(1){animation-delay:.15s}.home-terminal-body .ln:nth-child(2){animation-delay:.35s}
+.home-terminal-body .ln:nth-child(3){animation-delay:.55s}.home-terminal-body .ln:nth-child(4){animation-delay:.85s}
+.home-terminal-body .ln:nth-child(5){animation-delay:1.1s}.home-terminal-body .ln:nth-child(6){animation-delay:1.5s}
+.home-terminal-body .ln:nth-child(7){animation-delay:1.9s}.home-terminal-body .ln:nth-child(8){animation-delay:2.25s}
+.home-terminal-body .cursor{display:inline-block;width:8px;height:16px;background:var(--home-gold-light);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
 @keyframes termIn{to{opacity:1;transform:none}}
 @keyframes blink{50%{opacity:0}}
 
 /* ============ Trust strip ============ */
-.home-new .trust{border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border);background:var(--home-bg-soft)}
-.home-new .trust-inner{padding:22px 24px;max-width:var(--home-maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px}
-.home-new .trust-label{font-size:13.5px;color:var(--home-ink-faint);font-weight:600;letter-spacing:.04em}
-.home-new .chip{
+.home-trust{border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border);background:var(--home-bg-soft)}
+.home-trust-inner{padding:22px 24px;max-width:var(--home-maxw);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px}
+.home-trust-label{font-size:13.5px;color:var(--home-ink-faint);font-weight:600;letter-spacing:.04em}
+.home-chip{
   display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--home-ink-soft);
   padding:6px 14px;border-radius:999px;border:1px solid var(--home-border);background:var(--home-bg);
 }
-.home-new .chip svg{width:15px;height:15px;color:var(--ms-gold)}
+.home-chip svg{width:15px;height:15px;color:var(--home-gold)}
 
 /* ============ Sections ============ */
-.home-new .section{padding:92px 0}
-.home-new .section-head{max-width:680px;margin:0 auto 56px;text-align:center}
-.home-new .eyebrow{
+.home-section{padding:92px 0}
+.home-section-head{max-width:680px;margin:0 auto 56px;text-align:center}
+.home-eyebrow{
   display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
-  color:var(--ms-bronze);margin-bottom:14px;
+  color:var(--home-bronze);margin-bottom:14px;
 }
-html.dark .home-new .eyebrow{color:var(--ms-gold-light)}
-.home-new .section-head h2{font-size:clamp(26px,3.2vw,38px)}
-.home-new .section-head p{margin-top:14px;color:var(--home-ink-soft);font-size:16.5px}
+.home-root.dark .home-eyebrow{color:var(--home-gold-light)}
+.home-section-head h2{font-size:clamp(26px,3.2vw,38px)}
+.home-section-head p{margin-top:14px;color:var(--home-ink-soft);font-size:16.5px}
 
 /* ============ Features ============ */
-.home-new .features{background:var(--home-bg)}
-.home-new .feature-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
-.home-new .feature{
+.home-features{background:var(--home-bg)}
+.home-feature-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
+.home-feature{
   grid-column:span 4;position:relative;padding:30px 26px;border-radius:var(--home-radius);
   background:var(--home-bg-elev);border:1px solid var(--home-border);box-shadow:var(--home-shadow);
   transition:transform .25s ease,box-shadow .25s ease,border-color .25s;
   display:flex;flex-direction:column;
 }
-.home-new .feature:hover{transform:translateY(-5px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)}
-.home-new .feature:hover .ficon{transform:scale(1.08) rotate(-3deg)}
-.home-new .ficon{
+.home-feature:hover{transform:translateY(-5px);box-shadow:var(--home-shadow-lg);border-color:var(--home-border-strong)}
+.home-feature:hover .home-ficon{transform:scale(1.08) rotate(-3deg)}
+.home-ficon{
   width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
-  background:linear-gradient(135deg,var(--ms-cream),var(--ms-cream-dark));
-  color:var(--ms-bronze);transition:transform .3s ease;flex:none;
+  background:linear-gradient(135deg,var(--home-cream),var(--home-cream-dark));
+  color:var(--home-bronze);transition:transform .3s ease;flex:none;
 }
-html.dark .home-new .ficon{background:rgba(200,150,62,.14);color:var(--ms-gold-light)}
-.home-new .ficon svg{width:24px;height:24px}
-.home-new .feature h3{font-size:18px;margin-bottom:9px}
-.home-new .feature p{font-size:14.5px;color:var(--home-ink-soft)}
-.home-new .feature .more{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--ms-gold-dark);display:inline-flex;align-items:center;gap:6px}
-html.dark .home-new .feature .more{color:var(--ms-gold-light)}
-.home-new .feature .more svg{width:14px;height:14px;transition:transform .2s}
-.home-new .feature:hover .more svg{transform:translateX(4px)}
-.home-new .feature--wide{grid-column:span 12;flex-direction:row;align-items:center;gap:28px;padding:34px 38px;
-  background:linear-gradient(120deg,var(--ms-cream) 0%,var(--home-bg-elev) 62%)}
-html.dark .home-new .feature--wide{background:linear-gradient(120deg,rgba(200,150,62,.13) 0%,var(--home-bg-elev) 62%)}
-.home-new .feature--wide .ficon{margin-bottom:0}
-.home-new .feature--wide .wtext{flex:1}
-.home-new .feature--wide .wcta{flex:none}
+.home-root.dark .home-ficon{background:rgba(200,150,62,.14);color:var(--home-gold-light)}
+.home-ficon svg{width:24px;height:24px}
+.home-feature h3{font-size:18px;margin-bottom:9px}
+.home-feature p{font-size:14.5px;color:var(--home-ink-soft)}
+.home-more{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--home-gold-dark);display:inline-flex;align-items:center;gap:6px}
+.home-root.dark .home-more{color:var(--home-gold-light)}
+.home-more svg{width:14px;height:14px;transition:transform .2s}
+.home-feature:hover .home-more svg{transform:translateX(4px)}
+.home-feature--wide{grid-column:span 12;flex-direction:row;align-items:center;gap:28px;padding:34px 38px;
+  background:linear-gradient(120deg,var(--home-cream) 0%,var(--home-bg-elev) 62%)}
+.home-root.dark .home-feature--wide{background:linear-gradient(120deg,rgba(200,150,62,.13) 0%,var(--home-bg-elev) 62%)}
+.home-feature--wide .home-ficon{margin-bottom:0}
+.home-wtext{flex:1}
+.home-wcta{flex:none}
 
 /* ============ Architecture ============ */
-.home-new .arch{background:var(--home-bg-soft)}
-.home-new .arch-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
-.home-new .layer{
+.home-arch{background:var(--home-bg-soft)}
+.home-arch-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
+.home-layer{
   position:relative;padding:32px 28px;border-radius:var(--home-radius);background:var(--home-bg-elev);
   border:1px solid var(--home-border);box-shadow:var(--home-shadow);
 }
-.home-new .layer-num{
-  font-family:var(--home-mono);font-size:13px;font-weight:700;color:var(--ms-gold);
+.home-layer-num{
+  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--home-gold);
   display:flex;align-items:center;gap:10px;margin-bottom:16px;
 }
-.home-new .layer-num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--home-border-strong),transparent)}
-.home-new .layer h3{font-size:19px;margin-bottom:10px}
-.home-new .layer p{font-size:14.5px;color:var(--home-ink-soft);margin-bottom:16px}
-.home-new .layer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
-.home-new .layer li{
+.home-layer-num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--home-border-strong),transparent)}
+.home-layer h3{font-size:19px;margin-bottom:10px}
+.home-layer p{font-size:14.5px;color:var(--home-ink-soft);margin-bottom:16px}
+.home-layer ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
+.home-layer li{
   font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:8px;
   background:var(--home-bg-soft);border:1px solid var(--home-border);color:var(--home-ink-soft);
 }
-.home-new .arch-flow{
+.home-arch-flow{
   margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
   font-size:14px;color:var(--home-ink-faint);font-weight:600;
 }
-.home-new .arch-flow svg{width:18px;height:18px;color:var(--ms-gold)}
+.home-arch-flow svg{width:18px;height:18px;color:var(--home-gold)}
 
 /* ============ Quick start ============ */
-.home-new .qs{background:var(--home-bg)}
-.home-new .qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
-.home-new .qs-step{
+.home-qs{background:var(--home-bg)}
+.home-qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
+.home-qs-step{
   padding:26px;border-radius:var(--home-radius);background:var(--home-bg-elev);border:1px solid var(--home-border);
   box-shadow:var(--home-shadow);display:flex;flex-direction:column;
 }
-.home-new .qs-step h3{font-size:16.5px;margin:14px 0 6px;display:flex;align-items:center;gap:10px}
-.home-new .step-no{
+.home-qs-step h3{font-size:16.5px;margin:14px 0 6px;display:flex;align-items:center;gap:10px}
+.home-step-no{
   width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
-  background:linear-gradient(135deg,var(--ms-gold),var(--ms-bronze));color:#fff;
-  font-family:var(--home-mono);font-size:13.5px;font-weight:700;
+  background:linear-gradient(135deg,var(--home-gold),var(--home-bronze));color:#fff;
+  font-family:var(--mono);font-size:13.5px;font-weight:700;
 }
-.home-new .qs-step>p{font-size:13.5px;color:var(--home-ink-faint);margin-bottom:14px}
-.home-new .codeblock{margin-top:auto;position:relative;background:var(--home-code-bg);border-radius:10px;padding:14px 16px;overflow-x:auto}
-.home-new .codeblock pre{margin:0;font-family:var(--home-mono);font-size:12.5px;line-height:1.7;color:var(--home-code-ink);white-space:pre}
-.home-new .codeblock .c-comment{color:#8d8472}
-.home-new .copy-btn{
+.home-qs-step>p{font-size:13.5px;color:var(--home-ink-faint);margin-bottom:14px}
+.home-codeblock{margin-top:auto;position:relative;background:var(--home-code-bg);border-radius:10px;padding:14px 16px;overflow-x:auto}
+.home-codeblock pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--home-code-ink);white-space:pre}
+.home-codeblock .c-comment{color:#8d8472}
+.home-copy-btn{
   position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:7px;border:1px solid #4a4232;
   background:#2c271e;color:#b3a88e;display:grid;place-items:center;cursor:pointer;opacity:0;
   transition:opacity .2s,color .2s;
 }
-.home-new .codeblock:hover .copy-btn,.home-new .copy-btn:focus-visible{opacity:1}
-.home-new .copy-btn:hover{color:var(--ms-gold-light)}
-.home-new .copy-btn svg{width:14px;height:14px}
-.home-new .copy-btn.copied{color:#7fd49c;opacity:1}
+.home-codeblock:hover .home-copy-btn,.home-copy-btn:focus-visible{opacity:1}
+.home-copy-btn:hover{color:var(--home-gold-light)}
+.home-copy-btn svg{width:14px;height:14px}
+.home-copy-btn.copied{color:#7fd49c;opacity:1}
 
 /* ============ Stats ============ */
-.home-new .stats{background:var(--home-bg-soft);border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border)}
-.home-new .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:64px 0}
-.home-new .stat{text-align:center;padding:0 20px}
-.home-new .stat .v{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.02em;
-  background:linear-gradient(120deg,var(--ms-gold),var(--ms-bronze));
+.home-stats{background:var(--home-bg-soft);border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border)}
+.home-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:64px 0}
+.home-stat{text-align:center;padding:0 20px}
+.home-stat .v{font-size:clamp(34px,4vw,46px);font-weight:800;letter-spacing:-.02em;
+  background:linear-gradient(120deg,var(--home-gold),var(--home-bronze));
   -webkit-background-clip:text;background-clip:text;color:transparent}
-.home-new .stat .l{margin-top:8px;font-size:15px;color:var(--home-ink-soft);font-weight:500}
+.home-stat .l{margin-top:8px;font-size:15px;color:var(--home-ink-soft);font-weight:500}
 
 /* ============ About ============ */
-.home-new .about .about-card{
+.home-about .home-about-card{
   max-width:880px;margin:0 auto;padding:48px 52px;border-radius:20px;
   background:var(--home-bg-elev);border:1px solid var(--home-border);box-shadow:var(--home-shadow);
 }
-.home-new .about-card p{color:var(--home-ink-soft);font-size:16px}
-.home-new .about-card p+p{margin-top:18px}
-.home-new .about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
-.home-new .about-points div{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--home-ink)}
-.home-new .about-points svg{width:19px;height:19px;color:var(--ms-gold);flex:none;margin-top:3px}
+.home-about-card p{color:var(--home-ink-soft);font-size:16px}
+.home-about-card p+p{margin-top:18px}
+.home-about-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
+.home-about-points div{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--home-ink)}
+.home-about-points svg{width:19px;height:19px;color:var(--home-gold);flex:none;margin-top:3px}
 
 /* ============ CTA ============ */
-.home-new .cta-band{padding:0 0 96px}
-.home-new .cta-card{
+.home-cta-band{padding:0 0 96px}
+.home-cta-card{
   position:relative;overflow:hidden;text-align:center;padding:64px 32px;border-radius:22px;
   background:linear-gradient(130deg,#2b2315 0%,#3d2f17 55%,#2b2315 100%);
   border:1px solid #4d3f23;
 }
-.home-new .cta-card::before{
+.home-cta-card::before{
   content:"";position:absolute;inset:0;
   background:radial-gradient(520px 240px at 50% -30%,rgba(224,184,106,.32),transparent 70%);
 }
-.home-new .cta-card h2{position:relative;color:#fbf3e2;font-size:clamp(25px,3vw,34px)}
-.home-new .cta-card p{position:relative;color:#c9bca0;margin-top:12px}
-.home-new .cta-card .hero-actions{justify-content:center;margin-top:30px}
-.home-new .cta-card .btn-ghost{background:transparent;border-color:#6b5a38;color:#f0e6d0}
-.home-new .cta-card .btn-ghost:hover{border-color:var(--ms-gold-light);color:var(--ms-gold-light)}
+.home-cta-card h2{position:relative;color:#fbf3e2;font-size:clamp(25px,3vw,34px)}
+.home-cta-card p{position:relative;color:#c9bca0;margin-top:12px}
+.home-cta-card .home-hero-actions{justify-content:center;margin-top:30px}
+.home-cta-card .home-btn-ghost{background:transparent;border-color:#6b5a38;color:#f0e6d0}
+.home-cta-card .home-btn-ghost:hover{border-color:var(--home-gold-light);color:var(--home-gold-light)}
 
 /* ============ Footer ============ */
-.home-new .footer{border-top:1px solid var(--home-border);background:var(--home-bg-soft);padding:44px 0}
-.home-new .footer-inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
-.home-new .footer p{font-size:13.5px;color:var(--home-ink-faint);line-height:1.9}
-.home-new .footer a{color:var(--home-ink-soft)}
-.home-new .footer a:hover{color:var(--ms-gold-dark)}
-html.dark .home-new .footer a:hover{color:var(--ms-gold-light)}
-.home-new .footer-links{display:flex;gap:18px;flex-wrap:wrap}
-.home-new .footer-links a{font-size:13.5px;font-weight:500}
+.home-footer{border-top:1px solid var(--home-border);background:var(--home-bg-soft);padding:44px 0}
+.home-footer-inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
+.home-footer p{font-size:13.5px;color:var(--home-ink-faint);line-height:1.9}
+.home-footer a{color:var(--home-ink-soft)}
+.home-footer a:hover{color:var(--home-gold-dark)}
+.home-root.dark .home-footer a:hover{color:var(--home-gold-light)}
+.home-footer-links{display:flex;gap:18px;flex-wrap:wrap}
+.home-footer-links a{font-size:13.5px;font-weight:500}
 
 /* ============ Reveal animation ============ */
-.home-new .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
-.home-new .reveal.in{opacity:1;transform:none}
-.home-new .stagger>*{transition-delay:calc(var(--i,0)*70ms)}
+.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
+.reveal.in{opacity:1;transform:none}
+.stagger>*{transition-delay:calc(var(--i,0)*70ms)}
 
 /* ============ Responsive ============ */
 @media (max-width:980px){
-  .home-new .hero{padding:120px 0 64px}
-  .home-new .hero-grid{grid-template-columns:1fr;gap:44px}
-  .home-new .feature{grid-column:span 6}
-  .home-new .feature--wide{grid-column:span 12;flex-direction:column;align-items:flex-start;gap:18px}
-  .home-new .arch-layers,.home-new .qs-grid,.home-new .stats-grid,.home-new .about-points{grid-template-columns:1fr}
-  .home-new .stat{padding:10px 0}
-  .home-new .nav-links{display:none}
-  .home-new .hamburger{display:grid}
-  .home-new .nav-menu-open .nav-links{
+  .home-hero{padding:120px 0 64px}
+  .home-hero-grid{grid-template-columns:1fr;gap:44px}
+  .home-feature{grid-column:span 6}
+  .home-feature--wide{grid-column:span 12;flex-direction:column;align-items:flex-start;gap:18px}
+  .home-arch-layers,.home-qs-grid,.home-stats-grid,.home-about-points{grid-template-columns:1fr}
+  .home-stat{padding:10px 0}
+  .home-nav-links{display:none}
+  .hamburger{display:grid}
+  .home-nav.nav-menu-open .home-nav-links{
     display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;
     background:var(--home-bg);border-bottom:1px solid var(--home-border);padding:12px 20px 18px;gap:2px;
     box-shadow:var(--home-shadow);
   }
-  .home-new .about .about-card{padding:32px 24px}
+  .home-about .home-about-card{padding:32px 24px}
 }
 @media (max-width:560px){
-  .home-new .feature{grid-column:span 12}
-  .home-new .section{padding:68px 0}
-  .home-new .hero-actions .btn{width:100%;justify-content:center}
-  .home-new .footer-inner{flex-direction:column;align-items:flex-start}
+  .home-feature{grid-column:span 12}
+  .home-section{padding:68px 0}
+  .home-hero-actions .home-btn{width:100%;justify-content:center}
+  .home-footer-inner{flex-direction:column;align-items:flex-start}
 }
 @media (prefers-reduced-motion:reduce){
-  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
-  .home-new .reveal{opacity:1;transform:none}
-  .home-new .terminal-body .ln{opacity:1;transform:none}
+  .home-root *,.home-root *::before,.home-root *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
+  .reveal{opacity:1;transform:none}
+  .home-terminal-body .ln{opacity:1;transform:none}
 }
 </style>
diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index eba373c..86670b8 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -1,21 +1,16 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
 import { useRoute } from 'vitepress'
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, watch, onUnmounted } from 'vue'
 import Home from './Home.vue'
 
 const route = useRoute()
 const isHome = computed(() => route.path === '/' || route.path === '/index.html')
 
-function applyLayout() {
-  if (isHome.value) {
-    document.documentElement.classList.add('home-layout')
-  } else {
-    document.documentElement.classList.remove('home-layout')
-  }
-}
+watch(isHome, (val) => {
+  document.documentElement.classList.toggle('home-layout', val)
+}, { immediate: true })
 
-onMounted(applyLayout)
 onUnmounted(() => {
   document.documentElement.classList.remove('home-layout')
 })
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
index e2ea0ca..ea75057 100644
--- a/.vitepress/theme/custom.css
+++ b/.vitepress/theme/custom.css
@@ -552,3 +552,17 @@
     padding: 22px 18px 18px !important;
   }
 }
+
+/* ============ HOME LAYOUT OVERRIDES ============ */
+/* Hide VitePress default nav and footer on custom homepage */
+html.home-layout .VPNav {
+  display: none !important;
+}
+
+html.home-layout .VPFooter {
+  display: none !important;
+}
+
+html.home-layout .Layout {
+  padding-top: 0 !important;
+}
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
index 42fe9a9..094cbe0 100644
--- a/.vitepress/theme/index.js
+++ b/.vitepress/theme/index.js
@@ -1,4 +1,8 @@
 import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
 import './custom.css'
 
-export default DefaultTheme
+export default {
+  extends: DefaultTheme,
+  Layout
+}
diff --git a/index.md b/index.md
index 67ef038..5306e11 100644
--- a/index.md
+++ b/index.md
@@ -1,52 +1,5 @@
 ---
-title: MengStack - 企业级Go语言微服务开发框架 | 开源模块化开发底座
 layout: home
-
-hero:
-  name: MengStack
-  text: 企业级 Go 语言微服务开发框架
-  tagline: 面向云原生与 AI 时代的一站式全栈开发底座
-  actions:
-    - theme: brand
-      text: 快速开始
-      link: /guide/getting-started
-    - theme: alt
-      text: 在线演示
-      link: /demo
-    - theme: alt
-      text: GitHub
-      link: https://gitea.softunis.com/mengstack
-
-features:
-  - icon: 🧩
-    title: 全栈组件化集成
-    details: 内置前端模板、API 网关、分布式缓存、消息队列、定时任务等模块，生产验证，开箱即用
-    link: /guide/what-is-mengstack
-  - icon: ⚡
-    title: 零侵入依赖注入
-    details: 兼容 Wire 编译时注入与 uber-go/fx 运行时管理，按需切换，兼顾性能与便捷
-    link: /guide/dependency-injection
-  - icon: 🤖
-    title: AI 原生开发支持
-    details: 内置大模型调用、Agent 内存管理、向量数据库集成，快速落地智能业务场景
-  - icon: 🇳
-    title: 全链路国产化适配
-    details: 兼容国产操作系统、数据库、中间件，满足政企金融等保合规要求
-  - icon: 📚
-    title: 极低学习门槛
-    details: 统一代码规范与完善中文文档，新成员接入周期缩短 70% 以上
-    link: /guide/getting-started
-  - icon: 📊
-    title: 生产级可观测
-    details: 内置链路追踪、指标监控、日志聚合，无需额外搭建监控体系
-  - icon: 🔓
-    title: 完全开源开放
-    details: 核心代码 MIT 协议开源，无商业限制，社区持续迭代，可自由定制扩展
-    link: /community
+editLink: false
+lastUpdated: false
 ---
-
-## 关于 MengStack
-
-MengStack 是面向云原生与 AI 时代的一站式全栈开发底座，整合主流开源技术能力，为开发者提供开箱即用的组件化开发体验，大幅降低中大型项目的架构搭建成本，让团队专注于核心业务逻辑落地，无需重复造轮子。
-
-我们坚持全栈开源、无厂商锁定的设计理念，覆盖从前端交互、后端服务、数据治理到 AI 能力集成的全链路开发场景，适配国产化软硬件生态，为企业级项目提供稳定、高效、可扩展的技术支撑。