Agent Wave

精准复刻这个 **Vesper.ai** 单视口落地页。文档标题：`Vesper.ai — Operational AI Infrastructure`。`lang="en"`。使用一个包含内联 CSS 的 HTML 文件，并加入一个用于菜单和动画回退的小型 IIFE。纯黑色 `#000000`。除三项统计数据外，不要添加任何额外版块、卡片、表单、定价表或页脚。不要添加视频、WebGL、Three.js 或 Lottie。不要虚构 CloudFront URL。

立即强制显示黑色，确保页面绝不会闪白：

- 第一条 CSS 规则：`html, body { background: #000000 !important; color: #ffffff; }`
- Body 属性：`style="background:#000;color:#fff"`
- 然后再次设置：`html, body { background: #000000; background: var(--bg, #000000); color: #ffffff; color: var(--text, #ffffff); }`

---

### 字体（精确）

与 `index.html` 位于同一目录的自托管 WOFF2 文件：

```css
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-italic.woff2") format("woff2");
}
```

字体栈：

- UI / logo / nav / buttons / badge / lede / stats：`"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- **仅** H1 中的 `AI agents`：`"Instrument Serif", "Times New Roman", Times, serif`

如果这些文件缺失，加载以下完全一致的 Google Fonts CSS（仅包含 Inter variable roman + Instrument Serif italic）：

```
https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900&family=Instrument+Serif:ital@1&display=swap
```

Body：`-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative`。`html { scroll-behavior: smooth }`。通用重置：`box-sizing: border-box; margin: 0; padding: 0`。链接使用 `color: inherit; text-decoration: none`。按钮使用 `font-family: inherit`。

---

### 图片 / 资源 URL（精确——仅有这些）

**1. Herovide obackgorumf 100% opacity no overlay**  
相对文件，与 HTML 位于同一文件夹：

```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260818_072341_50851634-bbc3-4c33-9acc-7647d4db44aa.mp4
```

**3. Favicon（精确 data URI）**——与 logo 使用相同标志，白色：

```
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cg transform='rotate(-30 12 12)'%3E%3Ccircle cx='7.3' cy='3.2' r='1.45'/%3E%3Crect x='5.5' y='4.7' width='3.6' height='14.6' rx='1.8'/%3E%3Crect x='14.9' y='4.7' width='3.6' height='14.6' rx='1.8'/%3E%3Ccircle cx='16.7' cy='20.8' r='1.45'/%3E%3C/g%3E%3C/svg%3E
```

不要使用其他图片。其余所有图标均为内联 SVG。

---

### Tokens（默认 / ~1440px）

```
--bg: #000000
--text: #ffffff
--muted: #9a9a9a
--stat: #d8d8d8
--border: rgba(255, 255, 255, 0.16)
--border-soft: rgba(255, 255, 255, 0.12)

--logo: 15.5px
--logo-mark: 22px
--nav: 14px
--nav-h: 40px
--btn: 13.5px
--btn-h: 40px
--hero-btn-h: 42px
--h1: 48px
--lede: 15.5px
--badge: 12.5px
--stat-size: 13.5px
--header-y: 22px
--header-x: 40px
--stats-x: 72px
--stats-y: 36px
--hero-gap: 85px
--copy-max: 860px
--lede-max: 470px
```

---

### 图层顺序（后 → 前）

1. `html/body` 黑色  
2. `.hero-photo` + `::after` scrim  
3. `.page`——`position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh / 100dvh`  
4. `.grain` 位于 `z-index: 100`

Body 内部的标记顺序：

```
.grain
.hero-photo
.page
  .menu-backdrop
  header.header
  main.hero#top
  footer.stats
script
```

---

### Header——三列网格

`display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;`  
Padding：`var(--header-y) var(--header-x) 10px`。`z-index: 50; position: relative`。

**左侧——logo** `a.logo.appear.appear--scale` → `#top`，`aria-label="Vesper.ai"`。  
`display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-size: var(--logo); font-weight: 600; letter-spacing: -0.03em; color: #fff`。

标志 SVG 22×22，`viewBox="0 0 24 24"`，`fill="currentColor"`，group `transform="rotate(-30 12 12)"`：

- `circle cx="7.3" cy="3.2" r="1.45"`
- `rect x="5.5" y="4.7" width="3.6" height="14.6" rx="1.8"`
- `rect x="14.9" y="4.7" width="3.6" height="14.6" rx="1.8"`
- `circle cx="16.7" cy="20.8" r="1.45"`

字标：`Vesper` + `<span class="logo-suffix">.ai</span>`，使用 `font-weight: 400`。

**中间——nav** `#site-nav`，`aria-label="Primary"`，`display: flex; align-items: center; gap: 8px; justify-self: center`。

| 文案 | href | appear class |
|---|---|---|
| Benefits | `#benefits` | `appear--scale` |
| How It Works | `#how-it-works` | `appear--soft` |
| FAQs | `#faqs` | `appear--scale` |
| Pricing | `#pricing` | `appear--soft` |

每个链接都是一个 **liquid-metal pill**：`height: var(--nav-h); padding: 0 18px; border-radius: 7px; overflow: hidden; position: relative;`  
`border: 1px solid rgba(198,198,198,0.55)`  
`background: linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%)`  
颜色 `#f3f3f3`，`font-size: var(--nav)`，字重 400，`letter-spacing: -0.01em`，`white-space: nowrap`。  
过渡：`background / border-color / box-shadow 0.35s ease`。

高光 `::before`：`linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%)`，静止时为 `translateX(-120%)`，hover 时在 `0.6s ease` 内变为 `translateX(120%)`。

Hover：边框 `rgba(235,235,235,0.9)`，渐变 `#111 → #3a3a3a 45% → #6a6a6a`，光晕 `0 0 18px rgba(200,210,230,0.18)`。

**右侧——header CTA：** `a.btn.btn-solid.header-cta.appear.appear--scale`，文案 “Start for Free” → `#start`，`justify-self: end`。

**Burger**（≥901px 时隐藏，`display: none` → 在手机上使用 `display: grid`）：42×42，`border-radius: 6px`，`border: 1px solid var(--border)`，`background: rgba(8,8,8,0.55)`，`z-index: 60`，`aria-controls="site-nav"`，`aria-expanded="false"`，label “Open menu”。三条白色横线均为 16×1.5px，间距 5px，`border-radius: 1px`。Hover：边框 `rgba(255,255,255,0.32)`，背景 `rgba(255,255,255,0.05)`。打开时（`body.menu-open`）：第 1 条横线 `translateY(6.5px) rotate(45deg)`，第 2 条横线 `opacity: 0`，第 3 条横线 `translateY(-6.5px) rotate(-45deg)`，时长 0.25s / 0.2s。

---

### 按钮（共享 liquid-glass 视觉语言）

`.btn`：`position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 16px; border-radius: 6px; font-size: var(--btn); font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer`。background、border、shadow、color、filter 的过渡均为 0.35s。

高光 `::after`：`linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 48%, transparent 76%)`，静止时为 `translateX(-130%)`，hover 时在 `0.65s ease` 内变为 `translateX(130%)`。

**Solid：**  
`background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%)`  
`color: #111; border: 1px solid #fff`  
`box-shadow: inset 0 1px 0 rgba(255,255,255,0.95)`  
Hover：`#fff → #f3f6ff 42% → #d5def2`，边框 `#f2f6ff`，  
`inset 0 1px 0 #fff, 0 0 22px rgba(186,208,255,0.35), 0 8px 18px rgba(255,255,255,0.12)`

Hero solid 的 hover 光晕略强：`0 0 26px rgba(186,208,255,0.4), 0 8px 18px rgba(255,255,255,0.14)`。

**Ghost（header-level）：**  
`background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.45) 50%, rgba(160,175,200,0.08))`  
`color: #fff; border: 1px solid rgba(198,198,198,0.45)`  
`box-shadow: inset 0 1px 0 rgba(255,255,255,0.12)`  
Hover：`rgba(210,225,255,0.18) → rgba(0,0,0,0.35) 48% → rgba(180,195,220,0.16)`，边框 `rgba(220,230,255,0.75)`，  
`inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(170,200,255,0.22)`

**Hero ghost**（更强的磨砂效果）：  
`background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 46%, rgba(150,170,200,0.1))`  
`border: 1px solid rgba(198,198,198,0.55)`  
`backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)`  
Hover 光晕 `0 0 24px rgba(170,200,255,0.28)`，边框 `rgba(220,230,255,0.8)`。

Hero 操作按钮：高度 `var(--hero-btn-h)`，padding `0 18px`。

---

### Hero（底部居中，不要垂直居中）

`.hero`：`display: flex; align-items: flex-end; justify-content: center; padding: 8px 24px var(--hero-gap); min-height: 0`。

`.hero-copy`：`position: relative; z-index: 1; flex-direction: column; align-items: center; text-align: center; max-width: var(--copy-max); width: 100%`。

**Badge** `.badge.appear.appear--pop`——文案 `Operational AI Infrastructure`  
`inline-flex; gap: 8px; margin-bottom: 22px; padding: 9px 15px; border: 0; border-radius: 5px`  
`background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%)`  
颜色 `#f2f2f2`，`font-size: var(--badge)`，字重 400，`letter-spacing: -0.01em`。

闪光 SVG 18×20，白色，`filter: drop-shadow(0 0 3px rgba(255,255,255,0.45))`，path：

```
M12 2.6C12.55 2.6 12.88 3.15 13.08 4.7c.62 4.7 1.52 5.6 6.22 6.22 1.55.2 2.1.53 2.1 1.08s-.55.88-2.1 1.08c-4.7.62-5.6 1.52-6.22 6.22-.2 1.55-.53 2.1-1.08 2.1s-.88-.55-1.08-2.1c-.62-4.7-1.52-5.6-6.22-6.22C3.15 12.88 2.6 12.55 2.6 12s.55-.88 2.1-1.08c4.7-.62 5.6-1.52 6.22-6.22C11.12 3.15 11.45 2.6 12 2.6Z
```

**H1** 使用两行遮罩文本，Inter 500，`letter-spacing: -0.045em`，`line-height: 1.12`，`#fff`，纵向排列，居中：

- 第 1 行：`Train <em>AI agents</em> on your`
- 第 2 行：`workflows in minutes.`

`.headline-line`：`display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em`。  
`em`：Instrument Serif italic 400，`font-size: 1.08em`，`letter-spacing: -0.03em`，颜色为 **`#9a9a9a`**（不是白色）。

**Lede** `.lede.appear.appear--soft`，`max-width: var(--lede-max)`，`margin-top: 18px`，颜色 `#9a9a9a`，`15.5px`，字重 400，`line-height: 1.55`，`letter-spacing: -0.015em`：

`Deploy adaptive AI agents that learn, execute, and scale operational tasks across your business.`

**操作区** `.hero-actions`：flex、允许换行、居中，间距 `10px`，`margin-top: 26px`。

1. Solid `.appear.appear--btn`：`Start for Free` → `#start`  
2. Ghost `.appear.appear--side`：`See it in action` → `#demo`

---

### Stats footer

`.stats`：flex，`align-items: center; justify-content: space-between; gap: 24px;`  
padding 为 `0 var(--stats-x) var(--stats-y)`，并设置 `padding-bottom: max(var(--stats-y), env(safe-area-inset-bottom))`，颜色 `#d8d8d8`。

每个 `.stat.appear.appear--stat`：`inline-flex; align-items: center; gap: 14px; font-size: var(--stat-size); letter-spacing: -0.015em; white-space: nowrap`。图标 20×20（`#e8e8e8`）。宽头像图标 38×21。

**1. Dual-pill / workflow icon**（`viewBox="0 0 24 24"`）：  
左侧 rect `x=3.4 y=2.6 w=7.2 h=18.8 rx=3.6`，填充线性渐变 `#ffffff@0.38 → #3a3a3a@0.62`（`x1=3 y1=2 x2=14 y2=22`）。  
右侧 rect `x=13.4 y=2.6`，尺寸相同，使用反向渐变 `#3a3a3a@0.38 → #ffffff@0.62`。  
连接部分 `x=9.2 y=10.9 w=5.6 h=2.2 rx=1.1`，填充 `#4a4a4a`。  
文案：`4.2M+ workflows automated`

**2. Download tile：** 白色圆角方块 `x=2.4 y=2.4 w=19.2 h=19.2 rx=6.2`，填充 `#ffffff`。箭头为 `#111`，stroke-width `1.85`，端点为 round：竖线 `M12 7.1v7.4`，折线 `M8.15 12.35L12 16.2l3.85-3.85`。  
文案：`92% reduction in manual operations`

**3. 三个头像**（`viewBox="0 0 40 22"`，class `stat-icon-wide`）：  
- 深色圆形 `cx=10.2 cy=11 r=9.2`，颜色 `#2b2b2b` + 浅色椭圆脸部 `cx=10.2 cy=12.1 rx=4.15 ry=3.7`，颜色 `#f4f4f4` + 两个耳朵三角形 + 眼睛 `r=0.7`，颜色 `#1a1a1a`  
- 白色圆形 `cx=20.2`，颜色 `#ffffff` + 黑色眼睛 `r=1.7` + 鼻子椭圆 + 微笑 path，stroke `#111`，宽度 `1.2`  
- 橙色圆形 `cx=30.2`，颜色 `#f26b1d` + 白色 Inter 700 字符 `e`，位于 `x=30.2 y=15.1 font-size=12.5 text-anchor=middle`  
文案：`180+ operational teams onboarded`

---

### 入场动画（精确）

`.appear` 静止时的 opacity 为 **1**（这样即使动画失败，页面也绝不会空白）。  
`animation-duration: 1.05s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-delay: var(--d, 0.08s)`。  
`both` 会在延迟期间应用 0% keyframe，因此动画运行时，元素仍会先隐藏再淡入。

在每个元素自身的 `animationend` 事件中添加 `.is-in`（`animation: none; opacity: 1; transform: none; clip-path: none; filter: none`）。对 `.hero-photo.is-in` 也做相同处理。

JS 回退：经过两次 `requestAnimationFrame` 后，如果 `el.getAnimations()` 中没有状态为 `running` 或 `finished` 的动画，则为每个 `.appear` 和 `.hero-photo` 添加 `.is-in`。

| 元素 | Modifier | `--d` |
|---|---|---|
| Logo | `appear--scale` | 0.08s |
| Nav 1 Benefits | `appear--scale` | 0.16s |
| Nav 2 How It Works | `appear--soft` | 0.28s |
| Nav 3 FAQs | `appear--scale` | 0.40s |
| Nav 4 Pricing | `appear--soft` | 0.52s |
| Header CTA + burger | `appear--scale` | 0.34s |
| Badge | `appear--pop` | 0.22s |
| H1 第 1 行 | `appear--mask` | 0.42s |
| H1 第 2 行 | `appear--mask` | 0.62s |
| Lede | `appear--soft` | 0.82s，持续时间 **1.25s** |
| Solid CTA | `appear--btn` | 0.96s |
| Ghost CTA | `appear--side` | 1.10s |
| Stat 1 | `appear--stat` | 1.12s |
| Stat 2 | `appear--stat` | 1.28s |
| Stat 3 | `appear--stat` | 1.44s |

Keyframes（全部结束于 opacity 1 / identity transform）：

- `in-scale`：`opacity 0, scale(0.84)` → 1  
- `in-soft`：`opacity 0, translateY(14px)` → 0  
- `in-mask`：`opacity 0, translateY(40%)` → 0（由 `.headline-line` 的 overflow 裁剪）  
- `in-pop`：0 时为 `scale(0.9)` → 70% 时为 `scale(1.03)` → 100% 时为 `scale(1)`  
- `in-btn`：`translateY(18px) scale(0.94)` → 静止状态  
- `in-side`：`translateX(22px)` → 0  
- `in-stat`：`translateY(20px)` → 0  
- `.badge-star` 上的 `in-star`，`0.9s`，延迟 `0.28s`，both：`scale(0.2) rotate(-50deg)` → 65% 时 `scale(1.2) rotate(8deg)` → 静止状态  
- `h1 em` 上的 `in-em`，`1.2s`，延迟 `0.72s`，both：`opacity 0.35; filter: blur(4px)` → 清晰状态  

`prefers-reduced-motion: reduce`：对 `*, *::before, *::after` 使用 `transition: none !important; animation: none !important`。强制 `.appear, .hero-photo, .hero h1 em, .badge-star` 使用 `opacity: 1; transform: none; clip-path: none; filter: none`。

---

### 响应式（照抄这些断点）

**≥1600：** logo 17 / mark 24 / nav 15 / nav-h 44 / btn 15 / btn-h 44 / hero-btn 48 / h1 **64** / lede 18 / badge 13.5 / stat 15 / header 28×64 / stats 96×44 / copy 980 / lede-max 540。Nav pad `0 20px`。Badge mb 26，lede mt 22，actions mt 30，gap 12。Icons 22，wide 45×24。

**≥1920：** logo 18 / mark 26 / nav 16 / nav-h 48 / btn 16 / btn-h 48 / hero-btn 52 / h1 **76** / lede 20 / badge 14.5 / stat 16 / header 32×80 / stats 120×52 / copy 1120 / lede-max 620。Nav gap 10，pad `0 22px`。Buttons pad `0 22px`。Badge pad `10px 15px`。Wide icon 48×26。

**≥2560：** h1 **88**，lede 22，header-x 120，stats-x 160，copy 1280，lede-max 680。

**1280–1599：** h1 54，lede 16，header-x 48，stats-x 80，copy 900。

**901–1279：** logo 15，nav 13，nav-h 36，btn 13，btn-h 38，hero-btn 40，h1 **42**，lede 15，badge 12，stat 12.5，header 16×28，stats 36×28，hero-gap 64，copy 760，lede-max 440。Nav pad `0 14px`。Badge mb 16，lede mt 14，actions mt 20。

**≥901 且 max-height 850：** header-y 14，stats-y 24，hero-gap 48，h1 40；badge mb 12，lede mt 12，actions mt 16。

**≥901 且 max-height 720：** h1 34，lede 14，hero-gap 32，stats-y 18，nav-h 30，btn-h 34，hero-btn 36，badge mb 8。

**≥901 desktop lock：** `html, body { height: 100%; overflow: hidden }`。`.page { height: 100vh / 100dvh; overflow: hidden }`。单帧，**不可滚动**。

**≤900 手机：** 不使用 100vh lock；`html/body` 使用 `height: auto; overflow-y: auto`。Header 使用 `grid-template-columns: 1fr auto auto`，gap 8，采用 safe-area padding。Logo / CTA / burger 使用 `z-index: 80`。显示 Burger。

全屏菜单：`.menu-backdrop` 使用 `display: block; position: fixed; inset: 0; z-index: 40; background: rgba(8,8,8,0.42)`，静止时为 `opacity: 0; visibility: hidden`。打开时 opacity 1 + **`backdrop-filter: blur(24px)`**，时长 0.28s。Nav 变为全视口纵向布局，`z-index: 45`，背景透明，居中，gap 12，padding `96px 22px 32px`，同时使用 `padding-top: max(96px, calc(env(safe-area-inset-top) + 88px))`。链接占满宽度，高度 56，`font-size: 19px`，`border-radius: 10px`。按 Escape / 点击 nav / resize 到 ≥901 时关闭。切换 `aria-expanded` 和 label Open/Close menu。`body.menu-open { overflow: hidden }`。

Hero pad `20px 20px 64px`，仍使用 `align-items: flex-end`。Stats **纵向排列**，居中，gap 16，`white-space: normal`。Copy/lede 的 max-width 为 100%。Tokens：logo 16，btn 15 / 46，hero-btn 48，h1 **36**，lede 16.5，badge 13.5，stat 15，header 16×18，stats 20×28，hero-gap 36。

**≤560：** h1 34，lede 16，header-x 16。Hero actions **纵向排列**，按钮使用 `width: 100%`。

---

### JS（仅限以下内容）

1. 每个 `.appear` → 自身的 `animationend` → 添加 `is-in`（`once: true`）。  
2. 如果经过两次 rAF 后动画仍未运行，则强制为所有 `.appear` 和 `.hero-photo` 添加 `.is-in`。  
3. Burger 切换 `body.menu-open`。  
4. 点击 Nav 链接和按 Escape 时关闭菜单。  
5. Resize 到 `(min-width: 901px)` 时关闭菜单。

---


---