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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-call-primary { background-color: #0F4C81; } /* Classic Blue */
    .bg-call-secondary { background-color: #0A365D; } /* Dark Blue */
    .bg-call-accent { background-color: #38BDF8; } /* Sky Blue */
    .bg-call-light { background-color: #F8FAFC; }
    
    .text-call-primary { color: #0F4C81; }
    .text-call-secondary { color: #0A365D; }
    .text-call-accent { color: #38BDF8; }
    .text-call-muted { color: #64748B; }
    
    .font-outfit { font-family: 'Outfit', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
}

/* Sound Wave Animation */
.wave-container {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.wave-bar {
    width: 6px;
    background-color: #38BDF8;
    border-radius: 9999px;
    animation: wave 1s ease-in-out infinite;
}

.wave-bar:nth-child(1) { animation-delay: 0.0s; height: 10px; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; height: 20px; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; height: 35px; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; height: 15px; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; height: 25px; }

@keyframes wave {
    0%, 100% { transform: scaleY(1); opacity: 0.7; }
    50% { transform: scaleY(0.4); opacity: 1; }
}

.call-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#0F4C81] text-white font-outfit font-semibold rounded-lg shadow-lg shadow-[#0F4C81]/30 hover:-translate-y-1 hover:shadow-xl hover:bg-[#0A365D] transition-all duration-300;
}

.call-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border-2 border-[#0F4C81] text-[#0F4C81] font-outfit font-semibold rounded-lg hover:-translate-y-1 hover:bg-[#0F4C81] hover:text-white transition-all duration-300 bg-white;
}

.feature-card {
    @apply bg-white p-8 rounded-2xl border border-gray-100 shadow-sm hover:shadow-xl hover:border-[#38BDF8] transition-all duration-300 relative overflow-hidden group;
}

.feature-icon-wrapper {
    @apply w-14 h-14 rounded-xl bg-[#F0F9FF] text-[#0F4C81] flex items-center justify-center text-2xl mb-6 group-hover:bg-[#0F4C81] group-hover:text-white transition-colors duration-300;
}

/* Background grid pattern */
.grid-pattern {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(15, 76, 129, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 76, 129, 0.05) 1px, transparent 1px);
}