## 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/backdrop/a4be162f-a1b8-4e5c-8da7-09cb7d37c0e3-1792130678-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/backdrop/a4be162f-a1b8-4e5c-8da7-09cb7d37c0e3-1792130585649-full.webp
- Component on Kage: https://kage.design/component/backdrop-hero

## Before you start
Ask what the user's product does, what outcome it promises, and what visual brand it uses. Then create a distinct hero that applies these principles to that product.

Build a centered hero directly below the navigation. Use a large two-line sans-serif headline with tight line-height, a muted supporting paragraph constrained to roughly 360–440px, and two horizontally aligned actions: a dark filled pill and a light outlined pill. Place a wide, contained visual or product demonstration below the copy, with a floating white prompt/input card overlapping its lower area. The composition should feel airy above and visually rich below. Use white (#ffffff), near-black (#090909), muted gray copy (#6b6b6b), soft borders (#e7e7e7), 14–16px radius on the floating card, and a bright but product-specific accent palette. Add subtle shadow to floating UI and make the input submit control a circular dark button. On mobile, stack actions and let the visual crop while keeping the input card readable.

### Never
- Never use the reference headline, product name, logos, landscape, characters, or exact copy.
- Never copy the reference partner badges or illustration style exactly.
- Never make the hero depend on an unbounded background image.