<!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 Logistics | High Performance</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&display=swap');
        
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: radial-gradient(circle at top right, #1a1a1a, #000000);
            min-height: 100vh;
            color: white;
            overflow-x: hidden;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 209, 0, 0.5);
            transform: translateY(-5px);
        }

        .bg-yellow-brt { background-color: #FFD100; }
        .text-yellow-brt { color: #FFD100; }

        .glow {
            box-shadow: 0 0 30px rgba(255, 209, 0, 0.2);
        }

        .floating {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center px-6">

    <div class="fixed top-[-10%] right-[-10%] w-[500px] h-[500px] bg-yellow-brt opacity-10 rounded-full blur-[120px] pointer-events-none"></div>
    <div class="fixed bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-yellow-brt opacity-5 rounded-full blur-[100px] pointer-events-none"></div>

    <header class="text-center mb-16 relative z-10">
        <div class="floating inline-block">
            <div class="w-24 h-24 bg-yellow-brt rounded-[2.5rem] flex items-center justify-center shadow-[0_0_50px_rgba(255,209,0,0.3)] mb-6 mx-auto border-2 border-white/20">
                <span class="text-black text-4xl font-extrabold italic tracking-tighter">BRT</span>
            </div>
        </div>
        <h1 class="text-4xl font-extrabold tracking-tighter italic uppercase mb-2">
            Logística <span class="text-yellow-brt">de Entregas</span>
        </h1>
        <div class="h-1 w-20 bg-yellow-brt mx-auto rounded-full mb-4"></div>
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-[0.3em]">Entregas nas </p>
    </header>

    <main class="w-full max-w-[400px] space-y-5 relative z-10">
        
        <a href="login3.php" class="glass-card block p-8 rounded-[3rem] group">
            <div class="flex items-center justify-between">
                <div class="space-y-2">
                    <div class="w-12 h-12 bg-white/5 rounded-2xl flex items-center justify-center group-hover:bg-yellow-brt group-hover:text-black transition-all duration-500">
                        <i class="fas fa-paper-plane text-xl transition-transform group-hover:-rotate-45"></i>
                    </div>
                    <h2 class="text-2xl font-bold italic uppercase tracking-tighter">Enviar</h2>
                    <p class="text-gray-500 text-[10px] font-bold uppercase tracking-wider">Acesso ao Cliente</p>
                </div>
                <div class="text-yellow-brt opacity-20 group-hover:opacity-100 transition-opacity">
                    <i class="fas fa-chevron-right text-3xl"></i>
                </div>
            </div>
        </a>

        <a href="login2.php" class="glass-card block p-8 rounded-[3rem] group overflow-hidden relative">
            <div class="absolute inset-0 bg-gradient-to-r from-yellow-brt/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
            
            <div class="flex items-center justify-between relative z-10">
                <div class="space-y-2">
                    <div class="w-12 h-12 bg-yellow-brt rounded-2xl flex items-center justify-center text-black">
                        <i class="fas fa-motorcycle text-xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold italic uppercase tracking-tighter">Entregar</h2>
                    <p class="text-gray-500 text-[10px] font-bold uppercase tracking-wider">Painel do Parceiro</p>
                </div>
                <div class="text-white/20 group-hover:text-yellow-brt transition-colors">
                    <i class="fas fa-chevron-right text-3xl"></i>
                </div>
            </div>
        </a>

    </main>

    <footer class="mt-20 text-center relative z-10">
        <div class="flex items-center justify-center gap-3 mb-6">
            <span class="px-3 py-1 bg-white/5 border border-white/10 rounded-full text-[9px] font-bold text-gray-400 uppercase tracking-widest">v2.0 Stable</span>
            <span class="flex items-center gap-2">
                <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse shadow-[0_0_10px_#22c55e]"></span>
                <span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">Network Active</span>
            </span>
        </div>
        <p class="text-[10px] text-gray-600 font-bold uppercase italic tracking-tighter">Desenvolvido por R9WEB Soluções</p>
    </footer>

    <script>
        // Haptic Feedback simulado
        document.querySelectorAll('a').forEach(button => {
            button.addEventListener('touchstart', () => {
                if (navigator.vibrate) navigator.vibrate(10);
            });
        });
    </script>
</body>
</html>