<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Комптон</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/main/css/style.css" />
</head>

<body>

    <!-- ====== НАВБАР ====== -->
    <header class="navbar" role="navigation">
        <div class="container">
            <a href="#" class="navbar-logo">
                <img src="/main/img/logo3.png" alt="FeedControl" />
            </a>
            <input type="checkbox" id="burgerToggle" class="burger-checkbox" />
            <label for="burgerToggle" class="burger-icon" aria-label="Открыть меню">
                <span></span><span></span><span></span>
            </label>
            <ul class="navbar-menu">
                <li><a href="#solutions">Система</a></li>
                <li><a href="#integrations">Технологии</a></li>
                <li><a href="#security">Безопасность</a></li>
                <li class="navbar-auth">
                    <a href="/login" class="btn btn-primary btn-sm">Вход</a>
                    <a href="/register" class="btn btn-primary btn-sm">Регистрация</a>
                </li>
            </ul>
        </div>
    </header>

    <!-- ====== HERO С ВИДЕО ====== -->
    <section class="hero section-padding" id="hero">
        <video class="hero-video" autoplay muted loop playsinline>
            <source src="/main/video/Тестовое видео.mp4" type="video/mp4" />
            Ваш браузер не поддерживает видео.
        </video>
        <div class="container">
            <h1 class="scramble-target" id="heroTitle">Технологии будущего на вашей ферме</h1>
            <p class="subtitle">
                Интеллектуальная система контроля кормления КРС на основе искусственного интеллекта.
                Снижаем затраты на корма, повышаем продуктивность стада и даём полный контроль над каждым этапом.
            </p>
            <div class="btn-group">
                <a href="#cta" class="btn btn-primary">Запросить демо</a>
                <a href="#solutions" class="btn btn-outline">Узнать больше</a>
            </div>
        </div>
    </section>

    <!-- ====== БЛОК: КАК ЭТО УСТРОЕНО ====== -->
    <section class="steps-section section-padding" id="how-it-works">
        <div class="container">
            <div class="section-intro">
                <span class="text-mono section-label">Процесс автоматизации</span>
                <h2>Как устроена наша система</h2>
            </div>
            <div class="steps-grid">
                <!-- Шаг 1 с изображением zoo.png -->
                <div class="step-card">
                    <div class="step-image-wrapper">
                        <img src="/main/img/zoo.png" alt="План рационов" />
                    </div>
                    <h3>План рационов</h3>
                    <p>Зоотехник составляет и корректирует рацион для каждой группы КРС в удобной программе на офисном ПК, ноутбуке или смартфоне.</p>
                </div>
                <!-- Шаг 2 с изображением wifi.png -->
                <div class="step-card">
                    <div class="step-image-wrapper">
                        <img src="/main/img/wifi.png" alt="Синхронизация данных" />
                    </div>
                    <h3>Синхронизация данных</h3>
                    <p>Созданное задание мгновенно и без проводов передается на весовой терминал кормосмесителя.</p>
                </div>
                <!-- Шаг 3 с изображением load.png -->
                <div class="step-card">
                    <div class="step-image-wrapper">
                        <img src="/main/img/load.png" alt="Точная загрузка" />
                    </div>
                    <h3>Точная загрузка</h3>
                    <p>Тракторист на дисплее видит подсказки и точный вес каждого компонента на лету, что исключает ошибки перегруза.</p>
                </div>
                <!-- Шаг 4 с изображением control.png -->
                <div class="step-card">
                    <div class="step-image-wrapper">
                        <img src="/main/img/control.png" alt="Контроль руководителя" />
                    </div>
                    <h3>Контроль руководителя</h3>
                    <p>Собственник или управляющий получает автоматический отчет о всех отклонениях и реальном расходе прямо на смартфон.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================ -->
    <!-- ====== БЛОК: ОТ ФОРМУЛЫ ДО КОРМУШКИ (ТОЛЬКО ЗАГОЛОВОК + СЛОГАН) ====== -->
    <!-- ============================================================ -->
    <section class="funnel-section" id="funnel">
        <div class="container">
            <!-- Заголовок (без подзаголовка и шагов) -->
            <div class="funnel-header">
                <h2>От формулы до кормушки</h2>
            </div>

            <!-- Финальный слоган -->
            <div class="funnel-final-slogan">
                <p>«Каждый килограмм корма — под контролем.<br>Каждая копейка — на счету. Каждая минута — сэкономлена»</p>
            </div>
        </div>
    </section>

    <!-- ====== БЛОК С ЗАГОЛОВКОМ, ИЗОБРАЖЕНИЕМ И ВЫЕЗЖАЮЩИМ ТЕКСТОМ ====== -->
    <section class="expand-block section-padding" id="about">
        <div class="container">
            <h2 class="section-title">Работа на любом устройстве</h2>
            <p class="section-subtitle">
                Управляйте системой кормления с телефона, планшета или компьютера — интерфейс адаптируется под любой экран.
            </p>

            <div class="expand-content" id="expandContent">
                <div class="side-panel left">
                    <p><strong>Всегда на связи с фермой</strong> Абсолютный контроль рационов и остатков в любом месте, в любое время и с любого гаджета.</p>
                </div>

                <div class="image-wrapper">
                    <img src="/main/img/Комптон всегда под рукой на белом фоне.jpg" alt="Комптон всегда под рукой" />
                </div>

                <div class="side-panel right">
                    <p><strong>Прозрачность и контроль</strong> Вы всегда видите, сколько корма съедено, как меняется продуктивность и где можно сэкономить без потери качества.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ====== КАРТОЧКИ РЕШЕНИЙ ====== -->
    <section class="section-padding" id="solutions">
        <div class="container">
            <h2 class="section-intro section-intro--mb">Начни кормить по новому!</h2>
            <p class="section-subtitle-centered">
                Всё, что нужно для точного, экономного и эффективного кормления КРС.
            </p>

            <div class="cards-grid">
                <div class="card fade-up card-with-gif">
                    <div class="card-gif-wrapper">
                        <img src="/main/gif/16-24-58.gif" alt="Индивидуальный рацион" loading="lazy" />
                    </div>
                    <div class="card-body">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>
                        </div>
                        <h3>Автоматический расчет рационов</h3>
                        <p>Программа сама подбирает оптимальный состав корма для каждой группы животных с учётом возраста, веса и продуктивности.</p>
                    </div>
                </div>

                <div class="card fade-up card-with-gif">
                    <div class="card-gif-wrapper">
                        <img src="/main/gif/рецепты.gif" alt="Удобное редактирование рационов" loading="lazy" />
                    </div>
                    <div class="card-body">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                        </div>
                        <h3>Удобное редактирование рационов</h3>
                        <p>Редактируйте рацион в один клик: меняйте рецепты местами, добавляйте новые компоненты и мгновенно корректируйте сухое вещество.</p>
                    </div>
                </div>

                <div class="card fade-up card-with-gif">
                    <div class="card-gif-wrapper">
                        <img src="/main/gif/учет потребления.gif" alt="Прогноз продуктивности" loading="lazy" />
                    </div>
                    <div class="card-body">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
                        </div>
                        <h3>Учет кормов</h3>
                        <p>Автоматический учет остатков: программа точно рассчитывает остатки кормов на складе и прогнозирует дату следующей закупки на основе текущего расхода, защищая от внезапного дефицита.</p>
                    </div>
                </div>

                <div class="card fade-up card-with-gif">
                    <div class="card-gif-wrapper">
                        <img src="/main/gif/16-24-58.gif" alt="Визуализация экономии кормов" loading="lazy" />
                    </div>
                    <div class="card-body">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M12 22V12"/><path d="M3.3 7L12 12l8.7-5"/></svg>
                        </div>
                        <h3>Гибкая система уведомлений</h3>
                        <p>Умная система уведомлений — ваш новый помощник, который следит за процессом кормления КРС и мгновенно предупреждает команду фермы о любых сбоях. Она заменяет ручной контроль автоматическим мониторингом.</p>
                    </div>
                </div>

                <div class="card fade-up card-with-gif">
                    <div class="card-gif-wrapper">
                        <img src="/main/gif/16-24-58.gif" alt="Анализ микроклимата" loading="lazy" />
                    </div>
                    <div class="card-body">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
                        </div>
                        <h3>Анализ микроклимата</h3>
                        <p>Интеграция с системами климат-контроля: учитываем температуру и влажность для коррекции потребности в питании.</p>
                    </div>
                </div>

                <div class="card fade-up card-with-gif">
                    <div class="card-gif-wrapper">
                        <img src="/main/gif/16-24-58.gif" alt="Единая платформа" loading="lazy" />
                    </div>
                    <div class="card-body">
                        <div class="card-icon">
                            <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/><path d="M12 7v10"/></svg>
                        </div>
                        <h3>Единая платформа</h3>
                        <p>Все данные о кормлении, здоровье и продуктивности в одном окне – для быстрого принятия решений.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ====== БЕГУЩАЯ СТРОКА ====== -->
    <section class="marquee-section" id="integrations">
        <div class="marquee-track" id="marqueeTrack">
            <span class="logo-item">✦ АГРО-ХОЛДИНГ</span>
            <span class="logo-item">✦ МОЛОЧНЫЙ КОМБИНАТ</span>
            <span class="logo-item">✦ ФЕРМА №1</span>
            <span class="logo-item">✦ ЗЕРНО-ТРЕЙД</span>
            <span class="logo-item">✦ ВЕТЕРИНАРНАЯ СЛУЖБА</span>
            <span class="logo-item">✦ КОРМОВОЙ ЦЕНТР</span>
            <span class="logo-item">✦ ПЛЕМЗАВОД</span>
            <span class="logo-item">✦ АГРО-ИНТЕЛЛЕКТ</span>
            <span class="logo-item">✦ АГРО-ХОЛДИНГ</span>
            <span class="logo-item">✦ МОЛОЧНЫЙ КОМБИНАТ</span>
            <span class="logo-item">✦ ФЕРМА №1</span>
            <span class="logo-item">✦ ЗЕРНО-ТРЕЙД</span>
            <span class="logo-item">✦ ВЕТЕРИНАРНАЯ СЛУЖБА</span>
            <span class="logo-item">✦ КОРМОВОЙ ЦЕНТР</span>
            <span class="logo-item">✦ ПЛЕМЗАВОД</span>
            <span class="logo-item">✦ АГРО-ИНТЕЛЛЕКТ</span>
        </div>
    </section>

    <!-- ====== CTA ====== -->
    <section class="section-padding cta-section" id="cta">
        <div class="container">
            <h2>Внедряйте технологии будущего</h2>
            <p>
                Получите консультацию по настройке системы для вашего хозяйства.
                Первые 2 месяца – полная поддержка и мониторинг.
            </p>
            <a href="#" class="btn btn-primary btn-lg">Оставить заявку</a>
        </div>
    </section>

    <!-- ====== ФУТЕР ====== -->
    <footer class="footer" id="security">
        <div class="container">
            <a href="#" class="footer-logo">
                <img src="/main/img/logo3.png" alt="FeedControl" />
            </a>
            <span class="footer-copy">&copy; 2026 — FeedControl</span>
            <div class="footer-links">
                <a href="#">Политика</a>
                <a href="#">Поддержка</a>
                <a href="#">Контакты</a>
            </div>
        </div>
    </footer>
    <script src="/main/js/main.js" defer></script>

</body>
</html>