.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Korus Academy | Autoridade Digital</title>
    
    <!-- Google Fonts: DM Sans -->
    <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=DM+Sans:ital,opsz,wght@0,100..1000;1,100..1000&display=swap" rel="stylesheet">
    
    <!-- Frameworks (CDN) -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
    
    <!-- Lucide Icons Core -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"DM Sans"', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            dark: '#39228C',
                            med: '#6744AA',
                            night: '#0C0819',
                        }
                    },
                    boxShadow: {
                        'premium': '0 25px 50px -12px rgba(57, 34, 140, 0.15)',
                    }
                }
            }
        }
    </script>
    <style>
        body { margin: 0; padding: 0; background-color: #FFFFFF; overflow-x: hidden; }
        .selection-purple::selection { background: #39228C; color: white; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #39228C; border-radius: 10px; }
        .animate-fade { animation: fadeIn 0.7s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        .glass-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); }
    </style>
</head>
<body class="selection-purple">
    <div id="korus-app"></div>

    <script type="text/babel">
        // Componente de Ícone para compatibilidade total com WordPress
        const KorusIcon = ({ name, size = 24, className = "" }) => {
            React.useEffect(() => {
                if (window.lucide) window.lucide.createIcons();
            }, [name]);
            return <i data-lucide={name} className={className} style={{ width: size, height: size, display: 'inline-block' }}></i>;
        };

        const Logo = ({ size = 42, light = false, onClick }) => (
            <div className="flex items-center gap-3 cursor-pointer group" onClick={onClick}>
                <div className="rounded-xl overflow-hidden bg-black shadow-lg group-hover:scale-105 transition-transform" style={{ width: size, height: size }}>
                    <img src="icone_mn_branco_fundo_preto (1).png" alt="Korus" className="w-full h-full object-cover" />
                </div>
                <span className={`text-2xl font-black tracking-tighter ${light ? 'text-white' : 'text-black'}`}>KORUS</span>
            </div>
        );

        const SectionTitle = ({ subtitle, title, centered = false, light = false }) => (
            <div className={`mb-12 ${centered ? 'text-center' : ''}`}>
                <span className={`text-[10px] font-black uppercase tracking-[0.4em] mb-4 block ${light ? 'text-white/50' : 'text-brand-med'}`}>
                    {subtitle}
                </span>
                <h2 className={`text-4xl md:text-6xl font-black leading-tight tracking-tighter ${light ? 'text-white' : 'text-black'}`}>
                    {title}
                </h2>
            </div>
        );

        const App = () => {
            const [activePage, setActivePage] = React.useState('home');
            const [scrolled, setScrolled] = React.useState(false);
            const [isMenuOpen, setIsMenuOpen] = React.useState(false);

            React.useEffect(() => {
                const handleScroll = () => setScrolled(window.scrollY > 50);
                window.addEventListener('scroll', handleScroll);
                if (window.lucide) window.lucide.createIcons();
                return () => window.removeEventListener('scroll', handleScroll);
            }, []);

            React.useEffect(() => {
                window.scrollTo(0, 0);
                setIsMenuOpen(false);
                setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 100);
            }, [activePage]);

            // --- PÁGINA: HOME ---
            const Home = () => (
                <div className="animate-fade">
                    <section className="relative min-h-screen flex items-center pt-20 overflow-hidden bg-brand-night">
                        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center relative z-10">
                            <div className="space-y-8">
                                <div className="inline-flex items-center gap-3 py-2 px-4 rounded-full bg-white/5 border border-white/10 text-[10px] font-black tracking-[0.2em] uppercase text-white/80">
                                    <span className="w-2 h-2 rounded-full bg-brand-med animate-pulse"></span>
                                    Marketing Executivo • Estratégia 2026
                                </div>
                                <h1 className="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter text-white">
                                    SOBERANIA <br /> <span className="text-brand-med">DIGITAL</span> <br /> ABSOLUTA.
                                </h1>
                                <p className="text-xl text-gray-400 max-w-lg leading-relaxed font-medium">
                                    A Korus é o hub estratégico para marcas que buscam o topo. Unimos design de elite, tráfego preditivo e soluções de inteligência.
                                </p>
                                <div className="flex flex-col sm:flex-row gap-6 pt-4">
                                    <button onClick={() => setActivePage('contact')} className="px-10 py-5 bg-brand-dark text-white rounded-xl font-bold uppercase tracking-widest hover:scale-105 transition-all flex items-center justify-center gap-3 shadow-premium">
                                        Fale com a Korus <KorusIcon name="arrow-right" size={20} />
                                    </button>
                                    <button onClick={() => setActivePage('services')} className="text-white/60 font-bold uppercase tracking-widest text-xs hover:text-white transition-all py-5 flex items-center justify-center gap-2">
                                        Explorar Ecossistema <KorusIcon name="chevron-right" size={16} />
                                    </button>
                                </div>
                            </div>
                            <div className="relative hidden lg:flex justify-center">
                                <div className="w-[480px] h-[620px] bg-gradient-to-tr from-[#1a134d] to-[#0C0819] rounded-[60px] shadow-3xl border border-white/5 flex flex-col items-center justify-center p-12 relative overflow-hidden">
                                    <div className="absolute inset-0 opacity-5 flex items-center justify-center scale-150">
                                        <img src="icone_mn_branco_fundo_preto (1).png" className="w-full grayscale opacity-20" />
                                    </div>
                                    <img src="icone_mn_branco_fundo_preto (1).png" className="w-44 mb-10 shadow-2xl z-10" />
                                    <h3 className="text-white text-5xl font-black tracking-tighter z-10">KORUS</h3>
                                    <p className="text-white/30 text-[10px] font-bold uppercase tracking-[0.4em] mt-4 z-10">Executive Standard</p>
                                </div>
                            </div>
                        </div>
                        <div className="absolute top-0 right-0 w-[800px] h-[800px] rounded-full blur-[150px] opacity-20 -z-0 bg-brand-dark"></div>
                    </section>
                </div>
            );

            // --- PÁGINA: SERVIÇOS ---
            const Services = () => (
                <div className="pt-40 pb-32 animate-fade bg-gray-50 min-h-screen">
                    <div className="max-w-7xl mx-auto px-6">
                        <SectionTitle subtitle="Diferenciais" title="Engenharia de Resultados." centered />
                        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                            {[
                                { icon: "target", title: "Tráfego Pago", desc: "Gestão inteligente de lances focada em escala agressiva e ROI preditivo." },
                                { icon: "users", title: "Social Media (GRS)", desc: "Posicionamento estratégico para marcas que buscam autoridade absoluta." },
                                { icon: "layout", title: "Design Premium", desc: "Identidades visuais de alto luxo que comunicam confiança imediata." },
                                { icon: "camera", title: "Produção de Conteúdo", desc: "Audiovisual cinematográfico para marcas de alto impacto emocional." },
                                { icon: "cpu", title: "Soluções de IA", desc: "Implementação de agentes inteligentes para escala operacional." },
                                { icon: "trophy", title: "Projetos Especiais", desc: "Marketing de alta performance para atletas e eventos de elite." }
                            ].map((s, i) => (
                                <div key={i} className="p-12 bg-white rounded-[40px] shadow-sm hover:shadow-premium transition-all group hover:-translate-y-2 duration-500 border border-gray-100">
                                    <div className="w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-brand-dark group-hover:text-white transition-all">
                                        <KorusIcon name={s.icon} size={30} />
                                    </div>
                                    <h4 className="text-2xl font-black mb-4 tracking-tighter">{s.title}</h4>
                                    <p className="text-gray-500 font-medium leading-relaxed">{s.desc}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            );

            // --- PÁGINA: ACADEMY (EBOOKS) ---
            const Academy = () => (
                <div className="pt-40 pb-32 animate-fade bg-white min-h-screen">
                    <div className="max-w-7xl mx-auto px-6">
                        <SectionHeader subtitle="Academy" title="Inteligência para 2026." />
                        <div className="grid md:grid-cols-2 gap-10">
                            {[
                                { t: "Marketing Digital 2026", d: "Domine a atenção em um mercado saturado com estratégias de soberania." },
                                { t: "Dropshipping High-Ticket", d: "Aprenda a vender produtos de alto valor com logística e branding eficiente." }
                            ].map((e, i) => (
                                <div key={i} className="bg-gray-50 p-12 rounded-[50px] flex flex-col md:flex-row gap-10 items-center hover:bg-white hover:shadow-premium transition-all border border-transparent hover:border-brand-med/20">
                                    <div className="w-32 h-44 bg-brand-night rounded-2xl flex flex-col items-center justify-center p-4 shadow-xl shrink-0">
                                        <div className="w-12 h-12 bg-white rounded-lg flex items-center justify-center">
                                            <img src="icone_mn_branco_fundo_preto (1).png" className="w-8" />
                                        </div>
                                        <p className="text-[8px] text-white/40 font-black uppercase tracking-widest mt-4">Academy</p>
                                    </div>
                                    <div className="flex-1 text-center md:text-left">
                                        <h3 className="text-3xl font-black mb-4 tracking-tighter">{e.t}</h3>
                                        <p className="text-gray-600 mb-8 font-medium">{e.d}</p>
                                        <button className="text-brand-dark font-black text-xs uppercase tracking-widest flex items-center justify-center md:justify-start gap-2 hover:gap-4 transition-all">
                                            Ver Material <KorusIcon name="chevron-right" size={16} />
                                        </button>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            );

            // --- PÁGINA: CONTATO ---
            const Contact = () => (
                <div className="pt-40 pb-32 animate-fade bg-white min-h-screen">
                    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-20">
                        <div>
                            <SectionHeader subtitle="Conexão" title="Sua Ascensão Começa Aqui." />
                            <p className="text-xl text-gray-500 mb-12 font-medium leading-relaxed">
                                Sua marca merece a precisão executiva da Korus. Agende uma consultoria agora e domine o mercado.
                            </p>
                            <div className="space-y-8">
                                <div className="p-10 bg-gray-50 rounded-[40px] flex items-center gap-8 group hover:bg-brand-dark hover:text-white transition-all cursor-pointer">
                                    <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center shadow-sm text-black group-hover:bg-white group-hover:text-brand-dark">
                                        <KorusIcon name="mail" size={28} />
                                    </div>
                                    <div>
                                        <p className="text-[10px] font-black uppercase tracking-widest opacity-50 mb-1">E-mail Corporativo</p>
                                        <p className="text-2xl font-black tracking-tight">contato@agenciakorus.com</p>
                                    </div>
                                </div>
                                <div className="p-10 bg-gray-50 rounded-[40px] flex items-center gap-8 group hover:bg-[#25D366] hover:text-white transition-all cursor-pointer">
                                    <div className="w-16 h-16 bg-white rounded-2xl flex items-center justify-center shadow-sm text-[#25D366] group-hover:bg-white group-hover:text-[#25D366]">
                                        <KorusIcon name="message-square" size={28} />
                                    </div>
                                    <div>
                                        <p className="text-[10px] font-black uppercase tracking-widest opacity-50 mb-1">WhatsApp</p>
                                        <p className="text-2xl font-black tracking-tight">+55 (61) 98765-4321</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="bg-white p-12 rounded-[60px] shadow-3xl border border-gray-100 self-start">
                            <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
                                <input type="text" placeholder="Nome Completo" className="w-full p-5 bg-gray-50 rounded-2xl border-none outline-none focus:ring-2 focus:ring-brand-dark" />
                                <input type="email" placeholder="E-mail Corporativo" className="w-full p-5 bg-gray-50 rounded-2xl border-none outline-none focus:ring-2 focus:ring-brand-dark" />
                                <textarea placeholder="Quais as suas metas para 2026?" rows="4" className="w-full p-5 bg-gray-50 rounded-2xl border-none outline-none focus:ring-2 focus:ring-brand-dark"></textarea>
                                <button className="w-full py-6 bg-brand-dark text-white rounded-2xl font-black uppercase tracking-widest shadow-xl hover:scale-[1.02] transition-all">Enviar Mensagem</button>
                            </form>
                        </div>
                    </div>
                </div>
            );

            // --- LAYOUT PRINCIPAL ---
            return (
                <div className="min-h-screen font-sans">
                    <nav className={`fixed top-0 w-full z-[100] transition-all duration-500 ${scrolled || activePage !== 'home' ? 'glass-nav py-4' : 'bg-transparent py-8'}`}>
                        <div className="max-w-7xl mx-auto px-6 flex justify-between items-center">
                            <Logo light={!scrolled && activePage === 'home'} setActivePage={setActivePage} />
                            <div className="hidden lg:flex items-center space-x-10 text-[10px] font-black uppercase tracking-[0.25em]">
                                {['home', 'services', 'academy', 'contact'].map(p => (
                                    <button 
                                        key={p} 
                                        onClick={() => setActivePage(p)} 
                                        className={`transition-all hover:text-brand-med relative ${activePage === p ? 'text-brand-dark font-black border-b-2 border-brand-dark pb-1' : (scrolled || activePage !== 'home' ? 'text-gray-400 hover:text-black font-bold' : 'text-white/70 hover:text-white font-bold')}`}
                                    >
                                        {p === 'home' ? 'Início' : p === 'services' ? 'Serviços' : p === 'academy' ? 'Academy' : 'Contato'}
                                    </button>
                                ))}
                            </div>
                            <button onClick={() => setActivePage('contact')} className="hidden lg:block px-6 py-3 bg-brand-dark text-white rounded-xl font-bold uppercase tracking-widest text-[10px] shadow-lg hover:scale-105 transition-all">Falar com a Korus</button>
                            <button className="lg:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
                                {isMenuOpen ? <KorusIcon name="x" size={28} /> : <KorusIcon name="menu" className={scrolled || activePage !== 'home' ? 'text-black' : 'text-white'} size={28} />}
                            </button>
                        </div>
                        {isMenuOpen && (
                            <div className="lg:hidden absolute top-full left-0 w-full bg-white border-t border-gray-100 p-8 space-y-6 shadow-2xl animate-fade">
                                {['home', 'services', 'academy', 'contact'].map(p => (
                                    <button key={p} onClick={() => setActivePage(p)} className="block w-full text-left text-sm font-black uppercase tracking-widest text-gray-500 hover:text-brand-dark">
                                        {p === 'home' ? 'Início' : p.toUpperCase()}
                                    </button>
                                ))}
                            </div>
                        )}
                    </nav>

                    <main>
                        {activePage === 'home' && <Home />}
                        {activePage === 'services' && <Services />}
                        {activePage === 'academy' && <Academy />}
                        {activePage === 'contact' && <Contact />}
                    </main>

                    <footer className="bg-brand-night text-white pt-32 pb-12 border-t border-white/5">
                        <div className="max-w-7xl mx-auto px-6 text-center lg:text-left grid lg:grid-cols-4 gap-16">
                            <div className="col-span-2 space-y-8 flex flex-col items-center lg:items-start">
                                <Logo light size={45} setActivePage={setActivePage} />
                                <p className="text-gray-400 max-w-sm font-medium leading-relaxed">
                                    Elevando o padrão do marketing executivo. Inteligência, design e soberania digital integrados.
                                </p>
                            </div>
                            <div>
                                <h5 className="text-[10px] font-black uppercase tracking-[0.3em] mb-8 text-gray-500">Legal</h5>
                                <p className="text-xs text-gray-600 font-bold leading-relaxed">© 2026 Korus Academy. Todos os direitos reservados.</p>
                            </div>
                        </div>
                    </footer>

                    {/* Botão flutuante WhatsApp */}
                    <div className="fixed bottom-10 right-10 z-[200]">
                        <a href="https://wa.me/5561987654321" target="_blank" className="w-16 h-16 bg-[#25D366] text-white rounded-2xl flex items-center justify-center shadow-premium hover:scale-110 transition-all rotate-3 hover:rotate-0">
                            <KorusIcon name="message-square" size={30} />
                        </a>
                    </div>
                </div>
            );
        };

        const root = ReactDOM.createRoot(document.getElementById('korus-app'));
        root.render(<App />);
    </script>
</body>
</html>/* End custom CSS */