## 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/fish-audio-drama-3/b8b3d5d8-1af1-45c3-b814-ec39ae20de20-1792217026-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fish-audio-drama-3/b8b3d5d8-1af1-45c3-b814-ec39ae20de20-1792216963457-full.webp
- Component on Kage: https://kage.design/component/fish-audio-drama-3-hero

## Before you start
Ask what the user's product is, who it serves, and what brand personality it should convey. Then create an original hero using these principles for that product.

Design a spacious, two-part hero. At the top, place a small category/status label, a large left-aligned headline, and concise explanatory copy with one strong dark pill CTA. Beneath it, show a wide interactive product preview inside a large rounded frame: use a soft abstract background, a white floating application panel, tabs or modes along the top, a content area, and an audio waveform/player row with a clear play control. Include a secondary footer strip within the preview for product attribution and another action.

Use a warm neutral page background around `#f7f6f3`, black typography around `#171717`, muted gray body copy around `#747474`, white panels, subtle `#dedbd5` borders, and 20–28px corner radii. Use a restrained two-column intro grid with the headline occupying more width than the copy. Keep the preview high contrast and ensure its controls have visible hover, focus, and pressed states. On smaller screens, stack the intro and make the preview horizontally contained rather than allowing it to overflow.

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