## 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/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146824-2.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146766657-full.webp
- Component on Kage: https://kage.design/component/bilt-feature-grid

## Before you start
Ask what the user's product, audience, and brand are. Then apply these principles to their product's primary benefit section.

Create a full-width feature section centered on the product's core benefit. Use one immersive original image or visual spanning the section, with a readable dark overlay. Add a compact pill navigation near the top of the visual, a left-aligned explanatory content block, and a contrasting translucent data panel on the right that summarizes 3–4 meaningful product outcomes. Include one focused CTA below the copy.

Design language: maintain a #020b15 page background, warm or atmospheric imagery with a navy scrim, off-white text #f2f5f6, muted gray-blue copy #a9b4bd, and pale blue CTA #a7d6f2. Use a 12-column grid with content constrained to 840–1200px; align text and panel to the same vertical rhythm. Use 12–16px radius on panels, 1px rgba(255,255,255,.12) borders, and low diffuse shadows. Make the panel stack below the copy on mobile, and make navigation pills horizontally scrollable. Avoid reducing text contrast over imagery.

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