宠物诊断

构建一个**完全自包含的单个 `index.html`** 文件。无需构建步骤、框架、外部
JS 或本地图像文件。所有 CSS 放在 `<head>` 内的一个 `<style>` 块中；在 `</body>`
前放置一个小型 `<script>`。严格匹配下文的每个数值——布局由测量数据驱动，而非
凭目测判断。

---

## 1. 资源（仅限远程资源——使用以下精确 URL）

**Hero video（桌面端，自动播放背景）——1928×1076、8.04 s、H.264 MP4、静音：**
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260814_034538_de4032ce-5035-473d-a5b1-0e2224635a6a.mp4
```

**Hero still（桌面端）——同时作为视频的 poster 和 reduced-motion 画面：**
```
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/193afe38-41fa-4454-9d48-ed154b66d17c.png
```

**Hero still（移动端，9:16 portrait crop）：**
```
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/44c2e930-23df-4ffb-98bc-02b0f7014028.png
```

**Open Graph 分享图：**
```
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/0308ea65-1b37-4171-80f8-7d2eaacf1280.png
```

四项资源呈现的是同一场景：一只金毛寻回犬躺在画面 left third of frame 的低矮深胡桃木狗床上，
头转向 camera；右侧有一位背对镜头的人，身穿橄榄绿色罗纹针织毛衣，坐在抛光混凝土地面上；
他们身后是黑色边框的落地窗，窗外可见虚化的金色山丘；最左侧边缘有一盆棕榈类室内植物。采用温暖的
late-afternoon grade。

---

## 2. 字体

Google Fonts，通过 `preconnect` 加载 `fonts.googleapis.com` 和 `fonts.gstatic.com`
（后者带有 `crossorigin`）：

```html
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
```

- **Instrument Serif 400**——仅用于标题。
- **Inter 400 / 500 / 600**——用于其他所有内容。
- 正文字体栈：`"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`
- 标题字体栈：`"Instrument Serif", Georgia, "Times New Roman", serif`
- 在 `body` 上启用 `-webkit-font-smoothing: antialiased` 和 `-moz-osx-font-smoothing: grayscale`。

---

## 3. Head

```
<title>Lume — 读取 120+ 项健康指标，由顶级兽医解读。</title>
meta description: 读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。与领先的兽医研究专家共同打造。
og:title:       Lume — 读取 120+ 项健康指标
og:description: 由顶级兽医提供指导。总价仅 $349。
og:image:       <上方的 OG url>
viewport:       width=device-width, initial-scale=1
```

---

## 4. 设计 token 与全局重置

```css
:root{ --cream:#eef0d0; --ink:#101010; }
*,*::before,*::after{ box-sizing:border-box; }
body{
  background:#0d0d0d;
  overflow-x:hidden;
  color:var(--ink);
}
```

`#eef0d0` 是用于高亮品牌列和主按钮的淡奶油色。
`#0d0d0d` 是 hero band 下方可见的近黑色页面底色。

---

## 5. 区块几何——full-bleed、fluid measure

页面是**一个 full-bleed hero band**。没有灰色页面边框、没有带 max-width 的页面
外壳、没有圆角，区块上也没有投影。

```css
.hero{
  position:relative;
  width:100%;
  height:min(92vh, 62vw);
  min-height:600px;
  overflow:hidden;
  isolation:isolate;
}
```

其内部由一个 **measure container** 容纳标题和表格。下方每个 `cqw`
值都以它为基准解析，而且它会随显示器增大，使字体在大屏幕上放大、在小屏幕上
缩小：

```css
.hero__inner{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  max-width:min(100%, clamp(1080px, 82vw, 1700px));
  margin-inline:auto;
  container-type:inline-size;
}
```

**nav 特意不放在 `.hero__inner` 内**——它是 `.hero` 的直接子元素，因此会像普通网站页眉一样
位于真正的页面边缘。其他所有内容都放在 measure 内。

最终字体比例（请对照这些数值验证）：

| Viewport | Measure | 标题 | 按钮 | 表格文字 |
|---|---|---|---|---|
| 1024 | 1024 | 20.8px | 10px | 9.4px |
| 1280 | 1080 | 21.9px | 10px | 9.9px |
| 1440 | 1181 | 24.0px | 10px | 10.9px |
| 1920 | 1574 | 32.0px | 12.4px | 14.5px |
| 2560+ | 1700 | 34.5px | 13.4px | 15.6px |

---

## 6. 媒体层

三个层叠元素，均为 `.hero__media`，全部使用绝对定位并覆盖容器：

```css
.hero__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  z-index:0;
  filter:saturate(1.06) contrast(1.04) brightness(.97);
}
.hero__media--mobile{ display:none; }
```

DOM 中的顺序：桌面端 `<img>`、移动端 `<img>`，然后是位于最上层的 `<video>`。

```html
<img class="hero__media hero__media--desktop" src="…193afe38….png"
     alt="一个人坐在阳光充足的客厅里，身旁是他们的金毛寻回犬"
     fetchpriority="high" decoding="async">
<img class="hero__media hero__media--mobile" src="…44c2e930….png"
     alt="" aria-hidden="true" decoding="async">
<video class="hero__media hero__media--desktop hero__video" src="…de4032ce….mp4"
       autoplay muted loop playsinline preload="auto" aria-hidden="true" tabindex="-1"></video>
```

视频初始时透明，只有在确实能够播放后才 cross-fades in，因此连接较慢时会显示静态图，
而不是黑帧：

```css
.hero__video{ opacity:0; transition:opacity .9s ease; }
.hero__video.is-ready{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } }
```

---

## 7. 叠加渐变

在 `.hero` 上仅使用一个 `::after`，设置 `z-index:1`、`pointer-events:none`，按以下顺序层叠
三层——两层用于保证文字可读性，一层暖色调用于统一 grade：

```css
background:
  linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.09) 20%, rgba(0,0,0,0) 38%),
  linear-gradient(to top,    rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 26%),
  linear-gradient(120deg,    rgba(120,64,18,.14), rgba(150,96,32,.10));
```

---

## 8. Nav

```css
.nav{
  position:absolute; top:0; left:0; right:0;
  z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2vw,34px) clamp(18px,3.2vw,56px);
}
.brand{
  display:flex; align-items:center; gap:.42em;
  color:#fff;
  font-size:clamp(15px,1.15vw,23px);
  font-weight:500;
  letter-spacing:-.014em;
  text-decoration:none;
}
.brand__mark{ width:1.02em; height:1.02em; flex:none; display:block; }
```

**品牌标志——一轮新月**（契合名称 "Lume"），16×16 viewBox，使用 `fill="currentColor"`
使其在 nav 中继承白色，在表格表头中继承近黑色：

```html
<svg class="brand__mark" viewBox="0 0 16 16" fill="none" aria-hidden="true">
  <path d="M11.35 1.55a7 7 0 1 0 0 12.9 7.65 7.65 0 0 1 0-12.9Z" fill="currentColor"/>
</svg>
```

文字标志：`Lume`。右侧：一个深色按钮，文字为 `立即开始`。

---

## 9. 按钮

```css
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:inherit; font-weight:500;
  letter-spacing:-.006em;
  border-radius:999px;
  transition:background-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--dark{                      /* nav */
  background:#0b0b0b; color:#fff;
  font-size:clamp(12px,.88vw,18px);
  padding:.86em 1.32em;
}
.btn--dark:hover{ background:#242424; }

.btn--cream{                     /* hero 中的主按钮 */
  background:var(--cream); color:#16160f;
  font-size:1em; padding:.9em 1.35em;
}
.btn--cream:hover{ background:#f3f5da; }

.btn--glass{                     /* hero 中的次要按钮 */
  background:rgba(255,255,255,.19); color:#fff;
  font-size:1em; padding:.9em 1.35em;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.btn--glass:hover{ background:rgba(255,255,255,.28); }
```

---

## 10. 标题块

```css
.hero__copy{
  position:absolute; z-index:3;
  left:50%; top:16.75%;
  transform:translateX(-50%);
  width:min(94%, 66cqw);
  text-align:center;
  color:#fff;
}
.hero__title{
  margin:0;
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:max(17px, 2.03cqw);
  line-height:1.15;
  letter-spacing:.004em;
  text-shadow:0 1px 14px rgba(0,0,0,.30);
}
.hero__actions{
  display:flex; align-items:center; justify-content:center;
  gap:.55cqw;
  margin-top:1.66cqw;
  font-size:max(10px, .79cqw);
}
```

`max()` 下限至关重要：没有它们，当 fluid measure 在较窄的桌面端缩小时，表格文字会降到
8px 以下。不要将它们替换为普通的 `cqw`。

两行文字，通过显式 `<br>` 分隔（而不是自然换行）：

```html
<h1 class="hero__title">
  读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。<br>
  与领先的兽医研究专家共同打造
</h1>
```

然后是两个按钮：奶油色 `立即开始`、玻璃效果 `预约与我们通话`。

---

## 11. 对比表——分层技巧

这是最需要细致处理的部分。该表格**不是** `<table>`。它是由松散 `div` 组成的 CSS grid，
叠放在三个独立定位的背景面板上，使奶油色品牌列可以浮在磨砂面板*上方*，并且
*伸出*表头行。

```css
.compare{
  --cols:1fr 16.5% 16.2%;
  --pad-x:.85em;
  --panel-top:3.2em;
  --panel-bottom:4.9em;
  --radius:1.4em;
  position:absolute; z-index:3;
  left:50%; transform:translateX(-50%);
  bottom:16%;
  width:54.8cqw;
  color:#fff;
  font-size:max(8.5px, .92cqw);
}
```

列比例根据参考图测得：功能列约为 67.3%，品牌列为 16.5%，对比列为 16.2%。整个表格宽度是
measure 的 54.8%，并水平居中。

**第 1 层——磨砂面板**（`z-index:0`、`pointer-events:none`），通过两个自定义属性从容器
顶部和底部向内收缩，使其仅包裹各行：

```css
.compare__panels{
  position:absolute; left:0; right:0;
  top:var(--panel-top); bottom:var(--panel-bottom);
  display:grid; grid-template-columns:var(--cols);
  z-index:0; pointer-events:none;
}
.panel{ border-radius:var(--radius); }
.panel--features{                       /* 跨越第 1–2 列 */
  grid-column:1 / span 2;
  background:linear-gradient(102deg, rgba(255,255,255,.19), rgba(255,255,255,.08));
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.panel--vet{                            /* 仅第 3 列 */
  grid-column:3;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(115%);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);
}
```

请注意，功能面板跨越**两**列，因此会从奶油色列*后方*穿过——磨砂玻璃在其下方保持连续。

**第 2 层——奶油色品牌列**（`z-index:2`），它向表头上方伸出 `1.5em`，底部比面板低
`0.2em`：

```css
.hugo-col{
  position:absolute; z-index:2;
  top:-1.5em;
  bottom:calc(var(--panel-bottom) - .2em);
  left:calc(100% - 32.7%);
  width:16.5%;
  background:var(--cream);
  border-radius:var(--radius);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.45);
  pointer-events:none;
}
```

**第 3 层——内容网格**（`z-index:1`，位于奶油色区域的单元格提升到 `3`）：

```css
.compare__grid{ display:grid; grid-template-columns:var(--cols); align-items:stretch; }
.compare__head{ display:contents; }     /* 表头 span 直接成为网格项 */
.compare__head span{
  font-size:1.02em; font-weight:500;
  letter-spacing:-.012em;
  height:calc(var(--panel-top) / 1.02);
  display:flex; align-items:flex-start;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.compare__head .h-feature{ padding-left:var(--pad-x); }
.compare__head .h-hugo,
.compare__head .h-vet{ justify-content:center; }
.compare__head .h-hugo{                 /* 位于奶油色上 → 深色文字，无阴影 */
  color:#1a1a12; text-shadow:none;
  position:relative; z-index:3;
  align-items:center; height:auto;
}

.row-label,.row-hugo,.row-vet{
  display:flex; align-items:center;
  height:3.6em;
  position:relative; z-index:1;
}
.row-label{
  padding-left:var(--pad-x); padding-right:1em;
  letter-spacing:-.008em;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.row-hugo{ justify-content:center; color:#20200f; z-index:3; }
.row-vet{ justify-content:center; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.3); }
```

**发丝分隔线**：仅在外侧边缘按 `--pad-x` 内缩，最后一行不显示：

```css
.row-label::after{ content:""; position:absolute; left:var(--pad-x); right:0; bottom:0;
                   height:1px; background:rgba(255,255,255,.16); }
.row-vet::after  { content:""; position:absolute; left:0; right:var(--pad-x); bottom:0;
                   height:1px; background:rgba(255,255,255,.14); }
.r-last::after{ display:none !important; }
```

为第四行的三个单元格全部添加 `r-last` 类。

**勾选标记**（每行一个，位于奶油色列中），大小为 `1.1em` 正方形：

```html
<svg class="check" viewBox="0 0 14 14" fill="none" aria-label="已包含" role="img">
  <path d="M2.4 7.4l3 3 6.2-7" stroke="currentColor" stroke-width="1.35"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>
```
```css
.check{ width:1.1em; height:1.1em; display:block; }
```

---

## 12. 总计与脚注

```css
.totals{
  display:grid; grid-template-columns:var(--cols); align-items:center;
  margin-top:1.9em;
  font-weight:600; font-size:1.02em;
  letter-spacing:-.014em;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.totals span:first-child{ padding-left:var(--pad-x); }
.totals span:nth-child(n+2){ text-align:center; }
.footnote{
  margin:.8em 0 0 var(--pad-x);
  font-size:.88em; font-style:italic; font-weight:400;
  color:rgba(255,255,255,.8);
  letter-spacing:-.004em;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
```

---

## 13. 精确文案（字符数是硬性约束）

| 位置 | 字符串 | 字符数 |
|---|---|---|
| 文字标志（nav + 表头） | `Lume` | 4 |
| Nav 按钮 | `立即开始` | 11 |
| 标题第 1 行 | `读取 120+ 项健康指标。由顶级兽医提供指导。总价仅 $349。` | 74 |
| 标题第 2 行 | `与领先的兽医研究专家共同打造` | 57 |
| 主按钮 | `立即开始` | 11 |
| 次要按钮 | `预约与我们通话` | 19 |
| 第 1 列表头 | `筛查与护理` | 16 |
| 第 3 列表头 | `标准方案` | 8 |
| 第 1 行 | `完整实验室检测组合（血液、尿液、粪便、唾液）` | 55 |
| 第 2 行 | `全面体格检查与生命体征扫描` | 32 |
| 第 3 行 | `饮食与日常行为分析` | 32 |
| 第 4 行 | `书面检查结果和个性化护理方案` | 41 |
| 价格 | `$720` `$280` `$160` `$240` | 每项 4 个字符 |
| 总计 | `总价：` / `$349` / `*$1,400+` | 12 / 4 / 8 |
| 脚注 | `*如果在免预约诊所逐项预约，通常每年的花费。` | 81 |

在标记中将 & 符号转义为 `&amp;`。`Behaviour` 使用英式拼写是有意为之。

---

## 14. 动画与动态效果

没有 **scroll、entrance 或 decorative animations**。全部动态效果仅包括：

1. **Hero video**——`autoplay muted loop playsinline`，8.04 s 无缝循环，静音。
2. **Video reveal**——在 `.9s ease` 内从 `opacity 0 → 1`，由 `is-ready` 类触发。
3. **按钮 hover**——`background-color .18s ease`。
4. **按钮按下**——`transform:translateY(1px)`，`.18s ease`。

设置全局 reduced-motion 防护，并在该偏好下完全移除视频：

```css
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
```

---

## 15. 响应式——仅在 820px 设置一个 breakpoint

```css
@media (max-width:820px){
  .hero{ height:100svh; min-height:620px; }
  .hero__inner{ padding-inline:0; }
  .hero__media--desktop{ display:none; }   /* 同时隐藏视频 */
  .hero__media--mobile{ display:block; }

  .nav{ padding:18px 18px; }
  .brand{ font-size:16px; }
  .btn--dark{ font-size:12px; }

  .hero__copy{ top:11%; width:88%; }
  .hero__title{ font-size:5.4cqw; line-height:1.24; }
  .hero__actions{ font-size:3.2cqw; gap:2cqw; margin-top:5cqw; flex-wrap:wrap; }

  .compare{ width:88cqw; bottom:6%; font-size:3.1cqw; --cols:1fr 20% 20%; }
  .hugo-col{ left:calc(100% - 40%); width:20%; }
  .row-label,.row-hugo,.row-vet{ height:4.1em; }
}
```

因为视频也带有 `hero__media--desktop`，所以切换为 portrait still 的同一条规则也会在手机端
隐藏视频——无需单独处理移动端视频。

---

## 16. 脚本（页面中唯一的 JS）

```html
<script>
  (function () {
    var v = document.querySelector('.hero__video');
    if (!v) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    function reveal() { v.classList.add('is-ready'); }
    if (v.readyState >= 3) reveal();
    else v.addEventListener('canplay', reveal, { once: true });

    v.addEventListener('loadeddata', function () {
      var p = v.play();
      if (p && p.catch) p.catch(function () {});
    }, { once: true });
  })();
</script>
```

---

## 17. 结构

```
body
└─ div.page                          ← 无作用的包装器，不带任何 CSS
   └─ section.hero
      ├─ img.hero__media.hero__media--desktop
      ├─ img.hero__media.hero__media--mobile
      ├─ video.hero__media.hero__media--desktop.hero__video
      ├─ nav.nav                     ← 位于 measure 外部，固定在页面边缘
      │  ├─ a.brand  (svg.brand__mark + span "Lume")
      │  └─ a.btn.btn--dark  "立即开始"
      └─ div.hero__inner             ← cqw measure container
         ├─ div.hero__copy
         │  ├─ h1.hero__title  （两行，显式使用 <br>）
         │  └─ div.hero__actions  (a.btn--cream, a.btn--glass)
         └─ div.compare
            ├─ div.compare__panels  (div.panel--features, div.panel--vet)
            ├─ div.hugo-col
            ├─ div.compare__grid
            │  ├─ div.compare__head  (span.h-feature, span.h-hugo, span.h-vet)
            │  └─ 4 × (div.row-label, div.row-hugo, div.row-vet)
            ├─ div.totals  （3 个 span）
            └─ p.footnote
```

---

## 18. 验收检查

- 在 1440×900 下，标题渲染为 **24px**，表格正文文字渲染为 **10.9px**。
- 奶油色列的顶部边缘位于 `筛查与护理` 表头 baseline 的**上方**，并且可以看到磨砂功能面板在其
  *后方*连续延伸。
- 视频报告 `readyState 4`、`paused=false`、`videoWidth 1928`、`duration 8.04`。
- 从 320px 到 2560px 的任何宽度下均无水平滚动条。
- 启用 `prefers-reduced-motion: reduce` 时，渲染结果中不显示 `<video>`，可见内容为
  桌面端静态图。
- 低于 820px：portrait still、无视频，表格列为 `1fr 20% 20%`。