Guardnet 优势

使用 React + TypeScript 和 Tailwind CSS 构建单个区块。不使用额外库。完全适配移动端。黑色背景，白色文字。

## 全局前置条件

- 字体：`@import url(https://db.onlinewebfonts.com/c/e55e9079ee863276569c8a68d776ef04?family=Futura+Md+BT+Medium);`
- Body：`font-family: 'Futura Md BT Medium', system-ui, -apple-system, sans-serif; background-color: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`
- 区块位于黑色页面上的 `w-full max-w-[1400px]` 包裹容器内。

---

## BenefitsSection

容器：`relative w-full bg-black px-4 sm:px-6 md:px-10 py-12 sm:py-20`

### 区块标题

`text-white text-3xl sm:text-4xl md:text-5xl font-light text-center mb-12 sm:mb-24`，带 inline style `letterSpacing: '-0.04em'`

文本：**"核心优势"**

### 三列卡片网格

`grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4`

三张卡片共用：`relative h-[380px] sm:h-[460px] rounded-2xl bg-neutral-950 overflow-hidden`

---

#### 卡片 1：文字卡片（左侧）

额外 class：`p-6 sm:p-8`

**蓝色光斑：**`absolute top-1/2 -translate-y-1/2 -left-[420px] h-[460px] w-[460px] rounded-full bg-[#1e3a8a] blur-3xl opacity-40`

**内容包裹容器：**`relative z-10 flex flex-col h-full`

**标题：**`text-white text-xl sm:text-2xl font-light leading-tight`
文本（使用 `<br />` 分为两行）：
```
主动风险
侦测与响应
```

**正文段落：**`mt-12 sm:mt-20 text-[13px] sm:text-[14px] leading-relaxed text-white/70 font-light max-w-[280px]`
文本：**"防御平台持续观察带宽数据流、记录文件及设备行为，以发现可能预示防御失效的异常模式或离群情况。"**

---

#### 卡片 2：视频卡片（中间）

额外 class：`flex flex-col`（卡片本身不设 padding）

**顶部视频区域：**`relative w-full overflow-hidden`，带 inline style `height: '75%'`

- `<video>` 元素：`w-full h-full object-cover block`，属性：`autoPlay loop muted playsInline`
- **准确 URL：**`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260421_072701_f6a01abb-eb30-4559-9d6e-774362defbc3.mp4`
- **视频包裹容器内的底部渐隐叠加层：**`pointer-events-none absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent to-neutral-950`

**底部文字区域：**`flex-1 flex items-center justify-start p-6 sm:p-8`

**标题：**`text-white text-xl sm:text-2xl font-light leading-tight text-left`
文本（使用 `<br />` 分为两行）：
```
专业知识与行业
认知
```

---

#### 卡片 3：文字卡片（右侧）

额外 class：`p-6 sm:p-8`

**蓝色光斑：**`absolute -top-28 -right-28 h-56 w-56 rounded-full bg-[#1e3a8a] blur-3xl opacity-40`

**内容包裹容器：**`relative z-10 flex flex-col h-full`

**标题：**`text-white text-xl sm:text-2xl font-light leading-tight`
文本（使用 `<br />` 分为两行）：
```
主动风险
侦测与响应
```

**正文段落：**`mt-auto text-[13px] sm:text-[14px] leading-relaxed text-white/70 font-light max-w-[320px]`
文本：**"防御平台持续观察带宽数据流、记录文件及设备行为，以发现可能预示防御失效的异常模式或离群情况。"**

与卡片 1 的关键区别：此段落使用 `mt-auto` 将其固定在卡片**底部**，而卡片 1 使用 `mt-12 sm:mt-20` 将段落放在卡片**中部**。

---

## 配色参考

| 令牌 | Hex |
|---|---|
| 背景 | `#000000`（黑色） |
| 卡片表面 | `neutral-950`（Tailwind） |
| 光斑蓝 | `#1e3a8a` |
| 视频渐隐目标色 | `neutral-950`（与卡片背景一致） |
| 正文文字 | `white/70` |
| 标题文字 | `white` |

## 响应式断点

- 默认（移动端）：`< 640px`——卡片以单列堆叠
- `sm:` 位于 `640px`——卡片高度增加（460px），文字和 padding 增大
- `md:` 位于 `768px`——切换为三列网格布局

## 交互

- 无 hover 状态或 JavaScript 动画
- 所有动态效果均来自卡片 2 中循环播放的背景视频
- 视频底部的渐隐效果与 `neutral-950` 卡片表面无缝融合