## 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/pixverse-r2/7176eddd-e6f3-4887-9746-7bf2cc36c14b-1790402470-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pixverse-r2/7176eddd-e6f3-4887-9746-7bf2cc36c14b-1790402442610-full.webp
- Component on Kage: https://kage.design/component/pixverse-r2-navigation

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

Build a responsive floating global navigation for a cinematic digital product site. Keep it centered in a wide max-width container with a dark translucent charcoal/black pill, subtle backdrop blur, a thin low-contrast border, and a soft shadow. Arrange a compact brand area on the left, a small set of evenly spaced primary links in the middle, and language/accessibility controls plus one outlined or filled action on the right. Use flexible spacing so the nav collapses into a menu on small screens while remaining comfortably tappable. Typography should use a clean modern sans-serif: semibold 14–16px brand, 12–14px links, and a slightly stronger 13–14px CTA. Use near-white text (#f5f3f7), muted gray secondary text (#aaa7b0), a deep translucent surface around rgba(15,15,22,.72), a 1px rgba(255,255,255,.16) border, 999px radius, and 12–16px internal spacing. Highlight the active link with brighter text rather than a loud underline. Add hover/focus transitions for links and CTA, preserving visible keyboard focus.

Never use logos, product names, copy, illustrations, or imagery from the reference.