/* ============================================================
   AIMSYNC PREMIUM UI
   Tema: Black Metal / Silver
============================================================ */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


body{

    background:
    radial-gradient(
        circle at top,
        #18181b,
        #09090b 55%
    );

    color:white;

    font-family:'Poppins',sans-serif;

}


/* ============================================================
   SCROLL
============================================================ */


::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-track{

    background:#09090b;

}


::-webkit-scrollbar-thumb{

    background:#52525b;

    border-radius:20px;

}


/* ============================================================
   LINKS
============================================================ */


a{

    text-decoration:none;

    color:inherit;

}



/* ============================================================
   CARDS GERAIS
============================================================ */


.bg-white\/5{


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    ) !important;


    border:

    1px solid

    rgba(255,255,255,.12)
    !important;


    backdrop-filter:

    blur(20px);


    transition:

    .35s ease;


}




.bg-white\/5:hover{


    transform:

    translateY(-6px);


    border-color:

    rgba(255,255,255,.45)
    !important;


    box-shadow:

    0 20px 50px

    rgba(0,0,0,.5);


}



/* ============================================================
   TITULOS
============================================================ */


h1,h2,h3{


    letter-spacing:-0.03em;


}


/* ============================================================
   TEXTOS METALICOS
============================================================ */


.text-purple-500,
.text-purple-400,
.text-blue-400,
.text-green-400{


    color:#e4e4e7 !important;


}



.bg-purple-600,
.bg-blue-600,
.bg-green-600{


    background:

    linear-gradient(
        135deg,
        #f4f4f5,
        #71717a
    ) !important;


    color:#09090b !important;


}



.hover\:bg-purple-700:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-green-700:hover{


    opacity:.85;


}



/* ============================================================
   BOTÕES
============================================================ */


button,
a.bg-purple-600,
a.bg-blue-600,
a.bg-green-600{


    border-radius:14px;


    box-shadow:


    0 10px 30px

    rgba(0,0,0,.35);


    transition:.3s;


}



button:hover,
a.bg-purple-600:hover,
a.bg-blue-600:hover,
a.bg-green-600:hover{


    transform:

    translateY(-2px);


}



/* ============================================================
   INPUTS SELECT
============================================================ */


select{


    background:

    rgba(0,0,0,.5)!important;


    border:

    1px solid

    rgba(255,255,255,.15);


    color:white;


}



select:focus{


    outline:none;


    border-color:

    white;


}



/* ============================================================
   BARRAS DE DESEMPENHO
============================================================ */


.bg-gradient-to-r{


    background:

    linear-gradient(

        90deg,

        #ffffff,

        #71717a

    ) !important;


}



/* ============================================================
   BADGES
============================================================ */


.rounded-full{


    border:

    1px solid

    rgba(255,255,255,.2);


}



/* ============================================================
   SOMBRAS PREMIUM
============================================================ */


.shadow-xl,
.shadow-2xl{


    box-shadow:


    0 25px 60px

    rgba(0,0,0,.55)!important;


}



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


@keyframes aparecer{


from{

    opacity:0;

    transform:

    translateY(25px);

}


to{


    opacity:1;

    transform:

    translateY(0);


}


}



section{


    animation:

    aparecer .7s ease;


}



/* ============================================================
   LOGO AIMSYNC
============================================================ */


nav h1{


    color:#f4f4f5 !important;


}



nav .rounded-xl:first-child{


    background:

    linear-gradient(

        145deg,

        #ffffff,

        #52525b

    ) !important;


    color:#09090b!important;


    box-shadow:


    0 0 25px

    rgba(255,255,255,.2);


}


/* ============================================================
   MOBILE
============================================================ */


@media(max-width:768px){


h1{

    font-size:2.8rem!important;

}


}

/* ============================================================
   LOGOS 3D PLATAFORMAS
============================================================ */


img[alt*="3D"],
img[alt*="AimSync"]{

    filter:
    drop-shadow(
        0 20px 25px
        rgba(0,0,0,.8)
    );

    transition:.4s ease;

}



img[alt*="3D"]:hover,
img[alt*="AimSync"]:hover{


    transform:

    scale(1.12)
    translateY(-5px);


    filter:

    drop-shadow(
        0 25px 40px
        rgba(255,255,255,.25)
    );


}

/* ============================================================
   LOGO PREMIUM AIMSYNC
============================================================ */


.aimsync-logo{


background:

linear-gradient(
145deg,
#ffffff,
#52525b
);


color:#09090b;


font-size:32px;


font-weight:800;


box-shadow:

0 0 35px

rgba(255,255,255,.18);


}


.aimsync-logo span{


transform:

translateY(-2px);


}

/* ============================================================
   HERO PREMIUM
============================================================ */


#inicio h1{


font-weight:800;


letter-spacing:-0.06em;


}



#inicio span{


letter-spacing:.08em;


}



#inicio p{


max-width:620px;


line-height:1.7;


}


/* brilho sutil */

#inicio::before{


content:"";


position:absolute;


width:400px;

height:400px;


background:

radial-gradient(
circle,
rgba(255,255,255,.08),
transparent 70%
);


filter:blur(40px);


z-index:-1;


}

.analyzer-card{
    transition:all .30s ease;
}

.analyzer-card.blur-card{

    opacity:.40;
    filter:blur(3px) grayscale(.3);
    transform:scale(.97);
    transition:all .30s ease;

}

.analyzer-card.active-card{

    opacity:1;
    filter:none;
    transform:scale(1.02);
    box-shadow:0 20px 50px rgba(255,255,255,.08);

}

.analyzer-card.active-card:hover{

    transform:translateY(-8px) scale(1.03);

}

.particles{

position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;

}


.particles::before{

content:"";

position:absolute;

width:5px;
height:5px;

background:white;

border-radius:50%;

opacity:.35;


box-shadow:

5vw 10vh white,
12vw 35vh white,
18vw 75vh white,
25vw 20vh white,
32vw 60vh white,
40vw 85vh white,
48vw 30vh white,
55vw 70vh white,
63vw 15vh white,
70vw 45vh white,
78vw 80vh white,
85vw 25vh white,
92vw 65vh white,
15vw 90vh white,
35vw 40vh white,
60vw 90vh white,
88vw 50vh white;


animation:floatParticles 14s infinite linear;

}



.particles::after{

content:"";

position:absolute;

width:3px;
height:3px;

background:white;

border-radius:50%;

opacity:.2;


box-shadow:

8vw 55vh white,
22vw 15vh white,
30vw 90vh white,
45vw 50vh white,
52vw 10vh white,
67vw 75vh white,
75vw 35vh white,
82vw 60vh white,
95vw 20vh white;


animation:floatParticles 20s infinite linear reverse;

}



@keyframes floatParticles{

from{

transform:translateY(0);

}


to{

transform:translateY(-120px);

}

}