Build a **single self-contained `index.html`** that recreates this cybersecurity landing page **pixel-faithfully**. Fixed fullscreen black stage, left-locked typography, right-side looping video atmosphere, one-shot entrance choreography, and a mobile burger overlay. No frameworks. No scroll. No cards. No purple. No rounded pills. --- ## 1. Document shell ```html Security built into every system layer ``` - `html, body { height:100%; background:#000; overflow:hidden }` - `body { -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision }` --- ## 2. Fonts (exact aliases from the original) Embed two WOFF2 faces as `@font-face` with **`font-display:block`**: | CSS family alias | Actual font | Role | |---|---|---| | `'SG'` | **Space Grotesk** (original embeds the Light cut as `SpaceGrotesk-Light`) | Headline, button labels, stat labels, mobile menu rows | | `'JB'` | **JetBrains Mono Regular** (`JetBrainsMono-Regular`) | Nav links, subcopy, stat numbers, menu eyebrow/note/sublinks | CSS weight usage (even if the embed is a single cut — match the original declarations): - **SG**: `480` (buttons), `700` (h1 + mobile `.mrow`), `400` (stat labels) - **JB**: `400` (nav, sub, menu), `480` (stat numbers) Closest public substitutes if not copying the original base64: Google Fonts **Space Grotesk** + **JetBrains Mono**, still aliased as `'SG'` / `'JB'`. --- ## 3. Design tokens / scaling system Three design canvases via `--s`: **Desktop (default)** ```css :root { --s: min(100vw
……（完整源码请在站内查看）