<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <title>BRT Logisticas de Entregas| Portal de Acesso</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
        
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background-color: #F8FAFC; /* Fundo Clean */
            background-image: 
                radial-gradient(at 0% 0%, rgba(0, 86, 255, 0.05) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(255, 209, 0, 0.1) 0px, transparent 50%);
            min-height: 100vh;
            color: #1E293B;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Card Estilo "Neumorphism" Suave */
        .premium-card {
            background: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.03);
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .premium-card:active {
            transform: scale(0.97);
        }

        /* Hover Dinâmico */
        .card-cliente:hover {
            border-color: #0056FF;
            box-shadow: 0 20px 40px -10px rgba(0, 86, 255, 0.12);
        }

        .card-entregador:hover {
            border-color: #FFD100;
            box-shadow: 0 20px 40px -10px rgba(255, 209, 0, 0.2);
        }

        .text-blue-brt { color: #0056FF; }
        .bg-blue-brt { background-color: #0056FF; }
        .text-yellow-brt { color: #FFB800; }
        .bg-yellow-brt { background-color: #FFD100; }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .animate-float { animation: float 4s ease-in-out infinite; }
    </style>
</head>
<body class="px-6 py-12">

    <div class="w-full max-w-[420px] flex flex-col items-center">
        
        <header class="text-center mb-14">
           <div class="animate-float mb-6 inline-block">
    <div class="w-20 h-20 bg-white rounded-3xl shadow-xl flex items-center justify-center border border-gray-100">
        <div class="w-16 h-16 bg-yellow-brt rounded-2xl flex flex-col items-center justify-center shadow-inner">
            <span class="text-black text-2xl font-black italic tracking-tighter leading-none">BRT</span>
            <span class="text-black text-[8px] font-black uppercase tracking-[0.2em] leading-none mt-0.5">Entrega</span>
        </div>
    </div>
</div>
            <h1 class="text-3xl font-black text-slate-900 uppercase italic tracking-tighter leading-none mb-2">
                Logistica de <span class="text-blue-brt">Entrega</span>
            </h1>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.3em]">Operação Rio de Janeiro</p>
        </header>

        <main class="w-full space-y-4">
            
            <a href="login3.php" class="premium-card card-cliente group block p-6 rounded-[2.5rem]">
                <div class="flex items-center gap-5">
                    <div class="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-brt group-hover:bg-blue-brt group-hover:text-white transition-all duration-300">
                        <i class="fas fa-box-open text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-xl font-black text-slate-800 uppercase italic leading-none mb-1">ENVIAR ENCOMENDAS</h4>
                        <p class="text-[15px] font-semibold text-slate-400">Sou Cliente</p>
                    </div>
                    <div class="text-slate-200 group-hover:text-blue-brt transition-colors pr-2">
                        <i class="fas fa-arrow-right text-lg"></i>
                    </div>
                </div>
            </a>

            <a href="login2.php" class="premium-card card-entregador group block p-6 rounded-[2.5rem]">
                <div class="flex items-center gap-5">
                    <div class="w-16 h-16 bg-amber-50 rounded-2xl flex items-center justify-center text-yellow-brt group-hover:bg-yellow-brt group-hover:text-black transition-all duration-300">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="text-xl font-black text-slate-800 uppercase italic leading-none mb-1"> REALIZAR ENTREGAS</h4>
                        <p class="text-[15px] font-semibold text-slate-400">Sou Passageiro</p>
                    </div>
                    <div class="text-slate-200 group-hover:text-yellow-brt transition-colors pr-2">
                        <i class="fas fa-arrow-right text-lg"></i>
                    </div>
                </div>
            </a>

        </main>

        <footer class="mt-16 text-center">
            <div class="flex items-center justify-center gap-2 mb-4">
                <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
                <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Serviço em tempo real</span>
            </div>
            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">
                &copy; 2026 BRT SOLUÇÕES DE ENTREGAS NAS ESTAÇÕES
            </p>
        </footer>

    </div>

    <script>
        // Vibração ao clicar no mobile
        document.querySelectorAll('a').forEach(btn => {
            btn.addEventListener('click', () => {
                if (navigator.vibrate) navigator.vibrate(5);
            });
        });
    </script>
</body>
</html>