/* ======== LIQUID GLASS DESIGN SYSTEM ======== */
/* Shared liquid glass aesthetics for all buttons across the site */

/* --- Keyframe Animations --- */
@keyframes liquidShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glassGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 15px rgba(255, 255, 255, 0.03); }
    50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.05); }
}

@keyframes borderFlow {
    0% { border-color: rgba(255, 255, 255, 0.12); }
    25% { border-color: rgba(140, 200, 255, 0.2); }
    50% { border-color: rgba(200, 140, 255, 0.2); }
    75% { border-color: rgba(140, 255, 200, 0.2); }
    100% { border-color: rgba(255, 255, 255, 0.12); }
}

/* ============================================= */
/*  DARK THEME LIQUID GLASS (index, projects)    */
/* ============================================= */

/* --- .pill-btn (navbar buttons) --- */
.pill-btn {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(140, 200, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        0 0 0 0.5px rgba(255, 255, 255, 0.05) !important;
    animation: borderFlow 6s ease infinite;
    position: relative;
    overflow: hidden;
}

.pill-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; right: 0; bottom: 0;
    width: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%,
        transparent 100%
    );
    animation: liquidShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.pill-btn > * {
    position: relative;
    z-index: 2;
}

.pill-btn:hover {
    border-color: rgba(0, 255, 102, 0.25) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 255, 102, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(0, 255, 102, 0.05) 100%
    ) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 255, 102, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important;
    transform: translateY(-2px);
}

/* --- .bento-btn (GitHub card button) --- */
.bento-btn {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.65) 100%
    ) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    border: 1px solid rgba(0, 255, 102, 0.15) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.bento-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 255, 102, 0.1) 50%,
        rgba(0, 0, 0, 0.7) 100%
    ) !important;
    border-color: rgba(0, 255, 102, 0.35) !important;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 255, 102, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px);
}

/* --- .social-pill (footer social links) --- */
.social-pill {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 50%,
        rgba(140, 200, 255, 0.04) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.social-pill:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(0, 255, 102, 0.04) 50%,
        rgba(255, 255, 255, 0.06) 100%
    ) !important;
    border-color: rgba(0, 255, 102, 0.2) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(0, 255, 102, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

/* --- .action-card .action-icon (footer CTA icons) --- */
.action-card .action-icon {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.action-card.primary-action .action-icon {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.6) 0%,
        rgba(255, 140, 0, 0.35) 50%,
        rgba(255, 180, 60, 0.5) 100%
    ) !important;
    border: 1px solid rgba(255, 180, 60, 0.3);
    box-shadow:
        0 4px 16px rgba(255, 140, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.action-card:hover .action-icon {
    box-shadow:
        0 4px 20px rgba(0, 255, 102, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translateX(5px) !important;
}

/* --- .solid-btn (projects CTA) --- */
.solid-btn {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.65) 0%,
        rgba(255, 160, 40, 0.5) 40%,
        rgba(255, 120, 0, 0.55) 100%
    ) !important;
    border: 1px solid rgba(255, 180, 60, 0.25) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow:
        0 8px 32px rgba(255, 140, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 0.5px rgba(255, 200, 100, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.solid-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.06) 75%,
        transparent 100%
    );
    animation: liquidShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}

.solid-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.8) 0%,
        rgba(255, 180, 60, 0.6) 40%,
        rgba(255, 120, 0, 0.7) 100%
    ) !important;
    border-color: rgba(255, 200, 100, 0.4) !important;
    box-shadow:
        0 14px 40px rgba(255, 140, 0, 0.35),
        0 0 30px rgba(255, 160, 40, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

/* --- .checkout-btn (carousel card overlay) --- */
.checkout-btn {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.6) 0%,
        rgba(255, 180, 60, 0.45) 50%,
        rgba(255, 120, 0, 0.55) 100%
    ) !important;
    border: 1px solid rgba(255, 200, 100, 0.2) !important;
    backdrop-filter: blur(14px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
    box-shadow:
        0 6px 24px rgba(255, 140, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.checkout-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.8) 0%,
        rgba(255, 200, 80, 0.6) 50%,
        rgba(255, 120, 0, 0.7) 100%
    ) !important;
    border-color: rgba(255, 220, 120, 0.35) !important;
    box-shadow:
        0 10px 30px rgba(255, 140, 0, 0.35),
        0 0 20px rgba(255, 160, 40, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    transform: scale(1.06) !important;
}

/* --- .arrow-btn (carousel navigation) --- */
.arrow-btn {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(140, 200, 255, 0.05) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    animation: borderFlow 8s ease infinite;
}

.arrow-btn:hover:not(.disabled) {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.5) 0%,
        rgba(255, 180, 60, 0.35) 50%,
        rgba(255, 120, 0, 0.45) 100%
    ) !important;
    border-color: rgba(255, 180, 60, 0.3) !important;
    box-shadow:
        0 8px 28px rgba(255, 140, 0, 0.2),
        0 0 20px rgba(255, 140, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.08);
}

.arrow-btn.active {
    background: linear-gradient(
        135deg,
        rgba(255, 140, 0, 0.55) 0%,
        rgba(255, 160, 40, 0.4) 50%,
        rgba(255, 120, 0, 0.5) 100%
    ) !important;
    border-color: rgba(255, 180, 60, 0.3) !important;
    box-shadow:
        0 6px 24px rgba(255, 140, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* --- .view-btn (featured section) --- */
.view-btn {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(140, 200, 255, 0.05) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    animation: borderFlow 7s ease infinite;
}

.view-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(140, 200, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.08) 100%
    ) !important;
    border-color: rgba(200, 180, 255, 0.25) !important;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(140, 200, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* --- .back-link (project detail navigation) --- */
.back-link {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(140, 200, 255, 0.05) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 0.5px rgba(255, 255, 255, 0.05) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    animation: borderFlow 6s ease infinite;
}

.back-link:hover {
    border-color: rgba(0, 255, 102, 0.25) !important;
    background: linear-gradient(
        135deg,
        rgba(0, 255, 102, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(0, 255, 102, 0.04) 100%
    ) !important;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(0, 255, 102, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: var(--accent-green) !important;
    transform: translateX(-5px) !important;
}


/* ============================================= */
/*  LIGHT THEME LIQUID GLASS (services page)     */
/* ============================================= */

/* --- .srv-btn-dark (navbar dark button) --- */
.srv-btn-dark {
    background: linear-gradient(
        135deg,
        rgba(30, 30, 30, 0.85) 0%,
        rgba(50, 50, 50, 0.7) 40%,
        rgba(30, 30, 30, 0.8) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.srv-btn-dark::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(168, 250, 90, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 75%,
        transparent 100%
    );
    animation: liquidShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

.srv-btn-dark:hover {
    background: linear-gradient(
        135deg,
        rgba(20, 20, 20, 0.9) 0%,
        rgba(40, 40, 40, 0.75) 40%,
        rgba(20, 20, 20, 0.85) 100%
    ) !important;
    border-color: rgba(168, 250, 90, 0.2) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.2),
        0 0 25px rgba(168, 250, 90, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-2px) !important;
}

/* --- .srv-btn-green (pricing CTA) --- */
.srv-btn-green {
    background: linear-gradient(
        135deg,
        rgba(168, 250, 90, 0.75) 0%,
        rgba(139, 210, 72, 0.6) 40%,
        rgba(168, 250, 90, 0.7) 100%
    ) !important;
    border: 1px solid rgba(168, 250, 90, 0.3) !important;
    backdrop-filter: blur(14px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
    box-shadow:
        0 6px 28px rgba(168, 250, 90, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.srv-btn-green::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );
    animation: liquidShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}

.srv-btn-green:hover {
    background: linear-gradient(
        135deg,
        rgba(150, 230, 77, 0.85) 0%,
        rgba(139, 210, 72, 0.7) 40%,
        rgba(150, 230, 77, 0.8) 100%
    ) !important;
    border-color: rgba(200, 255, 140, 0.4) !important;
    box-shadow:
        0 10px 35px rgba(168, 250, 90, 0.25),
        0 0 25px rgba(168, 250, 90, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
}

/* --- .submit-btn (contact form) --- */
.submit-btn {
    background: linear-gradient(
        135deg,
        rgba(168, 250, 90, 0.8) 0%,
        rgba(139, 210, 72, 0.6) 40%,
        rgba(168, 250, 90, 0.75) 100%
    ) !important;
    border: 1px solid rgba(168, 250, 90, 0.3) !important;
    backdrop-filter: blur(14px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
    box-shadow:
        0 6px 24px rgba(168, 250, 90, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );
    animation: liquidShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}

.submit-btn:hover {
    background: linear-gradient(
        135deg,
        rgba(150, 230, 77, 0.9) 0%,
        rgba(139, 210, 72, 0.75) 40%,
        rgba(150, 230, 77, 0.85) 100%
    ) !important;
    border-color: rgba(200, 255, 140, 0.45) !important;
    box-shadow:
        0 10px 32px rgba(168, 250, 90, 0.25),
        0 0 20px rgba(168, 250, 90, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    filter: none !important;
    transform: translateY(-2px);
}

/* --- Footer social icon buttons (services) --- */
.foo-socials a {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(168, 250, 90, 0.04) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.foo-socials a:hover {
    background: linear-gradient(
        135deg,
        rgba(168, 250, 90, 0.6) 0%,
        rgba(168, 250, 90, 0.4) 100%
    ) !important;
    border-color: rgba(168, 250, 90, 0.3);
    box-shadow:
        0 6px 20px rgba(168, 250, 90, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-3px);
}

/* --- Social circle buttons (services contact) --- */
.social-circles a {
    background: linear-gradient(
        135deg,
        rgba(168, 250, 90, 0.7) 0%,
        rgba(139, 210, 72, 0.5) 50%,
        rgba(168, 250, 90, 0.65) 100%
    ) !important;
    border: 1px solid rgba(200, 255, 140, 0.25);
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow:
        0 4px 16px rgba(168, 250, 90, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.social-circles a:hover {
    background: linear-gradient(
        135deg,
        rgba(168, 250, 90, 0.85) 0%,
        rgba(139, 210, 72, 0.65) 50%,
        rgba(168, 250, 90, 0.8) 100%
    ) !important;
    box-shadow:
        0 8px 24px rgba(168, 250, 90, 0.2),
        0 0 15px rgba(168, 250, 90, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-3px) scale(1.05) !important;
}


/* ============================================= */
/*  WHATSAPP FLOATING BUTTON (all pages)         */
/* ============================================= */

@keyframes whatsappPulse {
    0%, 100% {
        box-shadow:
            0 6px 24px rgba(37, 211, 102, 0.3),
            0 0 0 0 rgba(37, 211, 102, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    50% {
        box-shadow:
            0 8px 32px rgba(37, 211, 102, 0.4),
            0 0 0 12px rgba(37, 211, 102, 0),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: linear-gradient(
        135deg,
        rgba(37, 211, 102, 0.8) 0%,
        rgba(30, 180, 85, 0.65) 40%,
        rgba(37, 211, 102, 0.75) 100%
    );
    border: 1px solid rgba(100, 255, 160, 0.3);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 6px 24px rgba(37, 211, 102, 0.3),
        0 0 0 0 rgba(37, 211, 102, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: whatsappPulse 2.5s ease-in-out infinite;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.whatsapp-float i {
    font-size: 1.8rem;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.whatsapp-float:hover {
    background: linear-gradient(
        135deg,
        rgba(37, 211, 102, 0.95) 0%,
        rgba(30, 190, 90, 0.8) 40%,
        rgba(37, 211, 102, 0.9) 100%
    );
    border-color: rgba(140, 255, 190, 0.45);
    box-shadow:
        0 10px 35px rgba(37, 211, 102, 0.45),
        0 0 25px rgba(37, 211, 102, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1.1) translateY(-3px);
    animation: none;
}

.whatsapp-float:active {
    transform: scale(0.95);
}