<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zion Gestor - O Sistema Parceiro da Escola</title>
    <link rel="apple-touch-icon" href="site_publico/zm-logo.png">
    <link rel="icon" type="image/png" href="site_publico/zm-logo.png">
    <link rel="shortcut icon" href="site_publico/zm-logo.png">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }
        
        .hero-pattern {
            background-color: #f8fafc;
            background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
            background-size: 32px 32px;
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
        
        .feature-card { transition: all 0.3s ease; }
        .feature-card:hover { border-color: #6366f1; transform: translateY(-3px); }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 overflow-x-hidden">

    <!-- NAVBAR -->
    <nav class="fixed w-full z-50 bg-white/95 backdrop-blur-md border-b border-slate-100">
        <div class="max-w-[90rem] mx-auto px-6 h-20 flex items-center justify-between">
            <div class="flex items-center gap-3 cursor-pointer" onclick="window.location.href='index.html'">
                <img src="site_publico/zm-logo.png" alt="Logo ZM" class="h-10 w-auto object-contain rounded-md">
                <div class="flex flex-col leading-tight">
                    <span class="text-lg font-black tracking-tight text-slate-800">ZION</span>
                    <span class="text-[10px] font-bold text-indigo-600 uppercase tracking-widest">Gestor Escolar</span>
                </div>
            </div>

            <!-- MENU DESKTOP -->
            <div class="hidden lg:flex items-center gap-6 text-sm font-bold text-slate-500">
                <a href="#dores" class="hover:text-indigo-600 transition">Por que o Zion?</a>
                <div class="h-5 w-px bg-slate-200"></div> <!-- Divisor -->
                <a href="site_publico/financeiro_landing.html" class="hover:text-emerald-600 transition flex items-center gap-1"><i data-lucide="pie-chart" class="w-4 h-4"></i> Financeiro</a>
                <a href="site_publico/cobranca.html" class="hover:text-cyan-600 transition flex items-center gap-1"><i data-lucide="phone-call" class="w-4 h-4"></i> Cobrança</a>
                <a href="site_publico/loja_landing.html" class="hover:text-pink-600 transition flex items-center gap-1"><i data-lucide="shopping-bag" class="w-4 h-4"></i> Loja</a>
                <a href="site_publico/rh_page.html" class="text-indigo-600 hover:text-indigo-800 transition flex items-center gap-1"><i data-lucide="users" class="w-4 h-4"></i> Zion RH</a>
            </div>

            <div class="flex items-center gap-3">
                <a href="https://wa.me/5584988439021" target="_blank" class="hidden lg:flex text-slate-500 hover:text-indigo-600 font-bold text-xs uppercase tracking-wide transition items-center gap-2 mr-2">
                    <i data-lucide="message-circle" class="w-4 h-4"></i> Consultor
                </a>

                <a href="site_publico/hub.html" class="hidden md:flex bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-lg font-bold text-xs uppercase tracking-wide transition shadow-lg shadow-indigo-200 items-center gap-2 border border-indigo-500">
                    <i data-lucide="log-in" class="w-4 h-4"></i> Acesso ao Sistema
                </a>

                <div class="lg:hidden">
                    <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')" class="text-slate-600 p-2 focus:outline-none">
                        <i data-lucide="menu" class="w-6 h-6"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- MENU MOBILE -->
        <div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-slate-100 p-4 absolute w-full shadow-2xl flex flex-col gap-4 top-20 left-0 z-40">
            <a href="site_publico/hub.html" class="bg-indigo-600 text-white text-center py-3 rounded-xl font-bold uppercase text-xs flex justify-center items-center gap-2">
                <i data-lucide="log-in" class="w-4 h-4"></i> Acesso ao Sistema
            </a>
            <div class="h-px bg-slate-100 my-1"></div>
            <a href="#dores" class="font-bold text-slate-600" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Por que o Zion?</a>
            <a href="#ecossistema" class="font-bold text-slate-600" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Os 8 Pilares</a>
            
            <div class="h-px bg-slate-100 my-1"></div>
            <span class="text-[10px] uppercase font-black tracking-widest text-slate-400">Conheça os Módulos</span>
            <div class="grid grid-cols-2 gap-3">
                <a href="site_publico/financeiro_landing.html" class="flex items-center gap-2 font-bold text-sm text-emerald-600 bg-emerald-50 p-3 rounded-lg"><i data-lucide="pie-chart" class="w-4 h-4"></i> Financeiro</a>
                <a href="site_publico/cobranca.html" class="flex items-center gap-2 font-bold text-sm text-cyan-600 bg-cyan-50 p-3 rounded-lg"><i data-lucide="phone-call" class="w-4 h-4"></i> Cobrança</a>
                <a href="site_publico/loja_landing.html" class="flex items-center gap-2 font-bold text-sm text-pink-600 bg-pink-50 p-3 rounded-lg"><i data-lucide="shopping-bag" class="w-4 h-4"></i> Zion Store</a>
                <a href="site_publico/rh_page.html" class="flex items-center gap-2 font-bold text-sm text-indigo-600 bg-indigo-50 p-3 rounded-lg"><i data-lucide="users" class="w-4 h-4"></i> Zion RH</a>
            </div>
        </div>
    </nav>

    <!-- HERO -->
    <header class="pt-32 pb-20 hero-pattern relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
            <div class="relative z-10">
                <div class="inline-flex items-center gap-2 bg-indigo-50 border border-indigo-100 px-3 py-1 rounded-full mb-6">
                    <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
                    <span class="text-xs font-bold text-indigo-800 uppercase tracking-wide">Modelo de Parceria</span>
                </div>
                
                <h1 class="text-4xl lg:text-5xl font-black leading-[1.1] mb-6 text-slate-900">
                    O sistema que automatiza o caos para você <br>
                    <span class="text-indigo-600">focar em educar.</span>
                </h1>
                
                <p class="text-lg text-slate-500 mb-8 leading-relaxed max-w-lg">
                    Entendemos a mente do dono de escola. Você quer ver o dinheiro entrar e as pessoas organizadas, sem planilhas soltas. <strong>Nós só ganhamos quando sua escola recebe.</strong>
                </p>

                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="https://wa.me/5584988439021?text=Quero%20conhecer%20o%20modelo%20de%20parceria%20Zion" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-xl font-bold text-center transition shadow-lg shadow-indigo-200 flex items-center justify-center gap-2">
                        Quero Conhecer o Zion
                        <i data-lucide="arrow-right" class="w-5 h-5"></i>
                    </a>
                    <a href="#ecossistema" class="bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 px-8 py-4 rounded-xl font-bold text-center transition flex items-center justify-center gap-2">
                        Ver os 8 Pilares
                        <i data-lucide="layers" class="w-5 h-5 text-indigo-500"></i>
                    </a>
                </div>
            </div>

            <div class="relative hidden lg:block">
                <div class="absolute -top-20 -right-20 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
                <div class="absolute -bottom-20 -left-20 w-96 h-96 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"></div>
                <div class="relative bg-white rounded-2xl shadow-2xl border border-slate-200 p-2 transform rotate-1 hover:rotate-0 transition duration-700 overflow-hidden">
                    <div class="rounded-xl overflow-hidden aspect-video relative group flex flex-col items-center justify-center bg-black">
                        <iframe class="w-full h-full absolute inset-0 object-cover" src="https://www.youtube.com/embed/qe2IR2wvFCs?autoplay=1&mute=1&controls=0&loop=1&playlist=qe2IR2wvFCs&showinfo=0&rel=0" title="Zion System Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- SECTION: AS DORES vs SOLUÇÕES ZION -->
    <section id="dores" class="py-20 bg-white border-y border-slate-200">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-16 max-w-3xl mx-auto">
                <span class="text-red-500 font-bold tracking-widest uppercase text-xs">O Fim das Dores Crônicas</span>
                <h2 class="text-3xl md:text-4xl font-black text-slate-900 mt-2 mb-4">Você é um educador, não um cobrador.</h2>
                <p class="text-slate-600 text-lg">Sistemas engessados não resolvem a realidade de pequenas e médias escolas. O Zion ataca direto na ferida dos problemas que tiram o sono da direção.</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Dor 1 -->
                <div class="bg-slate-50 border border-slate-200 p-6 rounded-2xl flex flex-col justify-between feature-card">
                    <div>
                        <div class="flex items-start gap-3 mb-4">
                            <div class="bg-red-100 p-2 rounded-lg text-red-600 shrink-0"><i data-lucide="wallet" class="w-5 h-5"></i></div>
                            <div>
                                <h3 class="font-bold text-slate-900">Inadimplência Alta</h3>
                                <p class="text-sm text-slate-500 mt-1">A vergonha de cobrar o pai na porta da escola corrói o seu lucro e gera desgaste diário.</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mt-4">
                        <div class="flex items-center gap-2 text-emerald-700 font-bold text-sm mb-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i> A Solução Zion
                        </div>
                        <p class="text-xs text-emerald-900 leading-relaxed">Régua de cobrança automática via WhatsApp, Serasa integrado e a <b>Secretaria Virtual</b> assumindo o papel de "vilão financeiro".</p>
                    </div>
                </div>

                <!-- Dor 2 -->
                <div class="bg-slate-50 border border-slate-200 p-6 rounded-2xl flex flex-col justify-between feature-card">
                    <div>
                        <div class="flex items-start gap-3 mb-4">
                            <div class="bg-red-100 p-2 rounded-lg text-red-600 shrink-0"><i data-lucide="trending-down" class="w-5 h-5"></i></div>
                            <div>
                                <h3 class="font-bold text-slate-900">Pagar Sistema no Vermelho</h3>
                                <p class="text-sm text-slate-500 mt-1">Sistemas fixos cobram caro. Se os pais não pagam a mensalidade, a escola tira do próprio bolso.</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mt-4">
                        <div class="flex items-center gap-2 text-emerald-700 font-bold text-sm mb-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i> A Solução Zion
                        </div>
                        <p class="text-xs text-emerald-900 leading-relaxed"><b>Sucesso Compartilhado.</b> Risco zero. O Zion só ganha uma pequena taxa sobre o dinheiro que efetivamente entra no caixa.</p>
                    </div>
                </div>

                <!-- Dor 3 -->
                <div class="bg-slate-50 border border-slate-200 p-6 rounded-2xl flex flex-col justify-between feature-card">
                    <div>
                        <div class="flex items-start gap-3 mb-4">
                            <div class="bg-red-100 p-2 rounded-lg text-red-600 shrink-0"><i data-lucide="scale" class="w-5 h-5"></i></div>
                            <div>
                                <h3 class="font-bold text-slate-900">Processos Trabalhistas</h3>
                                <p class="text-sm text-slate-500 mt-1">Folha de ponto de papel, biometria cara e horas extras não autorizadas pagos indevidamente.</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mt-4">
                        <div class="flex items-center gap-2 text-emerald-700 font-bold text-sm mb-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i> A Solução Zion
                        </div>
                        <p class="text-xs text-emerald-900 leading-relaxed"><b>Ponto Híbrido Antifraude.</b> Marcação por celular exigindo Geolocalização e Selfie. Bloqueio de horas extras indevidas.</p>
                    </div>
                </div>

                <!-- Dor 4 -->
                <div class="bg-slate-50 border border-slate-200 p-6 rounded-2xl flex flex-col justify-between feature-card">
                    <div>
                        <div class="flex items-start gap-3 mb-4">
                            <div class="bg-red-100 p-2 rounded-lg text-red-600 shrink-0"><i data-lucide="coffee" class="w-5 h-5"></i></div>
                            <div>
                                <h3 class="font-bold text-slate-900">Fuga de Dinheiro na Cantina</h3>
                                <p class="text-sm text-slate-500 mt-1">Criança com dinheiro vivo gera filas, bullying, perdas e consumo de lanches inadequados.</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mt-4">
                        <div class="flex items-center gap-2 text-emerald-700 font-bold text-sm mb-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i> A Solução Zion
                        </div>
                        <p class="text-xs text-emerald-900 leading-relaxed"><b>Zion Store.</b> O pai compra no App de casa, paga no PIX (com split automático) e o aluno só retira o lanche no intervalo.</p>
                    </div>
                </div>

                <!-- Dor 5 -->
                <div class="bg-slate-50 border border-slate-200 p-6 rounded-2xl flex flex-col justify-between feature-card">
                    <div>
                        <div class="flex items-start gap-3 mb-4">
                            <div class="bg-red-100 p-2 rounded-lg text-red-600 shrink-0"><i data-lucide="file-x" class="w-5 h-5"></i></div>
                            <div>
                                <h3 class="font-bold text-slate-900">Papelada na Matrícula</h3>
                                <p class="text-sm text-slate-500 mt-1">Filas em janeiro, contratos de papel que se perdem e pais que demoram meses para assinar.</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mt-4">
                        <div class="flex items-center gap-2 text-emerald-700 font-bold text-sm mb-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i> A Solução Zion
                        </div>
                        <p class="text-xs text-emerald-900 leading-relaxed"><b>Fluxo 100% Digital.</b> O sistema gera o carnê Asaas e envia o contrato para o pai assinar na tela do celular (com validade jurídica).</p>
                    </div>
                </div>

                <!-- Dor 6 -->
                <div class="bg-slate-50 border border-slate-200 p-6 rounded-2xl flex flex-col justify-between feature-card">
                    <div>
                        <div class="flex items-start gap-3 mb-4">
                            <div class="bg-red-100 p-2 rounded-lg text-red-600 shrink-0"><i data-lucide="ticket" class="w-5 h-5"></i></div>
                            <div>
                                <h3 class="font-bold text-slate-900">Falta de Receita Extra</h3>
                                <p class="text-sm text-slate-500 mt-1">A mensalidade mal cobre os custos. A escola tenta fazer eventos ou rifas, mas o controle de caixa vira um caos.</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-emerald-50 rounded-xl p-4 border border-emerald-100 mt-4">
                        <div class="flex items-center gap-2 text-emerald-700 font-bold text-sm mb-2">
                            <i data-lucide="check-circle-2" class="w-4 h-4"></i> A Solução Zion
                        </div>
                        <p class="text-xs text-emerald-900 leading-relaxed"><b>Escola Ativa.</b> Módulo para rifas digitais (com sorteio animado), eventos e matrículas extras. Transforma a escola numa máquina de caixa extra.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION: LÓGICA DE MERCADO -->
    <section class="py-20 bg-indigo-900 text-white relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
        <div class="max-w-5xl mx-auto px-6 text-center relative z-10">
            <span class="text-emerald-400 font-bold tracking-widest uppercase text-xs">Nova Lógica de Mercado</span>
            <h2 class="text-4xl md:text-5xl font-black mt-4 mb-8">
                “Se a escola não recebe,<br>o Zion não cobra.”
            </h2>
            <p class="text-indigo-200 text-lg max-w-2xl mx-auto leading-relaxed">
                O Zion não é um fornecedor que vende licença. É um parceiro de gestão.
                Eliminamos a mensalidade fixa pesada para alinhar nosso interesse ao seu: <strong>fazer o dinheiro entrar no caixa.</strong>
            </p>
        </div>
    </section>

    <!-- SECTION: COMO FUNCIONA A PARCERIA -->
    <section class="py-20 bg-slate-50">
        <div class="max-w-6xl mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-black text-slate-900">A parceria é ganha-ganha.</h2>
            </div>
            
            <div class="grid md:grid-cols-4 gap-6">
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 relative">
                    <span class="absolute -top-4 -left-4 w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center font-bold text-xl shadow-lg">1</span>
                    <h3 class="font-bold text-lg mt-4 mb-2">Acesso Completo</h3>
                    <p class="text-sm text-slate-500">A escola recebe todos os 8 módulos do ecossistema Zion na mesma plataforma.</p>
                </div>
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 relative">
                    <span class="absolute -top-4 -left-4 w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center font-bold text-xl shadow-lg">2</span>
                    <h3 class="font-bold text-lg mt-4 mb-2">Automação</h3>
                    <p class="text-sm text-slate-500">O sistema assume cobranças, boletos, RH, matrículas e agenda digital.</p>
                </div>
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 relative">
                    <span class="absolute -top-4 -left-4 w-10 h-10 bg-indigo-600 text-white rounded-xl flex items-center justify-center font-bold text-xl shadow-lg">3</span>
                    <h3 class="font-bold text-lg mt-4 mb-2">Recebimento</h3>
                    <p class="text-sm text-slate-500">O dinheiro cai via Boleto ou PIX e o sistema dá a baixa financeira automaticamente.</p>
                </div>
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 relative">
                    <span class="absolute -top-4 -left-4 w-10 h-10 bg-emerald-500 text-white rounded-xl flex items-center justify-center font-bold text-xl shadow-lg">4</span>
                    <h3 class="font-bold text-lg mt-4 mb-2">Sucesso Mútuo</h3>
                    <p class="text-sm text-slate-500">O Zion retém apenas uma taxa sobre os pagamentos com sucesso. Risco zero para seu caixa.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION: OS 8 PILARES DO ECOSSISTEMA -->
    <section id="ecossistema" class="py-24 bg-white border-y border-slate-200">
        <div class="max-w-[90rem] mx-auto px-6">
            <div class="text-center mb-16">
                <span class="text-indigo-600 font-bold tracking-widest uppercase text-xs">O Fim das Planilhas Soltas</span>
                <h2 class="text-3xl md:text-4xl font-black text-slate-900 mt-2">Os 8 Pilares do Ecossistema Zion</h2>
                <p class="text-slate-500 mt-4 max-w-2xl mx-auto">Tudo centralizado. Acabe com a necessidade de ter um sistema para o financeiro, outro para a catraca e outro para o diário de classe.</p>
            </div>

            <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-6">
                
                <!-- Pilar 1: Financeiro (LINK) -->
                <a href="site_publico/financeiro_landing.html" class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-emerald-400 hover:shadow-xl transition-all duration-300 group cursor-pointer relative overflow-hidden">
                    <div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="pie-chart" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">1. Gestão Financeira <span class="block text-sm font-bold text-emerald-600">(O Cérebro)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5"></i> Boletos, PIX e Carnês integrados ao Asaas.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5"></i> <b>Baixa Automática:</b> O pai paga, o caixa atualiza.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5"></i> <b>Split de Pagamento</b> automático para parceiros.</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center gap-2 text-emerald-600 font-black text-xs uppercase tracking-wide group-hover:gap-3 transition-all">
                        Ver página do Financeiro <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </div>
                </a>

                <!-- Pilar 2: Cobrança (LINK) -->
                <a href="site_publico/cobranca.html" class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-cyan-400 hover:shadow-xl transition-all duration-300 group cursor-pointer relative overflow-hidden">
                    <div class="w-12 h-12 bg-cyan-100 text-cyan-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="phone-call" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">2. Cobrança ZM <span class="block text-sm font-bold text-cyan-600">(CRM de Recuperação)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-cyan-500 shrink-0 mt-0.5"></i> <b>WhatsApp:</b> Lembretes e cobranças com um clique.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-cyan-500 shrink-0 mt-0.5"></i> Calculadora de juros e renegociação imediata.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-cyan-500 shrink-0 mt-0.5"></i> Negativação no <b>Serasa</b> direto pelo painel.</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center gap-2 text-cyan-600 font-black text-xs uppercase tracking-wide group-hover:gap-3 transition-all">
                        Ver página de Cobrança <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </div>
                </a>

                <!-- Pilar 3: RH (LINK) -->
                <a href="site_publico/rh_page.html" class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-indigo-400 hover:shadow-xl transition-all duration-300 group cursor-pointer relative overflow-hidden">
                    <div class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="users" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">3. Zion RH <span class="block text-sm font-bold text-indigo-600">(Segurança Jurídica)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-indigo-500 shrink-0 mt-0.5"></i> <b>Ponto Antifraude:</b> Celular com GPS + Selfie.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-indigo-500 shrink-0 mt-0.5"></i> Admissão 100% Digital via link (sem papel).</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-indigo-500 shrink-0 mt-0.5"></i> Gestão e abono de Atestados por foto no App.</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center gap-2 text-indigo-600 font-black text-xs uppercase tracking-wide group-hover:gap-3 transition-all">
                        Ver página de Recursos Humanos <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </div>
                </a>

                <!-- Pilar 4: Agenda e App (DIV) -->
                <div class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-blue-400 hover:shadow-lg transition-all duration-300 group relative">
                    <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="smartphone" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">4. App & Agenda <span class="block text-sm font-bold text-blue-600">(Comunicação)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-blue-500 shrink-0 mt-0.5"></i> <b>Diário de Classe:</b> Frequência e notas.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-blue-500 shrink-0 mt-0.5"></i> Relatórios diários de alimentação/comportamento.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-blue-500 shrink-0 mt-0.5"></i> Mural de Fotos e Avisos via App PWA.</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center justify-between text-slate-400">
                        <span class="text-xs font-bold uppercase tracking-wide">Módulo Integrado</span>
                        <i data-lucide="check-circle" class="w-4 h-4 text-blue-400"></i>
                    </div>
                </div>

                <!-- Pilar 5: Loja (LINK) -->
                <a href="site_publico/loja_landing.html" class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-pink-400 hover:shadow-xl transition-all duration-300 group cursor-pointer relative overflow-hidden">
                    <div class="w-12 h-12 bg-pink-100 text-pink-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="shopping-bag" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">5. Zion Store <span class="block text-sm font-bold text-pink-600">(Cantina e Loja)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-pink-500 shrink-0 mt-0.5"></i> Venda de Uniformes, Livros e Lanches.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-pink-500 shrink-0 mt-0.5"></i> <b>Fim das Filas:</b> O aluno compra em casa.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-pink-500 shrink-0 mt-0.5"></i> Recebimento digital sem dinheiro físico na escola.</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center gap-2 text-pink-600 font-black text-xs uppercase tracking-wide group-hover:gap-3 transition-all">
                        Ver página da Zion Store <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </div>
                </a>

                <!-- Pilar 6: Secretaria Digital (DIV) -->
                <div class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-purple-400 hover:shadow-lg transition-all duration-300 group relative">
                    <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="folder-open" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">6. Secretaria <span class="block text-sm font-bold text-purple-600">(Documentos)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-purple-500 shrink-0 mt-0.5"></i> Emissão de históricos e recibos I.R. automáticos.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-purple-500 shrink-0 mt-0.5"></i> Matrículas Extracurriculares gerenciadas.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-purple-500 shrink-0 mt-0.5"></i> <b>Assinatura Eletrônica</b> de contratos (c/ hash).</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center justify-between text-slate-400">
                        <span class="text-xs font-bold uppercase tracking-wide">Módulo Integrado</span>
                        <i data-lucide="check-circle" class="w-4 h-4 text-purple-400"></i>
                    </div>
                </div>

                <!-- Pilar 7: Eventos e Rifas (DIV) -->
                <div class="flex flex-col h-full bg-slate-50 border border-slate-200 p-6 rounded-3xl hover:border-orange-400 hover:shadow-lg transition-all duration-300 group relative">
                    <div class="w-12 h-12 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-sm">
                        <i data-lucide="ticket" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">7. Escola Ativa <span class="block text-sm font-bold text-orange-600">(Receita Extra)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-orange-500 shrink-0 mt-0.5"></i> Venda de Ingressos para eventos escolares.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-orange-500 shrink-0 mt-0.5"></i> <b>Rifas Digitais/Físicas</b> com links de pagamento.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-600 font-medium"><i data-lucide="check" class="w-4 h-4 text-orange-500 shrink-0 mt-0.5"></i> Ranking de vendas de alunos (Gamificação).</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-slate-200 flex items-center justify-between text-slate-400">
                        <span class="text-xs font-bold uppercase tracking-wide">Módulo Integrado</span>
                        <i data-lucide="check-circle" class="w-4 h-4 text-orange-400"></i>
                    </div>
                </div>

                <!-- Pilar 8: BPO (DESTAQUE PREMIUM DIV) -->
                <div class="flex flex-col h-full bg-gradient-to-br from-amber-50 to-orange-50 border-2 border-amber-300 p-6 rounded-3xl shadow-lg transform hover:-translate-y-2 transition-all duration-300 group relative overflow-hidden">
                    <div class="absolute top-0 right-0 bg-amber-400 text-amber-900 text-[10px] font-black uppercase px-4 py-1.5 rounded-bl-xl shadow-sm">A Cereja do Bolo</div>
                    
                    <div class="w-12 h-12 bg-amber-400 text-amber-900 rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition shadow-md">
                        <i data-lucide="crown" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-black text-slate-900 mb-2">8. Secretaria Virtual <span class="block text-sm font-bold text-amber-600">(BPO Humano)</span></h3>
                    <ul class="space-y-3 mt-4 mb-6">
                        <li class="flex items-start gap-2 text-sm text-slate-700 font-medium"><i data-lucide="star" class="w-4 h-4 text-amber-500 shrink-0 mt-0.5 fill-amber-500"></i> Um time humano da Zion assume o seu WhatsApp.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-700 font-medium"><i data-lucide="star" class="w-4 h-4 text-amber-500 shrink-0 mt-0.5 fill-amber-500"></i> Disparo de boletos e resolução de dúvidas.</li>
                        <li class="flex items-start gap-2 text-sm text-slate-700 font-medium"><i data-lucide="star" class="w-4 h-4 text-amber-500 shrink-0 mt-0.5 fill-amber-500"></i> Faz a <b>cobrança "chata"</b> para a diretoria poupar a relação com as famílias.</li>
                    </ul>
                    <div class="mt-auto pt-4 border-t border-amber-200 flex items-center justify-between text-amber-700">
                        <span class="text-xs font-bold uppercase tracking-wide">Serviço Opcional</span>
                        <i data-lucide="award" class="w-4 h-4"></i>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- UI SHOWCASE CARROSEL -->
    <section class="py-16 bg-slate-50 border-y border-slate-200 overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 mb-8 text-center">
            <h2 class="text-2xl font-black text-slate-900 flex items-center justify-center gap-2">
                <i data-lucide="monitor" class="w-6 h-6 text-indigo-600 pointer-events-none"></i>
                Interface Intuitiva e Moderna
            </h2>
            <p class="text-slate-500 text-sm mt-2">Sem telas complexas. Tudo desenhado para a facilidade do gestor.</p>
            <p class="md:hidden text-xs text-slate-400 mt-2">Arraste para o lado para ver as telas</p>
        </div>
        
        <div class="relative max-w-[100vw] group">
            <!-- BOTÕES COM AJUSTE DE CLIQUE -->
            <button type="button" onclick="scrollCarousel(-1)" class="absolute left-4 top-1/2 -translate-y-1/2 z-20 bg-white/90 hover:bg-white text-indigo-600 p-3 rounded-full shadow-lg backdrop-blur-sm border border-indigo-100 transition-all transform hover:scale-110 hidden md:flex cursor-pointer">
                <i data-lucide="chevron-left" class="w-6 h-6 pointer-events-none"></i>
            </button>
            <button type="button" onclick="scrollCarousel(1)" class="absolute right-4 top-1/2 -translate-y-1/2 z-20 bg-white/90 hover:bg-white text-indigo-600 p-3 rounded-full shadow-lg backdrop-blur-sm border border-indigo-100 transition-all transform hover:scale-110 hidden md:flex cursor-pointer">
                <i data-lucide="chevron-right" class="w-6 h-6 pointer-events-none"></i>
            </button>

            <div id="carousel-images" class="flex flex-row overflow-x-auto gap-4 px-6 pb-8 hide-scrollbar snap-x snap-mandatory">
                <div class="w-[85vw] md:min-w-[60%] lg:min-w-[45%] shrink-0 snap-center cursor-pointer hover:opacity-90 transition" onclick="openLightbox(this.querySelector('img').src)">
                    <img src="site_publico/carrocel 1.png" alt="Interface Zion Gestão" class="w-full rounded-2xl shadow-xl border border-slate-200 select-none">
                    <p class="md:hidden text-center text-xs font-bold text-slate-500 mt-2 uppercase">Painel de Gestão</p>
                </div>
                <div class="w-[85vw] md:min-w-[60%] lg:min-w-[45%] shrink-0 snap-center cursor-pointer hover:opacity-90 transition" onclick="openLightbox(this.querySelector('img').src)">
                    <img src="site_publico/carrocel 2.png" alt="Interface Zion RH" class="w-full rounded-2xl shadow-xl border border-slate-200 select-none">
                    <p class="md:hidden text-center text-xs font-bold text-slate-500 mt-2 uppercase">Recursos Humanos</p>
                </div>
                <div class="w-[85vw] md:min-w-[60%] lg:min-w-[45%] shrink-0 snap-center cursor-pointer hover:opacity-90 transition" onclick="openLightbox(this.querySelector('img').src)">
                    <img src="site_publico/carrocel 3.png" alt="Interface Zion Financeiro" class="w-full rounded-2xl shadow-xl border border-slate-200 select-none">
                    <p class="md:hidden text-center text-xs font-bold text-slate-500 mt-2 uppercase">Financeiro</p>
                </div>
                <div class="w-[85vw] md:min-w-[60%] lg:min-w-[45%] shrink-0 snap-center cursor-pointer hover:opacity-90 transition" onclick="openLightbox(this.querySelector('img').src)">
                    <img src="site_publico/carrocel 4.png" alt="Interface Zion Alunos" class="w-full rounded-2xl shadow-xl border border-slate-200 select-none">
                    <p class="md:hidden text-center text-xs font-bold text-slate-500 mt-2 uppercase">Portal do Aluno</p>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION: PERFIL -->
    <section id="perfil" class="py-20 bg-white">
        <div class="max-w-6xl mx-auto px-6">
            <h2 class="text-3xl font-black text-center text-slate-900 mb-12">O Zion é para sua escola?</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-emerald-50 p-8 rounded-3xl border border-emerald-100">
                    <h3 class="font-bold text-emerald-800 text-xl mb-6 flex items-center gap-2">
                        <i data-lucide="check-circle-2" class="w-6 h-6"></i> Ideal para escolas que:
                    </h3>
                    <ul class="space-y-4">
                        <li class="flex items-center gap-3 text-slate-700 font-medium"><i data-lucide="check" class="text-emerald-500 w-5 h-5"></i> Querem dar o fim nas planilhas e sistemas soltos.</li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium"><i data-lucide="check" class="text-emerald-500 w-5 h-5"></i> Querem delegar a cobrança e organizar o RH.</li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium"><i data-lucide="check" class="text-emerald-500 w-5 h-5"></i> Valorizam um modelo ganha-ganha, sem custo fixo alto.</li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium"><i data-lucide="check" class="text-emerald-500 w-5 h-5"></i> Buscam transformar eventos/rifas em receita previsível.</li>
                    </ul>
                </div>

                <div class="bg-red-50 p-8 rounded-3xl border border-red-100 opacity-80">
                    <h3 class="font-bold text-red-800 text-xl mb-6 flex items-center gap-2">
                        <i data-lucide="x-circle" class="w-6 h-6"></i> Não é para escolas que:
                    </h3>
                    <ul class="space-y-4">
                        <li class="flex items-center gap-3 text-slate-600"><i data-lucide="x" class="text-red-400 w-5 h-5"></i> Preferem pagar licenças caríssimas de software antigo.</li>
                        <li class="flex items-center gap-3 text-slate-600"><i data-lucide="x" class="text-red-400 w-5 h-5"></i> Gostam de cobrar os pais no boca a boca, gerando desgaste.</li>
                        <li class="flex items-center gap-3 text-slate-600"><i data-lucide="x" class="text-red-400 w-5 h-5"></i> Aceitam conviver com risco de processos no RH de papel.</li>
                    </ul>
                </div>
            </div>
            
            <div class="mt-16 text-center">
                <a href="https://wa.me/5584988439021?text=Quero%20levar%20o%20Zion%20para%20minha%20escola" target="_blank" class="inline-flex items-center gap-2 bg-slate-900 hover:bg-indigo-600 text-white px-8 py-5 rounded-2xl font-black text-lg transition-all shadow-xl hover:shadow-indigo-300 transform hover:-translate-y-1">
                    Falar com Consultor e Ativar Parceria
                    <i data-lucide="message-circle" class="w-6 h-6"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer class="bg-white py-12 border-t border-slate-200 mt-10">
        <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="flex items-center gap-2">
                <div class="bg-slate-900 p-2 rounded-lg text-white">
                    <i data-lucide="layers" class="w-5 h-5"></i>
                </div>
                <div class="flex flex-col">
                    <span class="font-black text-slate-900 tracking-tight leading-none">ZION</span>
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Education System</span>
                </div>
            </div>
            
            <p class="text-xs font-medium text-slate-400 text-center">
                © 2026 Zion Education. Feito para escolas que querem educar, não cobrar.
            </p>
            
            <div class="flex gap-4">
                <a href="https://wa.me/5584988439021" class="w-10 h-10 rounded-full bg-emerald-50 flex items-center justify-center text-emerald-600 hover:bg-emerald-100 transition">
                    <i data-lucide="message-circle" class="w-5 h-5"></i>
                </a>
                <a href="https://instagram.com/jeffersondeandradeofc" class="w-10 h-10 rounded-full bg-pink-50 flex items-center justify-center text-pink-600 hover:bg-pink-100 transition">
                    <i data-lucide="instagram" class="w-5 h-5"></i>
                </a>
            </div>
        </div>
    </footer>

    <!-- LIGHTBOX -->
    <div id="lightbox" class="fixed inset-0 z-[60] hidden bg-black/90 items-center justify-center animate-in fade-in duration-300" onclick="closeLightbox()">
        <button class="absolute top-4 right-4 text-white hover:text-red-400 transition-colors bg-white/10 p-2 rounded-full backdrop-blur-sm" onclick="closeLightbox()">
            <i data-lucide="x" class="w-8 h-8"></i>
        </button>
        <img id="lightbox-img" src="" class="max-h-[90vh] max-w-[90vw] rounded-lg shadow-2xl object-contain animate-in zoom-in duration-300" onclick="event.stopPropagation()">
    </div>

    <!-- SCRIPT CORRIGIDO -->
    <script>
        lucide.createIcons();

        function scrollCarousel(direction) {
            const container = document.getElementById('carousel-images');
            if (container && container.firstElementChild) {
                // Calcula exatamente a largura de um card + a margem (gap-4 = 16px)
                const cardWidth = container.firstElementChild.offsetWidth;
                const scrollAmount = cardWidth + 16; 
                
                container.scrollBy({ 
                    left: direction * scrollAmount, 
                    behavior: 'smooth' 
                });
            }
        }

        function openLightbox(src) {
            const lightbox = document.getElementById('lightbox');
            const img = document.getElementById('lightbox-img');
            img.src = src;
            lightbox.classList.remove('hidden');
            lightbox.classList.add('flex');
        }

        function closeLightbox() {
            const lightbox = document.getElementById('lightbox');
            lightbox.classList.add('hidden');
            lightbox.classList.remove('flex');
            document.getElementById('lightbox-img').src = '';
        }
        
        document.addEventListener('keydown', function(event) {
            if (event.key === "Escape") closeLightbox();
        });
    </script>
</body>
</html>