数据信号

将此页面**像素级忠实**地复刻为单个静态 `index.html`（内联 CSS + JS，不使用框架）。精确匹配结构、文案、间距 token、玻璃效果、动效、字体和媒体。不要虚构额外的区块、统计数据、卡片或营销模块。仅包含占满整个视口的深色落地页——页面不可滚动（`html, body { overflow: hidden; background: #000 }`）。

## 产品 / 品牌
- 品牌：**Vantage**
- 文档标题：`Stop Digging Through Dashboards`
- 主题色：`#000000`
- `color-scheme: dark`
- 单一构图：全出血电影感背景 + 左侧 hero 内容组 + 右下角玻璃效果演示卡片。其他位置不要放置内嵌的 hero 媒体卡片。

## 精确的背景视频（强制）
全出血、边到边的背景必须是 **`<video>`**，而不是图片：

```html
<video class="background" autoplay muted loop playsinline disablepictureinpicture aria-hidden="true">
  <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260808_064556_051587f1-74a1-4336-8c05-4dde3594ed05.mp4" type="video/mp4">
</video>
```

`.background` 的 CSS：
- `position: absolute; inset: 0; z-index: -3; width/height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none`

在视频上方添加 `.screen::before` 暗角，设为 `z-index: -2`：
```css
background:
  linear-gradient(180deg, rgba(0,0,0,.03), transparent 24%, transparent 82%, rgba(0,0,0,.05)),
  radial-gradient(ellipse at 44% 54%, transparent 30%, rgba(0,0,0,.055) 100%);
```

## 字体（精确）
嵌入 / 使用以下两款可变字体（不要使用 Inter/Roboto/system UI）：

1. **Reference Sans** — `font-weight: 100 900` — 默认用于 UI / 正文 / 导航 / 按钮  
2. **Reference Display** — `font-weight: 400 900` — **仅用于标题**

`:root { font-family: "Reference Sans", Arial, sans-serif; }`

**标题（`.hero-title`）**：
- `font-family: "Reference Display", "Reference Sans", Arial, sans-serif`
- **`font-weight: 500`（medium）**——不要使用 bold，也不要使用 semibold
- `font-optical-sizing: auto`
- `letter-spacing: -2.1px`
- `-webkit-text-stroke: .12px currentColor`
- `white-space: nowrap`
- `text-shadow: 0 2px 2px rgba(0,0,0,.44)`

不要使用 Playfair Display。

## 精确文案（保留措辞，包括语法）
标题（两行）：
1. `Stop Digging` — 颜色 `#fff`，在 `.line-one` 上应用 `transform: scaleX(.775)`
2. `Through Dashboards.` — 颜色 `rgba(211, 207, 207, .78)`，在 `.line-two` 上应用 `transform: scaleX(.793)`

每行使用以下结构包裹：`<span class="line line-one|line-two"><span class="line-reveal">…</span></span>`，并在 `.line` 上设置 `transform-origin: left center`。

正文文案（精确保留，包括使用“bring”而不是“brings”，以及三个换行）：
```
Your metrics are scattered across a dozen dashboards.<br>
Vantage bring them into one clear signal, so every<br>
decision is backed by data you actually trust.
```
- 颜色 `rgba(226, 229, 228, .84)`
- `font-weight: 350`，`letter-spacing: .13px`
- 宽度 `clamp(390px, 31.67vw, 500px)`，`left: 1px`
- `text-shadow: 0 1px 3px rgba(0,0,0,.7)`

按钮 / 界面装饰文字：
- 导航：`Home`（激活）、`About`、`Services`、`Contact`
- 时间面板标签：`Timezone`
- 时间面板值：`9:47 PM  •  14 July 2026`（静态字符串）
- 页头 CTA：`Sign Up`
- 主 CTA：`Get Started`
- 演示卡片：`Watch Demo` + 播放控件 `aria-label="Play demo"`

## 布局架构
固定 `.viewport`（`inset: 0; isolation: isolate; background: #000`）。内部放置居中的 `.screen`，设置 `left/top: 50%; transform: translate(-50%,-50%); width/height: 100%; background: #000`。

### `.screen` 上的桌面端 CSS 变量（精确）
```css
--gutter-start: clamp(36px, 4.177vw, 96px);
--gutter-end: clamp(36px, 4.04vw, 96px);
--header-top: clamp(20px, 2.264vh, 30px);
--hero-bottom: clamp(34px, 5.19vh, 64px);
--display-size: clamp(58px, 7.64vh, 88px);
--display-leading: clamp(72px, 9.34vh, 106px);
--copy-size: clamp(14px, 1.70vh, 19px);
--copy-leading: clamp(19px, 2.17vh, 24px);
--title-copy-gap: clamp(15px, 2.08vh, 24px);
--copy-cta-gap: clamp(24px, 3.11vh, 36px);
--cta-width: clamp(142px, 15.09vh, 168px);
--cta-height: clamp(38px, 3.96vh, 44px);
--compact-control-font-size: clamp(17px, 1.75vh, 19px);
--action-control-font-size: clamp(17px, 1.78vh, 19.5px);
--primary-control-font-size: clamp(17px, 1.77vh, 19.25px);
--control-inline-nudge: -1px;
--control-baseline-shift: clamp(1px, .19vh, 2px);
--copy-optical-shift: clamp(0px, .1vh, 1px);
--watch-baseline-shift: clamp(2px, .38vh, 4px);
--card-width: clamp(150px, 18.96vh, 215px);
```

### Header（顶部栏）
绝对定位：`inset: var(--header-top) var(--gutter-end) auto var(--gutter-start); height: 48px; display: flex; align-items: flex-start; white-space: nowrap`。

1. **品牌** — 25×25 SVG 圆盘 logo（clipPath 圆形），浅色表面搭配带棱角的菱形碎片（`#ededed` 底色，`#050606` / `#737778` / `#fafafa` / `#0a0b0b` paths）。`top: 10px`，drop-shadow `0 1px 2px rgba(0,0,0,.3)`。`aria-label="Vantage home"`。

2. **导航** — `margin-left: clamp(36px, 3.03vw, 48px); gap: clamp(32px, 2.9vw, 43px); top: 9px`。链接：`font-size: 16px; font-weight: 430; letter-spacing: -.36px; color: rgba(229,229,230,.77); text-shadow: 0 1px 3px rgba(0,0,0,.55)`。激活状态：`#fff` + 下划线 `::after`，宽度 `44px`、高度 `2px`、`background: rgba(255,255,255,.82)`。第一个链接 `top: -3px`；第四个链接 `margin-left: 1px`。

3. **时间面板** — `margin-left: auto; width: 211px; height: 48px; padding-left: 8px; border-left: 2px solid rgba(230,230,230,.52)`。标签 `15px / weight 420 / rgba(240,240,240,.77)`。值 `15px / weight 440 / rgba(255,255,255,.93)`。

4. **Sign Up** — 白色胶囊按钮 `109×42`，`border-radius: 7px`，`background: #fff`，`color: #101010`，`font-weight: 460`，`letter-spacing: -.34px`，阴影 `inset 0 1px 0 rgba(255,255,255,.72)` + `0 1px 5px rgba(0,0,0,.34)`，`margin-left: clamp(20px, 1.95vw, 29px)`。

5. **菜单切换按钮** — 桌面端设为 `display: none`；仅在 tablet/mobile 断点显示。双线 hamburger SVG；当存在 `.header.menu-open` 时变形为 X。

### Hero（左下角）
`.hero-content`：`position: absolute; left: var(--gutter-start); bottom: var(--hero-bottom); flex-column; align-items: flex-start`。

**主 CTA**（白色，不是玻璃效果）：
- 尺寸由 `--cta-width` / `--cta-height` 决定，`border-radius: 7px`，`background: #fff`，`color: #111`，`box-shadow: 0 1px 5px rgba(0,0,0,.38)`
- 标签绝对定位在 `left: 8.125%`，`font-weight: 450`，`letter-spacing: -.3px`
- 深色箭头框绝对定位为 `right: 3.125%; top: 14.286%; width: 20.625%; height: 71.429%; border-radius: 7px; background: #070909`，内含白色 stroke arrow SVG 14×14

### 演示卡片（右下角）— 玻璃效果
`.demo-card` 绝对定位为 `right: var(--gutter-end); bottom: var(--hero-bottom); width: var(--card-width); aspect-ratio: 201 / 265; container-type: inline-size`

玻璃外观（精确）：
```css
border: 1px solid rgba(255,255,255,.13);
border-radius: clamp(12px, 1.52vh, 18px);
background: linear-gradient(145deg, rgba(24,22,20,.80), rgba(5,12,14,.86));
box-shadow:
  0 2px 10px rgba(0,0,0,.44),
  0 0 0 3px rgba(255,255,255,.035) inset,
  0 0 0 1px rgba(0,0,0,.9);
backdrop-filter: blur(14px) saturate(108%);
```

内部：
- `.demo-visual` 方形缩略图区域使用 `cqw` 单位（`left/top 3.5/4 cqw`，`92.5×92 cqw`，`border-radius: 4cqw`，背景 `#101a1e`）
- 图片：抽象红蓝烟雾缩略图（`alt="Abstract red and blue smoke"`），filter `brightness(.89) saturate(.93) contrast(1.03)`——使用本地 `assets/watch-demo-thumbnail.png` 或等效的嵌入资源
- 居中的圆形玻璃播放按钮：`29cqw`，`border: 1px solid rgba(255,255,255,.34)`，`background: rgba(3,5,7,.47)`，`backdrop-filter: blur(4px)`，白色播放三角形 SVG
- `.watch-button` 位于视觉区域下方并占满宽度：玻璃渐变 `linear-gradient(145deg, rgba(26,34,36,.86), rgba(16,29,33,.9))`，边框 `rgba(255,255,255,.21)`，`font-weight: 430`，标签 `Watch Demo`

## 玻璃视觉语言（始终一致地复用）
深色半透明面板，具有：
- 细微的白色边框 `~rgba(255,255,255,.13–.21)`
- 约 145deg 的深青色 / 炭灰色线性渐变
- 内嵌发丝线高光
- `backdrop-filter: blur(14–18px) saturate(108–110%)`
应用于：演示卡片、观看按钮、播放按钮、tablet/mobile 菜单面板、菜单切换按钮。

## 入场动效（精确编排）
加载时（除非 `prefers-reduced-motion: reduce`）：
1. Head script 立即向 `<html>` 添加 `motion-pending`，并设置一个 **3500ms** 的后备 timeout 来移除它。
2. 在 `.motion-pending` 状态下：header/nav/time/sign-up/copy/cta/card 的初始 `opacity: 0`；标题行使用 overflow hidden 裁切；`.line-reveal` 从 `translate3d(0,110%,0) skewY(2deg)` 开始；copy/cta/card 带有轻微的向下位移 + 缩放偏移。
3. 动画（easing / duration / delay）：

| 元素 | Keyframes | Duration | Easing | Delay |
|---|---|---|---|---|
| brand | entrance-brand（淡入 + 向上 7px + scale .94→1） | 580ms | `cubic-bezier(.16,1,.3,1)` | 60ms |
| nav links | entrance-nav（淡入 + 向上 6px） | 480ms | 相同 | 130 / 175 / 220 / 265ms |
| time panel | entrance-nav | 520ms | 相同 | 180ms |
| sign up | entrance-action（淡入 + 向上 8px + scale .985） | 520ms | 相同 | 220ms |
| menu toggle | entrance-action | 520ms | 相同 | 140ms |
| title line 1 | entrance-line（110% + skewY 2° → 0） | 800ms | `cubic-bezier(.22,1,.36,1)` | 300ms |
| title line 2 | entrance-line | 850ms | 相同 | 440ms |
| hero copy | entrance-copy | 620ms | `.16,1,.3,1` | 740ms |
| primary CTA | entrance-action | 560ms | 相同 | 960ms |
| demo card | entrance-card（向上 12px + scale .968，origin 82% 50%） | 920ms | `.22,1,.36,1` | **1040ms** |

4. `.demo-card` 触发 `animationend` 时，移除 `motion-pending` 并清除后备 timeout。
5. Hover（允许动效时）：`button, a { transition: filter/opacity 140ms }` → hover `filter: brightness(1.08)`。
6. Focus-visible：`outline: 2px solid #fff; outline-offset: 3px`。

## 响应式行为（必须匹配）
### Tablet
`@media (min-width: 620px) and (max-width: 790px), (min-width: 620px) and (max-width: 1100px) and (orientation: portrait)`：
- 将 nav/time/sign-up 收起到 hamburger 下方的玻璃下拉面板（`#tablet-navigation`）中，默认关闭（`opacity 0; visibility hidden; transform translateY(-8px) scale(.985)`），通过 `.header.menu-open` 打开。
- 菜单切换玻璃按钮 46×46，`border-radius: 11px`，`backdrop-filter: blur(14px)`。
- 下拉菜单：`blur(18px)`，`border-radius: 16px`，宽度 `min(324px, calc(100vw - 2*gutter))`。
- JS：切换 `aria-expanded`；当切换按钮可见且导航关闭时，为 nav 设置 `inert`；按 Escape / 点击外部 / 点击链接时关闭；打开时聚焦第一个链接。

### Mobile
`@media (max-width: 619px)`：使用类似的 hamburger 玻璃菜单（`min(340px, …)`）；hero 使用 `--mobile-gutter` / safe-area insets 锚定在底部；标题缩放更紧凑（`scaleX(.78)` / `.55`）；隐藏文案中的 `<br>`（`display:none`）；演示卡片移至右上方（`top: clamp(176px, 32svh, 300px)`）。按照源文件添加短高度和 landscape-mobile 覆盖样式。

## DOM 骨架（精确层级）
```
main.viewport
  section.screen#screen
    video.background > source[CloudFront mp4 above]
    header.header
      a.brand > svg logo
      div.header-actions#tablet-navigation
        nav.nav > Home/About/Services/Contact
        div.time-panel > label + value
        button.sign-up
      button.menu-toggle
    section.hero
      div.hero-content
        h1.hero-title > two .line > .line-reveal spans
        p.hero-copy
        button.primary-cta > .label + .arrow-box
      article.demo-card
        div.demo-visual > img + button.play
        button.watch-button
```

## 不可协商项
- 背景视频使用上方**精确的 CloudFront MP4 URL**。
- 标题字体 = **Reference Display，weight 500**。
- UI 字体 = **Reference Sans**，使用列出的 fractional weights（430/420/440/460/450/350 等）。
- 玻璃演示卡片位于右下角；白色主 CTA 位于左下角文案下方。
- 使用上述 delay/easing 的一次性入场时间线。
- 不允许滚动，不添加额外区块，不使用紫色渐变，不使用 Inter。
- 保留静态 timezone 字符串和文案中的拼写“Vantage bring”。

实现为一个精致、可用于生产环境的单 HTML 文件，使其外观与这个 Vantage 落地页完全一致。