*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#000;color:#fff;overflow:hidden}

.hero{position:relative;width:100vw;height:100vh}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center
}
.overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55) 60%,rgba(0,0,0,.75))
}

.socials{
  position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
  padding:0 16px;z-index:3
}
.btn{
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;text-decoration:none;
  color:#fff;font-weight:600;font-size:16px;letter-spacing:.2px;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.25);
  backdrop-filter:saturate(140%) blur(8px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease
}
.btn i{font-size:18px}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.35);border-color:rgba(255,255,255,.45)}
.instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.youtube:hover{background:#ff0000}
.tiktok:hover{background:#000}
.telegram:hover{background:#0088cc}

@media (max-width: 640px){
  .btn{width:46%;justify-content:center;padding:12px 16px;font-size:15px}
}
@media (max-width: 420px){
  .socials{gap:12px}
  .btn{width:100%}
  .btn span{font-size:15px}
}