## 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/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106577-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/viso-now/0aea1f2c-e643-44c4-ac70-db26df0b3931-1789106536289-full.webp
- Component on Kage: https://kage.design/component/viso-now-cta

## Before you start
Ask what the user's product does, who it is for, and what brand personality, colours, typography, and primary conversion goal should shape this section. Then apply the principles below to create an original CTA for that product rather than reproducing the reference.

## Design language

Build a self-contained, full-width CTA panel with a premium, cinematic feel and a strong conversion focus.

### Layout and alignment
- Use a wide horizontal container with generous outer margins and a large rounded rectangle panel.
- Keep all content in a single left-aligned column rather than centering it; align the eyebrow, heading, paragraph, and actions to the same vertical guide.
- Constrain the text column to roughly 620–700px so the headline wraps into intentional, powerful lines instead of spanning the entire panel.
- Give the panel substantial internal padding: approximately 64–80px on desktop, reducing to 32px on mobile.
- Place the eyebrow near the top, followed by a clear gap before the heading; put supporting copy beneath the heading and the actions beneath the copy.
- On small screens, preserve the hierarchy while allowing the headline and buttons to wrap or stack. Make buttons full-width only if that better suits the user's product.

### Typography hierarchy
- Use a modern sans-serif with a confident, slightly editorial character; use the product's brand font when available.
- Set the main heading in a heavy weight, approximately 58–68px on desktop with a tight line-height around 0.98–1.08. Use responsive sizing down to roughly 40–48px on mobile.
- Make the heading short enough to read as a decisive promise, with deliberate line breaks determined by the text column rather than manual breaks that fail responsively.
- Set the supporting paragraph at approximately 16px with a 1.45–1.6 line-height and a softer contrast than the heading.
- Render the eyebrow as compact, small text around 12–14px with medium weight and restrained letter spacing.

### Colour and atmosphere
- Use a near-black panel background, approximately #0B0A12 or #0D0C14.
- Add a subtle, oversized radial glow behind the upper-right area using the product's accent colour, such as a muted magenta or violet around #B83B9F / #5D2E68, fading into transparency. Keep it atmospheric rather than decorative.
- Use warm or neutral white for the heading, approximately #F7F6F4.
- Use muted cool-gray copy around #A5A3AE.
- Make the primary action a saturated brand-accent gradient or solid colour, for example pink-to-magenta #E34BAF → #D85AD7, with dark or white text selected for accessible contrast.
- Use a translucent charcoal secondary button around #25242D with a subtle light border.

### Borders and radius
- Give the main panel a generous radius around 28–32px, reducing slightly on narrow screens if necessary.
- Add a very subtle 1px border in translucent white or gray, such as rgba(255,255,255,0.12), to define the panel against a light page background.
- Style the eyebrow as a small pill with a transparent dark fill, a thin low-contrast border, and a fully rounded radius.
- Use pill-shaped buttons with approximately 999px radius and comfortable horizontal padding around 24–28px.

### Interaction
- Make the primary action visually dominant through colour and brightness, not size alone.
- On hover, slightly raise or brighten the primary button and increase the glow subtly; transition colour, shadow, and transform over 150–220ms.
- On hover, lighten the secondary button border and background without competing with the primary action.
- Provide clear keyboard focus rings with sufficient contrast around both buttons.
- Ensure text, controls, and gradients meet accessible contrast requirements and that the CTA remains legible without relying on the glow.

## Never
- Never use logos, product names, slogans, or exact copy from the reference.
- Never copy the reference's imagery, illustrations, gradients, or decorative shapes literally; use only the underlying atmospheric treatment as inspiration.
- Never assume the same pink, purple, or dark palette if it conflicts with the user's brand.
- Never use unexplained manual line breaks that damage responsive behaviour.
- Never add extra navigation, badges, testimonials, or features that weaken the CTA's focused conversion path.