* {

  box-sizing: border-box;

}



body {

  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Arial;

  min-height: 100vh;

  display: flex;
  justify-content: center;

  padding-top: 60px;

  color: #000;

}



/* BACKGROUND */


.bg {

  position: fixed;

  width: 100%;
  height: 100%;

  z-index: -1;

}


.bg-img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:

    blur(80px) brightness(1.2);

  transform: scale(1.3);

}



/* CONTAINER */


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  width: 90%;
  max-width: 400px;

  margin: 0 auto;

}



/* AVATAR */


.avatar {

  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 16px;

  display: flex;
  justify-content: center;
  align-items: center;

}



.avatar-img,
.avatar-video {

  position: absolute;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  object-fit: cover;

}


.avatar-img {

  z-index: 1;

}


.avatar-video {

  opacity: 0;

  transition: .6s;

}



/* TEXT */


h1 {

  margin-bottom: 20px;

  font-size: 26px;

  font-weight: 600;

}




.link-button {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 30px;

  background: rgba(249, 247, 247, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  text-decoration: none;
  color: black;
  transition: 0.2s;

  width: 100%;
  box-sizing: border-box;
}





.link-button:hover {

  transform: scale(1.03);

  background: rgba(255, 255, 255, 0.35);

}



.link-button:active {

  transform: scale(0.97);

}



.link-logo {


  width: 42px;
  height: 42px;

  border-radius: 50%;

}



.link-text {


  flex: 1;

  text-align: center;

  font-weight: 600;

}



.dots {

  padding-right: 10px;

}



/* ICONS */


.icons {


  display: flex;

  justify-content: center;

  gap: 35px;

}



.icons img {

  width: 28px;

  opacity: .8;

  transition: .2s;

}



.icons img:hover {

  opacity: 1;

  transform: scale(1.2);

}


/* Mobile: немного больший отступ сверху для точного позиционирования */
@media (max-width:768px) {

  body {

    padding-top: 70px;

  }

}