/* Custom Styles, Animations and Color Utilities for Trasporto SAS
   Brand Architecture: Royal Blue Metallic (#2563eb / #1d4ed8), Deep Navy (#0b1e36), Electric Sky (#38bdf8), Silver (#e2e8f0)
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    --brand-navy: #0b1e36;
    --brand-royal: #1d4ed8;
    --brand-electric: #2563eb;
    --brand-sky: #0284c7;
    --brand-cyan: #38bdf8;
    --brand-silver: #e2e8f0;
    --whatsapp-green: #25d366;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: #f8fafc;
    color: #0f172a;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Brand Blue & Slate Utilities
   ========================================================================== */
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0b1e36; }
.bg-slate-950 { background-color: #06111f; }

.bg-slate-900\/95 { background-color: rgba(11, 30, 54, 0.95); }
.bg-slate-900\/90 { background-color: rgba(11, 30, 54, 0.90); }
.bg-slate-900\/80 { background-color: rgba(11, 30, 54, 0.80); }
.bg-slate-900\/60 { background-color: rgba(11, 30, 54, 0.60); }
.bg-slate-800\/90 { background-color: rgba(30, 41, 59, 0.90); }
.bg-slate-800\/80 { background-color: rgba(30, 41, 59, 0.80); }
.bg-slate-800\/60 { background-color: rgba(30, 41, 59, 0.60); }
.bg-slate-950\/70 { background-color: rgba(6, 17, 31, 0.70); }
.bg-slate-950\/10 { background-color: rgba(6, 17, 31, 0.10); }

.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0b1e36; }
.text-slate-950 { color: #06111f; }

.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-700 { border-color: #334155; }
.border-slate-800 { border-color: #1e293b; }
.border-slate-700\/80 { border-color: rgba(51, 65, 85, 0.80); }
.border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.60); }
.border-slate-800\/50 { border-color: rgba(30, 41, 59, 0.50); }

/* ==========================================================================
   Royal Blue & Sky Palette (From Trasporto Logo)
   ========================================================================== */
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-800 { background-color: #1e40af; }
.bg-blue-900 { background-color: #1e3a8a; }
.bg-blue-950 { background-color: #172554; }

.bg-blue-600\/20 { background-color: rgba(37, 99, 235, 0.20); }
.bg-blue-600\/10 { background-color: rgba(37, 99, 235, 0.10); }
.bg-blue-500\/20 { background-color: rgba(59, 130, 246, 0.20); }
.bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.10); }

.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }

.border-blue-500 { border-color: #3b82f6; }
.border-blue-600 { border-color: #2563eb; }
.border-blue-700 { border-color: #1d4ed8; }
.border-blue-500\/40 { border-color: rgba(59, 130, 246, 0.40); }
.border-blue-400\/30 { border-color: rgba(96, 165, 250, 0.30); }

.hover\:bg-blue-500:hover { background-color: #3b82f6; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:text-blue-600:hover { color: #2563eb; }
.hover\:text-blue-400:hover { color: #60a5fa; }

/* Sky / Cyan Accents */
.text-sky-300 { color: #7dd3fc; }
.text-sky-400 { color: #38bdf8; }
.text-sky-500 { color: #0ea5e9; }
.bg-sky-500\/20 { background-color: rgba(14, 165, 233, 0.20); }
.bg-sky-500\/10 { background-color: rgba(14, 165, 233, 0.10); }
.bg-sky-50 { background-color: #f0f9ff; }
.border-sky-200 { border-color: #bae6fd; }
.border-sky-400 { border-color: #38bdf8; }

/* Emerald / Green (WhatsApp & Trust) */
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.20); }
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.10); }
.border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.20); }
.hover\:border-emerald-400:hover { border-color: #34d399; }
.hover\:bg-emerald-400:hover { background-color: #34d399; }
.hover\:bg-emerald-500:hover { background-color: #10b981; }

/* Backdrop Blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* Logo-matching Metallic Blue Gradient */
.gradient-text-brand {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-chrome {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-gradient-overlay {
    background: linear-gradient(135deg, rgba(11, 30, 54, 0.96) 0%, rgba(15, 35, 65, 0.90) 55%, rgba(30, 64, 175, 0.82) 100%);
}

/* Card hover lift effect */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.15);
}

/* Vehicle card image zoom */
.vehicle-img-wrapper {
    overflow: hidden;
}

.vehicle-img-wrapper img {
    transition: transform 0.5s ease;
}

.hover-lift:hover .vehicle-img-wrapper img {
    transform: scale(1.06);
}

/* Pulse animation for WhatsApp badge */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.pulse-whatsapp {
    animation: pulse-ring 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}