/* ========================================================================
    PROJECTDATA EXPERIENCE - CSS RESPONSABILITY
    Cores e Tipografias oficiais conforme Branding Book
    ========================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;700&display=swap');

:root {
    --pd-cyan: #9CE4EE;
    --pd-orange: #DD743F;
    --pd-dark: #191919;
    --pd-green: #7FF3A5;
    --pd-purple: #4939ED;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--pd-dark);
    color: #f8fafc;
}

.font-inter { font-family: 'Inter', sans-serif; }

/* --- UTILITÁRIOS DE CORES --- */
.bg-pd-dark { background-color: var(--pd-dark); }
.text-pd-cyan { color: var(--pd-cyan); }
.text-pd-green { color: var(--pd-green); }
.text-pd-orange { color: var(--pd-orange); }
.bg-pd-orange { background-color: var(--pd-orange); }
.border-pd-cyan { border-color: var(--pd-cyan); }

/* --- EFEITOS VISUAIS --- */

/* Gradiente Tecnológico de Fundo */
.hero-gradient {
    background: radial-gradient(circle at 20% 30%, rgba(156, 228, 238, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(221, 116, 63, 0.1) 0%, transparent 50%);
}

/* Glassmorphism para Cards de Autoridade */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(156, 228, 238, 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    border-color: var(--pd-cyan);
    background: rgba(255, 255, 255, 0.05);
}

/* Botão de Alta Conversão */
.btn-primary {
    background-color: var(--pd-orange);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background-color: #c56333;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(221, 116, 63, 0.3);
}

/* --- ANIMAÇÕES --- */

/* Badge Pulsante (Urgência) */
.badge-pulse {
    animation: pulse-orange 2s infinite;
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(221, 116, 63, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(221, 116, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(221, 116, 63, 0); }
}

/* Letreiro de Vagas (Marquee) */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

/* Sombra de texto para destaque do título principal */
.text-shadow {
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.px24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Botão de Compra Verde com o mesmo efeito do primário */
.btn-green {
    background-color: var(--pd-green);
    color: var(--pd-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-green:hover {
    background-color: #68d88d; /* Um tom de verde levemente mais escuro */
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(127, 243, 165, 0.4);
    
}