提示词
使用静态 **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。原文提示词（English）
Rebuild this as a **single-viewport, full-bleed video-background landing page** using static **HTML + CSS + vanilla JS** (no framework). Match the current implementation exactly. File structure:
```
index.html
styles.css
main.js
assets/logo.webp
fonts/GeistPixel-Circle.woff2
```
Document title: `Intelligence Designed To Evolve`.
Body: black `#000`, `overflow: hidden`, height `100vh` / `100dvh`, Inter for UI, retro dot-matrix display font for headline + stat symbols. Antialiased text.
---
## Exact background video (required)
Full-viewport cover video behind all 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>
```
Use this **exact CloudFront URL**. Parent `.bg` is black `#000`, absolute inset 0, `overflow: hidden`.
---
## Fonts (exact)
**1. Inter** (UI) via Google Fonts: weights `400`, `500`, `600`
`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap`
Stack: `"Inter", "Segoe UI", system-ui, sans-serif`
**2. BubbledotICG-FinePos** (primary display — retro dot-matrix) via OnlineWebFonts CDN — **do not use local Bubbledot files**:
```html
<link
href="https://db.onlinewebfonts.com/c/8cb707a9b8a73f8a7403336b861c3074?family=BubbledotICG-FinePos"
rel="stylesheet"
/>
```
Family name exactly: `"BubbledotICG-FinePos"`
**3. Geist Pixel Circle** (fallback display only) local `@font-face`:
- `fonts/GeistPixel-Circle.woff2`
- weight 400, `font-display: swap`
- Display stack: `"BubbledotICG-FinePos", "Geist Pixel Circle", monospace`
**4. Font Awesome 6.5.2** (enterprise brand icons) from cdnjs:
```
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css
```
integrity:
`sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==`
---
## CSS variables (exact)
```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;
```
---
## Layout composition (one viewport, 3 vertical regions)
`.page`: flex column, centered, padding `clamp(16px, 2.4vh, 28px) clamp(14px, 3vw, 32px)`, height `100vh`/`100dvh`, overflow hidden.
1. **Header** (top, shrink 0)
2. **Hero** (flex 1, centered)
3. **Stats footer** (bottom, shrink 0)
Header / hero / stats / mobile menu: `z-index: 1` above video.
---
## 1) Header (desktop)
Centered row, max-width `720px`, gap `clamp(18px, 2.8vw, 28px)`.
### Logo
- Circular button `clamp(40px, 4.4vw, 46px)`, `border-radius: 50%`
- **White background `#fff`**
- Soft shadow `--nav-shadow`
- Image: `assets/logo.webp` (alt empty; width/height attrs 52)
- Icon **inside** scaled to **72%** width/height, `object-fit: contain`, centered with CSS grid (circle size unchanged)
- Hover: `scale(1.04)`
### Nav pill (white)
- White `#fff` pill, height `clamp(44px, 5.2vw, 48px)`, max-width `430px`, flex 1, padding `4px 8px`, radius 999, same soft shadow
- Links: **Home** (active), **Product**, **Case Studies**, **Contact**
- Inter 500, size `clamp(13px, 1.4vw, 15px)`, letter-spacing `-0.01em`, color `#2e2e2e`
- Default opacity `0.5`; hover `0.75`; active `1`
- Active indicator: three 3×3px black dots under label via `::after` + box-shadow offsets `-5px` / `+5px`, bottom `5px`
### Sign in
- Dark pill `#28282a`, text `#c8c8c8`, same height as nav, radius 999, soft shadow
- Hover: bg `#323234`, text `#fff`, `translateY(-1px)`
### Entrance animation
Header: `slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both`
(from opacity 0, `translateY(-18px)` → settled)
---
## 2) Hero (center)
Column, text-center, max-width `900px`.
### Trust row (“Trusted by 2000+ Enterprises”)
- Inline flex; `--trust-size: clamp(36px, 4.5vw, 42px)` (34px at ≤420px)
- Margin-bottom `clamp(16px, 2.5vh, 26px)`
- Stagger delay `--d: 0.05s`
**Three overlapping avatar rings** (not full solid white disks):
- Outer ring: size `--trust-size`, bg `#28282a`, border `1px solid rgba(255,255,255,0.4)`, **padding `5px`**
- Inner white circle fills the padded area (`border-radius: 50%`, bg `#fff`)
- Icons (black `#111`) via 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`
- Overlap: later avatars `margin-left: calc(var(--trust-size) * -0.42)`; z-index 1 / 2 / 4
- Hover lift: a1 `-2px`, a2 `-4px`, a3 `-2px` (0.35s)
**Trust pill** (overlaps last avatar):
- Same height as avatars, bg `#28282a`, border same as avatars, radius 999
- Left margin `-0.42 * trust-size`; left padding `0.58 * trust-size` so text clears overlap
- Text: `Trusted by 2000+ Enterprises` — Inter 500, `#c4c2c3`, size `clamp(12px, 1.4vw, 13.5px)` (12px on mobile)
### Headline
Exact two lines (each a `<span>` block):
```
Intelligence
Designed To Evolve
```
- Font: **BubbledotICG-FinePos** (retro dot-matrix) / Geist Pixel Circle fallback
- Solid **white** (NO gradient, NO shimmer/LED scan)
- Size desktop: `clamp(28px, 6.2vw, 80px)`
- Letter-spacing: **`-0.04em`** desktop; **`-0.08em`** ≤720px; **`-0.09em`** ≤420px
- Line-height 1.12 (1.05 / 1.04 on smaller breakpoints)
- `white-space: nowrap`, overflow hidden
- Per-line fade: opacity 0 + `translateY(14px)` → in via `headlineFade 0.85s cubic-bezier(0.22, 1, 0.36, 1)`
delays: line1 `0.12s`, line2 `0.3s`
(parent `.headline.anim` has no reveal animation itself)
### Subhead (exact copy)
```
Build applications that reason, adapt and collaborate using a modular
AI platform designed for production.
```
- Max-width `min(500px, 92%)`
- Font-size: `clamp(calc(13.5px + 2pt), calc(1.55vw + 2pt), calc(16.5px + 2pt))` ← base + **2pt**
- Color `#d0d0d0`, **opacity `0.8`**
- Line-height 1.55, weight 400
- Delay `--d: 0.28s`
### CTA
- Text: `Get Started`
- White pill, black text, Inter 600, size `clamp(13.5px, 1.5vw, 14.5px)`
- Padding `clamp(11px, 1.6vh, 13px) clamp(22px, 3vw, 28px)`, radius 999
- Soft white glow:
`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)` + stronger glow
- Entrance uses `revealPulse` (not plain reveal); delay `--d: 0.4s`
---
## 3) Stats footer (exact 4 metrics)
Grid 4 cols (2×2 on ≤720px), max-width `920px`. Each: icon (display font white) → counting value → muted label.
| Icon glyph | Target | Suffix | Decimals | Label |
|---|---|---|---|---|
| `<` | 120 | `ms` | 0 | Inference Time |
| `%` | 99.99 | `%` | 2 | Platform Uptime |
| `*` | 24 | `/7` | 0 | Autonomous Runtime |
| `#` | 2.4 | `M` | 1 | Context Windows |
- Icon size `clamp(22px, 3vw, 33px)`, **BubbledotICG-FinePos**
- Value: Inter, white, `clamp(18px, 2.2vw, 26px)`, letter-spacing `-0.025em`, tabular-nums
- Label: `#8e8e8e`, `clamp(11px, 1.2vw, 12.5px)`
- Stagger delays: `0.5s`, `0.58s`, `0.66s`, `0.74s`
- Count-up JS: easeOutCubic, duration `1500 + i*80`ms, start offset `480 + i*90`ms, once via IntersectionObserver threshold `0.25`
---
## Shared entrance animation
`.anim` elements:
- Start: opacity 0, `translateY(22px) scale(0.98)`, `blur(6px)`
- Animate: `reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards`
- Delay from inline `--d`
`prefers-reduced-motion: reduce`: kill animations; show final state; headline solid white.
---
## Mobile (≤720px) — exact behavior
- Hide desktop nav + desktop Sign in
- Header: space-between; logo 48×48 left; circular burger 48×48 right (`#28282a`, 3 white 18×1.5px bars)
- Burger open: white circle, bars → black X (translateY ±6.5px + rotate ±45°)
- Overlay: fixed full screen, `rgba(0,0,0,0.62)`, blur 6px, `overlayIn 0.28s`
- White sheet menu: centered under header, radius 28px, padding `22px 18px 20px`, shadow `0 20px 60px rgba(0,0,0,0.45)`, `menuIn 0.38s`
- Links: Home / Product / Case Studies / Contact + full-width Sign in; staggered `linkIn`; active three-dot indicator at bottom 8px
- JS: toggle `aria-expanded`, `hidden`, `body.menu-open`; close on overlay click, Escape, link click, resize >720
- Stats → 2 columns
Also: ≤420px headline/trust tweaks; ≤700px height tighten hero spacing.
---
## Visual / interaction constraints (do not deviate)
- **No cards** in hero; one composition; brand logo is a real circular mark, not text-only
- **No gradient animation** on headline — solid white only
- Display type is **BubbledotICG-FinePos** from OnlineWebFonts (retro dot-matrix), **not** local Bubbledot.woff/ttf
- Trust logos are **small white inner circles** inside dark padded rings (same size language as the old inner gradient dots), **not** full-bleed white outer circles
- Soft nav/logo shadow only: `0 4px 14px rgba(0,0,0,0.16)` (not heavy)
- Page must work on desktop and mobile; first viewport = header + trust + headline + subhead + CTA + stats over the looping CloudFront video
---
## Implementation stack
Plain `index.html` + `styles.css` + `main.js`. No React/build step required. Copy local `assets/logo.webp` and `fonts/GeistPixel-Circle.woff2`. Load **Inter**, **BubbledotICG-FinePos** (OnlineWebFonts), and **Font Awesome 6.5.2** from CDNs as specified. Use the **exact** CloudFront MP4 URL above for the background video.视频地址
