:root{
  --text:#ffffff;
  --icon-white:#ffffff;
  --shadow:0 2px 28px rgba(0,0,0,.35);
  --overlay: rgba(0,0,0,.35);
  --spotify:#57DB86;    
  --apple:#FFA0B0;        
  --youtube:#FF4B42;      
  --btn-text:#111;
}

@font-face{
  font-family:"HelveticaNeueCyr_Thin";
  font-style:Thin;
  font-weight:100;
  src:url("fonts/helveticaneuecyr_ultralight.otf") format("truetype");
}
@font-face{
  font-family:"HelveticaNeueCyr_Roman";
  font-style:Roman;
  font-weight:400;
  src:url("fonts/helveticaneuecyr_thin.otf") format("truetype");
}
@font-face{
  font-family:"HelveticaNeueCyr_Bold";
  font-style:Bold;
  font-weight:700;
  src:url("fonts/HelveticaBold.ttf") format("truetype");
}

*{box-sizing:border-box}
html,body{height:100%; overflow: hidden;}
body{
  margin:0;
  font-family:"HelveticaNeueCyr_Roman";
  color:var(--text);
  overflow-x:hidden;
}

.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  background:#000;
}

.bg-overlay{
  position:fixed; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.55));
  z-index:-1;
}

.page{
  min-height:95dvh;
  position: relative;
}
.hero{
  text-align:center;
  margin-top:56px;
}
.title{
  margin: 0 12px;
  line-height: 100%;
  text-transform: uppercase;
  text-shadow: 0 6px 32px rgba(0, 0, 0, .45);
  font-size: 58px;
  font-family: "HelveticaNeueCyr_Bold";
}
.subtitle{
  margin:0 auto 7px;
  max-width:720px;
  font-size:16px;
  line-height:145%;
  font-weight: 600;
  letter-spacing: 1px;
}
.text-center{
  text-align: center;
}
.bottom-note{
  font-size: 18px;
  line-height: 150%;
  font-family: 'HelveticaNeueCyr_Thin';
  letter-spacing: 1px;
  margin-top: 17px;
  opacity: 0.5;
  font-weight: 100;
  max-width: 560px;
  text-align: end;
}

.cta{
  display:grid;
  gap:12px;
  justify-content:center;
  margin-top:24px;
}
.btn{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  width:min(560px,86vw);
  height:72px;
  border-radius:16px;
  text-decoration:none;
  font-weight:700;
  font-size:22px;
  color:var(--btn-text);
  background:#fff;
  box-shadow:var(--shadow);
  backdrop-filter: blur(2px);
  transition: all 0.2s ease;
}
.btn svg path{
  transition: all 0.2s ease;
}
.btn:hover{
  color: var(--text);
}
.btn:hover svg path{ fill: var(--icon-white);}
.btn:active{transform:translateY(0)}
.btn-ico{display:grid; place-items:center}

.btn-spotify{background:var(--spotify)}
.btn-spotify:hover{
  background: #27D866;
}
.btn-spotify:focus{
  background: #1B9748;
}
.btn-apple{background:var(--apple)}
.btn-apple:hover{
  background: #FB2852;
}
.btn-apple:focus{
  background: #AF0303;
}
.btn-youtube{background:var(--youtube); color:#1b1b1b}
.btn-youtube:hover{
  background: #FF0000;
}
.btn-youtube:focus{
  background: #B20000;
}

footer{
  display:flex;
  align-items:end;
  justify-content:center;
  gap:16px;
  padding:24px 20px 26px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
}
.brand{
  font-weight:900; line-height:.92;
  letter-spacing:.02em; text-transform:uppercase;
  font-size:28px;
  margin: 0 55px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.brand .dot{font-size:14px; vertical-align:super; margin-left:2px}
.links{
  display:flex; align-items:flex-end; gap:37px;
  font-size:16px; opacity:.95;
}
.links a{  color:var(--text); text-decoration:none;text-decoration: underline;}
.copy{
  opacity: 0.5;
}
@media (min-width: 1024px){
  .title{font-size:56px}
  .subtitle{font-size:40px;}
  .btn{height:68px; font-size:20px; border-radius:18px}
  .bottom-note{font-size:16px}
}
@media (max-width: 1024px){
  .brand{
    margin: unset;
  }

  .hero{
    margin-top: 85px;
  }
  .page{
    min-height: calc(95dvh - 85px);
  }

  .copy,
  .links a{
    font-size: 15px;
  }
  .brand svg {
    width: 75px;
  }
  .cta{
    gap: 16px;
  }
  
}
@media (max-height:780px){
  footer{
      bottom: -55px;
  }
}
@media (max-height:700px){
  .btn{
    font-size: 16px;
    height: 48px;
  }
}
@media (max-width: 520px){

  .title{font-size:40px;line-height: 110%;}
  .subtitle{
   font-size: 28px;
  }
  .bottom-note{
    display: flex;
    max-width: 84%;
    font-size: 16px;
  }
  .br-desktop{display:none}
  .btn{width:calc(100vw - 28px);}
  .cta{
    margin-top: 21px;
  }
  footer{
    bottom: 14px;
  }
}
@media (max-width: 380px){
  .brand{
    display: flex;
  }
  .brand svg {
    width: 60px;
  }
  .copy,
  .links a{
    font-size: 12px;
  }
}
@media(max-width:480px){
  .hero {
      margin-top: 40px;
  }
  footer{
    bottom: -80px;
  }
  .links{
    gap: unset;
    justify-content: space-between;
    width: 100%;
  }
}
.btn-spotify{outline:1px solid rgba(0,0,0,.08)}
.btn-apple{outline:1px solid rgba(0,0,0,.06)}
.btn-youtube{outline:1px solid rgba(0,0,0,.08)}