## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/parallax/9ca98bac-0bc3-4cc4-b310-031492d1188c-1792216894-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/parallax/9ca98bac-0bc3-4cc4-b310-031492d1188c-1792216865980-full.webp
- Component on Kage: https://kage.design/component/parallax-feature-grid-3

## Before you start
Ask what resources, plans, accounts, or workspaces the user's product manages and what status information matters to users. Adapt this card system to that model.

Build a dark feature section with a centered-left or centered editorial serif heading, a short two-line explanation, and a row of four equal status cards. Each card should include a small account/resource label, secondary metadata, a large percentage or monetary value, a horizontal usage bar, and a concise state label. Give the active card a brighter border and an overlapping small white action/control chip to suggest an in-progress handoff. Use a 4-column desktop grid with 10–14px gaps, 14px rounded corners, 1px borders, and generous internal padding; stack to one column on mobile. Palette: background `#0b0b0b`, card `#14161a`, border `#272a2f`, white `#eeeae8`, muted `#8f8c90`, pink-red `#e84067`, green `#46c58e`. Keep the heading visually dominant while the cards remain scannable and data-like.

Never:
- use logos, product names, or copy from the reference
- reuse its exact account labels or values
- include imagery or illustrations from the reference