## 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/lull/1eb36b3c-9a0d-499b-8ae4-8916c2d1f7b6-1789884096-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lull/1eb36b3c-9a0d-499b-8ae4-8916c2d1f7b6-1789884066726-full.webp
- Component on Kage: https://kage.design/component/lull-hero

## Before you start
Ask what the user's product does, what emotional promise it makes, and which conversion action matters most. Then create a version for that product using these principles, not the reference content.

Build a full-viewport cinematic hero with a dark, edge-to-edge background image or video treatment chosen for the user's product. Add a strong black gradient from the edges and bottom so text remains readable without looking like a card. Center the content vertically and horizontally: a short, oversized italic or high-contrast serif headline, a quiet supporting sentence in a clean sans-serif, one primary pill CTA, and a tiny editorial line or scroll indicator beneath. Keep the copy column narrow and let the image carry atmosphere. The CTA should have a translucent light surface, subtle border, arrow or product-specific affordance, and a gentle hover lift. Use responsive type that scales down smoothly while retaining the dramatic whitespace.

Approximate design language: #050505 overlays at 45–75%, headline #f4f0ea, body #b8b2aa, CTA surface rgba(255,255,255,.14), border rgba(255,255,255,.22), 999px radius, headline 52–72px desktop with generous line-height, 20–28px vertical gaps. Include a compact scroll cue only if the page is long.

### Never
- Never reuse the reference headline, product name, logo, background image, or illustration.
- Never use multiple competing CTAs.
- Never sacrifice legibility for photographic drama.