/* ============== SEO продвижение sections ============== */

/* ===== SEO Hero ===== */
function SeoHero() {
  const ft = window.FormulaTheme || {};
  const chips = [
    { icon: <Icon.Chart />, text: 'Собственный аналитический инструмент — видим выдачу Авито в реальном времени' },
    { icon: <Icon.Sparkles />, text: 'Семантика из реальных запросов покупателей — не ключи «по ощущению», а данные' },
    { icon: <Icon.Zap />, text: 'Рост органического трафика без доп. бюджета' },
  ];
  return (
    <section id="top" className="shero">
      <div className="shero__grain" aria-hidden></div>
      <div className="wrap shero__wrap">
        <div className="shero__breadcrumbs">
          <a href={ft.homeUrl || '/'}>Главная</a>
          <span>/</span>
          <a href={(ft.urls || {}).services || '#'}>Услуги</a>
          <span>/</span>
          <span className="shero__breadcrumbs-current">SEO продвижение</span>
        </div>
        <div className="shero__content">
          <div className="shero__left">
            <div className="chip shero__chip"><span className="dot-red"></span> Услуга · SEO</div>
            <h1 className="display shero__h1">
              SEO продвижение на Авито —<br/>
              <span className="shero__h1-big">органический трафик</span><br/>
              без переплат за рекламу
            </h1>
            <p className="lead shero__lead">
              Выводим объявления в топ поиска Авито за счёт правильной оптимизации — без увеличения рекламного бюджета. Используем собственный аналитический инструмент.
            </p>
            <div className="sub-chips">
              {chips.map((c, i) => (
                <Reveal key={i} delay={i * 80} className="sub-chip">
                  <div className="sub-chip__icon">{c.icon}</div>
                  <div className="sub-chip__text">{c.text}</div>
                </Reveal>
              ))}
            </div>
          </div>
          <div className="shero__right">
            <div className="hero-form-card" id="hero-form">
              <div className="hero-form-card__pill"><Icon.Zap /> Бесплатно. Без обязательств.</div>
              <div className="hero-form-card__title">Получить бесплатный SEO-аудит объявлений</div>
              <p className="hero-form-card__sub">Аудит по 17 пунктам. Ответим в течение 2 часов.</p>
              <LeadForm
                id="seo-hero-form"
                columns={1}
                small
                fields={[
                  { key: 'name', label: 'Имя', validate: 'name', placeholder: 'Иван', required: true },
                  { key: 'phone', label: 'Телефон', validate: 'phone', placeholder: '+7 (___) ___-__-__', required: true, type: 'tel' },
                ]}
                button="Запустить аудит"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Принцип искренности: если SEO не поможет — скажем прямо
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Как работают алгоритмы ===== */
const SEO_ALGO = [
  {
    icon: <Icon.Chart />,
    title: 'Умная выдача — почему одни объявления всегда в топе',
    text: 'Авито оценивает релевантность ключевых слов в заголовке и описании, кликабельность фотографий, скорость ответа и рейтинг профиля. Объявление с правильным заголовком может органически опередить конкурента с вдвое большим бюджетом.',
  },
  {
    icon: <Icon.Users />,
    title: 'Поведенческие факторы: CTR и цена влияют на позиции',
    text: 'Если ваше объявление показывается в поиске, но люди на него не кликают — платформа начинает показывать его реже. Качественное фото и правильная цена повышают кликабельность и автоматически поднимают позиции. Бесплатно и работает 24/7.',
  },
  {
    icon: <Icon.Shield />,
    title: 'Спам ключами и нерабочие хештеги вредят ранжированию',
    text: 'Попытка набить в описание как можно больше ключей — прямой путь к пессимизации. Алгоритм Авито умеет распознавать переспам. Результат противоположный: объявления проваливаются ниже выдачи.',
  },
];

function SeoAlgorithms() {
  return (
    <section className="section sub-cards-section">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Как работает Авито</div>
          <h2 className="section-title">
            Как работают алгоритмы Авито —<br/>
            <span className="text-red">и почему бюджет решает не всё</span>
          </h2>
          <p className="lead" style={{maxWidth: 660, marginTop: 18}}>
            Наш аналитический инструмент позволяет видеть выдачу в реальном времени и точно понимать, почему конкуренты оказываются выше.
          </p>
        </Reveal>
        <div className="sub-cards-grid sub-cards-grid--3">
          {SEO_ALGO.map((a, i) => (
            <Reveal key={i} delay={i * 100} className="sub-card">
              <div className="sub-card__icon">{a.icon}</div>
              <h3 className="h3 sub-card__title">{a.title}</h3>
              <p className="sub-card__text">{a.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== 5 ошибок ===== */
const SEO_ERRORS = [
  {
    n: '01',
    title: 'Ключи только в заголовке, описание не оптимизировано',
    text: 'Заголовок — важнейший фактор ранжирования, но алгоритм читает всё объявление. Если тело текста написано произвольно, карточка теряет до 40% органического потенциала. Мы оптимизируем и заголовок, и описание — органично, без переспама.',
  },
  {
    n: '02',
    title: 'Неправильная категория и подкатегория',
    text: 'Категория определяет, в какой выдаче будет участвовать объявление. Ошибочное размещение — и вы конкурируете в самой широкой и дорогой категории вместо более узкой с меньшей конкуренцией.',
  },
  {
    n: '03',
    title: 'Игнорирование атрибутов и характеристик',
    text: 'Атрибуты — не формальность. Они влияют на фильтрацию: покупатель с фильтрами видит только те объявления, у которых заполнены нужные параметры. Не заполнили — потеряли всю эту аудиторию.',
  },
  {
    n: '04',
    title: 'Запуск платного продвижения на неоптимизированные карточки',
    text: 'Платить за X10 просмотров на сырую карточку с плохим заголовком — деньги на ветер. CTR падает, платформа понижает органические позиции. Сначала оптимизация, потом платный буст.',
  },
  {
    n: '05',
    title: 'Отсутствие обновлений — алгоритм понижает «старые» объявления',
    text: 'Авито повышает в выдаче свежие объявления. Если карточка не обновлялась неделю — она опускается. Регулярное обновление в правильное время суток — обязательная часть работы с органикой.',
  },
];

function SeoErrors() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--dark sub-dark-accordion">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Типичные ошибки</div>
          <h2 className="section-title">
            5 ошибок, из-за которых ваши<br/>
            объявления <span className="text-red">теряют органический трафик</span>
          </h2>
          <p className="lead" style={{maxWidth: 640, marginTop: 18}}>
            Проверьте себя — большинство продавцов допускают хотя бы три из пяти.
          </p>
        </Reveal>
        <div className="faq__list dark-accordion" style={{marginTop: 40}}>
          {SEO_ERRORS.map((e, i) => (
            <button
              key={i}
              type="button"
              className={`faq__item dark-accordion__item ${open === i ? 'open' : ''}`}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq__item-head">
                <div className="faq__item-num" style={{color: 'var(--brand-orange)'}}>Ошибка {e.n}</div>
                <div className="faq__item-q">{e.title}</div>
                <div className="faq__item-toggle">{open === i ? '−' : '+'}</div>
              </div>
              {open === i && <div className="faq__item-a">{e.text}</div>}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Что входит ===== */
const SEO_INCLUDES = [
  { icon: <Icon.Chart />, title: 'Сбор семантического ядра', text: 'Реальные запросы из собственного аналитического инструмента, не подбор «на глаз»' },
  { icon: <Icon.Doc />, title: 'Оптимизация заголовков', text: 'Главный фактор ранжирования — прорабатываем каждый заголовок' },
  { icon: <Icon.Users />, title: 'Переработка описаний', text: 'Органичное встраивание ключей, закрытие возражений покупателя' },
  { icon: <Icon.Shield />, title: 'Правильные категории и подкатегории', text: 'Снижаем конкуренцию, повышаем видимость в нужной аудитории' },
  { icon: <Icon.Sparkles />, title: 'Атрибуты и характеристики', text: 'Заполняем всё — влияет на фильтрацию и расширенную выдачу' },
  { icon: <Icon.Star />, title: 'Оптимизация визуала', text: 'Порядок фото, инфографика, которая повышает CTR и удерживает внимание' },
  { icon: <Icon.Zap />, title: 'Мониторинг позиций', text: 'Еженедельно отслеживаем позиции по целевым запросам, корректируем' },
];

function SeoIncludes() {
  return (
    <section className="section section--surface sub-includes">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Состав услуги</div>
          <h2 className="section-title">
            Что входит в SEO-продвижение<br/>
            <span className="text-red">на Авито</span>
          </h2>
        </Reveal>
        <div className="sub-includes__grid">
          {SEO_INCLUDES.map((item, i) => (
            <Reveal key={i} delay={i * 80} className="sub-includes__item">
              <div className="sub-includes__item-icon">{item.icon}</div>
              <div>
                <div className="sub-includes__item-title">{item.title}</div>
                <div className="sub-includes__item-text">{item.text}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Синергия SEO + платное ===== */
function SeoSynergy() {
  return (
    <section className="section sub-synergy">
      <div className="wrap sub-synergy__wrap">
        <Reveal className="sub-synergy__content">
          <div className="eyebrow">Синергия</div>
          <h2 className="section-title">
            SEO + платное продвижение =<br/>
            <span className="text-red">в 2 раза ниже стоимость лида</span>
          </h2>
          <p className="lead sub-synergy__text">
            Правильно оптимизированная карточка при запуске X10 даёт в 2–3 раза больший прирост заявок, чем неоптимизированная с тем же бюджетом. Высокий CTR снижает стоимость клика в платном продвижении.
          </p>
          <div className="sub-synergy__insight">
            <Icon.Zap />
            <span>SEO-оптимизация всегда предшествует запуску платных кампаний — это фундамент, без которого рекламный бюджет работает вполсилы</span>
          </div>
        </Reveal>
        <Reveal delay={120} className="sub-synergy__stats">
          <div className="sub-synergy__stat">
            <div className="sub-synergy__stat-num">×2–3</div>
            <div className="sub-synergy__stat-cap">больше заявок с тем же бюджетом</div>
          </div>
          <div className="sub-synergy__stat">
            <div className="sub-synergy__stat-num">−40%</div>
            <div className="sub-synergy__stat-cap">к стоимости клика при высоком CTR</div>
          </div>
          <div className="sub-synergy__stat">
            <div className="sub-synergy__stat-num">7–14</div>
            <div className="sub-synergy__stat-cap">дней до первых органических результатов</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Кейсы ===== */
const SEO_CASES = [
  {
    niche: 'Геодезия',
    name: 'Геоникс',
    title: '1 426 объявлений в топе с нуля',
    task: 'Вывести новый аккаунт без истории и отзывов в топ по целевым запросам региона.',
    what: 'Сбор семантики, полная оптимизация 1 426 объявлений: заголовки, описания, категории, атрибуты, инфографика.',
    metrics: [
      { v: '1 578', l: 'лидов' },
      { v: '389 ₽', l: 'стоимость лида' },
      { v: '0', l: 'блокировок' },
      { v: '614 779 ₽', l: 'бюджет кампании' },
    ],
  },
  {
    niche: 'Автомастерская',
    name: 'Slav Motors',
    title: '1 578 горячих лидов',
    task: 'Сгенерировать стабильный поток заявок на ремонт с нуля с минимальной стоимостью обращения.',
    what: 'SEO-аудит и переработка карточек: новые заголовки, правильные подкатегории, оптимизированные описания.',
    metrics: [
      { v: '1 578', l: 'лидов' },
      { v: '254 ₽', l: 'стоимость лида' },
      { v: '8 065', l: 'просмотров' },
      { v: '+20%', l: 'органический трафик' },
    ],
  },
];

function SeoCases() {
  return (
    <section className="section section--dark sub-cases-dark">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Кейсы</div>
          <h2 className="section-title">
            Реальные результаты<br/>
            <span className="text-red">SEO-оптимизации</span>
          </h2>
        </Reveal>
        <div className="sub-cases-dark__grid">
          {SEO_CASES.map((c, i) => (
            <Reveal key={i} delay={i * 120} className="sub-cases-dark__card">
              <div className="sub-cases-dark__head">
                <div className="sub-cases-dark__niche">{c.niche}</div>
                <div className="sub-cases-dark__name">{c.name}</div>
              </div>
              <h3 className="h3 sub-cases-dark__title">{c.title}</h3>
              <div className="sub-cases-dark__row">
                <div className="sub-cases-dark__label">Задача</div>
                <div className="sub-cases-dark__value">{c.task}</div>
              </div>
              <div className="sub-cases-dark__row">
                <div className="sub-cases-dark__label">Что сделали</div>
                <div className="sub-cases-dark__value">{c.what}</div>
              </div>
              <div className="sub-cases-dark__metrics">
                {c.metrics.map((m, j) => (
                  <div key={j} className="sub-cases-dark__metric">
                    <div className="sub-cases-dark__metric-v">{m.v}</div>
                    <div className="sub-cases-dark__metric-l">{m.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const SEO_FAQ = [
  {
    q: 'Чем SEO на Авито отличается от SEO для обычного сайта?',
    a: 'Принципы похожи: релевантность ключей, поведенческие факторы, качество контента. Но инструменты другие. У Авито нет ссылочной массы и классических мета-тегов — SEO строится вокруг правильных категорий, атрибутов, заголовков и визуала.',
  },
  {
    q: 'Когда будет виден первый результат?',
    a: 'При органической SEO-оптимизации — через 7–14 дней. Это не мгновенный результат, как при запуске X10. Зато это устойчивый рост, который не исчезает, как только заканчивается бюджет.',
  },
  {
    q: 'Нужен ли платный тариф Авито для SEO-оптимизации?',
    a: 'Нет. SEO работает и без платных инструментов. Однако их совместное использование даёт синергию — органически оптимизированные карточки показывают лучший CTR и при платном продвижении тоже.',
  },
  {
    q: 'Что если конкуренты скопируют мои тексты?',
    a: 'Это случается. Поэтому мы регулярно мониторим тексты конкурентов и обновляем ваши объявления. Копирование не работает мгновенно — пока конкурент «догоняет», вы уже впереди.',
  },
  {
    q: 'Как вы измеряете результат SEO?',
    a: 'Позиции объявлений по целевым запросам, динамика органического трафика, рост просмотров и обращений без увеличения бюджета. Всё фиксируем в еженедельном отчёте.',
  },
];

function SeoFaq() {
  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}}>Отвечаем на главные вопросы об SEO-продвижении на Авито.</p>
          <button className="btn btn-dark btn-arrow" style={{marginTop: 22}} onClick={() => scrollToId('seo-final')}>
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>
        <div className="faq__list">
          {SEO_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>
  );
}

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

/* ============== Shared sub-page styles ============== */
const subPageStyles = document.createElement('style');
subPageStyles.textContent = `
/* Hero feature chips (used on multiple sub-pages) */
.sub-chips { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.sub-chip {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
}
.sub-chip__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sub-chip__text { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.45; padding-top: 6px; }

/* Section head */
.sub-section-head { margin-bottom: 56px; max-width: 800px; }
.sub-section-head .eyebrow { margin-bottom: 18px; }

/* 3-column cards grid (light) */
.sub-cards-section { background: var(--bg); }
.sub-cards-grid { display: grid; gap: 16px; }
.sub-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sub-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .sub-cards-grid--3 { grid-template-columns: 1fr; }
  .sub-cards-grid--2 { grid-template-columns: 1fr; }
}
.sub-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s ease, transform .2s ease;
}
.sub-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.sub-card__icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sub-card__title { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.sub-card__text { font-size: 14px; color: var(--ink-60); line-height: 1.55; }

/* Dark accordion (errors / faq on dark bg) */
.dark-accordion .faq__item-head { grid-template-columns: auto 1fr 36px; }
.dark-accordion__item {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
.dark-accordion__item.open { border-color: rgba(255,47,0,0.5) !important; background: rgba(255,47,0,0.07) !important; }
.dark-accordion__item .faq__item-q { color: #fff !important; }
.dark-accordion__item .faq__item-toggle { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
.dark-accordion__item.open .faq__item-toggle { background: var(--brand-red) !important; color: #fff !important; }
.dark-accordion__item .faq__item-a { color: rgba(255,255,255,0.72) !important; }

/* Includes grid (surface bg) */
.sub-includes { background: var(--surface); }
.sub-includes__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 700px) { .sub-includes__grid { grid-template-columns: 1fr; } }
.sub-includes__item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 18px;
  transition: border-color .2s ease;
}
.sub-includes__item:hover { border-color: var(--ink); }
.sub-includes__item-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sub-includes__item-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; color: var(--ink); }
.sub-includes__item-text { font-size: 13px; color: var(--ink-60); line-height: 1.45; }

/* Synergy (light) */
.sub-synergy { background: var(--bg); }
.sub-synergy__wrap {
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: 64px; align-items: center;
}
@media (max-width: 900px) { .sub-synergy__wrap { grid-template-columns: 1fr; gap: 40px; } }
.sub-synergy__text { font-size: 18px; color: var(--ink-80); line-height: 1.55; margin-top: 22px; max-width: 560px; }
.sub-synergy__insight {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 28px; padding: 18px 22px;
  background: rgba(255,47,0,0.06);
  border: 1px solid rgba(255,47,0,0.2);
  border-radius: 14px;
}
.sub-synergy__insight > svg { color: var(--brand-red); flex-shrink: 0; margin-top: 2px; }
.sub-synergy__insight span { font-size: 14px; color: var(--ink-80); line-height: 1.5; }
.sub-synergy__stats { display: flex; flex-direction: column; gap: 20px; }
.sub-synergy__stat {
  padding: 28px 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; border-left: 3px solid var(--brand-red);
}
.sub-synergy__stat-num {
  font-size: 48px; 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;
}
.sub-synergy__stat-cap { font-size: 14px; color: var(--ink-60); font-weight: 600; margin-top: 8px; }

/* Cases on dark */
.sub-cases-dark__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .sub-cases-dark__grid { grid-template-columns: 1fr; } }
.sub-cases-dark__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; padding: 36px;
  display: flex; flex-direction: column; gap: 16px;
}
.sub-cases-dark__head { display: flex; align-items: baseline; gap: 12px; }
.sub-cases-dark__niche {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-orange);
  background: rgba(255,106,0,0.12);
  padding: 4px 8px; border-radius: 6px;
}
.sub-cases-dark__name { font-size: 18px; font-weight: 800; color: #fff; }
.sub-cases-dark__title { color: #fff !important; letter-spacing: -0.02em; }
.sub-cases-dark__row { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.sub-cases-dark__label {
  width: 96px; flex-shrink: 0;
  font-size: 11px; color: rgba(255,255,255,0.4);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; padding-top: 2px;
}
.sub-cases-dark__value { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.45; flex: 1; }
.sub-cases-dark__metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 8px; padding: 22px 24px;
  background: rgba(0,0,0,0.35); border-radius: 18px;
}
.sub-cases-dark__metric-v {
  font-size: 26px; 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;
}
.sub-cases-dark__metric-l { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 600; margin-top: 4px; }

/* Single case card (for pages with 1 case) */
.sub-single-case {
  background: var(--bg);
}
.sub-single-case__card {
  background: var(--ink); color: #fff;
  border-radius: 28px; padding: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .sub-single-case__card { grid-template-columns: 1fr; gap: 32px; padding: 32px; } }
.sub-single-case__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-orange);
  background: rgba(255,106,0,0.15);
  padding: 5px 10px; border-radius: 8px;
  display: inline-block; margin-bottom: 16px;
}
.sub-single-case__title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.025em; color: #fff; margin-bottom: 20px; }
.sub-single-case__row { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.sub-single-case__row-label {
  width: 80px; flex-shrink: 0;
  font-size: 11px; color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.sub-single-case__row-value { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.45; }
.sub-single-case__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sub-single-case__metric-v {
  font-size: 40px; 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;
}
.sub-single-case__metric-l { font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 600; margin-top: 6px; }

/* Dark includes grid (shared: shops, consultation, profile) */
.sub-dark-includes__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 700px) { .sub-dark-includes__grid { grid-template-columns: 1fr; } }
.sub-dark-includes__item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  transition: border-color .2s ease;
}
.sub-dark-includes__item:hover { border-color: rgba(255,47,0,0.4); }
.sub-dark-includes__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sub-dark-includes__title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; color: #fff; }
.sub-dark-includes__text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.45; }

/* For-whom grid (4 cards) */
.sub-forwhom { background: var(--surface); }
.sub-forwhom__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 800px) { .sub-forwhom__grid { grid-template-columns: 1fr; } }
.sub-forwhom__card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 22px; padding: 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.sub-forwhom__card:hover { border-color: var(--ink); transform: translateY(-2px); }
.sub-forwhom__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--brand-red);
  font-weight: 700; letter-spacing: 0.04em;
}
.sub-forwhom__card-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.sub-forwhom__card-text { font-size: 14px; color: var(--ink-60); line-height: 1.5; }
`;
document.head.appendChild(subPageStyles);

Object.assign(window, {
  SeoHero, SeoAlgorithms, SeoErrors, SeoIncludes, SeoSynergy, SeoCases, SeoFaq, SeoFinalCta,
});