
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO Genius Pro - Enterprise SEO Intelligence Platform</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --seo-navy: #0F1629;
            --algorithm-blue: #1E3A8A;
            --intelligence-cyan: #0891B2;
            --ranking-green: #059669;
            --optimization-gold: #D97706;
            --critical-red: #DC2626;
            --neural-purple: #7C2D12;
            --platinum: #F8FAFC;
            --carbon: #1E293B;
            --titanium: #475569;
            --steel: #64748B;
            --glass: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.12);
        }

        /* High-Contrast Light Mode Variables */
        body.light-mode {
            --seo-navy: #F1F5F9;
            --platinum: #0F172A;
            --glass: rgba(255, 255, 255, 0.9);
            --glass-border: rgba(0, 0, 0, 0.15);
            --steel: #334155;
            --titanium: #475569;
            --carbon: #E2E8F0;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--seo-navy) 0%, #0C1220 50%, #1E293B 100%);
            color: var(--platinum);
            min-height: 100vh;
            transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s ease;
            overflow-x: hidden;
        }

        body.light-mode {
            background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
        }

        .algorithmic-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: 
                radial-gradient(circle at 25% 25%, rgba(30, 58, 138, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(124, 45, 18, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(8, 145, 178, 0.06) 0%, transparent 50%);
            animation: algorithmicPulse 8s ease-in-out infinite alternate;
        }

        body.light-mode .algorithmic-background {
            background: 
                radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
        }

        @keyframes algorithmicPulse {
            0% { opacity: 0.6; }
            100% { opacity: 0.9; }
        }

        .glass-card {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(20px);
            transition: all 0.4s ease;
        }

        body.light-mode .glass-card {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .score-text {
            background: linear-gradient(135deg, var(--intelligence-cyan), var(--neural-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        @keyframes algorithmSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .ring-spin {
            animation: algorithmSpin 2s linear infinite;
        }

        /* Enterprise-Grade Theme Toggle Switch */
        .theme-switch-container {
            width: 72px;
            height: 36px;
            background: rgba(15, 23, 42, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            position: relative;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            padding: 0 6px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        }

        body.light-mode .theme-switch-container {
            background: rgba(226, 232, 240, 0.8);
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }

        .theme-switch-knob {
            width: 26px;
            height: 26px;
            background: linear-gradient(135deg, #0ea5e9, #6366f1);
            border-radius: 50%;
            position: absolute;
            left: 5px;
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            z-index: 2;
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        }

        body.light-mode .theme-switch-knob {
            transform: translateX(34px);
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
        }

        .theme-icon-slot {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            z-index: 1;
            user-select: none;
            transition: opacity 0.3s ease;
        }

        body.light-mode .theme-icon-slot.moon { opacity: 0.4; }
        body:not(.light-mode) .theme-icon-slot.sun { opacity: 0.4; }

        /* PDF Export Styling */
        @media print {
            body { background: white !important; color: black !important; }
            .no-print, header, footer, button, .theme-switch-container { display: none !important; }
            .container { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
            .dark { color-scheme: light !important; }
            .dark\:bg-white\/5, .bg-white { background: white !important; border-color: #eee !important; box-shadow: none !important; }
            .dark\:text-white, .text-slate-900 { color: black !important; }
            .dark\:text-slate-300, .text-slate-800, .text-slate-700 { color: #333 !important; }
            .dark\:bg-blue-900\/10, .bg-slate-50, .bg-blue-50 { background: #f9f9f9 !important; border: 1px solid #ddd !important; }
            .dark\:bg-slate-900\/50, .bg-slate-50 { background: white !important; }
            .break-inside-avoid { break-inside: avoid; }
            section { border-color: #ddd !important; margin-bottom: 2rem !important; }
            .text-emerald-400, .text-cyan-400, .text-purple-400, .bg-gradient-to-r { 
                background: none !important; 
                -webkit-background-clip: initial !important; 
                -webkit-text-fill-color: initial !important; 
                color: #2563eb !important; 
            }
        }
    </style>

<link rel="stylesheet" href="/index.css">
    <script type="importmap">
    {
      "imports": {
        "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
        "@google/genai": "https://esm.sh/@google/genai@^1.34.0",
        "react": "https://esm.sh/react@^19.2.3",
        "react/": "https://esm.sh/react@^19.2.3/"
      }
    }
    </script>
  <script type="module" crossorigin src="/assets/index-DRAiszp_.js"></script>
</head>
<body>
    <div class="algorithmic-background"></div>
    <div id="root"></div>
</body>
</html>
