Обновление УТП: 'Контролируйте прибыль', секция 'Кому подходит', FAQ безопасности

index_ibm.html

@@ -1223,6 +1223,110 @@ h1 {
         padding: 20px;
     }
 }
+
+/* ── КОМУ ПОДОБХОДИТ ── */
+.who-section {
+    border-bottom: 1px solid var(--border);
+    padding: 120px 0;
+}
+.who-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    max-width: 1100px;
+    margin: 0 auto 64px;
+}
+.who-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 32px 28px;
+    transition: all 0.4s var(--ease-out);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+.who-card:hover {
+    border-color: var(--accent);
+    box-shadow: 0 8px 32px var(--accent-dim);
+    transform: translateY(-4px);
+}
+.who-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    background: var(--accent-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+    flex-shrink: 0;
+}
+.who-card h3 {
+    font-size: 1.0625rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    line-height: 1.3;
+}
+.who-card p {
+    font-size: 0.875rem;
+    color: var(--text-sec);
+    line-height: 1.6;
+    flex-grow: 1;
+}
+
+/* Security badges row */
+.who-badges {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    padding: 32px;
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    max-width: 1100px;
+    margin: 0 auto;
+}
+.who-badge-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+}
+.who-badge-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: var(--accent-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--accent);
+}
+.who-badge-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.who-badge-text div:first-child {
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+.who-badge-text div:last-child {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+}
+
+@media (max-width: 1024px) {
+    .who-grid { grid-template-columns: 1fr; }
+    .who-badges { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 640px) {
+    .who-badges { grid-template-columns: 1fr; }
+    .who-section { padding: 80px 0; }
+}
+
 </style>
 </head>
 <body>
@@ -1272,15 +1376,9 @@ h1 {
                     Обновляется автоматически из 1С, CRM и банков.
                     Смотрится с телефона каждое утро.
                 </p>
-                <p class="hero-tagline">Сквозная аналитика и панели мониторинга<br>для вашего бизнеса и департаментов под ключ</p>
+                <p <div class="hero-tagline">
-                <div class="hero-actions">
+                    Контролируйте прибыль компании в реальном времени.<br>
-                    <a href="#cta" class="btn btn-accent btn-lg">
+                    Автоматические рекомендации на основе <span class="accent">50+ правил</span>
-                        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                            <path d="M3 8h10M9 4l4 4-4 4"/>
-                        </svg>
-                        Получить демо за 3 дня
-                    </a>
-                    <a href="#compare" class="btn btn-outline btn-lg">Сравнить</a>
                 </div>
                 <div class="hero-meta">
                     <div class="hero-meta-item">
@@ -1899,6 +1997,108 @@ h1 {
 </section>
 
 <!-- ── PRICING ── -->
+
+<!-- ── КОМУ ПОДОБХОДИТ ── -->
+<section id="who" class="who-section">
+    <div class="wrap">
+        <div class="section-label reveal" style="text-align:center;display:flex;justify-content:center;">Сфера применения</div>
+        <h2 class="section-title reveal" style="text-align:center;max-width:600px;margin:16px auto 16px;">Кому подходит ROI24</h2>
+        <p class="reveal" style="text-align:center;color:var(--text-sec);max-width:560px;margin:0 auto 64px;line-height:1.7;font-size:1rem;">
+            Мы создаём систему для бизнеса, где решения принимаются на основе данных — а не интуиции.
+        </p>
+
+        <div class="who-grid">
+            <div class="who-card reveal reveal-delay-1">
+                <div class="who-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
+                        <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
+                    </svg>
+                </div>
+                <h3>E-commerce и интернет-магазины</h3>
+                <p>Связка рекламных кабинетов, CRM и складского учёта. Видите маржу с каждого заказа в реальном времени, а не в конце месяца.</p>
+            </div>
+
+            <div class="who-card reveal reveal-delay-2">
+                <div class="who-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
+                        <path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6"/>
+                    </svg>
+                </div>
+                <h3>Производство и услуги</h3>
+                <p>Контролируйте рентабельность каждого направления. Автоматические алерты при отклонении от плана — реагируйте сразу.</p>
+            </div>
+
+            <div class="who-card reveal reveal-delay-3">
+                <div class="who-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
+                        <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
+                    </svg>
+                </div>
+                <h3>Компании с оборотом от 10М₽/мес</h3>
+                <p>Когда бизнес вырос за пределы Excel, но ещё нет аналитической команды. ROI24 заменяет первого аналитика.</p>
+            </div>
+
+            <div class="who-card reveal reveal-delay-4">
+                <div class="who-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="24" height="24">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
+                    </svg>
+                </div>
+                <h3>Бизнесы с отделом продаж и маркетинга</h3>
+                <p>Синхронизируйте маркетинг и продажи. Видите, какие каналы приносят прибыль, а не просто лиды.</p>
+            </div>
+        </div>
+
+        <!-- Security badges row -->
+        <div class="who-badges reveal">
+            <div class="who-badge-item">
+                <div class="who-badge-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
+                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                    </svg>
+                </div>
+                <div class="who-badge-text">
+                    <div>Договор NDA</div>
+                    <div>Юридическая защита данных</div>
+                </div>
+            </div>
+            <div class="who-badge-item">
+                <div class="who-badge-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
+                        <path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c-1.5-2-4-3-9-3m0-6c1.5 2 4 3 9 3m-9-9a9 9 0 0 0-9 9m9-9h9m-9 0a9 9 0 0 1 9-9"/>
+                    </svg>
+                </div>
+                <div class="who-badge-text">
+                    <div>Коробочное решение</div>
+                    <div>Данные на вашем сервере</div>
+                </div>
+            </div>
+            <div class="who-badge-item">
+                <div class="who-badge-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
+                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 6v6l3 3"/>
+                    </svg>
+                </div>
+                <div class="who-badge-text">
+                    <div>Пилотный проект</div>
+                    <div>2 недели на тест</div>
+                </div>
+            </div>
+            <div class="who-badge-item">
+                <div class="who-badge-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="20" height="20">
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/>
+                    </svg>
+                </div>
+                <div class="who-badge-text">
+                    <div>ROI за первый месяц</div>
+                    <div>Окупаемость или возврат</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
 <section id="pricing" class="pricing">
     <div class="wrap">
         <div class="text-center" style="margin-bottom: 48px;">
@@ -2053,7 +2253,20 @@ h1 {
         <div class="section-label reveal">Вопросы</div>
         <h2 class="section-title reveal reveal-delay-1" style="margin-bottom: 48px;">Возражения</h2>
         <div class="faq-list">
-            <div class="faq-item reveal reveal-delay-1">
+            <div class="<div class="faq-item" id="faq-security">
+            <div class="faq-q" onclick="toggleFaq('faq-security')">
+                Как защищены мои данные? Можно развернуть на своём сервере?
+            </div>
+            <div class="faq-a">
+                <div class="faq-a-inner">
+                    <p style="margin-bottom:12px;">Да. Вы можете выбрать <strong>облачную</strong> или <strong>коробочную</strong> модель:</p>
+                    <p style="margin-bottom:12px;"><strong>Облачная</strong> — данные хранятся на защищённых серверах с шифрованием AES-256 и ежедневными бэкапами.</p>
+                    <p style="margin-bottom:12px;"><strong>Коробочная</strong> — полный пакет устанавливается на ваш сервер. Данные не покидают ваш контур. Подходит для требований ФСТЭК и 152-ФЗ.</p>
+                    <p>Перед началом работ подписываем NDA. Полный аудит доступа предоставляется по запросу.</p>
+                </div>
+            </div>
+        </div>
+        faq-item reveal reveal-delay-1">
                 <div class="faq-q">Почему 100К? Это же дорого.</div>
                 <div class="faq-a"><div class="faq-a-inner">Это не шаблон. Это настройка под ваш бизнес: ваши 10 метрик, ваши 5 источников, ваше обучение команды. Шаблоны от 20К, но они бесполезны.</div></div>
             </div>