*{margin:0;padding:0;box-sizing:border-box}
body{background:#000;color:#fff;font-family:"TikTok",sans-serif;scroll-behavior:smooth}

@font-face{font-family:"Bebas";src:url("fonts/BebasNeueCyrillic-Bold.ttf")}
@font-face{font-family:"TikTok";src:url("fonts/TikTokSans-Regular.ttf")}

/* HEADER — на ПК по центру */
.header{
position:fixed;
top:0;
width:100%;
z-index:1000;
padding:20px 8%;
display:flex;
justify-content:center;
align-items:center;
}
.burger{
display:none;
font-size:28px;
cursor:pointer;
color:#fff;
}
.header nav{
display:flex;
gap:50px;
}
.header a{
font-family:"Bebas";
font-size:22px;
color:#fff;
text-decoration:none;
opacity:.8;
transition:.3s;
}
.header a:hover{opacity:1}

.header-gradient{
position:absolute;
top:0;left:0;
width:100%;height:120px;
background:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,0));
z-index:-1;
}

/* HERO */
.hero{height:100vh;position:relative;overflow:hidden}
.hero-bg{position:absolute;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;width:100%;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,0)); z-index:1;}
.hero-content{position:absolute;top:50%;transform:translateY(-50%);left:8%;right:5%;z-index:2}
.hero h1{font-family:"Bebas";font-size:120px;line-height:.9}
.hero-sub{margin-top:20px;font-size:18px;opacity:.9}
.hero-bottom-gradient{
position:absolute;bottom:0;width:100%;height:220px;
background:linear-gradient(to bottom,rgba(0,0,0,0),#000);
z-index:1;
}

/* SOCIALS */
.socials{margin-top:30px;display:flex;gap:14px}
.section-socials{margin-top:40px}
.small-socials{margin-top:15px}
.socials a{
width:40px;height:40px;background:#1a1a1a;border-radius:10px;
display:flex;align-items:center;justify-content:center;
transition:.3s;opacity:.8
}
.socials a:hover{opacity:1;transform:translateY(-3px)}
.socials img{width:20px}

/* SECTION */
.studio{padding:70px 8%}
.studio h2{font-family:"Bebas";font-size:72px;margin-bottom:10px}
.studio-sub{margin-top:10px;font-size:18px;opacity:.7}

/* SLIDER */
.slider-wrapper{position:relative;margin-top:30px}
.slider{
display:flex;
gap:24px;
overflow-x:auto;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}
.slider::-webkit-scrollbar{display:none}

/* КАРТОЧКИ */
.card{
flex:0 0 360px;
width:360px;
background:#111;
border-radius:16px;
padding:30px;
border:1px solid rgba(255,255,255,.05);
transition:.3s;
display:flex;
flex-direction:column;
}
.card:hover{transform:translateY(-8px)}
.card h3{font-family:"Bebas";font-size:28px;margin-bottom:12px}
.card p{font-size:15px;opacity:.7;line-height:1.5}

/* MEDIA */
.media{
width:100%;
aspect-ratio:3/4;
background:#1a1a1a;
border-radius:12px;
margin-bottom:18px;
overflow:hidden;
position:relative;
transition: all .3s ease;
}
.media:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.media video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.video-player-overlay{
position:absolute;
top:0;left:0;
width:100%;height:100%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.3);
opacity:0;
transition: all .3s ease;
pointer-events:none;
backdrop-filter: blur(0px);
}
.media:hover .video-player-overlay{
opacity:1;
backdrop-filter: blur(2px);
}
.media.playing .video-player-overlay{
opacity:0;
pointer-events:none;
}
.media.playing.show-controls .video-player-overlay{
opacity:1;
backdrop-filter: blur(2px);
}
.video-play-btn{
width:70px;height:70px;
background:rgba(255,165,0,.95);
border:none;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
pointer-events:auto;
transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
box-shadow: 0 4px 20px rgba(255,165,0,.3);
}
.video-play-btn::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #ffa500;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.video-play-btn:hover{
background:#ffa500;
transform:scale(1.2);
box-shadow: 0 8px 30px rgba(255,165,0,.5);
}
.video-play-btn:active {
  transform: scale(1.05);
}
.video-play-btn svg{
width:32px;height:32px;
fill:#000;
transition: transform .3s ease;
}
.video-play-btn:hover svg {
  transform: scale(1.1);
}
.video-controls{
position:absolute;
bottom:0;left:0;
width:100%;
background:linear-gradient(to top,rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 50%, transparent 100%);
padding:30px 16px 14px;
opacity:0;
transition: all .4s ease;
pointer-events:none;
transform: translateY(10px);
}
.media:hover .video-controls,
.media.playing.show-controls .video-controls{
opacity:1;
pointer-events:auto;
transform: translateY(0);
}
.video-progress-container{
width:100%;
height:6px;
background:rgba(255,255,255,.15);
border-radius:3px;
cursor:pointer;
margin-bottom:12px;
position:relative;
transition: height .2s ease;
}
.video-progress-container:hover {
  height: 8px;
}
.video-progress-bar{
height:100%;
background:linear-gradient(90deg, #ffa500, #ff8c00);
border-radius:3px;
width:0%;
position: relative;
box-shadow: 0 0 12px rgba(255,165,0,.4);
transition: box-shadow .3s ease;
}
.video-progress-container:hover .video-progress-bar {
  box-shadow: 0 0 16px rgba(255,165,0,.6);
}
.video-progress-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #ffa500;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s ease;
  box-shadow: 0 0 10px rgba(255,165,0,.8);
}
.video-progress-container:hover .video-progress-bar::after {
  opacity: 1;
}
.video-bottom-controls{
display:flex;
align-items:center;
gap:12px;
}
.video-control-btn{
width:36px;height:36px;
background:transparent;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
opacity:.85;
transition: all .3s ease;
flex-shrink:0;
border-radius: 50%;
}
.video-control-btn:hover{
opacity:1;
transform:scale(1.15);
background: rgba(255,165,0,.15);
}
.video-control-btn:active {
  transform: scale(0.95);
}
.video-control-btn svg{
width:22px;height:22px;
fill:#fff;
transition: fill .3s ease;
}
.video-control-btn:hover svg {
  fill: #ffa500;
}
.video-time{
font-size:13px;
opacity:.9;
flex-shrink:0;
transition: color .3s ease;
}
.video-control-btn:hover ~ .video-time {
  color: #ffa500;
}
.video-volume-container{
display:flex;
align-items:center;
gap:8px;
margin-left:auto;
}
.video-volume-slider{
width:70px;
height:6px;
background:rgba(255,255,255,.15);
border-radius:3px;
cursor:pointer;
position:relative;
transition: height .2s ease;
}
.video-volume-slider:hover {
  height: 8px;
}
.video-volume-bar{
height:100%;
background:linear-gradient(90deg, #ffa500, #ff8c00);
border-radius:3px;
width:100%;
box-shadow: 0 0 8px rgba(255,165,0,.3);
transition: box-shadow .3s ease;
}
.video-volume-slider:hover .video-volume-bar {
  box-shadow: 0 0 12px rgba(255,165,0,.5);
}
@media (max-width:900px){
.video-play-btn{
width:60px;height:60px;
}
.video-play-btn svg{
width:28px;height:28px;
}
.video-volume-container{
display:none;
}
}

/* ARROWS */
.arrow{
position:absolute;top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,.1);
border:none;color:#fff;font-size:28px;
width:50px;height:50px;border-radius:50%;
cursor:pointer;backdrop-filter:blur(6px);
transition:.3s;z-index:5;
}
.arrow:hover{background:rgba(255,255,255,.25)}
.arrow.left{left:-25px}
.arrow.right{right:-25px}

/* REVIEWS */
.review-card{
flex:0 0 360px;
width:360px;
}
.review-desc{
font-size:13px;
opacity:.5;
margin-bottom:14px;
}
.review-text{
font-size:15px;
line-height:1.6;
opacity:.85;
white-space:pre-line;
}

/* FOOTER */
.footer{
padding:80px 8%;
font-size:14px;
opacity:.6;
line-height:1.8;
}
.footer p{margin-bottom:16px}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 900px){
  .header{
    justify-content:space-between; /* для бургера */
  }
  .card{
    flex:0 0 280px;
    width:280px;
  }
  .arrow{
    display:none;
  }
  .burger{
    display:block;
    position: relative;
    z-index: 1001;
    transition: all .3s ease;
  }
  .burger:hover {
    color: #ffa500;
    transform: scale(1.1);
  }
  .header nav{
    position:fixed;
    top:0;
    left:-100%;
    width:80%;
    max-width: 320px;
    height:100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    padding: 40px 30px;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:1000;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
  }
  .header nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,165,0,.05) 0%, transparent 50%);
    pointer-events: none;
  }
  .header nav.active{
    left:0;
  }
  .header nav::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: -1;
  }
  .header nav.active::after {
    opacity: 1;
    pointer-events: auto;
  }
  .header a{
    font-size: 28px;
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .header a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: #ffa500;
    transition: height .3s ease;
    border-radius: 0 2px 2px 0;
  }
  .header a:hover {
    background: rgba(255,165,0,.1);
    transform: translateX(8px);
    color: #ffa500;
  }
  .header a:hover::before {
    height: 60%;
  }
  .header a:active {
    transform: translateX(4px) scale(0.98);
  }

  /* HERO — фото полностью видимо, плавный переход в чёрный */
  .hero {
    min-height: 100vh;
    height: auto;
  }
  .hero-content {
    position: absolute;
    top: auto;
    bottom: 10%;
    left: 5%;
    right: 5%;
    transform: none;
    width: auto;
    z-index: 3;
  }
  .hero h1 {
    font-size: 42px;
    line-height: 1.1;
  }
  .hero-sub {
    font-size: 13px;
  }
  /* Ключевые настройки для фото */
  .hero-bg {
    object-position: 61% 35%; /* сдвигаем вправо, чтобы лицо было по центру на мобильных */
    object-fit: cover;
    transform: scale(1.08);   /* немного увеличиваем, чтобы заполнить, но лицо остаётся в кадре */
  }
  .hero-description p {
    font-size: 11px;
  }
  .hero-buttons {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  /* Усиливаем градиент снизу для плавного перехода в чёрный */
  .hero-bottom-gradient {
    height: 400px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 40%, #000 100%);
  }
  /* Добавляем затемнение сверху, чтобы текст читался */
  .hero-overlay {
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
  }
  
  .studio {
    padding: 50px 5%;
  }
  .studio h2 {
    font-size: 36px;
  }
  .studio-sub {
    font-size: 14px;
  }
  
  .portfolio-grid {
    flex-direction: column;
    gap: 40px;
  }
  .audio-col, .covers-col {
    flex: 0 0 100%;
  }
  .tracks-list {
    max-height: none;
    overflow-y: visible;
  }
  
  .covers-slider-wrapper .arrow {
    display: flex !important;
    width: 36px;
    height: 36px;
    font-size: 20px;
    background: rgba(0,0,0,0.6);
  }
}

/* Специальные стили для разделов с увеличенными карточками (ПРИМЕРЫ В ВИДЕО) */
.video-examples-section .card {
  flex: 0 0 600px;
  width: 600px;
}
.video-examples-section .media {
  aspect-ratio: 16 / 9;
}
.video-examples-section .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1200px) {
  .video-examples-section .card {
    flex: 0 0 480px;
    width: 480px;
  }
}
@media (max-width: 900px) {
  .video-examples-section .card {
    flex: 0 0 280px;
    width: 280px;
  }
  .video-examples-section .media {
    aspect-ratio: 16 / 9;
  }
}

/* подзаголовки */
.video-subheading {
  font-family: "Bebas", sans-serif;
  font-size: 36px;
  margin: 40px 0 10px 0;
  color: #fff;
  opacity: 0.9;
}
@media (max-width: 900px) {
  .video-subheading {
    font-size: 28px;
  }
}

/* АУДИОПЛЕЕР */
.track {
  margin-bottom: 20px;
  padding: 15px;
  background: #1a1a1a;
  border-radius: 14px;
  transition: all .3s ease;
  border: 1px solid transparent;
}
.track:hover {
  background: #222;
  border-color: rgba(255,165,0,.2);
  transform: translateY(-2px);
}
.track-title {
  font-family: "Bebas", sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.track-duration {
  font-family: "TikTok", sans-serif;
  font-size: 14px;
  opacity: .6;
  transition: .3s;
}
.track.playing .track-duration {
  color: #ffa500;
  opacity: 1;
}
.custom-audio {
  display: none;
}
.audio-player {
  width: 100%;
  background: #2a2a2a;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: .3s;
}
.track.playing .audio-player {
  background: #333;
  box-shadow: 0 0 20px rgba(255,165,0,.15);
}
.audio-play-btn {
  width: 36px;
  height: 36px;
  background: #ffa500;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.audio-play-btn::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 70%);
  transform: scale(0);
  transition: transform .3s ease;
}
.audio-play-btn:hover::before {
  transform: scale(1);
}
.audio-play-btn:hover {
  background: #ff8c00;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255,165,0,.4);
}
.audio-play-btn:active {
  transform: scale(0.95);
}
.audio-play-btn svg {
  width: 16px;
  height: 16px;
  fill: #000;
  transition: transform .2s ease;
}
.audio-play-btn:hover svg {
  transform: scale(1.1);
}
.audio-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audio-progress-container {
  width: 100%;
  height: 6px;
  background: #1a1a1a;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: height .2s ease;
}
.audio-progress-container:hover {
  height: 8px;
}
.audio-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffa500, #ff8c00);
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
  box-shadow: 0 0 10px rgba(255,165,0,.3);
}
.audio-progress-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #ffa500;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s ease;
  box-shadow: 0 0 8px rgba(255,165,0,.6);
}
.audio-progress-container:hover .audio-progress-bar::after {
  opacity: 1;
}
.audio-time {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .6;
  transition: .3s;
}
.track.playing .audio-time {
  opacity: .9;
}
.audio-volume-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.audio-volume-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
  transition: all .3s ease;
  border-radius: 50%;
}
.audio-volume-btn:hover {
  opacity: 1;
  background: rgba(255,165,0,.1);
  transform: scale(1.1);
}
.audio-volume-btn:active {
  transform: scale(0.9);
}
.audio-volume-btn svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  transition: fill .3s ease;
}
.audio-volume-btn:hover svg {
  fill: #ffa500;
}
.audio-volume-slider {
  width: 60px;
  height: 6px;
  background: #1a1a1a;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: height .2s ease;
}
.audio-volume-slider:hover {
  height: 8px;
}
.audio-volume-bar {
  height: 100%;
  background: linear-gradient(90deg, #ffa500, #ff8c00);
  border-radius: 3px;
  width: 100%;
  transition: width .1s ease;
  box-shadow: 0 0 8px rgba(255,165,0,.2);
}
@media (max-width: 900px) {
  .audio-volume-container {
    display: none;
  }
}
.track-description {
  font-size: 15px;
  opacity: .7;
  line-height: 1.5;
  margin-top: 12px;
  font-family: "TikTok", sans-serif;
}
.price {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: "Bebas", sans-serif;
  font-size: 22px;
  color: #ffa500;
}

/* ПОРТФОЛИО: две колонки (десктоп) */
.portfolio-grid {
  display: flex;
  gap: 5%;
  align-items: stretch;
  margin-top: 30px;
}
.audio-col {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
}
.tracks-list {
  max-height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}
.tracks-list::-webkit-scrollbar {
  width: 4px;
}
.tracks-list::-webkit-scrollbar-track {
  background: #222;
}
.tracks-list::-webkit-scrollbar-thumb {
  background: #ffa500;
  border-radius: 4px;
}
.covers-col {
  flex: 0 0 55%;
}
.covers-slider-wrapper {
  position: relative;
  width: 100%;
}
.covers-slider {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  border-radius: 24px;
}
.covers-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}
.cover-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.cover-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.covers-slider-wrapper .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  width: 40px;
  height: 40px;
  font-size: 24px;
  z-index: 10;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.covers-slider-wrapper .arrow.left {
  left: 10px;
}
.covers-slider-wrapper .arrow.right {
  right: 10px;
}
.covers-slider-wrapper .arrow:hover {
  background: rgba(0,0,0,0.9);
}

/* Описание в HERO */
.hero-description {
  margin-top: 30px;
  max-width: 500px;
}
.hero-description p {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.75;
  margin-bottom: 12px;
  font-family: "TikTok", sans-serif;
}
@media (max-width: 900px) {
  .hero-description {
    max-width: 100%;
  }
  .hero-description p {
    font-size: 12px;
  }
}

/* Кнопка ЗАКАЗАТЬ */
.order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 50px;
  background: #1a1a1a;
  color: #ffa500;
  font-family: "Bebas", sans-serif;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  transition: 0.3s;
  letter-spacing: 1px;
}
.order-btn:hover {
  background: #2a2a2a;
  transform: translateY(-3px);
}

/* Анимация появления */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.fade-up.appear {
  opacity: 1;
  transform: translateY(0);
}