diff --git a/.gitignore b/.gitignore
index 2137b15..6315d6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ dist
 .vitepress/dist-build*
 .vitepress/final
 .vitepress/v2
+.vitepress/v3
diff --git a/.vitepress/theme/components/HomePage.vue b/.vitepress/theme/components/HomePage.vue
index 22099f7..3bbd436 100644
--- a/.vitepress/theme/components/HomePage.vue
+++ b/.vitepress/theme/components/HomePage.vue
@@ -70,8 +70,29 @@ import {
       </div>
     </section>
 
+    <!-- 核心能力 -->
+    <section class="p-section p-section--deep" id="core">
+      <div class="p-wrap">
+        <header class="p-head">
+          <span class="p-eyebrow">CORE CAPABILITIES</span>
+          <h2 class="p-title">工程层面的硬指标</h2>
+          <p class="p-desc">
+            功能列表谁都能写。这些是真正决定能不能上线、好不好维护的部分。
+          </p>
+        </header>
+
+        <div class="p-grid p-grid--4">
+          <div v-for="a in coreAbilities" :key="a.title" class="p-card ca-card">
+            <span class="ca-tag">{{ a.tag }}</span>
+            <h3 class="p-card-title">{{ a.title }}</h3>
+            <p class="p-card-text">{{ a.text }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- 产品功能 -->
-    <section class="p-section" id="features">
+    <section class="p-section p-section--alt" id="features">
       <div class="p-wrap">
         <header class="p-head">
           <span class="p-eyebrow">PRODUCT FEATURES</span>
@@ -94,26 +115,6 @@ import {
       </div>
     </section>
 
-    <!-- 核心能力 -->
-    <section class="p-section p-section--alt" id="core">
-      <div class="p-wrap">
-        <header class="p-head">
-          <span class="p-eyebrow">CORE CAPABILITIES</span>
-          <h2 class="p-title">工程层面的硬指标</h2>
-          <p class="p-desc">
-            功能列表谁都能写。这些是真正决定能不能上线、好不好维护的部分。
-          </p>
-        </header>
-
-        <div class="p-grid p-grid--4">
-          <div v-for="a in coreAbilities" :key="a.title" class="p-card ca-card">
-            <span class="ca-tag">{{ a.tag }}</span>
-            <h3 class="p-card-title">{{ a.title }}</h3>
-            <p class="p-card-text">{{ a.text }}</p>
-          </div>
-        </div>
-      </div>
-    </section>
 
     <!-- 界面预览 -->
     <section class="p-section" id="preview">
diff --git a/.vitepress/theme/styles/portal.css b/.vitepress/theme/styles/portal.css
index e2b4afc..b628980 100644
--- a/.vitepress/theme/styles/portal.css
+++ b/.vitepress/theme/styles/portal.css
@@ -919,3 +919,110 @@ html.dark .doc-project {
     display: none;
   }
 }
+
+/* ============================================================
+   强调区块 —— 深色底，用于需要跳出视觉节奏的区块
+   浅色主题下用近黑底，暗色主题下用略亮于页面底的深灰，
+   两种主题下都能形成明显层次，而不是和相邻区块同一色阶。
+   ============================================================ */
+.p-section--deep {
+  position: relative;
+  border-top: none;
+  background: #0d1220;
+  color: #e8edf7;
+  overflow: hidden;
+}
+
+.p-section--deep::before {
+  content: '';
+  position: absolute;
+  inset: -30% -10% auto;
+  height: 460px;
+  background: radial-gradient(46% 60% at 50% 0%, rgba(99, 102, 241, 0.28) 0%, transparent 72%);
+  pointer-events: none;
+}
+
+.p-section--deep > .p-wrap {
+  position: relative;
+}
+
+/* 强调区内的标题与正文反白 */
+.p-section--deep .p-eyebrow {
+  color: #a9b4ff;
+  background: rgba(129, 140, 248, 0.14);
+  border-color: rgba(129, 140, 248, 0.35);
+}
+
+.p-section--deep .p-title {
+  color: #f4f7fd;
+}
+
+.p-section--deep .p-desc {
+  color: #a8b4c9;
+}
+
+/* 强调区内的卡片：半透明白，压在深底上 */
+.p-section--deep .p-card {
+  background: rgba(255, 255, 255, 0.055);
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: none;
+}
+
+.p-section--deep .p-card:hover {
+  background: rgba(255, 255, 255, 0.075);
+  border-color: rgba(129, 140, 248, 0.5);
+  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
+}
+
+.p-section--deep .p-card-title {
+  color: #f0f4fb;
+}
+
+.p-section--deep .p-card-text {
+  color: #b0bccf;
+}
+
+.p-section--deep .ca-tag {
+  color: #b9c2ff;
+  background: rgba(129, 140, 248, 0.16);
+}
+
+/* 强调区顶部/底部加一道极细的高光线，强化分隔 */
+.p-section--deep::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.55), transparent);
+}
+
+/* 暗色主题下：页面底是 #0c0f16，强调区改用略亮的冷色并加强光晕，
+   靠"提亮"而不是"压深"来形成层次 */
+html.dark .p-section--deep {
+  background: #161b2c;
+}
+
+html.dark .p-section--deep::before {
+  height: 520px;
+  background: radial-gradient(52% 64% at 50% 0%, rgba(99, 102, 241, 0.34) 0%, transparent 70%);
+}
+
+html.dark .p-section--deep .p-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.11);
+}
+
+html.dark .p-section--deep .p-card:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(165, 174, 255, 0.55);
+}
+
+html.dark .p-section--deep .p-title {
+  color: #ffffff;
+}
+
+html.dark .p-section--deep .p-card-text {
+  color: #c2cbdb;
+}