/* =====================================
   RESET
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:"Inter",sans-serif;

    color:white;

    overflow-x:hidden;

    cursor:none;

    background:transparent;

}



/* =====================================
   CURSOR
===================================== */


.cursor{

    position:fixed;

    width:18px;

    height:18px;

    border-radius:50%;


    background:white;


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


    pointer-events:none;


    z-index:99999;


    box-shadow:

    0 0 15px #00ffff,
    0 0 35px #ff00d4;


    transition:

    width .2s,
    height .2s;

}



/* =====================================
   BACKGROUND VIDEO
===================================== */


.background{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-1;

}



/* ESCURECIMENTO DO VIDEO */

.overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    rgba(0,0,0,.45);

    z-index:0;

}



/* CONTEUDO */

header,
.hero,
.section,
footer,
.views{

    position:relative;

    z-index:2;

}




/* =====================================
   HEADER
===================================== */


header{

    position:fixed;


    top:0;
    left:0;


    width:100%;


    height:80px;



    display:flex;


    justify-content:space-between;


    align-items:center;



    padding:0 8%;



    background:

    rgba(0,0,0,.20);



    backdrop-filter:

    blur(20px);



    border-bottom:

    1px solid rgba(255,255,255,.08);



    z-index:100;

}



.logo{


    font-size:25px;


    font-weight:900;


    letter-spacing:-1px;

}



nav{


    display:flex;


    gap:35px;

}



nav a{


    color:#ddd;


    text-decoration:none;


    font-size:15px;


    transition:.3s;

}



nav a:hover{


    color:#00eaff;


}






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


.hero{


    height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;



    text-align:center;

}



.hero-content{


    animation:

    fadeIn 1.5s ease;

}



.hero h1{

    font-family:"Space Grotesk", sans-serif;

    font-size:

    clamp(65px,9vw,110px);

    font-weight:700;

    letter-spacing:-5px;

    line-height:.9;


    color:white;


    -webkit-text-stroke:

    1px rgba(90,70,180,.45);



    text-shadow:

    0 0 8px rgba(90,70,180,.35),

    0 0 25px rgba(50,80,180,.25);



}


.hero p{


    margin-top:35px;


    font-size:22px;


    color:#ddd;

}
/* =====================================
   BUTTONS
===================================== */


.buttons{


    margin-top:45px;


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;

}



.buttons a{


    padding:

    14px 30px;


    border-radius:15px;


    text-decoration:none;


    color:white;



    background:

    rgba(255,255,255,.08);



    border:

    1px solid rgba(255,255,255,.15);



    backdrop-filter:

    blur(15px);



    transition:.35s;

}




.buttons a:hover{


    background:white;


    color:black;


    transform:

    translateY(-5px);



    box-shadow:

    0 0 35px rgba(0,238,255,.4);

}







/* =====================================
   SECTIONS
===================================== */


.section{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;



    padding:

    100px 8%;

}





.glass{


    width:100%;


    max-width:1100px;


    padding:60px;



    border-radius:35px;



    background:

    rgba(15,15,15,.45);



    backdrop-filter:

    blur(25px);



    border:

    1px solid rgba(255,255,255,.10);



    text-align:center;

}




.glass h2{


    font-size:55px;


    margin-bottom:30px;


}



.glass p{


    color:#ccc;


    font-size:18px;


    line-height:1.8;

}





/* =====================================
   TAGS
===================================== */


.tags{


    margin-top:40px;


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;

}



.tags span{


    padding:

    10px 20px;


    border-radius:30px;


    background:

    rgba(255,255,255,.08);



    border:

    1px solid rgba(255,255,255,.12);



    transition:.3s;

}




.tags span:hover{


    background:#00eaff;


    color:#000;

}







/* =====================================
   SETUP CARDS
===================================== */


.setup-grid{


    margin-top:50px;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(230px,1fr));


    gap:25px;

}




.card{


    padding:35px;



    border-radius:25px;



    background:

    rgba(255,255,255,.06);



    border:

    1px solid rgba(255,255,255,.12);



    transition:.35s;



}




.card:hover{


    transform:

    translateY(-10px);



    border-color:#00eaff;



    box-shadow:


    0 0 35px rgba(0,234,255,.35);

}





.card h3{


    display:flex;


    justify-content:center;


    align-items:center;



    gap:12px;



    margin-bottom:18px;


}



.card h3 i{


    color:#00eaff;


    font-size:22px;



    transition:.3s;

}





.card:hover h3 i{


    color:#ff00d4;


    transform:

    scale(1.2);

}





.card p{


    font-size:16px;


}
/* =====================================
   SOCIAL
===================================== */


.social{


    margin-top:40px;


    display:flex;


    justify-content:center;


    gap:25px;


}




.social a{


    width:65px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:20px;



    background:

    rgba(255,255,255,.08);



    color:white;



    font-size:28px;



    text-decoration:none;



    transition:.35s;


}





.social a:hover{


    background:white;


    color:black;



    transform:

    translateY(-8px);



    box-shadow:

    0 0 30px #00eaff;

}






/* =====================================
   VIEWS COUNTER
===================================== */


.views{


    position:fixed;


    bottom:25px;


    left:25px;



    padding:

    10px 18px;



    border-radius:15px;



    background:

    rgba(0,0,0,.45);



    backdrop-filter:

    blur(15px);



    color:#ddd;



    z-index:50;

}







/* =====================================
   FOOTER
===================================== */


footer{


    text-align:center;


    padding:40px;


    color:#888;

}






/* =====================================
   ANIMATION
===================================== */


@keyframes fadeIn{


    from{


        opacity:0;


        transform:

        translateY(40px);


    }


    to{


        opacity:1;


        transform:

        translateY(0);


    }

}







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


@media(max-width:700px){


header{


    padding:0 25px;

}



.logo{

    font-size:20px;

}



nav{


    display:none;

}



.hero h1{


    letter-spacing:-3px;

}



.hero p{


    font-size:18px;

}



.glass{


    padding:35px 20px;


}



.glass h2{


    font-size:38px;

}



.setup-grid{


    grid-template-columns:1fr;

}



.buttons a{


    width:100%;

}



.social{


    gap:15px;

}


}