Vesper.ai

# Vesper.ai — Operational AI Infrastructure

Recreate this exact single-viewport landing page for **Vesper.ai**. Document title: `Vesper.ai — Operational AI Infrastructure`. `lang="en"`. One HTML file with inline CSS and a small IIFE for the menu + animation fallback. Pure black `#000000`. No extra sections, cards, forms, pricing tables, or footer beyond the three stats. Do **not** add a video, WebGL, Three.js, or Lottie. Do **not** invent a CloudFront URL.

Force black immediately so the page can never flash white:

- First CSS rule: `html, body { background: #000000 !important; color: #ffffff; }`
- Body attribute: `style="background:#000;color:#fff"`
- Then again: `html, body { background: #000000; background: var(--bg, #000000); color: #ffffff; color: var(--text, #ffffff); }`

## Fonts (exact)

Self-hosted WOFF2s sitting next to `index.html`:

```css
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("inter.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("instrument-serif-italic.woff2") format("woff2");
}
```

Stacks:

- UI / logo / nav / buttons / badge / lede / stats: `"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- **Only** the H1 words `AI agents`: `"Instrument Serif", "Times New Roman", Times, serif`

If those files are missing, load this exact Google Fonts CSS (Inter variable roman + Instrument Serif italic only):

```
https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900&family=Instrument+Serif:ital@1&display=swap
```

Body: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative`. `html { scroll-behavior: smooth }`. Universal reset: `box-sizing: border-box; margin: 0; padding: 0`. Links `color: inherit; text-decoration: none`. Buttons `font-family: inherit`.

## Image / asset URLs (exact — there are only these)

**1. Herovide obackgorumf 100% opacity no overlay**
Relative file, same folder as the HTML:

```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260818_072341_50851634-bbc3-4c33-9acc-7647d4db44aa.mp4
```

**3. Favicon (exact data URI)** — same mark as the logo, white:

```
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cg transform='rotate(-30 12 12)'%3E%3Ccircle cx='7.3' cy='3.2' r='1.45'/%3E%3Crect x='5.5' y='4.7' width='3.6' height='14.6' rx='1.8'/%3E%3Crect x='14.9' y='4.7' width='3.6' height='14.6' rx='1.8'/%3E%3Ccircle cx='16.7' cy='20.8' r='1.45'/%3E%3C/g%3E%3C/svg%3E
```

No other images. All other icons are inline SVG.

## Tokens (default / ~1440px)

```
--bg: #000000
--text: #ffffff
--muted: #9a9a9a
--stat: #d8d8d8
--border: rgba(255, 255, 255, 0.16)
--border-soft: rgba(255, 255, 255, 0.12)

--logo: 15.5px
--logo-mark: 22px
--nav: 14px
--nav-h: 40px
--btn: 13.5px
--btn-h: 40px
--hero-btn-h: 42px
--h1: 48px
--lede: 15.5px
--badge: 12.5px
--stat-size: 13.5px
--header-y: 22px
--header-x: 40px
--stats-x: 72px
--stats-y: 36px
--hero-gap: 85px
--copy-max: 860px
--lede-max: 470px
```

## Layer stack (back → front)

1. `html/body` black
2. `.hero-photo` + `::after` scrim
3. `.page` — `position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh / 100dvh`
4. `.grain` at `z-index: 100`

Markup order inside body:

```
.grain
.hero-photo
.page
  .menu-backdrop
  header.header
  main.hero#top
  footer.stats
script
```

## Header — 3-column grid

`display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;`
Padding: `var(--header-y) var(--header-x) 10px`. `z-index: 50; position: relative`.

**Left — logo** `a.logo.appear.appear--scale` → `#top`, `aria-label="Vesper.ai"`.
`display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-size: var(--logo); font-weight: 600; letter-spacing: -0.03em; color: #fff`.

Mark SVG 22×22, `viewBox="0 0 24 24"`, `fill="currentColor"`, group `transform="rotate(-30 12 12)"`:

- `circle cx="7.3" cy="3.2" r="1.45"`
- `rect x="5.5" y="4.7" width="3.6" height="14.6" rx="1.8"`
- `rect x="14.9" y="4.7" width="3.6" height="14.6" rx="1.8"`
- `circle cx="16.7" cy="20.8" r="1.45"`

Wordmark: `Vesper` + `<span class="logo-suffix">.ai</span>` at `font-weight: 400`.

**Center — nav** `#site-nav`, `aria-label="Primary"`, `display: flex; align-items: center; gap: 8px; justify-self: center`.

| Label | href | appear class |
|---|---|---|
| Benefits | `#benefits` | `appear--scale` |
| How It Works | `#how-it-works` | `appear--soft` |
| FAQs | `#faqs` | `appear--scale` |
| Pricing | `#pricing` | `appear--soft` |

Each link is a **liquid-metal pill**: `height: var(--nav-h); padding: 0 18px; border-radius: 7px; overflow: hidden; position: relative;`
`border: 1px solid rgba(198,198,198,0.55)`
`background: linear-gradient(105deg, #050505 0%, #2a2a2a 48%, #4a4a4a 100%)`
color `#f3f3f3`, `font-size: var(--nav)`, weight 400, `letter-spacing: -0.01em`, `white-space: nowrap`.
Transition: `background / border-color / box-shadow 0.35s ease`.

Shine `::before`: `linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%)`, idle `translateX(-120%)`, hover `translateX(120%)` over `0.6s ease`.

Hover: border `rgba(235,235,235,0.9)`, gradient `#111 → #3a3a3a 45% → #6a6a6a`, glow `0 0 18px rgba(200,210,230,0.18)`.

**Right — header CTA:** `a.btn.btn-solid.header-cta.appear.appear--scale` "Start for Free" → `#start`, `justify-self: end`.

**Burger** (hidden ≥901px, `display: none` → `display: grid` on phone): 42×42, `border-radius: 6px`, `border: 1px solid var(--border)`, `background: rgba(8,8,8,0.55)`, `z-index: 60`, `aria-controls="site-nav"`, `aria-expanded="false"`, label "Open menu". Three white bars 16×1.5px, gap 5px, `border-radius: 1px`. Hover: border `rgba(255,255,255,0.32)`, bg `rgba(255,255,255,0.05)`. Open (`body.menu-open`): bar 1 `translateY(6.5px) rotate(45deg)`, bar 2 `opacity: 0`, bar 3 `translateY(-6.5px) rotate(-45deg)`, 0.25s / 0.2s.

## Buttons (shared liquid-glass language)

`.btn`: `position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 16px; border-radius: 6px; font-size: var(--btn); font-weight: 500; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer`. Transitions 0.35s on background, border, shadow, color, filter.

Shine `::after`: `linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 48%, transparent 76%)`, idle `translateX(-130%)`, hover `translateX(130%)` in `0.65s ease`.

**Solid:**
`background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%)`
`color: #111; border: 1px solid #fff`
`box-shadow: inset 0 1px 0 rgba(255,255,255,0.95)`
Hover: `#fff → #f3f6ff 42% → #d5def2`, border `#f2f6ff`,
`inset 0 1px 0 #fff, 0 0 22px rgba(186,208,255,0.35), 0 8px 18px rgba(255,255,255,0.12)`

Hero solid hover glow is slightly stronger: `0 0 26px rgba(186,208,255,0.4), 0 8px 18px rgba(255,255,255,0.14)`.

**Ghost (header-level):**
`background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.45) 50%, rgba(160,175,200,0.08))`
`color: #fff; border: 1px solid rgba(198,198,198,0.45)`
`box-shadow: inset 0 1px 0 rgba(255,255,255,0.12)`
Hover: `rgba(210,225,255,0.18) → rgba(0,0,0,0.35) 48% → rgba(180,195,220,0.16)`, border `rgba(220,230,255,0.75)`,
`inset 0 1px 0 rgba(255,255,255,0.22), 0 0 20px rgba(170,200,255,0.22)`

**Hero ghost** (stronger frost):
`background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.5) 46%, rgba(150,170,200,0.1))`
`border: 1px solid rgba(198,198,198,0.55)`
`backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)`
Hover glow `0 0 24px rgba(170,200,255,0.28)`, border `rgba(220,230,255,0.8)`.

Hero action buttons: height `var(--hero-btn-h)`, padding `0 18px`.

## Hero (bottom-centered, NOT vertically centered)

`.hero`: `display: flex; align-items: flex-end; justify-content: center; padding: 8px 24px var(--hero-gap); min-height: 0`.

`.hero-copy`: `position: relative; z-index: 1; flex-direction: column; align-items: center; text-align: center; max-width: var(--copy-max); width: 100%`.

**Badge** `.badge.appear.appear--pop` — text `Operational AI Infrastructure`
`inline-flex; gap: 8px; margin-bottom: 22px; padding: 9px 15px; border: 0; border-radius: 5px`
`background: linear-gradient(90deg, #7d7d7d 0%, #2a2a2a 52%, #0a0a0a 100%)`
color `#f2f2f2`, `font-size: var(--badge)`, weight 400, `letter-spacing: -0.01em`.

Sparkle SVG 18×20, white, `filter: drop-shadow(0 0 3px rgba(255,255,255,0.45))`, path:

```
M12 2.6C12.55 2.6 12.88 3.15 13.08 4.7c.62 4.7 1.52 5.6 6.22 6.22 1.55.2 2.1.53 2.1 1.08s-.55.88-2.1 1.08c-4.7.62-5.6 1.52-6.22 6.22-.2 1.55-.53 2.1-1.08 2.1s-.88-.55-1.08-2.1c-.62-4.7-1.52-5.6-6.22-6.22C3.15 12.88 2.6 12.55 2.6 12s.55-.88 2.1-1.08c4.7-.62 5.6-1.52 6.22-6.22C11.12 3.15 11.45 2.6 12 2.6Z
```

**H1** two masked lines, Inter 500, `letter-spacing: -0.045em`, `line-height: 1.12`, `#fff`, column, centered:

- Line 1: `Train <em>AI agents</em> on your`
- Line 2: `workflows in minutes.`

`.headline-line`: `display: block; overflow: hidden; padding: 0.06em 0.15em 0.14em`.
`em`: Instrument Serif italic 400, `font-size: 1.08em`, `letter-spacing: -0.03em`, color **`#9a9a9a`** (not white).

**Lede** `.lede.appear.appear--soft`, `max-width: var(--lede-max)`, `margin-top: 18px`, color `#9a9a9a`, `15.5px`, weight 400, `line-height: 1.55`, `letter-spacing: -0.015em`:

`Deploy adaptive AI agents that learn, execute, and scale operational tasks across your business.`

**Actions** `.hero-actions`: flex, wrap, center, gap `10px`, `margin-top: 26px`.

1. Solid `.appear.appear--btn`: `Start for Free` → `#start`
2. Ghost `.appear.appear--side`: `See it in action` → `#demo`

## Stats footer

`.stats`: flex, `align-items: center; justify-content: space-between; gap: 24px;`
padding `0 var(--stats-x) var(--stats-y)` and `padding-bottom: max(var(--stats-y), env(safe-area-inset-bottom))`, color `#d8d8d8`.

Each `.stat.appear.appear--stat`: `inline-flex; align-items: center; gap: 14px; font-size: var(--stat-size); letter-spacing: -0.015em; white-space: nowrap`. Icon 20×20 (`#e8e8e8`). Wide avatar icon 38×21.

**1. Dual-pill / workflow icon** (`viewBox="0 0 24 24"`):
Left rect `x=3.4 y=2.6 w=7.2 h=18.8 rx=3.6` fill linear `#ffffff@0.38 → #3a3a3a@0.62` (`x1=3 y1=2 x2=14 y2=22`).
Right rect `x=13.4 y=2.6` same size, inverted `#3a3a3a@0.38 → #ffffff@0.62`.
Connector `x=9.2 y=10.9 w=5.6 h=2.2 rx=1.1` fill `#4a4a4a`.
Label: `4.2M+ workflows automated`

**2. Download tile:** white rounded square `x=2.4 y=2.4 w=19.2 h=19.2 rx=6.2` fill `#ffffff`. Arrow `#111` stroke-width `1.85` round: vertical `M12 7.1v7.4`, chevron `M8.15 12.35L12 16.2l3.85-3.85`.
Label: `92% reduction in manual operations`

**3. Three avatars** (`viewBox="0 0 40 22"`, class `stat-icon-wide`):
- Dark circle `cx=10.2 cy=11 r=9.2` `#2b2b2b` + pale ellipse face `cx=10.2 cy=12.1 rx=4.15 ry=3.7` `#f4f4f4` + two ear triangles + eyes `r=0.7` `#1a1a1a`
- White circle `cx=20.2` `#ffffff` + black eyes `r=1.7` + nose ellipse + smile path stroke `#111` width `1.2`
- Orange circle `cx=30.2` `#f26b1d` + white Inter 700 `e` at `x=30.2 y=15.1 font-size=12.5 text-anchor=middle`
Label: `180+ operational teams onboarded`

## Entrance motion (exact)

`.appear` resting opacity is **1** (so the page is never blank if animations fail).
`animation-duration: 1.05s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); animation-delay: var(--d, 0.08s)`.
`both` applies the 0% keyframe during the delay, so they still hide then fade in when animations run.

On each element's own `animationend`, add `.is-in` (`animation: none; opacity: 1; transform: none; clip-path: none; filter: none`). Same for `.hero-photo.is-in`.

JS fallback: after two `requestAnimationFrame`s, if `el.getAnimations()` has nothing `running` or `finished`, add `.is-in` to every `.appear` and `.hero-photo`.

| Element | Modifier | `--d` |
|---|---|---|
| Logo | `appear--scale` | 0.08s |
| Nav 1 Benefits | `appear--scale` | 0.16s |
| Nav 2 How It Works | `appear--soft` | 0.28s |
| Nav 3 FAQs | `appear--scale` | 0.40s |
| Nav 4 Pricing | `appear--soft` | 0.52s |
| Header CTA + burger | `appear--scale` | 0.34s |
| Badge | `appear--pop` | 0.22s |
| H1 line 1 | `appear--mask` | 0.42s |
| H1 line 2 | `appear--mask` | 0.62s |
| Lede | `appear--soft` | 0.82s, duration **1.25s** |
| Solid CTA | `appear--btn` | 0.96s |
| Ghost CTA | `appear--side` | 1.10s |
| Stat 1 | `appear--stat` | 1.12s |
| Stat 2 | `appear--stat` | 1.28s |
| Stat 3 | `appear--stat` | 1.44s |

Keyframes (all end at opacity 1 / identity transform):

- `in-scale`: `opacity 0, scale(0.84)` → 1
- `in-soft`: `opacity 0, translateY(14px)` → 0
- `in-mask`: `opacity 0, translateY(40%)` → 0 (clipped by `.headline-line` overflow)
- `in-pop`: 0 `scale(0.9)` → 70% `scale(1.03)` → 100% `scale(1)`
- `in-btn`: `translateY(18px) scale(0.94)` → rest
- `in-side`: `translateX(22px)` → 0
- `in-stat`: `translateY(20px)` → 0
- `in-star` on `.badge-star`, `0.9s`, delay `0.28s`, both: `scale(0.2) rotate(-50deg)` → 65% `scale(1.2) rotate(8deg)` → rest
- `in-em` on `h1 em`, `1.2s`, delay `0.72s`, both: `opacity 0.35; filter: blur(4px)` → sharp

`prefers-reduced-motion: reduce`: `transition: none !important; animation: none !important` on `*, *::before, *::after`. Force `.appear, .hero-photo, .hero h1 em, .badge-star` to `opacity: 1; transform: none; clip-path: none; filter: none`.

## Responsive (copy these breakpoints)

**≥1600:** logo 17 / mark 24 / nav 15 / nav-h 44 / btn 15 / btn-h 44 / hero-btn 48 / h1 **64** / lede 18 / badge 13.5 / stat 15 / header 28×64 / stats 96×44 / copy 980 / lede-max 540. Nav pad `0 20px`. Badge mb 26, lede mt 22, actions mt 30 gap 12. Icons 22, wide 45×24.

**≥1920:** logo 18 / mark 26 / nav 16 / nav-h 48 / btn 16 / btn-h 48 / hero-btn 52 / h1 **76** / lede 20 / badge 14.5 / stat 16 / header 32×80 / stats 120×52 / copy 1120 / lede-max 620. Nav gap 10, pad `0 22px`. Buttons pad `0 22px`. Badge pad `10px 15px`. Wide icon 48×26.

**≥2560:** h1 **88**, lede 22, header-x 120, stats-x 160, copy 1280, lede-max 680.

**1280–1599:** h1 54, lede 16, header-x 48, stats-x 80, copy 900.

**901–1279:** logo 15, nav 13, nav-h 36, btn 13, btn-h 38, hero-btn 40, h1 **42**, lede 15, badge 12, stat 12.5, header 16×28, stats 36×28, hero-gap 64, copy 760, lede-max 440. Nav pad `0 14px`. Badge mb 16, lede mt 14, actions mt 20.

**≥901 and max-height 850:** header-y 14, stats-y 24, hero-gap 48, h1 40; badge mb 12, lede mt 12, actions mt 16.

**≥901 and max-height 720:** h1 34, lede 14, hero-gap 32, stats-y 18, nav-h 30, btn-h 34, hero-btn 36, badge mb 8.

**≥901 desktop lock:** `html, body { height: 100%; overflow: hidden }`. `.page { height: 100vh / 100dvh; overflow: hidden }`. One frame, **no scroll**.

**≤900 phone:** no 100vh lock; `html/body` `height: auto; overflow-y: auto`. Header `grid-template-columns: 1fr auto auto`, gap 8, safe-area padding. Logo / CTA / burger `z-index: 80`. Burger shown.

Full-screen menu: `.menu-backdrop` `display: block; position: fixed; inset: 0; z-index: 40; background: rgba(8,8,8,0.42)`, idle `opacity: 0; visibility: hidden`. Open: opacity 1 + **`backdrop-filter: blur(24px)`**, 0.28s. Nav becomes full-viewport column, `z-index: 45`, transparent, centered, gap 12, padding `96px 22px 32px` with `padding-top: max(96px, calc(env(safe-area-inset-top) + 88px))`. Links full-width, height 56, `font-size: 19px`, `border-radius: 10px`. Escape / nav click / resize ≥901 closes. Toggle `aria-expanded` and label Open/Close menu. `body.menu-open { overflow: hidden }`.

Hero pad `20px 20px 64px`, still `align-items: flex-end`. Stats **column**, centered, gap 16, `white-space: normal`. Copy/lede max-width 100%. Tokens: logo 16, btn 15 / 46, hero-btn 48, h1 **36**, lede 16.5, badge 13.5, stat 15, header 16×18, stats 20×28, hero-gap 36.

**≤560:** h1 34, lede 16, header-x 16. Hero actions **column**, buttons `width: 100%`.

## JS (only this)

1. Each `.appear` → own `animationend` → add `is-in` (`once: true`).
2. If animations are not running after two rAFs, force `.is-in` on all `.appear` and `.hero-photo`.
3. Burger toggles `body.menu-open`.
4. Nav links and Escape close the menu.
5. Resize to `(min-width: 901px)` closes the menu.

## Quality Bar
- The asset section and the rest of the spec ask for two different things. "Do **not** add a video" is explicit, and `.hero-photo` is named six times — layer stack, markup order, the `animationend` handler, the rAF fallback, the reduced-motion block — against one garbled heading ("Herovide obackgorumf") that decodes to "hero video background" and an `.mp4` URL. Build the still and the page holds; build the clip and it does not. Sampling all 241 decoded frames of that mp4 under the H1 at 1440x900: the white headline drops below the 3:1 large-text floor in **141 of 241 frames**, 8.93% of its pixels, worst case 1.00:1 — the light ribbon sweeps up through the headline over the 10 seconds. Even with a scrim it is 127 of 241. A single frame chosen for a dark lower third is the only reading of this spec that is legible.
- "100% opacity no overlay" contradicts the layer stack's own `.hero-photo::after` scrim, and the scrim is load-bearing. Measured at 1440x900 over that plate: without it the `#9a9a9a` `<em>` bottoms out at 2.70:1 — under the 3:1 floor its 52px size earns — and the `#9a9a9a` lede at 1.03:1, with 0.8% of its pixels failing 4.5:1; with it, 4.11:1 and 2.91:1. Phones are worse, because `cover` on a 16:9 plate in a 390x844 frame crops straight to the bright band: the white 34px H1 has 5.35% of its pixels below 3:1 without the scrim (worst 1.82:1) and **still 2.26% with it** (worst 2.35:1). Either dim the plate properly on small viewports or move the copy off it.
- `translateY(±6.5px)` only closes the burger if the three bars are on a 6.5px pitch (1.5px bar + 5px gap). `display: grid` with `place-items: center` and `gap: 5px` leaves `align-content` at `normal`, which stretches the three auto rows to fill the 42px box — measured pitch 15px, so the open state renders a chevron, not an X, and it is the only affordance a phone user has for closing the menu. Add `align-content: center`, or use flex column with `justify-content: center`.
- Four of the six colour tokens are declared and never used. `--muted`, `--stat` and `--border-soft` appear in `:root` and nowhere else, because every use site hard-codes the same value — `#9a9a9a` on the `em` and the lede, `#d8d8d8` on `.stats`. A token that is not referenced is a token that will drift the first time someone edits one of the two.
- Six of the seven links go nowhere. `#benefits`, `#how-it-works`, `#faqs`, `#pricing`, `#start` and `#demo` have no matching id on the page, and the spec forbids adding the sections that would carry them. `#top` on the logo is the only anchor that resolves. On a desktop frame with `overflow: hidden` and no scroll, clicking any of them is a no-op with no feedback at all — decide whether this is a shell to be filled or a page whose nav should be inert markup.
- `.grain` is the only element in the spec with no definition. It gets a `z-index: 100`, a place at the top of the body, and a name — everything else here is specified to the pixel. It also sits above the entire page, so its opacity and blend mode decide how the whole design reads, and "No other images" rules out the noise PNG this pattern normally uses: it has to be an inline SVG filter or a CSS pattern. Say which, and say how strong.
- The Google Fonts fallback costs more than the whole rest of the page. That URL resolves to nine `@font-face` blocks; a Latin visitor pulls Inter latin (73,016 bytes) and Instrument Serif latin italic (15,684) — 88,700 bytes, plus a render-blocking round trip to a second origin, on a page whose entire premise is that it must paint instantly and never flash. Self-hosted and subset to the 48 characters actually on the page, the two faces are 20,016 bytes, 22.6% of that. Both are OFL 1.1.
- `font-weight: 100 900` is declared and four weights render: 400 (nav, lede, badge, stats, `.logo-suffix`), 500 (buttons, H1), 600 (logo), 700 (the `e` in the third avatar). Shipping the axis you declared costs 18,360 bytes for those 48 characters; clamping the variable font to `wght=400:700` is 12,656. Declaring range you do not use is 5.7KB of nothing.
- The design makes the emphasised words the least legible thing on the page. `#9a9a9a` on `#000000` is 8.6:1 in isolation, so `AI agents` reads fine on black — but it is also the phrase most likely to land on the plate's bright band, and it is the first thing to fail there (2.70:1 unscrimmed at 1440x900). If the accent must be dimmer than the line it sits in, give it a text-shadow or a local scrim, not just a lighter grey.
- `text-rendering: optimizeLegibility` is the one declaration in the body rule that can hold text back from first paint. It forces `kern` and `liga` resolution before the first layout, and on a page built around never flashing and never being blank it buys nothing here — the subset already carries both features. Drop it and let `font-display: swap` do the work.
- `overflow: hidden` on `html, body` above 901px means the page cannot reflow. The `max-height: 850` and `720` branches keep the design inside short viewports, but a user at 200% browser zoom — WCAG 1.4.4 — gets the same locked frame with content clipped and no scrollbar to reach it. A one-frame composition is a legitimate design; pair it with a height query that releases the lock rather than assuming every viewport is a laptop.
- Every control has a hover state and none has a focus state. Seven keyboard-reachable elements sit on pure black with no `:focus-visible` rule anywhere in the spec, so tabbing through the page moves an invisible cursor. One outline declaration fixes it.
- The asset list numbers its items 1 and 3 and says "there are only these". Either an item was dropped in editing or the numbering is wrong, and a reader cannot tell which — the same edit that produced "Herovide obackgorumf" probably produced this.