*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,Arial,sans-serif;
}

body{
background:#0a0a0f;
color:white;
padding:25px;
}
/* NAVBAR */

.navbar{
background:#111118;
border-bottom:1px solid #222;
margin-bottom:25px;
}

.nav-container{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 20px;
}

.logo{
font-size:18px;
font-weight:700;
color:#facc15;
}

.nav-links{
display:flex;
gap:20px;
}

.nav-links a{
color:white;
text-decoration:none;
font-size:14px;
}

.nav-links a:hover{
color:#facc15;
}

/* FOLLOW SECTION */

.follow-card{
background:#12121a;
border-radius:14px;
padding:30px;
text-align:center;
margin-bottom:30px;
border:1px solid #23233a;
}

.follow-card h2{
margin-bottom:18px;
font-size:24px;
font-weight:600;
color:#facc15;
}

/* SOCIAL BUTTONS */

.social-buttons{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.btn{
display:flex;
align-items:center;
gap:6px;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-size:14px;
font-weight:500;
color:white;
transition:0.2s;
}

.btn:hover{
transform:translateY(-2px);
}

/* SOCIAL COLORS */

.youtube{background:#ff0000;}
.instagram{background:#e1306c;}
.twitter{background:#1da1f2;}
.telegram{background:#229ED9;}

/* MAIN LAYOUT */

.main-container{
max-width:1000px;
margin:auto;
display:grid;
grid-template-columns:1fr 300px;
gap:25px;
}

/* CARDS */

.card{
background:#12121a;
padding:28px;
border-radius:14px;
border:1px solid #23233a;
}

.card h3{
margin-bottom:18px;
font-size:20px;
}

/* INPUT */

input{
width:100%;
padding:14px;
margin-bottom:15px;
border-radius:8px;
border:1px solid #23233a;
background:#0f0f17;
color:white;
font-size:14px;
}

input::placeholder{
color:#9ca3af;
}

/* CLAIM BUTTON */

.claim-btn{
width:100%;
padding:15px;
border:none;
border-radius:10px;
background:#facc15;
color:black;
font-size:16px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
transition:0.2s;
}

.claim-btn:hover{
background:#fde047;
}

/* ADS */

.ad-box{
height:250px;
border-radius:10px;
background:#0f0f17;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:15px;
border:1px dashed #333;
color:#9ca3af;
}

/* MOBILE */

@media(max-width:768px){

.main-container{
grid-template-columns:1fr;
}

.ads{
margin-top:25px;
}

}