From c00c2037c977ca61c146a3a935acf38fe0730a6e Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 12:56:57 +0500
Subject: [PATCH 1/7] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D0=B4=D0=B5=D0=BC=D0=BE=20?=
 =?UTF-8?q?=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81=D0=B0=20?=
 =?UTF-8?q?=D1=81=20=D0=B0=D0=B2=D1=82=D0=BE=D0=BF=D0=B5=D1=80=D0=B5=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20=D1=8D=D0=BA?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 362 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 362 insertions(+)

diff --git a/index.html b/index.html
index 5d47716..c3ec904 100644
--- a/index.html
+++ b/index.html
@@ -604,6 +604,132 @@ <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 class="demo-tab is-active" data-demo-tab="0" role="tab" aria-selected="true">Дашборд</button>
+        <button class="demo-tab" data-demo-tab="1" role="tab" aria-selected="false">Список лидов</button>
+        <button class="demo-tab" data-demo-tab="2" role="tab" aria-selected="false">Чат с лидом</button>
+      </div>
+
+      <div class="demo-screen is-active" data-demo-screen="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 class="demo-screen" data-demo-screen="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 class="demo-screen" data-demo-screen="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="#register" 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 class="demo-dot is-active" data-demo-dot="0" aria-label="Показать экран Дашборд"></button>
+        <button class="demo-dot" data-demo-dot="1" aria-label="Показать экран Список лидов"></button>
+        <button class="demo-dot" data-demo-dot="2" aria-label="Показать экран Чат с лидом"></button>
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- Адаптивные стили -->
 <style>
   @media (min-width: 768px) {
@@ -679,6 +805,186 @@ <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;
+  }
+  .demo-tab.is-active {
+    color: #fff;
+    border-color: rgba(84,184,255,0.45);
+    background: rgba(84,184,255,0.12);
+  }
+  .demo-screen { display: none; }
+  .demo-screen.is-active { display: block; }
+
+  .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);
+  }
+  .demo-dot.is-active { background: #54B8FF; }
+
   /* Стрелки */
   .step-arrow {
     display: flex;
@@ -690,6 +996,10 @@ <h3 class="step-title">Получайте контакты</h3>
   .arrow-icon-v { display: block; }
 
   @media (min-width: 900px) {
+    .demo-shell { padding: 20px; }
+    .demo-metrics {
+      grid-template-columns: repeat(4, minmax(0,1fr));
+    }
     .how-steps {
       flex-direction: row;
       align-items: stretch;
@@ -715,6 +1025,58 @@ <h3 class="step-title">Получайте контакты</h3>
       if (el) el.textContent = count.toLocaleString('ru-RU');
     }
   }, 3200);
+
+  // Демо-интерфейс: автопереключение экранов каждые 5 секунд
+  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) {
+    demoActiveIndex = index;
+
+    demoTabs.forEach((tab, i) => {
+      const active = i === index;
+      tab.classList.toggle('is-active', active);
+      tab.setAttribute('aria-selected', active ? 'true' : 'false');
+    });
+
+    demoScreens.forEach((screen, i) => {
+      screen.classList.toggle('is-active', i === index);
+    });
+
+    demoDots.forEach((dot, i) => {
+      dot.classList.toggle('is-active', i === index);
+    });
+  }
+
+  function startDemoRotation() {
+    if (demoInterval) clearInterval(demoInterval);
+    demoInterval = setInterval(() => {
+      const next = (demoActiveIndex + 1) % demoScreens.length;
+      setDemoScreen(next);
+    }, 5000);
+  }
+
+  demoTabs.forEach((tab, i) => {
+    tab.addEventListener('click', () => {
+      setDemoScreen(i);
+      startDemoRotation();
+    });
+  });
+
+  demoDots.forEach((dot, i) => {
+    dot.addEventListener('click', () => {
+      setDemoScreen(i);
+      startDemoRotation();
+    });
+  });
+
+  if (demoScreens.length > 0) {
+    setDemoScreen(0);
+    startDemoRotation();
+  }
 </script>
 
 <!-- Lucide в самом конце body — гарантирует загрузку после DOM -->

From cd2107d517978dce3889d9e667405a0e9924ec45 Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 13:03:36 +0500
Subject: [PATCH 2/7] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B4=D0=BE=D1=81=D1=82=D1=83=D0=BF=D0=BD=D0=BE=D1=81?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=B8=20=D0=BF=D0=BE=D0=B2=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B5=D0=BC=D0=BE-=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 44 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index c3ec904..8c9d02a 100644
--- a/index.html
+++ b/index.html
@@ -631,12 +631,12 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
 
     <div class="demo-shell">
       <div class="demo-tabs" role="tablist" aria-label="Экраны демо-интерфейса">
-        <button class="demo-tab is-active" data-demo-tab="0" role="tab" aria-selected="true">Дашборд</button>
-        <button class="demo-tab" data-demo-tab="1" role="tab" aria-selected="false">Список лидов</button>
-        <button class="demo-tab" data-demo-tab="2" role="tab" aria-selected="false">Чат с лидом</button>
+        <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 id="demo-tab-1" class="demo-tab" data-demo-tab="1" role="tab" aria-controls="demo-panel-1" aria-selected="false">Список лидов</button>
+        <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 class="demo-screen is-active" data-demo-screen="0">
+      <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>
@@ -665,7 +665,7 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
         </div>
       </div>
 
-      <div class="demo-screen" data-demo-screen="1">
+      <div id="demo-panel-1" class="demo-screen" data-demo-screen="1" role="tabpanel" aria-labelledby="demo-tab-1" hidden>
         <div class="demo-lead-card">
           <div style="display:flex;justify-content:space-between;gap:8px;align-items:flex-start;">
             <div>
@@ -699,7 +699,7 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
         </div>
       </div>
 
-      <div class="demo-screen" data-demo-screen="2">
+      <div id="demo-panel-2" class="demo-screen" data-demo-screen="2" role="tabpanel" aria-labelledby="demo-tab-2" hidden>
         <div class="demo-chat-card">
           <div style="display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
             <div>
@@ -853,8 +853,8 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     border-color: rgba(84,184,255,0.45);
     background: rgba(84,184,255,0.12);
   }
-  .demo-screen { display: none; }
-  .demo-screen.is-active { display: block; }
+  .demo-screen { display: none; opacity: 0; transform: translateY(8px); }
+  .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,
@@ -985,6 +985,14 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   }
   .demo-dot.is-active { background: #54B8FF; }
 
+  @media (prefers-reduced-motion: reduce) {
+    .demo-screen,
+    .demo-screen.is-active {
+      transition: none;
+      transform: none;
+    }
+  }
+
   /* Стрелки */
   .step-arrow {
     display: flex;
@@ -1043,7 +1051,9 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     });
 
     demoScreens.forEach((screen, i) => {
-      screen.classList.toggle('is-active', i === index);
+      const active = i === index;
+      screen.classList.toggle('is-active', active);
+      screen.hidden = !active;
     });
 
     demoDots.forEach((dot, i) => {
@@ -1052,6 +1062,7 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   }
 
   function startDemoRotation() {
+    if (demoScreens.length === 0) return;
     if (demoInterval) clearInterval(demoInterval);
     demoInterval = setInterval(() => {
       const next = (demoActiveIndex + 1) % demoScreens.length;
@@ -1059,6 +1070,13 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     }, 5000);
   }
 
+  function stopDemoRotation() {
+    if (demoInterval) {
+      clearInterval(demoInterval);
+      demoInterval = null;
+    }
+  }
+
   demoTabs.forEach((tab, i) => {
     tab.addEventListener('click', () => {
       setDemoScreen(i);
@@ -1073,6 +1091,14 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     });
   });
 
+  const demoShell = document.querySelector('.demo-shell');
+  if (demoShell) {
+    demoShell.addEventListener('mouseenter', stopDemoRotation);
+    demoShell.addEventListener('mouseleave', startDemoRotation);
+    demoShell.addEventListener('focusin', stopDemoRotation);
+    demoShell.addEventListener('focusout', startDemoRotation);
+  }
+
   if (demoScreens.length > 0) {
     setDemoScreen(0);
     startDemoRotation();

From 3f3f2206aee1b043cc4cf086763acfe9849099f4 Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 13:14:15 +0500
Subject: [PATCH 3/7] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20README=20=D1=81=20=D1=82=D0=B5=D1=85=D0=BD=D0=B8=D1=87?=
 =?UTF-8?q?=D0=B5=D1=81=D0=BA=D0=B8=D0=BC=20=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=D0=BC=20=D0=BB=D0=B5=D0=BD=D0=B4=D0=B8=D0=BD=D0=B3?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 170 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 README.md

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`

From 44f1e7efb5d41e5785ef4c3b0642b0450c79ad2f Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 13:37:30 +0500
Subject: [PATCH 4/7] =?UTF-8?q?=D0=9F=D0=BE=D1=87=D0=B8=D0=BD=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BE=D0=BA=20=D0=B2=20?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D0=BE=D0=B9=20=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D1=81=D0=B8=D0=B8=20=D0=B1=D0=B5=D0=B7=20CDN?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 48 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 8c9d02a..4bce465 100644
--- a/index.html
+++ b/index.html
@@ -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>

From 1dfebe479b81c33714b287e530709041c9276d97 Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 14:21:33 +0500
Subject: [PATCH 5/7] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=B4=D0=B5=D0=BC=D0=BE=20=D0=BD=D0=B0=20=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D1=8B=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 52 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 4bce465..45fe21e 100644
--- a/index.html
+++ b/index.html
@@ -649,9 +649,9 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
 
     <div class="demo-shell">
       <div class="demo-tabs" role="tablist" aria-label="Экраны демо-интерфейса">
-        <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 id="demo-tab-1" class="demo-tab" data-demo-tab="1" role="tab" aria-controls="demo-panel-1" aria-selected="false">Список лидов</button>
-        <button id="demo-tab-2" class="demo-tab" data-demo-tab="2" role="tab" aria-controls="demo-panel-2" aria-selected="false">Чат с лидом</button>
+        <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">
@@ -740,9 +740,9 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
       </div>
 
       <div class="demo-dots" aria-label="Индикаторы экранов">
-        <button class="demo-dot is-active" data-demo-dot="0" aria-label="Показать экран Дашборд"></button>
-        <button class="demo-dot" data-demo-dot="1" aria-label="Показать экран Список лидов"></button>
-        <button class="demo-dot" data-demo-dot="2" aria-label="Показать экран Чат с лидом"></button>
+        <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>
@@ -865,6 +865,8 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     font-size: 12px;
     font-weight: 700;
     cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
   }
   .demo-tab.is-active {
     color: #fff;
@@ -1000,6 +1002,8 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     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; }
 
@@ -1060,22 +1064,23 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   let demoInterval = null;
 
   function setDemoScreen(index) {
-    demoActiveIndex = index;
+    if (demoScreens.length === 0) return;
+    demoActiveIndex = ((index % demoScreens.length) + demoScreens.length) % demoScreens.length;
 
     demoTabs.forEach((tab, i) => {
-      const active = i === index;
+      const active = i === demoActiveIndex;
       tab.classList.toggle('is-active', active);
       tab.setAttribute('aria-selected', active ? 'true' : 'false');
     });
 
     demoScreens.forEach((screen, i) => {
-      const active = i === index;
+      const active = i === demoActiveIndex;
       screen.classList.toggle('is-active', active);
       screen.hidden = !active;
     });
 
     demoDots.forEach((dot, i) => {
-      dot.classList.toggle('is-active', i === index);
+      dot.classList.toggle('is-active', i === demoActiveIndex);
     });
   }
 
@@ -1095,26 +1100,29 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     }
   }
 
-  demoTabs.forEach((tab, i) => {
-    tab.addEventListener('click', () => {
-      setDemoScreen(i);
+  function bindDemoActivator(node, index) {
+    const activate = (event) => {
+      if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
+      if (event.cancelable) event.preventDefault();
+      setDemoScreen(index);
       startDemoRotation();
-    });
-  });
+    };
+    node.addEventListener('click', activate);
+    node.addEventListener('touchend', activate, { passive: false });
+    node.addEventListener('keydown', activate);
+  }
 
-  demoDots.forEach((dot, i) => {
-    dot.addEventListener('click', () => {
-      setDemoScreen(i);
-      startDemoRotation();
-    });
-  });
+  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', startDemoRotation);
+    demoShell.addEventListener('focusout', () => {
+      if (!demoShell.contains(document.activeElement)) startDemoRotation();
+    });
   }
 
   if (demoScreens.length > 0) {

From 5fef7097da9b98335cc1459015f1680c4acec49b Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 15:03:28 +0500
Subject: [PATCH 6/7] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D1=82=D1=8C?=
 =?UTF-8?q?=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=B4=D0=B5=D0=BC=D0=BE=20=D1=83=D1=81=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B9=D1=87=D0=B8=D0=B2=D1=8B=D0=BC=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D1=8B=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 45fe21e..aa53d56 100644
--- a/index.html
+++ b/index.html
@@ -683,7 +683,7 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
         </div>
       </div>
 
-      <div id="demo-panel-1" class="demo-screen" data-demo-screen="1" role="tabpanel" aria-labelledby="demo-tab-1" hidden>
+      <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>
@@ -717,7 +717,7 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
         </div>
       </div>
 
-      <div id="demo-panel-2" class="demo-screen" data-demo-screen="2" role="tabpanel" aria-labelledby="demo-tab-2" hidden>
+      <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>
@@ -873,8 +873,9 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
     border-color: rgba(84,184,255,0.45);
     background: rgba(84,184,255,0.12);
   }
-  .demo-screen { display: none; opacity: 0; transform: translateY(8px); }
-  .demo-screen.is-active { display: block; opacity: 1; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease; }
+  .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,
@@ -1057,6 +1058,7 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   }, 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]'));
@@ -1103,12 +1105,11 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   function bindDemoActivator(node, index) {
     const activate = (event) => {
       if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
-      if (event.cancelable) event.preventDefault();
       setDemoScreen(index);
       startDemoRotation();
     };
     node.addEventListener('click', activate);
-    node.addEventListener('touchend', activate, { passive: false });
+    node.addEventListener('pointerup', activate);
     node.addEventListener('keydown', activate);
   }
 

From 2aef3b9fce10c4f4190259f5d74157f6e3a197fd Mon Sep 17 00:00:00 2001
From: helloroman <roman.bezmaternykh@gmail.com>
Date: Wed, 25 Mar 2026 15:28:23 +0500
Subject: [PATCH 7/7] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B1=D0=BB=D0=BE=D0=BA=204=20=D1=81=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B8=D0=BC=D1=83=D1=89=D0=B5=D1=81=D1=82=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BC=D0=B8=20=D0=B8=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)

diff --git a/index.html b/index.html
index aa53d56..d495a99 100644
--- a/index.html
+++ b/index.html
@@ -748,6 +748,72 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   </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>
+
 <!-- Адаптивные стили -->
 <style>
   @media (min-width: 768px) {
@@ -1008,6 +1074,56 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   }
   .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;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .demo-screen,
     .demo-screen.is-active {
@@ -1027,6 +1143,12 @@ <h2 style="font-size:clamp(26px,5vw,42px);font-weight:800;line-height:1.12;lette
   .arrow-icon-v { display: block; }
 
   @media (min-width: 900px) {
+    .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));