* { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background-color: #232226;
            position: relative; /* Важно для позиционирования дочерних элементов */
        }

        /* Фон */
        .bg-fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }



        .bg1 {
            display: block;
        }

          .bg2 {
            display: none;
        }

        /* Логотип (слева сверху) */
        .logo1 {
            display: block;
            position: absolute;
            top: 5vh;
            left: 5vw;
            width: 11vw;
            min-width: 100px;
            z-index: 2;
        }

         .logo2 {
            display: none;
        }

        /* --- ГЛАВНЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ --- */
        .center-wrapper {
            position: absolute;    /* Вырываем из потока, чтобы разместить где хотим */
            
            /* РЕГУЛИРОВКА ВЫСОТЫ: */
            bottom: 5vh;           /* Отступ от нижнего края экрана (чем больше число, тем выше) */
            
            left: 0;               /* Прижимаем к левому краю */
            width: 100%;           /* Растягиваем на всю ширину */
            
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;   /* Центрируем элементы внутри по горизонтали */
            gap: 15px;             /* Расстояние между текстом и кнопкой */
            padding-bottom: 15px;  /* Дополнительный отступ для безопасности на iPhone (с полоской внизу) */
        }

        .text1 {
            display: block;
            position: relative;
            width: 80vw;
          
            object-fit: contain;
        }

        .text2 {
            position: relative;
            width: 80vw;
           display: none;
            object-fit: contain;
        }

        .btn {
            position: relative;
            width: 30vw;
           
            cursor: pointer;
            transition: transform 0.3s ease;
            object-fit: contain;
        }

        .btn:hover { transform: scale(1.05); }
        .btn:active { transform: scale(0.95); }

        @media (max-width: 600px) and (min-height: 500px) {
            /* Обновленные стили для фона */
.bg-fullscreen {
    position: fixed;
    top: 0;
    /* Важно: чтобы двигать влево-вправо, картинка должна быть шире экрана.
       Сделаем ее 110% ширины. */
    
    height: 100%;
    /* Изначально сдвигаем немного влево, чтобы центрировать увеличенное изображение */
  
    object-fit: cover;
    z-index: 1;

}

   .bg1 {
            display: none;
        }

          .bg2 {
            display: block;
        }
      /* Логотип (слева сверху) */
        .logo1 {
            display: none;
            position: absolute;
            top: 5vh;
            left: 5vw;
            width: 11vw;
            min-width: 100px;
            z-index: 2;
        }

         .logo2 {
            display: block;
            position: absolute;
            top: 5vh;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 25vw;
       
            z-index: 2;
        }

        /* --- ГЛАВНЫЕ ИЗМЕНЕНИЯ ЗДЕСЬ --- */
        .center-wrapper {
            position: absolute;    /* Вырываем из потока, чтобы разместить где хотим */
            
            /* РЕГУЛИРОВКА ВЫСОТЫ: */
            bottom: 11vh;           /* Отступ от нижнего края экрана (чем больше число, тем выше) */
            
            left: 0;               /* Прижимаем к левому краю */
            width: 100%;           /* Растягиваем на всю ширину */
            
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;   /* Центрируем элементы внутри по горизонтали */
            gap: 20px;             /* Расстояние между текстом и кнопкой */
            padding-bottom: 15px;  /* Дополнительный отступ для безопасности на iPhone (с полоской внизу) */
        }

        .text1 {
            display: none;
            position: relative;
            width: 80vw;
          
            object-fit: contain;
        }

        .text2 {
            position: relative;
            width: 80vw;
           display: block;
            object-fit: contain;
        }

         .btn {
            position: relative;
            width: 80vw;
           
            cursor: pointer;
            transition: transform 0.3s ease;
            object-fit: contain;
        }


/* Сама анимация */
@keyframes moveBackgroundSideToSide {
    0% {
        /* Начальная точка (немного смещена влево из-за left: -5%) */
        transform: translateX(0);
    }
    100% {
        /* Конечная точка: сдвигаем изображение вправо на 5% от его ширины.
           В сочетании с начальным left: -5%, это создаст движение от левого края "запаса" к правому. */
        transform: translateX(5%);
    }
}
        }