diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3151270
--- /dev/null
+++ b/README.md
@@ -0,0 +1,170 @@
+# Лендинг мультиплатформенного AI-лидгена для B2B
+
+Одностраничный лендинг SaaS-продукта для поиска квалифицированных лидов из **16+ площадок** (Telegram, HH.ru, SuperJob, Habr Career, FL.ru, Kwork, LinkedIn, Reddit, Hacker News и др.) в формате **вайтлейбл-бренда**.
+
+> Целевое действие: **самостоятельная регистрация в сервисе** и запуск первого проекта.
+
+---
+
+## 1) Цель проекта
+
+Сделать конверсионный лендинг, который:
+- объясняет ценность за 3 секунды;
+- снижает страх сложности за счёт простой структуры и демонстрации интерфейса;
+- ведёт пользователя к регистрации через повторяющиеся CTA;
+- поддерживает мобильный сценарий как приоритетный.
+
+**Целевая аудитория:** B2B-компании всех ниш: SMB, агентства, фрилансеры, CRM-интеграторы, маркетплейс-специалисты.
+
+---
+
+## 2) Позиционирование
+
+**Не “инструмент парсинга”, а поток квалифицированных клиентов** из 16+ площадок.
+
+Ключевой месседж:
+> «Клиенты ищут вас прямо сейчас на 16+ площадках. Мы их находим.»
+
+---
+
+## 3) KPI лендинга
+
+- Конверсия: **8–15%** (посетитель → регистрация)
+- Время до первого скролла: **< 3 сек**
+- Bounce rate: **< 40%**
+- Среднее время на странице: **> 2 минут**
+
+---
+
+## 4) Структура лендинга (11 блоков)
+
+1. **Hero** — ценность + главный CTA + мини-доказательство
+2. **Как это работает** — 3 шага за 4 минуты
+3. **Демо интерфейса** — дашборд / список лидов / чат, автосмена каждые 5 сек
+4. **Ключевые преимущества** — почему лучше ручного поиска и альтернатив
+5. **Кейсы с цифрами** — социальное доказательство по нишам
+6. **ROI-калькулятор** — прогноз выручки и окупаемости в реальном времени
+7. **Тарифы** — прозрачная матрица планов + выделение рекомендованного
+8. **Сравнение с альтернативами** — таблица «ручной / ключевики / наш сервис»
+9. **FAQ** — снятие возражений перед регистрацией
+10. **Финальный CTA** — последний конверсионный толчок
+11. **Футер** — юридические ссылки, контакты, поддержка
+
+---
+
+## 5) Требования к дизайну
+
+- Стиль: современный, технологичный, чистый
+- Без стоковых фото людей; только интерфейс, данные, схемы, иконки
+- Референсы по духу: Linear / Vercel / Stripe
+- Палитра:
+  - тёмный фон: `#0A0A0F`
+  - акцент: `#FF6B35`
+  - позитивные метрики: `#34D399`
+  - вторичный текст: `#9898AA`
+- Типографика: Manrope (или аналог), акцент на крупных заголовках и цифрах
+
+---
+
+## 6) Технические требования
+
+- Формат реализации: статический лендинг (HTML + Tailwind CSS + JS) или SSR-фреймворк
+- Адаптивные диапазоны:
+  - Mobile: 320–768 (высший приоритет)
+  - Tablet: 768–1024
+  - Desktop: 1024–1440
+  - Wide: 1440+
+- Цели по производительности:
+  - Lighthouse Performance: 90+
+  - FCP: < 1.5 сек
+  - LCP: < 2.5 сек
+- SEO:
+  - семантическая разметка H1-H3
+  - Meta / Open Graph / Twitter Card
+  - Schema.org (SoftwareApplication + FAQPage)
+  - robots.txt и sitemap.xml
+- Интеграции:
+  - редирект регистрации на `platform.leadl.ai` с UTM
+  - Яндекс.Метрика + GA4
+  - пиксель VK (опционально)
+
+---
+
+## 7) Контент и тон коммуникации
+
+- Тон: прямой, конкретный, без воды
+- Цифры важнее эпитетов
+- Без обещаний фиксированного результата без оговорки о нише
+- Для вайтлейбла: **не упоминать Leadl.ai в текстах лендинга**
+- Минимизировать англицизмы без необходимости (с учётом требований ФЗ-168)
+
+---
+
+## 8) Конверсионная механика
+
+### Основные CTA (4 точки)
+1. Hero: «Получить первых лидов бесплатно»
+2. После блока шагов: «Попробовать за 4 минуты»
+3. Под ROI-калькулятором: «Начать получать этих клиентов»
+4. Финальный блок: «Начать бесплатно»
+
+### Микроконверсии для аналитики
+- глубина скролла (10/25/50/75/100)
+- клик по CTA
+- взаимодействие с калькулятором
+- раскрытие FAQ
+- клик по Telegram-контакту
+- время на странице >30 / >60 / >120 сек
+
+---
+
+## 9) Этапы реализации и сроки
+
+1. Концепт: 3–5 дней
+2. Полный дизайн: 5–7 дней
+3. Вёрстка: 5–7 дней
+4. Интерактив: 2–3 дня
+5. Интеграции: 1–2 дня
+6. Тестирование: 2–3 дня
+7. Запуск: 1 день
+
+**Итого:** 19–28 рабочих дней (4–6 недель)
+
+---
+
+## 10) Чек-лист перед запуском
+
+- [ ] Бренд/логотип утверждён
+- [ ] Домен подключён
+- [ ] Тарифы и цены финализированы
+- [ ] Подготовлены реальные скриншоты интерфейса
+- [ ] Есть минимум 3 кейса с цифрами
+- [ ] Подготовлены оферта и политика конфиденциальности
+- [ ] Настроен редирект регистрации с UTM
+- [ ] Подключена аналитика и события
+- [ ] Готов канал/бот в Telegram
+- [ ] Проверены тексты на лишние англицизмы
+- [ ] Lighthouse 90+
+- [ ] Протестирована мобильная версия на реальных устройствах
+
+---
+
+## 11) Содержимое текущего репозитория
+
+- `index.html` — текущий одностраничный лендинг
+- `CLAUDE.md` — проектные ограничения по стилю/стеку
+- `README.md` — этот документ (ТЗ и рамка реализации)
+
+---
+
+## 12) Быстрый локальный запуск
+
+Так как проект статический, достаточно открыть `index.html` в браузере.
+
+Для запуска через локальный сервер (рекомендуется):
+
+```bash
+python -m http.server 8080
+```
+
+Далее открыть: `http://localhost:8080`
diff --git a/index.html b/index.html
index 5d47716..2a46e4d 100644
--- a/index.html
+++ b/index.html
@@ -209,7 +209,7 @@
       <a href="#cases"     style="color:rgba(255,255,255,0.55);text-decoration:none;font-size:14px;">Кейсы</a>
     </div>
 
-    <a href="#register" style="display:none;padding:8px 18px;border-radius:10px;
+    <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" style="display:none;padding:8px 18px;border-radius:10px;
        background:linear-gradient(135deg,#FF6B35,#e04d15);color:#fff;
        font-size:14px;font-weight:700;text-decoration:none;
        box-shadow:0 0 16px rgba(255,107,53,0.35);
@@ -269,7 +269,7 @@
         </div>
 
         <!-- CTA -->
-        <a href="#register" class="glow-btn" style="margin-bottom:20px;">
+        <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="glow-btn" style="margin-bottom:20px;">
           Получить первых лидов бесплатно
           <i data-lucide="arrow-right" style="width:18px;height:18px;flex-shrink:0;"></i>
         </a>
@@ -339,7 +339,7 @@
               <i data-lucide="message-circle" style="width:11px;height:11px;flex-shrink:0;"></i>
               Чат «Бизнес Москва»
             </span>
-            <a href="#register" class="card-action">Написать →</a>
+            <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="card-action">Написать →</a>
           </div>
         </div>
 
@@ -366,7 +366,7 @@
               <i data-lucide="briefcase" style="width:11px;height:11px;flex-shrink:0;"></i>
               Вакансия · Москва
             </span>
-            <a href="#register" class="card-action">Откликнуться →</a>
+            <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="card-action">Откликнуться →</a>
           </div>
         </div>
 
@@ -393,7 +393,7 @@
               <i data-lucide="globe" style="width:11px;height:11px;flex-shrink:0;"></i>
               Публичный пост
             </span>
-            <a href="#register" class="card-action">Написать →</a>
+            <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="card-action">Написать →</a>
           </div>
         </div>
 
@@ -436,7 +436,9 @@
     <div style="text-align:center;margin-bottom:56px;">
       <div style="display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;
                   background:rgba(255,107,53,0.1);border:1px solid rgba(255,107,53,0.25);margin-bottom:16px;">
-        <i data-lucide="timer" style="width:13px;height:13px;color:#FF6B35;flex-shrink:0;"></i>
+        <svg viewBox="0 0 24 24" style="width:13px;height:13px;color:#FF6B35;flex-shrink:0;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="13" r="8"></circle><path d="M12 9v4l2.5 2.5"></path><path d="M9 2h6"></path>
+        </svg>
         <span style="font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:#FF6B35;">
           Быстрый старт
         </span>
@@ -464,7 +466,9 @@
             <span class="step-num">1</span>
             <div class="step-icon" style="background:linear-gradient(135deg,rgba(255,107,53,0.12),rgba(255,107,53,0.06));
                                           border:1px solid rgba(255,107,53,0.2);">
-              <i data-lucide="settings-2" style="width:22px;height:22px;color:#FF6B35;"></i>
+              <svg viewBox="0 0 24 24" style="width:22px;height:22px;color:#FF6B35;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M4 21v-7"></path><path d="M4 10V3"></path><path d="M12 21v-9"></path><path d="M12 8V3"></path><path d="M20 21v-5"></path><path d="M20 12V3"></path><path d="M2 14h4"></path><path d="M10 10h4"></path><path d="M18 16h4"></path>
+              </svg>
             </div>
           </div>
           <h3 class="step-title">Опишите свой бизнес</h3>
@@ -493,8 +497,8 @@ <h3 class="step-title">Опишите свой бизнес</h3>
 
       <!-- Стрелка 1→2 -->
       <div class="step-arrow">
-        <i data-lucide="arrow-right" class="arrow-icon-h" style="color:#d1d5db;width:28px;height:28px;"></i>
-        <i data-lucide="arrow-down"  class="arrow-icon-v" style="color:#d1d5db;width:28px;height:28px;"></i>
+        <svg viewBox="0 0 24 24" class="arrow-icon-h" style="color:#d1d5db;width:28px;height:28px;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+        <svg viewBox="0 0 24 24" class="arrow-icon-v" style="color:#d1d5db;width:28px;height:28px;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"></path><path d="m5 12 7 7 7-7"></path></svg>
       </div>
 
       <!-- ── Шаг 2 ── -->
@@ -504,7 +508,9 @@ <h3 class="step-title">Опишите свой бизнес</h3>
             <span class="step-num" style="color:#FF6B35;">2</span>
             <div class="step-icon" style="background:linear-gradient(135deg,rgba(255,107,53,0.15),rgba(255,107,53,0.08));
                                           border:1px solid rgba(255,107,53,0.3);">
-              <i data-lucide="bot" style="width:22px;height:22px;color:#FF6B35;"></i>
+              <svg viewBox="0 0 24 24" style="width:22px;height:22px;color:#FF6B35;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <rect x="3" y="8" width="18" height="12" rx="2"></rect><path d="M12 4v4"></path><path d="M9 13h.01"></path><path d="M15 13h.01"></path><path d="M8 20v2"></path><path d="M16 20v2"></path>
+              </svg>
             </div>
           </div>
           <h3 class="step-title">AI находит лидов</h3>
@@ -515,23 +521,33 @@ <h3 class="step-title">AI находит лидов</h3>
           <!-- Воронка -->
           <div style="margin-top:20px;display:flex;flex-direction:column;gap:5px;">
             <div class="funnel-row" style="background:#fff3ef;color:#FF6B35;border:1px solid rgba(255,107,53,0.2);">
-              <i data-lucide="scan-search" style="width:13px;height:13px;flex-shrink:0;"></i>
+              <svg viewBox="0 0 24 24" style="width:13px;height:13px;flex-shrink:0;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <circle cx="11" cy="11" r="6"></circle><path d="m20 20-3-3"></path><path d="M3 8V5h3"></path><path d="M16 3h3v3"></path><path d="M3 16v3h3"></path><path d="M18 21h3v-3"></path>
+              </svg>
               Сканирование площадок
             </div>
             <div class="funnel-row" style="background:#fff7f4;color:#f97316;border:1px solid rgba(249,115,22,0.15);">
-              <i data-lucide="filter" style="width:13px;height:13px;flex-shrink:0;"></i>
+              <svg viewBox="0 0 24 24" style="width:13px;height:13px;flex-shrink:0;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+              </svg>
               Семантический фильтр
             </div>
             <div class="funnel-row" style="background:#fffbf8;color:#fb923c;border:1px solid rgba(251,146,60,0.12);">
-              <i data-lucide="brain" style="width:13px;height:13px;flex-shrink:0;"></i>
+              <svg viewBox="0 0 24 24" style="width:13px;height:13px;flex-shrink:0;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M8.5 8A2.5 2.5 0 1 0 6 10.5V15a3 3 0 0 0 3 3"></path><path d="M15.5 8A2.5 2.5 0 1 1 18 10.5V15a3 3 0 0 1-3 3"></path><path d="M12 5v14"></path>
+              </svg>
               AI-оценка намерения
             </div>
             <div class="funnel-row" style="background:#f9fafb;color:#6b7280;border:1px solid #e5e7eb;">
-              <i data-lucide="badge-check" style="width:13px;height:13px;flex-shrink:0;"></i>
+              <svg viewBox="0 0 24 24" style="width:13px;height:13px;flex-shrink:0;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M12 22s7-3 7-10V5l-7-3-7 3v7c0 7 7 10 7 10z"></path><path d="m9 12 2 2 4-4"></path>
+              </svg>
               Проверка дубликатов
             </div>
             <div class="funnel-row" style="background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;">
-              <i data-lucide="send" style="width:13px;height:13px;flex-shrink:0;"></i>
+              <svg viewBox="0 0 24 24" style="width:13px;height:13px;flex-shrink:0;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="m22 2-7 20-4-9-9-4z"></path><path d="M22 2 11 13"></path>
+              </svg>
               Отправка вам
             </div>
           </div>
@@ -540,8 +556,8 @@ <h3 class="step-title">AI находит лидов</h3>
 
       <!-- Стрелка 2→3 -->
       <div class="step-arrow">
-        <i data-lucide="arrow-right" class="arrow-icon-h" style="color:#d1d5db;width:28px;height:28px;"></i>
-        <i data-lucide="arrow-down"  class="arrow-icon-v" style="color:#d1d5db;width:28px;height:28px;"></i>
+        <svg viewBox="0 0 24 24" class="arrow-icon-h" style="color:#d1d5db;width:28px;height:28px;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+        <svg viewBox="0 0 24 24" class="arrow-icon-v" style="color:#d1d5db;width:28px;height:28px;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"></path><path d="m5 12 7 7 7-7"></path></svg>
       </div>
 
       <!-- ── Шаг 3 ── -->
@@ -551,7 +567,9 @@ <h3 class="step-title">AI находит лидов</h3>
             <span class="step-num">3</span>
             <div class="step-icon" style="background:linear-gradient(135deg,rgba(34,197,94,0.12),rgba(34,197,94,0.06));
                                           border:1px solid rgba(34,197,94,0.2);">
-              <i data-lucide="inbox" style="width:22px;height:22px;color:#16a34a;"></i>
+              <svg viewBox="0 0 24 24" style="width:22px;height:22px;color:#16a34a;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M22 12h-6l-2 3h-4l-2-3H2"></path><path d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path>
+              </svg>
             </div>
           </div>
           <h3 class="step-title">Получайте контакты</h3>
@@ -578,12 +596,12 @@ <h3 class="step-title">Получайте контакты</h3>
               <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;
                            border-radius:6px;font-size:11px;font-weight:600;
                            background:#f3f4f6;color:#374151;">
-                <i data-lucide="wallet" style="width:10px;height:10px;"></i> от 80 000 ₽
+                <svg viewBox="0 0 24 24" style="width:10px;height:10px;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"></rect><path d="M16 12h.01"></path></svg> от 80 000 ₽
               </span>
               <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;
                            border-radius:6px;font-size:11px;font-weight:600;
                            background:#f3f4f6;color:#374151;">
-                <i data-lucide="clock" style="width:10px;height:10px;"></i> Срочно
+                <svg viewBox="0 0 24 24" style="width:10px;height:10px;" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 7v5l3 3"></path></svg> Срочно
               </span>
             </div>
           </div>
@@ -594,7 +612,7 @@ <h3 class="step-title">Получайте контакты</h3>
 
     <!-- CTA под блоком -->
     <div style="text-align:center;margin-top:52px;">
-      <a href="#register" class="glow-btn" style="display:inline-flex;width:auto;
+      <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="glow-btn" style="display:inline-flex;width:auto;
          background:linear-gradient(135deg,#FF6B35,#e04d15);">
         Начать за 4 минуты
         <i data-lucide="arrow-right" style="width:17px;height:17px;flex-shrink:0;"></i>
@@ -604,6 +622,628 @@ <h3 class="step-title">Получайте контакты</h3>
   </div>
 </section>
 
+
+<!-- ═══════════════════════════════════════
+     БЛОК 3 — ДЕМО ИНТЕРФЕЙСА
+════════════════════════════════════════ -->
+<section id="demo" style="background:#F7F7FA;padding:0 20px 88px;">
+  <div style="max-width:1100px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:24px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Вот как выглядят ваши будущие клиенты
+      </h2>
+    </div>
+
+    <div class="platform-strip" aria-label="Площадки мониторинга">
+      <span class="demo-platform-badge">Telegram</span>
+      <span class="demo-platform-badge">HH.ru</span>
+      <span class="demo-platform-badge">SuperJob</span>
+      <span class="demo-platform-badge">Habr Career</span>
+      <span class="demo-platform-badge">FL.ru</span>
+      <span class="demo-platform-badge">Kwork</span>
+      <span class="demo-platform-badge">LinkedIn</span>
+      <span class="demo-platform-badge">Reddit</span>
+      <span class="demo-platform-badge">Hacker News</span>
+      <span class="demo-platform-badge">Remote OK</span>
+    </div>
+
+    <div class="demo-shell">
+      <div class="demo-tabs" role="tablist" aria-label="Экраны демо-интерфейса">
+        <button type="button" id="demo-tab-0" class="demo-tab is-active" data-demo-tab="0" role="tab" aria-controls="demo-panel-0" aria-selected="true">Дашборд</button>
+        <button type="button" id="demo-tab-1" class="demo-tab" data-demo-tab="1" role="tab" aria-controls="demo-panel-1" aria-selected="false">Список лидов</button>
+        <button type="button" id="demo-tab-2" class="demo-tab" data-demo-tab="2" role="tab" aria-controls="demo-panel-2" aria-selected="false">Чат с лидом</button>
+      </div>
+
+      <div id="demo-panel-0" class="demo-screen is-active" data-demo-screen="0" role="tabpanel" aria-labelledby="demo-tab-0">
+        <div class="demo-card">
+          <div style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;">
+            <div>
+              <p style="font-size:12px;color:rgba(255,255,255,0.58);margin-bottom:3px;">Статистика лидов</p>
+              <p style="font-size:18px;font-weight:800;">За последние 30 дней</p>
+            </div>
+            <button class="demo-btn demo-btn-blue">Экспорт CSV</button>
+          </div>
+
+          <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;">
+            <span class="demo-chip">Статус: GOOD</span>
+            <span class="demo-chip">Оценка: 9-10</span>
+          </div>
+
+          <svg viewBox="0 0 520 160" class="demo-chart" aria-label="Линейный график статистики лидов">
+            <polyline points="0,130 58,120 116,122 174,98 232,104 290,82 348,90 406,62 464,68 520,38" fill="none" stroke="#54B8FF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></polyline>
+            <polyline points="0,145 58,138 116,136 174,124 232,130 290,112 348,116 406,98 464,102 520,82" fill="none" stroke="rgba(84,184,255,0.35)" stroke-width="2" stroke-dasharray="5 7"></polyline>
+          </svg>
+
+          <div class="demo-metrics">
+            <div class="demo-metric"><span>Total Leads</span><strong>97</strong></div>
+            <div class="demo-metric"><span>Good Leads</span><strong>12</strong></div>
+            <div class="demo-metric"><span>Average Score</span><strong>9.3</strong></div>
+            <div class="demo-metric"><span>New Today</span><strong>3</strong></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="demo-panel-1" class="demo-screen" data-demo-screen="1" role="tabpanel" aria-labelledby="demo-tab-1">
+        <div class="demo-lead-card">
+          <div style="display:flex;justify-content:space-between;gap:8px;align-items:flex-start;">
+            <div>
+              <p style="font-size:15px;font-weight:700;">Алексей Смирнов</p>
+              <span class="demo-source-badge">Telegram</span>
+            </div>
+            <span class="demo-score">9/10</span>
+          </div>
+          <p class="demo-lead-text">Ищу специалиста по внедрению AI-агентов в CRM.</p>
+          <p class="demo-phone">+7 (916) 555-12-10</p>
+          <div style="display:flex;gap:8px;">
+            <button class="demo-btn demo-btn-blue">Open Chat</button>
+            <button class="demo-btn demo-btn-green">good</button>
+          </div>
+        </div>
+
+        <div class="demo-lead-card">
+          <div style="display:flex;justify-content:space-between;gap:8px;align-items:flex-start;">
+            <div>
+              <p style="font-size:15px;font-weight:700;">Марина Горшкова</p>
+              <span class="demo-source-badge">Habr Career</span>
+            </div>
+            <span class="demo-score">9/10</span>
+          </div>
+          <p class="demo-lead-text">Есть интеграторы Битрикс24? Нужен подрядчик под проект на 2 месяца.</p>
+          <p class="demo-phone">+7 (903) 778-43-21</p>
+          <div style="display:flex;gap:8px;">
+            <button class="demo-btn demo-btn-blue">Open Chat</button>
+            <button class="demo-btn demo-btn-green">good</button>
+          </div>
+        </div>
+      </div>
+
+      <div id="demo-panel-2" class="demo-screen" data-demo-screen="2" role="tabpanel" aria-labelledby="demo-tab-2">
+        <div class="demo-chat-card">
+          <div style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
+            <div>
+              <p style="font-size:15px;font-weight:800;">Алексей Смирнов · Telegram</p>
+              <p style="font-size:12px;color:rgba(255,255,255,0.6);">Скоринг <span style="color:#22c55e;font-weight:700;">9/10</span></p>
+            </div>
+            <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="demo-link">Open in Telegram</a>
+          </div>
+
+          <div class="demo-bubble">
+            Добрый день! Нужен исполнитель, который внедрит AI-агентов в CRM и настроит сценарии квалификации лидов.
+          </div>
+
+          <button class="demo-btn demo-btn-blue" style="margin:14px 0 12px;">AI Suggest Response</button>
+
+          <div class="demo-input">
+            Здравствуйте! Можем показать внедрение на похожем кейсе и запустить пилот за 7 дней...
+          </div>
+        </div>
+      </div>
+
+      <div class="demo-dots" aria-label="Индикаторы экранов">
+        <button type="button" class="demo-dot is-active" data-demo-dot="0" aria-label="Показать экран Дашборд"></button>
+        <button type="button" class="demo-dot" data-demo-dot="1" aria-label="Показать экран Список лидов"></button>
+        <button type="button" class="demo-dot" data-demo-dot="2" aria-label="Показать экран Чат с лидом"></button>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 4 — ПРЕИМУЩЕСТВА
+════════════════════════════════════════ -->
+<section id="benefits" style="background:#F7F7FA;padding:0 20px 88px;">
+  <div style="max-width:1100px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:34px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Почему это работает лучше, чем вы привыкли
+      </h2>
+    </div>
+
+    <div class="benefits-grid">
+      <article class="benefit-card">
+        <div class="benefit-icon">
+          <i data-lucide="brain-circuit" style="width:18px;height:18px;color:#FF6B35;"></i>
+        </div>
+        <h3 class="benefit-title">AI вместо ключевых слов</h3>
+        <p class="benefit-text">
+          5-ступенчатая AI-воронка по 16+ площадкам понимает контекст запроса и отсеивает шум.
+        </p>
+        <p class="benefit-highlight"><span>76%</span> меньше мусора</p>
+      </article>
+
+      <article class="benefit-card">
+        <div class="benefit-icon">
+          <i data-lucide="timer-reset" style="width:18px;height:18px;color:#FF6B35;"></i>
+        </div>
+        <h3 class="benefit-title">4 минуты до первых лидов</h3>
+        <p class="benefit-text">
+          Вы описываете бизнес и задачу — система сама формирует запросы и запускает сбор.
+        </p>
+      </article>
+
+      <article class="benefit-card">
+        <div class="benefit-icon">
+          <i data-lucide="network" style="width:18px;height:18px;color:#FF6B35;"></i>
+        </div>
+        <h3 class="benefit-title">16+ площадок одновременно</h3>
+        <p class="benefit-text">
+          Telegram, HH.ru, LinkedIn, Reddit, фриланс-биржи и другие источники в одном окне.
+        </p>
+      </article>
+
+      <article class="benefit-card">
+        <div class="benefit-icon">
+          <i data-lucide="workflow" style="width:18px;height:18px;color:#FF6B35;"></i>
+        </div>
+        <h3 class="benefit-title">Интеграции с CRM</h3>
+        <p class="benefit-text">
+          AmoCRM, Bitrix24, HubSpot — лиды автоматически попадают в воронку продаж.
+        </p>
+      </article>
+
+      <article class="benefit-card">
+        <div class="benefit-icon">
+          <i data-lucide="line-chart" style="width:18px;height:18px;color:#FF6B35;"></i>
+        </div>
+        <h3 class="benefit-title">Прогноз ROI до оплаты</h3>
+        <p class="benefit-text">
+          До старта видите ориентир по объёму лидов и примерную стоимость лида в вашей нише.
+        </p>
+      </article>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 5 — КЕЙСЫ С ЦИФРАМИ
+════════════════════════════════════════ -->
+<section id="cases" style="background:#F7F7FA;padding:0 20px 88px;">
+  <div style="max-width:1100px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:34px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Работает в вашей нише. Вот доказательства.
+      </h2>
+    </div>
+
+    <div class="cases-grid">
+      <article class="case-card">
+        <p class="case-niche">Авитологи</p>
+        <p class="case-big">8 продаж/мес</p>
+        <p class="case-text">Средний чек <strong>200К</strong> · CPL <strong>240₽</strong></p>
+      </article>
+
+      <article class="case-card">
+        <p class="case-niche">Интеграторы CRM</p>
+        <p class="case-big">99%</p>
+        <p class="case-text">целевых запросов · CPL <strong>&lt; 300₽</strong></p>
+      </article>
+
+      <article class="case-card">
+        <p class="case-niche">Маркетинговые агентства</p>
+        <p class="case-big">Доп. канал лидов</p>
+        <p class="case-text">Стабильный поток для клиентов · от <strong>200₽</strong></p>
+      </article>
+
+      <article class="case-card">
+        <p class="case-niche">B2B-сервисы</p>
+        <p class="case-big">Замена ручного мониторинга</p>
+        <p class="case-text">Экономия времени команды · от <strong>150₽</strong></p>
+      </article>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 6 — КАЛЬКУЛЯТОР ROI
+════════════════════════════════════════ -->
+<section id="roi" style="background:#F7F7FA;padding:0 20px 88px;">
+  <div style="max-width:1100px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:34px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Посчитайте, сколько клиентов вы теряете каждый день
+      </h2>
+    </div>
+
+    <div class="roi-shell">
+      <div class="roi-form">
+        <label class="roi-label" for="roi-niche">Ниша</label>
+        <select id="roi-niche" class="roi-input">
+          <option value="repair">Ремонт</option>
+          <option value="law">Юристы</option>
+          <option value="marketing">Маркетинг</option>
+          <option value="it">IT</option>
+          <option value="hr">HR</option>
+          <option value="consulting">Консалтинг</option>
+          <option value="other">Другое</option>
+        </select>
+
+        <label class="roi-label" for="roi-check">Средний чек (₽)</label>
+        <input id="roi-check" class="roi-input" type="number" min="1000" step="1000" value="120000" />
+
+        <label class="roi-label" for="roi-conversion">
+          Конверсия (%)
+          <span class="roi-hint">обычно 5-15%</span>
+        </label>
+        <input id="roi-conversion" class="roi-input" type="number" min="1" max="100" step="1" value="10" />
+      </div>
+
+      <div class="roi-result-card">
+        <div class="roi-row">
+          <span class="roi-key">Лидов в месяц</span>
+          <strong id="roi-leads">30-80</strong>
+        </div>
+        <div class="roi-row">
+          <span class="roi-key">Продаж</span>
+          <strong id="roi-sales">5</strong>
+        </div>
+        <div class="roi-revenue-wrap">
+          <p class="roi-key">Дополнительная выручка</p>
+          <p class="roi-revenue" id="roi-revenue">600 000 ₽</p>
+        </div>
+        <div class="roi-row">
+          <span class="roi-key">ROI</span>
+          <strong id="roi-value">35.3x</strong>
+        </div>
+
+        <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="glow-btn" style="margin-top:16px;width:100%;">
+          Начать получать этих клиентов
+          <i data-lucide="arrow-right" style="width:17px;height:17px;flex-shrink:0;"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 7 — ТАРИФЫ
+════════════════════════════════════════ -->
+<section id="pricing" style="background:#F7F7FA;padding:0 20px 92px;">
+  <div style="max-width:1100px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:34px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Выберите тариф под ваши задачи
+      </h2>
+      <p style="margin-top:12px;color:#6b7280;font-size:16px;">Все тарифы — 4 месяца по цене 3</p>
+    </div>
+
+    <div class="pricing-grid">
+      <article class="price-card">
+        <p class="price-plan">База</p>
+        <p class="price-value">8 000 ₽/мес</p>
+        <p class="price-for">Для первых продаж</p>
+        <ul class="price-features">
+          <li>✔ До 150 чатов/источников</li>
+          <li>✔ Уведомления в группу Telegram</li>
+          <li>✔ Тех. поддержка: ответ за 4 часа</li>
+        </ul>
+        <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="price-cta">Начать</a>
+      </article>
+
+      <article class="price-card price-card-popular">
+        <span class="price-badge">Популярный</span>
+        <p class="price-plan">Стартап</p>
+        <p class="price-value">17 000 ₽/мес</p>
+        <p class="price-for">Для тех, кто начал расти</p>
+        <ul class="price-features">
+          <li>✔ До 300 чатов/источников</li>
+          <li>✔ Подключение CRM</li>
+          <li>✔ Можно добавлять свои чаты</li>
+          <li>✔ Тех. поддержка: ответ за 1 час</li>
+          <li>✔ Заморозка поиска до 7 дней</li>
+          <li>✔ 1 ретро-поиск</li>
+        </ul>
+        <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="price-cta">Начать</a>
+      </article>
+
+      <article class="price-card">
+        <p class="price-plan">Бизнес</p>
+        <p class="price-value">25 000 ₽/мес</p>
+        <p class="price-for">Для масштабирования</p>
+        <ul class="price-features">
+          <li>✔ До 500 чатов/источников</li>
+          <li>✔ Webhook-интеграции</li>
+          <li>✔ Свои чаты + CRM</li>
+          <li>✔ Личный менеджер</li>
+          <li>✔ Заморозка до 14 дней</li>
+          <li>✔ 2 ретро-поиска</li>
+        </ul>
+        <a href="https://platform.leadl.ai/register?ref=B6Z0UQNL" class="price-cta">Начать</a>
+      </article>
+    </div>
+
+    <div class="pricing-offer">
+      <i data-lucide="gift" style="width:16px;height:16px;flex-shrink:0;"></i>
+      4 месяца по цене 3
+    </div>
+
+    <p class="pricing-note">Не уверены? Первые лиды бесплатно при регистрации.</p>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 8 — СРАВНЕНИЕ С АЛЬТЕРНАТИВАМИ
+════════════════════════════════════════ -->
+<section id="compare" style="background:#F7F7FA;padding:0 20px 92px;">
+  <div style="max-width:1100px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:34px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Чем AI-лидген отличается от того, что вы пробовали
+      </h2>
+      <p style="margin-top:12px;color:#6b7280;font-size:16px;">Сравните три подхода к поиску клиентов</p>
+    </div>
+
+    <div class="compare-table-wrap">
+      <table class="compare-table">
+        <thead>
+          <tr>
+            <th>Параметр</th>
+            <th>Ручной мониторинг</th>
+            <th>Парсинг по ключевикам<br>(Shikari и аналоги)</th>
+            <th class="compare-ours-head">Наш сервис <span class="compare-badge">Рекомендуем</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Настройка</td>
+            <td>⚪ Не нужна</td>
+            <td>⚪ 30-60 минут</td>
+            <td class="compare-ours">✅ <strong>4 минуты</strong></td>
+          </tr>
+          <tr>
+            <td>Фильтрация мусора</td>
+            <td>❌ Вручную, глазами</td>
+            <td>⚪ Минус-слова</td>
+            <td class="compare-ours">✅ AI, 5 ступеней фильтрации</td>
+          </tr>
+          <tr>
+            <td>Мусор на выходе</td>
+            <td>❌ 50-70%</td>
+            <td>❌ 80-99%</td>
+            <td class="compare-ours">✅ Менее <strong>25%</strong></td>
+          </tr>
+          <tr>
+            <td>Время в день</td>
+            <td>❌ 2-4 часа</td>
+            <td>⚪ 30-60 минут на разбор</td>
+            <td class="compare-ours">✅ <strong>0 минут</strong> — всё автоматически</td>
+          </tr>
+          <tr>
+            <td>Интеграция с CRM</td>
+            <td>❌ Нет</td>
+            <td>⚪ Редко</td>
+            <td class="compare-ours">✅ AmoCRM, Bitrix24, HubSpot</td>
+          </tr>
+          <tr>
+            <td>Количество площадок</td>
+            <td>❌ 1-2 чата</td>
+            <td>⚪ 1-3 площадки</td>
+            <td class="compare-ours">✅ <strong>16+</strong> площадок одновременно</td>
+          </tr>
+          <tr>
+            <td>Стоимость лида</td>
+            <td>⚪ Бесплатно, но ваше время = деньги</td>
+            <td>❌ Дёшево, но 80% мусора</td>
+            <td class="compare-ours">✅ от 150-240₽ за целевой лид</td>
+          </tr>
+          <tr>
+            <td>Масштабируемость</td>
+            <td>❌ Нет — упираетесь в своё время</td>
+            <td>⚪ Ограничена</td>
+            <td class="compare-ours">✅ Неограничена</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="compare-cards">
+      <article class="compare-approach-card compare-approach-ours">
+        <h3>Наш сервис <span class="compare-badge">Рекомендуем</span></h3>
+        <ul>
+          <li><strong>Настройка:</strong> 4 минуты</li>
+          <li><strong>Фильтрация мусора:</strong> AI, 5 ступеней фильтрации</li>
+          <li><strong>Мусор на выходе:</strong> менее 25%</li>
+          <li><strong>Время в день:</strong> 0 минут — всё автоматически</li>
+          <li><strong>Интеграция с CRM:</strong> AmoCRM, Bitrix24, HubSpot</li>
+          <li><strong>Количество площадок:</strong> 16+ площадок одновременно</li>
+          <li><strong>Стоимость лида:</strong> от 150-240₽ за целевой лид</li>
+          <li><strong>Масштабируемость:</strong> Неограничена</li>
+        </ul>
+      </article>
+
+      <article class="compare-approach-card">
+        <h3>Ручной мониторинг</h3>
+        <ul>
+          <li><strong>Настройка:</strong> Не нужна</li>
+          <li><strong>Фильтрация мусора:</strong> Вручную, глазами</li>
+          <li><strong>Мусор на выходе:</strong> 50-70%</li>
+          <li><strong>Время в день:</strong> 2-4 часа</li>
+          <li><strong>Интеграция с CRM:</strong> Нет</li>
+          <li><strong>Количество площадок:</strong> 1-2 чата</li>
+          <li><strong>Стоимость лида:</strong> Бесплатно, но ваше время = деньги</li>
+          <li><strong>Масштабируемость:</strong> Нет — упираетесь в своё время</li>
+        </ul>
+      </article>
+
+      <article class="compare-approach-card">
+        <h3>Парсинг по ключевикам</h3>
+        <ul>
+          <li><strong>Настройка:</strong> 30-60 минут</li>
+          <li><strong>Фильтрация мусора:</strong> Минус-слова</li>
+          <li><strong>Мусор на выходе:</strong> 80-99%</li>
+          <li><strong>Время в день:</strong> 30-60 минут на разбор</li>
+          <li><strong>Интеграция с CRM:</strong> Редко</li>
+          <li><strong>Количество площадок:</strong> 1-3 площадки</li>
+          <li><strong>Стоимость лида:</strong> Дёшево, но 80% мусора</li>
+          <li><strong>Масштабируемость:</strong> Ограничена</li>
+        </ul>
+      </article>
+    </div>
+
+    <p class="compare-footnote">Данные основаны на анализе 4 млрд сообщений и сравнении с Shikari, Golubin и ручным мониторингом</p>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 9 — FAQ
+════════════════════════════════════════ -->
+<section id="faq" style="background:#F7F7FA;padding:0 20px 92px;">
+  <div style="max-width:800px;margin:0 auto;">
+    <div style="text-align:center;margin-bottom:24px;">
+      <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.4px;color:#0A0A0F;">
+        Частые вопросы
+      </h2>
+      <p style="margin-top:10px;color:#6b7280;font-size:16px;">Отвечаем на то, что спрашивают чаще всего</p>
+    </div>
+
+    <div class="faq-wrap">
+      <article class="faq-item is-open">
+        <button class="faq-question" type="button">
+          <span>Это подойдёт для моей ниши?</span>
+          <span class="faq-icon" aria-hidden="true">−</span>
+        </button>
+        <div class="faq-answer" style="max-height: 1000px;">
+          <p>Сервис работает для любого B2B-бизнеса. Мы мониторим 16+ площадок: Telegram-чаты, HH.ru, SuperJob, Habr Career, FL.ru, Kwork, LinkedIn, Reddit, Hacker News, Remote OK и другие. Ремонт, юристы, маркетинг, IT, HR, консалтинг, стоматологии — десятки ниш уже подключены. При регистрации AI сам подберёт площадки и запросы под ваш бизнес.</p>
+        </div>
+      </article>
+
+      <article class="faq-item">
+        <button class="faq-question" type="button">
+          <span>Сколько стоит?</span>
+          <span class="faq-icon" aria-hidden="true">+</span>
+        </button>
+        <div class="faq-answer">
+          <p>Три тарифа: База — 8 000 ₽/мес (до 150 источников, для первых продаж), Стартап — 17 000 ₽/мес (до 300 источников, CRM, ретро-поиск), Бизнес — 25 000 ₽/мес (до 500 источников, личный менеджер, webhook-интеграции). Сейчас действует акция: 4 месяца по цене 3. Первые лиды — бесплатно при регистрации через ретро-поиск.</p>
+        </div>
+      </article>
+
+      <article class="faq-item">
+        <button class="faq-question" type="button">
+          <span>А если одну из площадок заблокируют?</span>
+          <span class="faq-icon" aria-hidden="true">+</span>
+        </button>
+        <div class="faq-answer">
+          <p>Инфраструктура сервиса находится за пределами РФ. Плюс мы работаем с 16+ площадками одновременно — если одна станет недоступна, остальные продолжат приносить лидов. Это и есть диверсификация: вы не зависите от одного источника.</p>
+        </div>
+      </article>
+
+      <article class="faq-item">
+        <button class="faq-question" type="button">
+          <span>Это не будет спамом?</span>
+          <span class="faq-icon" aria-hidden="true">+</span>
+        </button>
+        <div class="faq-answer">
+          <p>Нет. Мы не пишем людям от вашего имени и не рассылаем сообщения. Мы находим людей, которые сами написали что ищут вашу услугу, и передаём вам их контакт. Вы сами решаете, как и когда обратиться.</p>
+        </div>
+      </article>
+
+      <article class="faq-item">
+        <button class="faq-question" type="button">
+          <span>Нужны ли технические навыки?</span>
+          <span class="faq-icon" aria-hidden="true">+</span>
+        </button>
+        <div class="faq-answer">
+          <p>Нет. AI-агент сам настраивает всё за вас: подбирает площадки, формирует поисковые запросы, настраивает фильтры. Вы только описываете свой бизнес в свободной форме — система делает остальное. Весь процесс занимает 4 минуты.</p>
+        </div>
+      </article>
+
+      <article class="faq-item">
+        <button class="faq-question" type="button">
+          <span>Чем отличаетесь от Shikari и других парсеров?</span>
+          <span class="faq-icon" aria-hidden="true">+</span>
+        </button>
+        <div class="faq-answer">
+          <p>Три ключевых отличия. Первое — AI-фильтрация вместо ключевых слов: 5-ступенчатая воронка, которая понимает контекст сообщения, а не просто ищет совпадения. Результат — на 76% меньше мусора. Второе — 16+ площадок одновременно, а не только Telegram. Третье — онбординг за 4 минуты, а не за час. Плюс Shikari периодически бывает недоступен.</p>
+        </div>
+      </article>
+
+      <article class="faq-item">
+        <button class="faq-question" type="button">
+          <span>Можно попробовать бесплатно?</span>
+          <span class="faq-icon" aria-hidden="true">+</span>
+        </button>
+        <div class="faq-answer">
+          <p>Да. При регистрации вы получаете первых лидов бесплатно через ретро-поиск — система находит запросы из вашей ниши за последние дни и сразу показывает результат. Это реальные лиды, не демо-данные. Вы увидите, что ищут и кто ищет, ещё до оплаты.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     ФИНАЛЬНЫЙ CTA-БЛОК
+════════════════════════════════════════ -->
+<section id="final-cta" style="background:#0A0A0F;padding:110px 20px;position:relative;overflow:hidden;">
+  <div aria-hidden="true" style="position:absolute;inset:0;pointer-events:none;">
+    <div style="position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:740px;height:420px;border-radius:50%;
+                background:radial-gradient(circle,rgba(255,107,53,0.14) 0%,rgba(255,107,53,0.05) 30%,transparent 70%);"></div>
+  </div>
+
+  <div style="position:relative;z-index:1;max-width:700px;margin:0 auto;text-align:center;">
+    <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.15;letter-spacing:-0.4px;color:#fff;margin-bottom:14px;">
+      Пока вы читали эту страницу, десятки людей написали на <span style="color:#FF6B35;">16+ площадках</span> что ищут ваши услуги
+    </h2>
+    <p style="font-size:clamp(18px,2.4vw,20px);line-height:1.6;color:#A0A0A0;margin-bottom:22px;">
+      Зарегистрируйтесь и получите первых лидов за 4 минуты. Бесплатно.
+    </p>
+
+    <a href="#register" class="final-cta-btn">
+      Начать бесплатно
+      <i data-lucide="arrow-right" style="width:18px;height:18px;flex-shrink:0;"></i>
+    </a>
+
+    <p style="font-size:14px;color:#7f7f8d;margin-top:14px;">Без карты. Без обязательств. Первые лиды — бесплатно.</p>
+
+    <div class="final-trust-grid">
+      <span class="final-trust-item"><i data-lucide="users" style="width:14px;height:14px;"></i> 160+ компаний</span>
+      <span class="final-trust-item"><i data-lucide="globe" style="width:14px;height:14px;"></i> 16+ площадок</span>
+      <span class="final-trust-item"><i data-lucide="clock" style="width:14px;height:14px;"></i> 4 мин настройка</span>
+      <span class="final-trust-item"><i data-lucide="shield-check" style="width:14px;height:14px;"></i> AI-фильтрация</span>
+    </div>
+  </div>
+</section>
+
+<!-- ═══════════════════════════════════════
+     БЛОК 11 — ФУТЕР
+════════════════════════════════════════ -->
+<footer style="background:#0A0A0F;border-top:1px solid rgba(255,255,255,0.08);padding:30px 20px 34px;">
+  <div class="footer-wrap">
+    <div class="footer-brand">LeadL</div>
+
+    <nav class="footer-links" aria-label="Юридическая навигация">
+      <a href="https://leadl.ai/confidential_policy" class="footer-link" target="_blank" rel="noopener noreferrer">Политика конфиденциальности</a>
+      <a href="https://leadl.ai/oferta" class="footer-link" target="_blank" rel="noopener noreferrer">Оферта</a>
+      <a href="https://leadl.ai/users" class="footer-link" target="_blank" rel="noopener noreferrer">Пользовательское соглашение</a>
+    </nav>
+
+    <div class="footer-contacts">
+      <a class="footer-link" href="https://t.me/leadlnews" target="_blank" rel="noopener noreferrer">Telegram-канал</a>
+      <a class="footer-link" href="mailto:Hello@leadl.ai">Hello@leadl.ai</a>
+    </div>
+
+    <p class="footer-copy">© 2026 LeadL. Все права защищены.</p>
+  </div>
+</footer>
+
 <!-- Адаптивные стили -->
 <style>
   @media (min-width: 768px) {
@@ -679,6 +1319,697 @@ <h3 class="step-title">Получайте контакты</h3>
     font-weight: 600;
   }
 
+  /* ── Блок "Демо интерфейса" ── */
+  .platform-strip {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    padding: 0 0 10px;
+    margin-bottom: 16px;
+    scrollbar-width: thin;
+  }
+  .demo-platform-badge {
+    flex: 0 0 auto;
+    padding: 7px 12px;
+    border-radius: 999px;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    color: #4b5563;
+    font-size: 12px;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  .demo-shell {
+    background: #0F0F1A;
+    border-radius: 22px;
+    padding: 16px;
+    box-shadow: 0 20px 45px rgba(10,10,16,0.25);
+  }
+  .demo-tabs {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 14px;
+    flex-wrap: wrap;
+  }
+  .demo-tab {
+    border: 1px solid rgba(255,255,255,0.12);
+    background: rgba(255,255,255,0.03);
+    color: rgba(255,255,255,0.58);
+    border-radius: 10px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .demo-tab.is-active {
+    color: #fff;
+    border-color: rgba(84,184,255,0.45);
+    background: rgba(84,184,255,0.12);
+  }
+  .demo-screen { opacity: 1; transform: none; margin-bottom: 10px; }
+  .js-demo .demo-screen { display: none; opacity: 0; transform: translateY(8px); margin-bottom: 0; }
+  .js-demo .demo-screen.is-active { display: block; opacity: 1; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease; }
+
+  .demo-card,
+  .demo-lead-card,
+  .demo-chat-card {
+    border-radius: 16px;
+    background: #131324;
+    border: 1px solid rgba(255,255,255,0.09);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.33);
+    padding: 14px;
+    color: #fff;
+  }
+  .demo-chart {
+    width: 100%;
+    height: 160px;
+    background: linear-gradient(180deg,rgba(84,184,255,0.06),transparent);
+    border: 1px solid rgba(84,184,255,0.2);
+    border-radius: 12px;
+    margin-bottom: 14px;
+  }
+  .demo-chip {
+    background: rgba(255,255,255,0.06);
+    color: rgba(255,255,255,0.72);
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 4px 10px;
+  }
+  .demo-metrics {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0,1fr));
+    gap: 8px;
+  }
+  .demo-metric {
+    border-radius: 12px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    padding: 10px;
+  }
+  .demo-metric span {
+    display: block;
+    font-size: 11px;
+    color: rgba(255,255,255,0.56);
+    margin-bottom: 5px;
+  }
+  .demo-metric strong { font-size: 18px; }
+
+  .demo-lead-card { margin-bottom: 10px; }
+  .demo-source-badge {
+    display: inline-flex;
+    margin-top: 6px;
+    background: rgba(34,197,94,0.14);
+    color: #22c55e;
+    border: 1px solid rgba(34,197,94,0.32);
+    border-radius: 999px;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 700;
+  }
+  .demo-score {
+    color: #22c55e;
+    font-size: 12px;
+    font-weight: 800;
+    border-radius: 999px;
+    border: 1px solid rgba(34,197,94,0.35);
+    padding: 5px 9px;
+  }
+  .demo-lead-text {
+    margin: 10px 0 8px;
+    font-size: 13px;
+    line-height: 1.55;
+    color: rgba(255,255,255,0.76);
+  }
+  .demo-phone {
+    font-size: 12px;
+    color: rgba(255,255,255,0.56);
+    margin-bottom: 10px;
+  }
+
+  .demo-btn {
+    border: none;
+    border-radius: 10px;
+    padding: 8px 12px;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    color: #fff;
+  }
+  .demo-btn-blue { background: #38bdf8; }
+  .demo-btn-green { background: #22c55e; }
+
+  .demo-link {
+    color: #54B8FF;
+    font-size: 12px;
+    font-weight: 700;
+    text-decoration: none;
+  }
+  .demo-bubble {
+    border-radius: 12px 12px 12px 4px;
+    border: 1px solid rgba(255,255,255,0.1);
+    background: rgba(255,255,255,0.05);
+    padding: 11px;
+    font-size: 13px;
+    line-height: 1.6;
+    color: rgba(255,255,255,0.86);
+  }
+  .demo-input {
+    border-radius: 10px;
+    border: 1px solid rgba(255,255,255,0.12);
+    background: rgba(15,15,26,0.95);
+    color: rgba(255,255,255,0.58);
+    font-size: 12px;
+    padding: 10px;
+  }
+  .demo-dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 14px;
+  }
+  .demo-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    background: rgba(255,255,255,0.25);
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .demo-dot.is-active { background: #54B8FF; }
+
+  /* ── Блок "Преимущества" ── */
+  .benefits-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .benefit-card {
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 18px;
+    padding: 18px;
+    box-shadow: 0 10px 26px rgba(15,23,42,0.06);
+  }
+  .benefit-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255,107,53,0.2);
+    background: rgba(255,107,53,0.08);
+    margin-bottom: 12px;
+  }
+  .benefit-title {
+    color: #111827;
+    font-size: 20px;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 8px;
+  }
+  .benefit-text {
+    color: #6b7280;
+    font-size: 15px;
+    line-height: 1.6;
+  }
+  .benefit-highlight {
+    margin-top: 12px;
+    color: #fb923c;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  .benefit-highlight span {
+    color: #FF6B35;
+    font-size: 34px;
+    font-weight: 800;
+    line-height: 1;
+    margin-right: 6px;
+  }
+
+  /* ── Блок "Кейсы с цифрами" ── */
+  .cases-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .case-card {
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 18px;
+    padding: 20px;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
+  }
+  .case-niche {
+    color: #6b7280;
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .case-big {
+    color: #111827;
+    font-size: clamp(26px,4vw,34px);
+    line-height: 1.1;
+    font-weight: 800;
+    margin-bottom: 8px;
+    letter-spacing: -0.02em;
+  }
+  .case-text {
+    color: #6b7280;
+    font-size: 15px;
+    line-height: 1.6;
+  }
+  .case-text strong {
+    color: #FF6B35;
+    font-weight: 800;
+  }
+
+  /* ── Блок "Калькулятор ROI" ── */
+  .roi-shell {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  .roi-form,
+  .roi-result-card {
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 18px;
+    padding: 18px;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
+  }
+  .roi-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    color: #374151;
+    font-size: 13px;
+    font-weight: 700;
+    margin-bottom: 6px;
+  }
+  .roi-hint {
+    color: #9ca3af;
+    font-size: 11px;
+    font-weight: 600;
+  }
+  .roi-input {
+    width: 100%;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    padding: 11px 12px;
+    font-size: 15px;
+    margin-bottom: 12px;
+    font-family: 'Manrope', sans-serif;
+    color: #111827;
+    background: #fff;
+  }
+  .roi-input:focus {
+    outline: none;
+    border-color: rgba(255,107,53,0.6);
+    box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
+  }
+  .roi-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+  .roi-key {
+    color: #6b7280;
+    font-size: 14px;
+  }
+  .roi-row strong {
+    color: #111827;
+    font-size: 22px;
+    font-weight: 800;
+  }
+  .roi-revenue-wrap {
+    border: 1px solid rgba(255,107,53,0.2);
+    border-radius: 14px;
+    background: rgba(255,107,53,0.07);
+    padding: 12px;
+    margin: 12px 0;
+  }
+  .roi-revenue {
+    color: #FF6B35;
+    font-size: clamp(30px,6vw,42px);
+    line-height: 1;
+    font-weight: 800;
+    margin-top: 4px;
+    letter-spacing: -0.03em;
+  }
+
+  /* ── Блок "Тарифы" ── */
+  .pricing-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .price-card {
+    position: relative;
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 18px;
+    padding: 20px;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
+  }
+  .price-card-popular {
+    border-color: rgba(79,70,229,0.35);
+    box-shadow: 0 14px 32px rgba(79,70,229,0.12);
+  }
+  .price-badge {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    padding: 5px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 800;
+    color: #fff;
+    background: linear-gradient(135deg,#4f46e5,#7c3aed);
+  }
+  .price-plan {
+    color: #111827;
+    font-size: 22px;
+    font-weight: 800;
+    margin-bottom: 8px;
+  }
+  .price-value {
+    display: inline-block;
+    color: #fff;
+    font-size: 30px;
+    font-weight: 800;
+    line-height: 1;
+    padding: 10px 12px;
+    border-radius: 12px;
+    background: linear-gradient(135deg,#2563eb,#7c3aed);
+    letter-spacing: -0.03em;
+    margin-bottom: 10px;
+  }
+  .price-for {
+    color: #6b7280;
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+  .price-features {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    color: #374151;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 14px;
+  }
+  .price-cta {
+    display: inline-flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 11px 14px;
+    border-radius: 10px;
+    text-decoration: none;
+    color: #fff;
+    font-weight: 800;
+    background: linear-gradient(135deg,#FF6B35,#e04d15);
+    box-shadow: 0 0 18px rgba(255,107,53,0.3);
+  }
+  .pricing-offer {
+    margin-top: 16px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 14px;
+    border-radius: 999px;
+    background: rgba(37,99,235,0.08);
+    border: 1px solid rgba(37,99,235,0.2);
+    color: #1d4ed8;
+    font-size: 13px;
+    font-weight: 800;
+  }
+  .pricing-note {
+    margin-top: 12px;
+    color: #6b7280;
+    font-size: 14px;
+  }
+
+  /* ── Блок "Сравнение" ── */
+  .compare-table-wrap {
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 18px;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
+    overflow: hidden;
+    display: none;
+  }
+  .compare-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  .compare-table th,
+  .compare-table td {
+    text-align: left;
+    padding: 12px 14px;
+    border-bottom: 1px solid #f1f5f9;
+    font-size: 14px;
+    color: #374151;
+    vertical-align: top;
+  }
+  .compare-table th {
+    font-size: 13px;
+    color: #6b7280;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: #f9fafb;
+  }
+  .compare-table tbody tr:last-child td {
+    border-bottom: none;
+  }
+  .compare-ours-head {
+    position: relative;
+    background: #1f2937 !important;
+    color: #fff !important;
+    border-top: 3px solid #FF6B35;
+  }
+  .compare-badge {
+    display: inline-flex;
+    margin-left: 6px;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 800;
+    background: rgba(255,107,53,0.2);
+    color: #FF6B35;
+    border: 1px solid rgba(255,107,53,0.45);
+  }
+  .compare-ours {
+    background: rgba(255,107,53,0.12);
+    color: #9a3412 !important;
+    font-weight: 700;
+    font-size: 15px !important;
+  }
+  .compare-ours strong {
+    color: #FF6B35;
+    font-weight: 800;
+  }
+  .compare-cards {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .compare-approach-card {
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
+    padding: 16px;
+  }
+  .compare-approach-ours {
+    border-color: rgba(255,107,53,0.35);
+    background: linear-gradient(165deg, #fff9f6 0%, #fff 100%);
+  }
+  .compare-approach-card h3 {
+    font-size: 20px;
+    color: #111827;
+    font-weight: 800;
+    margin-bottom: 8px;
+  }
+  .compare-approach-card ul {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    margin: 0;
+    padding: 0;
+  }
+  .compare-approach-card li {
+    color: #6b7280;
+    font-size: 14px;
+    line-height: 1.55;
+  }
+  .compare-approach-card li strong {
+    color: #111827;
+    font-weight: 700;
+  }
+  .compare-approach-ours li strong {
+    color: #9a3412;
+    font-weight: 800;
+  }
+  .compare-footnote {
+    margin-top: 12px;
+    color: #9ca3af;
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  /* ── Блок "FAQ" ── */
+  .faq-wrap {
+    background: #fff;
+    border: 1px solid #ececf2;
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.05);
+    overflow: hidden;
+  }
+  .faq-item {
+    border-bottom: 1px solid #eceff3;
+  }
+  .faq-item:last-child {
+    border-bottom: none;
+  }
+  .faq-question {
+    width: 100%;
+    border: none;
+    background: #fff;
+    cursor: pointer;
+    text-align: left;
+    padding: 18px 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 18px;
+    font-weight: 800;
+    color: #111827;
+    font-family: 'Manrope', sans-serif;
+    transition: background 0.2s ease;
+  }
+  .faq-question:hover {
+    background: #fafafa;
+  }
+  .faq-icon {
+    color: #6b7280;
+    font-size: 24px;
+    line-height: 1;
+    min-width: 16px;
+    text-align: center;
+  }
+  .faq-answer {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 300ms ease;
+  }
+  .faq-answer p {
+    margin: 0;
+    padding: 0 18px 18px;
+    font-size: 16px;
+    line-height: 1.7;
+    color: #6b7280;
+  }
+
+  /* ── Финальный CTA ── */
+  .final-cta-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    max-width: 460px;
+    padding: 18px 26px;
+    border-radius: 12px;
+    text-decoration: none;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 800;
+    background: #FF6B35;
+    box-shadow: 0 0 20px rgba(255,107,53,0.35);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  .final-cta-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 34px rgba(255,107,53,0.55);
+  }
+  .final-trust-grid {
+    margin-top: 18px;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0,1fr));
+    gap: 9px 14px;
+  }
+  .final-trust-item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    color: #9a9aaa;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  /* ── Футер ── */
+  .footer-wrap {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 12px;
+  }
+  .footer-brand {
+    color: #fff;
+    font-size: 22px;
+    font-weight: 800;
+    letter-spacing: -0.02em;
+  }
+  .footer-links,
+  .footer-contacts {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 14px;
+  }
+  .footer-link {
+    color: #9ca3af;
+    text-decoration: none;
+    font-size: 14px;
+  }
+  .footer-link:hover {
+    color: #fff;
+  }
+  .footer-copy {
+    color: #6b7280;
+    font-size: 13px;
+    margin-top: 4px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .demo-screen,
+    .demo-screen.is-active {
+      transition: none;
+      transform: none;
+    }
+  }
+
   /* Стрелки */
   .step-arrow {
     display: flex;
@@ -690,6 +2021,31 @@ <h3 class="step-title">Получайте контакты</h3>
   .arrow-icon-v { display: block; }
 
   @media (min-width: 900px) {
+    .final-trust-grid {
+      grid-template-columns: repeat(4, minmax(0,1fr));
+    }
+    .compare-cards { display: none; }
+    .compare-table-wrap { display: block; }
+    .pricing-grid {
+      grid-template-columns: repeat(3, minmax(0,1fr));
+    }
+    .roi-shell {
+      grid-template-columns: 1fr 1fr;
+      align-items: start;
+    }
+    .cases-grid {
+      grid-template-columns: repeat(2, minmax(0,1fr));
+    }
+    .benefits-grid {
+      grid-template-columns: repeat(2, minmax(0,1fr));
+    }
+    .benefit-card:first-child {
+      grid-column: span 2;
+    }
+    .demo-shell { padding: 20px; }
+    .demo-metrics {
+      grid-template-columns: repeat(4, minmax(0,1fr));
+    }
     .how-steps {
       flex-direction: row;
       align-items: stretch;
@@ -715,6 +2071,168 @@ <h3 class="step-title">Получайте контакты</h3>
       if (el) el.textContent = count.toLocaleString('ru-RU');
     }
   }, 3200);
+
+  // Демо-интерфейс: автопереключение экранов каждые 5 секунд
+  document.body.classList.add('js-demo');
+  const demoTabs = Array.from(document.querySelectorAll('[data-demo-tab]'));
+  const demoScreens = Array.from(document.querySelectorAll('[data-demo-screen]'));
+  const demoDots = Array.from(document.querySelectorAll('[data-demo-dot]'));
+  let demoActiveIndex = 0;
+  let demoInterval = null;
+
+  function setDemoScreen(index) {
+    if (demoScreens.length === 0) return;
+    demoActiveIndex = ((index % demoScreens.length) + demoScreens.length) % demoScreens.length;
+
+    demoTabs.forEach((tab, i) => {
+      const active = i === demoActiveIndex;
+      tab.classList.toggle('is-active', active);
+      tab.setAttribute('aria-selected', active ? 'true' : 'false');
+    });
+
+    demoScreens.forEach((screen, i) => {
+      const active = i === demoActiveIndex;
+      screen.classList.toggle('is-active', active);
+      screen.hidden = !active;
+    });
+
+    demoDots.forEach((dot, i) => {
+      dot.classList.toggle('is-active', i === demoActiveIndex);
+    });
+  }
+
+  function startDemoRotation() {
+    if (demoScreens.length === 0) return;
+    if (demoInterval) clearInterval(demoInterval);
+    demoInterval = setInterval(() => {
+      const next = (demoActiveIndex + 1) % demoScreens.length;
+      setDemoScreen(next);
+    }, 5000);
+  }
+
+  function stopDemoRotation() {
+    if (demoInterval) {
+      clearInterval(demoInterval);
+      demoInterval = null;
+    }
+  }
+
+  function bindDemoActivator(node, index) {
+    const activate = (event) => {
+      if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
+      setDemoScreen(index);
+      startDemoRotation();
+    };
+    node.addEventListener('click', activate);
+    node.addEventListener('pointerup', activate);
+    node.addEventListener('keydown', activate);
+  }
+
+  demoTabs.forEach((tab, i) => bindDemoActivator(tab, i));
+  demoDots.forEach((dot, i) => bindDemoActivator(dot, i));
+
+  const demoShell = document.querySelector('.demo-shell');
+  if (demoShell) {
+    demoShell.addEventListener('mouseenter', stopDemoRotation);
+    demoShell.addEventListener('mouseleave', startDemoRotation);
+    demoShell.addEventListener('focusin', stopDemoRotation);
+    demoShell.addEventListener('focusout', () => {
+      if (!demoShell.contains(document.activeElement)) startDemoRotation();
+    });
+  }
+
+  if (demoScreens.length > 0) {
+    setDemoScreen(0);
+    startDemoRotation();
+  }
+
+  // Калькулятор ROI: пересчёт в реальном времени + плавная анимация цифр
+  const roiNiche = document.getElementById('roi-niche');
+  const roiCheck = document.getElementById('roi-check');
+  const roiConversion = document.getElementById('roi-conversion');
+  const roiLeads = document.getElementById('roi-leads');
+  const roiSales = document.getElementById('roi-sales');
+  const roiRevenue = document.getElementById('roi-revenue');
+  const roiValue = document.getElementById('roi-value');
+
+  const roiLeadsByNiche = {
+    repair: [42, 80],
+    law: [34, 62],
+    marketing: [45, 78],
+    it: [36, 68],
+    hr: [30, 55],
+    consulting: [32, 60],
+    other: [30, 80]
+  };
+  const roiSubscriptionCost = 17000;
+
+  function animateNumber(el, to, suffix = '', decimals = 0) {
+    if (!el) return;
+    const from = Number(el.dataset.current || 0);
+    const duration = 420;
+    const start = performance.now();
+
+    const tick = (now) => {
+      const progress = Math.min((now - start) / duration, 1);
+      const value = from + (to - from) * progress;
+      const formatted = decimals > 0
+        ? value.toFixed(decimals).replace('.', ',')
+        : Math.round(value).toLocaleString('ru-RU');
+      el.textContent = `${formatted}${suffix}`;
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      } else {
+        el.dataset.current = String(to);
+      }
+    };
+
+    requestAnimationFrame(tick);
+  }
+
+  function updateRoi() {
+    if (!roiNiche || !roiCheck || !roiConversion) return;
+
+    const [minLeads, maxLeads] = roiLeadsByNiche[roiNiche.value] || roiLeadsByNiche.other;
+    const avgLeads = (minLeads + maxLeads) / 2;
+    const conversion = Math.max(1, Math.min(100, Number(roiConversion.value) || 1));
+    const check = Math.max(1000, Number(roiCheck.value) || 1000);
+
+    const sales = avgLeads * (conversion / 100);
+    const revenue = sales * check;
+    const roi = revenue / roiSubscriptionCost;
+
+    if (roiLeads) roiLeads.textContent = `${minLeads}-${maxLeads}`;
+    animateNumber(roiSales, sales, '', 1);
+    animateNumber(roiRevenue, revenue, ' ₽', 0);
+    animateNumber(roiValue, roi, 'x', 1);
+  }
+
+  [roiNiche, roiCheck, roiConversion].forEach((field) => {
+    if (!field) return;
+    field.addEventListener('input', updateRoi);
+    field.addEventListener('change', updateRoi);
+  });
+  updateRoi();
+
+  // FAQ аккордеон: можно раскрывать несколько вопросов одновременно
+  const faqItems = Array.from(document.querySelectorAll('.faq-item'));
+  faqItems.forEach((item) => {
+    const trigger = item.querySelector('.faq-question');
+    const answer = item.querySelector('.faq-answer');
+    const icon = item.querySelector('.faq-icon');
+    if (!trigger || !answer || !icon) return;
+
+    if (item.classList.contains('is-open')) {
+      answer.style.maxHeight = `${answer.scrollHeight}px`;
+      icon.textContent = '−';
+    }
+
+    trigger.addEventListener('click', () => {
+      const open = item.classList.toggle('is-open');
+      answer.style.maxHeight = open ? `${answer.scrollHeight}px` : '0px';
+      icon.textContent = open ? '−' : '+';
+    });
+  });
 </script>
 
 <!-- Lucide в самом конце body — гарантирует загрузку после DOM -->