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/CapabilityTabs.vue

@@ -1,10 +1,28 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { iotlcmGroups, dtuGroups, type CapGroup } from '../../../data/content'
+import {
+  iotlcmGroups,
+  dtuGroups,
+  abilityGroups,
+  type CapGroup,
+} from '../../../data/content'
 
-const props = defineProps<{ source?: 'iotlcm' | 'dtu' }>()
+const props = withDefaults(
+  defineProps<{
+    /** 数据源：iotlcm / dtu 用于项目详情页，home 用于首页核心能力 */
+    source?: 'iotlcm' | 'dtu' | 'home'
+    /** 三栏还是四栏 */
+    cols?: 3 | 4
+  }>(),
+  { source: 'iotlcm', cols: 3 }
+)
 
-const groups: CapGroup[] = props.source === 'dtu' ? dtuGroups : iotlcmGroups
+const groups: CapGroup[] =
+  props.source === 'dtu'
+    ? dtuGroups
+    : props.source === 'home'
+      ? abilityGroups
+      : iotlcmGroups
 
 const active = ref(groups[0]?.id ?? '')
 const current = computed(() => groups.find((g) => g.id === active.value) ?? groups[0])
@@ -28,8 +46,13 @@ const current = computed(() => groups.find((g) => g.id === active.value) ?? grou
 
     <p v-if="current" class="cap-intro">{{ current.intro }}</p>
 
-    <div v-if="current" :key="current.id" class="p-grid p-grid--3 cap-grid">
-      <div v-for="(item, i) in current.items" :key="item.title" class="p-card">
+    <div
+      v-if="current"
+      :key="current.id"
+      class="p-grid cap-grid"
+      :class="cols === 4 ? 'p-grid--4' : 'p-grid--3'"
+    >
+      <div v-for="(item, i) in current.items" :key="item.title" class="p-card ca-card">
         <span class="p-card-index">{{ String(i + 1).padStart(2, '0') }}</span>
         <h3 class="p-card-title">{{ item.title }}</h3>
         <p class="p-card-text">{{ item.text }}</p>
@@ -51,4 +74,11 @@ const current = computed(() => groups.find((g) => g.id === active.value) ?? grou
 .cap-grid {
   transition: opacity 0.2s ease;
 }
+
+@media (max-width: 720px) {
+  .cap-intro {
+    margin-bottom: 24px;
+    font-size: 14px;
+  }
+}
 </style>