инструкция
В <body> добавь <main class="card"> с max-width 460px, width 100%, margin 80px 24px, padding 40px 36px, background rgba(255,255,255,0.04), border 1px solid rgba(255,255,255,0.1), border-radius 20px, backdrop-filter blur(20px), box-shadow 0 20px 60px rgba(0,0,0,0.4). Внутри: <div class="kicker" style="font-size: 11px; color: #d4a574; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px;">тариф</div>, <h1 style="font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 8px;">Калькулятор</h1>, <p style="color: rgba(245,245,247,0.55); font-size: 15px; margin-bottom: 32px;">Подберите тариф под свои задачи.</p>. ВАЖНО: НЕ удаляй существующие стили <body> с display flex — карточка будет центрирована автоматически.
что обратить внимание
- ›Стеклянная карточка с blur даёт глубину на градиентном фоне
- ›Маленький UPPERCASE-кикер с акцентом сверху — связь с брендом
- ›box-shadow: 0 20px 60px — большая мягкая тень снизу, ощущение «парения»