*{box-sizing:border-box}
body{
margin:0;
font-family:Poppins,Arial;
background:#07071a;
color:#fff;
}
.container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.header{
padding:20px 40px;
background:rgba(10,10,40,.9);
position:sticky;
top:0;
z-index:9;
backdrop-filter:blur(10px);
}
.logo{
font-size:26px;
font-weight:700;
}
.logo span{color:#8f5cff}
.header a{
color:#fff;
margin-left:20px;
text-decoration:none;
}
.btn,.btn-small{
background:linear-gradient(135deg,#8f5cff,#4f9cff);
padding:12px 28px;
border-radius:30px;
color:#fff;
text-decoration:none;
border:none;
cursor:pointer;
}
.hero{
padding:120px 20px;
}
.hero-text{max-width:550px}
.hero-img img{
max-width:420px;
filter:drop-shadow(0 0 40px #8f5cff55);
}
.section{
padding:90px 20px;
text-align:center;
}
.dark{background:#0c0c33}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:40px;
}
.card{
background:#13135a;
padding:30px;
border-radius:16px;
transition:.3s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 10px 40px #8f5cff55;
}
.presale-box{
background:#13135a;
display:inline-block;
padding:35px;
border-radius:20px;
box-shadow:0 0 40px #000;
}
.img-big{
max-width:720px;
margin-top:30px;
}
.contact-form{
max-width:520px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}
input,textarea{
padding:14px;
border-radius:10px;
border:none;
outline:none;
}
.footer{
padding:25px;
background:#050512;
text-align:center;
}