* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color:#0b0c10; color:#c5c6c7; }

header { background:#1f2833; padding:20px 2%; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1000; }
.logo { font-size:1.8em; font-weight:bold; color:#66fcf1; text-transform:uppercase; letter-spacing:2px; }
nav { display:flex; align-items:center; gap:20px; }
nav a { text-decoration:none; color:#c5c6c7; transition:color 0.3s; }
nav a:hover { color:#66fcf1; }

.burger { display:none; flex-direction:column; cursor:pointer; gap:5px; }
.burger div { width:25px; height:3px; background:#c5c6c7; transition:all 0.3s; }

nav.active { display:flex; flex-direction:column; background:#1f2833; position:absolute; top:70px; left:0; width:100%; padding:10px 0; }
nav.active a { margin:10px 0; }

section { padding:80px 10%; text-align:center; opacity:0; transform:translateY(30px); transition: all 0.8s ease-out; }
section.visible { opacity:1; transform:translateY(0); }

.hero {
  background: linear-gradient(to right, rgba(15,32,39,0.8), rgba(32,58,67,0.8)), 
  url('images/vpnsite.jpg') center/cover no-repeat;
  color:white; text-align:center; padding:120px 10%;
}
.hero h1 { font-size:3em; margin-bottom:20px; color:#66fcf1; }
.hero p { font-size:1.2em; max-width:600px; margin:0 auto 30px; }

.btn { background-color:#66fcf1; color:#0b0c10; padding:15px 30px; border:none; border-radius:5px; cursor:pointer; font-weight:bold; text-transform:uppercase; transition:background 0.3s; text-decoration:none; display:inline-block; }
.btn:hover { background-color:#45a29e; }

.features { display:flex; flex-wrap:wrap; justify-content:space-around; gap:30px; }
.feature { flex:1 1 250px; background:#1f2833; padding:30px; border-radius:10px; transition: transform 0.3s, background 0.3s; }
.feature:hover { transform:translateY(-5px); background:#16202a; }
.feature h3 { color:#66fcf1; margin-bottom:15px; }

.pricing { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; }
.plan { background:#1f2833; padding:40px; border-radius:10px; width:280px; }
.plan h3 { color:#66fcf1; margin-bottom:10px; }
.plan .price { font-size:2em; margin:15px 0; }

.telegram-btn { background-color:#0088cc; color:white; padding:15px 30px; border-radius:5px; text-decoration:none; display:inline-block; margin-top:20px; font-weight:bold; transition:background 0.3s; }
.telegram-btn:hover { background-color:#006fa6; }

#download p { margin-bottom:2em; }

footer { background:#1f2833; text-align:center; padding:20px; font-size:0.9em; }
footer a { color:#66fcf1; text-decoration:none; }
footer a:hover { text-decoration:underline; }

@media (max-width:768px){
  nav { display:none; }
  .burger { display:flex; }
  .features, .pricing { flex-direction:column; align-items:center; }
}