/* ============================================================
   MOBILE STYLES — для экранов ≤420px
   Независимо от десктопа
   ============================================================ */
@media (max-width: 420px) {

  html, body {
    height: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  /* ---- Главный круг ---- */
  .main-video-container {
    position: fixed !important;
    top: calc(32vh - 40px) !important;     /* круг ниже */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 82vw !important;
    height: 82vw !important;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: visible !important;
    opacity: 1 !important;
    z-index: 50;
  }

  /* Видео остаётся круглым — обрезаем именно слои, а не контейнер */
  .main-video-container > .video-main,
  .main-video-container > .video-pause,
  .main-video-container > .video-pause-overlay {
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .video-main,
  .video-pause { transition: opacity .25s ease; }

  .video-main video,
  .video-pause video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- Кнопка Play/Pause по центру круга ---- */
  .play-toggle {
    position: fixed !important;
    top: calc(32vh - 40px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 64px !important;
    height: 64px !important;
    z-index: 1000 !important;
    background: none;
    border: none;
    cursor: pointer;
  }
  .play-toggle svg { width: 44px !important; height: 44px !important; }

  /* ---- Отступы для контента под фиксированным кругом ---- */
  body {
    padding-top: calc(32vh + 48vw);
    padding-bottom: 24vh;
  }

  /* ---- Навигация (3 ссылки под кругом) ---- */
  .navigation-container {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 92vw !important;
    margin: 0 auto 32px auto !important;
    padding: 0 !important;
    justify-content: center;
    align-items: stretch;
  }
  .navigation-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 16px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    background: #fff;
    width: 100%;
  }
  .navigation-item:not(:first-child){
    border-left: none !important;
    padding-left: 14px !important;
    margin-left: 0 !important;
  }
  .nav-icon { font-size: 28px !important; color: #111 !important; }
  .nav-text { display:flex; flex-direction:column; gap:4px; }
  .nav-caption { font-size:14px !important; color:#333 !important; letter-spacing:-.02em; font-weight:300; }
  .navigation-item a {
    font-size: 18px !important; line-height: 1.25;
    border-bottom: 1px dashed #111; color: #111; text-decoration: none; font-weight: 600;
  }
  .navigation-item a:hover { border-bottom: 2px solid #000; }

  /* ---- Скрыть мышь и подпись ---- */
  .scroll-indicator { display: none !important; }

  /* ---- ZANZARA и иконки ---- */
  .hero-left{
    display:block !important;
    position:fixed !important;
    top:-14px !important;               /* было 16px → подняли на 30px выше */
    left:16px !important;
    right:auto !important;
    transform:none !important;
    text-align:left !important;
    z-index:200 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .brand-name{
    font-family:'Fira Sans', system-ui, sans-serif;
    font-weight:100;
    font-size:18px;
    letter-spacing:.04em;
    color:rgba(0,0,0,.7);
  }

  .hero-right{
    display:flex !important;
    position:fixed !important;
    top:-14px !important;               /* подняли на 30px выше */
    right:16px !important;
    left:auto !important;
    transform:none !important;
    flex-direction:row !important;
    gap:10px !important;
    align-items:center !important;
    z-index:200 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .hero-right a{
    font-size:20px !important;
    line-height:1;
    text-decoration:none !important;
    color:rgba(0,0,0,.65) !important;
  }

  /* ---- Прелоадер ---- */
  .loader { z-index: 9999; }
  body.loaded .loader { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
}

/* ZANZARA — слева, меньше на ~30% */
.hero-left{
  display:block !important;
  position:fixed !important;
  top:-14px !important;                /* подняли на 30px выше */
  left:16px !important;
  right:auto !important;
  transform:none !important;          
  text-align:left !important;
  z-index:200 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.brand-name{
  font-family:'Fira Sans', system-ui, sans-serif;
  font-weight:100;
  font-size:18px;
  letter-spacing:.04em;
  color:rgba(0,0,0,.7);
}

/* Иконки — справа, в один ряд */
.hero-right{
  display:flex !important;
  position:fixed !important;
  top:-14px !important;               /* подняли на 30px выше */
  right:16px !important;
  left:auto !important;
  transform:none !important;
  flex-direction:row !important;
  gap:10px !important;
  align-items:center !important;
  z-index:200 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.hero-right a{
  font-size:20px !important;
  line-height:1;
  text-decoration:none !important;
  color:rgba(0,0,0,.65) !important;
}