## 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-1789146823-1.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-hero

## Before you start
Ask what the user's product, audience, and brand are, then adapt this structure and visual logic to their product.

Build a full-width hero directly beneath the navigation. Use a dark, atmospheric background with a subtle abstract network or map texture, but create an original visual system appropriate to the user's brand. Place the content in a constrained left column: a large concise headline, one or two lines of supporting copy, and one prominent CTA. Add several small floating status/reward chips across the background as ambient proof of activity; they should feel like interface overlays rather than random decoration.

Design language: deep navy/black background around #020b15 with slightly lighter blue-black gradients, off-white headline text around #f4f7f8, muted copy around #aab6bf, and pale blue CTA around #a8d7f3 with dark text. Use a contemporary sans-serif; headline size 42–64px desktop with tight line-height, 18–20px body copy, and 14px button text. Use 16–24px outer padding on mobile and 64–96px desktop; give chips 10–12px radius, translucent #1b2a35 fills, and subtle borders. Ensure the hero is at least viewport-height on desktop or tall enough to contain its visual and CTA. Add accessible hover/focus states and respect reduced motion.

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