## 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/humalike-x-gta-rp/6ac3c297-ddf9-47c3-9f0d-e872104f2707-1790575367-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/humalike-x-gta-rp/6ac3c297-ddf9-47c3-9f0d-e872104f2707-1790575278727-full.webp
- Component on Kage: https://kage.design/component/humalike-x-gta-rp-hero

## Before you start
Ask what the user's product is, what action the hero should drive, and which visual mood fits its brand. Then apply these principles to that product rather than copying the reference.

Create a contained cinematic hero directly beneath the floating navigation. Use a full-bleed responsive background video or image with a dark overlay, rounded lower corners, and a fixed minimum height that feels immersive without hiding the next section. Center a short, bold, all-caps or strongly emphatic headline, one concise supporting line, and a single rounded CTA. Keep the content vertically balanced around the visual focal point and add a tiny downward scroll indicator near the bottom edge. Make the headline responsive with tight line-height and avoid placing text over the busiest part of the image.

Use a near-black overlay around #00000066–#00000099, warm white type #f5f3ef, muted supporting text #c9c5be, and an off-white CTA around #f3f0e9 with dark text. Use 12–16px corner radii and restrained shadows. The CTA should have a subtle lift on hover and visible keyboard focus; background media should be decorative and muted for accessibility.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never recreate the reference headline, GTA scenes, or exact media.