style(portal): 核心能力改为深色强调区块，并前移到产品功能之前

用户反馈"上方没有核心能力重点突出"。原因是原实现里
核心能力用的是 p-section--alt（浅灰底），而它相邻的产品功能是白底、
项目列表也是浅灰底，三者色阶接近，深色上没有形成视觉断点，
区块在页面里读起来和普通段落没有区别。

改动
- 新增 .p-section--deep 变体：浅色主题下用 #0d1220 近黑底 +
  顶部靛蓝径向光晕 + 一道渐变高光线，卡片改半透明白
- 核心能力改用该变体，并从产品功能之后移到之前：
  项目 → 核心能力（深色）→ 产品功能 → 界面预览
  深色块夹在项目列表与产品功能之间，形成明显的节奏断点
- 产品功能改用 p-section--alt，与前后白底交替
- 暗色主题下强调区不能用"压深"（页面底已是 #0c0f16），
  改用 #161b2c 冷灰蓝 + 更强光晕，靠提亮形成层次

验证
- 构建 13 页，256 条引用 0 失效
- 浏览器实测区块顺序：hero → projects → core → features → preview
  → foundation → howtheyfit → docs → cta
- 浅色 / 暗色两套主题均截图核对，强调区都能跳出来

.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;
+}