## 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/dotverse/da38b075-ca59-4d6c-be00-140ffcca760c-1793253651-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/dotverse/da38b075-ca59-4d6c-be00-140ffcca760c-1793253624916-full.webp
- Component on Kage: https://kage.design/component/dotverse-hero

## Before you start
Ask the user what their product is, what action the hero should drive, and what brand mood, colors, and imagery they want. Apply the following structure to that product, creating original content.

Build a centered hero on a warm off-white canvas near `#f8f7f2`. Start with a compact row of original product/avatar cues above a bold one-line headline; use a contemporary sans-serif, approximately 44–52px at desktop, tight line-height around 0.98, strong weight, and near-black `#20201e`. Add two short centered supporting lines in muted gray `#77766f`, around 13–15px. Below the copy, place a large media/demo panel spanning most of the content width, approximately 790px wide, with a very light cream fill `#fbfaf5`, a 1px soft border `#e2e0d6`, and a 16–18px radius. Include a small pill-shaped play control in the panel’s upper-left corner, with a subtle border, tiny label, and duration. Use a single large, friendly original product visual centered in the panel, with ample breathing room. The hero should end after the entire media panel, not immediately after the headline. Keep vertical rhythm generous: roughly 28–36px between text groups and 48–60px around the media panel.

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