ТЗ: Вёрстка блоков для конструктора Tobiz на примере принципы интервью

Контекст

Я работаю на конструкторе сайтов Tobiz. Мне нужно сверстать длинный документ, разбитый на несколько смысловых блоков. Каждый блок будет вставлен на страницу как отдельный HTML-виджет.

Блок 0 (обложка) уже стоит на странице. Мне нужны последующие блоки в едином стиле с обложкой.

Технические требования Tobiz

1. Каждое CSS-правило обязательно с !important — иначе перебиваются стилями конструктора
2. Каждый блок имеет уникальный класс-префикс (.mv-s1, .mv-s2, .mv-s3 и т.д.) — чтобы стили не конфликтовали между блоками
3. Тёмный фон задаётся напрямую на корневом контейнере блока через background:#0f0f1a!important — без обёрток с прозрачным фоном, иначе фон конструктора (белый) будет просвечивать
4. Все теги внутри (p, h1-h6, ul, li, a, span, em, strong, blockquote и т.д.) должны иметь явные стили с !important: font-family, font-size, font-weight, line-height, color, margin, padding, background — иначе Tobiz перебьёт
5. Никаких внешних шрифтов через @import — использовать только 'Inter', sans-serif через var(--mv-font,'Inter',sans-serif)
6. Адаптив через @media(max-width:700px) — для мобильных

Дизайн-система (соответствие обложке)

Цвета:

• Фон блока: #0f0f1a
• Основной текст: #e2e0ff (светло-фиолетовый)
• Вторичный текст: #c8c6e0 или #c0bfd6
• Приглушённый текст / метки: #a0a0b6
• Едва заметный текст: #706f80
• Акцент 1 (фиолетовый): #a78bfa
• Акцент 2 (золото): #d4af37
• Градиент акцента: linear-gradient(135deg,#a78bfa,#d4af37) — применяется через -webkit-background-clip:text для подсветки ключевых слов

Типографика:

• Шрифт: var(--mv-font,'Inter',sans-serif)
• Заголовки: font-weight:700-900, letter-spacing:-.01em или .04em, line-height:1.15-1.2
• Основной текст: font-size:1.05-1.15em, line-height:1.65-1.7, font-weight:400
• Теги/метки (uppercase): font-size:.68-.78em, letter-spacing:.18-.28em, font-weight:600-700, text-transform:uppercase
• Подсветка ключевых слов в заголовках: через <span> с градиентом фиолетовый→золото

Структура блока:

html

<style>
.mv-sN{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:0!important;font-family:var(--mv-font,'Inter',sans-serif)!important;overflow:hidden!important;background:#0f0f1a!important}
.mv-sN-card{position:relative!important;padding:56px 20px 48px!important}
/* ... остальные стили с !important ... */
</style>

<div class="mv-sN">
  <div class="mv-sN-card">
    <div class="mv-sN-body">
      <!-- контент -->
    </div>
  </div>
</div>

Ширина и отступы (как на обложке):

• Внешний контейнер: max-width:1170px
• Внутренний контент: max-width:720-800px, margin:0 auto
• Padding по бокам: 40px (десктоп), 16px (мобайл)
• Padding по вертикали блока: 56-80px сверху, 48-80px снизу

Декоративные элементы (опционально):

• Радиальные glow-пятна (radial-gradient фиолетовый/золотой, opacity .04-.06) — position:absolute, pointer-events:none
• Тонкие разделители: height:1px, background:linear-gradient(90deg,transparent,rgba(167,139,250,.25),transparent)

Образец блока (обложка, уже стоит на странице)

html

<style>
.mv-h00{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:0!important;font-family:var(--mv-font,'Inter',sans-serif)!important;overflow:hidden!important}
.mv-h00-card{position:relative!important;border-radius:18px!important;background:#0f0f1a!important;overflow:hidden!important;padding:56px 20px 48px!important}
.mv-h00-glow{position:absolute!important;top:-20%!important;left:50%!important;transform:translateX(-50%)!important;width:900px!important;height:900px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(167,139,250,.06) 0%,transparent 55%)!important;pointer-events:none!important}
.mv-h00-body{position:relative!important;z-index:2!important;max-width:720px!important;margin:0 auto!important;text-align:center!important}
.mv-h00-brand{font-size:.78em!important;font-weight:700!important;letter-spacing:.28em!important;line-height:1.2!important;margin:0 0 20px!important;padding:0!important;text-transform:uppercase!important;background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
.mv-h00-title{font-size:clamp(2.2em,5.5vw,4.2em)!important;font-weight:900!important;letter-spacing:.04em!important;line-height:1.15!important;margin:0 0 20px!important;padding:0!important;color:#e2e0ff!important}
.mv-h00-title span{background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
.mv-h00-tag{font-size:.72em!important;font-weight:600!important;letter-spacing:.22em!important;line-height:1.3!important;margin:0 0 16px!important;padding:0!important;text-transform:uppercase!important;color:#a0a0b6!important}
.mv-h00-sub{font-size:1.1em!important;font-weight:400!important;letter-spacing:.02em!important;line-height:1.5!important;margin:0 0 24px!important;padding:0!important;color:#c0bfd6!important}
.mv-h00-meta{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;font-size:.82em!important;line-height:1.4!important;gap:8px 20px!important;margin:0!important;padding:0!important;color:#a0a0b6!important}
.mv-h00-meta span{color:#e2e0ff!important;font-weight:600!important}
.mv-h00-meta p{margin:0!important;padding:0!important}
.mv-h00-quote{font-size:1.05em!important;font-style:italic!important;line-height:1.4!important;margin:28px 0 0!important;padding:0!important;color:#a78bfa!important}
@media(max-width:700px){.mv-h00-card{padding:36px 12px 32px!important}.mv-h00-title{font-size:clamp(1.8em,7vw,2.8em)!important}.mv-h00-brand{font-size:.72em!important}.mv-h00-tag{font-size:.68em!important}.mv-h00-meta{font-size:.78em!important}.mv-h00-quote{font-size:.95em!important}}
</style>

<div class="mv-h00">
  <div class="mv-h00-card">
    <div class="mv-h00-glow"></div>
    <div class="mv-h00-body">
      <p class="mv-h00-brand">РАБОЧИЙ ДОКУМЕНТ</p>
      <h1 class="mv-h00-title"><span>Принципы</span> беседы и интервью</h1>
      <p class="mv-h00-tag">ДЛЯ ТЕХ, КТО ХОЧЕТ ВЕСТИ ДИАЛОГ</p>
      <p class="mv-h00-sub">Документ о том, на каких основаниях я готов разговаривать...</p>
      <div class="mv-h00-meta">
        <p>Автор: <span>Сергей Колост</span></p>
        <p>Версия: <span>1.1</span></p>
        <p>Статус: <span>живой документ</span></p>
      </div>
      <p class="mv-h00-quote">«Мотив определяет результат»</p>
    </div>
  </div>
</div>

Что я буду присылать

Я пришлю текст документа (Word/txt), разбитый на смысловые части. Тебе нужно:

1. Выдавать по одному блоку за раз (по моей команде «дальше»)
2. Каждый блок = отдельная Часть документа
3. Каждый блок должен быть самодостаточным (свой <style> + свой HTML)
4. Уникальный префикс класса для каждого блока: .mv-s1, .mv-s2, .mv-s3...
5. Тёмный фон #0f0f1a обязательно на корневом контейнере с !important
6. Внутри блока можно использовать разные структуры под содержание: цитаты, списки, карточки, два колонки, нумерованные пункты, разделители — главное единый стиль с обложкой
7. Внутри блока в нужном месте оставлять комментарий <!-- ★ СЮДА ВСТАВИТЬ КОД АНИМАЦИИ ★ --> для будущих анимаций (точки, звёзды)

Что мне НЕ надо

• Не использовать внешние ассеты (картинки, шрифты, иконки)
• Не использовать JS — только чистый HTML + CSS
• Не делать слишком ярких/контрастных элементов — стиль спокойный, премиальный, читательский
• Не повторять одну и ту же структуру в каждом блоке — варьировать (где-то цитаты, где-то списки, где-то акцент-карточки)

Старт

Готов прислать текст первой части. Жду подтверждения, что ТЗ понятно, и спрашивай что уточнить, если нужно.