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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-clean-primary { background-color: #00A8E8; } /* Bright Blue */
    .bg-clean-secondary { background-color: #007EA7; } /* Darker Blue */
    .bg-clean-accent { background-color: #003459; } /* Deep Navy */
    .bg-clean-light { background-color: #F1FAFF; } /* Very Light Blue */
    .bg-clean-white { background-color: #FFFFFF; }
    
    .text-clean-primary { color: #00A8E8; }
    .text-clean-secondary { color: #007EA7; }
    .text-clean-accent { color: #003459; }
    .text-clean-muted { color: #6C8E9D; }
    
    .font-nunito { font-family: 'Nunito', sans-serif; }
    .font-quicksand { font-family: 'Quicksand', sans-serif; }
}

.clean-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#00A8E8] text-white font-nunito font-bold rounded-full shadow-lg shadow-[#00A8E8]/30 hover:shadow-xl hover:bg-[#007EA7] hover:-translate-y-1 transition-all duration-300;
}

.clean-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border-2 border-[#00A8E8] text-[#00A8E8] font-nunito font-bold rounded-full hover:bg-[#00A8E8] hover:text-white transition-all duration-300;
}

.clean-card {
    @apply bg-white p-8 rounded-[2rem] border border-[#00A8E8]/10 shadow-lg hover:shadow-2xl hover:border-[#00A8E8]/30 transition-all duration-500 relative overflow-hidden group;
}

/* Bubble Animations */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
    animation: floatUp 15s infinite ease-in-out;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) scale(1.2);
        opacity: 0;
    }
}

/* Water drop shape */
.water-drop {
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.water-drop-icon {
    transform: rotate(45deg);
}

/* Wavy Divider */
.wavy-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wavy-divider svg {
    position: relative;
    display: block;
    width: calc(150% + 1.3px);
    height: 80px;
    animation: wave 10s linear infinite;
}

@keyframes wave {
    0% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
    100% { transform: translateX(0); }
}