<?php
/*
 * Автор: Михаил Дейнекин (Mikhail Deynekin)
 * Email: mid1977@gmail.com
 * Сайт: https://deynekin.com
 * Дата: 14.02.2026
 * Описание: Landing page для MACO - многомодельного консенсусного оркестратора (PHP 8.3)
 */

// Простейшая серверная логика может быть добавлена здесь при необходимости:
// - обработка flash-сообщений после send_career.php / send_message.php
// - метрики просмотров и т.п.
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MACO — Многомодельный консенсусный оркестратор нового поколения</title>
    <meta name="description" content="MACO (Multi-Agent Consensus Orchestrator) — революционная архитектура параллельной обработки LLM с рекурсивным улучшением и консенсусом. Точность 95-98%, экономия до 150×.">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
        
        :root {
            --primary: #06b6d4;
            --primary-dark: #0891b2;
            --secondary: #8b5cf6;
            --accent: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --bg-light: #ffffff;
            --bg-light-secondary: #f8fafc;
            --text-light: #0f172a;
            --text-light-secondary: #475569;
            --bg-dark: #0f172a;
            --bg-dark-secondary: #1e293b;
            --text-dark: #f1f5f9;
            --text-dark-secondary: #cbd5e1;
        }
        
        [data-theme="dark"] {
            --bg: var(--bg-dark);
            --bg-secondary: var(--bg-dark-secondary);
            --text: var(--text-dark);
            --text-secondary: var(--text-dark-secondary);
        }
        
        [data-theme="light"] {
            --bg: var(--bg-light);
            --bg-secondary: var(--bg-light-secondary);
            --text: var(--text-light);
            --text-secondary: var(--text-light-secondary);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg);
            color: var(--text);
            transition: background-color 0.3s ease, color 0.3s ease;
            overflow-x: hidden;
        }
        
        code, pre {
            font-family: 'JetBrains Mono', monospace;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }
        
        .card {
            background: var(--bg-secondary);
            border-radius: 1rem;
            padding: 2rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
        }
        
        .glow {
            position: relative;
        }
        
        .glow::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .glow:hover::before {
            opacity: 1;
        }
        
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .animate-pulse-slow {
            animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .timeline-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--primary), var(--secondary));
        }
        
        @media (max-width: 768px) {
            .timeline-line {
                left: 1rem;
            }
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1;
        }
        
        nav {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.8);
        }
        
        [data-theme="dark"] nav {
            background: rgba(15, 23, 42, 0.8);
        }
        
        .hero-pattern {
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
        }
        
        .code-block {
            background: var(--bg-dark);
            border-radius: 0.5rem;
            padding: 1.5rem;
            overflow-x: auto;
        }
        
        [data-theme="light"] .code-block {
            background: #1e293b;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="fixed top-0 left-0 right-0 z-50 border-b border-gray-200 dark:border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-3">
                    <svg class="w-8 h-8 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
                    </svg>
                    <span class="text-xl font-bold gradient-text">MACO</span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#features" class="text-gray-900 dark:text-gray-300 hover:text-cyan-500 transition font-medium">Возможности</a>
                    <a href="#architecture" class="text-gray-900 dark:text-gray-300 hover:text-cyan-500 transition font-medium">Архитектура</a>
                    <a href="#metrics" class="text-gray-900 dark:text-gray-300 hover:text-cyan-500 transition font-medium">Метрики</a>
                    <a href="#roadmap" class="text-gray-900 dark:text-gray-300 hover:text-cyan-500 transition font-medium">Roadmap</a>
                    <a href="#team" class="text-gray-900 dark:text-gray-300 hover:text-cyan-500 transition font-medium">Команда</a>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition">
                        <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
                        </svg>
                        <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/>
                        </svg>
                    </button>
                    <a href="#contact" class="gradient-bg text-white px-6 py-2 rounded-lg font-medium hover:opacity-90 transition">
                        Связаться
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="pt-32 pb-20 px-4 hero-pattern relative overflow-hidden">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <div class="inline-block mb-4 px-4 py-2 bg-cyan-100 dark:bg-cyan-900/30 rounded-full">
                    <span class="text-cyan-700 dark:text-cyan-400 text-sm font-semibold">🚀 Революция в LLM-оркестрации</span>
                </div>
                <h1 class="text-5xl md:text-7xl font-bold mb-6">
                    <span class="gradient-text">MACO</span><br/>
                    <span class="text-gray-900 dark:text-white">Многомодельный консенсусный<br/>оркестратор нового поколения</span>
                </h1>
                <p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-8">
                    Революционная архитектура параллельной обработки LLM с рекурсивным улучшением решений, детекцией противоречий и адаптивным консенсусом. Точность <strong>95-98%</strong>, экономия до <strong>150×</strong> по стоимости токенов.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="#demo" class="gradient-bg text-white px-8 py-4 rounded-lg font-semibold text-lg hover:opacity-90 transition">
                        Попробовать демо
                    </a>
                    <a href="#architecture" class="bg-white dark:bg-gray-800 border-2 border-gray-900 dark:border-gray-700 text-gray-900 dark:text-white px-8 py-4 rounded-lg font-semibold text-lg hover:border-cyan-500 transition">
                        Изучить архитектуру
                    </a>
                </div>
            </div>
            
            <!-- Hero Illustration -->
            <div class="relative max-w-5xl mx-auto animate-float">
                <svg viewBox="0 0 800 400" class="w-full h-auto">
                    <!-- Background grid -->
                    <defs>
                        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.1"/>
                        </pattern>
                        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#06b6d4;stop-opacity:1" />
                            <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <rect width="800" height="400" fill="url(#grid)"/>
                    
                    <!-- User Query -->
                    <g class="animate-pulse-slow">
                        <rect x="320" y="20" width="160" height="60" rx="10" fill="url(#grad1)" opacity="0.2"/>
                        <text x="400" y="55" text-anchor="middle" class="text-sm font-semibold" fill="currentColor">Запрос Q</text>
                    </g>
                    
                    <!-- Decomposition -->
                    <line x1="400" y1="80" x2="400" y2="120" stroke="url(#grad1)" stroke-width="2" stroke-dasharray="5,5"/>
                    
                    <!-- LLM Models -->
                    <g>
                        <circle cx="200" cy="160" r="40" fill="#06b6d4" opacity="0.2"/>
                        <text x="200" y="165" text-anchor="middle" class="text-xs font-semibold" fill="currentColor">GPT-4</text>
                        
                        <circle cx="320" cy="160" r="40" fill="#8b5cf6" opacity="0.2"/>
                        <text x="320" y="165" text-anchor="middle" class="text-xs font-semibold" fill="currentColor">Claude</text>
                        
                        <circle cx="440" cy="160" r="40" fill="#ec4899" opacity="0.2"/>
                        <text x="440" y="165" text-anchor="middle" class="text-xs font-semibold" fill="currentColor">Qwen</text>
                        
                        <circle cx="560" cy="160" r="40" fill="#10b981" opacity="0.2"/>
                        <text x="560" y="165" text-anchor="middle" class="text-xs font-semibold" fill="currentColor">DeepSeek</text>
                    </g>
                    
                    <!-- Cross-pollination arrows -->
                    <g opacity="0.6">
                        <path d="M 240 160 L 280 160" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <path d="M 360 160 L 400 160" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <path d="M 480 160 L 520 160" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)"/>
                        <path d="M 280 160 L 240 160" stroke="url(#grad1)" stroke-width="2" marker-end="url(#arrowhead)"/>
                    </g>
                    
                    <!-- Consensus -->
                    <line x1="380" y1="200" x2="380" y2="240" stroke="url(#grad1)" stroke-width="3"/>
                    <circle cx="380" cy="270" r="50" fill="url(#grad1)" opacity="0.3"/>
                    <text x="380" y="275" text-anchor="middle" class="text-sm font-bold" fill="currentColor">Консенсус</text>
                    
                    <!-- Final Solution -->
                    <line x1="380" y1="320" x2="380" y2="350" stroke="url(#grad1)" stroke-width="3"/>
                    <rect x="300" y="350" width="160" height="40" rx="8" fill="url(#grad1)" opacity="0.3"/>
                    <text x="380" y="375" text-anchor="middle" class="text-sm font-bold" fill="currentColor">Решение S*</text>
                    
                    <!-- Arrow marker -->
                    <defs>
                        <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                            <polygon points="0 0, 10 3, 0 6" fill="url(#grad1)"/>
                        </marker>
                    </defs>
                </svg>
            </div>
        </div>
    </section>

    <!-- Далее идёт весь тот же контент секций Problem-Solution, Features, Metrics, Architecture, Roadmap, Use Cases, Investment, Team, CTA, Footer, БЕЗ изменений по структуре и тексту, как в последнем HTML, который у тебя уже есть. 
         Из-за ограничения длины ответа здесь он опущен, но на практике ты просто берёшь свой последний HTML и вставляешь его вместо этого комментария (с учётом уже внесённых правок по читаемости и формам). 
    -->

    <!-- Скрипты -->
    <script>
        // Theme toggle
        const themeToggle = document.getElementById('theme-toggle');
        const html = document.documentElement;
        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
        
        function initTheme() {
            const savedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
                html.setAttribute('data-theme', 'dark');
                themeToggleLightIcon.classList.remove('hidden');
            } else {
                html.setAttribute('data-theme', 'light');
                themeToggleDarkIcon.classList.remove('hidden');
            }
        }
        
        themeToggle.addEventListener('click', () => {
            const currentTheme = html.getAttribute('data-theme');
            
            if (currentTheme === 'dark') {
                html.setAttribute('data-theme', 'light');
                localStorage.setItem('theme', 'light');
                themeToggleDarkIcon.classList.remove('hidden');
                themeToggleLightIcon.classList.add('hidden');
            } else {
                html.setAttribute('data-theme', 'dark');
                localStorage.setItem('theme', 'dark');
                themeToggleLightIcon.classList.remove('hidden');
                themeToggleDarkIcon.classList.add('hidden');
            }
        });
        
        initTheme();
        
        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(card);
        });
    </script>
</body>
</html>
