/* 🌀 PLEXUS / NETWORK BACKGROUND */
#plexus-canvas {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2;
    pointer-events: none;
    opacity: 0.15; /* Subtle beauty */
}

/* 📱 FLOATER SYSTEM (FORCE VISIBLE & CORRECT SIDES) */
.floater {
    position: fixed !important;
    bottom: 30px !important;
    width: 65px !important;
    height: 65px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2.2rem !important;
    color: #fff !important;
    z-index: 2147483647 !important; /* MAX POSSIBLE Z-INDEX */
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.floater:hover { transform: scale(1.15) rotate(10deg) !important; box-shadow: 0 0 30px rgba(255,255,255,0.5) !important; }

/* 🟢 WhatsApp -> RIGHT side (as requested) */
.floater-wa {
    right: 25px !important; 
    left: auto !important;
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    border: 3px solid #fff !important;
    animation: wa-pulse-force 2s infinite !important;
}

/* 🔵 Telegram -> LEFT side (as requested) */
.floater-tg {
    left: 25px !important;
    right: auto !important;
    background: linear-gradient(135deg, #0088cc, #005580) !important;
    border: 3px solid #fff !important;
    animation: wa-pulse-force 2s infinite 1s !important;
}

@keyframes wa-pulse-force {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 📱 POPUP SYSTEM (PREMIUM DESIGN) */
.popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 3000000000; /* Higher than floaters */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.wa-premium-popup {
    background: linear-gradient(145deg, #111111, #000000);
    width: 100%;
    max-width: 400px;
    border-radius: 25px;
    border: 2px solid var(--p-gold);
    box-shadow: 0 20px 60px rgba(0,0,0,1), 0 0 30px rgba(255,215,0,0.2);
    padding: 35px 25px;
    text-align: center;
    position: relative;
    transform: translateY(0);
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-close {
    position: absolute;
    top: 15px; right: 15px;
    color: #fff; font-size: 1.5rem; cursor: pointer;
}

.wa-premium-popup h2 {
    color: var(--p-gold); font-size: 1.8rem; font-weight: 950; margin-bottom: 5px; text-transform: uppercase;
}

.wa-premium-popup .sub-text {
    color: #ddd; font-size: 1rem; margin-bottom: 25px; font-weight: 600; line-height: 1.5;
}

.wa-premium-popup .contact-row {
    background: rgba(255,255,255,0.05);
    padding: 12px; border-radius: 12px; margin-bottom: 25px;
    text-align: left; border: 1px solid rgba(255,215,0,0.1);
}

.wa-premium-popup .contact-row p {
    margin: 5px 0; color: #fff; font-size: 0.85rem; font-weight: 700;
}

.wa-btns-grid {
    display: flex; flex-direction: column; gap: 15px;
}

.btn-popup {
    width: 100%; padding: 16px; border-radius: 50px; text-decoration: none;
    font-weight: 950; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: 0.3s; text-transform: uppercase; border: none; cursor: pointer;
}

.btn-popup-wa {
    background: linear-gradient(135deg, #25D366, #128C7E); color: #fff;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.btn-popup-call {
    background: linear-gradient(135deg, #ff416c, #ff4b2b); color: #fff;
    box-shadow: 0 10px 20px rgba(255, 65, 108, 0.3);
}

.btn-popup:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(255,255,255,0.2); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 600px) {
    .floater { 
        width: 55px !important; 
        height: 55px !important; 
        font-size: 1.8rem !important; 
        bottom: 25px !important; 
    }
    .floater-wa { right: 15px !important; }
    .floater-tg { left: 15px !important; }

    .wa-premium-popup { padding: 30px 20px; width: 95%; max-width: none; }
    .wa-premium-popup h2 { font-size: 1.5rem; }
}