## 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-1789193009-3.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-feature-grid

## Before you start
Ask what the user's product workflow is and what three or fewer actions matter most. Use the answers to create an original sequence.

Build a dark, vertically stacked how-it-works section with an eyebrow and three numbered feature rows. Each row should contain a large outlined step number, a concise title, and a short explanation; alternate the visual or illustration side between rows to create rhythm. Keep each row distinct without boxed cards, using alignment and whitespace as the structure.

Design language: background #030803, headings #f5f7f0, body text #9ca49a, and outlined numerals in a thin chartreuse stroke #b7ff30. Use 48–64px numerals, 20–24px titles, and 14–16px descriptions. Set a max-width around 700px, rows around 150–190px tall, and 1px separators only where useful. Give media a consistent 80–120px footprint and use responsive two-column rows that stack on mobile. Add sequential entrance animation with reduced-motion support.

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