## 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/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146601-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146540058-full.webp
- Component on Kage: https://kage.design/component/copilot-money-hero

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and colours are. Apply the principles below to that product rather than reproducing this reference.

Create a full-width dark hero with:
- A centered max-width content column and generous vertical breathing room.
- An oversized responsive headline, approximately 64–78px desktop with tight line-height around .9–1.0, breaking into 2–3 deliberate lines.
- A concise supporting paragraph below in 19–21px muted light text, followed by one bright blue rounded CTA.
- Decorative category pills floating behind and beside the headline: varied saturated green, purple, orange, pink, and slate colours, soft blur, subtle rotation, and low opacity. Keep them decorative and nonessential.
- Background #020d1b or similar; headline #dce4ef; paragraph #c1ccda; CTA gradient/blue around #1769ff to #3987ff.
- Use a 12px radius for the CTA, 24–32px gaps between text blocks, and a minimum hero height that lets the headline breathe.
- Respect reduced-motion preferences and keep all decorative elements behind text with pointer-events disabled.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- recreate the exact headline or pill labels;
- let decoration reduce contrast or make the CTA ambiguous.