## 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/hireotto/8f3068d7-46ca-4868-8ee8-837dc9e1c249-1790488907-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hireotto/8f3068d7-46ca-4868-8ee8-837dc9e1c249-1790488876025-full.webp
- Component on Kage: https://kage.design/component/hireotto-feature-grid-2

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than reproducing this reference.

Build a full-width dark problem statement section with a deep blue-black background (#071820) and a centered max-width inner grid. Put a small uppercase lime eyebrow and oversized multiline problem headline in the left column. Put three numbered issue rows in the right column; each row has a lime index, a crisp short heading, and a muted explanatory sentence, with subtle 1px separators. Use white/off-white headings (#f4f7f0), blue-gray body text (#91a4a2), lime numbers (#b7ff32), 56–72px heading type with tight line-height, and 48–64px vertical spacing. On mobile, stack the statement above the list and preserve the separators.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never turn the problem list into an unstructured wall of text.