## 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/krea-3/dbe75373-d211-428a-9d9b-aa6c396006bc-1792389810-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/krea-3/dbe75373-d211-428a-9d9b-aa6c396006bc-1792389704928-full.webp
- Component on Kage: https://kage.design/component/krea-3-navigation

## Before you start
Ask what the user's product and brand are, then apply the following principles to their navigation rather than copying this reference.

Build a transparent, image-overlay navigation for a bold visual product page. Use a full-width horizontal flex row with a small brand mark or wordmark aligned left and one high-contrast pill action aligned right. Keep the bar compact with roughly 16px horizontal padding, 10–12px vertical padding, and enough contrast against the hero through dark text treatment, a subtle shadow, or a light translucent surface. Use a modern sans-serif, small 12–14px utility text, medium weight, and a 999px radius for the action. Make it sticky only if that supports the product journey; otherwise keep it attached to the hero. Ensure keyboard focus states and mobile compression.

Never:
- use the reference logo or product name
- copy the reference wording
- reuse its imagery or illustration
- reproduce the exact layout or visual assets