## 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/ai-bridge/b251bcbf-eae9-4af6-9324-2c0c35690cf2-1793080969-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ai-bridge/b251bcbf-eae9-4af6-9324-2c0c35690cf2-1793080894182-full.webp
- Component on Kage: https://kage.design/component/ai-bridge-hero

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

Create a tall, full-bleed hero beneath the navigation. Use a cinematic but product-relevant background treatment: layered navy-to-plum gradients (`#101A3C`, `#5B536D`, `#E69A86`) over original imagery or an abstract scene, with a dark bottom vignette for readability. Center a two-line headline at approximately 56–64px desktop, tight line-height around 0.95, white (`#F7F8FC`), and use a lighter or lower-opacity second line to create hierarchy. Place a 16px supporting paragraph below with a constrained max width of 500–560px and muted lavender-white (`#D2D4E1`). Follow with two side-by-side CTAs: a white filled primary button and a translucent outlined secondary button, both pill-shaped with 40–48px height. Add a tiny reassurance line below. Near the lower portion, include a dark translucent rounded capability strip that explains the product's relationship to existing tools; use compact icon-and-label items, not a logo wall. Give the hero generous vertical breathing room and maintain contrast with a subtle overlay. On mobile, stack CTAs and let the capability strip wrap or scroll horizontally.

Never use the reference's logo, product name, copy, illustrations, imagery, or exact supported-tool labels.