*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial,sans-serif;
background:#050816;
color:#fff;
}

.container{
max-width:1100px;
margin:auto;
padding:20px;
}

.hero{
padding:90px 20px;
text-align:center;
background:radial-gradient(circle,#16245a,#050816);
}

.badge{
color:#6ee7ff;
letter-spacing:3px;
font-weight:bold;
}

h1{
font-size:48px;
margin:25px 0;
}

.hero p{
font-size:20px;
color:#cbd5e1;
}

.telegram-btn{
display:inline-block;
margin-top:30px;
padding:18px 40px;
border-radius:50px;
background:#168cff;
color:white;
text-decoration:none;
font-weight:bold;
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.card{
background:#111827;
padding:25px;
border-radius:20px;
border:1px solid #24345f;
}

.info{
text-align:center;
padding:60px 20px;
}

footer{
padding:30px;
text-align:center;
color:#94a3b8;
font-size:14px;
}

@media(max-width:700px){
h1{
font-size:32px;
}

.cards{
grid-template-columns:1fr;
}
}