/* ============== Promo page (Продвижение объявлений) sections ============== */

/* ===== Hero: 0 blocks fear-closer ===== */
function PromoHero() {
  const stats = [
    {
      big: '0',
      cap: 'блокировок',
      text: 'За всю историю компании. Кейс Геоникс: 1 426 объявлений в ротации — ноль проблем с модерацией',
    },
    {
      big: '+20%',
      cap: 'просмотров',
      text: 'Инфографика, закрывающая возражения на первом фото — по данным наших кейсов',
    },
    {
      big: '115 ₽',
      cap: 'стоимость лида',
      text: '«Вся Доставка» (нерудные материалы) — в 2–4 раза ниже Яндекс.Директа',
    },
    {
      big: '3–5',
      cap: 'дней до заявок',
      text: 'До первых целевых обращений. Подтверждено всеми тремя нашими кейсами',
    },
  ];

  return (
    <section id="top" className="phero">
      <div className="phero__grain" aria-hidden></div>
      <div className="wrap phero__wrap">

        <div className="shero__breadcrumbs">
          <a href={(window.FormulaTheme || {}).homeUrl || '/'}>Главная</a>
          <span>/</span>
          <a href={((window.FormulaTheme || {}).urls || {}).services || '#'}>Услуги</a>
          <span>/</span>
          <span className="shero__breadcrumbs-current">Продвижение объявлений</span>
        </div>

        <div className="phero__top">
          <div className="phero__head">
            <div className="chip shero__chip"><span className="dot-red"></span> Услуга · Продвижение</div>
            <h1 className="display phero__h1">
              Продвижение объявлений на Авито: до{' '}
              <span className="phero__h1-big">5 000 объявлений</span>{' '}
              без единой блокировки
            </h1>
            <p className="lead phero__lead">
              Выводим карточки в топ через <strong>SEO, платные инструменты и ИИ-автоматизацию</strong>. Первые заявки — через 3–5 дней.
            </p>
            <div className="phero__safety">
              <Icon.Shield />
              <div>
                <div className="phero__safety-title">Безопасный масспостинг</div>
                <div className="phero__safety-text">Нейросети генерируют уникальные тексты, программная уникализация фото — без признаков дублирования</div>
              </div>
            </div>
          </div>

          <div className="phero__form">
            <div className="hero-form-card" id="hero-form">
              <div className="hero-form-card__pill"><Icon.Zap /> Бесплатно</div>
              <div className="hero-form-card__title">
                Получите расчёт стоимости продвижения
              </div>
              <p className="hero-form-card__sub">
                За 24 часа: реальные цифры по вашей нише и потенциал роста
              </p>
              <LeadForm
                id="phero-lead"
                columns={1}
                small
                fields={[
                  { key: 'name', label: 'Имя', validate: 'name', placeholder: 'Иван', required: true },
                  { key: 'phone', label: 'Телефон', validate: 'phone', placeholder: '+7 (___) ___-__-__', required: true, type: 'tel' },
                  { key: 'niche', label: 'Ниша', placeholder: 'Например, мебель', required: true },
                ]}
                button="Получить расчёт"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Принцип искренности: если Авито не подходит — скажем прямо
              </div>
            </div>
          </div>
        </div>

        <div className="phero__stats">
          {stats.map((s, i) => (
            <Reveal key={i} delay={i*80} className="phero__stat">
              <div className="phero__stat-big">{s.big}</div>
              <div className="phero__stat-cap">{s.cap}</div>
              <p className="phero__stat-text">{s.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== For whom: товары vs услуги ===== */
function ForWhom() {
  const cols = [
    {
      kind: 'Продвижение товаров',
      tag: '01',
      forWho: 'Интернет-магазины, продавцы товаров, дропшипперы',
      focus: 'Визуал, цены, характеристики, отзывы, масштаб',
      what: 'Инфографика, оптимизация цен, заголовки с ключами, автостратегии. Масспостинг до 5 000 объявлений — каждое уникально.',
      caseName: 'Вся Доставка',
      caseMetrics: [
        { v: '3 500', l: 'лидов' },
        { v: '115 ₽', l: 'стоимость лида' },
        { v: '79 000', l: 'просмотров' },
        { v: '5,1 ₽', l: 'за просмотр' },
      ],
    },
    {
      kind: 'Продвижение услуг',
      tag: '02',
      forWho: 'Сервисные компании, мастера, агентства',
      focus: 'Экспертность, описание процесса, портфолио, география',
      what: 'Продающие тексты с закрытием возражений, примеры работ, отзывы, геотаргетинг, поведенческие факторы.',
      caseName: 'Геоникс (геодезия)',
      caseMetrics: [
        { v: '1 578', l: 'лидов' },
        { v: '389 ₽', l: 'стоимость лида' },
        { v: '1 426', l: 'объявлений' },
        { v: '0', l: 'блокировок' },
      ],
    },
  ];

  return (
    <section className="section forwhom">
      <div className="wrap">
        <Reveal className="forwhom__head">
          <div className="eyebrow">Для кого услуга</div>
          <h2 className="section-title">
            Продвижение товаров и услуг —<br/>
            <span className="text-red">в чём разница подхода?</span>
          </h2>
          <p className="lead" style={{maxWidth: 640, marginTop: 18}}>
            У каждого формата — своя задача и свои инструменты. Найдите свой подход и реальный кейс.
          </p>
        </Reveal>

        <div className="forwhom__grid">
          {cols.map((c, i) => (
            <Reveal key={i} delay={i*120} className="forwhom__col">
              <div className="forwhom__col-head">
                <div className="forwhom__col-tag">{c.tag}</div>
                <div className="forwhom__col-kind">{c.kind}</div>
              </div>

              <div className="forwhom__row">
                <div className="forwhom__row-label">Для кого</div>
                <div className="forwhom__row-value">{c.forWho}</div>
              </div>
              <div className="forwhom__row">
                <div className="forwhom__row-label">Фокус</div>
                <div className="forwhom__row-value">{c.focus}</div>
              </div>
              <div className="forwhom__row">
                <div className="forwhom__row-label">Что делаем</div>
                <div className="forwhom__row-value">{c.what}</div>
              </div>

              <div className="forwhom__case">
                <div className="forwhom__case-head">
                  <Icon.Star />
                  <div>
                    <div className="forwhom__case-label">Реальный кейс</div>
                    <div className="forwhom__case-name">{c.caseName}</div>
                  </div>
                </div>
                <div className="forwhom__case-metrics">
                  {c.caseMetrics.map((m, j) => (
                    <div key={j} className="forwhom__case-metric">
                      <div className="forwhom__case-metric-v">{m.v}</div>
                      <div className="forwhom__case-metric-l">{m.l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Three levels of promo ===== */
const PROMO_LEVELS = [
  {
    layer: 'Уровень 01',
    title: 'Органическое продвижение',
    icon: <Icon.Chart />,
    accent: 'organic',
    items: [
      '100+ заголовков с подтверждённой кликабельностью',
      'Инфографика под боли ЦА — закрытие возражений на первом фото',
      'Обновление объявлений в часы пиковой активности ЦА',
    ],
    resultBig: '+20%',
    resultCap: 'просмотров',
    resultTime: '1–2 недели · без затрат на рекламу',
  },
  {
    layer: 'Уровень 02',
    title: 'Платные инструменты Авито',
    icon: <Icon.Zap />,
    accent: 'paid',
    items: [
      'X2–X20 просмотров: продвижение в топ выдачи',
      'Автостратегии: умные ставки с автокорректировкой',
      'Выделение и Премиум: визуальное выделение в листинге',
    ],
    resultBig: '1 нед.',
    resultCap: 'первые заявки',
    resultTime: 'Быстрый рост охвата',
  },
  {
    layer: 'Уровень 03',
    title: 'Безопасный масспостинг',
    icon: <Icon.Bot />,
    accent: 'ai',
    items: [
      'Нейросети: уникальные тексты для каждого объявления',
      'Программная уникализация фото — без признаков дублирования',
      'База готовых стратегий по нишам — запуск за 3–5 дней',
    ],
    resultBig: '0',
    resultCap: 'блокировок',
    resultTime: 'Кейс Геоникс: 1 426 объявлений',
  },
];

function PromoLevels() {
  return (
    <section className="section section--dark levels">
      <div className="wrap">
        <Reveal className="levels__head">
          <div className="eyebrow">Инструменты продвижения</div>
          <h2 className="section-title">
            Три уровня продвижения<br/>
            <span className="text-red">объявлений</span>
          </h2>
          <p className="lead" style={{maxWidth: 720, marginTop: 18}}>
            Комбинируем органику, платные инструменты Авито и безопасную автоматизацию — всё в одном проекте. По отдельности слабо, вместе — даёт стабильный рост.
          </p>
        </Reveal>

        <div className="levels__grid">
          {PROMO_LEVELS.map((l, i) => (
            <Reveal key={i} delay={i*120} className={`levels__card levels__card--${l.accent}`}>
              <div className="levels__card-head">
                <div className="levels__card-layer">{l.layer}</div>
                <div className="levels__card-icon">{l.icon}</div>
              </div>
              <h3 className="h3 levels__card-title">{l.title}</h3>
              <ul className="levels__list">
                {l.items.map((it, j) => (
                  <li key={j}>
                    <Icon.Check />
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
              <div className="levels__result">
                <div className="levels__result-row">
                  <div className="levels__result-big">{l.resultBig}</div>
                  <div className="levels__result-cap">{l.resultCap}</div>
                </div>
                <div className="levels__result-time">{l.resultTime}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Promo stages (4 шага — promo-specific texts) ===== */
const PROMO_STAGES = [
  {
    n: '01',
    title: 'Аудит объявлений',
    body: 'Анализируем тексты, фото, цены. Изучаем конкурентов. Находим ошибки, которые снижают позиции.',
    result: 'Конкретные ошибки и потенциал роста',
    time: '1–2 дня',
  },
  {
    n: '02',
    title: 'Оптимизация / создание',
    body: 'Пишем тексты под алгоритмы Авито, создаём инфографику, уникализируем фото для модерации.',
    result: '+20% просмотров · +15–18% откликов',
    time: '3–5 дней',
  },
  {
    n: '03',
    title: 'Запуск продвижения',
    body: 'Выбираем стратегию (органика / платное / комбо), настраиваем автостратегии, тестируем связки.',
    result: 'Первые целевые заявки',
    time: 'с 3–5 дня',
  },
  {
    n: '04',
    title: 'Контроль и масштаб',
    body: 'Отслеживаем позиции, стоимость лида, конверсию. Масштабируем успешные объявления.',
    result: 'Еженедельный отчёт · снижение CPL',
    time: 'еженедельно',
  },
];

function PromoStages() {
  return (
    <section className="section section--surface stages">
      <div className="wrap">
        <Reveal className="stages__head">
          <div className="eyebrow">Этапы работы</div>
          <h2 className="section-title">
            Как проходит продвижение<br/>
            объявлений — <span className="text-red">4 шага</span>
          </h2>
          <p className="lead" style={{maxWidth: 580, marginTop: 18}}>
            Прозрачный процесс: вы видите, что происходит и какой результат на каждом шаге.
          </p>
        </Reveal>

        <div className="stages__list">
          {PROMO_STAGES.map((s, i) => (
            <Reveal key={i} delay={i*80} className="stages__item">
              <div className="stages__item-left">
                <div className="stages__item-num">{s.n}</div>
                <div className="stages__item-time">{s.time}</div>
              </div>
              <div className="stages__item-body">
                <h3 className="h3 stages__item-title">{s.title}</h3>
                <p className="stages__item-text">{s.body}</p>
                <div className="stages__item-result">
                  <Icon.ArrowRight />
                  <span>{s.result}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Promo FAQ (page-specific) ===== */
const PROMO_FAQ = [
  {
    q: 'Не будет ли блокировки от масспостинга?',
    a: <>За всю историю агентства — <strong>ни одного заблокированного аккаунта</strong>. Нейросети создают уникальные тексты, программная обработка фото исключает дубли. Кейс Геоникс: <strong>1 426 объявлений — ноль блокировок</strong>.</>,
  },
  {
    q: 'Как быстро объявление попадёт в топ?',
    a: <>При <strong>платных инструментах — 1–3 дня</strong>. Органическое продвижение — 1–2 недели. Первые целевые обращения в наших кейсах — через <strong>3–5 дней</strong> после старта.</>,
  },
  {
    q: 'Сколько стоит продвинуть одно объявление?',
    a: <>Стоимость услуг — <strong>от 50 000 ₽/мес</strong> (до 150 объявлений). Рекламный бюджет Авито рассчитывается индивидуально по результатам аудита ниши, гео и конкуренции — отдельно с вашего счёта, без комиссии.</>,
  },
  {
    q: 'Что если конкурент скопирует мои тексты?',
    a: <>Регулярно мониторим выдачу конкурентов. При копировании — обновляем объявления и запускаем новые А/Б тесты. <strong>База из 100+ проверенных заголовков</strong> позволяет быстро реагировать.</>,
  },
];

function PromoFaq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq">
      <div className="wrap faq__wrap">
        <Reveal className="faq__side">
          <div className="eyebrow">FAQ</div>
          <h2 className="section-title">
            Часто задаваемые<br/>
            <span className="text-red">вопросы</span>
          </h2>
          <p className="lead" style={{marginTop: 20}}>
            Закрываем два главных страха: <strong>блокировка аккаунта</strong> и <strong>слив бюджета</strong>. Отвечаем фактами — не обещаниями.
          </p>
          <button
            className="btn btn-dark btn-arrow"
            style={{marginTop: 22}}
            onClick={() => scrollToId('final-cta')}
          >
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>

        <div className="faq__list">
          {PROMO_FAQ.map((f, i) => (
            <button
              key={i}
              type="button"
              className={`faq__item ${open === i ? 'open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq__item-head">
                <div className="faq__item-num">{String(i+1).padStart(2,'0')}</div>
                <div className="faq__item-q">{f.q}</div>
                <div className="faq__item-toggle">{open === i ? '−' : '+'}</div>
              </div>
              {open === i && (
                <div className="faq__item-a">{f.a}</div>
              )}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Tariffs note about Авито budget (small banner above tariffs) ===== */
function PromoTariffsNote() {
  return (
    <section className="section-tight tariffs-note">
      <div className="wrap">
        <div className="tariffs-note__bar">
          <Icon.Sparkles />
          <span>
            <strong>Рекламный бюджет Авито</strong> — отдельно, с вашего счёта, без нашей комиссии. Прозрачно.
          </span>
        </div>
      </div>
    </section>
  );
}

/* ===== Final CTA (promo-specific) ===== */
function PromoFinalCta() {
  return (
    <section id="final-cta" className="section audit">
      <div className="wrap audit__wrap">
        <Reveal className="audit__head">
          <h2 className="audit__title">
            Готовы вывести объявления<br/>в топ Авито?
          </h2>
          <p className="audit__lead">
            Бесплатно проведём аудит ваших текущих объявлений: <strong>ошибки, потенциал роста, прогноз лидов</strong>.
          </p>
          <div className="audit__principles">
            <span><Icon.Check /> Аудит за 24 часа</span>
            <span><Icon.Check /> Конкретные ошибки</span>
            <span><Icon.Check /> Без обязательств</span>
          </div>
        </Reveal>
        <Reveal delay={150} className="audit__form-card">
          <LeadForm
            id="promo-final-form"
            columns={1}
            fields={[
              { key: 'name', label: 'Имя', validate: 'name', required: true, placeholder: 'Иван' },
              { key: 'phone', label: 'Телефон', validate: 'phone', required: true, placeholder: '+7 (___) ___-__-__', type: 'tel' },
              { key: 'niche', label: 'Ниша', required: true, placeholder: 'Например, мебель' },
            ]}
            button="Получить аудит бесплатно"
          />
        </Reveal>
      </div>
    </section>
  );
}

/* ============== Styles ============== */
const promoStyles = document.createElement('style');
promoStyles.textContent = `
/* Promo hero */
.phero {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(255, 106, 0, 0.20), transparent 60%),
    radial-gradient(800px 600px at 10% 100%, rgba(255, 47, 0, 0.12), transparent 65%);
}
.phero__grain {
  position: absolute; inset: 0; z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.05;
}
.phero__wrap { padding-top: 24px; padding-bottom: 64px; }
.phero__top {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: 56px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 1000px) { .phero__top { grid-template-columns: 1fr; gap: 32px; } }
.phero__h1 {
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-top: 24px;
}
.phero__h1-big {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.phero__lead {
  margin-top: 22px;
  font-size: 18px;
  color: rgba(255,255,255,0.78);
  max-width: 580px;
}
.phero__lead strong { color: #fff; }

.phero__safety {
  margin-top: 28px;
  display: inline-flex; gap: 14px; align-items: flex-start;
  padding: 18px 22px;
  background: rgba(255, 47, 0, 0.10);
  border: 1px solid rgba(255, 47, 0, 0.25);
  border-radius: 14px;
  max-width: 560px;
}
.phero__safety > svg { color: var(--brand-orange); flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; }
.phero__safety-title { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.phero__safety-text { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; line-height: 1.4; }

.phero__stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 800px) { .phero__stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .phero__stats { grid-template-columns: 1fr; } }
.phero__stat {
  padding: 28px 28px 24px 0;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.phero__stat:last-child { border-right: none; padding-right: 0; }
@media (max-width: 800px) {
  .phero__stat:nth-child(2n) { border-right: none; }
  .phero__stat { padding-right: 16px; padding-left: 0; }
}
.phero__stat:not(:first-child) { padding-left: 28px; }
@media (max-width: 800px) { .phero__stat:not(:first-child) { padding-left: 0; } }
.phero__stat-big {
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.phero__stat-cap {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 6px;
  color: #fff;
}
.phero__stat-text {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  max-width: 260px;
}

/* For whom */
.forwhom { background: var(--bg); }
.forwhom__head { margin-bottom: 56px; max-width: 800px; }
.forwhom__head .eyebrow { margin-bottom: 18px; }
.forwhom__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .forwhom__grid { grid-template-columns: 1fr; } }

.forwhom__col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: border-color .2s ease, transform .2s ease;
}
.forwhom__col:hover { border-color: var(--ink); transform: translateY(-3px); }
.forwhom__col-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.forwhom__col-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-red); font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 47, 0, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}
.forwhom__col-kind {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.forwhom__row { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.forwhom__row-label {
  width: 96px; flex-shrink: 0;
  font-size: 11px; color: var(--ink-60);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; padding-top: 2px;
}
.forwhom__row-value { font-size: 14px; line-height: 1.5; color: var(--ink); flex: 1; }

.forwhom__case {
  margin-top: 8px;
  background: var(--ink); color: #fff;
  border-radius: 18px;
  padding: 22px 24px;
}
.forwhom__case-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.forwhom__case-head svg { color: var(--brand-orange); }
.forwhom__case-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.forwhom__case-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.forwhom__case-metrics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.forwhom__case-metric { display: flex; flex-direction: column; gap: 2px; }
.forwhom__case-metric-v {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.forwhom__case-metric-l { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 600; }

/* Levels (3 cards on dark) */
.levels__head { margin-bottom: 56px; max-width: 880px; }
.levels__head .eyebrow { margin-bottom: 18px; }
.levels__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .levels__grid { grid-template-columns: 1fr; } }
.levels__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.levels__card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.levels__card--organic::before { background: linear-gradient(to bottom, var(--brand-orange), transparent); }
.levels__card--paid::before { background: linear-gradient(to bottom, var(--brand-red), transparent); }
.levels__card--ai::before { background: linear-gradient(to bottom, #fff, transparent); }

.levels__card-head { display: flex; justify-content: space-between; align-items: center; }
.levels__card-layer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-orange);
  font-weight: 700; letter-spacing: 0.05em;
}
.levels__card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.levels__card--paid .levels__card-icon { background: var(--brand-red); }
.levels__card--ai .levels__card-icon { background: var(--brand-orange); color: var(--ink); }

.levels__card-title { color: #fff; letter-spacing: -0.02em; }
.levels__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.levels__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.45;
  color: rgba(255,255,255,0.85);
}
.levels__list svg { color: var(--brand-orange); flex-shrink: 0; margin-top: 2px; }

.levels__result {
  margin-top: 12px;
  padding: 18px 20px;
  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  border-top: 2px solid var(--brand-red);
}
.levels__result-row { display: flex; align-items: baseline; gap: 8px; }
.levels__result-big {
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1;
}
.levels__result-cap { font-size: 13px; color: #fff; font-weight: 700; }
.levels__result-time { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 6px; font-weight: 500; }

/* Tariffs note bar */
.tariffs-note { padding-top: 0; padding-bottom: 0; background: var(--bg); }
.tariffs-note__bar {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 14px;
  width: 100%;
}
.tariffs-note__bar > svg { color: var(--brand-red); flex-shrink: 0; }
.tariffs-note__bar span { font-size: 14px; color: var(--ink-80); }
.tariffs-note__bar strong { color: var(--ink); font-weight: 800; }
`;
document.head.appendChild(promoStyles);

Object.assign(window, {
  PromoHero, ForWhom, PromoLevels, PromoStages, PromoFaq, PromoFinalCta, PromoTariffsNote
});