增长决策

**精确复刻这个单页 SaaS hero。不要虚构额外区块、额外页面、额外图片或额外文案。只实现已指定的内容。技术栈：一个 `index.html`、一个 `styles.css`、一个 `main.js`。不使用框架。**

### 这个页面是什么
这是 **Meridian — SaaS 营收智能** 的单个全视口落地页 hero。无页脚、无额外区块，桌面端不可滚动。白色页面，背景为全出血循环播放的绘画风海军蓝/橙色山脉视频。UI 使用直角（所有位置的 radius 均为 `0`）。字体为 Inter。布局是一个 3 行纵向结构：顶部导航、左对齐 hero、左下方引导文案。

页面标题：`Meridian — SaaS 营收智能`  
`html lang="en"`  
`meta viewport width=device-width, initial-scale=1.0`

---

### 精确资源（使用这些 URL，不要替换）

**Google Fonts — 仅使用 Inter，字重 300、400、500、600、700：**
```
https://fonts.googleapis.com
https://fonts.gstatic.com (preconnect, crossorigin)
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap
```

**背景视频（必须使用该 CloudFront URL，不要替换）：**
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260808_075824_7c8a2ef3-826c-43ca-81a1-162429faa306.mp4
```
使用 `<video class="bg-video" autoplay muted loop playsinline>`，其中包含一个 `<source type="video/mp4">`。无 poster。无 controls。

没有其他图片/视频资源。Logo 和箭头使用 inline SVG。

---

### 设计令牌（`:root`）
```
--bg: #ffffff
--text: #0a0a0a
--muted: #1a1a1a
--blue: #006cd2
--blue-dark: #0053a3
--headline-muted: #6b7378
--glass: rgba(0, 0, 0, 0.13)
--glass-blur: 18px
--glass-light: rgba(255, 255, 255, 0.28)
--radius: 0
--font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif
--pad-x: clamp(20px, 3.52vw, 64px)
--nav-top: clamp(16px, 2.05vw, 28px)
--btn-icon: 36px
--btn-pad-y: 12px
--btn-pad-x: 22px
```

全局：`box-sizing: border-box`，所有 margin/padding 均为 0。  
`html, body { height: 100%; overflow: hidden }`  
`body`：Inter、`--bg`、`--text`、`-webkit-font-smoothing: antialiased`、`-moz-osx-font-smoothing: grayscale`  
链接继承颜色，无下划线。按钮继承字体，无边框，鼠标指针为 pointer。

---

### 页面外壳
`.page` 为 `position: relative; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden`  
Padding：`var(--nav-top) var(--pad-x) clamp(28px, 4.9vw, 48px)`

`.bg` 为 `position: absolute; inset: 0; z-index: 0; background: #ffffff; pointer-events: none; overflow: hidden`  
`.bg-video` 为 `position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover`

`.nav`、`.hero`、`.lede`、`.mobile-menu` 均为 `position: relative; z-index: 1`

---

### 页头 / 导航
使用 3 列 CSS grid：`1fr auto 1fr`，项目垂直居中。

**左侧 — 链接玻璃胶囊**（`.nav__links`，`aria-label="Primary"`）：
- 链接（全部为 `href="#"`）：`平台` · `解决方案` · `公司` · `定价`
- 横向 flex，`gap: clamp(22px, 2.6vw, 32px)`，`justify-self: start`
- Padding `24px 34px`
- 背景 `var(--glass)`，`backdrop-filter: blur(18px)`（加 `-webkit-`），`border-radius: 0`
- 链接字体：`clamp(13px, 1.37vw, 15px)`，字重 `500`，字距 `-0.01em`，颜色 `#0a0a0a`，`line-height: 1`，不换行，`padding-bottom: 2px`
- Hover：颜色 `#006cd2`，`translateY(-2px)`，0.22s `cubic-bezier(0.16, 1, 0.3, 1)`
- 下划线条 `::after`：高 3px，`#006cd2`，`bottom: -6px`，全宽，从左侧开始 `scaleX(0)`，hover 时 `scaleX(1)`，0.28s，相同 easing

**中间 — logo**（`<a class="logo" href="#" aria-label="Meridian">`）：
Inline SVG，`viewBox="0 0 42 34"`，渲染宽度 `clamp(30px, 3.2vw, 38px)`，`fill: currentColor`（`#0a0a0a`）。六个平行四边形：

```
<polygon points="12,0 30,0 33.2,3.2 15.2,3.2" />
<polygon points="14.6,5.6 32.6,5.6 35.8,8.8 17.8,8.8" />
<polygon points="17.2,11.2 35.2,11.2 38.4,14.4 20.4,14.4" />
<polygon points="3.2,16.8 21.2,16.8 24.4,20 6.4,20" />
<polygon points="5.8,22.4 23.8,22.4 27,25.6 9,25.6" />
<polygon points="8.4,28 26.4,28 29.6,31.2 11.6,31.2" />
```

Hover：`scale(1.1)`，0.35s `cubic-bezier(0.16, 1, 0.3, 1)`  
每个 polygon：`transform-box: fill-box; transform-origin: left center`  
入场动画为 `mark-in` 0.5s，使用相同 easing 和 `backwards`：从 `opacity 0` + `translate3d(-12px, 8px, 0)` 开始  
延迟：0.04 / 0.09 / 0.14 / 0.19 / 0.24 / 0.29s

**右侧 — 导航栏 Book Demo**（`.btn.btn--nav`，`justify-self: end`）：
- 标签 `预约演示` + 36×36 图标方块
- 箭头 SVG `viewBox="0 0 20 20"`，path `M4 10h10.2M10.4 5.6 15.2 10l-4.8 4.4`，stroke 为 currentColor，宽度 1.7，端点/连接处为 round，无 fill。CSS 将 svg 尺寸设为 14×14。
- 背景 `#006cd2`，文字为白色
- 图标方块 `#0053a3`，白色箭头
- Hover 图标：白色背景，蓝色箭头
- Hover 擦除层 `::before` 填充 `#004a96`（见按钮）
- 入场：`wipe-right` 0.65s，延迟 0.16s，`backwards`

**Burger**（桌面端隐藏，≤820px 时显示）：
- 36×36，3 条横线：18×1.5px，`#0a0a0a`，间距 5px
- Hover：scale 1.08；横线变为 `#006cd2`；第一和第三条横线缩短至 14px
- `aria-label="Open menu"`、`aria-expanded="false"`、`aria-controls="mobile-menu"`
- JS 切换 `.is-open`、`aria-expanded`、Open/Close 标签以及 `#mobile-menu` 上的 `hidden`。按 Escape 或任意菜单链接都会关闭菜单。`.is-open` **没有 X-transform CSS**——横线始终保持 3 条。

**移动菜单**（`#mobile-menu`，默认 `hidden`）：
- 相同的 4 个链接 + 相同的 Book Demo 按钮
- 纵向排列，间距 1.25rem，padding `1.25rem 0 0.5rem`
- 链接容器：padding `16px 20px`，玻璃背景 + 18px 模糊，纵向间距 0.9rem，字体 1.05rem / 500

导航链接入场动画（`link-in` 0.55s，`backwards`）：从 `opacity 0` + `translate3d(-16px, 0, 0)` 开始  
延迟：平台 0.02s、解决方案 0.08s、公司 0.14s、定价 0.2s  
Burger 使用 `link-in` 0.5s，延迟 0.16s

---

### 按钮（共用）
所有 `.btn`：
- `inline-flex`，内容居中，**高度 58px**，`border-radius: 0`
- Padding `12px 10px 12px 22px`，间距 18px
- 字体 16px / 500 / 字距 `-0.015em` / line-height 1 / 不换行
- `::before` 为 absolute inset 0，从左侧开始 `scaleX(0)`，hover 时 `scaleX(1)`，0.4s `cubic-bezier(0.16, 1, 0.3, 1)`，`pointer-events: none`
- 标签和图标的 `z-index: 1`，位于擦除层之上

**`.btn--nav`：**蓝色 `#006cd2` / 白色；图标 `#0053a3`；擦除层 `#004a96`  
**`.btn--light`：**白色背景 / `#006cd2` 文字；图标为 `#006cd2`，箭头为白色；擦除层 `#e8f2fb`  
**`.btn--ghost`：**padding `12px 26px`（无图标）；颜色 `#0a0a0a`；背景 `rgba(255,255,255,0.55)`；模糊 24px；擦除层 `rgba(255,255,255,0.78)`，z-index 0。Hover 保持相同的 0.55 白色 + 24px 模糊。

---

### Hero（左侧列，不居中）
`.hero { margin-top: clamp(52px, 10.15vh, 92px); max-width: none }`

**徽章**（`.badge.wipe`，`--d: 0.18s`）：
- 文本必须完全为：`SaaS 营收智能`
- 左侧：14×14 白色方块，带 `2px solid #006cd2`（空白，无字形）
- `inline-flex`，间距 10px，高度 `clamp(34px, 3.6vw, 42px)`，padding `0 18px 0 14px`
- 背景 `rgba(255,255,255,0.28)`，`1px solid rgba(0, 108, 210, 0.2)`，模糊 18px
- 颜色 `#1a1a1a`，`clamp(13px, 1.35vw, 15px)`，字重 500，字距 `-0.01em`

**标题**（`h1.headline`）：
```
每个营收决策
都始于一个更好的问题。
```
两行遮罩文本（`.headline__mask` = `display:block; overflow:hidden`）：

1. `--d: 0.26s` → `每个营收决策` — 颜色 `#0a0a0a`
2. `--d: 0.4s` → `.headline__line` 不换行：
   - `.headline__muted` `都始于一个` — 颜色 `#6b7378`，字重 600
   - `.headline__accent` `更好的问题。`，带 `data-text="更好的问题。"`

字体：`font-size: calc(clamp(2.9rem, 5.9vw, 5rem) + 3px)`，字重 600，line-height 1.18，字距 `-0.038em`  
`.headline` 的 margin-top 为 `clamp(22px, 2.8vw, 36px)`

每个 `.headline__rise` 使用 `type-rise` 0.85s `cubic-bezier(0.16, 1, 0.3, 1)` `backwards`，延迟为 `var(--d)`：从 `translate3d(0, 118%, 0)` 到 0。

**强调文字涂绘动画（关键）：**  
基础 `.headline__accent` 为 `#6b7378`。通过 `content: attr(data-text)` 创建两个绝对定位的叠加副本：

- 从左到右的柔和遮罩：  
  `linear-gradient(90deg, #000 0%, #000 calc(100% - 72px), transparent 100%)`  
  起始 `mask-size: 0% 100%`，不重复
- `::before` 颜色 `#7eb6ee`，`accent-fill` 1.05s `cubic-bezier(0.4, 0, 0.2, 1)`，延迟 **0.7s**，forwards
- `::after` 颜色 `#006cd2`，相同动画，延迟 **1.08s**
- 最终状态：`mask-size: calc(100% + 72px) 100%`  
这是两遍擦除：先是浅蓝色，再是品牌蓝色，并带有 72px 的柔和前缘。

**操作按钮**（flex，间距 12px，margin-top `clamp(28px, 3.4vw, 42px)`）：
1. `.btn.btn--light.wipe` `--d: 0.56s` — `预约演示` + 相同的箭头图标
2. `.btn.btn--ghost.wipe` `--d: 0.66s` — `查看 Meridian 实际效果`（无图标）

`.wipe` = `wipe-left` 0.7s `cubic-bezier(0.16, 1, 0.3, 1)` `backwards`：`clip-path: inset(0 100% 0 0)` → `inset(0 0 0 0)`

---

### 底部引导文案
通过 `margin-top: auto` 固定，最大宽度 **700px**，overflow hidden。  
颜色为 **`#ffffff`**（位于深色山脉上）。  
`clamp(17px, 1.8vw, 20px)`，字重 **300**，line-height 1.5，字距 `-0.01em`

准确文案：
> Meridian 持续分析产品使用情况、客户行为和商业数据，以识别扩张机会、预测营收风险，并为你的团队推荐影响最大的行动。

内部 `.lede__rise` `--d: 0.78s` 使用 `type-rise` 0.9s，相同 easing，`backwards`。

---

### 动画时间线（页面加载）
| t | 内容 |
|---|---|
| 0.02s | 平台从左侧滑入 |
| 0.04–0.29s | 6 个 logo 条从左下方依次进入 |
| 0.08 / 0.14 / 0.20s | 解决方案 / 公司 / 定价 |
| 0.16s | Book Demo 从右侧擦入；burger 淡入 |
| 0.18s | 徽章从左向右擦入 |
| 0.26s | 第 1 行从遮罩下方向上升起 |
| 0.40s | 第 2 行升起 |
| 0.56s | 浅色 Book Demo 擦入 |
| 0.66s | Ghost 按钮擦入 |
| 0.70s | 浅蓝色 `#7eb6ee` 开始填充“更好的问题。” |
| 0.78s | 引导文案升起 |
| 1.08s | 品牌蓝 `#006cd2` 覆盖强调文字 |

所有入场动画均使用 `animation-fill-mode: backwards`。

**`prefers-reduced-motion: reduce`：**禁用所有列出的动画；恢复 opacity/transform/clip-path；强调文字变为纯色 `#006cd2`，且 `::before/::after` 为 `content: none`。

---

### 响应式
**≤820px：**
- `html, body { overflow: auto }`
- `.page` 高度为 auto，`min-height: 100vh / 100dvh`
- 隐藏 `.nav__links` 和桌面端 `.btn--nav`
- 导航 grid 为 `auto 1fr auto`；logo 使用 `justify-self: start`；显示 burger
- 将 `.mobile-menu` 显示为纵向 flex（仍通过 `[hidden]{display:none}` 隐藏）
- Hero margin-top 为 48px
- 标题为 `calc(clamp(2.75rem, 10vw, 3.85rem) + 3px)`
- 操作按钮允许换行
- 引导文案宽度 100%，最大 700px，margin-top 64px

**`max-height: 700px` 且 `min-width: 821px`：**
- Hero margin-top 为 36px
- 标题为 `calc(clamp(2.75rem, 7.2vh, 4.15rem) + 3px)`

---

### JS（`main.js`）
只使用 IIFE。查询 `.nav__burger` 和 `#mobile-menu`。按指定方式切换打开/关闭状态。不使用其他 JS。不使用视频 JS。不使用滚动库。不使用分析工具。

---

### 禁止事项
- 不要添加更多页面、区块、卡片、客户评价、定价表或页脚
- 不要使用圆角
- 不要将 Inter 替换为其他字体
- 不要更改 CloudFront mp4 URL
- 不要将 hero 居中
- 不要将引导文案设为深色文字
- 不要添加 poster 图片或颗粒叠加层（颗粒已包含在视频中）
- 不要使用其他 logo
- 除非已明确指定，否则不要添加 burger 到 X 的动画（此处未指定）

按 1:1 匹配。