/* ============== Percent page (Авитолог за процент) sections ============== */

/* ===== Hero ===== */
function PercentHero() {
  const guarantees = [
    {
      big: '0₽',
      cap: 'до первых продаж',
      icon: <Icon.Shield />,
      text: 'Нет продаж — нет оплаты. Платите процент только с реальной выручки с Авито',
    },
    {
      big: '4',
      cap: 'специалиста в команде',
      icon: <Icon.Users />,
      text: 'Аналитик, SEO-копирайтер, дизайнер-инфограф, технический специалист — без доплат',
    },
    {
      big: '0',
      cap: 'блокировок',
      icon: <Icon.Bot />,
      text: 'За всю историю компании. 1 426 объявлений Геоникс — ноль проблем с модерацией',
    },
    {
      big: 'ИП/ООО',
      cap: 'договор и документы',
      icon: <Icon.Doc />,
      text: 'Процент, способ учёта, сроки выплаты — всё фиксируется в договоре',
    },
  ];

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

        <div className="shero__breadcrumbs">
          <a href={(window.FormulaTheme || {}).homeUrl || '/'}>Главная</a>
          <span>/</span>
          <a href={((window.FormulaTheme || {}).urls || {}).services || '#'}>Услуги</a>
          <span>/</span>
          <span className="shero__breadcrumbs-current">Авитолог за процент</span>
        </div>

        <div className="phero__top">
          <div className="phero__head">
            <div className="chip shero__chip"><span className="dot-red"></span> Услуга · 0 риска</div>
            <h1 className="display phero__h1">
              Авитолог за{' '}
              <span className="phero__h1-big">процент</span>{' '}
              от продаж — полный сервис без фиксированной оплаты
            </h1>
            <p className="lead phero__lead">
              Та же команда из 4 специалистов, те же инструменты, те же кейсы — <strong>вы платите только с реальной выручки</strong> с Авито.
            </p>

            <div className="percent-anchor">
              <div className="percent-anchor__row">
                <div className="percent-anchor__num">10–30%</div>
                <div className="percent-anchor__cap">от выручки с Авито</div>
              </div>
              <div className="percent-anchor__divider"></div>
              <div className="percent-anchor__text">
                Процент зависит от ниши, среднего чека и маржи. Рассчитываем индивидуально <strong>до подписания договора</strong>.
              </div>
            </div>
          </div>

          <div className="phero__form">
            <div className="hero-form-card" id="hero-form">
              <div className="hero-form-card__pill"><Icon.Zap /> Бесплатный расчёт</div>
              <div className="hero-form-card__title">
                Рассчитайте процент для вашей ниши
              </div>
              <p className="hero-form-card__sub">
                За 24 часа: аудит ниши, ставка процента, прогноз выручки
              </p>
              <LeadForm
                id="percent-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' },
                  { key: 'niche', label: 'Ниша', placeholder: 'Например, мебель', required: true },
                ]}
                button="Рассчитать процент"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Если маржа ниже 20% — скажем прямо: процент вам не подойдёт
              </div>
            </div>
          </div>
        </div>

        <div className="phero__guarantees">
          {guarantees.map((g, i) => (
            <Reveal key={i} delay={i*80} className="phero__gtee">
              <div className="phero__gtee-icon">{g.icon}</div>
              <div className="phero__gtee-big">{g.big}</div>
              <div className="phero__gtee-cap">{g.cap}</div>
              <p className="phero__gtee-text">{g.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== How it works (4 steps) ===== */
const HOW_STEPS = [
  {
    n: '01',
    title: 'Анализ ниши и расчёт',
    body: 'Изучаем бизнес, средний чек, маржинальность, конкуренцию на Авито. Честно говорим, если ниша не подходит — до договора. Рассчитываем процент.',
    pill: 'Обычно 10–30%',
    pillCap: 'в зависимости от ниши',
  },
  {
    n: '02',
    title: 'Договор с фиксацией условий',
    body: 'Прописываем процент, способ учёта продаж (CRM-интеграция или отчёты Авито), сроки выплаты. Работаем через ИП/ООО — полный пакет закрывающих документов.',
    pill: 'ИП / ООО',
    pillCap: 'официально',
  },
  {
    n: '03',
    title: 'Полный цикл работ',
    body: 'Те же инструменты, что и при ведении под ключ: масспостинг до 5 000 объявлений/мес, инфографика, ИИ-автоответчик 24/7, репутация. Нейросети уникализируют каждое объявление.',
    pill: '0 блокировок',
    pillCap: 'нейросети + уникализация',
  },
  {
    n: '04',
    title: 'Выплата с реальных продаж',
    body: 'В конце месяца считаем выручку с Авито по меткам. Вы платите оговорённый процент. Нет продаж — нет оплаты. Полная прозрачность через CRM или отчёты платформы.',
    pill: 'CRM-метки',
    pillCap: 'каждая продажа видна',
  },
];

function HowPercent() {
  return (
    <section id="how" className="section how">
      <div className="wrap">
        <Reveal className="how__head">
          <div className="eyebrow">Как работает модель</div>
          <h2 className="section-title">
            Как работает оплата<br/>
            <span className="text-red">за процент</span> от продаж
          </h2>
          <p className="lead" style={{maxWidth: 660, marginTop: 18}}>
            4 прозрачных шага — от анализа ниши до выплаты комиссии с реальных продаж.
          </p>
        </Reveal>

        <div className="how__grid">
          {HOW_STEPS.map((s, i) => (
            <Reveal key={i} delay={i*100} className="how__card">
              <div className="how__card-num">{s.n}</div>
              <h3 className="h3 how__card-title">{s.title}</h3>
              <p className="how__card-body">{s.body}</p>
              <div className="how__card-pill">
                <Icon.Check />
                <div>
                  <div className="how__card-pill-big">{s.pill}</div>
                  <div className="how__card-pill-cap">{s.pillCap}</div>
                </div>
              </div>
              {i < HOW_STEPS.length - 1 && <div className="how__arrow" aria-hidden>→</div>}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Who it suits (3 portraits) ===== */
const PORTRAITS = [
  {
    title: 'Товарный бизнес с понятной маржей',
    condition: 'Маржинальность от 30%. Есть понятная себестоимость.',
    why: 'Масштабируетесь без вложений в маркетинг. Мы растём вместе с вашими продажами.',
    examples: ['Мебель', 'Электроника', 'Авто-аксессуары', 'Спорт-инвентарь'],
    icon: <Icon.Doc />,
  },
  {
    title: 'Услуги с высоким средним чеком',
    condition: 'Средний чек от 50 000 ₽. Ремонт, строительство, консалтинг.',
    why: 'Выгоднее фиксированной оплаты. Slav Motors: 1 578 контактов по 254 ₽ — без начальных вложений.',
    examples: ['Ремонт авто', 'Строительство', 'Консалтинг', 'B2B-услуги'],
    icon: <Icon.Sparkles />,
    popular: true,
  },
  {
    title: 'Стартапы и малый бизнес',
    condition: 'Есть продукт, нет бюджета на маркетинг.',
    why: 'Доступ к команде из 4 специалистов без начальных инвестиций. Все наши кейсы стартовали с нуля.',
    examples: ['Новые ниши', 'Запуск с нуля', 'Тест направления', 'МСБ'],
    icon: <Icon.Zap />,
  },
];

function WhoSuits() {
  return (
    <section className="section section--surface portraits">
      <div className="wrap">
        <Reveal className="portraits__head">
          <div className="eyebrow">Кому подходит</div>
          <h2 className="section-title">
            Для кого работа за процент —<br/>
            <span className="text-red">лучший вариант?</span>
          </h2>
        </Reveal>

        <div className="portraits__grid">
          {PORTRAITS.map((p, i) => (
            <Reveal key={i} delay={i*100} className={`portraits__card ${p.popular ? 'popular' : ''}`}>
              {p.popular && <div className="portraits__badge">Чаще выбирают</div>}
              <div className="portraits__icon">{p.icon}</div>
              <h3 className="h3 portraits__title">{p.title}</h3>

              <div className="portraits__row">
                <div className="portraits__row-label">Условие</div>
                <div className="portraits__row-value">{p.condition}</div>
              </div>
              <div className="portraits__row">
                <div className="portraits__row-label">Почему выгодно</div>
                <div className="portraits__row-value"><strong>{p.why}</strong></div>
              </div>

              <div className="portraits__tags">
                {p.examples.map((e, j) => <span key={j} className="directions__tag">{e}</span>)}
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="portraits__warn">
          <Icon.Shield />
          <div>
            <strong>Если маржа ниже 20%</strong> — процентная модель может быть невыгодна. Предложим фиксированный тариф и честно скажем почему. Это наш принцип работы.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Guarantees ===== */
const GUARANTEES = [
  {
    icon: <Icon.Chart />,
    title: 'Прозрачный учёт продаж',
    body: 'Интегрируем Авито с вашей CRM (AmoCRM, Битрикс24). Все заявки помечаются меткой — видно, откуда пришёл каждый клиент.',
    proof: 'В конце месяца — автоматический подсчёт выручки с Авито.',
  },
  {
    icon: <Icon.Shield />,
    title: 'Безопасность аккаунта',
    body: '0 блокировок за всю историю компании. Нейросети уникализируют тексты, программная обработка фото исключает дубли.',
    proof: 'Кейс Геоникс: 1 426 объявлений — ноль блокировок.',
  },
  {
    icon: <Icon.Doc />,
    title: 'Договор без скрытых условий',
    body: 'Фиксируем процент, способ учёта, сроки выплаты. Расторжение — с уведомлением 14 дней. Никаких штрафов.',
    proof: 'Полный пакет закрывающих документов — ИП/ООО.',
  },
  {
    icon: <Icon.Sparkles />,
    title: 'Честный аудит перед стартом',
    body: 'Если Авито не подходит вашей нише или маржа делает процентную модель невыгодной — скажем прямо, до подписания.',
    proof: 'Начинаем только при наличии реального спроса.',
  },
  {
    icon: <Icon.Bot />,
    title: 'ИИ-автоответчик 24/7',
    body: 'Реагирует за 15 секунд, закрывает 80% типовых вопросов без человека.',
    proof: 'Ответ в первые 15 минут повышает вероятность сделки на 40%.',
  },
];

function PercentGuarantees() {
  return (
    <section className="section section--dark percent-g">
      <div className="wrap">
        <Reveal className="percent-g__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="percent-g__grid">
          {GUARANTEES.map((g, i) => (
            <Reveal key={i} delay={i*80} className={`percent-g__card ${i === 0 ? 'percent-g__card--featured' : ''}`}>
              <div className="percent-g__icon">{g.icon}</div>
              <div className="percent-g__body">
                <h3 className="percent-g__title">{g.title}</h3>
                <p className="percent-g__text">{g.body}</p>
                <div className="percent-g__proof">
                  <Icon.Check />
                  <span>{g.proof}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Percent Cases (variant of cases with "Условия" + "Выгода клиента") ===== */
const PERCENT_CASES = [
  {
    name: 'Геоникс',
    niche: 'Геодезия',
    terms: 'Процентная модель · запуск с нуля',
    benefit: 'Стабильный поток лидов без начальных вложений в маркетинг',
    metrics: [
      { num: 1578, suffix: '', label: 'целевых лидов' },
      { num: 389, suffix: ' ₽', label: 'стоимость лида' },
      { num: 1426, suffix: '', label: 'объявлений · 0 блокировок' },
      { num: 614779, suffix: ' ₽', label: 'общий бюджет' },
    ],
  },
  {
    name: 'Вся Доставка',
    niche: 'Нерудные материалы',
    terms: 'Процентная модель · масштабирование с нуля',
    benefit: 'Масштабирование по ассортименту и регионам без риска',
    metrics: [
      { num: 3500, suffix: '', label: 'целевых лидов' },
      { num: 115, suffix: ' ₽', label: 'стоимость лида' },
      { num: 79000, suffix: '', label: 'просмотров' },
      { num: 5.1, suffix: ' ₽', label: 'за просмотр', isFloat: true },
    ],
  },
  {
    name: 'Slav Motors',
    niche: 'Автомастерская',
    terms: 'Процентная модель · запуск с нуля',
    benefit: 'Поток заявок на ремонт без вложений в продвижение',
    metrics: [
      { num: 1578, suffix: '', label: 'целевых контактов' },
      { num: 254, suffix: ' ₽', label: 'стоимость лида' },
      { num: 8065, suffix: '', label: 'просмотров' },
      { num: 600000, suffix: ' ₽', label: 'бюджет за год' },
    ],
  },
];

function PercentCases() {
  return (
    <section id="cases" className="section section--surface cases">
      <div className="wrap">
        <Reveal className="cases__head">
          <div className="eyebrow">Кейсы</div>
          <h2 className="section-title">
            Результаты проектов на<br/>
            <span className="text-red">процентной модели</span>
          </h2>
          <p className="lead" style={{maxWidth: 700, marginTop: 18}}>
            Все проекты запущены с нуля — без истории аккаунта и начальных вложений в маркетинг.
          </p>
        </Reveal>

        <div className="cases__list">
          {PERCENT_CASES.map((c, i) => (
            <Reveal key={i} delay={i*100} className="cases__item">
              <div className="cases__item-head">
                <div className="cases__item-num">КЕЙС {String(i+1).padStart(2,'0')}</div>
                <div className="cases__item-state">{c.terms}</div>
              </div>

              <div className="cases__item-body">
                <div className="cases__item-info">
                  <h3 className="cases__item-name">{c.name}</h3>
                  <div className="cases__item-niche">{c.niche}</div>

                  <div className="cases__item-tasks">
                    <div className="cases__item-tasks-label">Выгода клиента</div>
                    <div style={{fontSize: 16, fontWeight: 600, lineHeight: 1.4}}>{c.benefit}</div>
                  </div>

                  <button className="btn btn-primary btn-arrow cases__item-cta" onClick={() => scrollToId('final-cta')}>
                    Хочу так же <Icon.ArrowRight />
                  </button>
                </div>

                <div className="cases__item-metrics">
                  {c.metrics.map((m, j) => (
                    <div key={j} className="cases__metric">
                      <div className="cases__metric-num">
                        {m.isFloat ? (
                          <>{m.num.toLocaleString('ru-RU', {minimumFractionDigits:1, maximumFractionDigits:1})}</>
                        ) : (
                          <AnimNumber value={m.num} />
                        )}
                        <span className="cases__metric-suffix">{m.suffix}</span>
                      </div>
                      <div className="cases__metric-label">{m.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Percent FAQ ===== */
const PERCENT_FAQ = [
  {
    q: 'Какой процент вы берёте?',
    a: <>Зависит от ниши, среднего чека и маржи. <strong>Обычно 10–30%</strong> от выручки с Авито. Рассчитываем индивидуально после анализа бизнеса.</>,
  },
  {
    q: 'Что если у меня низкая маржа?',
    a: <>Если маржа ниже 20%, процентная модель может быть невыгодна — <strong>честно скажем об этом</strong>. Предложим фиксированный тариф: НАЧАЛЬНЫЙ (50 000 ₽/мес), СТАНДАРТ (85 000 ₽/мес) или ПРОФЕССИОНАЛЬНЫЙ (150 000 ₽/мес).</>,
  },
  {
    q: 'Как вы считаете продажи?',
    a: <>Через <strong>CRM-интеграцию</strong> (AmoCRM, Битрикс24) или отчёты Авито. Каждая заявка с Авито помечается меткой. В конце месяца — автоматический подсчёт выручки с этих клиентов.</>,
  },
  {
    q: 'Есть ли минимальный срок?',
    a: <><strong>Минимум 3 месяца</strong> — нужно запустить и протестировать стратегию. После 3 месяцев — расторжение с уведомлением за 14 дней, без штрафов.</>,
  },
  {
    q: 'Кто работает над проектом?',
    a: <>Команда из <strong>4 специалистов</strong>: аналитик данных, SEO-копирайтер, дизайнер-инфограф, технический специалист — под контролем основателя Антона Федина (4 года внутри Авито, награда «Результат года»). Ответ менеджера — до 30 минут.</>,
  },
];

function PercentFaq() {
  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">
          {PERCENT_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>
  );
}

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

/* ============== Styles ============== */
const percentStyles = document.createElement('style');
percentStyles.textContent = `
/* Percent hero (variant of phero) */
.phero--percent .phero__h1 { font-size: clamp(34px, 4.6vw, 60px); }

.percent-anchor {
  margin-top: 30px;
  display: flex; align-items: center;
  gap: 24px;
  padding: 22px 24px;
  background: rgba(255, 47, 0, 0.10);
  border: 1px solid rgba(255, 47, 0, 0.25);
  border-radius: 18px;
  max-width: 600px;
  flex-wrap: wrap;
}
.percent-anchor__row { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.percent-anchor__num {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.percent-anchor__cap { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.percent-anchor__divider { width: 1px; height: 44px; background: rgba(255,255,255,0.15); }
.percent-anchor__text { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.45; flex: 1; min-width: 200px; }
.percent-anchor__text strong { color: #fff; }

.phero__guarantees {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .phero__guarantees { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .phero__guarantees { grid-template-columns: 1fr; } }
.phero__gtee {
  padding: 24px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.phero__gtee:hover {
  background: rgba(255, 47, 0, 0.08);
  border-color: rgba(255, 47, 0, 0.3);
  transform: translateY(-3px);
}
.phero__gtee-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.phero__gtee-big {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.phero__gtee-cap { font-size: 13px; color: #fff; font-weight: 700; margin-top: 6px; }
.phero__gtee-text { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 10px; line-height: 1.45; }

/* How section */
.how { background: var(--bg); }
.how__head { margin-bottom: 56px; max-width: 760px; }
.how__head .eyebrow { margin-bottom: 18px; }
.how__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
@media (max-width: 1000px) { .how__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .how__grid { grid-template-columns: 1fr; } }

.how__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: border-color .2s ease, transform .2s ease;
}
.how__card:hover { border-color: var(--ink); transform: translateY(-3px); }
.how__card-num {
  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;
}
.how__card-title { letter-spacing: -0.02em; font-size: 18px; line-height: 1.2; }
.how__card-body { color: var(--ink-60); font-size: 14px; line-height: 1.5; flex: 1; }
.how__card-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--ink); color: #fff;
  border-radius: 12px;
  margin-top: 4px;
}
.how__card-pill > svg { color: var(--brand-orange); flex-shrink: 0; }
.how__card-pill-big { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.how__card-pill-cap { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 1px; }

.how__arrow {
  position: absolute;
  right: -16px;
  top: 56px;
  width: 32px; height: 32px;
  background: var(--brand-red); color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  font-weight: 800;
  z-index: 2;
  border: 3px solid var(--bg);
}
@media (min-width: 1001px) { .how__arrow { display: flex; } }

/* Portraits */
.portraits__head { margin-bottom: 56px; max-width: 760px; }
.portraits__head .eyebrow { margin-bottom: 18px; }
.portraits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .portraits__grid { grid-template-columns: 1fr; } }

.portraits__card {
  position: relative;
  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;
}
.portraits__card:hover { border-color: var(--ink); transform: translateY(-3px); }
.portraits__card.popular {
  background: var(--dark); color: #fff; border-color: var(--brand-red);
  box-shadow: 0 30px 60px -20px rgba(255, 47, 0, 0.25);
}
.portraits__card.popular .portraits__row { border-color: rgba(255,255,255,0.1); }
.portraits__card.popular .portraits__row-label { color: rgba(255,255,255,0.5); }
.portraits__card.popular .portraits__row-value { color: #fff; }
.portraits__card.popular .directions__tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }

.portraits__badge {
  position: absolute; top: -12px; left: 24px;
  background: var(--brand-red); color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.portraits__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.portraits__card.popular .portraits__icon { background: var(--brand-orange); color: var(--ink); }
.portraits__title { letter-spacing: -0.02em; line-height: 1.2; }
.portraits__row { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.portraits__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;
}
.portraits__row-value { font-size: 14px; line-height: 1.5; flex: 1; }
.portraits__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.portraits__warn {
  margin-top: 40px;
  padding: 22px 26px;
  border-radius: 16px;
  background: rgba(255, 47, 0, 0.07);
  border: 1px dashed rgba(255, 47, 0, 0.35);
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 15px; line-height: 1.45;
  color: var(--ink);
}
.portraits__warn > svg { color: var(--brand-red); flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; }
.portraits__warn strong { color: var(--brand-red); font-weight: 800; }

/* Guarantees (5 cards on dark, first featured wide) */
.percent-g__head { margin-bottom: 56px; max-width: 800px; }
.percent-g__head .eyebrow { margin-bottom: 18px; }
.percent-g__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.percent-g__card {
  grid-column: span 2;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px;
  display: flex; gap: 18px;
  align-items: flex-start;
}
.percent-g__card--featured {
  grid-column: span 6;
  background: linear-gradient(135deg, rgba(255, 47, 0, 0.18), rgba(255, 106, 0, 0.06));
  border-color: var(--brand-red);
}
@media (max-width: 1100px) {
  .percent-g__grid { grid-template-columns: 1fr 1fr; }
  .percent-g__card { grid-column: span 1; }
  .percent-g__card--featured { grid-column: span 2; }
}
@media (max-width: 700px) {
  .percent-g__grid { grid-template-columns: 1fr; }
  .percent-g__card, .percent-g__card--featured { grid-column: span 1; }
}

.percent-g__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.percent-g__body { flex: 1; }
.percent-g__title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; line-height: 1.2; }
.percent-g__text { color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.5; margin-top: 8px; }
.percent-g__proof {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.percent-g__proof svg { color: var(--brand-orange); width: 14px; height: 14px; }
`;
document.head.appendChild(percentStyles);

Object.assign(window, {
  PercentHero, HowPercent, WhoSuits, PercentGuarantees, PercentCases, PercentFaq, PercentFinalCta
});