/* ============== Services page sections ============== */

/* ===== Services Hero ===== */
function ServicesHero() {
  const advantages = [
    {
      icon: <Icon.Sparkles />,
      title: 'Инсайдерская экспертиза',
      text: 'Основатель Антон Федин — 4 года внутри Авито, награда «Результат года»',
    },
    {
      icon: <Icon.Shield />,
      title: 'Гарантия в договоре',
      text: 'Объём, сроки, фиксированная цена без скрытых доплат',
    },
    {
      icon: <Icon.Chart />,
      title: 'Реальные кейсы',
      text: 'Геоникс: 389 ₽/лид · Вся Доставка: 115 ₽/лид · Slav Motors: 254 ₽/лид',
    },
    {
      icon: <Icon.Bot />,
      title: 'ИИ-автоответчик 24/7',
      text: 'Отвечает за 15 сек. Закрывает 80% вопросов. Ночные лиды — ваши',
    },
  ];

  return (
    <section id="top" className="shero">
      <div className="shero__grain" aria-hidden></div>
      <div className="wrap shero__wrap">

        <div className="shero__breadcrumbs">
          <a href={(window.FormulaTheme || {}).homeUrl || '/'}>Главная</a>
          <span>/</span>
          <span className="shero__breadcrumbs-current">Услуги</span>
        </div>

        <div className="shero__content">
          <div className="shero__left">
            <div className="chip shero__chip"><span className="dot-red"></span> Услуги · Хаб</div>
            <h1 className="display shero__h1">
              Продвижение на Авито —<br/>
              <span className="shero__h1-big">стратегия изнутри</span><br/>
              платформы
            </h1>
            <p className="lead shero__lead">
              Основатель агентства 4 года развивал <strong>Сбербанк, Ашан и Бургер Кинг</strong> внутри Авито. Первые лиды — через 3–5 дней после старта.
            </p>

            <div className="shero__advantages">
              {advantages.map((a, i) => (
                <Reveal key={i} delay={i * 80} className="shero__adv">
                  <div className="shero__adv-num">0{i+1}</div>
                  <div className="shero__adv-icon">{a.icon}</div>
                  <div className="shero__adv-title">{a.title}</div>
                  <div className="shero__adv-text">{a.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">
                Получите бесплатный аудит вашей ниши на Авито
              </div>
              <p className="hero-form-card__sub">
                Реальная таблица с цифрами конкурентов — за 24 часа
              </p>
              <LeadForm
                id="shero-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>
    </section>
  );
}

/* ===== Service Items (links to L3 sub-pages) ===== */
const SERVICE_ITEMS = [
  {
    icon: <Icon.Chart />,
    title: 'SEO продвижение',
    text: 'Вывод объявлений в топ органической выдачи без платной рекламы. Семантика, заголовки, категории, атрибуты.',
    urlKey: 'seo',
    tag: 'Органика',
  },
  {
    icon: <Icon.Doc />,
    title: 'Ведение магазинов',
    text: 'Масспостинг до 5 000 объявлений, наполнение каталога, CRM-интеграция. Под ключ для ИМ и оптовиков.',
    urlKey: 'shops',
    tag: 'Магазины',
  },
  {
    icon: <Icon.Sparkles />,
    title: 'Консультация',
    text: 'Разбор аккаунта, ниши и стратегии за 1–2 часа. Уходите с конкретным планом и бесплатным аудитом.',
    urlKey: 'consultation',
    tag: '1–2 часа',
  },
  {
    icon: <Icon.Users />,
    title: 'Реклама профиля',
    text: 'Оформление магазина, работа с отзывами, брендинг объявлений. Узнаваемость и доверие покупателей.',
    urlKey: 'profile',
    tag: 'Брендинг',
  },
  {
    icon: <Icon.Zap />,
    title: 'Через Яндекс.Директ',
    text: 'Внешний трафик из поиска и РСЯ прямо на карточки Авито. Обходите конкурентов внутри платформы.',
    urlKey: 'direct',
    tag: 'Контекст',
  },
];

function ServiceItems() {
  const ft = window.FormulaTheme || {};
  return (
    <section className="section section--surface service-items">
      <div className="wrap">
        <Reveal className="service-items__head">
          <div className="eyebrow">Конкретные услуги</div>
          <h2 className="section-title">
            Выберите формат<br/>
            <span className="text-red">продвижения на Авито</span>
          </h2>
          <p className="lead" style={{maxWidth: 600, marginTop: 18}}>
            Каждое направление — отдельная специализация. Нажмите на карточку чтобы узнать детали, кейсы и стоимость.
          </p>
        </Reveal>
        <div className="service-items__grid">
          {SERVICE_ITEMS.map((s, i) => (
            <Reveal key={i} delay={i * 80} className="service-items__card">
              <div className="service-items__top">
                <div className="service-items__icon">{s.icon}</div>
                <span className="service-items__tag">{s.tag}</span>
              </div>
              <h3 className="h3 service-items__title">{s.title}</h3>
              <p className="service-items__text">{s.text}</p>
              <a href={ft.urls?.[s.urlKey] || '#'} className="service-items__link">
                Подробнее <Icon.ArrowRight />
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Directions ===== */
const DIRECTIONS = [
  {
    icon: <Icon.Users />,
    title: 'B2B и B2C услуги',
    goal: 'Генерация горячих обращений от клиентов, готовых купить',
    what: 'Оптимизируем тексты под точные запросы, настраиваем платное продвижение',
    examples: ['Ремонт авто', 'Геодезия', 'Строительство', 'Юр.услуги'],
  },
  {
    icon: <Icon.Doc />,
    title: 'Товарный бизнес и магазины',
    goal: 'Вывод карточек в топ, масштабирование продаж',
    what: 'Масспостинг до 5 000 объявлений/мес, каждое уникализировано для модерации',
    examples: ['Мебель', 'Электроника', 'Авто-аксессуары', 'Спорт-инвентарь'],
  },
  {
    icon: <Icon.Chart />,
    title: 'Производство и оптовые поставки',
    goal: 'Привлечение крупных контрагентов и дилеров',
    what: 'Настройка под высокочастотные B2B-запросы, работа с репутацией профиля',
    examples: ['Нерудные материалы', 'Оптовая мебель', 'Стройматериалы', 'Промкомпоненты'],
  },
  {
    icon: <Icon.Sparkles />,
    title: 'Найм персонала (HR)',
    goal: 'Быстрое закрытие массовых и точечных вакансий',
    what: 'Оптимизация вакансий под поисковые запросы соискателей, управление откликами',
    examples: ['Линейный персонал', 'Водители', 'Производство', 'Сервисный персонал'],
  },
];

function Directions() {
  return (
    <section id="directions" className="section directions">
      <div className="wrap">
        <Reveal className="directions__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="directions__grid">
          {DIRECTIONS.map((d, i) => (
            <Reveal key={i} delay={i*100} className="directions__card">
              <div className="directions__card-top">
                <div className="directions__icon">{d.icon}</div>
                <div className="directions__num">0{i+1}</div>
              </div>
              <h3 className="h3 directions__card-title">{d.title}</h3>

              <div className="directions__row">
                <div className="directions__row-label">Задача</div>
                <div className="directions__row-value">{d.goal}</div>
              </div>
              <div className="directions__row">
                <div className="directions__row-label">Что делаем</div>
                <div className="directions__row-value">{d.what}</div>
              </div>

              <div className="directions__tags">
                {d.examples.map((e, j) => <span key={j} className="directions__tag">{e}</span>)}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Methods (3 columns: organic, paid, automation) ===== */
const METHODS = [
  {
    layer: 'Слой 01',
    title: 'Органическое продвижение',
    icon: <Icon.Chart />,
    accent: 'organic',
    items: [
      'Оптимизация текстов под алгоритмы Авито: 100+ заголовков с подтверждённой кликабельностью',
      'Инфографика: закрытие возражений на первом фото — +20% просмотров',
      'Обновление объявлений в часы пиковой активности целевой аудитории',
    ],
  },
  {
    layer: 'Слой 02',
    title: 'Платные инструменты',
    icon: <Icon.Zap />,
    accent: 'paid',
    items: [
      'X2–X20 просмотров: платное продвижение в топ выдачи',
      'Автостратегии: умные ставки с автокорректировкой по конкуренции и времени',
      'Рассылка спецпредложений целевой аудитории через каналы Авито',
    ],
  },
  {
    layer: 'Слой 03',
    title: 'Автоматизация и ИИ',
    icon: <Icon.Bot />,
    accent: 'ai',
    items: [
      'ИИ-автоответчик: реагирует за 15 сек, 24/7, закрывает 80% типовых вопросов',
      'Интеграция с CRM (AmoCRM, Битрикс24) — заявки автоматически в вашу систему',
      'База готовых стратегий в ключевых нишах — запуск за 3–5 дней, не за месяц',
    ],
  },
];

function Methods() {
  return (
    <section className="section section--dark methods">
      <div className="wrap">
        <Reveal className="methods__head">
          <div className="eyebrow">Методы продвижения</div>
          <h2 className="section-title">
            Как мы выводим<br/>
            <span className="text-red">объявления в топ</span>
          </h2>
          <p className="lead" style={{maxWidth: 720, marginTop: 18}}>
            Комбинируем <strong>три слоя</strong> продвижения — органику, платные инструменты, автоматизацию. По отдельности они работают слабо, вместе — дают эффект ×5–10.
          </p>
        </Reveal>

        <div className="methods__grid">
          {METHODS.map((m, i) => (
            <Reveal key={i} delay={i*120} className={`methods__col methods__col--${m.accent}`}>
              <div className="methods__col-head">
                <div className="methods__col-layer">{m.layer}</div>
                <div className="methods__col-icon">{m.icon}</div>
              </div>
              <h3 className="h3 methods__col-title">{m.title}</h3>
              <ul className="methods__list">
                {m.items.map((it, j) => (
                  <li key={j}>
                    <span className="methods__bullet"></span>
                    {it}
                  </li>
                ))}
              </ul>
            </Reveal>
          ))}
        </div>

        <Reveal className="methods__sum">
          <span>В сумме →</span>
          <strong>×5–10</strong>
          <span>больше охвата и <strong>−25–40%</strong> к стоимости лида в первый месяц</span>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== What you get ===== */
const BENEFITS = [
  {
    icon: <Icon.Shield />,
    title: 'Гарантия в договоре',
    body: 'Объём работ, KPI, фиксированная цена — в договоре. Полный пакет закрывающих документов. Работаем через ИП/ООО официально.',
    proof: [
      { num: '0₽', cap: 'скрытых платежей' },
      { num: 'ИП/ООО', cap: 'официальный договор' },
    ],
  },
  {
    icon: <Icon.Chart />,
    title: 'Снижение стоимости лида',
    body: 'Сквозная аналитика: видите стоимость каждого лида в реальном времени.',
    proof: [
      { num: '115 ₽', cap: 'Вся Доставка' },
      { num: '254 ₽', cap: 'Slav Motors' },
      { num: '389 ₽', cap: 'Геоникс' },
    ],
  },
  {
    icon: <Icon.Sparkles />,
    title: 'Экосистема ИндигоМ',
    body: 'Часть группы ИндигоМ: Авито + SEO + контекст в единой системе. Разработка лендингов, SEO-экспертиза — внутри одной команды.',
    proof: [
      { num: 'Авито', cap: '+ SEO + контекст' },
      { num: '1 команда', cap: 'сквозная аналитика' },
    ],
  },
];

function WhatYouGet() {
  return (
    <section className="section whatyouget">
      <div className="wrap">
        <Reveal className="whatyouget__head">
          <div className="eyebrow">Что вы получите</div>
          <h2 className="section-title">
            Что вы получите,<br/>
            заказав продвижение у нас
          </h2>
        </Reveal>
        <div className="whatyouget__grid">
          {BENEFITS.map((b, i) => (
            <Reveal key={i} delay={i*100} className="whatyouget__card">
              <div className="whatyouget__icon">{b.icon}</div>
              <h3 className="h3 whatyouget__title">{b.title}</h3>
              <p className="whatyouget__body">{b.body}</p>
              <div className="whatyouget__proof">
                {b.proof.map((p, j) => (
                  <div key={j} className="whatyouget__proof-item">
                    <div className="whatyouget__proof-num">{p.num}</div>
                    <div className="whatyouget__proof-cap">{p.cap}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Service Stages (richer than main page Process — has expected results) ===== */
const SERVICE_STAGES = [
  {
    n: '01',
    title: 'Диагностика',
    body: 'Анализ ниши, конкурентов, спроса. Формирование ключевого ядра и плана публикаций.',
    result: 'Стратегия с прогнозом лидов',
    time: '1–2 дня',
  },
  {
    n: '02',
    title: 'Упаковка',
    body: 'Тексты под боли ЦА. Инфографика. Уникализация фото.',
    result: '+15–18% звонков · +20% просмотров',
    time: '3–5 дней',
  },
  {
    n: '03',
    title: 'Масштабирование',
    body: 'Публикация объявлений, автозагрузка. ИИ-автоответчик за 15 сек.',
    result: 'Первые входящие обращения',
    time: 'с 3–5 дня',
  },
  {
    n: '04',
    title: 'Оптимизация',
    body: 'А/Б тесты, управление бюджетом, перепубликация неэффективных объявлений.',
    result: 'Снижение CPL на 25–40%',
    time: 'еженедельно',
  },
];

function ServiceStages() {
  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">Продвижение</span> — Оптимизация»
          </h2>
          <p className="lead" style={{maxWidth: 580, marginTop: 18}}>
            От заявки до первых лидов — <strong>3–5 рабочих дней</strong>. Без «чёрного ящика»: вы видите результат на каждом шаге.
          </p>
        </Reveal>

        <div className="stages__list">
          {SERVICE_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>
  );
}

/* ===== FAQ ===== */
const FAQ = [
  {
    q: 'Сколько стоит продвижение?',
    a: <>
      <strong>НАЧАЛЬНЫЙ</strong> — 50 000 ₽/мес (до 150 объявлений), <strong>СТАНДАРТ</strong> — 85 000 ₽/мес (до 500), <strong>ПРОФЕССИОНАЛЬНЫЙ</strong> — 150 000 ₽/мес (до 5 000). Рекламный бюджет Авито — отдельно, с вашего счёта без комиссии.
    </>,
  },
  {
    q: 'Как быстро получу первые заявки?',
    a: <>При правильной стратегии — <strong>через 3–5 дней</strong>. Подтверждено всеми тремя кейсами (Геоникс, Вся Доставка, Slav Motors).</>,
  },
  {
    q: 'Что если результата не будет?',
    a: <>Перед стартом проводим честный аудит ниши. <strong>Если Авито не подходит вашему бизнесу — скажем об этом прямо, до подписания договора.</strong> Принцип искренности.</>,
  },
  {
    q: 'Можно ли работать с небольшим бюджетом?',
    a: <>Тариф <strong>НАЧАЛЬНЫЙ</strong> (50 000 ₽/мес) специально для самозанятых, ИП и теста нового направления в одном городе.</>,
  },
  {
    q: 'Вы работаете официально?',
    a: <>Да. Договор через ИП/ООО, полный пакет закрывающих документов, фиксированная стоимость без скрытых платежей.</>,
  },
];

function Faq() {
  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}}>
            Не нашли ответ? Спросите напрямую — Антон или старший менеджер ответят лично.
          </p>
          <button
            className="btn btn-dark btn-arrow"
            style={{marginTop: 22}}
            onClick={() => scrollToId('final-cta')}
          >
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>

        <div className="faq__list">
          {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 (services-specific) ===== */
function FinalCta() {
  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 /> Бесплатно</span>
            <span><Icon.Check /> Без «продающего созвона»</span>
            <span><Icon.Check /> Реальная таблица с цифрами</span>
          </div>
        </Reveal>
        <Reveal delay={150} className="audit__form-card">
          <LeadForm
            id="final-cta-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 servicesStyles = document.createElement('style');
servicesStyles.textContent = `
/* Hero form card — shared across all sub-pages */
.hero-form-card {
  background: #fff; color: var(--ink);
  border-radius: 24px; padding: 28px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
  position: relative;
}
.hero-form-card__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-red); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.hero-form-card__title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.hero-form-card__sub { font-size: 14px; color: var(--ink-60); margin: 8px 0 22px; }
.hero-form-card__guarantee {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-60);
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
  line-height: 1.35;
}
.hero-form-card__guarantee svg { color: var(--brand-red); flex-shrink: 0; }

/* Service items grid (L3 sub-pages) */
.service-items__head { margin-bottom: 56px; max-width: 760px; }
.service-items__head .eyebrow { margin-bottom: 18px; }
.service-items__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .service-items__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-items__grid { grid-template-columns: 1fr; } }
.service-items__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.service-items__card:hover { border-color: var(--ink); transform: translateY(-3px); background: var(--surface); }
.service-items__top { display: flex; justify-content: space-between; align-items: center; }
.service-items__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.service-items__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-orange);
  background: rgba(255,106,0,0.1);
  padding: 4px 10px; border-radius: 8px;
}
.service-items__title { letter-spacing: -0.02em; }
.service-items__text { color: var(--ink-60); font-size: 14px; line-height: 1.5; flex: 1; }
.service-items__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--ink);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  transition: color .2s ease;
}
.service-items__link:hover { color: var(--brand-red); }
.service-items__link svg { transition: transform .2s ease; }
.service-items__link:hover svg { transform: translateX(3px); }

/* Services hero */
.shero {
  position: relative;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.shero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 400px at 90% 5%, rgba(255, 106, 0, 0.20), transparent 60%),
    radial-gradient(800px 600px at 10% 100%, rgba(255, 47, 0, 0.14), transparent 65%);
}
.shero__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;
}
.shero__wrap { padding-top: 24px; padding-bottom: 80px; }

.shero__breadcrumbs {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 28px;
}
.shero__breadcrumbs a { color: rgba(255,255,255,0.7); }
.shero__breadcrumbs a:hover { color: #fff; }
.shero__breadcrumbs-current { color: var(--brand-orange); }

.shero__content {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1000px) { .shero__content { grid-template-columns: 1fr; gap: 32px; } }

.shero__chip { background: rgba(255,255,255,0.08); color: #fff; margin-bottom: 26px; }
.shero__h1 {
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.shero__h1-big {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.shero__lead {
  margin-top: 24px;
  font-size: 19px;
  max-width: 600px;
  color: rgba(255,255,255,0.8);
}
.shero__lead strong { color: #fff; }

.shero__advantages {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px) { .shero__advantages { grid-template-columns: 1fr; } }
.shero__adv {
  position: relative;
  padding: 22px 22px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.shero__adv:hover {
  background: rgba(255, 47, 0, 0.08);
  border-color: rgba(255, 47, 0, 0.3);
  transform: translateY(-2px);
}
.shero__adv-num {
  position: absolute; top: 18px; right: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,0.35);
  font-weight: 700; letter-spacing: 0.05em;
}
.shero__adv-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.shero__adv-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.shero__adv-text { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.4; }

/* Directions */
.directions { background: var(--bg); }
.directions__head { margin-bottom: 56px; max-width: 800px; }
.directions__head .eyebrow { margin-bottom: 18px; }
.directions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .directions__grid { grid-template-columns: 1fr; } }
.directions__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 18px;
  transition: border-color .2s ease, transform .2s ease;
}
.directions__card:hover { border-color: var(--ink); transform: translateY(-3px); }
.directions__card-top { display: flex; justify-content: space-between; align-items: center; }
.directions__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.directions__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-40); font-weight: 700;
  letter-spacing: 0.04em;
}
.directions__card-title { letter-spacing: -0.02em; }

.directions__row { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.directions__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;
}
.directions__row-value { font-size: 14px; line-height: 1.45; color: var(--ink); flex: 1; }

.directions__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.directions__tag {
  display: inline-block;
  font-size: 12px;
  padding: 5px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  color: var(--ink-60);
  font-weight: 600;
}

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

.methods__col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.methods__col-layer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-orange);
  font-weight: 700; letter-spacing: 0.05em;
}
.methods__col-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;
}
.methods__col--paid .methods__col-icon { background: var(--brand-red); }
.methods__col--ai .methods__col-icon { background: var(--brand-orange); color: var(--ink); }

.methods__col-title { margin-bottom: 20px; color: #fff; letter-spacing: -0.02em; }
.methods__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.methods__list li {
  display: flex; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
}
.methods__bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  margin-top: 8px;
  flex-shrink: 0;
}

.methods__sum {
  margin-top: 48px;
  padding: 24px 32px;
  background: var(--brand-red);
  border-radius: 18px;
  display: flex; align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.methods__sum span { font-size: clamp(15px, 1.5vw, 18px); color: rgba(255,255,255,0.85); font-weight: 500; }
.methods__sum strong { font-size: clamp(20px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.methods__sum > span:first-child { color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 700; }

/* What you get */
.whatyouget { background: var(--bg); }
.whatyouget__head { margin-bottom: 56px; max-width: 800px; }
.whatyouget__head .eyebrow { margin-bottom: 18px; }
.whatyouget__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .whatyouget__grid { grid-template-columns: 1fr; } }
.whatyouget__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 36px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.whatyouget__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.whatyouget__title { letter-spacing: -0.02em; }
.whatyouget__body { color: var(--ink-60); font-size: 15px; line-height: 1.5; flex: 1; }
.whatyouget__proof {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.whatyouget__proof-item {}
.whatyouget__proof-num {
  font-size: 22px; font-weight: 800;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}
.whatyouget__proof-cap { font-size: 12px; color: var(--ink-60); margin-top: 4px; font-weight: 600; }

/* Stages */
.stages__head { margin-bottom: 56px; max-width: 760px; }
.stages__head .eyebrow { margin-bottom: 18px; }
.stages__list {
  display: flex; flex-direction: column;
  gap: 12px;
}
.stages__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 28px 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  align-items: start;
  transition: background .2s ease, border-color .2s ease;
}
.stages__item:hover { background: var(--surface-2); border-color: var(--ink); }
@media (max-width: 700px) { .stages__item { grid-template-columns: 1fr; gap: 14px; } }
.stages__item-left { display: flex; flex-direction: column; gap: 10px; }
.stages__item-num {
  font-size: clamp(40px, 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;
}
.stages__item-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-60);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 8px;
  align-self: flex-start;
  font-weight: 600;
}
.stages__item-title { letter-spacing: -0.02em; margin-bottom: 8px; }
.stages__item-text { color: var(--ink-60); font-size: 15px; line-height: 1.5; }
.stages__item-result {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.stages__item-result svg { color: var(--brand-orange); }

/* FAQ */
.faq { background: var(--bg); }
.faq__wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .faq__wrap { grid-template-columns: 1fr; gap: 32px; } }
.faq__side { position: sticky; top: 96px; }
@media (max-width: 900px) { .faq__side { position: static; } }
.faq__side .eyebrow { margin-bottom: 18px; }

.faq__list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.faq__item {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  width: 100%;
}
.faq__item.open { border-color: var(--ink); background: var(--surface); }
.faq__item-head {
  display: grid;
  grid-template-columns: 48px 1fr 36px;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}
.faq__item-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-red);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.faq__item-q { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.faq__item-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600;
  color: var(--ink);
  transition: background .2s ease;
}
.faq__item.open .faq__item-toggle { background: var(--brand-red); color: #fff; }
.faq__item-a {
  padding: 0 24px 24px 88px;
  color: var(--ink-80);
  font-size: 15px;
  line-height: 1.55;
  animation: faqIn .25s ease;
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: translateY(0) } }
.faq__item-a strong { color: var(--ink); }

@media (max-width: 600px) {
  .faq__item-head { grid-template-columns: 36px 1fr 32px; padding: 18px 18px; }
  .faq__item-q { font-size: 15px; }
  .faq__item-a { padding: 0 18px 20px 18px; }
}
`;
document.head.appendChild(servicesStyles);

Object.assign(window, {
  ServicesHero, ServiceItems, Directions, Methods, WhatYouGet, ServiceStages, Faq, FinalCta
});