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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-navy-900 text-slate-100 font-sans antialiased selection:bg-sky-400 selection:text-navy-950;
        background-color: #0c3b6d !important;
        background-image: 
            radial-gradient(ellipse 100% 60% at 50% -10%, rgba(56, 189, 248, 0.25), transparent 70%),
            radial-gradient(ellipse 70% 50% at 90% 20%, rgba(14, 165, 233, 0.18), transparent 60%),
            linear-gradient(180deg, #0c3b6d 0%, #092f58 60%, #07264a 100%) !important;
        background-attachment: fixed !important;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-heading tracking-tight;
    }
}

/* Glassmorphism Cards & Navigation with Oceanic Depth */
.glass-nav {
    background: rgba(12, 59, 109, 0.9) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(125, 211, 252, 0.2);
    box-shadow: 0 4px 20px -2px rgba(7, 38, 74, 0.5);
}

.glass-card {
    background: rgba(20, 83, 148, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(125, 211, 252, 0.22);
    box-shadow: 0 10px 30px -5px rgba(5, 25, 50, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(56, 189, 248, 0.75);
    transform: translateY(-4px);
    background: rgba(27, 100, 174, 0.68);
    box-shadow: 0 20px 35px -10px rgba(5, 25, 50, 0.55), 0 0 25px rgba(56, 189, 248, 0.3);
}

.glass-card-static {
    background: rgba(20, 83, 148, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(125, 211, 252, 0.22);
    box-shadow: 0 10px 30px -5px rgba(5, 25, 50, 0.4);
}

.glass-input {
    background: rgba(9, 47, 88, 0.75);
    border: 1px solid rgba(125, 211, 252, 0.28);
    color: #ffffff;
    transition: all 0.2s ease;
}

.glass-input:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35);
    background: rgba(16, 71, 128, 0.9);
}

/* Custom Gradients */
.text-gradient-sky,
.text-gradient-blue,
.text-gradient-emerald {
    background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 40%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #07264a;
}
::-webkit-scrollbar-thumb {
    background: #1b64ae;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}

/* Floating WhatsApp Pulse Animation */
@keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.3; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.animate-pulse-ring {
    animation: pulse-ring 2.5s infinite;
}