@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
 --paper:#1a100e;
 --ink:#e8e0d8;
 --muted:#a89a8c;
 --line:rgba(201,165,90,.2);
 --gold:#c9a55a;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-padding-top:0}
body{min-height:100%;color:var(--ink);font-family:"DM Sans",sans-serif;background:#0a0605;overflow-x:hidden}

.stage{min-height:100vh;display:grid;place-items:center;padding:0}
.site-card{width:min(1200px,92vw);background:var(--paper);position:relative;box-shadow:0 24px 80px rgba(0,0,0,.6);margin:0 auto}

/* ТОПБАР */
.topbar{height:64px;display:flex;align-items:center;padding:0 32px;border-bottom:1px solid var(--line);gap:24px;background:var(--paper);position:sticky;top:0;z-index:100}
.brand{display:flex;align-items:center;text-decoration:none;white-space:nowrap}
.logo-img{height:36px;width:auto;display:block}
.nav{display:flex;justify-content:center;align-items:center;gap:clamp(12px,2.5vw,28px);margin:0 auto;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:11px;letter-spacing:.5px;text-transform:uppercase;transition:color .2s}
.nav a:hover,.nav a.active{color:var(--gold)}
.menu-toggle{border:0;background:none;width:24px;height:24px;display:none;flex-direction:column;gap:5px;justify-content:center;align-items:center;cursor:pointer}
.menu-toggle span{display:block;height:1px;width:18px;background:var(--gold)}

/* СЕКЦИИ */
.sections{display:block}
.page{min-height:calc(100vh - 64px);scroll-snap-align:start;scroll-snap-stop:always;padding:clamp(32px,5vw,64px);display:flex;position:relative;overflow:hidden}

/* ТИПОГРАФИКА */
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--gold);margin:0 0 24px;font-weight:500}
h1,h2{margin-top:0;color:var(--ink);font-family:"Manrope",sans-serif;font-weight:500;line-height:1.05;letter-spacing:-.04em}
h1{font-size:clamp(32px,4vw,56px)}
h2{font-size:clamp(28px,3.5vw,44px);margin-bottom:20px}
.intro-bottom,.split-text p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7;margin-top:16px}
.text-block{max-width:400px;margin-left:auto;font-size:12px;line-height:1.8;color:var(--muted)}
.text-block p+p{margin-top:12px}

/* 1 и 6: ВИДЕО ФОН + 2 ФОТО */
.page-intro{align-items:stretch;gap:6%}
.page-intro .section-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-intro::before{content:"";position:absolute;inset:0;background:rgba(10,6,5,.65);z-index:1}
.page-intro .intro-left,
.page-intro .intro-right{position:relative;z-index:2}
.intro-left{width:42%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.intro-right{width:52%;display:flex;flex-direction:column;justify-content:center}
.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.image-pair.single{grid-template-columns:1fr;justify-content:flex-end}
.image-pair.single .image-tile{max-width:220px;margin-left:auto}
.image-tile{min-height:220px;background-size:cover;background-position:center;border-radius:4px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* 2 и 5: ВИДЕО СЛЕВА + ФОТО СПРАВА */
.page-split{padding:0;display:flex}
.split-video{flex:1;position:relative;min-height:calc(100vh - 64px);overflow:hidden;background:#000}
.split-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.split-photo{flex:1;background-size:cover;background-position:center;display:flex;align-items:center;padding:clamp(28px,4vw,56px);position:relative}
.split-photo::before{content:"";position:absolute;inset:0;background:rgba(10,6,5,.6);z-index:1}
.split-text{position:relative;z-index:2;max-width:380px}

/* 3: ДВА ФОТО */
.page-twophoto{padding:0;display:flex}
.page-twophoto .split-photo{flex:1;min-height:calc(100vh - 64px)}

/* 4: ОДНО ФОТО НА ВЕСЬ */
.page-fullphoto{padding:0;align-items:center;justify-content:center}
.fullphoto-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.page-fullphoto::before{content:"";position:absolute;inset:0;background:rgba(10,6,5,.65);z-index:1}
.fullphoto-content{position:relative;z-index:2;max-width:640px;text-align:center;padding:clamp(32px,5vw,64px)}
.fullphoto-content p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.8;margin-top:16px}

/* ФУТЕР */
.footer{min-height:56px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:12px;font-size:11px;color:var(--muted);background:var(--paper);flex-wrap:wrap}
.side-note{position:fixed;bottom:16px;right:4vw;color:rgba(232,224,216,.7);font-size:11px;letter-spacing:.05em;pointer-events:none;z-index:50}

::-webkit-scrollbar{width:0;height:0}
html{scrollbar-width:none}
body{-ms-overflow-style:none}

@media(max-width:900px){
  .site-card{width:100%;box-shadow:none}
  .topbar{padding:0 18px;height:58px}
  .logo-img{height:30px}
  .nav{display:none;position:absolute;top:58px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:18px;flex-direction:column;gap:16px}
  .nav.open{display:flex}
  .menu-toggle{display:flex}

  .page{min-height:calc(100svh - 58px);padding:32px 22px;flex-direction:column;gap:24px;justify-content:center;text-align:center}
  .page-intro .intro-left,
  .page-intro .intro-right{width:100%}
  .intro-left{align-items:center}
  .intro-right{width:100%}
  .text-block{margin-left:auto;margin-right:auto;text-align:center}
  .image-pair{max-width:420px;margin-left:auto;margin-right:auto}
  .image-tile{min-height:160px}

  .page-split{flex-direction:column;padding:0}
  .split-video{min-height:50svh}
  .split-photo{min-height:50svh;padding:32px 22px;text-align:center;justify-content:center}
  .split-text{max-width:100%}
  .page-twophoto{flex-direction:column}
  .page-twophoto .split-photo{min-height:40svh}

  .fullphoto-content{text-align:center}
  .footer{padding:14px 18px;font-size:10px;justify-content:center;text-align:center}
  .side-note{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:y proximity}
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ========== ФОН-ВИДЕО С БЛЮРОМ ========== */

/* ========== СЛАЙДЫ РОВНО НА ВЕСЬ ЭКРАН ========== */
.page {
  min-height: 100svh !important;
  height: 100svh !important;
  padding: clamp(24px, 4vw, 48px) !important;
  box-sizing: border-box;
}

/* Учитываем высоту топбара через scroll-padding */
html {
  scroll-padding-top: 64px;
}

/* Футер не создаёт обрубок */
.footer {
  position: relative;
  z-index: 2;
}

/* Металл — 2 бокса как у латуни */
#metall .image-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
#metall .image-tile {
  max-width: none !important;
  margin-left: 0 !important;
}

/* Улучшаем качество отрисовки видео */
.section-video,
.split-video video {
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ========== ФОН: ВИДЕО БЕЗ ТЯЖЁЛОГО БЛЮРА ========== */

/* ========== ФОН: ВИДЕО С МЯГКИМ РАЗМЫТИЕМ ========== */

/* Мягкий градиент поверх фона — создаёт эффект "воды/зеркала" без тяжёлого blur */

/* ========== ВИДЕО В СЛАЙДАХ: БЕЗ ИСКАЖЕНИЙ ========== */
.section-video,
.split-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ========== ВИДЕО: УМЕНЬШЕННЫЙ МАСШТАБ ДЛЯ ЛУЧШЕГО ОБЗОРА ========== */
.section-video,
.split-video video {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.3s ease;
}

/* Лёгкий зум-эффект при наведении (опционально) */
.page:hover .section-video,
.page:hover .split-video video {
}

/* ========== ВИДЕО ЦЕЛИКОМ В БОКСЕ (БЕЗ ОБРЕЗКИ) ========== */
.section-video,
.split-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #0a0605;
}

/* ========== ВИДЕО: КАК БЫЛО (БЕЗ МАСШТАБА) ========== */
.section-video,
.split-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
  background: #0a0605;
}

/* ========== ПОТАЛЬ: ДВА ФОТО НА ВСЮ ПЛОЩАДЬ ========== */
.page-twophoto {
  padding: 0 !important;
  min-height: 100svh !important;
  height: 100svh !important;
}

.page-twophoto .split-photo {
  min-height: 100% !important;
  height: 100% !important;
}

/* ========== ПОСЛЕДНИЙ СЛАЙД + ФУТЕР ========== */
.sections {
  min-height: calc(100svh - 64px);
}

#metall {
  min-height: calc(100svh - 120px) !important;
  height: calc(100svh - 120px) !important;
}

.footer {
  position: relative;
  z-index: 10;
  min-height: 56px;
}

/* ========== ТОПБАР: ЛОГО СЛЕВА, НАВИГАЦИЯ ПО ЦЕНТРУ, КНОПКА СПРАВА ========== */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 40px !important;
  gap: 24px !important;
}

.brand {
  flex: 0 0 auto;
  margin-right: 40px;
}

.nav {
  display: flex !important;
  flex: 1 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(12px, 2.5vw, 28px) !important;
  margin: 0 !important;
}

.back-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201, 165, 90, 0.4);
  color: #c9a55a;
  text-decoration: none;
  transition: all 0.25s ease;
}

.back-btn:hover {
  background: rgba(201, 165, 90, 0.12);
  border-color: #c9a55a;
  transform: translateX(-2px);
}

.back-btn svg {
  width: 18px;
  height: 18px;
}

/* Мобильная версия — кнопка назад рядом с бургером */
@media (max-width: 900px) {
  .topbar {
    padding: 0 18px !important;
  }
  .brand {
    margin-right: 0;
  }
  .nav {
    display: none;
  }
  .nav.open {
    display: flex;
  }
  .back-btn {
    margin-left: auto;
    margin-right: 12px;
  }
}

/* ========== ЦЕНТРИРУЕМ НАВИГАЦИЮ ПО ЦЕНТРУ ЭКРАНА ========== */
.topbar {
  position: relative;
}

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2.5vw, 28px);
  margin: 0;
  pointer-events: auto;
}

/* Лого и кнопка — по краям */
.brand {
  flex: 0 0 auto;
  margin-right: auto;
}

.back-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Мобилка: навигация обратно в поток */
@media (max-width: 900px) {
  .nav {
    position: static;
    transform: none;
    left: auto;
    display: none;
  }
  .nav.open {
    display: flex;
  }
  .brand {
    margin-right: 0;
  }
}

/* ========== БОКСЫ ФОТО: iOS-СТИЛЬ + СТЕКЛО + АНИМАЦИЯ ========== */
.image-tile {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: scale(0.96);
  animation: glassAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.image-pair .image-tile:nth-child(1) { animation-delay: 0.2s; }
.image-pair .image-tile:nth-child(2) { animation-delay: 0.45s; }

@keyframes glassAppear {
  0% {
    opacity: 0;
    transform: scale(0.96);
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    backdrop-filter: blur(6px);
  }
}

/* Стеклянный блик поверх фото */
.image-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
}

/* Лёгкий hover: подъём */
.image-tile:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* На всякий случай — все фото-боксы в других слайдах тоже закруглим */
.split-photo,
.photo-box {
  border-radius: 18px !important;
  overflow: hidden;
}

/* Нижняя плашка с текстом — выезжает после появления */
.latun-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 18px;
  background: linear-gradient(0deg, rgba(10, 6, 5, 0.92) 0%, rgba(10, 6, 5, 0.55) 70%, transparent 100%);
  transform: translateY(100%);
  opacity: 0;
  animation: captionSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.9s + var(--i) * 0.25s);
}

@keyframes captionSlide {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.latun-caption ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #e8e0d8;
}

.latun-caption li {
  opacity: 0;
  transform: translateY(6px);
  animation: captionLine 0.35s ease forwards;
}

.latun-card:nth-child(1) .latun-caption li:nth-child(1) { animation-delay: 1.05s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(2) { animation-delay: 1.15s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(3) { animation-delay: 1.25s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(4) { animation-delay: 1.35s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(5) { animation-delay: 1.45s; }

.latun-card:nth-child(2) .latun-caption li:nth-child(1) { animation-delay: 1.30s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(2) { animation-delay: 1.40s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(3) { animation-delay: 1.50s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(4) { animation-delay: 1.60s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(5) { animation-delay: 1.70s; }

@keyframes captionLine {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Мобилка */
@media (max-width: 900px) {
  .latun-gallery {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Поталь — два фото */
.page-twophoto .split-photo {
  min-height: 100svh !important;
  height: 100svh !important;
}

/* Плашка с текстом тоже под clip-path */
.latun-caption {
  border-radius: 0 0 22px 22px;
  clip-path: inset(0 round 0 0 22px 22px);
}

/* Плашка тоже скругляем снизу */
.latun-caption {
  border-radius: 0 0 22px 22px;
}


/* ========== ЛАТУНЬ: IOS-БОКСЫ ========== */
.latun-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 560px;
}

.latun-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;                 /* обрезает тень по закруглению */
  background: transparent;          /* фон даёт только фото */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  isolation: isolate;
  opacity: 0;
  transform: translateY(30px);
  animation: latunRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.2s + var(--i) * 0.25s);
}

@keyframes latunRise {
  to { opacity: 1; transform: translateY(0); }
}

.latun-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.latun-card:hover .latun-photo {
  transform: scale(1.04);
}

.latun-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 18px;
  background: linear-gradient(0deg, rgba(10,6,5,0.92) 0%, rgba(10,6,5,0.55) 70%, transparent 100%);
  border-radius: 0 0 22px 22px;
  transform: translateY(100%);
  opacity: 0;
  animation: captionSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.9s + var(--i) * 0.25s);
}

@keyframes captionSlide {
  to { transform: translateY(0); opacity: 1; }
}

.latun-caption ul {
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; line-height: 1.55; color: #e8e0d8;
}

.latun-caption li {
  opacity: 0;
  transform: translateY(6px);
  animation: captionLine 0.35s ease forwards;
}

.latun-card:nth-child(1) .latun-caption li:nth-child(1) { animation-delay: 1.05s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(2) { animation-delay: 1.15s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(3) { animation-delay: 1.25s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(4) { animation-delay: 1.35s; }
.latun-card:nth-child(1) .latun-caption li:nth-child(5) { animation-delay: 1.45s; }

.latun-card:nth-child(2) .latun-caption li:nth-child(1) { animation-delay: 1.30s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(2) { animation-delay: 1.40s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(3) { animation-delay: 1.50s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(4) { animation-delay: 1.60s; }
.latun-card:nth-child(2) .latun-caption li:nth-child(5) { animation-delay: 1.70s; }

@keyframes captionLine {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .latun-gallery { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}

/* ========== СПЛИТ-СЛАЙДЫ НА ВЕСЬ ЭКРАН ========== */
.page-split,
.page-about {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100svh !important;
  height: 100svh !important;
  display: flex !important;
  overflow: hidden !important;
}

.split-video,
.split-photo {
  flex: 1 !important;
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.split-video video {
  width: 100% !important;
  height: 100svh !important;
  object-fit: cover !important;
  display: block !important;
}

.split-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Внутренний текст в правой части — отступы только у текста */
.split-text {
  padding: clamp(24px, 4vw, 56px) !important;
  max-width: 480px;
}

/* Убираем ::before оверлей, если он даёт отступы */
.split-photo::before {
  border-radius: 0 !important;
}

/* ========== УБИРАЕМ ТЕНЬ У КАРТОЧКИ ========== */
.latun-card {
  box-shadow: none !important;
  filter: none !important;
}

/* ========== УВЕЛИЧИВАЕМ ГРАДИЕНТ ПОД ТЕКСТОМ ========== */
.latun-caption {
  left: -3px !important;
  right: -3px !important;
  bottom: -4px !important;
  padding-bottom: 24px !important;     /* +4px снизу */
  border-radius: 0 0 22px 22px !important;
}

/* ========== ЕЩЁ РАСШИРЯЕМ ГРАДИЕНТ ========== */
.latun-caption {
  left: -6px !important;
  right: -6px !important;
  bottom: -7px !important;
  top: auto !important;
  padding-top: 26px !important;   /* +3px сверху для градиента */
  padding-bottom: 24px !important;
}

/* ========== УБИРАЕМ ZOOM ПРИ HOVER (он давал пиксели) ========== */
.latun-card:hover .latun-photo {
  transform: none !important;
}

.latun-photo {
  transform: none !important;
  transition: none !important;
}

/* ========== ФИНАЛ: СКРУГЛЯЕТ ТОЛЬКО КАРТОЧКА ========== */
.latun-card {
  border-radius: 22px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  transform: translateZ(0);
}

.latun-photo {
  border-radius: 0 !important;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.latun-caption {
  border-radius: 0 !important;
}

/* ========== ZOOM ПРИ HOVER (на карточке, без пикселей) ========== */
.latun-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.latun-card:hover {
  transform: scale(1.03);
}

/* Фото больше не зумим — иначе пиксели */
.latun-card:hover .latun-photo {
  transform: none !important;
}

.latun-photo {
  transition: none !important;
}

/* ========== HOVER ЗУМ РАБОТАЕТ ========== */
.latun-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: auto !important;
}

.latun-card:hover {
  transform: scale(1.03) !important;
}

/* Оверлеи не должны блокировать hover */
.latun-shadow,
.latun-caption,
.latun-photo {
  pointer-events: none !important;
}

/* ========== ВОЗВРАТ: ЗУМ ФОТО ПРИ HOVER ========== */
.latun-card {
  transition: none !important;
  will-change: auto !important;
}

.latun-card:hover {
  transform: none !important;
}

.latun-photo {
  transition: transform 0.5s ease !important;
  pointer-events: auto !important;
}

.latun-card:hover .latun-photo {
  transform: scale(1.04) !important;
}

/* ========== SCROLL-SNAP: ОДНО КОЛЕСО = ОДИН СЛАЙД ========== */
html {
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
}

.page {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  min-height: calc(100svh - 64px) !important;
  height: calc(100svh - 64px) !important;
}

/* Верхняя панель — sticky, видна всегда */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* ========== ПОТАЛЬ: ЛЕВОЕ ОБРЕЗАНО НА 7PX, ПРАВОЕ — ЗЕРКАЛО, СТЫК ПЛОТНЫЙ ========== */


/* Левое: обрезаем справа 7px */

/* Правое: зеркальная копия, обрезаем слева 7px */

/* ========== ПОТАЛЬ: РОВНЫЙ СТЫК БЕЗ CLIP-PATH ========== */




/* ========== ПОТАЛЬ: ЛЕГКИЙ ЗАЗОР, ЧТОБЫ ГЛАЗА НЕ ЛОМАЛО ========== */


/* Если хочешь, чтобы они чуть-чуть перекрывались, но не сливались, 
   можно убрать зазор и добавить тень, но пока просто 8px */

/* ========== АНИМАЦИЯ ПОЯВЛЕНИЯ ТЕКСТА (БЕЗ JS, ПРОСТО CSS) ========== */
/* Анимируем текст внутри .intro-left и .split-text */
.intro-left .eyebrow,
.intro-left h1,
.intro-left h2,
.intro-left .intro-bottom,
.split-text .eyebrow,
.split-text h2,
.split-text p:not(.eyebrow),
.fullphoto-content .eyebrow,
.fullphoto-content h2,
.fullphoto-content p:not(.eyebrow) {
  opacity: 0;
  transform: translateY(20px);
  animation: textFadeIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Задержки: сначала eyebrow, потом заголовок, потом описание */
.intro-left .eyebrow,
.split-text .eyebrow,
.fullphoto-content .eyebrow {
  animation-delay: 0.2s;
}

.intro-left h1,
.intro-left h2,
.split-text h2,
.fullphoto-content h2 {
  animation-delay: 0.5s;
}

.intro-left .intro-bottom,
.split-text p:not(.eyebrow),
.fullphoto-content p:not(.eyebrow) {
  animation-delay: 0.8s;
}

@keyframes textFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== ПОТАЛЬ: РАЗЪЕЗД ЧЕРЕЗ CLIP-PATH ========== */


/* Левая: обрезается справа почти до конца */

/* Правая: зеркальная копия, обрезается слева почти до конца */

/* Видео-слот (на заднем плане) */

/* ========== ПОТАЛЬ: ПЛАВНЫЙ РАЗЪЕЗД ПО СКРОЛЛУ ========== */

/* Левая: обрезка зависит от прогресса */

/* Правая: то же, но зеркально */

/* Видео-слот: плавно появляется с прогрессом */

/* При полном открытии (пotal-open) можно добавить финальные стили */

/* ========== ПОТАЛЬ: СДВИГ ЧЕРЕЗ TRANSLATE ========== */


/* Левая: сдвигается влево на прогресс (до -48%) */

/* Правая: сдвигается вправо на прогресс (до +48%), но внутри отзеркалена */

/* Зеркальный слой для правой */

/* Видео-слот */


/* ========== 3-Й СЛАЙД: НОВЫЙ ЧИСТЫЙ КОД ========== */
.page-potal {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  background: #0a0605 !important;
}

/* Видео-фон */
.potal-video-slot {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: calc(var(--potal-progress, 0)) !important;
  transition: opacity 0.2s ease !important;
}
.potal-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Контейнеры для фото */
.potal-box {
  flex: 1 1 50% !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  transition: transform 0.2s ease !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}

/* Само фото внутри контейнера */
.potal-img {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Зеркалим правое фото */
.potal-img.mirrored {
  transform: scaleX(-1) !important;
}

/* Текст поверх левого фото */
.potal-left .split-text {
  position: relative !important;
  z-index: 3 !important;
  padding: 40px !important;
}

/* Плавное раздвижение по скроллу */
.potal-left {
  transform: translateX(calc(-100% * var(--potal-progress, 0))) !important;
}
.potal-right {
  transform: translateX(calc(100% * var(--potal-progress, 0))) !important;
}

/* ========== ФИКС: РАЗЪЕЗД ДО 90% (НЕ ДО КОНЦА) ========== */
.potal-left {
  /* Сдвиг влево максимум на 90% ширины */
  transform: translateX(calc(-90% * var(--potal-progress, 0))) !important;
}

.potal-right {
  /* Сдвиг вправо максимум на 90% ширины */
  transform: translateX(calc(90% * var(--potal-progress, 0))) !important;
}

/* Убираем оставшийся фон */
.page-potal {
  background: #0a0605 !important;
}

/* ========== ФИКС ЗОЛОТОЙ ПОЛОСЫ И ОБРЕЗКИ ========== */
.page-potal {
  overflow: hidden !important;
  position: relative !important;
}

.potal-box {
  overflow: hidden !important; /* обрезаем всё, что выходит за края */
  border: none !important;
  box-shadow: none !important;
}

.potal-img {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

/* Фиксируем ширину сдвига, чтобы не было зазоров */
.potal-left {
  transform: translateX(calc(-90% * var(--potal-progress, 0))) !important;
}
.potal-right {
  transform: translateX(calc(90% * var(--potal-progress, 0))) !important;
}

/* ========== ФИКС ПОЛОСКИ ЧЕРЕЗ GPU ========== */
.potal-box {
  /* Говорим браузеру заранее подготовить слой для анимации */
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  /* Убираем любые границы, которые могут бликовать */
  border: none !important;
  box-shadow: none !important;
}

/* Перекрываем зазор картинкой, вылезая за края контейнера */
.potal-img {
  width: 102% !important;
  height: 102% !important;
  left: -1% !important;
  top: -1% !important;
  position: absolute !important;
}

/* Правая картинка (зеркало) */
.potal-img.mirrored {
  transform: scaleX(-1) !important;
}

/* ========== ТЕКСТ ПОТАЛИ ПО ЦЕНТРУ (С АНИМАЦИЕЙ) ========== */
.potal-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Поверх фото и видео */
  text-align: center;
  width: 100%;
  max-width: 600px;
  padding: 40px;
  
  /* Скрыт по умолчанию */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Появляется, когда открыто */
.page-potal.potal-opened .potal-center-text {
  opacity: 1;
  visibility: visible;
}

/* Уменьшаем "03 / ПОТАЛЬ" */
.potal-center-text .eyebrow {
  font-size: 9px !important;
  letter-spacing: 0.25em !important;
  opacity: 0.8 !important;
  color: #c9a55a !important;
}

/* Текст */
.potal-center-text h2 {
  color: #fff !important;
  margin-bottom: 16px;
  font-size: clamp(32px, 4vw, 56px);
}
.potal-center-text p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* ========== СЛАЙД 6: МЕТАЛЛ (ФИНАЛЬНАЯ АНИМАЦИЯ) ========== */
#metall .latun-card {
  opacity: 0;
  transform: translateY(30px);
  animation: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important; /* Тень как у Латуни */
}

#metall .latun-caption {
  opacity: 0;
  transform: translateY(100%);
  animation: none;
}

#metall .latun-caption li {
  opacity: 0;
  transform: translateY(6px);
  animation: none;
}

/* Запуск анимации при добавлении класса .metall-animate */
#metall.metall-animate .latun-card {
  animation: latunRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
#metall.metall-animate .latun-card:nth-child(1) { animation-delay: 0.2s !important; }
#metall.metall-animate .latun-card:nth-child(2) { animation-delay: 0.45s !important; }

#metall.metall-animate .latun-caption {
  animation: captionSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
#metall.metall-animate .latun-card:nth-child(1) .latun-caption { animation-delay: 0.9s !important; }
#metall.metall-animate .latun-card:nth-child(2) .latun-caption { animation-delay: 1.15s !important; }

#metall.metall-animate .latun-caption li {
  animation: captionLine 0.35s ease forwards !important;
}

/* Задержки для левого бокса */
#metall.metall-animate .latun-card:nth-child(1) li:nth-child(1) { animation-delay: 1.3s !important; }
#metall.metall-animate .latun-card:nth-child(1) li:nth-child(2) { animation-delay: 1.38s !important; }
#metall.metall-animate .latun-card:nth-child(1) li:nth-child(3) { animation-delay: 1.46s !important; }
#metall.metall-animate .latun-card:nth-child(1) li:nth-child(4) { animation-delay: 1.54s !important; }

/* Задержки для правого бокса */
#metall.metall-animate .latun-card:nth-child(2) li:nth-child(1) { animation-delay: 1.55s !important; }
#metall.metall-animate .latun-card:nth-child(2) li:nth-child(2) { animation-delay: 1.63s !important; }
#metall.metall-animate .latun-card:nth-child(2) li:nth-child(3) { animation-delay: 1.71s !important; }
#metall.metall-animate .latun-card:nth-child(2) li:nth-child(4) { animation-delay: 1.79s !important; }
#metall.metall-animate .latun-card:nth-child(2) li:nth-child(5) { animation-delay: 1.87s !important; }

/* Ключевые кадры (на всякий случай, если их нет) */
@keyframes latunRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes captionSlide { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes captionLine { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ========== ФИКС ТОПБАРА ========== */
/* Стрелка — толще обводка */
.back-btn {
  border-width: 2px !important;
  border-color: rgba(201, 165, 90, 0.7) !important;
}

.back-btn:hover {
  border-color: #c9a55a !important;
}

/* Убираем капс в меню */
.nav a {
  text-transform: none !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* ========== МЯГКИЙ ФОН ВОКРУГ КАРТОЧКИ (БЕЗ ПОЛОС) ========== */
body {
  background: 
    /* Градиент по всей ширине экрана: тёмный по краям, светлый в центре */
    linear-gradient(
      to right,
      #0a0605 0%,      /* Тёмный по левому краю */
      #0a0605 15%,     /* Держим тёмный */
      #1a100e 40%,     /* Светлый в центре (цвет карточки) */
      #1a100e 60%,     /* Держим светлый */
      #0a0605 85%,     /* Плавно темнеем */
      #0a0605 100%     /* Тёмный по правому краю */
    ) !important;
  background-attachment: fixed !important;
}

/* Карточка — без тени и без маски, чтобы не было полос */
.site-card {
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ========== МЯГКИЙ ФОН ВОКРУГ КАРТОЧКИ (БЕЗ ПОЛОС) ========== */
body {
  background: 
    /* Градиент по всей ширине экрана: тёмный по краям, светлый в центре */
    linear-gradient(
      to right,
      #0a0605 0%,      /* Тёмный по левому краю */
      #0a0605 15%,     /* Держим тёмный */
      #1a100e 40%,     /* Светлый в центре (цвет карточки) */
      #1a100e 60%,     /* Держим светлый */
      #0a0605 85%,     /* Плавно темнеем */
      #0a0605 100%     /* Тёмный по правому краю */
    ) !important;
  background-attachment: fixed !important;
}

/* Карточка — без тени и без маски, чтобы не было полос */
.site-card {
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ==========================================================
   MOBILE FINAL — без конфликтов с ПК
   ========================================================== */
@media (max-width: 900px) {

  /* Запрет зума на телефоне */
  html, body {
    
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    zoom: 1 !important;
  }

  /* Обычный скролл */
  html {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #0a0605 !important;
  }

  .stage, .site-card, .sections {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #0a0605 !important;
    overflow: visible !important;
  }

  /* Слайды: ровно один экран под шапкой */
  .page, .page-intro, .page-split, .page-about, .page-twophoto, .page-potal, .page-fullphoto {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(100dvh - 60px) !important;
    min-height: calc(100dvh - 60px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #0a0605 !important;
    scroll-snap-align: none !important;
  }

  /* ===== ОТКЛЮЧАЕМ ВСЕ ZOOM/SCALE/TRANSFORM НА HOVER/ACTIVE ===== */
  #latun .latun-card, #metall .latun-card,
  #latun .latun-card:hover, #metall .latun-card:hover,
  #latun .latun-card:active, #metall .latun-card:active,
  #latun .latun-photo, #metall .latun-photo,
  #latun .latun-photo:hover, #metall .latun-photo:hover,
  #keramogranit .split-video, #derevo .split-video,
  #keramogranit .split-video:hover, #derevo .split-video:hover,
  #keramogranit .split-photo, #derevo .split-photo,
  #keramogranit .split-photo:hover, #derevo .split-photo:hover {
    scale: 1 !important;
    zoom: 1 !important;
    transform: none !important;
  }

  #keramogranit video, #derevo video, #potal .potal-img,
  #nitrid .fullphoto-bg {
    scale: 1 !important;
    zoom: 1 !important;
  }

  /* ===== ЛАТУНЬ И МЕТАЛЛ: шапка текста сверху, 2 бокса снизу ===== */
  #latun, #metall {
    display: block !important;
    isolation: isolate !important;
  }

  #latun > .section-video, #metall > .section-video {
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #latun .intro-left, #metall .intro-left {
    position: absolute !important;
    top: 4% !important;
    right: 5% !important;
    left: 5% !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 90% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #latun .eyebrow, #metall .eyebrow { margin-bottom: 6px !important; }
  #latun h1, #metall h2 {
    margin-bottom: 6px !important;
    font-size: clamp(26px, 7vw, 36px) !important;
  }
  #latun .intro-bottom, #metall .intro-bottom {
    margin-top: 4px !important;
    font-size: clamp(10px, 2.6vw, 13px) !important;
    line-height: 1.4 !important;
  }

  #latun .intro-right, #metall .intro-right {
    position: absolute !important;
    right: 0 !important;
    bottom: 4% !important;
    left: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
  }

  #latun .latun-gallery, #metall .latun-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  #latun .latun-card, #metall .latun-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .42) !important;
  }

  #latun .latun-card:first-child, #metall .latun-card:first-child {
    border-radius: 14px 0 0 14px !important;
  }
  #latun .latun-card:last-child, #metall .latun-card:last-child {
    border-radius: 0 14px 14px 0 !important;
  }

  #latun .latun-photo, #metall .latun-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #latun .latun-caption, #metall .latun-caption {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, .88)) !important;
    border-radius: 0 !important;
  }

  #latun .latun-caption ul, #metall .latun-caption ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    line-height: 1.3 !important;
  }

  #latun .latun-caption li, #metall .latun-caption li {
    visibility: visible !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
  }

  /* Анимация Металла (по классу .metall-animate из JS) */
  #metall.metall-animate .latun-card {
    animation: latunRise .9s cubic-bezier(.22, 1, .36, 1) both !important;
  }
  #metall.metall-animate .latun-card:nth-child(1) { animation-delay: .2s !important; }
  #metall.metall-animate .latun-card:nth-child(2) { animation-delay: .45s !important; }
  #metall.metall-animate .latun-caption { animation: captionSlide .6s ease both !important; }
  #metall.metall-animate .latun-caption li { animation: captionLine .35s ease both !important; }

  /* ===== КЕРАМОГРАНИТ И БРУС: видео сверху, фото снизу ===== */
  #keramogranit, #derevo {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  #keramogranit .split-video, #derevo .split-video {
    position: relative !important;
    flex: 0 0 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-height: 0 !important;
    max-height: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0a0605 !important;
  }

  #keramogranit .split-video video, #derevo .split-video video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #keramogranit .split-photo, #derevo .split-photo {
    position: relative !important;
    flex: 0 0 50% !important;
    width: 100% !important;
    height: 50% !important;
    min-height: 0 !important;
    max-height: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #keramogranit .split-text, #derevo .split-text {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #keramogranit .split-text h2, #derevo .split-text h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  #keramogranit .split-text p, #derevo .split-text p {
    font-size: clamp(12px, 3vw, 14px) !important;
    line-height: 1.45 !important;
  }

  /* ===== ПОТАЛЬ ===== */
  #potal {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    isolation: isolate !important;
  }

  #potal .potal-video-slot {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  #potal .potal-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #potal .potal-box {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
  }

  #potal .potal-img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }
  #potal .potal-img.mirrored {
    transform: scaleX(-1) !important;
  }

  #potal .potal-center-text {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(12px) !important;
  }

  #potal.potal-opened .potal-center-text {
    visibility: visible !important;
    animation: mobilePotalTextIn .7s ease-out both !important;
  }

  @keyframes mobilePotalTextIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===== НИТРИД ===== */
  #nitrid .fullphoto-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }
  #nitrid .fullphoto-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: auto !important;
    padding: 20px !important;
    text-align: center !important;
  }

  /* ===== ФУТЕР ===== */
  .footer {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    background: #0a0605 !important;
  }
  .side-note { display: none !important; }
}

/* ========== ФИНАЛЬНЫЕ ФИКСЫ ДЛЯ ТЕЛЕФОНА ========== */
@media (max-width: 900px) {

  /* 1. ТОПБАР — красивый и компактный */
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    gap: 10px !important;
    background: #1a100e !important;
    border-bottom: 1px solid rgba(201, 165, 90, 0.2) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    flex-wrap: nowrap !important;
  }
  .brand {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .logo-img {
    height: 30px !important;
    width: auto !important;
    max-width: 140px !important;
  }
  .nav {
    position: absolute !important;
    top: 58px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: none !important;
    flex-direction: column !important;
    background: #1a100e !important;
    padding: 16px !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(201, 165, 90, 0.2) !important;
    z-index: 999 !important;
  }
  .nav.open { display: flex !important; }
  .nav a {
    font-size: 14px !important;
    padding: 10px 0 !important;
    text-align: center !important;
  }
  .back-btn {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 8px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .menu-toggle {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(201, 165, 90, 0.4) !important;
    border-radius: 50% !important;
  }

  /* 2. УБИРАЕМ ЗУМ (scale/transform) НА ВСЁМ */
  * {
    -webkit-tap-highlight-color: transparent !important;
  }
  #latun, #metall, #keramogranit, #derevo, #potal, #nitrid,
  #latun *, #metall *, #keramogranit *, #derevo *, #potal *, #nitrid * {
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
  }
  /* Оставляем только нужные transform для Потали (разъезд) */
  #potal .potal-left,
  #potal .potal-right,
  #potal .potal-img.mirrored {
    transform: revert !important;
  }
  #potal .potal-left { transform: translateX(0) !important; }
  #potal .potal-right { transform: translateX(0) !important; }
  #potal.potal-opened .potal-left { transform: translateX(-90%) !important; }
  #potal.potal-opened .potal-right { transform: translateX(90%) !important; }
  #potal .potal-img.mirrored { transform: scaleX(-1) !important; }

  /* И для карточек Металла (анимация появления) */
  #metall.metall-animate .latun-card {
    transform: none !important;
    animation: latunRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  }

  /* 3. БОКСЫ ЛАТУНИ И МЕТАЛЛА — УЖЕ (по центру) */
  #latun .intro-right, #metall .intro-right {
    position: absolute !important;
    right: 0 !important;
    bottom: 5% !important;
    left: 0 !important;
    z-index: 3 !important;
    width: 100% !important;
    padding: 0 8% !important; /* Чуть больше отступов по бокам */
    box-sizing: border-box !important;
  }
  #latun .latun-gallery, #metall .latun-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 340px !important; /* Уже, чтобы влезло по центру */
    margin: 0 auto !important;
  }
  #latun .latun-card, #metall .latun-card {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  #latun .latun-card:first-child, #metall .latun-card:first-child {
    border-radius: 14px 0 0 14px !important;
  }
  #latun .latun-card:last-child, #metall .latun-card:last-child {
    border-radius: 0 14px 14px 0 !important;
  }
  #latun .latun-caption, #metall .latun-caption {
    padding: 6px 4px !important;
  }
  #latun .latun-caption li, #metall .latun-caption li {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  /* Центрируем текст Латуни и Металла */
  #latun .intro-left, #metall .intro-left {
    position: absolute !important;
    top: 4% !important;
    right: 5% !important;
    left: 5% !important;
    z-index: 3 !important;
    width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
}

/* ========== НОВЫЙ ВАРИАНТ: touch-action НА ВСЕХ ЭЛЕМЕНТАХ ========== */
@media (max-width: 900px) {
  html,
  body,
  body * {
    touch-action: pan-x pan-y;
  }
}

/* ========== ПОЛНАЯ АДАПТАЦИЯ ПОД ЛЮБОЙ ЭКРАН ========== */
@media (max-width: 900px) {
  /* Все размеры — через vw и clamp(), чтобы масштабировалось под любой экран */
  
  /* Слайды */
  .page, .page-intro, .page-split, .page-about,
  .page-twophoto, .page-potal, .page-fullphoto {
    height: calc(100dvh - 5vw) !important;
    min-height: calc(100dvh - 5vw) !important;
    padding: clamp(10px, 2vw, 20px) !important;
  }

  /* Топбар */
  .topbar {
    height: clamp(44px, 8vw, 60px) !important;
    padding: 0 clamp(10px, 3vw, 20px) !important;
  }
  .logo-img {
    height: clamp(22px, 5vw, 32px) !important;
  }

  /* Латунь / Металл — 2 бокса */
  #latun .intro-left, #metall .intro-left {
    top: 3% !important;
    width: 94% !important;
  }
  #latun h1, #metall h2 {
    font-size: clamp(22px, 7vw, 36px) !important;
    margin-bottom: clamp(4px, 1vw, 8px) !important;
  }
  #latun .intro-bottom, #metall .intro-bottom {
    font-size: clamp(9px, 2.5vw, 13px) !important;
    line-height: 1.35 !important;
  }
  #latun .intro-right, #metall .intro-right {
    bottom: 3% !important;
    padding: 0 4% !important;
  }
  #latun .latun-gallery, #metall .latun-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    max-width: min(520px, 90vw) !important;
  }
  #latun .latun-card, #metall .latun-card {
    aspect-ratio: 1/1 !important;
    border-radius: 0 !important;
  }
  #latun .latun-card:first-child, #metall .latun-card:first-child {
    border-radius: clamp(8px, 2vw, 14px) 0 0 clamp(8px, 2vw, 14px) !important;
  }
  #latun .latun-card:last-child, #metall .latun-card:last-child {
    border-radius: 0 clamp(8px, 2vw, 14px) clamp(8px, 2vw, 14px) 0 !important;
  }
  #latun .latun-caption li, #metall .latun-caption li {
    font-size: clamp(7px, 2vw, 11px) !important;
    line-height: 1.2 !important;
  }

  /* Керамогранит / Брус — видео сверху, фото снизу */
  #keramogranit, #derevo {
    flex-direction: column !important;
  }
  #keramogranit .split-video, #derevo .split-video {
    flex: 0 0 50% !important;
    height: 50% !important;
  }
  #keramogranit .split-photo, #derevo .split-photo {
    flex: 0 0 50% !important;
    height: 50% !important;
    padding: clamp(10px, 3vw, 20px) !important;
  }
  #keramogranit .split-text h2, #derevo .split-text h2 {
    font-size: clamp(18px, 5.5vw, 28px) !important;
  }
  #keramogranit .split-text p, #derevo .split-text p {
    font-size: clamp(10px, 3vw, 14px) !important;
  }

  /* Поталь — 2 фото */
  #potal .potal-box {
    flex: 0 0 50% !important;
    width: 50% !important;
  }
  #potal .potal-center-text h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  #potal .potal-center-text p {
    font-size: clamp(10px, 2.5vw, 13px) !important;
  }

  /* Нитрид */
  #nitrid .fullphoto-content {
    padding: clamp(10px, 3vw, 20px) !important;
  }
  #nitrid .fullphoto-content h2 {
    font-size: clamp(20px, 5.5vw, 30px) !important;
  }
  #nitrid .fullphoto-content p {
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1.5 !important;
  }

  /* Футер */
  .footer {
    font-size: clamp(8px, 2vw, 10px) !important;
    padding: clamp(6px, 1.5vw, 10px) clamp(10px, 2vw, 16px) !important;
  }
}

/* ========== ФИКСИРОВАННЫЕ РАЗМЕРЫ (БЕЗ ПЕРЕСТРОЙКИ ПРИ ЗУМЕ) ========== */
@media (max-width: 900px) {
  /* Все элементы — фиксированные px, без vw/vh/% */
  .page, .page-intro, .page-split, .page-about,
  .page-twophoto, .page-potal, .page-fullphoto {
    height: 750px !important;
    min-height: 750px !important;
    max-height: 750px !important;
    padding: 15px 20px !important;
    overflow: hidden !important;
  }

  /* Топбар */
  .topbar {
    height: 56px !important;
    padding: 0 16px !important;
  }
  .logo-img { height: 28px !important; }

  /* Латунь / Металл */
  #latun .intro-left, #metall .intro-left {
    top: 20px !important;
    width: calc(100% - 32px) !important;
  }
  #latun h1, #metall h2 {
    font-size: 32px !important;
    margin-bottom: 6px !important;
  }
  #latun .intro-bottom, #metall .intro-bottom {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  #latun .intro-right, #metall .intro-right {
    bottom: 20px !important;
    padding: 0 16px !important;
  }
  #latun .latun-gallery, #metall .latun-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 320px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
  #latun .latun-card, #metall .latun-card {
    width: 160px !important;
    height: 160px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 0 !important;
  }
  #latun .latun-card:first-child, #metall .latun-card:first-child {
    border-radius: 12px 0 0 12px !important;
  }
  #latun .latun-card:last-child, #metall .latun-card:last-child {
    border-radius: 0 12px 12px 0 !important;
  }
  #latun .latun-caption li, #metall .latun-caption li {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  /* Керамогранит / Брус */
  #keramogranit, #derevo {
    flex-direction: column !important;
  }
  #keramogranit .split-video, #derevo .split-video {
    width: 100% !important;
    height: 375px !important;
    flex: 0 0 375px !important;
  }
  #keramogranit .split-photo, #derevo .split-photo {
    width: 100% !important;
    height: 375px !important;
    flex: 0 0 375px !important;
    padding: 20px !important;
  }
  #keramogranit .split-text h2, #derevo .split-text h2 {
    font-size: 26px !important;
  }
  #keramogranit .split-text p, #derevo .split-text p {
    font-size: 13px !important;
  }

  /* Поталь */
  #potal .potal-box {
    flex: 0 0 50% !important;
    width: 50% !important;
    height: 750px !important;
  }
  #potal .potal-center-text h2 {
    font-size: 30px !important;
  }
  #potal .potal-center-text p {
    font-size: 12px !important;
  }

  /* Нитрид */
  #nitrid .fullphoto-content {
    padding: 20px !important;
  }
  #nitrid .fullphoto-content h2 {
    font-size: 28px !important;
  }
  #nitrid .fullphoto-content p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Футер */
  .footer {
    font-size: 10px !important;
    padding: 8px 16px !important;
  }
}

/* ========== ФИКС ЛАТУНИ И ТЕКСТА В БОКСАХ (МОБИЛКА) ========== */
@media (max-width: 900px) {
  /* 1. Текст Латуни — выравниваем по центру (как на ПК) */
  #latun .intro-left, #metall .intro-left {
    top: 20px !important;
    width: calc(100% - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  #latun .eyebrow, #metall .eyebrow {
    margin-bottom: 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }
  #latun h1, #metall h2 {
    font-size: 32px !important;
    margin-bottom: 6px !important;
    line-height: 1.1 !important;
  }
  #latun .intro-bottom, #metall .intro-bottom {
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Боксы Латуни — по центру */
  #latun .intro-right, #metall .intro-right {
    bottom: 20px !important;
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
  }
  #latun .latun-gallery, #metall .latun-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 320px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* 2. Текст в боксах — ровный, в столбик, как на ПК */
  #latun .latun-caption, #metall .latun-caption {
    padding: 10px 8px 8px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.95)) !important;
    border-radius: 0 0 12px 12px !important;
  }
  #latun .latun-caption ul, #metall .latun-caption ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #latun .latun-caption li, #metall .latun-caption li {
    font-size: 10px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important; /* не переносить строки */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* если не влезает — ... */
    display: block !important;
  }

  /* Для правого бокса — чуть меньше шрифт, если текст длинный */
  #latun .latun-card:last-child .latun-caption li,
  #metall .latun-card:last-child .latun-caption li {
    font-size: 9px !important;
  }
}

/* ========== УБИРАЕМ КНОПКИ ВИДЕО И ФИКСИМ ТЕКСТ В БОКСАХ ========== */
@media (max-width: 900px) {
  /* 1. Убираем все элементы управления видео (Play, пауза и т.д.) */
  video::-webkit-media-controls,
  video::-webkit-media-controls-panel,
  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-start-playback-button,
  video::-webkit-media-controls-enclosure,
  video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Убираем возможные кастомные кнопки Play, если есть */
  .video-play,
  .play-button,
  .video-overlay-play,
  .video__play,
  .play-btn {
    display: none !important;
  }

  /* Видео — автозапуск, без управления */
  video {
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: none !important; /* нельзя нажать на видео */
  }

  /* 2. Текст в боксах — крупнее, ровный столбик */
  #latun .latun-caption, #metall .latun-caption {
    padding: 12px 10px 10px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.95)) !important;
    border-radius: 0 0 12px 12px !important;
  }
  #latun .latun-caption ul, #metall .latun-caption ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  #latun .latun-caption li, #metall .latun-caption li {
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Правый бокс — чуть меньше (там длинные слова) */
  #latun .latun-card:last-child .latun-caption li,
  #metall .latun-card:last-child .latun-caption li {
    font-size: 10px !important;
  }
}

/* ========== ФИКС: БОКСЫ ПО ЦЕНТРУ ПОД ТЕКСТОМ ========== */
@media (max-width: 900px) {
  #latun .intro-right, #metall .intro-right {
    bottom: auto !important;
    top: 55% !important; /* Боксы под текстом (текст на 52%) */
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* ========== ФИКС: СБЛИЖАЕМ ТЕКСТ И БОКСЫ ========== */
@media (max-width: 900px) {
  /* Текст — опускаем чуть ниже середины */
  #latun .intro-left, #metall .intro-left {
    top: auto !important;
    bottom: 52% !important; /* Текст ниже середины */
    width: calc(100% - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Боксы — поднимаем чуть выше низа, ближе к тексту */
  #latun .intro-right, #metall .intro-right {
    bottom: auto !important;
    top: 50% !important; /* Боксы на уровне середины */
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* ========== ФИКС: ТЕКСТ ВЫШЕ, БОКСЫ МЕНЬШЕ, ТЕКСТ СЛЕВА ========== */
@media (max-width: 900px) {
  /* 1. Текст — чуть выше */
  #latun .intro-left, #metall .intro-left {
    bottom: 58% !important; /* Было 52%, подняли выше */
    width: calc(100% - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 2. Боксы — чуть меньше и по центру */
  #latun .intro-right, #metall .intro-right {
    top: 48% !important; /* Боксы чуть выше середины */
    padding: 0 16px !important;
    display: flex !important;
    justify-content: center !important;
  }
  #latun .latun-gallery, #metall .latun-gallery {
    width: 280px !important; /* Было 320px, уменьшили */
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  #latun .latun-card, #metall .latun-card {
    width: 140px !important; /* Было 160px */
    height: 140px !important;
    aspect-ratio: 1/1 !important;
  }

  /* 3. Текст в боксах — с левой стороны, в столбик */
  #latun .latun-caption, #metall .latun-caption {
    text-align: left !important;
    padding: 8px 6px 6px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.95)) !important;
  }
  #latun .latun-caption ul, #metall .latun-caption ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
  }
  #latun .latun-caption li, #metall .latun-caption li {
    text-align: left !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  #latun .latun-card:last-child .latun-caption li,
  #metall .latun-card:last-child .latun-caption li {
    font-size: 9px !important;
  }
}

/* ========== ФИНАЛ: ТЕНЬ И ВИДЕО БЕЗ КНОПОК ========== */
@media (max-width: 900px) {
  /* 1. Тень у левого бокса — дотягиваем до углов */
  #latun .latun-card:first-child,
  #metall .latun-card:first-child {
    box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,0.8) !important;
    border-radius: 12px 0 0 12px !important;
    overflow: hidden !important;
  }

  /* 2. Прячем все кнопки Play в видео */
  video::-webkit-media-controls,
  video::-webkit-media-controls-panel,
  video::-webkit-media-controls-play-button,
  video::-webkit-media-controls-start-playback-button,
  video::-webkit-media-controls-enclosure,
  video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ========== УБИРАЕМ ТЕНЬ У БОКСОВ + ФИКС ПАНЕЛИ ========== */
@media (max-width: 900px) {
  /* 1. Убираем тень у боксов Латуни и Металла полностью */
  #latun .latun-card,
  #metall .latun-card {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
  }

  /* 2. Кнопка «назад» — ближе к бургеру (справа) */
  .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    gap: 8px !important;
  }
  .brand {
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .nav { display: none !important; }
  .back-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 4px 0 0 !important; /* Ближе к бургеру */
  }
  .menu-toggle {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }
}

/* ========== УБИРАЕМ ВСЕ ТЕНИ У ЛЕВОГО БОКСА (ЛАТУНЬ) ========== */
@media (max-width: 900px) {
  /* Убираем тень с карточки */
  #latun .latun-card:first-child {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
  }

  /* Убираем тень с фото */
  #latun .latun-card:first-child .latun-photo {
    box-shadow: none !important;
    filter: none !important;
  }

  /* Убираем тень с плашки (градиент-подложки) */
  #latun .latun-card:first-child .latun-caption {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    background: linear-gradient(to top, rgba(10,6,5,0.9) 0%, transparent 100%) !important;
    border-radius: 0 0 0 12px !important; /* Ровный угол */
  }

  /* Убираем тень с текста внутри */
  #latun .latun-card:first-child .latun-caption li,
  #latun .latun-card:first-child .latun-caption ul {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* ========== УБИРАЕМ "ГРЯЗНУЮ" ПЛАШКУ НА ЛЕВОМ БОКСЕ ========== */
@media (max-width: 900px) {
  #latun .latun-card:first-child .latun-caption {
    background: rgba(10, 6, 5, 0.85) !important; /* Плотное затемнение, без градиента */
    border-radius: 0 !important; /* Без скругления — не даёт грязный край */
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* ========== ЖЁСТКО УБИРАЕМ ТЕНЬ У ЛЕВОГО БОКСА ========== */
@media (max-width: 900px) {
  #latun .latun-card:first-child .latun-caption {
    background: transparent !important; /* Убираем фон плашки */
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 8px 8px !important;
  }

  /* Убираем тень с текста */
  #latun .latun-card:first-child .latun-caption li,
  #latun .latun-card:first-child .latun-caption ul {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* === ФИКС НОВЫХ СЛАЙДОВ (ФОТО + ВИДЕО) === */
.page-split {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100svh !important;
    height: 100svh !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
}
.page-split .split-photo {
    flex: 1 !important;
    min-height: 100svh !important;
    height: 100svh !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}
.page-split .split-video {
    flex: 1 !important;
    min-height: 100svh !important;
    height: 100svh !important;
    overflow: hidden !important;
    position: relative !important;
}
.page-split .split-video video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.page-split .split-text {
    padding: clamp(24px, 4vw, 56px) !important;
    max-width: 480px !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: left !important;
}
.page-split .split-photo::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(10, 6, 5, 0.6) !important;
    z-index: 1 !important;
}
@media (max-width: 900px) {
    .page-split {
        flex-direction: column !important;
    }
    .page-split .split-photo,
    .page-split .split-video {
        flex: 1 !important;
        min-height: 50svh !important;
        height: 50svh !important;
    }
    .page-split .split-text {
        text-align: center !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
}

/* === ВЫРАВНИВАНИЕ ТЕКСТА (МЕТАЛЛ И ЛАКОКРАСОЧНЫЕ) === */
#metall .split-text,
#potal .split-text {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/* === ЖЁСТКИЙ ФИКС ВИДЕО === */
.page-split .split-video {
    min-height: 100svh !important;
    height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0a0605 !important;
}
.page-split .split-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Для мобилок */
@media (max-width: 900px) {
    .page-split .split-video {
        min-height: 50svh !important;
        height: 50svh !important;
    }
}

/* === ЖЁСТКИЙ ФИКС РАЗМЕРОВ ВИДЕО === */
.split-video {
    min-height: 100svh !important;
    height: 100svh !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0a0605 !important;
}
.split-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

/* === ВЫРАВНИВАНИЕ ТЕКСТА ПО ЛЕВОМУ КРАЮ (ДЛЯ МЕДИ И ЛАКОКРАСОЧНЫХ) === */
#metall .split-text,
#potal .split-text {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Прижимаем к левому краю */
    justify-content: center !important;
    height: 100% !important;
    padding-left: clamp(24px, 4vw, 56px) !important; /* Отступ слева */
    padding-right: clamp(24px, 4vw, 56px) !important;
}

/* На мобилке — по центру (чтобы было красиво) */
@media (max-width: 900px) {
    #metall .split-text,
    #potal .split-text {
        align-items: center !important;
        text-align: center !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* === ПОДНИМАЕМ ТЕКСТ МЕДИ ВЫШЕ === */
#metall .split-text {
    justify-content: flex-start !important; /* Прижимаем к верху */
    padding-top: clamp(60px, 10vh, 120px) !important; /* Отступ сверху */
}

/* На мобилке — возвращаем по центру */
@media (max-width: 900px) {
    #metall .split-text {
        justify-content: center !important;
        padding-top: 20px !important;
    }
}

/* === ФИНАЛЬНОЕ ПОЛОЖЕНИЕ ТЕКСТА МЕДИ (ЦЕНТР СЛЕГКА ВЫШЕ) === */
#metall .split-text {
    justify-content: center !important; /* Центрируем по вертикали */
    transform: translateY(-10%) !important; /* Сдвигаем чуть выше центра */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* На мобилке — строго по центру */
@media (max-width: 900px) {
    #metall .split-text {
        transform: none !important;
        justify-content: center !important;
    }
}

/* === ЖЁСТКИЙ МОБИЛЬНЫЙ ФИКС === */
@media (max-width: 900px) {

    /* 1. Скролл: один слайд на экран */
    html, body {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scroll-snap-type: y mandatory !important;
        scroll-behavior: smooth !important;
    }

    /* 2. Каждый слайд — ровно на весь экран */
    .page, .page-split, .page-intro, .page-twophoto, .page-fullphoto {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important; /* Фото сверху, видео снизу */
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Фото и видео — 50/50 */
    .page-split .split-photo,
    .page-split .split-video {
        flex: 1 1 50% !important;
        width: 100% !important;
        min-height: 0 !important;
        height: 50% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* 4. Текст на фото — по центру */
    .page-split .split-text {
        padding: 20px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 5. Убираем затемнение, если оно мешает */
    .page-split .split-photo::before {
        background: rgba(10, 6, 5, 0.5) !important;
    }
}

/* === ЖЁСТКИЙ МОБИЛЬНЫЙ ФИКС: КОЛОНКА ВЕЗДЕ === */
@media (max-width: 900px) {
    /* Принудительно колонка для всех слайдов, включая Лакокрасочные */
    .page-split, 
    .page, 
    .page-intro, 
    .page-twophoto, 
    .page-fullphoto {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    /* Фото и видео — 50/50 по высоте */
    .page-split .split-photo,
    .page-split .split-video,
    .page-twophoto .split-photo {
        flex: 1 1 50% !important;
        width: 100% !important;
        height: 50% !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Текст поверх фото — по центру */
    .page-split .split-text {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
        transform: none !important;
        z-index: 2 !important;
    }

    /* Для Лакокрасочных (id="potal") принудительно колонка */
    #potal {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* === ФИКС МОБИЛЬНОГО МЕНЮ (ВЫЕЗД) === */
@media (max-width: 900px) {
    .nav {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #1a100e !important;
        display: none !important;
        flex-direction: column !important;
        padding: 20px !important;
        gap: 15px !important;
        border-bottom: 1px solid rgba(201, 165, 90, 0.2) !important;
        z-index: 999 !important;
    }
    .nav.open {
        display: flex !important;
    }
    .nav a {
        color: #e8e0d8 !important;
        font-size: 16px !important;
        text-align: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(201, 165, 90, 0.1) !important;
    }
    .nav a:last-child {
        border-bottom: none !important;
    }
}

/* === ЖЁСТКИЙ ФИКС БУРГЕРА (ПОВЕРХ ВСЕХ СЛОЕВ) === */
@media (max-width: 900px) {
    /* 1. Кнопка-бургер поверх всего */
    .menu-toggle {
        position: relative !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        display: flex !important;
    }

    /* 2. Меню поверх видео и фото */
    .nav {
        position: absolute !important;
        top: 100% !important; /* Прямо под шапкой */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #1a100e !important;
        display: none !important;
        flex-direction: column !important;
        padding: 20px !important;
        gap: 15px !important;
        border-bottom: 1px solid rgba(201, 165, 90, 0.2) !important;
        z-index: 99999 !important; /* Поверх всего */
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    }
    .nav.open {
        display: flex !important;
    }
    .nav a {
        color: #e8e0d8 !important;
        font-size: 16px !important;
        text-align: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(201, 165, 90, 0.1) !important;
        text-decoration: none !important;
    }
    .nav a:last-child {
        border-bottom: none !important;
    }

    /* 3. Шапка тоже поверх */
    .topbar {
        z-index: 100000 !important;
        position: sticky !important;
        top: 0 !important;
    }
}

/* === ЖЁСТКИЙ ФИКС МЕНЮ (100% РАБОТАЕТ) === */
@media (max-width: 900px) {
    /* Кнопка поверх всего */
    .menu-toggle {
        position: relative !important;
        z-index: 1000000 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Меню поверх всего */
    .nav {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #1a100e !important;
        display: none !important;
        flex-direction: column !important;
        padding: 20px !important;
        gap: 15px !important;
        border-bottom: 1px solid rgba(201, 165, 90, 0.2) !important;
        z-index: 1000000 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    }
    .nav.open {
        display: flex !important;
    }
    .nav a {
        color: #e8e0d8 !important;
        font-size: 16px !important;
        text-align: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(201, 165, 90, 0.1) !important;
        text-decoration: none !important;
    }
    .nav a:last-child {
        border-bottom: none !important;
    }

    /* Шапка тоже поверх */
    .topbar {
        z-index: 1000001 !important;
        position: sticky !important;
        top: 0 !important;
    }
}

/* === ПОДЧЕРКИВАНИЕ ДЛЯ МЕДИ (ПОСЛЕДНИЙ ПУНКТ) === */
@media (max-width: 900px) {
    .nav a:last-child {
        border-bottom: 1px solid rgba(201, 165, 90, 0.1) !important;
    }
    .nav a {
        border-bottom: 1px solid rgba(201, 165, 90, 0.1) !important;
    }
}

/* === ВОЗВРАЩАЕМ ПОРЯДОК НА ПК (ФОТО СЛЕВА, ВИДЕО СПРАВА) === */
@media (min-width: 901px) {
    .page-split {
        display: flex !important;
        flex-direction: row !important;
    }
    .page-split .split-photo {
        order: 1 !important;
    }
    .page-split .split-video {
        order: 2 !important;
    }
}

/* === СТИЛИ ДЛЯ СПИСКОВ В ТЕКСТЕ СЛАЙДОВ === */
.split-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 !important;
}
.split-text ul li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--muted) !important;
}
.split-text ul li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--gold) !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* === УБИРАЕМ КРУЖКИ У НИТРИДА ТИТАНА === */
#nitrid .split-text ul,
#nitrid .fullphoto-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#nitrid .split-text ul li,
#nitrid .fullphoto-content ul li {
    padding-left: 0 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

#nitrid .split-text ul li::before,
#nitrid .fullphoto-content ul li::before {
    display: none !important; /* Убираем псевдоэлемент с точкой */
    content: none !important;
}

/* === ВЫРАВНИВАЕМ ТЕКСТ НИТРИДА ТИТАНА ПОД ОСТАЛЬНЫЕ СЛАЙДЫ === */
#nitrid .fullphoto-content p {
    font-size: 14px !important;
    font-weight: 400 !important; /* Обычный шрифт, не жирный */
    color: var(--muted) !important; /* Серый цвет, как у остальных */
    line-height: 1.8 !important;
    text-align: center !important;
    margin-top: 16px !important;
}

/* === ФИНАЛЬНЫЙ ФИКС ТЕКСТА НИТРИДА ТИТАНА === */
#nitrid .fullphoto-content p {
    font-size: 14px !important;      /* Обычный размер */
    font-weight: 400 !important;     /* Не жирный */
    color: var(--muted) !important;  /* Серый, как у всех */
    line-height: 1.8 !important;
    text-align: center !important;
    margin-top: 16px !important;
}

/* === ВОЗВРАЩАЕМ ЗОЛОТОЙ ЦВЕТ ЗАГОЛОВКУ НИТРИДА === */
#nitrid .fullphoto-content .eyebrow {
    color: var(--gold) !important; /* Золотистый, как у остальных */
}

/* === УБИРАЕМ ДВОЙНЫЕ КРУЖКИ (ОСТАВЛЯЕМ ТОЛЬКО SPAN) === */
.split-text ul li::before {
    content: none !important;
}

/* === ДОБАВЛЯЕМ ОТСТУП СВЕРХУ ЗАГОЛОВКАМ НА ТЕЛЕФОНАХ === */
@media (max-width: 900px) {
    /* Для Латуни, Керамогранита и Лакокрасочных */
    #latun .split-text,
    #keramogranit .split-text,
    #potal .split-text {
        padding-top: 40px !important; /* Отступ сверху, как у Шпона/Меди */
    }
}