:root{
      --accent: #1976d2;
      --text: #222;
      --max-text-size: 48;
      --min-text-size: 12;
    }
    /* сброс */
    *{
	box-sizing:border-box;
	margin:0;
	padding:0
	}
    html{
	height:100%;
	scroll-behavior:auto;
	overflow-x: hidden;
	}
    body{min-height:100%;
	font-family:Arial, Helvetica, sans-serif;
	color:var(--text);
	overflow-x:hidden;
	}
	
    /* контейнер с прилипанием по оси y */
    main{
      height:100vh; /* fallback для старых браузеров */
   	  height: 100dvh; 
      width:100%;
      overflow-y:auto;
      scroll-snap-type:y mandatory; /* proximity  */
      -webkit-overflow-scrolling: touch;
    }
    section{
      scroll-snap-align:start; 
      min-height:100vh; /* fallback */
  	  min-height: 100dvh;
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:1.25rem;
      padding:2rem;
      text-align:center;
      position: relative;
	  overflow:hidden;
    }
    /* белые полосы по бокам — теперь absolute внутри section */
    .frame-left, .frame-right {
      position: absolute; /* ← ИЗМЕНЕНО: fixed → absolute */
      top: 0;
      bottom: 0;
      width: 12px;
      background: white;
      z-index: 200;
        pointer-events: none; /* чтобы не ловили клики */
    }
    .frame-left { left: 0; }
    .frame-right { right: 0; } /* ← теперь работает от края секции */
    /* фоны секций */
    #section1{background:#9d9d9d}
    #section2{background:#d9d9d9}
    #section3{background:#9d9d9d}
    #section4{background:#a7a7a7}
    /* картинка в секции */
    .photo {
      width: 100%;
      max-width: 1100px;
      height: clamp(40vh, 50vh, 60vh);
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
      display:block;
    }
    /* небольшой блок с текстом */
    .text-block-section {
      width: min(90%, 900px);
      max-width: 900px;
      max-height: 22vh;
      min-height: 64px;
      padding: 1rem 1.25rem;
      background: rgba(255,255,255,0.85);
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.05;
      word-break: break-word;
      font-size: calc(var(--max-text-size) * 1px);
    }
    /* уважение к пользователю с reduced motion */
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
    }
    /* ОЧЕНЬ ТОНКАЯ ПОЛОСА ПРОКРУТКИ */
    ::-webkit-scrollbar {
      width: 4px;
    }
    ::-webkit-scrollbar-track {
      background: #f8f8f8;
      border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb {
      background: #d0d0d0;
      border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #b0b0b0;
    }
    .top-bar {
      position:fixed;
      top:0; left:0; right:0;
      height:12px;
      background:#fff;
      z-index:100;
    }
    /* === ВЕРХНЕЕ МЕНЮ === */
    .top-menu {
      position: fixed;
      top: 57px;
      left: 137px;
      right: 137px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px;
      z-index: 90;
      opacity: 0;
      animation: menuAppear 1.5s ease 2s forwards;
    }
    /* Класс для чёрного цвета меню */
    .top-menu.scrolled .menu-item {
      color: #000 !important;
      text-shadow: none !important;
    }
    .menu-left, .menu-right {
      display: flex;
      gap: 40px;
    }
    .menu-item {
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      padding: 5px 10px;
      border-radius: 4px;
      transition: color 0.8s ease, text-shadow 0.8s ease, background-color 0.3s ease;
      white-space: nowrap;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    .menu-item:hover {
      color: #f0f0f0;
    }
    /* === ВЕРХНИЕ ЗАГОЛОВКИ === */
    .header-titles {
      position: fixed;
      top: 37px;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 80;
      opacity: 0;
      animation: textAppear 1.5s ease 1s forwards;
    }
    /* Класс для чёрного цвета заголовков */
    .header-titles.scrolled .main-title,
    .header-titles.scrolled .sub-title {
      color: #000 !important;
      text-shadow: none !important;
    }
    .main-title {
      font-size: 44px;
      font-weight: bold;
      color: #fff;
      margin: 0;
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      transition: color 0.8s ease, text-shadow 0.8s ease;
    }
    .sub-title {
      font-size: 24px;
      color: #fff;
      margin-top: 23px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      transition: color 0.8s ease, text-shadow 0.8s ease;
    }
    .hero {
      position:relative;
      min-height:100vh;
      height:auto;
      padding-bottom:120px;
      overflow:hidden;
      text-align:center;
      perspective:1000px;
      width:100%;
      max-width:100%;
    }
    .hero-bg {
      position:absolute !important;
      top:12px !important;
      left:12px !important;
      right:12px !important;
      bottom:0 !important;
      width:calc(100% - 24px) !important;
      height:calc(100vh - 12px);
      object-fit:cover;
      opacity:0;
      transform:scale(1.05);
      transition:opacity 2.5s ease, transform 4s ease;
      z-index:1;
    }
    .hero-bg.visible { opacity:1; transform:scale(1); }
    /* НЕЗАВИСИМЫЕ ЭЛЕМЕНТЫ */
    .logo-wrapper {
      position:absolute !important;
      left:50% !important;
      transform:translateX(-50%) !important;
      margin:0 !important;
      top: 30vh;
      z-index:50;
    }
    .hero-text-block {
      position:absolute !important;
      left:50% !important;
      transform:translateX(-50%) !important;
      margin:0 !important;
      top: 60vh;
      z-index:5;
      width:90%;
      max-width:600px;
      color:#fff;
      text-shadow:0 2px 4px rgba(0,0,0,.4);
    }
    .button-wrapper {
      position:absolute !important;
      left:50% !important;
      transform:translateX(-50%) !important;
      margin:0 !important;
      bottom: 5vh;
      z-index:5;
    }
    .hero-logo {
      width:auto;
      height:122px;
     /* max-width:90vw;*/
      transform:scale(1.8);
      transform-origin:center;
      opacity:0;
      animation:logoAppear 2s ease 3s forwards;
    }
    .hero-text-block h1, .hero-text-block p {
      opacity:0;
      transform:translateY(51px);
      animation:textFade 3.5s ease 1s forwards;
    }
    .hero-text-block h1 {
      font-size:3rem;
      margin-bottom:1rem;
    }
    .hero-text-block p  {
      font-size:1.2rem;
      margin:0 auto 1.5rem;
    }
    .button-wrapper a {
      display:inline-block;
      padding:1rem 2rem;
      background:#ffcc00;
      color:#111;
      border-radius:50px;
      font-weight:600;
      text-decoration:none;
      opacity:0;
      animation:buttonAppear 4.2s ease 2s forwards;
      white-space:nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    .button-wrapper a:hover {
      background:#e6b800;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }
    /* АНИМАЦИИ */
    @keyframes logoAppear {
      0%   { opacity:0; transform:scale(1.44); }
      100% { opacity:1; transform:scale(1.8); }
    }
    @keyframes menuAppear {
      0%   { opacity:0; transform:translateY(-20px); }
      100% { opacity:1; transform:translateY(0); }
    }
    @keyframes textAppear {
      0%   { opacity:0; transform:translateY(-20px); }
      100% { opacity:1; transform:translateY(0); }
    }
    @keyframes textFade {
      0%   { opacity:0; transform:translateY(51px); }
      40%  { opacity:1; transform:translateY(-71px); }
      100% { opacity:1; transform:translateY(0); }
    }
    @keyframes buttonAppear {
      0%   { opacity:0; transform:translateY(20px); }
      60%  { opacity:0.8; transform:translateY(-10px); }
      100% { opacity:1; transform:translateY(0); }
    }
    /* АДАПТАЦИЯ ДЛЯ РАЗНЫХ УСТРОЙСТВ */
	
	/* СРЕДНИЕ ЭКРАНЫ ПК + Ландшафтный планшет */
    @media (min-width: 1025px) and (max-width: 1199px),
           (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
      .top-menu { top: 47px; left: 80px; right: 80px; padding: 0 30px; }
      .menu-left, .menu-right { gap: 30px; }
      .menu-item { font-size: 15px; padding: 4px 8px; }
      .logo-wrapper { top: 28vh; }
      .hero-text-block { top: 56vh; }
      .button-wrapper { bottom: 15vh; }
     
    }
	/* Портретный планшет */
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
      .header-titles { top: 30px; }
      .main-title { font-size: 38px; }
      .sub-title { font-size: 22px; margin-top: 18px; }
      .top-menu { top: 50px; left: 40px; right: 40px; padding: 0 20px; justify-content: space-around; }
      .menu-left, .menu-right { gap: 0; flex: 1; justify-content: space-around; }
      .menu-item { font-size: 15px; padding: 4px 8px; flex-shrink: 1; min-width: 0; text-align: center; }
      .logo-wrapper { top: 35vh; }
      .hero-text-block { top: 52vh; }
      .button-wrapper { bottom: 17vh; }
      .header-titles { top: 14vh; }
      .sub-title { margin-top: 53px; }
    }
	/* Портретный телефон */
    @media (min-width: 601px) and (max-width: 767px) and (orientation: portrait){
      .header-titles { top: 25px; }
      .main-title { font-size: 32px; }
      .sub-title { font-size: 20px; margin-top: 15px; }
      .top-menu { top: 40px; left: 30px; right: 30px; padding: 0 15px; }
      .menu-left, .menu-right { gap: 20px; }
      .menu-item { font-size: 14px; padding: 3px 6px; }
    }
	/* Портретный телефон (до 600px) */
    @media (max-width: 600px) {
      .hero-logo { transform:scale(1.44); max-width:80vw; }
      @keyframes logoAppear { 0% { opacity:0; transform:scale(1.152); } 100% { opacity:1; transform:scale(1.44); } }
      .hero-text-block h1 { font-size:2.2rem; }
      .hero-text-block p  { font-size:1rem; }
      .button-wrapper a { padding:0.9rem 1.8rem; font-size:0.95rem; }
      .main-title { font-size: 28px; }
      .sub-title { font-size: 18px; margin-top: 10px; }
      .menu-item { font-size: 12px; padding: 3px 6px; }
      .top-menu { top: 37px; left: 15px; right: 15px; padding: 0 10px; justify-content: space-around; }
      .menu-left, .menu-right { gap: 0; flex: 1; justify-content: space-around; }
      .menu-item { flex-shrink: 1; min-width: 0; text-align: center; }
      .logo-wrapper { top: 32vh; }
      .hero-text-block { top: 58vh; }
      .button-wrapper { bottom: 12vh; }
      .header-titles { top: 14vh; }
      .sub-title { margin-top: 15px; }
    }
    @media (max-width: 480px) {
      .hero-logo { transform:scale(1.26); max-width:75vw; }
      @keyframes logoAppear { 0% { opacity:0; transform:scale(1.008); } 100% { opacity:1; transform:scale(1.26); } }
      .hero-text-block h1 { font-size:1.9rem; }
      .hero-text-block p  { font-size:0.95rem; }
      .button-wrapper a { padding:0.8rem 1.6rem; font-size:0.9rem; }
      .main-title { font-size: 24px; }
      .sub-title { font-size: 16px; margin-top: 12px; }
      .menu-item { font-size: 11px; padding: 2px 4px; }
      .top-menu { padding: 0 8px; left: 10px; right: 10px; }
      .menu-left, .menu-right { gap: 0; }
    }
    @media (max-width: 360px) {
      .hero-text-block h1 { font-size:1.7rem; }
      .hero-text-block p  { font-size:0.9rem; }
      .button-wrapper a { padding:0.7rem 1.4rem; font-size:0.85rem; }
      .main-title { font-size: 20px; }
      .sub-title { font-size: 14px; margin-top: 10px; }
      .menu-item { font-size: 10px; padding: 1px 3px; }
    }
	/* Ландшафтный телефон */
    @media (max-width: 767px) and (orientation: landscape) {
      .hero, #section2, #section3, #section4 { min-height:100vh; height:100vh; }
      .hero-bg { height:calc(100vh - 12px); }
      .logo-wrapper { top: 28vh; }
      .hero-text-block { top: 61vh; }
      .button-wrapper { bottom: 10vh; }
      .hero-logo { transform:scale(1.3); max-width:60vw; }
      @keyframes logoAppear { 0% { opacity:0; transform:scale(1.04); } 100% { opacity:1; transform:scale(1.3); } }
      .hero-text-block h1 { font-size:1.7rem; margin-bottom:0.5rem; }
      .hero-text-block p  { font-size:0.9rem; margin:0 auto 1rem; }
      .button-wrapper a { padding:0.7rem 1.4rem; font-size:0.85rem; }
      .top-menu { top: 25px; left: 20px; right: 20px; padding: 0 15px; }
      .menu-item { font-size: 12px; padding: 3px 6px; }
      .header-titles { top: 20px; }
      .main-title { font-size: 28px; }
      .sub-title { font-size: 16px; margin-top: 10px; }
    }
    /* === СТИЛИ ИЗ КОДА3 (вторая секция) === */
    .header-zone {
      position: fixed;
      top: 12px;
      left: 12px;
      right: 12px;
      height: 145px;
      background: #d9d9d9;
      z-index: 50;
    }
    .content-section2 {
      position: absolute;
      top: calc(12px + 145px + 15px);
      bottom: 21px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: center;
      gap: 17px;
    }
    .zone {
      position: relative;
      height: 100%;
      overflow: hidden;
    }
    .zone-left { width:23.3%; background:linear-gradient(90deg, #e7e7e7 0%, #dcdcdc 100%); }
    .zone-center { width:43.3%; background:#e3e3e3; }
    .zone-right { width:28.3%; background:linear-gradient(90deg, #dadada 0%, #e7e7e7 100%); }
    /* БЕЛЫЕ ЛИНИИ */
    .line { position:absolute; top:0; bottom:0; width:1px; background:white; }
    .zone-left .line-right { right:0; }
    .zone-center .line-left { left:0; }
    .zone-center .line-right { right:0; }
    .zone-right .line-left { left:0; }
    /* ВЕРХНИЕ ГОРИЗОНТАЛЬНЫЕ ЛИНИИ */
    .zone-left::before,
    .zone-center::before,
    .zone-right::before {
      content: "";
      position: absolute;
      top: 0;
      height: 1px;
      background: white;
    }
    .zone-left::before { left:-200px; right:0; }
    .zone-center::before { left:0; right:0; }
    .zone-right::before { left:0; right:-200px; }
    /* ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ БЛОКОВ */
    .zone-inner {
      position: relative;
      width: 100%;
      height: 100%;
    }
    /* БЛОКИ С ТЕКСТОМ */
    .block {
      position: absolute;
      left: 0;
      right: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
    .block-text {
      padding: 12px;
    }
    .text-content {
      margin: 0;
      width: 100%;
      height: 100%;
      color: #111;
      font-size: 16px;
      line-height: 1.3;
      text-align: center;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      opacity: 1;
    }
    .text-content.ready { opacity: 1; }
    /* БЛОКИ С ФОТО */
    .block-photo {  
      padding: 8px;
    }
    .block-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* ИСПРАВЛЕННЫЙ ВЕРХНИЙ БЛОК ПРАВОЙ КОЛОНКИ */
    .block-photo-multi {
      display: flex;
      gap: 8px;
      height: 100%;
    }
    .photo-container {
      flex: 1;
      overflow: hidden;
    }
    .photo-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* ЛЕВАЯ КОЛОНКА — 3 БЛОКА */
    .block-text-left1 {
      top: 0;
      height: 20%;
    }
    .block-photo-left1 {
      top: 20%;
      height: 40%;
    }
    .block-photo-left2 {
      top: 60%;
      height: 40%;
       
    }
    /* ЦЕНТРАЛЬНАЯ КОЛОНКА — 4 БЛОКА */
    .block-center1, .block-center3 {
      width: 35%;
    }
    .block-center2, .block-center4 {
      width: 65%;
      left: 35%;
    }
    .block-center1, .block-center2 {
      top: 0;
      height: 42%;
    }
    .block-center3, .block-center4 {
      top: 42%;
      height: 58%;
    }
    /* ПРАВАЯ КОЛОНКА — 3 БЛОКА */
    .block-right1 {
      top: 0;
      height: 54%;
    }
    .block-right2 {
      top: 54%;
      height: 25%;
    }
    .block-right3 {
      top: 79%;
      height: 21%;
    }
    .block-right3 img {
      object-fit: contain;
    }
    /* АНИМАЦИИ ДЛЯ ВТОРОЙ СЕКЦИИ */
    @keyframes fadeInCenter {
      0% { opacity: 0; transform: translateZ(-50px); }
      100% { opacity: 1; transform: translateZ(0); }
    }
 /*   @keyframes fadeInSides {
      0% { opacity: 0; transform: translateZ(-50px); }
      100% { opacity: 1; transform: translateZ(0); }
    }       /*
    /* АДАПТАЦИЯ ДЛЯ ВТОРОЙ СЕКЦИИ */
     /* СРЕДНИЕ ЭКРАНЫ ПК + Ландшафтный планшет */
	@media (min-width: 1025px) and (max-width: 1199px),
           (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
       .zone { height: 90%; }
       
    }
    /* Портретный планшет */
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
      .content-section2 { height: 70%; top: 225px; }
      .zone-left { display: none; }
      .zone-center { width: 57%; }
      .zone-right { width: 38%; }
      .zone { bottom: -20px; }
      .photo-container:last-child { display: none; }
        .block-center4 img {
       width: 100%;
      height: 100%;
       object-fit:  cover; 
          object-position: 3%;
    } 
    }
    /* Ландшафтный телефон */
    @media (max-width: 767px) and (orientation: landscape) {
      .zone-left { display: none; }
      .zone-left { display: none; }
      .zone-center { width: 57%; }
      .zone-right { width: 38%; }
      .photo-container:last-child { display: none; }
      .content-section2 {top:90px; }
        .block-center1 img { object-position: 0 10%; }
      .block-center4 img {
       width: 100%;
      height: 100%;
      object-fit: contain; /* масштаб внутри блока */
    } 
    }
    /* Портретный телефон */
    @media (max-width: 767px) and (orientation: portrait) {
      .zone-left, .zone-right { display: none; }
      .zone-center { width: 95%; }
      .block-center2 {
      top: 0;
      height: 30%;
    }
      .block-center4 {
      top: 30%;;
      height: 70%;
    }
      .block-center4 img {
       width: 100%;
      height: 100%;
       object-fit:  cover; 
          object-position: 2%;
    } 
    }

    /* === СТИЛИ ДЛЯ ГАЛЕРЕИ - 3 секция === */
      .gallery {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      padding: 2rem;
      gap: 2rem;
      flex-wrap: wrap;
      position: relative;
      opacity: 0;
      transform: translateZ(-80px) scale(0.96);
      transition: opacity 3.5s ease, transform 3.5s ease;
      width: 100%;
      box-sizing: border-box;
    }
    .gallery.visible {
      opacity: 1;
      transform: translateZ(0) scale(1);
    }
    .gallery-left {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .model-gallery {
      display: grid;
      grid-template-columns: repeat(4, 75px);
      grid-template-rows: repeat(3, 75px);
      gap: 24px;
      opacity: 1;
      transition: opacity 1.2s ease;
    }
    .model-gallery.hidden {
      opacity: 0;
      position: absolute;
      pointer-events: none;
    }
    .model-gallery-new {
      display: grid;
      grid-template-columns: repeat(4, 75px);
      grid-template-rows: repeat(3, 75px);
      gap: 24px;
      opacity: 0;
      transition: opacity 1.2s ease;
      pointer-events: none;
    }
    .model-gallery-new.visible {
      opacity: 1;
      pointer-events: all;
    }
    .model-gallery img,
    .model-gallery-new img {
      width: 100%; height: 100%;
      object-fit: cover;
      border: 1px solid #ccc;
      padding: 2px;
      cursor: pointer;
      transition: border-color 0.3s;
    }
    .model-gallery img:hover,
    .model-gallery-new img:hover { border-color: #ffcc00; }
    .model-gallery img.active,
    .model-gallery-new img.active {
      border: 2px solid #ffcc00;
      padding: 1px;
    }
    .category-buttons {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 41px;
      width: 100%;
      max-width: 396px;
    }
    .category-button {
      background: none;
      border: none;
      font-size: 1.4rem;
      color: #fff;
      cursor: pointer;
      padding: 8px 12px;
      transition: color 0.3s ease;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .category-button:hover {
      color: #333;
    }
    .category-button.active {
      color: #ffcc00;
    }
    .model-viewer {
      position: relative;
      width: 500px;
      height: 350px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .viewer-image {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      border: 1px solid #ccc;
      border-radius: 2px;
      opacity: 0;
      transition: opacity 1.2s ease;
    }
    .viewer-image.active {
      opacity: 1;
      z-index: 2;
    }
    .model-info-container {
      position: relative;
      text-align: center;
      margin-top: 20px;
      width: 100%;
      height: 80px;
      
    }
    .model-info {
      position: absolute;
      top: 220px; left: 0;
      width: 100%;
      opacity: 0;
      transition: opacity 1.2s ease;
    }
    .model-info.active {
      opacity: 1;
    }
    .model-info h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .model-info p { font-size: 1rem; color: #555; }

    /* Адаптация  */
    /* Портретный планшет */
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
      .gallery {
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 1rem;
        gap: 1rem;
      }
       /* Смещаем галерею вниз и влево */
  .gallery-left {
    margin-top: 102px;
    margin-left: 51px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 336px;
  }
       
      .model-viewer {
        width: 80%;
        height: 370px;
        margin-top: 1rem;
           margin: 0 auto;
      }
      .model-gallery, .model-gallery-new {
        width: 336px;
        grid-template-columns: repeat(4, 75px);
        grid-template-rows: repeat(3, 75px);
      }
      .model-info-container {
       top: 20px;
      }
      /* Кнопки категорий справа от галереи, сверху вниз */
  .category-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: -262px 0 0 350px;
  } 
  }
    
    /* Ландшафтный телефон */
    @media (max-width: 767px) and (orientation: landscape) {
      .gallery {
    flex-direction: row !important;
    align-items: flex-start;
    padding: 2rem;
    gap: 1rem;
          
          overflow: hidden;
  }
   .gallery.visible {
     height: 90%; top:20px;
    }
  .model-viewer {
    order: 0;
    width: 40%;
    height: 70%; 
  }
  .gallery-left {
    order: 1;
    width: 55%; 
  }
      .model-gallery, .model-gallery-new {
        grid-template-columns: repeat(4, 50px);
        grid-template-rows: repeat(3, 50px);
          gap: 15px;
      }
      .photo-container:last-child { display: none; }
      .model-info-container {
    /* top: -90px;  */
       display: none;
      }
      .category-buttons {
    width: 25%;
    position: absolute;
    flex-direction: column;
    gap: 10px;
     margin-left: 350px;
  }
    }
      
   
    /* Портретный телефон */
    @media (max-width: 767px) and (orientation: portrait) {
    
      
        body.in-section3 .header-titles {
    display: none !important;
  }
        
        .gallery {
        flex-direction: column-reverse;
        padding-left: 0;
        padding-right: 0;
          align-items: center;
    justify-content: center;
      }
       .gallery-left {
   align-items: center;
           margin-top: 40px;
  }
       .model-gallery, .model-gallery-new {
        grid-template-columns: repeat(4, 55px);
        grid-template-rows: repeat(3, 55px); margin-top: 20px; 
         
      }
      .model-viewer {
        width: 286px;
          height: 200px;
          margin: 0 auto; top: -10px;
      }
       .model-info-container {
       top: -80px;
      }
      .category-buttons {
        max-width: 200px;
             gap: 5px; 
          
    justify-content: center;
      }
    }
	
	/*  4секция  */
      	#section4{padding-bottom: 0; }
		.main-content { flex:1; padding:10px 90px 5px 90px; display:flex; flex-direction:column; align-items:center; }
        .top-block {
           width: calc(100% - 62px); height: 342px; background: #d1d1d1; display: flex; margin: 120px auto 15px;   /* ← margin-top вместо top */
  border: 1px solid #fff; 
        }
        .top-block img { height:calc(100% - 24px); margin: 10px 0 0 8px; width:auto; }
        .top-block-text { padding:20px; flex:1; display:flex; flex-direction:column; justify-content:center; line-height:1.6; text-wrap: balance;}

        /* === НОВЫЙ БЛОК С ФОТО ТОЛЬКО ДЛЯ ПОРТРЕТНОГО ПЛАНШЕТА === */
        .middle-image-block {
            display: none; /* скрыт по умолчанию */
            width: calc(100% - 80px);
            margin: 0 auto ;
            text-align: center;
        }
        .middle-image-block img {
            max-width: 100%;
            height: 200px;
            margin-top: 10px;
           /* border: 1px solid #ccc;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);  */
        }

        .buttons-container {
            display:flex; gap:50px; margin-top:15px; justify-content:center; position:relative; 
        }
        .custom-button {
            padding:10px 20px; border:1px solid #fff; background:#d1d1d1; border-radius:50px; font-weight: 600;
            cursor:pointer; transition:border-color .3s; color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-size: 15px;
        }
    /*    .custom-button:hover { border-color:#e73093; }   */
        .custom-button.active { border-color:#000; box-shadow: 0 6px 16px rgba(0,0,0,0.25);}
        .info-window {
            position:fixed; width:400px; height:300px; background:#989898; 
            border:1px solid #fff; z-index:1000; display:none;
        }
        .info-window.show { display:block; }
        .info-window.left {  left:30%; transform:translateX(-30%); }
        .info-window.right { right:30%; transform:translateX(30%); }
        .info-content { display:flex; height:100%; flex-wrap: wrap; }
        .info-text, .info-image { flex:1; padding:10px; }
        .info-text { display:flex; flex-direction:column; justify-content:center; min-width:60%; color:#fff;}
        .info-image { display:flex; align-items:center; justify-content:center; }
        .info-image img { max-height:calc(100% - 22px); max-width:110%; }
		 .email-link { color: #fff; text-decoration: none; cursor: pointer; }
		 .email-link:hover { opacity: 0.8; }
		 .phone-link,
         .phone-link:link,
         .phone-link:visited,
         .phone-link:hover,
         .phone-link:active { color: #fff !important; text-decoration: none !important; cursor: pointer; }
        .footer {
            background:linear-gradient(to right, transparent 0%, #e5fcfc 45%, #e5fcfc 55%, transparent 100%);
            padding:10px 10px 0 10px;
			text-align:center;
			margin:0 41px;
            border-top:1px solid #ccc; 
			width:100%; 
			height: 90px;
        }
		 .footer P {
           margin-top: 7px;
        }
		.footer-links {
          margin: 25px 0 8px 0;
        }

        .footer-link {
          color: #007BFF;
          text-decoration: none;
          margin: 0 12px;
        }

        .footer-link:hover {
          text-decoration: underline;
        }

        .footer-separator {
          color: black;
          margin: 0 5px;
        }

        .footer-language {
          position: absolute;
          left: 53px;
          bottom: 20px;
        }

        .footer-language-button {
          color: black;
          text-decoration: none;
          font-size: 16px;
        }

        .footer-language-button:hover {
          text-decoration: underline;
        }

        .footer-language-dropdown {
          position: absolute;
          bottom: 100%;
          left: 0;
          background: white;
          border: 1px solid #ccc;
          width: 60px;
          display: none;
          z-index: 1001;
          box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
          border-radius: 6px;
        }

        .footer-language-dropdown a {
          display: block;
          padding: 8px 10px;
          text-align: center;
          color: black;
          text-decoration: none;
          font-size: 16px;
        }

        .footer-language-dropdown a:hover {
          background: #f5f5f5;
        }

#reset-cookies  {
    transition: opacity 0.3s ease;
}



        /* ──────── ТОЧНАЯ АДАПТАЦИЯ ПО ТВОИМ 6 БРЕЙКПОИНТАМ ──────── */
        /* 1. Средние ПК + ландшафтный планшет */
        @media (min-width:1025px) and (max-width:1199px),
               (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
            .main-content { padding:10px 70px 5px 70px;}
            .top-block { height:280px; width:calc(100% - 160px); margin-top: 170px; }
               
            .info-window { width:380px; height:280px; }
            .buttons-container { margin-top: 40px; }
            .footer {height: 110px; padding-bottom: 0; }
            
        }

        /* 2. Портретный планшет — ВКЛЮЧАЕМ НОВЫЙ БЛОК */
        @media (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
            .main-content { padding: 10px 40px 5px 40px; }
            .top-block { height:320px; width:calc(100% - 20px); margin-top: 280px; }
            .top-block img { height:auto; max-height:500px;  max-width:250px; object-fit: cover; object-position: 35%; }
            .info-window { width:360px; height:260px; }
            .info-window.left { left:35%; transform:translateX(-50%); }
            .info-window.right { right:35%; transform:translateX(50%); }

            /* Включаем блок с фото */
            .middle-image-block { display: block; margin-top: -10px; }
            .buttons-container { margin-bottom: 35px; }
            .footer {padding-bottom: 0; height: 110px;}
       }

        /* 3. Ландшафтный телефон */
        @media (max-width:767px) and (orientation:landscape) {
            #section4{height: 170%;}
            .main-content { padding:10px 30px 5px 30px; }
            .top-block { height:calc(100% - 150px); width:calc(100% - 30px); margin-top: 60px;}
            .top-block img { max-height:200px; margin:0 0 0 8px; }
            .top-block-text { padding:5px; font-size:14px; }
            .buttons-container { gap:15px; margin-bottom:20px; }
            .info-window { width:340px; height:240px; }
            .info-window.left {top: 50px; left:50%; transform:translateX(0); }
            .info-window.right {top:50px; right:50%; transform:translateX(0); }
            .footer {padding-bottom: 0; height: 90px;}
            .footer-language { left: 20px; }
        }
			

        /* 4. Портретный телефон 601–767px */
        @media (min-width:601px) and (max-width:767px) and (orientation:portrait) {
            .main-content { padding: 10px 20px 5px 20px; }
            .top-block { height:calc(100% - 15px); width:calc(100% - 20px); flex-direction:column; margin-top: 120px; }
            
            .top-block img { height:auto; max-height:180px; margin:-30px 8px 0 8px; transform: translate(0, 10px); }
            .top-block-text { padding:15px; font-size:14px; }
            .buttons-container { gap:15px; margin-top:-20px; }
            .info-window { width:90%; height:270px; left:50%!important;flex-direction:column; right:auto!important; transform:translateX(-50%)!important; }
            .footer { padding-bottom: 0; height: 110px;}
            .footer-language { bottom: 30px; }
            .footer-links { font-size: 12px; margin-top:18px; }
        }

        /* 5. Портретный телефон ≤600px */
        @media (max-width:600px) {
            .main-content { padding:10px 15px 5px 15px; }
            .top-block { height:calc(100% - 70px); width:calc(100% - 15px); flex-direction:column; margin-top: 140px; }
            
            .top-block img { height:auto; max-height:170px; margin:-30px 8px 0 8px; transform: translate(0, 10px);}
            .top-block-text { padding:8px; font-size:13px; line-height:1.4; }
            .buttons-container { gap:12px; margin:50px 0 15px 0; }
            .custom-button { padding:12px 18px; font-size:16px; }
            .info-window { flex-direction:column;
                width:82%; height:220px; left:50%!important; right:auto!important; transform:translateX(-50%)!important; font-size:14px; }
            .info-image img { max-height:calc(100% - 10px); }
            .footer { padding-bottom: 0; height: 90px; }
            .footer-language { bottom: 30px; }
            .footer-links { font-size: 12px; margin-top:18px;}
        }