body {
    font-family: Inter, sans-serif;
    background: #050816;
    color: #FFF;
}

.animated-bg {
    position: fixed;
    inset: 0;
    z-index: -5;

    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, .20), transparent 0%),
        radial-gradient(circle at 80% 30%, rgba(139, 92, 246, .18), transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(6, 182, 212, .12), transparent 35%),
        linear-gradient(135deg, #020617, #071128, #020617);

    background-size: 200% 200%;

    animation: gradientMove 18s ease infinite;
}

.animated-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .022) 1px,
            transparent 1px),
        linear-gradient(45deg,
            transparent 49%,
            rgba(59, 130, 246, .018) 50%,
            transparent 51%);
    background-size:
        70px 70px,
        70px 70px,
        140px 140px;
    animation: gridMove 80s linear infinite;

}







#aurora-container {

    position: absolute;
    inset: 0;

}

.aurora {

    position: absolute;

    border-radius: 50%;

    filter: blur(180px);

    mix-blend-mode: screen;

    pointer-events: none;

    animation-name: auroraFloat;

    animation-timing-function: ease-in-out;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    will-change: transform;

}

@keyframes auroraFloat {

    0% {

        transform:
            translate3d(0, 0, 0) scale(1) rotate(0deg);

    }

    50% {

        transform:
            translate3d(150px, -120px, 0) scale(1.18) rotate(180deg);

    }

    100% {

        transform:
            translate3d(-120px, 150px, 0) scale(.92) rotate(360deg);

    }

}













/* ===========================================================
   BACKGROUND TECNOLÓGICO
===========================================================*/

.aurora-background {

    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -20;

    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, .20), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(139, 92, 246, .18), transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(6, 182, 212, .15), transparent 45%),
        linear-gradient(-45deg,
            #020617,
            #071128,
            #081c3a,
            #1e1b4b,
            #020617);

    background-size:
        220% 220%,
        220% 220%,
        220% 220%,
        500% 500%;

    animation:
        gradientMove 35s ease infinite;
}


@keyframes gradientMove {

    0% {

        background-position:
            0% 0%,
            100% 0%,
            50% 100%,
            0% 50%;

    }

    25% {

        background-position:
            30% 40%,
            80% 10%,
            70% 70%,
            100% 50%;

    }

    50% {

        background-position:
            100% 50%,
            0% 80%,
            40% 0%,
            50% 100%;

    }

    75% {

        background-position:
            60% 80%,
            30% 20%,
            100% 100%,
            0% 100%;

    }

    100% {

        background-position:
            0% 0%,
            100% 0%,
            50% 100%,
            0% 50%;

    }

}


/* ===========================================================
   REDE TECNOLÓGICA
===========================================================*/

.tech-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -8;
    pointer-events: none;
    opacity: .22;

}

.tech-network line {
    stroke: #3b82f6;
    stroke-width: 1;
    opacity: .18;
    stroke-linecap: round;
}

.tech-network circle {
    fill: #60a5fa;
    filter: drop-shadow(0 0 8px #3b82f6);
}

.network-pulse {
    fill: #60a5fa;
    filter: drop-shadow(0 0 15px #60a5fa);
    animation: pulseNode 3s ease infinite;
}

@keyframes pulseNode {
    0% {
        opacity: .2;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.6);
    }

    100% {
        opacity: .2;
        transform: scale(.7);
    }

}


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

.aurora-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .022) 1px,
            transparent 1px),
        linear-gradient(45deg,
            transparent 49%,
            rgba(59, 130, 246, .018) 50%,
            transparent 51%);
    background-size:
        70px 70px,
        70px 70px,
        140px 140px;
    animation: gridMove 80s linear infinite;

}


/* ===========================================================
   TEXTURA
===========================================================*/

.aurora-background::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .025;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .35) 1px, transparent 1px);
    background-size: 14px 14px;
}

/* ===========================================================
   BLOBS
===========================================================*/
.aurora {
    position: absolute;
    width: 1300px;
    height: 1300px;
    border-radius: 50%;
    filter: blur(180px);
    mix-blend-mode: screen;
    opacity: .22;
    animation: auroraMove linear infinite alternate;

}


/* ===========================================================
   AURORAS (MESH GRADIENT)
===========================================================*/

.aurora1 {
    background:
        radial-gradient(circle at 30% 30%,
            rgba(37, 99, 235, .95),
            rgba(37, 99, 235, .35),
            transparent 60%),
        radial-gradient(circle at 70% 70%,
            rgba(6, 182, 212, .80),
            rgba(6, 182, 212, .18),
            transparent 68%);
    top: -20vh;
    left: -15vw;
    animation-duration: 65s;
}

.aurora2 {
    background:
        radial-gradient(circle at 35% 35%,
            rgba(124, 58, 237, .95),
            rgba(124, 58, 237, .35),
            transparent 60%),
        radial-gradient(circle at 75% 70%,
            rgba(59, 130, 246, .80),
            rgba(59, 130, 246, .18),
            transparent 68%);
    top: 45vh;
    right: -20vw;
    animation-duration: 90s;
}

.aurora3 {
    background:
        radial-gradient(circle at 30% 30%,
            rgba(6, 182, 212, .95),
            rgba(6, 182, 212, .35),
            transparent 60%),
        radial-gradient(circle at 70% 65%,
            rgba(20, 184, 166, .80),
            rgba(20, 184, 166, .18),
            transparent 68%);
    top: 120vh;
    left: -10vw;
    animation-duration: 75s;
}

.aurora4 {
    background:
        radial-gradient(circle at 30% 30%,
            rgba(34, 197, 94, .92),
            rgba(34, 197, 94, .30),
            transparent 60%),
        radial-gradient(circle at 72% 72%,
            rgba(6, 182, 212, .75),
            rgba(6, 182, 212, .16),
            transparent 68%);
    top: 210vh;
    right: -15vw;
    opacity: .16;
    animation-duration: 95s;
}

.aurora5 {
    background:
        radial-gradient(circle at 35% 35%,
            rgba(236, 72, 153, .92),
            rgba(236, 72, 153, .32),
            transparent 60%),
        radial-gradient(circle at 75% 65%,
            rgba(124, 58, 237, .75),
            rgba(124, 58, 237, .18),
            transparent 68%);
    top: 310vh;
    left: 20vw;
    opacity: .14;
    animation-duration: 80s;
}

.aurora6 {
    background:
        radial-gradient(circle at 30% 35%,
            rgba(59, 130, 246, .95),
            rgba(59, 130, 246, .35),
            transparent 60%),
        radial-gradient(circle at 70% 70%,
            rgba(139, 92, 246, .78),
            rgba(139, 92, 246, .18),
            transparent 68%);
    top: 430vh;
    right: -10vw;
    opacity: .18;
    animation-duration: 85s;
}

.aurora7 {
    background:
        radial-gradient(circle at 28% 32%,
            rgba(139, 92, 246, .95),
            rgba(139, 92, 246, .35),
            transparent 60%),
        radial-gradient(circle at 72% 68%,
            rgba(236, 72, 153, .70),
            rgba(236, 72, 153, .16),
            transparent 68%);
    top: 560vh;
    left: -15vw;
    opacity: .16;
    animation-duration: 100s;
}

.aurora8 {
    background:
        radial-gradient(circle at 35% 35%,
            rgba(20, 184, 166, .92),
            rgba(20, 184, 166, .30),
            transparent 60%),
        radial-gradient(circle at 72% 70%,
            rgba(56, 189, 248, .78),
            rgba(56, 189, 248, .18),
            transparent 68%);
    top: 680vh;
    right: 5vw;
    opacity: .15;
    animation-duration: 90s;
}

.aurora9 {
    background:
        radial-gradient(circle at 30% 30%,
            rgba(56, 189, 248, .95),
            rgba(56, 189, 248, .35),
            transparent 60%),
        radial-gradient(circle at 72% 70%,
            rgba(37, 99, 235, .75),
            rgba(37, 99, 235, .18),
            transparent 68%);
    top: 790vh;
    left: 30vw;
    opacity: .14;
    animation-duration: 120s;
}

.aurora10 {
    background:
        radial-gradient(circle at 35% 35%,
            rgba(37, 99, 235, .95),
            rgba(37, 99, 235, .35),
            transparent 60%),
        radial-gradient(circle at 72% 72%,
            rgba(6, 182, 212, .75),
            rgba(6, 182, 212, .18),
            transparent 68%);
    top: 900vh;
    right: -15vw;
    opacity: .16;
    animation-duration: 80s;
}

.aurora11 {
    background:
        radial-gradient(circle at 30% 35%,
            rgba(147, 51, 234, .95),
            rgba(147, 51, 234, .35),
            transparent 60%),
        radial-gradient(circle at 70% 70%,
            rgba(59, 130, 246, .78),
            rgba(59, 130, 246, .18),
            transparent 68%);
    top: 1020vh;
    left: -10vw;
    opacity: .16;
    animation-duration: 95s;
}

.aurora12 {
    background:
        radial-gradient(circle at 35% 35%,
            rgba(8, 145, 178, .95),
            rgba(8, 145, 178, .35),
            transparent 60%),
        radial-gradient(circle at 72% 72%,
            rgba(20, 184, 166, .75),
            rgba(20, 184, 166, .18),
            transparent 68%);
    top: 1140vh;
    right: 10vw;
    opacity: .15;
    animation-duration: 110s;
}


.aurora::before{
    content:"";
    position:absolute;
    inset:-15%;
    border-radius:50%;
    background:inherit;
    animation: auroraSpin 90s linear infinite;
}

@keyframes auroraSpin{
    from{
        transform:rotate(0deg) scale(1);
    }
    to{
        transform:rotate(360deg) scale(1.15);
    }
}


.bg-blue-600{

position:relative;

overflow:hidden;

}

.bg-blue-600::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:80%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent);

transition:.8s;

}

.bg-blue-600:hover::before{

left:150%;

}

.animate-float{

animation:floatHero 8s ease-in-out infinite;

filter:

drop-shadow(0 30px 80px rgba(37,99,235,.18));

}

@keyframes floatHero{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

/* ===========================================================
   ANIMAÇÃO DOS BLOBS
===========================================================*/

@keyframes auroraMove {

    0% {

        transform:
            translate3d(0, 0, 0) scale(1) rotate(0deg);

    }

    25% {

        transform:
            translate3d(120px, -80px, 0) scale(1.12) rotate(90deg);

    }

    50% {

        transform:
            translate3d(-100px, 120px, 0) scale(.92) rotate(180deg);

    }

    75% {

        transform:
            translate3d(150px, 40px, 0) scale(1.20) rotate(270deg);

    }

    100% {

        transform:
            translate3d(-120px, -120px, 0) scale(1) rotate(360deg);

    }

}



/* ===========================================================
   GRID MOVENDO
===========================================================*/

@keyframes gridMove {

    from {
        transform:
            translate(0, 0);
    }

    to {
        transform:
            translate(170px, 170px);

    }

}

@keyframes gridOpacity {

    0%,
    100% {

        opacity: .45;

    }

    50% {

        opacity: .70;

    }

}


/* ===========================================================
   RESPONSIVO
===========================================================*/

@media (max-width:992px) {

    .aurora {

        width: 850px;
        height: 850px;

        filter: blur(130px);

        opacity: .18;

    }

}



.tech-lines {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: .12;

    z-index: -5;

}

.tech-lines svg {

    width: 100%;
    height: 100%;

}

.tech-lines path {

    fill: none;

    stroke: #3b82f6;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 12 10;

    animation: circuitFlow 25s linear infinite;

}

.tech-lines circle {

    fill: #60a5fa;

    filter: drop-shadow(0 0 10px #60a5fa);

    animation: pulseNode 3s ease infinite;

}


@keyframes circuitFlow {

    from {

        stroke-dashoffset: 0;

    }

    to {

        stroke-dashoffset: -500;

    }

}



@keyframes pulseNode {

    0% {

        opacity: .3;

        transform: scale(.8);

    }

    50% {

        opacity: 1;

        transform: scale(1.5);

    }

    100% {

        opacity: .3;

        transform: scale(.8);

    }

}

.cursor-glow {

    position: fixed;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    pointer-events: none;

    z-index: -1;

    background:
        radial-gradient(circle,
            rgba(59, 130, 246, .18),
            rgba(139, 92, 246, .10),
            transparent 70%);

    filter: blur(70px);

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

    transition:
        left .15s linear,
        top .15s linear;

}


.particles {

    position: absolute;

    inset: 0;

}

.particles span {

    position: absolute;

    width: 2px;

    height: 2px;

    background: #60a5fa;

    border-radius: 50%;

    box-shadow: 0 0 12px #3b82f6;

    opacity: .4;

    animation: particleFloat linear infinite;

}


@keyframes particleFloat {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(-120px);

    }

}






.glass {
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .08);
}

.blur-ball {
    position: absolute;
    border-radius: 999px;
    filter: blur(120px);
}

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

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

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

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.number {
    font-size: 50px;
    font-weight: 900;
}

html {
    scroll-behavior: smooth;
}



html {

    scroll-behavior: smooth;

}

section {

    scroll-margin-top: 90px;

}

/* ---------------------------- */

.nav-link {

    position: relative;

    color: #CBD5E1;

    font-weight: 500;

    transition: .35s;

}

.nav-link:hover {

    color: white;

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 0;

    height: 2px;

    background: #3B82F6;

    transition: .35s;

    border-radius: 999px;

}

.nav-link.active {

    color: white;

}

.nav-link.active::after {

    width: 100%;

}


.mobile-link {
    padding: 18px 0px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #CBD5E1;
    transition: .3s;
}

.mobile-link:hover {
    color: white;
    padding-left: 10px;

}