## 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/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073740-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073707-full.webp
- Component on Kage: https://kage.design/component/turso-feature-grid-3

## Before you start
Ask the user what their product does, who it is for, and what brand direction they want (including colours, typography, tone, and preferred CTA). Then apply the principles below to create an original enterprise capability feature section for that product—not a copy of the reference.

## Build this section
Create a responsive, dark-theme feature section that communicates why a product is suitable for serious or enterprise use. Use a large, softly rounded outer panel with a subtle border and generous internal padding. Divide the content into two balanced columns:

- **Left column:** a compact, high-impact heading describing the enterprise benefit; a short paragraph explaining several concrete capabilities or outcomes; and a CTA row with one filled primary button plus one quieter text link with an arrow or equivalent directional affordance.
- **Right column:** three vertically stacked capability cards. Each card should contain a circular accent icon on the left and a short, highly scannable capability label. Keep the rows equal in height and align icon, text, and edges consistently. Add a thin accent rule or progress-like underline near the bottom of each card as a restrained visual signature.

## Design language

### Layout and alignment
- Place the section inside a wide page container, approximately 92–94% of the viewport width, with a sensible maximum width around 1200–1240px.
- Use a two-column grid around 1:1.15 or 1:1.2, with a generous 56–80px gap on desktop.
- Vertically centre the left content against the capability stack rather than top-aligning everything.
- Use 56–64px outer-panel padding on desktop and 28–32px on smaller screens.
- On narrow screens, collapse to one column: content first, capability cards second. Keep the CTA row usable without forcing awkward wrapping.
- Give the outer panel a minimum visual height of roughly 400–460px, but let content determine height naturally.

### Typography hierarchy
- Use a modern sans-serif with a sturdy, contemporary feel.
- Set the heading in a bold or semibold weight, around 36–42px desktop with approximately 1.05 line-height; constrain its measure so it wraps into two or three purposeful lines.
- Set body copy around 16px with 1.3–1.45 line-height and a muted colour. Keep it to roughly 4–5 short lines on desktop.
- Use 16–18px medium-weight labels for capability rows, with enough contrast to remain readable against the dark surface.
- Buttons and links should be 14–16px, semibold, with clear focus states.

### Colour
Use the user's brand palette where available. If no palette is provided, begin with:
- Page background: near-black navy `#0B0F12`
- Outer panel and card surfaces: `#0D1216` to `#10161A`
- Primary text: soft white `#F4F7F5`
- Secondary text: cool grey `#8C9698`
- Borders: low-contrast blue-grey `#263036`
- Accent mint/cyan: `#43E8C2` or an equivalent brand accent
- Accent text on filled controls: very dark `#07100F`

Use the accent sparingly: primary CTA fill, circular icons, link emphasis, and the thin card underlines. Do not turn every surface into an accent colour.

### Borders, radius, and depth
- Give the outer panel a 14–18px radius and a 1px subtle border.
- Give capability cards a 12–14px radius and a 1px border that is slightly more visible than the outer panel border.
- Avoid heavy shadows. If depth is needed, use a barely perceptible dark shadow or a subtle inset highlight.
- Keep the panel and cards visually flat, premium, and architectural.

### Iconography and interaction
- Use simple line icons inside 42–46px circular accent badges. Icons should be generic representations of the capability, not decorative illustrations.
- Make the primary button a pill with approximately 22–26px horizontal padding and 12–14px vertical padding.
- Make the secondary link visually lighter but clearly interactive; include an arrow, chevron, or equivalent.
- Add hover and keyboard-focus states: slightly brighten the card border or underline, lift the card by 1–2px at most, and preserve accessible contrast.
- Ensure the entire design works with reduced motion and has visible `:focus-visible` outlines.
- Keep capability cards informative rather than requiring interaction unless the product genuinely benefits from expandable details.

## Content guidance
Write original, product-specific copy based on the user's product. The heading should express an enterprise-level promise, the paragraph should mention credible capabilities or outcomes, and the three rows should represent distinct trust, deployment, security, performance, or governance benefits. Avoid jargon unless it is meaningful to the intended audience.

## Never
- Never use the reference product's logo, product name, brand name, or exact wording.
- Never reuse the reference copy, CTA labels, capability labels, or sentence structure verbatim.
- Never copy the exact icon designs, illustrations, imagery, layout proportions, or visual assets.
- Never add decorative imagery when a restrained, text-and-icon treatment is sufficient.
- Never sacrifice responsive behaviour, semantic structure, keyboard accessibility, or readable contrast for visual similarity.