refactor(portal): 对齐 facms.cn 架构，区块顺序归位并撤掉深色块

对比 https://www.facms.cn 后调整三处结构性差异：

1. 顺序归位
   参考站是「产品功能 → 核心能力」，先讲做什么再讲凭什么。
   上一版我把核心能力提到前面并染成深色，属于人为制造差异。
   现在改回：项目 → 产品功能 → 核心能力 → 界面预览。

2. 撤掉深色块
   参考站全程浅色，靠留白与间距分段，没有深色区块打断。
   移除 .p-section--deep 的使用，核心能力回归 p-section--alt 浅灰，
   与前后白底交替，和整站色阶统一。
   （样式定义保留，后续需要强调区块时可用。）

3. 核心能力改标签切换
   参考站核心能力是一条「通用特性」+ 9 个产品分组的标签切换。
   新增 abilityGroups：通用底座 / iotLCM / 秀杰 DTU / XiuAdmin 四组，
   每组 6 项，复用 CapabilityTabs（加 source="home" 与 cols 参数）。
   替代原先 8 张平铺卡片。

4. 产品功能密度对齐
   参考站产品功能 9 张卡各带 6 项功能点。原先我们只有 3 张卡
   （每条产品线一张），信息密度偏低。
   拆成 9 张：卡与库存 / 通道与上游 / 资费与计费 / 组织与账号 /
   生产与研发 / 代理与客户 / 设备接入 / 中后台底座 / 开发效率。

验证
- 构建 13 页，274 条引用 0 失效
- 浏览器实测区块顺序：hero → projects → features → core → preview
  → foundation → how → docs → cta，无 .p-section--deep 残留
- 产品功能 9 卡、核心能力 4 标签每标签 6 卡
- 移动端 390px 无横向溢出

.vitepress/theme/components/HomePage.vue

@@ -70,35 +70,14 @@ 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 p-section--alt" id="features">
+    <section class="p-section" id="features">
       <div class="p-wrap">
         <header class="p-head">
           <span class="p-eyebrow">PRODUCT FEATURES</span>
-          <h2 class="p-title">三个产品线，各自覆盖一段完整业务</h2>
+          <h2 class="p-title">产品功能：一套系统覆盖完整业务</h2>
           <p class="p-desc">
-            iotLCM 管卡、秀杰 DTU 管设备、XiuAdmin 提供中后台底座。每条产品线的功能都在生产环境跑过，不是规划稿。
+            iotLCM 管卡、秀杰 DTU 管设备、XiuAdmin 提供中后台底座。按业务域拆开，每一块都在生产环境跑过。
           </p>
         </header>
 
@@ -115,6 +94,23 @@ 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>
+
+        <CapabilityTabs source="home" />
+      </div>
+    </section>
+
+
+
 
     <!-- 界面预览 -->
     <section class="p-section" id="preview">