## 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/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789193010-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789192974293-full.webp
- Component on Kage: https://kage.design/component/chathop-gallery

## Before you start
Ask what the user needs to demonstrate—workflow, result, or transformation—and whether video, animation, or an interactive preview is best. Then build an original demo section.

Create a centered media demonstration section with a small uppercase eyebrow, a strong title, and a large responsive video or interactive preview beneath it. The media should be the dominant object, with a short muted caption below. Give the frame enough height to feel immersive while keeping the section within a sensible reading rhythm.

Design language: use a dark background #030803 with a subtle green glow toward the lower portion. Use white title text around 34–44px, uppercase eyebrow in 10–11px letter-spaced chartreuse, and caption in muted #7f897d. The media frame should be approximately 70–80% of desktop width, aspect ratio 16:9 or product-appropriate, background #111313, 1px border #343c32, 14–18px radius, and a soft shadow. Provide native playback controls or obvious play/pause controls, keyboard access, poster fallback, and responsive full-width behavior on mobile.

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