## 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/fastrouter-ai/218f3f00-5cca-4309-9765-d0ad1151c96f-1791266480-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fastrouter-ai/218f3f00-5cca-4309-9765-d0ad1151c96f-1791266439499-full.webp
- Component on Kage: https://kage.design/component/fastrouter-feature-grid-3

## Before you start
Ask which audiences the user's product serves and what action each audience should take. Use those answers to create role-based cards without copying the reference.

Build a dark solutions section with a two-column intro: a large light heading on the left and a short positioning paragraph on the right. Below it, place three equal role cards in a row, each with a small icon, role title, two-line value statement, and a simple abstract decorative shape anchored at the bottom. Follow with a full-width outlined card for an advanced or self-hosted offering and a large bordered CTA panel with a heading, supporting copy, button, and a subtle product-themed background visual. Use `#080909` or `#0b0c0d` background, white text, muted gray `#a7aab0`, borders `#303236`, 12–14px radii, and restrained blue/pink gradient accents. Keep cards equal height, use 24px gaps, and make the entire card or its CTA keyboard accessible. Stack all cards on mobile.

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