*{
    box-sizing:border-box;
}


body{

    margin:0;
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

    background:#000;
    color:white;
    overflow-x:hidden;

}



/* BACKGROUND */

.background{

    position:fixed;

    inset:0;

    z-index:-5;


    background:

    radial-gradient(circle at 20% 20%,
    rgba(0,140,255,.35),
    transparent 40%),


    radial-gradient(circle at 80% 70%,
    rgba(255,0,150,.25),
    transparent 45%),


    linear-gradient(
    120deg,
    #000,
    #07101f,
    #000
    );


    animation:
    movebg 15s infinite alternate;

}



@keyframes movebg{

from{

transform:scale(1);

}


to{

transform:scale(1.2);

}

}





/* TOP BAR */


.topbar{


position:fixed;

top:0;

left:0;

right:0;


height:80px;


display:flex;

justify-content:space-between;

align-items:center;


padding:0 40px;


background:

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


backdrop-filter:

blur(30px);


border-bottom:

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


z-index:100;



}



.logo{


font-size:30px;

font-weight:700;

letter-spacing:8px;


}




.menu button{


margin-left:10px;


padding:12px 20px;


border-radius:20px;


border:

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


background:

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


color:white;


cursor:pointer;


transition:.4s;


}




.menu button:hover{


transform:

translateY(-5px)
scale(1.05);


background:

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


}





/* HERO */


.hero{


height:100vh;


display:flex;

flex-direction:column;


justify-content:center;


align-items:center;


text-align:center;


padding:30px;


}



.hero h1{


font-size:

clamp(80px,15vw,200px);


margin:0;


letter-spacing:20px;


background:

linear-gradient(
90deg,
white,
#4da3ff,
#ff4fd8
);


-webkit-background-clip:text;

color:transparent;


}



.hero h2{


font-size:45px;


margin:10px;


}



.hero p{


font-size:22px;


color:#aaa;


}







/* SECTIONS */


.section{


padding:

120px 40px;


text-align:center;


}




.section>h2{


font-size:60px;


margin-bottom:50px;


}





/* GRID */


.grid{


max-width:1200px;


margin:auto;


display:grid;


grid-template-columns:

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


gap:30px;


}






/* CARDS */


.card{


background:

rgba(255,255,255,.07);


border:

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



border-radius:35px;



padding:35px;



backdrop-filter:

blur(40px);



transition:.5s;



box-shadow:

0 20px 50px rgba(0,0,0,.4);



animation:

show .8s;



}




@keyframes show{


from{

opacity:0;

transform:
translateY(50px);

}



to{

opacity:1;

transform:
translateY(0);

}


}




.card:hover{


transform:

translateY(-15px)
scale(1.04);



border-color:

#4da3ff;


box-shadow:


0 0 50px
rgba(77,163,255,.5);


}




.card h3{


font-size:28px;


}



.card p{


color:#aaa;


font-size:17px;


}




/* BUTTONS */


a,
.card button{


display:inline-block;


margin-top:20px;


padding:

14px 30px;


border-radius:30px;



background:

linear-gradient(
135deg,
#fff,
#aaa
);



color:#000;



font-weight:700;



text-decoration:none;



border:none;



cursor:pointer;



transition:.4s;


}




a:hover,
.card button:hover{


transform:

translateY(-7px)
scale(1.08);


box-shadow:

0 0 40px white;


}







/* SEARCH */


.search-panel{


position:fixed;


top:90px;


left:50%;


transform:

translateX(-50%);



z-index:50;



display:none;


}



#search{


width:350px;


padding:15px 25px;


border-radius:30px;


background:

rgba(255,255,255,.1);



border:

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



color:white;



font-size:18px;



outline:none;



backdrop-filter:

blur(20px);



}




/* FUTURE */


.future{


min-height:100vh;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;



text-align:center;


background:


radial-gradient(
circle,
rgba(0,120,255,.25),
transparent 60%
);



}



.future h1{


font-size:90px;


margin:10px;



background:

linear-gradient(
90deg,
#fff,
#4da3ff
);


-webkit-background-clip:text;


color:transparent;


}





/* FOOTER */


footer{


padding:

80px 30px;


text-align:center;


color:#777;


border-top:

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


}




footer p{


max-width:900px;


margin:auto;


line-height:1.8;


}