Display & data primitives that carry the Qubera visual language.

```jsx
<Eyebrow variant="capsule">Agentic AI for earnings</Eyebrow>
<Card hover><h3>Updated in minutes</h3><p>…</p></Card>
<Badge tone="green">Approved</Badge>
<StepNumber n={1} />
<LiveDot label="Monitoring filings in real time" />
<MetricTag label="Q3 revenue" value="$4.82B" lit />
```

- **Eyebrow** — mono kicker above headings. `variant`: `rule` (hairline, default), `capsule` (pill, used in the hero), `plain`. `tone="dark"` for gold over ink-navy.
- **Card** — base white surface; `hover` adds the lift used in the benefits grid.
- **Badge** — small status pill; tones `neutral`/`brand`/`gold`/`green`.
- **StepNumber** — navy-ringed circular index, zero-padded.
- **LiveDot** — pulsing green "live" dot, optional `label`.
- **MetricTag** — the gold extraction chip; `lit` shows the detected/highlighted state.