## 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-1790488906-1.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-hero

## 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.

Create a centered landing-page hero directly below the navigation. Start with a tiny uppercase eyebrow with generous letter spacing, then a very large responsive two-line headline with one short phrase highlighted in a bright lime accent (#b7ff32) or underline treatment. Add a centered paragraph constrained to roughly 560px, followed by a horizontal primary/secondary action row. Use a warm off-white background (#f6f7f2), near-black heading color (#07151b), muted gray body text (#68716f), and lime primary button (#b7ff32) with dark text. The hierarchy should be eyebrow 10px uppercase, headline clamp(48px, 7vw, 78px) with tight line-height around .95, body 15px/1.5, and buttons 13px semibold. Leave substantial breathing room above and below, and stack actions on narrow screens.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never overcrowd the hero with extra cards, badges, or competing CTAs.