## 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/termsquad-com/d12b8131-9740-4063-aef8-780525dfffce-1789166959-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/termsquad-com/d12b8131-9740-4063-aef8-780525dfffce-1789166919347-full.webp
- Component on Kage: https://kage.design/component/termsquad-feature-grid-4

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to their product rather than copying this reference.

Build a centered feature-grid section that explains the product ecosystem in four cards. Start with a small eyebrow, a two-line heading, and a short centered paragraph. Below, use a 2x2 grid of tall rounded cards: one for supported tools, one for browser or terminal access, one for fully managed infrastructure, and one for workload capacity. Each card should combine a tiny category label, a clear two-line title, concise supporting copy, a visual miniature, and a bottom action link. Use #07090a background, #0d1112 cards, #202624 borders, 16px radius, white #edf2ef, muted #8d9692, and mint #a9e9c0 for status and selected states. Keep cards equal height, use 24–28px internal padding, and make hover lift and border brightening subtle. Stack to one column on mobile.

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