## 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/keet/3f4c1a62-9831-48e4-b5b3-36349228cf18-1790229826-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/keet/3f4c1a62-9831-48e4-b5b3-36349228cf18-1790229767831-full.webp
- Component on Kage: https://kage.design/component/keet-feature-grid

## Before you start
Ask what core product capability this section should explain, what media is available, and what the user's brand tone is. Then build the section around those answers.

Create a centered feature section with a small rounded category badge, a concise heading, and one or two lines of supporting copy above a large media/demo surface. Use a max content width of roughly 660–700px for the visual, a 10–16px radius, and substantial vertical spacing. The badge can use a bright brand accent such as #2d83df with white text; keep the heading near #161616 and supporting text around #777777. Use a 30–38px heading with 1.1 line-height and a 14–16px body.

The demo surface should have a dark neutral background around #080808, a fine #252525 border, and a 14–18px radius. If it is video, include an accessible poster, play control, captions, and a subtle hover state; if it is an app preview, use a restrained placeholder UI rather than decorative noise. Keep the media dominant and let whitespace separate it from surrounding sections. Stack the heading and media on mobile while preserving a comfortable 24px side gutter.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the exact video frame or dark grid treatment.
- Never autoplay sound or hide essential information inside the media.