/* ============== Sections B: Reasons (10 smyslov), Comparison, Services, Tariffs ============== */

/* ===== 10 reasons / smyslov ===== */
const SMYSLY = [
  {
    doubt: 'Авитологов много, все обещают, но многие просто сливают бюджет',
    answer: 'Мы строим стратегию на алгоритмах площадки изнутри — а не по YouTube-курсам',
    facts: [
      'Антон Федин — обладатель награды Авито «Результат года»',
      '4 года управления бюджетами от 1 000 000 ₽/мес внутри Авито',
      'Портфель: Сбербанк, Ашан, Бургер Кинг — реальные федеральные кейсы',
    ],
  },
  {
    doubt: 'Лиды приходят, но менеджеры не успевают — клиенты уходят к конкурентам',
    answer: 'ИИ-автоответчик реагирует за 15 секунд, 24/7 — пока конкуренты спят',
    facts: [
      'Ответ в первые 15 минут повышает вероятность сделки на 40% (статистика Авито)',
      'ИИ обучается на базе вашего продукта и закрывает 80% типовых вопросов без человека',
      'Система работает ночью — «ночные» лиды ваши, а не конкурентов',
    ],
  },
  {
    doubt: 'Масспостинг — это риск. Боюсь, что аккаунт заблокируют',
    answer: 'Ни одного заблокированного аккаунта за всю историю компании',
    facts: [
      'Нейросети генерируют тысячи уникальных текстов — каждое объявление оригинально',
      'Уникализация фотографий по программной методике — без признаков дублирования',
      'Кейс Геоникс: 1 426 активных объявлений в ротации одновременно — ноль блокировок',
    ],
  },
  {
    doubt: 'Плачу за «ведение», но не понимаю — окупаются ли услуги?',
    answer: 'Сквозная аналитика: видите стоимость каждого лида и расход бюджета в реальном времени',
    facts: [
      'Еженедельные отчёты: количество контактов, их стоимость, расход, динамика',
      'Кейс «Вся Доставка»: стоимость лида 115 ₽ в высококонкурентной нише нерудных материалов',
      'Прозрачный расчёт экономики уже на этапе бесплатного аудита — до оплаты',
    ],
  },
  {
    doubt: 'В крупных агентствах мой проект будет вести вчерашний студент',
    answer: 'За каждым проектом — команда из 4 специалистов под контролем опытного стратега',
    facts: [
      'В команде: аналитик данных, SEO-копирайтер, дизайнер-инфограф, технический специалист',
      'Регламентированное время ответа — не более 30 минут в рабочее время',
      'Ограниченное число клиентов на менеджера — максимальное внимание каждому',
    ],
  },
  {
    doubt: 'Авитологи берут деньги и пропадают или не выполняют объём',
    answer: 'Полная юридическая ответственность — объём, сроки и стоимость в договоре',
    facts: [
      'Работаем официально через ИП/ООО с полным пакетом закрывающих документов',
      'В договоре прописан точный объём объявлений, отзывов и график выкладки',
      'Фиксированная стоимость без скрытых платежей и доплат за правки в рамках ТЗ',
    ],
  },
  {
    doubt: 'У конкурентов сотни отзывов — клиенты боятся покупать у меня',
    answer: 'Системная работа с репутацией создаёт образ лидера — не наращивание, а управление',
    facts: [
      'В тарифы «Стандарт» и «Профессиональный» включено ежемесячное добавление отзывов',
      'Проработка поведенческих факторов поднимает объявления в органике без платного продвижения',
      'Подтверждённые отзывы — без серых схем и риска санкций от модерации',
    ],
  },
  {
    doubt: 'Авитолог потратит первый месяц просто чтобы понять мою нишу',
    answer: 'База готовых проверенных стратегий в ключевых нишах. Запуск за 3–5 дней',
    facts: [
      '100+ заголовков с подтверждённой высокой кликабельностью для B2B-сегмента',
      'Готовые ключевые ядра для большого количества ниш',
      'Показываем реальную картину по вашей нише на площадке до старта',
    ],
  },
  {
    doubt: 'Авито — лишь часть маркетинга. Нужно, чтобы всё работало как единое целое',
    answer: '«Формула Клиентов» — часть группы ИндигоМ. Авито бесшовно интегрируется в весь маркетинг',
    facts: [
      'Сквозная аналитика и кросс-канальные продажи: Авито + SEO + контекст в одной системе',
      'Профессиональная разработка лендингов под трафик с Авито — внутри одной группы',
      'Доступ к SEO-экспертизе для захвата поисковой выдачи вне платформы',
    ],
  },
  {
    doubt: 'Мне пытаются продать Авито, но я не уверен, что мой товар там купят',
    answer: 'Если Авито не подходит вашей нише — скажем об этом честно ДО подписания договора',
    facts: [
      'Начинаем работу только после глубокого аудита ниши и подтверждения спроса',
      'Принцип искренности: если контекст или SEO выгоднее — скажем прямо',
      'Бесплатный аудит — реальная таблица с цифрами конкурентов и потенциалом дохода',
    ],
  },
];

function SmyslyDetail({ i }) {
  const s = SMYSLY[i];
  return (
    <>
      <div className="smysly__detail-num">Смысл {i + 1} / 10</div>
      <div className="smysly__detail-doubt">
        <span className="smysly__quote-mark">«</span>
        {s.doubt}
        <span className="smysly__quote-mark">»</span>
      </div>
      <div className="smysly__detail-divider">
        <span>наш ответ</span>
        <Icon.ArrowRight />
      </div>
      <h3 className="smysly__detail-answer">{s.answer}</h3>
      <ul className="smysly__facts">
        {s.facts.map((f, j) => (
          <li key={j} className="smysly__fact">
            <Icon.Check />
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </>
  );
}

function Smysly() {
  const [active, setActive] = useState(0);

  return (
    <section id="why-us" className="section smysly">
      <div className="wrap">
        <Reveal className="smysly__head">
          <div className="eyebrow">Почему мы</div>
          <h2 className="section-title">
            «Формула Клиентов» — а не<br/>
            фрилансер или другое агентство?
          </h2>
          <p className="lead" style={{maxWidth: 660, marginTop: 20}}>
            Закрываем все 10 сомнений из реальной практики через конкретные факты и цифры. Сомнение → наш ответ → 3 факта.
          </p>
        </Reveal>

        <div className="smysly__layout">
          <div className="smysly__list">
            {SMYSLY.map((s, i) => (
              <div className="smysly__row" key={i}>
                <button
                  className={`smysly__item ${active === i ? 'active' : ''}`}
                  onClick={() => setActive(active === i ? -1 : i)}
                >
                  <span className="smysly__item-num">{String(i+1).padStart(2,'0')}</span>
                  <span className="smysly__item-doubt">«{s.doubt}»</span>
                </button>
                {active === i && (
                  <div className="smysly__detail smysly__detail--inline" key={`d-${i}`}>
                    <SmyslyDetail i={i} />
                  </div>
                )}
              </div>
            ))}
          </div>

          {active >= 0 && (
            <div className="smysly__detail smysly__detail--side" key={active}>
              <SmyslyDetail i={active} />
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ===== Comparison table ===== */
const COMPARE_ROWS = [
  { c: 'Стоимость услуг', f: '10 000–25 000 ₽', m: '30 000–50 000 ₽', us: '50 / 85 / 150 тыс. ₽' },
  { c: 'Уровень задачи', f: '«Просто выложить фото»', m: '«Сделать по шаблону»', us: 'Системный захват доли рынка' },
  { c: 'Работа с бюджетом', f: 'Сливает 40–60%', m: 'Экономит 10–15%', us: 'Оптимизирует в 2–4 раза' },
  { c: 'Конверсия объявлений', f: 'Низкая', m: 'Средняя (потоковая)', us: 'Максимальная — нейросети + психология' },
  { c: 'Технологии', f: 'Ручной труд', m: 'Базовая автоматизация', us: 'ИИ-продавцы 24/7 + аналитика' },
  { c: 'Риски блокировки', f: 'Высокие', m: 'Средние', us: '0 блокировок за всю историю' },
  { c: 'Отчётность', f: 'По запросу или никак', m: 'Ежемесячно', us: 'Еженедельно или в реальном времени' },
  { c: 'Команда на проект', f: '1 человек', m: '1–2 человека', us: '4 узких специалиста' },
];

function Comparison() {
  return (
    <section className="section section--surface comparison">
      <div className="wrap">
        <Reveal className="comparison__head">
          <div className="eyebrow">Сравнение</div>
          <h2 className="section-title">
            Фрилансер, конвейер или<br/>
            <span className="text-red">«Формула Клиентов»</span> — в чём разница?
          </h2>
        </Reveal>

        <Reveal className="comparison__table-wrap">
          <div className="comparison__table">
            <div className="comparison__row comparison__row--head">
              <div className="comparison__cell comparison__crit">Критерий</div>
              <div className="comparison__cell">
                <div className="comparison__col-title">Фрилансер</div>
                <div className="comparison__col-sub">соло-исполнитель</div>
              </div>
              <div className="comparison__cell">
                <div className="comparison__col-title">Масс-маркет</div>
                <div className="comparison__col-sub">агентство-конвейер</div>
              </div>
              <div className="comparison__cell comparison__cell--us">
                <div className="comparison__col-title">Формула Клиентов <Icon.Star /></div>
                <div className="comparison__col-sub">бутик</div>
              </div>
            </div>

            {COMPARE_ROWS.map((row, i) => (
              <div className="comparison__row" key={i}>
                <div className="comparison__cell comparison__crit">{row.c}</div>
                <div className="comparison__cell comparison__neg"><Icon.X />{row.f}</div>
                <div className="comparison__cell comparison__neutral">~ {row.m}</div>
                <div className="comparison__cell comparison__cell--us comparison__pos"><Icon.Check />{row.us}</div>
              </div>
            ))}
          </div>

          {/* ROI block */}
          <div className="comparison__roi">
            <div className="comparison__roi-label">
              <div className="eyebrow">Пример ROI</div>
              <div className="comparison__roi-title">Бюджет клиента 300 000 ₽/мес</div>
            </div>
            <div className="comparison__roi-vs">
              <div className="comparison__roi-card">
                <div className="comparison__roi-cap">С фрилансером (25 000 ₽)</div>
                <div className="comparison__roi-stats">
                  <div><div className="comparison__roi-num">200</div><span>лидов</span></div>
                  <div><div className="comparison__roi-num">1 625&nbsp;₽</div><span>стоимость лида</span></div>
                  <div><div className="comparison__roi-num">325 000&nbsp;₽</div><span>итого затрат</span></div>
                </div>
                <div className="comparison__roi-verdict bad">Дорогой лид, риски</div>
              </div>
              <div className="comparison__roi-vs-divider">
                <div className="comparison__roi-vs-circle">VS</div>
              </div>
              <div className="comparison__roi-card comparison__roi-card--us">
                <div className="comparison__roi-cap">С «Формулой Клиентов» (150 000 ₽)</div>
                <div className="comparison__roi-stats">
                  <div><div className="comparison__roi-num"><AnimNumber value={800}/></div><span>лидов</span></div>
                  <div><div className="comparison__roi-num"><AnimNumber value={562}/>&nbsp;₽</div><span>стоимость лида</span></div>
                  <div><div className="comparison__roi-num">450 000&nbsp;₽</div><span>итого затрат</span></div>
                </div>
                <div className="comparison__roi-verdict good">В 3 раза дешевле лид</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Services ===== */
const SERVICES = [
  {
    icon: <Icon.Doc />,
    title: 'Ведение аккаунта «под ключ»',
    body: 'Регистрация, оформление магазина, заполнение карточек, масспостинг, поддержка топовых позиций. Вы принимаете звонки — мы делаем всё остальное.',
    result: 'Стабильный поток заявок без вашего участия',
  },
  {
    icon: <Icon.Chart />,
    title: 'Аудит и стратегия',
    body: 'Анализ ниши и конкурентов на Авито, выбор самых конверсионных категорий, формирование ключевого ядра и плана публикаций.',
    result: 'Дорожная карта с прогнозом лидов',
  },
  {
    icon: <Icon.Sparkles />,
    title: 'Лидогенерация и оптимизация',
    body: 'А/Б тесты текстов и инфографики, оптимизация времени публикаций, управление рекламным бюджетом. Снижение стоимости заявки в 2–3 раза.',
    result: 'Снижение стоимости лида на 25–40%',
  },
];

function Services() {
  return (
    <section id="services" className="section services">
      <div className="wrap">
        <Reveal className="services__head">
          <div className="eyebrow">Услуги</div>
          <h2 className="section-title">
            Мы не просто публикуем объявления —<br/>
            мы строим <span className="text-red">систему продаж на Авито</span>
          </h2>
        </Reveal>

        <div className="services__grid">
          {SERVICES.map((s, i) => (
            <Reveal key={i} delay={i * 100} className="services__card">
              <div className="services__num">0{i+1}</div>
              <div className="services__icon">{s.icon}</div>
              <h3 className="h3 services__title">{s.title}</h3>
              <p className="services__body">{s.body}</p>
              <div className="services__result">
                <div className="services__result-label">Результат</div>
                <div className="services__result-text">{s.result}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Tariffs ===== */
const TARIFFS = [
  {
    key: 'start',
    name: 'НАЧАЛЬНЫЙ',
    price: 50000,
    purpose: 'Старт и тест ниши',
    audience: 'Самозанятые, ИП, тест нового направления, 1 город',
    features: [
      { f: 'До 150 объявлений' },
      { f: 'До 10 категорий' },
      { f: '1 вариант текста / направление' },
      { f: 'Базовая визуальная настройка' },
      { f: '5 корректировок в месяц' },
      { f: 'Ежемесячный отчёт' },
      { f: 'Стандартная поддержка' },
      { f: 'Репутация и поведенческие факторы', off: true },
      { f: 'ИИ-автоответчик', off: true },
      { f: 'Аудит чатов / звонков', off: true },
    ],
  },
  {
    key: 'standard',
    name: 'СТАНДАРТ',
    badge: 'ХИТ ★',
    price: 85000,
    purpose: 'Агрессивный рост продаж',
    audience: 'Бизнес, готовый расти и забирать долю рынка',
    popular: true,
    features: [
      { f: 'До 500 объявлений' },
      { f: 'До 30 категорий' },
      { f: 'До 3 вариантов текста (А/Б)' },
      { f: 'Логотип + 1 инфографика' },
      { f: '10 корректировок в месяц' },
      { f: 'Еженедельная отчётность' },
      { f: 'Личный менеджер' },
      { f: '5 отзывов + 20 ПФ' },
      { f: 'ИИ-автоответы' },
      { f: 'Аудит чатов (1 раз/мес)' },
    ],
  },
  {
    key: 'pro',
    name: 'ПРОФЕССИОНАЛЬНЫЙ',
    price: 150000,
    purpose: 'Доминирование на рынке',
    audience: 'Компании, нацеленные на лидерство в нише',
    features: [
      { f: 'До 5 000 объявлений' },
      { f: 'До 100 категорий' },
      { f: 'До 5 вариантов + поисковые тексты' },
      { f: 'Полный брендинг + баннер' },
      { f: '30 корректировок в месяц' },
      { f: 'Отчёт по запросу + созвоны' },
      { f: 'Личный менеджер 24/7' },
      { f: '10 отзывов + 40 ПФ' },
      { f: 'ИИ-роботы + система учёта клиентов' },
      { f: 'Чаты + звонки (2 раза/мес)' },
    ],
  },
];

function Tariffs() {
  return (
    <section id="tariffs" className="section section--dark tariffs">
      <div className="wrap">
        <Reveal className="tariffs__head">
          <div className="eyebrow">Тарифы</div>
          <h2 className="section-title">
            Выберите оптимальный<br/>
            формат сотрудничества
          </h2>
          <p className="lead" style={{maxWidth: 640, marginTop: 18}}>
            3 тарифа — под любой масштаб и задачи бизнеса. От старта в одной нише до доминирования на рынке.
          </p>
        </Reveal>

        <div className="tariffs__grid">
          {TARIFFS.map((t, i) => (
            <Reveal key={t.key} delay={i*120} className={`tariffs__card ${t.popular ? 'popular' : ''}`}>
              {t.popular && <div className="tariffs__badge">{t.badge}</div>}
              <div className="tariffs__name">{t.name}</div>
              <div className="tariffs__price">
                <span className="tariffs__price-num">{t.price.toLocaleString('ru-RU')}</span>
                <span className="tariffs__price-cur">₽ / мес</span>
              </div>
              <div className="tariffs__purpose">{t.purpose}</div>

              <ul className="tariffs__features">
                {t.features.map((feat, j) => (
                  <li key={j} className={feat.off ? 'off' : ''}>
                    {feat.off ? <Icon.X /> : <Icon.Check />}
                    {feat.f}
                  </li>
                ))}
              </ul>

              <div className="tariffs__audience">
                <div className="tariffs__audience-label">Кому подходит</div>
                <div className="tariffs__audience-text">{t.audience}</div>
              </div>

              <button
                className={`btn ${t.popular ? 'btn-primary' : 'btn-light'} tariffs__cta`}
                onClick={() => scrollToId('calc')}
              >
                Выбрать тариф <Icon.ArrowRight />
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- Styles ---- */
const sectionsBStyles = document.createElement('style');
sectionsBStyles.textContent = `
/* Smysly */
.smysly { background: var(--bg); }
.smysly__head { margin-bottom: 56px; max-width: 880px; }
.smysly__head .eyebrow { margin-bottom: 18px; }
.smysly__layout {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) { .smysly__layout { grid-template-columns: 1fr; } }

.smysly__list {
  display: flex; flex-direction: column;
  gap: 6px;
  position: sticky; top: 88px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 960px) { .smysly__list { position: static; max-height: none; overflow: visible; } }

.smysly__row { display: flex; flex-direction: column; }

.smysly__item {
  display: flex; gap: 14px; align-items: flex-start;
  text-align: left;
  width: 100%;
  background: transparent; border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: inherit;
  transition: all .2s ease;
  cursor: pointer;
  color: var(--ink-80);
}
.smysly__item:hover { border-color: var(--ink); background: var(--surface); }
.smysly__item.active {
  background: var(--dark); color: #fff; border-color: var(--dark);
}
.smysly__item-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-red); font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding-top: 2px;
}
.smysly__item.active .smysly__item-num { color: var(--brand-orange); }
.smysly__item-doubt { font-size: 14px; font-weight: 600; line-height: 1.35; }

.smysly__detail {
  background: var(--dark); color: #fff;
  border-radius: 22px;
  padding: 40px;
  animation: heroFadeIn .35s ease;
}
.smysly__detail--side { position: sticky; top: 88px; }
.smysly__detail--inline { display: none; }
@media (max-width: 960px) {
  .smysly__detail { position: static; padding: 28px; }
  .smysly__detail--side { display: none; }
  .smysly__detail--inline { display: block; margin-top: 8px; }
}
.smysly__detail-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.smysly__detail-doubt {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 600px;
  position: relative;
}
.smysly__quote-mark { color: var(--brand-red); font-weight: 800; }
.smysly__detail-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 24px;
  color: var(--brand-orange);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.smysly__detail-divider::before {
  content: ''; flex-shrink: 0;
  width: 32px; height: 1px;
  background: var(--brand-orange);
}
.smysly__detail-divider svg { color: var(--brand-orange); }
.smysly__detail-answer {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 30px;
  color: #fff !important;
}
.smysly__facts {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.smysly__fact {
  display: flex; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}
.smysly__fact svg { color: var(--brand-orange); flex-shrink: 0; margin-top: 2px; }

/* Comparison */
@media (max-width: 768px) { .comparison { display: none !important; } }
.comparison__head { margin-bottom: 48px; max-width: 900px; }
.comparison__head .eyebrow { margin-bottom: 18px; }
.comparison__table {
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}
.comparison__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
}
.comparison__row + .comparison__row { border-top: 1px solid var(--border); }
.comparison__row--head {
  background: var(--surface-2);
  font-weight: 700;
}
.comparison__cell {
  padding: 18px 22px;
  font-size: 15px;
  display: flex; align-items: center;
  gap: 8px;
  border-right: 1px solid var(--border);
}
.comparison__cell:last-child { border-right: none; }
.comparison__crit { font-weight: 700; color: var(--ink-80); background: rgba(0,0,0,0.02); }
.comparison__col-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 6px; }
.comparison__col-title svg { color: var(--brand-red); }
.comparison__col-sub { font-size: 12px; color: var(--ink-60); margin-top: 2px; font-weight: 500; display: block; flex-basis: 100%; }
.comparison__row--head .comparison__cell { flex-direction: column; align-items: flex-start; gap: 0; padding: 20px 22px; }
.comparison__cell--us {
  background: rgba(255, 47, 0, 0.05);
  color: var(--ink);
  font-weight: 600;
}
.comparison__row--head .comparison__cell--us { background: var(--brand-red); color: #fff; }
.comparison__row--head .comparison__cell--us .comparison__col-title { color: #fff; }
.comparison__row--head .comparison__cell--us .comparison__col-sub { color: rgba(255,255,255,0.7); }
.comparison__row--head .comparison__cell--us .comparison__col-title svg { color: #fff; }

.comparison__neg { color: var(--ink-60); }
.comparison__neg svg { color: var(--ink-40); flex-shrink: 0; }
.comparison__neutral { color: var(--ink-80); }
.comparison__pos svg { color: var(--brand-red); flex-shrink: 0; }

@media (max-width: 800px) {
  .comparison__table { overflow-x: auto; }
  .comparison__row { grid-template-columns: 1fr; }
  .comparison__cell { border-right: none; border-bottom: 1px solid var(--border); }
  .comparison__cell:last-child { border-bottom: none; }
  .comparison__crit { background: var(--ink); color: #fff; padding: 10px 22px; font-weight: 700; font-size: 13px; }
}

/* ROI */
.comparison__roi {
  margin-top: 32px;
  background: var(--dark); color: #fff;
  border-radius: 22px;
  padding: 36px;
}
.comparison__roi-label { margin-bottom: 28px; }
.comparison__roi-label .eyebrow { color: rgba(255,255,255,0.5); }
.comparison__roi-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.comparison__roi-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 800px) { .comparison__roi-vs { grid-template-columns: 1fr; } }
.comparison__roi-card {
  padding: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.comparison__roi-card--us {
  background: linear-gradient(135deg, rgba(255, 47, 0, 0.16), rgba(255, 106, 0, 0.06));
  border-color: var(--brand-red);
}
.comparison__roi-cap { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 18px; font-weight: 600; }
.comparison__roi-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.comparison__roi-stats > div { display: flex; flex-direction: column; gap: 2px; }
.comparison__roi-stats span { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.comparison__roi-num { font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.comparison__roi-card--us .comparison__roi-num { color: var(--brand-orange); }
.comparison__roi-verdict {
  margin-top: 20px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.comparison__roi-verdict.bad { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
.comparison__roi-verdict.good { background: var(--brand-red); color: #fff; }
.comparison__roi-vs-divider { display: flex; align-items: center; justify-content: center; }
.comparison__roi-vs-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: 0.05em;
}

/* Services */
.services__head { margin-bottom: 56px; max-width: 900px; }
.services__head .eyebrow { margin-bottom: 18px; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .services__grid { grid-template-columns: 1fr; } }
.services__card {
  position: relative;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  display: flex; flex-direction: column;
  gap: 16px;
  transition: transform .2s ease, border-color .2s ease;
}
.services__card:hover { border-color: var(--ink); transform: translateY(-4px); }
.services__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-red); font-weight: 700;
}
.services__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.services__card:hover .services__icon { background: var(--brand-red); }
.services__title { letter-spacing: -0.02em; }
.services__body { color: var(--ink-60); font-size: 15px; line-height: 1.5; flex: 1; }
.services__result {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 12px;
  border-left: 3px solid var(--brand-red);
}
.services__result-label { font-size: 11px; color: var(--ink-60); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.services__result-text { font-size: 15px; font-weight: 700; margin-top: 2px; color: var(--ink); }

/* Tariffs */
.tariffs__head { margin-bottom: 56px; max-width: 800px; }
.tariffs__head .eyebrow { margin-bottom: 18px; }
.tariffs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1000px) { .tariffs__grid { grid-template-columns: 1fr; } }

.tariffs__card {
  position: relative;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.tariffs__card.popular {
  background: linear-gradient(160deg, rgba(255, 47, 0, 0.20), rgba(255, 106, 0, 0.06) 60%);
  border-color: var(--brand-red);
  transform: scale(1.02);
  box-shadow: 0 30px 60px -20px rgba(255, 47, 0, 0.3);
}
@media (max-width: 1000px) { .tariffs__card.popular { transform: none; } }
.tariffs__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--brand-red); color: #fff;
  padding: 6px 14px;
  font-size: 12px; font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tariffs__name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--brand-orange);
}
.tariffs__card.popular .tariffs__name { color: #fff; }
.tariffs__price { display: flex; align-items: baseline; gap: 6px; }
.tariffs__price-num { font-size: clamp(32px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.tariffs__price-cur { font-size: 14px; color: rgba(255,255,255,0.5); font-weight: 600; }
.tariffs__purpose {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.9);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tariffs__features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.tariffs__features li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
}
.tariffs__features li svg { flex-shrink: 0; margin-top: 1px; color: var(--brand-orange); }
.tariffs__features li.off { color: rgba(255,255,255,0.35); }
.tariffs__features li.off svg { color: rgba(255,255,255,0.25); }

.tariffs__audience {
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  margin-top: 8px;
}
.tariffs__audience-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.tariffs__audience-text { font-size: 14px; margin-top: 4px; line-height: 1.35; }

.tariffs__cta { width: 100%; }
`;
document.head.appendChild(sectionsBStyles);

Object.assign(window, { Smysly, Comparison, Services, Tariffs });