/* =========================================
   FLOATING
========================================= */

@keyframes floating{

    0%{

        transform:
            translateY(0px);

    }

    50%{

        transform:
            translateY(-12px);

    }

    100%{

        transform:
            translateY(0px);

    }

}



/* =========================================
   PULSE
========================================= */

@keyframes pulseGlow{

    0%{

        transform: scale(1);

        opacity: 0.7;

    }

    50%{

        transform: scale(1.12);

        opacity: 0.25;

    }

    100%{

        transform: scale(1);

        opacity: 0.7;

    }

}



/* =========================================
   ROTATE
========================================= */

@keyframes rotatePlanet{

    from{

        transform:
            rotate(25deg);

    }

    to{

        transform:
            rotate(385deg);

    }

}



/* =========================================
   SHINE
========================================= */

@keyframes shineEffect{

    0%{

        transform:
            translateX(-120%);

    }

    100%{

        transform:
            translateX(220%);

    }

}



/* =========================================
   GLOW
========================================= */

@keyframes glowAnimation{

    0%{

        opacity: 0.4;

    }

    50%{

        opacity: 0.8;

    }

    100%{

        opacity: 0.4;

    }

}



/* =========================================
   HERO BLURS
========================================= */

.hero-blur{

    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.25;

    z-index: -1;

    animation:
        glowAnimation 5s infinite ease-in-out;

}

.hero-blur-1{

    width: 450px;
    height: 450px;

    background: #6bc22e;

    top: 0;
    left: -120px;

}

.hero-blur-2{

    width: 550px;
    height: 550px;

    background: #005eff;

    right: -180px;
    bottom: -150px;

}



/* =========================================
   PLANET RING
========================================= */

.planet-ring{

    animation:
        rotatePlanet 12s linear infinite;

}



/* =========================================
   HERO VISUAL
========================================= */

.hero-visual{

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 650px;

}



/* =========================================
   NETWORK CORE
========================================= */

.network-core{

    position: relative;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(107,194,46,0.14),
            rgba(0,94,255,0.04)
        );

    border:
        1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(20px);

    animation:
        floating 6s ease-in-out infinite;

}



/* =========================================
   PULSE RINGS
========================================= */

.pulse-ring{

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(107,194,46,0.18);

    animation:
        pulseGlow 4s infinite ease-in-out;

}

.pulse-ring-1{

    width: 100%;
    height: 100%;

}

.pulse-ring-2{

    width: 125%;
    height: 125%;

    animation-delay: 1s;

}

.pulse-ring-3{

    width: 150%;
    height: 150%;

    animation-delay: 2s;

}



/* =========================================
   CORE CENTER
========================================= */

.core-center{

    width: 110px;
    height: 110px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #6bc22e,
            #1d7bff
        );

    box-shadow:
        0 0 40px rgba(107,194,46,0.45);

}

.core-center i{

    font-size: 42px;

    color: #ffffff;

}



/* =========================================
   FLOATING CARDS
========================================= */

.floating-card{

    position: absolute;

    padding: 18px 24px;

    border-radius: 20px;

    background:
        rgba(8,15,40,0.72);

    border:
        1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(18px);

    display: flex;

    align-items: center;

    gap: 14px;

    color: #ffffff;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25);

    animation:
        floating 5s ease-in-out infinite;

}

.floating-card i{

    color: var(--primary-color);

    font-size: 22px;

}

.card-1{

    top: 60px;
    left: 0;

}

.card-2{

    top: 120px;
    right: 10px;

    animation-delay: 1s;

}

.card-3{

    bottom: 90px;
    left: 30px;

    animation-delay: 2s;

}

.card-4{

    bottom: 40px;
    right: 0;

    animation-delay: 3s;

}



/* =========================================
   SERVICE CARD HOVER
========================================= */

.service-card::before,
.plan-card::before,
.coverage-card::before{

    content: '';

    position: absolute;

    width: 120px;
    height: 300%;

    background:
        linear-gradient(
            rgba(255,255,255,0),
            rgba(255,255,255,0.08),
            rgba(255,255,255,0)
        );

    top: -100%;
    left: -150%;

    transform:
        rotate(25deg);

    transition: 0.8s;

}

.service-card:hover::before,
.plan-card:hover::before,
.coverage-card:hover::before{

    left: 180%;

}



/* =========================================
   MAPA COBERTURA
========================================= */

.coverage-map{

    position: relative;

    width: 100%;
    height: 520px;

    border-radius: 30px;

    background:
        rgba(8,15,40,0.72);

    border:
        1px solid rgba(255,255,255,0.08);

    overflow: hidden;

    backdrop-filter: blur(20px);

}



/* =========================================
   GRID MAPA
========================================= */

.map-grid{

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

}



/* =========================================
   MAP CENTER
========================================= */

.map-center{

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

}

.center-core{

    width: 90px;
    height: 90px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #6bc22e,
            #005eff
        );

    box-shadow:
        0 0 40px rgba(107,194,46,0.45);

    position: relative;

    z-index: 2;

}

.center-core i{

    color: #ffffff;

    font-size: 32px;

}

.center-ring{

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border:
        1px solid rgba(107,194,46,0.18);

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    animation:
        pulseGlow 5s infinite;

}



/* =========================================
   MAP POINTS
========================================= */

.map-point{

    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: var(--primary-color);

    box-shadow:
        0 0 18px rgba(107,194,46,0.8);

}

.map-point span{

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border:
        1px solid rgba(107,194,46,0.25);

    animation:
        pulseGlow 3s infinite;

}

.point-1{

    top: 18%;
    left: 22%;

}

.point-2{

    top: 30%;
    right: 18%;

}

.point-3{

    bottom: 20%;
    left: 30%;

}

.point-4{

    bottom: 25%;
    right: 25%;

}



/* =========================================
   WHATSAPP FLOAT
========================================= */

.whatsapp-float{

    animation:
        floating 3s ease-in-out infinite;

}

.whatsapp-float:hover{

    transform:
        scale(1.08);

}



/* =========================================
   BUTTON SHINE
========================================= */

.btn-sign,
.btn-primary-custom,
.btn-plan,
.submit-btn{

    position: relative;

    overflow: hidden;

}

.btn-sign::before,
.btn-primary-custom::before,
.btn-plan::before,
.submit-btn::before{

    content: '';

    position: absolute;

    width: 60px;
    height: 250%;

    background:
        rgba(255,255,255,0.25);

    top: -70%;
    left: -120px;

    transform:
        rotate(25deg);

}

.btn-sign:hover::before,
.btn-primary-custom:hover::before,
.btn-plan:hover::before,
.submit-btn:hover::before{

    animation:
        shineEffect 0.8s ease;

}