Hero Section

Build a hero section for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- Layout: everything centered in a single column, max width around 720px, generous vertical padding. No image.
- Contents: one headline (max 8 words, the core benefit, not the product name), one supporting subline (max 20 words, who it is for and what it does), and the CTA block.
- One primary CTA button in my brand's accent color, action-verb label (config constant for label and target).
- Optional small trust line under the CTA (e.g. "No credit card required"); include it only if it is true for my product, config constant, empty = not rendered.

COPY
- Write placeholder copy that states a concrete benefit, then leave a clearly marked TODO for me to replace it with my real value proposition. No hype words ("revolutionary", "game-changing"), no invented stats or customer counts.

BEHAVIOR
- The primary CTA scrolls to a section or links to a URL from a config constant.
- The hero fills most of the first viewport on desktop (min-height around 80vh) but never traps content: on short screens it shrinks gracefully and never hides the CTA below the fold.

QUALITY
- Semantic markup: the headline is the page's single h1; the subline is a p, not a heading.
- Any image placeholder has explicit width/height (or aspect-ratio) so there is zero layout shift while it loads; mark it as the LCP candidate and load it eagerly with high fetchpriority.
- Text meets WCAG AA contrast against the background; buttons at least 44px tall with visible focus rings.
- Fully responsive: stacks vertically on mobile with the headline first, image (if any) after the CTA.

QUESTIONS
- Before you build, find or ask for: my real value proposition (who it is for and the core benefit), and the primary CTA's label and target. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.