## 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/iris/650a6ac7-5b2c-4108-91e1-31520e600e3c-1790748228-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/iris/650a6ac7-5b2c-4108-91e1-31520e600e3c-1790748183746-full.webp
- Component on Kage: https://kage.design/component/iris-navigation

## Before you start
Ask what the user's product is and what their brand identity should feel like, then apply the principles below to that product rather than reproducing the reference.

Build a responsive top navigation for a premium B2B software landing page. Use a wide, centered container with a small brand mark at the left, a compact horizontal link group near the middle, and one high-contrast action button at the right. Keep the navigation visually light enough to sit over a photographic or gradient hero: use a translucent cool-blue/white surface around `#ffffff18` or a similarly subtle treatment, white text, and a soft blur if appropriate. Use a restrained sans-serif at 13–15px, medium weight, generous horizontal gaps, and a black action button around `#050505` with white text, 12px radius, and compact padding. Align everything vertically in a 48–56px bar with 24–32px side padding; on mobile collapse links into a menu while preserving the primary action.

Make links keyboard accessible, provide visible focus states, and add a small chevron only where a menu is expandable. Keep the header fixed or sticky only if it supports the product experience without obscuring the hero.

### Never
- Never copy logos, product names, or reference copy.
- Never reuse reference illustrations or imagery.
- Never make the navigation visually heavier than the hero content.