"
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f1f5f9;
        /* Fundo sutil geométrico */
        background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
        background-size: 20px 20px;
    }

    /* Animação de Entrada */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-entry { animation: fadeInUp 0.6s ease-out forwards; }

    /* Card Principal */
    .login-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid #ffffff;
        box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1);
        border-radius: 32px;
    }

    /* Botão Principal */
    .btn-hero {
        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
        color: white;
        font-weight: 700;
        padding: 16px;
        border-radius: 16px;
        transition: all 0.2s;
        box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4);
    }
    .btn-hero:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -5px rgba(79, 70, 229, 0.5);
    }
    .btn-hero:active { transform: scale(0.98); }

    /* Logo Container */
    .logo-container {
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    }
</style>

<div class="min-h-screen flex items-center justify-center p-6 relative">
    
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
        <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
        <div class="absolute bottom-[-10%] left-[-5%] w-96 h-96 bg-indigo-200 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
    </div>

    <div class="login-card w-full max-w-md p-8 md:p-12 text-center relative z-10 animate-entry">
        
        <div class="logo-container w-24 h-24 mx-auto rounded-3xl flex items-center justify-center mb-8 border border-slate-100">
            <i class="fas fa-star text-4xl text-indigo-600"></i>
        </div>

        <h1 class="text-3xl font-black text-slate-800 mb-3 tracking-tight">Panobianco NPS</h1>
        <p class="text-slate-500 text-lg mb-8 leading-relaxed">
            Seu feedback constrói o <br>
            <span class="text-indigo-600 font-bold">atendimento humanizado</span> <br>
            que amamos oferecer!
        </p>

        <a href="login.php" class="btn-hero w-full block mb-8 flex items-center justify-center gap-3 group">
            <span>Acessar Painel Administrativo</span>
            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
        </a>

        <div class="bg-slate-50 rounded-2xl p-5 border border-slate-100 text-left">
            <div class="flex items-start gap-4">
                <div class="bg-white p-2 rounded-lg shadow-sm text-indigo-500">
                    <i class="fas fa-qrcode text-xl"></i>
                </div>
                <div>
                    <h3 class="font-bold text-slate-700 text-sm mb-1">Quer deixar sua avaliação?</h3>
                    <p class="text-xs text-slate-500 leading-relaxed">
                        Escaneie o QR Code disponível na recepção ou com nossos professores.
                    </p>
                </div>
            </div>
        </div>

        <div class="mt-8 pt-6 border-t border-slate-100">
            <a href="avaliar_funcionario.php?func_id=4" class="text-xs font-semibold text-slate-400 hover:text-indigo-500 transition flex items-center justify-center gap-2">
                <i class="fas fa-external-link-alt"></i> Acesso Demo (Funcionário)
            </a>
        </div>
    </div>
</div>