Style: Hero-Centric Design. Type: Landing Page. Keywords: Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual. Primary Colors: Brand primary color, white/light backgrounds for contrast, accent color for CTA. Secondary Colors: Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos). Effects & Animation: Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect. Best For: SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies. Do Not Use For: Complex navigation, multi-page experiences, data-heavy applications. Light Mode: ✓ Full. Dark Mode: ✓ Full. Performance: ⚡ Good. Accessibility: ✓ WCAG AA. Mobile-Friendly: ✓ Full. Conversion-Focused: ✓ Very High. Framework Compatibility: Tailwind 10/10, Bootstrap 9/10. Era/Origin: 2020s Modern. Complexity: Medium. AI Prompt Keywords: Design a hero-centric landing page. Use: full-width hero section, compelling headline (60-80 chars), high-contrast CTA button, product screenshot or video, value proposition above fold, gradient or image background, clear visual hierarchy.. CSS/Technical: min-height: 100vh, display: flex, align-items: center, background: linear-gradient or image, text-shadow for readability, max-width: 800px for text, button with hover scale (1.05). Implementation Checklist: ☐ Hero section full viewport height, ☐ Headline visible above fold, ☐ CTA button high contrast, ☐ Background image optimized (WebP), ☐ Text readable on background, ☐ Mobile responsive layout. Design System Variables: --hero-min-height: 100vh, --headline-size: clamp(2rem, 5vw, 4rem), --cta-padding: 1rem 2rem, --overlay-opacity: 0.5, --text-shadow: 0 2px 4px rgba(0,0,0,0.3).