AI 运行时

使用静态 **HTML + CSS + vanilla JS**（无框架），将其重建为一个**单视口、全出血视频背景落地页**。与当前实现完全一致。文件结构：

```
index.html
styles.css
main.js
assets/logo.webp
fonts/GeistPixel-Circle.woff2
```

文档标题：`Intelligence Designed To Evolve`。  
Body：黑色 `#000`、`overflow: hidden`、高度 `100vh` / `100dvh`，UI 使用 Inter，标题和统计符号使用复古点阵显示字体。文字开启抗锯齿。

---

## 精确背景视频（必需）

在所有 UI 后方放置覆盖整个视口的视频（`position: absolute; inset: 0; object-fit: cover; pointer-events: none; z-index: 0`）。

```html
<video class="bg-video" autoplay muted loop playsinline>
  <source
    src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260809_012548_ef22562c-c0ae-4816-ad9d-f8922af4e6a7.mp4"
    type="video/mp4"
  />
</video>
```

使用这个**完全一致的 CloudFront URL**。父级 `.bg` 为黑色 `#000`、absolute inset 0、`overflow: hidden`。

---

## 字体（精确）

**1. Inter**（UI），通过 Google Fonts 加载：字重 `400`、`500`、`600`  
`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap`  
字体栈：`"Inter", "Segoe UI", system-ui, sans-serif`

**2. BubbledotICG-FinePos**（主要显示字体——复古点阵），通过 OnlineWebFonts CDN 加载——**不要使用本地 Bubbledot 文件**：
```html
<link
  href="https://db.onlinewebfonts.com/c/8cb707a9b8a73f8a7403336b861c3074?family=BubbledotICG-FinePos"
  rel="stylesheet"
/>
```
字体名称必须完全是：`"BubbledotICG-FinePos"`

**3. Geist Pixel Circle**（仅作为显示字体后备），使用本地 `@font-face`：
- `fonts/GeistPixel-Circle.woff2`
- 字重 400，`font-display: swap`
- 显示字体栈：`"BubbledotICG-FinePos", "Geist Pixel Circle", monospace`

**4. Font Awesome 6.5.2**（企业品牌图标），来自 cdnjs：
```
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css
```
integrity：  
`sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==`

---

## CSS 变量（精确）

```css
--bg: #000000;
--text: #ffffff;
--muted: #8e8e8e;
--nav-text: #2e2e2e;
--pill-dark: #28282a;
--sign-in-text: #c8c8c8;
--nav-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
--trust-bg: #28282a;
--trust-border: rgba(255, 255, 255, 0.4);
--trust-text: #c4c2c3;
--font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
--font-display: "BubbledotICG-FinePos", "Geist Pixel Circle", monospace;
```

---

## 布局构成（一个视口，3 个垂直区域）

`.page`：flex column、居中、padding `clamp(16px, 2.4vh, 28px) clamp(14px, 3vw, 32px)`、高度 `100vh`/`100dvh`、overflow hidden。

1. **页眉**（顶部，shrink 0）  
2. **Hero**（flex 1，居中）  
3. **统计页脚**（底部，shrink 0）

页眉 / hero / 统计 / 移动端菜单：`z-index: 1`，位于视频上方。

---

## 1）页眉（桌面端）

居中横排，max-width `720px`，gap `clamp(18px, 2.8vw, 28px)`。

### Logo
- 圆形按钮 `clamp(40px, 4.4vw, 46px)`，`border-radius: 50%`
- **白色背景 `#fff`**
- 柔和阴影 `--nav-shadow`
- 图片：`assets/logo.webp`（alt 为空；width/height 属性为 52）
- 内部图标缩放至 **72%** 宽度/高度，`object-fit: contain`，使用 CSS grid 居中（圆形尺寸不变）
- Hover：`scale(1.04)`

### 导航胶囊（白色）
- 白色 `#fff` 胶囊，高度 `clamp(44px, 5.2vw, 48px)`，max-width `430px`，flex 1，padding `4px 8px`，radius 999，使用相同柔和阴影
- 链接：**首页**（激活）、**产品**、**案例研究**、**联系我们**
- Inter 500，字号 `clamp(13px, 1.4vw, 15px)`，letter-spacing `-0.01em`，颜色 `#2e2e2e`
- 默认 opacity `0.5`；hover `0.75`；激活 `1`
- 激活指示器：通过 `::after` 和 box-shadow 偏移 `-5px` / `+5px`，在标签下方显示三个 3×3px 黑点，bottom `5px`

### 登录
- 深色胶囊 `#28282a`，文字 `#c8c8c8`，高度与导航相同，radius 999，柔和阴影
- Hover：bg `#323234`，文字 `#fff`，`translateY(-1px)`

### 入场动画
页眉：`slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both`  
（从 opacity 0、`translateY(-18px)` → 最终位置）

---

## 2）Hero（居中）

纵向排列，文字居中，max-width `900px`。

### 信任行（“深受 2000+ 家企业信赖”）
- Inline flex；`--trust-size: clamp(36px, 4.5vw, 42px)`（≤420px 时为 34px）
- Margin-bottom `clamp(16px, 2.5vh, 26px)`
- 错开延迟 `--d: 0.05s`

**三个重叠的头像环**（不是完整的纯白圆盘）：
- 外环：尺寸 `--trust-size`，bg `#28282a`，border `1px solid rgba(255,255,255,0.4)`，**padding `5px`**
- 内部白色圆形填满留白区域（`border-radius: 50%`，bg `#fff`）
- 图标（黑色 `#111`）通过 Font Awesome brands 提供，font-size `calc(var(--trust-size) * 0.34)`：
  1. `fa-brands fa-microsoft`
  2. `fa-brands fa-amazon`
  3. `fa-brands fa-google`
- 重叠：后续头像使用 `margin-left: calc(var(--trust-size) * -0.42)`；z-index 1 / 2 / 4
- Hover 上浮：a1 `-2px`，a2 `-4px`，a3 `-2px`（0.35s）

**信任胶囊**（与最后一个头像重叠）：
- 高度与头像相同，bg `#28282a`，border 与头像相同，radius 999
- 左侧 margin `-0.42 * trust-size`；左侧 padding `0.58 * trust-size`，确保文字避开重叠区域
- 文字：`深受 2000+ 家企业信赖`——Inter 500，`#c4c2c3`，字号 `clamp(12px, 1.4vw, 13.5px)`（移动端为 12px）

### 标题
精确两行（每行一个 `<span>` block）：
```
智能
为进化而生
```
- 字体：**BubbledotICG-FinePos**（复古点阵）/ Geist Pixel Circle 后备
- 纯**白色**（无渐变、无闪光/LED 扫描）
- 桌面端字号：`clamp(28px, 6.2vw, 80px)`
- Letter-spacing：桌面端 **`-0.04em`**；≤720px 时 **`-0.08em`**；≤420px 时 **`-0.09em`**
- Line-height 1.12（较小断点为 1.05 / 1.04）
- `white-space: nowrap`，overflow hidden
- 逐行动画：opacity 0 + `translateY(14px)` → 通过 `headlineFade 0.85s cubic-bezier(0.22, 1, 0.36, 1)` 淡入  
  延迟：line1 `0.12s`，line2 `0.3s`  
  （父级 `.headline.anim` 本身没有 reveal 动画）

### 副标题（精确文案）
```
借助专为生产环境设计的模块化 AI 平台，构建能够推理、适应和协作的
应用程序。
```
- Max-width `min(500px, 92%)`
- Font-size：`clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt))`  ← 基础值 + **2pt**
- 颜色 `#d0d0d0`，**opacity `0.8`**
- Line-height 1.55，字重 400
- 延迟 `--d: 0.28s`

### CTA
- 文字：`开始使用`
- 白色胶囊，黑色文字，Inter 600，字号 `clamp(13.5px, 1.5vw, 14.5px)`
- Padding `clamp(11px, 1.6vh, 13px) clamp(22px, 3vw, 28px)`，radius 999
- 柔和白色光晕：
  `0 0 0 1px rgba(255,255,255,0.15), 0 0 22px rgba(255,255,255,0.32), 0 0 44px rgba(255,255,255,0.12)`
- Hover：`translateY(-2px) scale(1.02)` + 更强光晕
- 入场使用 `revealPulse`（不是普通 reveal）；延迟 `--d: 0.4s`

---

## 3）统计页脚（精确的 4 项指标）

4 列网格（≤720px 时为 2×2），max-width `920px`。每项：图标（白色显示字体）→ 计数值 → 柔和标签。

| 图标字形 | 目标值 | 后缀 | 小数位 | 标签 |
|---|---|---|---|---|
| `<` | 120 | `ms` | 0 | 推理时间 |
| `%` | 99.99 | `%` | 2 | 平台正常运行时间 |
| `*` | 24 | `/7` | 0 | 自主运行时间 |
| `#` | 2.4 | `M` | 1 | 上下文窗口 |

- 图标字号 `clamp(22px, 3vw, 33px)`，**BubbledotICG-FinePos**
- 数值：Inter、白色、`clamp(18px, 2.2vw, 26px)`、letter-spacing `-0.025em`、tabular-nums
- 标签：`#8e8e8e`，`clamp(11px, 1.2vw, 12.5px)`
- 错开延迟：`0.5s`、`0.58s`、`0.66s`、`0.74s`
- 计数 JS：easeOutCubic，duration `1500 + i*80`ms，start offset `480 + i*90`ms，通过 IntersectionObserver threshold `0.25` 仅执行一次

---

## 共享入场动画

`.anim` 元素：
- 起始：opacity 0，`translateY(22px) scale(0.98)`，`blur(6px)`
- 动画：`reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards`
- 延迟来自行内 `--d`

`prefers-reduced-motion: reduce`：禁用动画；显示最终状态；标题保持纯白。

---

## 移动端（≤720px）——精确行为

- 隐藏桌面端导航和桌面端登录
- 页眉：space-between；左侧 logo 48×48；右侧圆形 burger 48×48（`#28282a`，3 条白色 18×1.5px 横线）
- Burger 打开时：白色圆形，横线 → 黑色 X（translateY ±6.5px + rotate ±45°）
- 遮罩层：fixed 全屏，`rgba(0,0,0,0.62)`，blur 6px，`overlayIn 0.28s`
- 白色菜单面板：在页眉下方居中，radius 28px，padding `22px 18px 20px`，阴影 `0 20px 60px rgba(0,0,0,0.45)`，`menuIn 0.38s`
- 链接：首页 / 产品 / 案例研究 / 联系我们 + 全宽登录；错开的 `linkIn`；激活状态的三点指示器位于 bottom 8px
- JS：切换 `aria-expanded`、`hidden`、`body.menu-open`；点击遮罩层、按 Escape、点击链接或 resize >720 时关闭
- 统计 → 2 列

另外：≤420px 时调整标题/信任行；高度 ≤700px 时收紧 hero 间距。

---

## 视觉 / 交互约束（不得偏离）

- Hero 中**不要使用卡片**；保持单一构图；品牌 logo 是真实的圆形标记，不是纯文字
- 标题**不要使用渐变动画**——仅使用纯白色
- 显示字体是来自 OnlineWebFonts 的 **BubbledotICG-FinePos**（复古点阵），**不是**本地 Bubbledot.woff/ttf
- 信任 logo 是深色带 padding 圆环内的**小型白色内圆**（尺寸语言与旧版内部渐变圆点一致），**不是**铺满外圆的白色圆形
- 导航/logo 仅使用柔和阴影：`0 4px 14px rgba(0,0,0,0.16)`（不要使用重阴影）
- 页面必须在桌面端和移动端正常工作；首个视口 = 页眉 + 信任行 + 标题 + 副标题 + CTA + 统计，覆盖在循环播放的 CloudFront 视频上

---

## 实现技术栈

原生 `index.html` + `styles.css` + `main.js`。无需 React/构建步骤。复制本地 `assets/logo.webp` 和 `fonts/GeistPixel-Circle.woff2`。按指定方式从 CDN 加载 **Inter**、**BubbledotICG-FinePos**（OnlineWebFonts）和 **Font Awesome 6.5.2**。背景视频使用上述**完全一致的** CloudFront MP4 URL。