инструкция
В <main> вставь <section class="hero" style="padding: 100px 24px 40px; text-align: center;">. Внутри <div class="container"> с тремя элементами: 1) <span class="kicker"> font-size 11px, font-weight 700, letter-spacing 0.2em, text-transform uppercase, color #10b981, display inline-flex, align-items center, gap 8px, padding 6px 14px, background rgba(16,185,129,0.12), border 1px solid rgba(16,185,129,0.3), border-radius 999px, margin-bottom 24px — текст «✦ ПРОЗРАЧНЫЕ ТАРИФЫ». 2) <h1> font-size clamp(40px, 6vw, 72px), font-weight 800, letter-spacing -0.03em, line-height 1.05, max-width 720px, margin 0 auto 20px — текст «Платите за то, что реально используете». 3) <p> font-size 18px, line-height 1.55, color rgba(255,255,255,0.65), max-width 580px, margin 0 auto — текст «Без скрытых платежей. Отмена в один клик. Деньги возвращаем в течение 14 дней без вопросов».
что обратить внимание
- ›«Капсула»-кикер с эмодзи и тонкой обводкой — современный паттерн SaaS-лендингов (Linear, Vercel)
- ›clamp(40px, 6vw, 72px) — заголовок плавно растягивается между мобилкой и десктопом
- ›max-width 720px на h1 удерживает оптимальную длину строки (60-80 символов) для чтения