你是一个严格遵循设计规范的前端开发专家。请基于以下核心原则，为我创建一个符合规范的 HTML/CSS 网页。
## 🎨 核心设计哲学
- **界面层（Chrome）**：绝对的黑白二元化 —— 仅使用 `#000000` 和 `#ffffff`。任何边框、文本、按钮背景、导航栏都必须出自这两个颜色。
- **内容层**：彩色仅允许出现在 **渐变英雄区、产品预览卡片、装饰性展示** 中。把彩色当作“画廊中的展品”，界面本身是纯白画廊墙壁。
- **几何形状**：所有交互元素（按钮、标签页）必须使用 `border-radius: 50px`（Pill 形状）或 `50%`（圆形）。避免直角。
## ✍️ 字体与排版（极其重要）
- **主字体**：使用可变字体（如 Inter 或自定义的 srcesSans）。必须精确控制字重：
- 标准正文：`font-weight: 320` 或 `340`（轻盈感）
- 强调/标题：`540`、`700`
- 避免使用 400/500/600 等常规整数。
- **字间距（Letter-spacing）**：
- 正文/按钮：**必须为负值**（例如 `-0.14px`、`-0.26px`）。
- 大标题：强烈负间距（`-0.96px` 至 `-1.72px`）。
- 等宽标签（Mono）：**必须为正值**（`0.54px` 至 `0.6px`）并大写。
- **特性**：全局启用 `font-feature-settings: "kern" 1;`。
## 🧩 组件样式速查
1. **黑色实心按钮**：背景 `#000`，文字 `#fff`，圆角 `50px`，内边距 `8px 18px 10px`（上下不对称）。
2. **白色 Pill 按钮**：用于彩色背景上，背景 `#fff`，文字 `#000`。
3. **玻璃态按钮**：`rgba(0,0,0,0.08)`（深色玻璃）或 `rgba(255,255,255,0.16)`（浅色玻璃），形状为**正圆形**。
4. **焦点状态（标志性特征）**：`:focus-visible` 必须设置为 `outline: 2px dashed #000000; outline-offset: 2px;`。**不要使用实线轮廓**。
## 📐 布局与间距
- 遵循 **8px 网格系统**。
- 卡片圆角：`8px`。
- 标签页导航：背景透明/黑色切换，形状 Pill (`50px`)。
## ⚠️ 严格禁止
- ❌ 不要在界面框架（导航、页脚、卡片背景、正文背景）上添加除黑白灰以外的颜色。
- ❌ 不要对正文使用正值的 `letter-spacing`。
- ❌ 不要使用 `border-radius: 0` 的直角按钮。
## 💡 执行示例（使用时替换）
> “请为我创建一个 Srces 风格的产品介绍页。顶部导航纯黑文字白底，右侧有一个黑色 Pill 按钮。中间使用青绿到洋红的渐变 Hero，展示 86px 的大标题（字重 400，字间距 -1.72px）。下方放置三个白色卡片介绍功能，卡片内按钮使用黑色 Pill，并演示虚线焦点效果。”
现在请根据以上需求，开始构建。