<?php
$pageTitle = 'Защищённая видеосвязь для бизнеса — Безопасный Офис';
$pageDescription = 'Шифрованная видеосвязь для партнёров Безопасного Офиса. Сквозное шифрование, без слежки, без записей. Брендирование под вашу компанию и размещение на ваших серверах.';
$canonicalUrl = 'https://xn--80akxggcl.xn----7sbcqkif5ahegzf4b3g.xn--p1acf/services/video.php';
$needsCsrf = true;
include __DIR__ . '/../includes/header.php';
?>

    <!-- Hero -->
    <section class="hero" style="padding-bottom:60px;">
        <div class="container">
            <div class="hero__badge">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2.5"><path d="M15.6 11.6L22 7v10l-6.4-4.6"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
                <span>Для партнёров</span> &middot; Сервис шифрованной видеосвязи
            </div>
            <h1>Защищённая видеосвязь<br>для&nbsp;вашего бизнеса</h1>
            <p class="hero__subtitle">Видеоконференции с&nbsp;шифрованием, без&nbsp;логов и&nbsp;записей. Сервис для&nbsp;партнёров &laquo;Безопасного Офиса&raquo;&nbsp;&mdash; бесплатно в&nbsp;рамках сертификации. Брендирование и&nbsp;размещение на&nbsp;ваших серверах&nbsp;&mdash; за&nbsp;отдельную плату.</p>
            <div class="hero__buttons">
                <a href="https://meet.bzpoffice.online" target="_blank" rel="noopener" class="btn btn--primary">Попробовать бесплатно</a>
                <a href="#tariffs" class="btn btn--outline">Тарифы</a>
                <a href="#security" class="btn btn--outline">Как устроена защита</a>
            </div>

            <div class="hero-stats">
                <div class="hero-stat">
                    <div class="hero-stat__number">AES-128</div>
                    <div class="hero-stat__label">сквозное шифрование GCM</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat__number">0</div>
                    <div class="hero-stat__label">данных на&nbsp;серверах после звонка</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat__number">P2P</div>
                    <div class="hero-stat__label">прямое соединение при&nbsp;1-на-1</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat__number">24/7</div>
                    <div class="hero-stat__label">мониторинг инфраструктуры</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Зачем нужна защищённая связь -->
    <section class="section section--light" id="why">
        <div class="container">
            <div class="section__header">
                <h2>Зачем бизнесу защищённая связь</h2>
                <p>Zoom, Google&nbsp;Meet и&nbsp;Teams хранят ваши разговоры на&nbsp;зарубежных серверах. Ваши данные&nbsp;&mdash; их&nbsp;актив</p>
            </div>

            <div class="why-stats">
                <div class="why-stat">
                    <div class="why-stat__number"><span class="term" data-tip="Федеральный закон «О персональных данных» — требует хранения данных россиян на территории РФ">152-ФЗ</span></div>
                    <div class="why-stat__label">требует хранения данных россиян на&nbsp;территории РФ. Зарубежные сервисы не&nbsp;соответствуют</div>
                </div>
                <div class="why-stat">
                    <div class="why-stat__number"><span class="term" data-tip="Закон США, обязывающий американские IT-компании передавать данные пользователей спецслужбам по запросу">CLOUD <span>Act</span></span></div>
                    <div class="why-stat__label">обязывает американские компании передавать данные спецслужбам США</div>
                </div>
                <div class="why-stat">
                    <div class="why-stat__number">60%</div>
                    <div class="why-stat__label">утечек корпоративных данных происходит через каналы связи</div>
                </div>
                <div class="why-stat">
                    <div class="why-stat__number">500 <span>млн&nbsp;&#8381;</span></div>
                    <div class="why-stat__label">максимальный штраф за&nbsp;утечку <span class="term" data-tip="Персональные данные — любая информация, относящаяся к определённому физическому лицу: ФИО, телефон, email, паспорт">ПДн</span> по&nbsp;<span class="term" data-tip="Закон от 30.11.2024 — ужесточил штрафы за утечки персональных данных, ввёл оборотные штрафы до 3% выручки">420-ФЗ</span></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Как устроена безопасность -->
    <section class="section section--dark" id="security">
        <div class="container">
            <div class="section__header">
                <h2>Как устроена безопасность</h2>
                <p>Три уровня защиты: шифрование канала, шифрование содержимого, архитектура без&nbsp;хранения</p>
            </div>

            <div class="product-cards">
                <div class="product-card" style="background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1);">
                    <div class="product-card__icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    </div>
                    <h3 style="color:#fff;">Транспортное шифрование</h3>
                    <p style="color:rgba(255,255,255,0.7);">Всё аудио и&nbsp;видео шифруется по&nbsp;протоколу <strong style="color:#fff;"><span class="term" data-tip="Протокол шифрования медиапотоков — защищает аудио и видео в реальном времени при передаче через интернет">DTLS-SRTP</span></strong>&nbsp;&mdash; стандарт <span class="term" data-tip="Web Real-Time Communication — технология для аудио/видеосвязи прямо в браузере, без установки плагинов">WebRTC</span>. Включено всегда, отключить нельзя. Даже при&nbsp;перехвате трафика содержимое невозможно расшифровать.</p>
                </div>
                <div class="product-card" style="background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1);">
                    <div class="product-card__icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
                    </div>
                    <h3 style="color:#fff;">Сквозное шифрование (<span class="term" data-tip="End-to-End Encryption — сквозное шифрование, при котором данные доступны только участникам разговора, сервер не видит содержимого">E2EE</span>)</h3>
                    <p style="color:rgba(255,255,255,0.7);">Опциональный второй уровень: <strong style="color:#fff;"><span class="term" data-tip="Алгоритм шифрования AES с режимом GCM — обеспечивает конфиденциальность и целостность данных одновременно">AES-128-GCM</span></strong>. Даже наш сервер не&nbsp;видит содержимого звонка. Ключи генерируются на&nbsp;устройствах участников и&nbsp;никогда не&nbsp;передаются серверу.</p>
                </div>
                <div class="product-card" style="background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1);">
                    <div class="product-card__icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                    </div>
                    <h3 style="color:#fff;">Ничего не&nbsp;хранится</h3>
                    <p style="color:rgba(255,255,255,0.7);">После окончания звонка на&nbsp;сервере не&nbsp;остаётся ни&nbsp;записей, ни&nbsp;логов содержимого. Архитектура без&nbsp;хранения данных&nbsp;&mdash; нечего украсть, нечего изъять.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Техническая архитектура -->
    <section class="section section--light">
        <div class="container">
            <div class="section__header">
                <h2>Техническая архитектура</h2>
                <p>Как устроена маршрутизация звонков и&nbsp;что&nbsp;видит сервер</p>
            </div>

            <div class="features-grid">
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                    </div>
                    <div>
                        <h4>Звонок 1-на-1: <span class="term" data-tip="Peer-to-Peer — прямое соединение между устройствами без промежуточного сервера">P2P</span></h4>
                        <p>Прямое соединение между устройствами. Трафик не&nbsp;проходит через сервер вообще&nbsp;&mdash; настоящее end-to-end шифрование.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><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.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                    </div>
                    <div>
                        <h4>Групповой звонок: <span class="term" data-tip="Selective Forwarding Unit — сервер, который маршрутизирует видеопотоки между участниками, не декодируя содержимое">SFU</span></h4>
                        <p>Сервер маршрутизирует потоки, но&nbsp;не&nbsp;декодирует содержимое. С&nbsp;E2EE&nbsp;&mdash; полностью невидим для&nbsp;сервера.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    </div>
                    <div>
                        <h4>Обмен ключами: <span class="term" data-tip="Криптографический протокол обмена ключами шифрования между участниками конференции">Olm</span></h4>
                        <p>Протокол <span class="term" data-tip="Алгоритм ротации криптографических ключей — используется в Signal и других защищённых мессенджерах для обеспечения прямой секретности">Double Ratchet</span> (как в&nbsp;Signal). При&nbsp;выходе участника&nbsp;&mdash; новый ключ. При&nbsp;входе&nbsp;&mdash; ротация. Нельзя подслушать ни&nbsp;прошлое, ни&nbsp;будущее.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
                    </div>
                    <div>
                        <h4>Серверы в&nbsp;РФ</h4>
                        <p>Дата-центр <span class="term" data-tip="Третий уровень надёжности дата-центра: резервирование всех систем, доступность 99,982%, не более 1,6 часа простоя в год">Tier&nbsp;III</span> на&nbsp;территории России. Соответствие <span class="term" data-tip="Федеральный закон «О персональных данных» — требует хранения данных россиян на территории РФ">152-ФЗ</span>. Данные не&nbsp;покидают юрисдикцию РФ.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                    </div>
                    <div>
                        <h4>Без&nbsp;зависимости от&nbsp;зарубежных сервисов</h4>
                        <p>Не&nbsp;Google, не&nbsp;Microsoft, не&nbsp;Zoom. Полностью независимая инфраструктура. Не&nbsp;может быть заблокирована или отключена извне.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                    </div>
                    <div>
                        <h4>Open Source</h4>
                        <p>Исходный код открыт. Прошёл аудит NCC&nbsp;Group. Каждый может убедиться, что&nbsp;бэкдоров нет.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Сравнение с Zoom/Teams -->
    <section class="section section--dark">
        <div class="container">
            <div class="section__header">
                <h2>Сравнение с&nbsp;Zoom, Teams и&nbsp;Google&nbsp;Meet</h2>
            </div>

            <div style="overflow-x:auto;">
                <table class="article-table" style="width:100%; border-collapse:collapse; font-size:15px;">
                    <thead>
                        <tr>
                            <th style="text-align:left; padding:14px 16px; border-bottom:2px solid rgba(255,255,255,0.15); color:#fff;"></th>
                            <th style="text-align:center; padding:14px 16px; border-bottom:2px solid rgba(255,255,255,0.15); color:#4f7df9; font-weight:700;">Безопасный Офис</th>
                            <th style="text-align:center; padding:14px 16px; border-bottom:2px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.5);">Zoom</th>
                            <th style="text-align:center; padding:14px 16px; border-bottom:2px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.5);">Teams</th>
                            <th style="text-align:center; padding:14px 16px; border-bottom:2px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.5);">Google&nbsp;Meet</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.8);">Серверы в&nbsp;РФ</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                        <tr>
                            <td style="padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.8);">Сквозное шифрование (E2EE)</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#fbbf24;">Частично</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                        <tr>
                            <td style="padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.8);">Open&nbsp;Source (открытый код)</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                        <tr>
                            <td style="padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.8);">Без&nbsp;CLOUD&nbsp;Act</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                        <tr>
                            <td style="padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.8);">Нет логов разговоров</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                        <tr>
                            <td style="padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.8);">Брендирование под&nbsp;клиента</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.08); color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                        <tr>
                            <td style="padding:12px 16px; color:rgba(255,255,255,0.8);">Своя инфраструктура (<span class="term" data-tip="Размещение ПО и данных на собственных серверах клиента, а не в облаке — полный контроль над инфраструктурой">on-premise</span>)</td>
                            <td style="text-align:center; padding:12px 16px; color:#34d399; font-size:18px;">&#10003;</td>
                            <td style="text-align:center; padding:12px 16px; color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; color:#f87171; font-size:18px;">&#10007;</td>
                            <td style="text-align:center; padding:12px 16px; color:#f87171; font-size:18px;">&#10007;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- Что входит бесплатно -->
    <section class="section section--light" id="tariffs">
        <div class="container">
            <div class="section__header">
                <h2>Два формата сервиса</h2>
                <p>Базовый доступ включён в&nbsp;сертификацию. Полное брендирование&nbsp;&mdash; отдельная услуга</p>
            </div>

            <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:32px; max-width:900px; margin:0 auto;">
                <!-- Тариф: Включено -->
                <div style="background:#f8f9fb; border-radius:16px; padding:40px 32px; border:2px solid #e5e7eb; position:relative;">
                    <div style="font-size:13px; font-weight:600; color:#1F5BFF; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px;">Включено в&nbsp;сертификацию</div>
                    <h3 style="font-size:24px; font-weight:800; margin-bottom:8px;">Базовый</h3>
                    <div style="font-size:14px; color:#6b7280; margin-bottom:24px;">Для всех сертифицированных партнёров</div>

                    <ul style="list-style:none; padding:0; margin:0 0 24px 0;">
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Шифрованная видеосвязь
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            До&nbsp;50 участников в&nbsp;звонке
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            E2EE (сквозное шифрование)
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Серверы в&nbsp;РФ
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Демонстрация экрана
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Текстовый чат
                        </li>
                    </ul>

                    <div style="font-size:14px; color:#6b7280; padding-top:16px; border-top:1px solid #e5e7eb;">Брендинг: &laquo;Безопасный Офис&raquo;</div>
                </div>

                <!-- Тариф: Premium -->
                <div style="background:linear-gradient(135deg, #0a0e27 0%, #1a1f4e 100%); border-radius:16px; padding:40px 32px; border:2px solid #4f7df9; position:relative; color:#fff;">
                    <div style="position:absolute; top:-12px; right:24px; background:linear-gradient(135deg, #1F5BFF, #7C3AED); color:#fff; font-size:12px; font-weight:700; padding:4px 16px; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em;">Под ваш бренд</div>
                    <div style="font-size:13px; font-weight:600; color:#7C9CFF; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px;">Отдельная услуга</div>
                    <h3 style="font-size:24px; font-weight:800; margin-bottom:8px; color:#fff;">White Label</h3>
                    <div style="font-size:14px; color:rgba(255,255,255,0.5); margin-bottom:24px;">Ваш бренд, ваши серверы</div>

                    <ul style="list-style:none; padding:0; margin:0 0 24px 0;">
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Всё из&nbsp;базового тарифа
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Ваш логотип и&nbsp;фирменные цвета
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Ваш домен (meet.partner.ru)
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Развёртывание на&nbsp;ваших серверах
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Кастомная приветственная страница
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Настройка интерфейса (кнопки, панели)
                        </li>
                        <li style="padding:8px 0; font-size:15px; display:flex; align-items:baseline; gap:10px; color:rgba(255,255,255,0.85);">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="3" style="flex-shrink:0;"><path d="M20 6L9 17l-5-5"/></svg>
                            Техподдержка и&nbsp;обновления
                        </li>
                    </ul>

                    <div style="font-size:14px; color:rgba(255,255,255,0.4); padding-top:16px; border-top:1px solid rgba(255,255,255,0.15);">Брендинг: полностью ваш. Без&nbsp;упоминания &laquo;Безопасного Офиса&raquo;</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Что можно кастомизировать -->
    <section class="section section--dark" id="customization">
        <div class="container">
            <div class="section__header">
                <h2>Что можно кастомизировать в&nbsp;White&nbsp;Label</h2>
                <p>Полная переделка под&nbsp;бренд партнёра&nbsp;&mdash; для&nbsp;клиентов это&nbsp;ваш собственный сервис</p>
            </div>

            <div class="features-grid">
                <div class="feature">
                    <div class="feature__icon" style="background:rgba(255,255,255,0.08);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    </div>
                    <div>
                        <h4 style="color:#fff;">Логотип и&nbsp;иконки</h4>
                        <p style="color:rgba(255,255,255,0.65);">Ваш SVG/PNG логотип вместо стандартного. Favicon, watermark в&nbsp;конференции, приветственная страница.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon" style="background:rgba(255,255,255,0.08);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="15.5" r="2.5"/><circle cx="8.5" cy="15.5" r="2.5"/></svg>
                    </div>
                    <div>
                        <h4 style="color:#fff;">Цветовая схема</h4>
                        <p style="color:rgba(255,255,255,0.65);">Кнопки, панели, фон&nbsp;&mdash; под&nbsp;фирменные цвета партнёра. Через CSS-оверлей, без&nbsp;пересборки.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon" style="background:rgba(255,255,255,0.08);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                    </div>
                    <div>
                        <h4 style="color:#fff;">Свой домен</h4>
                        <p style="color:rgba(255,255,255,0.65);">meet.partner.ru, video.partner.ru&nbsp;&mdash; любой поддомен. <span class="term" data-tip="Secure Sockets Layer — протокол шифрования для защиты данных при передаче через интернет, обеспечивает HTTPS">SSL</span>-сертификат настроим.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon" style="background:rgba(255,255,255,0.08);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    </div>
                    <div>
                        <h4 style="color:#fff;">Приветственная страница</h4>
                        <p style="color:rgba(255,255,255,0.65);">Кастомный лендинг при&nbsp;входе: текст, фон, описание сервиса. Ваши клиенты видят ваш бренд.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon" style="background:rgba(255,255,255,0.08);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
                    </div>
                    <div>
                        <h4 style="color:#fff;">Интерфейс конференции</h4>
                        <p style="color:rgba(255,255,255,0.65);">Выбор кнопок в&nbsp;панели: убрать ненужные (запись, YouTube), добавить свои. Тулбар, чат, фон.</p>
                    </div>
                </div>
                <div class="feature">
                    <div class="feature__icon" style="background:rgba(255,255,255,0.08);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C9CFF" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
                    </div>
                    <div>
                        <h4 style="color:#fff;">Мобильное приложение</h4>
                        <p style="color:rgba(255,255,255,0.65);">Брендированное приложение для&nbsp;iOS и&nbsp;Android с&nbsp;вашим названием, иконкой и&nbsp;splash-экраном.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Кому подходит -->
    <section class="section section--light">
        <div class="container">
            <div class="section__header">
                <h2>Кому нужна защищённая связь</h2>
            </div>

            <div class="product-cards">
                <div class="product-card">
                    <div class="product-card__icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
                    </div>
                    <h3>Юристы и&nbsp;адвокаты</h3>
                    <p>Адвокатская тайна, конфиденциальные переговоры с&nbsp;клиентами, обсуждение стратегий. Перехват&nbsp;&mdash; это нарушение закона.</p>
                </div>
                <div class="product-card">
                    <div class="product-card__icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
                    </div>
                    <h3>Бухгалтеры и&nbsp;аудиторы</h3>
                    <p>Обсуждение финансовых документов, налоговых схем, аудиторских заключений. Утечка&nbsp;&mdash; это убытки и&nbsp;репутация.</p>
                </div>
                <div class="product-card">
                    <div class="product-card__icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#1F5BFF" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    </div>
                    <h3>IT-компании</h3>
                    <p>Техсаппорт с&nbsp;демонстрацией экрана, обсуждение инфраструктуры клиентов, передача паролей и&nbsp;доступов.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="section section--dark" id="contact">
        <div class="container">
            <div class="section__header">
                <h2>Подключить защищённую видеосвязь</h2>
                <p>Оставьте заявку&nbsp;&mdash; расскажем подробнее, покажем демо и&nbsp;подберём формат</p>
            </div>

            <form class="form" id="partnerForm" action="/submit.php" method="POST">
                <input type="hidden" name="source" value="video-service">
                <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?? '' ?>">
                <div style="position:absolute;left:-9999px;"><input type="text" name="website_url" tabindex="-1" autocomplete="off"></div>

                <div class="form__message form__message--success" id="formSuccess" style="display:none;">
                    Заявка отправлена! Мы свяжемся с вами в ближайшее время.
                </div>
                <div class="form__message form__message--error" id="formError" style="display:none;">
                    Произошла ошибка. Попробуйте ещё раз или напишите нам на info@bzpoffice.online
                </div>

                <div class="form__grid">
                    <div class="form__row">
                        <label class="form__label" for="vid_name">Ваше имя *</label>
                        <input class="form__input" type="text" id="vid_name" name="name" placeholder="Иван Иванов" required>
                    </div>
                    <div class="form__row">
                        <label class="form__label" for="vid_company">Компания *</label>
                        <input class="form__input" type="text" id="vid_company" name="company" placeholder="ООО «Пример»" required>
                    </div>
                </div>
                <div class="form__grid">
                    <div class="form__row">
                        <label class="form__label" for="vid_phone">Телефон *</label>
                        <input class="form__input" type="tel" id="vid_phone" name="phone" placeholder="+7 (___) ___-__-__" required>
                    </div>
                    <div class="form__row">
                        <label class="form__label" for="vid_email">Email *</label>
                        <input class="form__input" type="email" id="vid_email" name="email" placeholder="mail@example.ru" required>
                    </div>
                </div>
                <div class="form__row">
                    <label class="form__label" for="vid_comment">Какой формат интересует?</label>
                    <textarea class="form__textarea" id="vid_comment" name="comment" placeholder="Базовый или White Label? Нужно ли размещение на ваших серверах?" rows="3"></textarea>
                </div>
                <div class="form__row">
                    <label class="form__checkbox">
                        <input type="checkbox" name="consent" value="1" required>
                        <span class="form__checkbox-label">Даю согласие на&nbsp;<a href="/politika.php" target="_blank">обработку персональных данных</a> и&nbsp;принимаю <a href="/oferta.php" target="_blank">условия оферты</a></span>
                    </label>
                    <button type="submit" class="btn btn--primary form__submit" style="width:100%;">Оставить заявку</button>
                </div>
            </form>
        </div>
    </section>

<?php include __DIR__ . '/../includes/footer.php'; ?>
