## 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/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073850-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/astro-build/2448cc02-1e48-497c-9333-8941f9d81557-1789073818-full.webp
- Component on Kage: https://kage.design/component/astro-build-feature-grid

## Before you start
Ask me what my product is, who it is for, and what brand personality, colour palette, and content I want to use. Then apply the principles below to create an original feature-introduction section for my product—not a copy of any reference.

## Build this section
Create a dark, responsive feature-grid section that introduces the core value of a product before presenting three distinct benefits. The section should feel editorial, technical, and polished, with a strong typographic statement and lightweight visual accents.

### Layout and alignment
- Use a full-width section with a very dark navy-black background, approximately `#070916` to `#0b0d1d`.
- Constrain the content to a centered max-width of roughly `1200–1280px`, with responsive horizontal padding of `32px` on desktop and `20–24px` on mobile.
- Add generous top and bottom padding, approximately `96–128px` on large screens and `64–80px` on small screens.
- At the top, place a small eyebrow label followed by one large, left-aligned headline spanning most of the content width. The headline should wrap naturally into two lines on desktop rather than becoming a compact card title.
- Below the headline, create three equal-width feature columns in a single row with generous gaps, around `48–72px`. Stack them vertically on narrow screens while preserving clear separation.
- Keep all columns aligned to the same left edge. Each column should contain an icon, a short title, and a concise explanatory paragraph.
- Do not use cards or heavy containers around each feature; let the open background and spacing provide the grouping.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly technical character. Use a suitable system or project font rather than assuming a specific font.
- Eyebrow: `14–16px`, semibold, compact line-height, coloured accent text, with sentence case or a short question-style label.
- Main headline: approximately `40–56px` on desktop, `32–40px` on mobile; line-height around `0.98–1.08`; regular weight overall, with optional semibold emphasis on the product/category phrase.
- Feature titles: `15–17px`, semibold, bright text.
- Feature descriptions: `16px`, line-height around `1.45–1.6`, muted lavender-grey such as `#a7a9ba`; keep each description to roughly 2–4 lines where possible.
- Use strong contrast for the headline, around `#f1f1f7`, without making every element pure white.

### Colour and visual accents
- Use an almost-black navy background with a very subtle blurred radial glow near the upper edge, mixing deep violet and blue tones such as `#241044`, `#171a55`, and transparent gradients. Keep it atmospheric, not decorative.
- Give the eyebrow a warm pink-to-purple accent, approximately `#d84f8c` or `#d85c9d`.
- Each feature gets a small circular icon holder, roughly `56–64px` square, positioned above its title.
- The icon holder should have a transparent or very dark interior and a thin multicolour gradient ring. Use three distinct accent combinations—such as blue/cyan, pink/magenta, and orange/yellow—but adapt them to the product’s brand palette when appropriate.
- Place a simple monochrome line icon inside each ring. Icons should be minimal and semantically related to the feature, not illustrations.

### Borders, radius, and spacing
- Use a fully circular radius for icon holders (`999px`).
- Use thin borders, around `1–2px`, with gradient or semi-transparent accent colour; avoid visible borders around the feature columns.
- Maintain approximately `18–24px` between icon and feature title, and `6–10px` between title and description.
- Keep the headline-to-grid gap around `48–64px` on desktop and `36–48px` on mobile.

### Interaction and accessibility
- This can be a static section, but add a restrained hover treatment to icon holders if appropriate: a slight lift, brighter ring, or soft glow. Avoid distracting motion.
- Respect `prefers-reduced-motion` and provide a visible focus style if any feature becomes interactive.
- Ensure sufficient colour contrast, semantic heading order, readable line lengths, and accessible labels for icons. Do not rely on colour alone to communicate meaning.

## Never
- Never copy the reference’s logos, product names, brand wording, feature copy, or exact text.
- Never reuse its illustrations, icons, imagery, or distinctive artwork; create simple original icons or use a neutral icon set.
- Never reproduce the reference layout so literally that it feels cloned; preserve the design principles while adapting the hierarchy, content, and visual language to my product.
- Never add unnecessary cards, gradients, shadows, animations, or decorative elements that weaken the clear feature comparison.