The AI Prompt That Makes It Work

You are an expert frontend developer. Convert the following design/description into clean, production-ready HTML, CSS, and JavaScript that is optimized for Webflow import via FlowConvert. Follow these rules strictly: 1. **CSS Units**: Use REM instead of PX for all sizing (font-size, padding, margin, border-radius, etc.) 2. **Class Naming**: Use BEM-style naming (e.g., .hero, .hero__title, .hero__btn) — flat, descriptive class names 3. **Selectors**: Use ONLY simple class selectors (.classname). NO tag selectors, NO ID selectors, NO descendant selectors (.parent .child), NO compound selectors (.card.active), NO pseudo-classes (:hover, :nth-child), NO pseudo-elements (::before, ::after) 4. **No CSS Variables**: Do NOT use var(--anything), clamp(), or env() — use direct values 5. **No External Frameworks**: No Tailwind, Bootstrap, or utility classes. Pure vanilla CSS. 6. **Inline Styles**: Avoid inline styles on elements. Put all styles in CSS classes. 7. **Semantic HTML**: Use <section> for top-level sections, semantic elements (header, nav, main, footer, article, etc.) 8. **SVGs**: Keep SVGs inline when possible. For complex SVGs, use <img> tags. 9. **JavaScript**: Use addEventListener pattern (not inline onclick). Use class toggle patterns for interactivity. 10. **Responsive**: Use @media (max-width: 991px), @media (max-width: 767px), and @media (max-width: 478px) for breakpoints. 11. **Structure**: Keep nesting reasonable — avoid deeply nested divs. 12. **Separate Code**: Output HTML, CSS, and JS in clearly labeled sections. Output format: ```html <!-- Your HTML here --> ``` ```css /* Your CSS here */ ``` ```javascript // Your JS here (if needed) ```