# Section mockup → layout contract

Generated mockups live in this folder. Implementation must follow these contracts.

| File | Section | Layout contract |
|------|---------|-----------------|
| `01-hero.jpg` | Hero | Sticky bar (logo left, links center-right, cyan outline CTA). Two-col: copy left, tall framed media right. Gradient headline (white→cyan→magenta). Primary solid cyan pill + ghost pill. 4 equal metric glass cards under copy. |
| `02-map.jpg` | Overview | Section title left / lede right. 3×2 equal glass cards, mono index 01–06, title, body, cyan link. |
| `03-systems.jpg` | Features | Alternating 50/50 media \| glass panel rows; bullets with cyan dots. |
| `04-pipeline.jpg` | Pipeline | 4 frosted standing cards in a row, STEP badge top-right, cyan title underline, icon bottom. |
| `05-pets.jpg` | Pets | Filter chips under header. 3×3 square cards: image ~70%, glass name strip. |
| `06-gallery.jpg` | Gallery | 3-col 16:9 tiles, caption bar, play affordance. |
| `07-arsenal.jpg` | Arsenal | Bento: large left media (2 rows), 2 stacked right cards + chips. |
| `08-runbook.jpg` | Run | 2-col: stacked step cards \| terminal panel with toolbar. |

## Tokens (from mockups)

- bg: `#05060a`
- panel: `rgba(18,22,36,0.72)`
- border glow: cyan `#00e5ff` → magenta `#d946ef`
- text: `#f4f7ff`
- muted: `#9aa3b5`
- fonts: **Syne** display, **Figtree** body, **IBM Plex Mono** code
