/*
Theme Name: Winsys32
Theme URI: https://example.com/winsys32/

 * ... (остальной заголовок темы) ...
Author: Aleh Zhdanovich
Author URI: https://sys32.by/
Description: My custom theme for WordPress.
Version: 1.0
License: All Rights Reserved
   License URI:
   Tags:
Text Domain: winsys32
*/

/* Плавная прокрутка для переходов по якорям */
html {
    scroll-behavior: smooth;
}

/* Ваши CSS стили начнутся здесь */
body {
    /* Создаем темный фон с легким градиентом для глубины */
    background-color: #1a1a1d;
    background-image: radial-gradient(circle at center, #2c2c31, #1a1a1d);
    color: #e0e0e0;
    font-family: sans-serif;
    position: relative; /* Добавлено для контекста позиционирования абсолютных элементов */
    min-height: 100vh; /* Гарантируем, что body занимает как минимум всю высоту вьюпорта */
}

/* --- Глобальное управление слоями --- */
/* 
   Поднимаем все основные секции сайта (шапку, основной контент, подвал)
   на слой выше, чтобы они всегда были над узорами.
*/
body > header, /* Шапка */
body > main /* Основной контент */ {
    position: relative;
    z-index: 2; /* Устанавливаем выше, чем #page-patterns-container (у которого z-index: 1) */
}

/* Отдельное, более "сильное" правило для подвала, чтобы он гарантированно был поверх узоров.
   Используем селектор для блочных тем. */
footer.wp-block-template-part {
    position: relative; /* Создаем контекст наложения */
    z-index: 100; /* Очень высокий z-index для надежности */
    background-color: #1a1a1d; /* Используем основной цвет фона сайта */
}

/* --- Стили для хедера --- */
/* Добавляем анимированную маску на фоновое изображение хедера.
   Края изображения будут плавно менять свою прозрачность. */
header.wp-block-template-part .wp-block-cover {
    /* Начальное состояние маски (будет переопределено анимацией) */
    mask-image: radial-gradient(ellipse 85% 75% at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, black 40%, transparent 85%);
    /* Применяем анимацию */
    animation: pulse-edge-transparency 10s ease-in-out infinite;
}

.main-hero-title {
    color: white; /* Убедимся, что цвет текста белый */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Добавляем тень! */
}

/* --- Стили для слайдера отзывов --- */

/* Общий контейнер слайдера */
.review-slider {
    max-width: 1036px; /* Используем max-width для лучшей адаптивности */
    min-height: 357px; /* Изменено с height на min-height, чтобы блок мог расти */
    margin: 40px auto;
    /* Создаем эффект стекла */
    background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
    backdrop-filter: blur(10px); /* Размываем то, что под ним */
    -webkit-backdrop-filter: blur(10px); /* Для Safari */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Светлая рамка для блика */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Тень для объема */
    overflow: hidden;
    font-family: 'Manrope', sans-serif;
    padding: 40px;
    position: relative; /* Добавляем для позиционирования псевдо-элементов */
    z-index: 10; /* Поднимаем слайдер над фоновыми узорами */
    /* Анимируем max-height для плавного "разворачивания" */
    transition: max-height 0.4s ease-in-out;
    display: grid; /* Добавляем, чтобы дочерний элемент мог занять 100% высоты */
}

/* --- Анимация "Луча света" --- */

/* Псевдо-элемент для создания луча */
.slider-track::after {
    content: '';
    position: absolute;
    top: -40px; /* Выходим за пределы padding, чтобы луч был во всю высоту */
    bottom: -40px;
    width: 30px; /* Фиксированная тонкая ширина */
    z-index: 5; /* Луч должен быть над слайдами */
    pointer-events: none; /* Не мешает кликам */
    opacity: 0; /* По умолчанию скрыт */
    transform: skewX(var(--beam-skew, -15deg)); /* Используем переменную для наклона */

    /* Еще более мягкий и плавный луч */
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.02) 20%, /* Начинаем проявление раньше */
        rgba(255, 255, 255, 0.2) 50%,  /* Пик стал еще мягче */
        rgba(255, 255, 255, 0.02) 80%, /* Затухание заканчивается позже */
        rgba(255, 255, 255, 0) 100%
    );
    /* Главная магия: размываем все, что находится ПОД лучом */
    backdrop-filter: blur(var(--beam-blur, 4px)) brightness(1.1); /* Используем переменную для размытия */
}

/* Применяем анимацию к лучу в зависимости от направления */
.review-slider.is-wiping .slider-track::after {
    animation:
        var(--move-animation) var(--anim-duration) var(--anim-easing) forwards, /* Анимация движения */
        fade-in-and-stay var(--fade-in-duration) linear var(--fade-in-delay) forwards; /* Анимация появления */
}
/* Контейнер для всех слайдов */
.slider-track {
    display: grid; /* Используем грид для наложения слайдов и управления высотой */
    width: 100%;
    height: auto; /* Высота определяется содержимым */
    z-index: 2; /* Убедимся, что контент выше фоновых изображений */
}

/* Стили отдельного слайда */
.slide {
    /* Убираем абсолютное позиционирование, чтобы слайд влиял на высоту родителя */
    position: static;
    grid-area: 1 / 1; /* Все слайды помещаются в одну и ту же ячейку грида */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Заставляем слайд занимать всю высоту родителя */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0s 0.6s;

    /* Сетка применяется ко всем слайдам, а не только к активному */
    display: grid;
    grid-template-columns: 3fr auto minmax(0, 2fr) auto; /* content | prev | image | next */
    grid-template-rows: auto auto 1fr; /* Заголовок | Описание | Расширяющийся футер */
    gap: 10px 20px; /* row-gap | column-gap */
}

/* Показываем только активный слайд */
.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2; /* Активный слайд должен быть поверх остальных */
    transition: opacity 0.6s ease-in-out;
    z-index: 2; /* Активный слайд всегда сверху */
}

/* --- Размещение элементов в сетке --- */

.slide-title {
    grid-column: 1;
    grid-row: 1;
}
.slide-description {
    grid-column: 1;
    grid-row: 2;
}
.slide-footer {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center; /* Центрируем все элементы футера по вертикали */
    justify-content: center; /* Центрируем элементы по горизонтали */
    gap: 10px;
    align-items: flex-end;
}
.slide-image {
    grid-column: 3; /* Изображение в третьей колонке */
    grid-row: 1 / 4; /* Растягиваем на все строки для вертикального центрирования */
    align-self: center; /* Центрируем контейнер изображения по вертикали */
    display: flex; /* Используем flexbox для центрирования самого изображения */
    justify-content: center; /* Центрируем изображение по горизонтали */
    align-items: center; /* Центрируем изображение по вертикали */
}

.slide-image img {
    /* Убираем растягивание, чтобы изображение имело естественный размер */
    width: auto;
    height: auto;
    max-height: 260px; /* Ограничиваем максимальную высоту, чтобы не было слишком большим */
    max-width: 100%; /* Гарантируем, что не выйдет за пределы контейнера */
    object-fit: contain;
    display: block;
    border-radius: 15px;
    transform: scale(1); /* Начальное состояние для анимации */
    transition: transform 8s ease-out; /* Плавный переход для "Ken Burns" */
    /* Добавляем маску для размытия краев */
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Эффект медленного приближения для изображения в активном слайде */
.slide.active .slide-image img {
    transform: scale(1.1);
}

.slide-title {
    /* Эффект гравировки для текста */
    color: rgba(255, 255, 255, 0.85); /* Слегка прозрачный белый */
    /* Темная тень сверху для глубины, светлый блик снизу для объема */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1);
    font-family: Manrope;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    opacity: 0;
    transform: translateX(-25px); /* Начальное смещение для десктопа */
    transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s; /* Анимация для десктопа */
}

.slide-description {
    /* Эффект гравировки для текста */
    color: rgba(255, 255, 255, 0.75); /* Чуть более прозрачный белый для иерархии */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1);
    font-size: 18px;
    line-height: 1.6;
    opacity: 0;
    transform: translateX(-25px); /* Начальное смещение для десктопа */
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s; /* Анимация для десктопа */
}

.slide-footer {
    opacity: 0;
    transform: translateX(-25px); /* Начинаем чуть левее */
    transition: opacity 0.6s ease-out 0.5s, transform 0.6s ease-out 0.5s;
}

.slide-reviews {
    display: flex; /* Для расположения звезд и текста */
    flex-direction: column; /* Звезды над текстом */
    align-items: flex-start; /* Выравнивание по левому краю внутри блока */
    margin-left: auto; /* Прижимает отзывы и иконку вправо */
}

/* Стили для появления контента в активном слайде */
.slide.active .slide-title,
.slide.active .slide-description,
.slide.active .slide-footer {
    opacity: 1;
    transform: translateX(0);
}

.slide-footer-icon img {
    /* Делаем иконку белой и полупрозрачной, чтобы она выглядела как гравировка */
    display: block;
    height: 40px; /* Можете настроить высоту иконки */
    width: auto;
    /* Делаем иконку белой и применяем тот же эффект гравировки через фильтры */
    
}

.slide-footer-icon {
    margin-bottom: 3px; /* Небольшой отступ снизу для иконки */
}

.slide-reviews .stars {
    /* Эффект гравировки для звезд */
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1);
    font-size: 20px;
}

.slide-reviews .review-count {
    /* Эффект гравировки для ссылки */
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
}

.slider-arrow {
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.3s, transform 0.3s ease;
    align-self: center;
}

.slider-arrow.prev {
    grid-column: 2;
    grid-row: 1 / 4;
}

.slider-arrow.next {
    grid-column: 4;
    grid-row: 1 / 4;
}

.slider-arrow:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.slider-button {
    /* Кнопка в стиле "матового стекла" */
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 246px;
    height: 52px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.slider-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* --- Ключевые кадры для анимации луча --- */
@keyframes move-ltr {
    from { transform: translateX(-100%) skewX(var(--beam-skew, -15deg)); }
    to   { transform: translateX(3000%) skewX(var(--beam-skew, -15deg)); }
}
@keyframes move-rtl {
    from { transform: translateX(3000%) skewX(var(--beam-skew, -15deg)); }
    to   { transform: translateX(-100%) skewX(var(--beam-skew, -15deg)); }
}
@keyframes fade-in-and-stay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Ключевые кадры для анимации прозрачности маски хедера --- */
@keyframes pulse-edge-transparency {
    0%, 100% {
        /* Край маски почти полностью прозрачный (контент под ним почти не виден) */
        -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, black 40%, transparent 85%);
        mask-image: radial-gradient(ellipse 85% 75% at center, black 40%, transparent 85%);
    }
    50% {
        /* Край маски на 90% непрозрачный (контент под ним почти полностью виден) */
        -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, black 40%, rgba(0,0,0,0.9) 85%);
        mask-image: radial-gradient(ellipse 85% 75% at center, black 40%, rgba(0,0,0,0.9) 85%);
    }
}

/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
    /* 1. Убираем "стеклянный" эффект у слайдера для производительности */
    .review-slider {
        background: #2c2c31 !important;
        backdrop-filter: none !important;
        padding-top: 20px !important; /* Отступ сверху для всего блока */
        padding-bottom: 15px !important;
        border-radius: 15px !important;
        box-shadow: none !important;
    }

    /* 2. Меняем .slide на flex-контейнер для контроля над макетом */
    .review-slider .slide {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important; /* Уменьшаем расстояние между элементами */
        padding: 0 !important;
        height: 100%;
        box-sizing: border-box;
    }
    
    .review-slider .slide > * {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 3. Задаем порядок и стили для элементов внутри flex-контейнера */
    .review-slider .slide-image {
        order: 1; 
        padding: 0 !important;
        /* margin-top был убран, отступ теперь за счет padding у .review-slider */
        margin: 0 !important;
    }

    /* Новая маска для размытия краев картинки */
    .review-slider .slide-image img {
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }
    
    .review-slider .slider-arrow {
        display: none !important; /* Полностью скрываем кнопки навигации */
    }

    .review-slider .slide-title {
        order: 2; /* Теперь заголовок идет после картинки */
        font-size: 22px !important;
        margin-top: 15px !important;
    }

    .review-slider .slide-description {
        order: 3; /* Описание после заголовка */
        font-size: 14px !important;
        margin-top: 5px;
    }
    
    .review-slider .slide-footer {
        order: 4; /* Футер теперь после описания */
        margin-top: 15px !important; /* Отступ кнопки от описания */
        padding: 0 !important; /* Убираем лишние отступы */
    }

    .review-slider .slider-button {
       margin-left: auto !important;
       margin-right: auto !important;
    }

    .review-slider .slide-details {
        order: 5; /* Детали теперь после футера */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
    }
    .review-slider.is-expanded .slide.active .slide-details {
        max-height: 100vh !important; /* Большое значение для раскрытия */
        opacity: 1 !important;
    }
    
    /* Скрываем отзывы и иконку */
    .review-slider .slide-reviews,
    .review-slider .slide-footer-icon {
        display: none !important;
    }
    
    /* 4. Убираем "стеклянный" эффект у информационных блоков */
    .glass-info-block {
        background: #2c2c31 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}

/* --- Стили для разворачивающегося блока в слайдере --- */

/* Стили для слайдера в развернутом состоянии (Десктоп) */
.review-slider.is-expanded {
    max-height: 2000px; /* Значительно увеличиваем max-height, чтобы вместить любой контент */
}

.slide.is-expanded { /* Десктоп */
    grid-template-rows: auto auto auto auto; /* Изменено на 'auto' для всех строк, чтобы контент не сжимался */
}

.slide.is-expanded .slide-details {
    max-height: 250px; /* Максимальная высота для контента */
    opacity: 1;
    margin-top: 20px; /* Отступ сверху от футера */
}

.slide-details {
    grid-column: 1 / -1; /* Растягиваем на все колонки грида */
    grid-row: 4; /* Помещаем в новую, 4-ю строку грида */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, margin-top 0.4s ease-out;
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.5;
}

/* --- Глобальные стили макета --- */

/* Ограничиваем и центрируем основной контент сайта */
body .wp-site-blocks > main {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* New Glass Hero Block Styles */
.glass-hero-block {
    position: relative;
    max-width: 1440px;
    height: 820px; /* Уменьшили высоту блока */
    margin: 0 auto; /* Центрирование блока на странице */
    display: flex;
    justify-content: flex-start; /* По умолчанию: выравнивание контента по левому краю */
    align-items: flex-start; /* По умолчанию: выравнивание контента по верхнему краю */
    /* overflow: hidden; - Убираем, чтобы маска работала корректно с тенью */
    border-radius: 20px; /* Скругляем углы в общем стиле дизайна */

    /* --- Стили стеклянной подложки --- */
    background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
    backdrop-filter: blur(10px); /* Размываем то, что под ним */
    -webkit-backdrop-filter: blur(10px); /* Для Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Светлая рамка для блика */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Тень для объема */

    /* Плавное "растворение" подложки по краям, чтобы не было видно четких границ.
       Центр непрозрачный, края полностью прозрачные. */
    mask-image: radial-gradient(ellipse 85% 80% at center, black 50%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at center, black 50%, transparent 90%);
}

/* Псевдо-элемент для размещения фонового изображения ВНУТРИ стеклянной подложки */
.glass-hero-block::before {
    content: '';
    position: absolute;
    /* Уменьшенные отступы в 30px по периметру, чтобы рамка стала тоньше */
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 1; /* Размещаем под контентом (z-index: 10), но над фоном-подложкой */
    pointer-events: none; /* Позволяет кликам проходить "сквозь" рамку */

    /* Стили для самого изображения */
    background-image: url('images/two-happy-girls-are-looking-something-window 1.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 15px; /* Скругляем углы изображения, чуть меньше, чем у родителя */

    /* Добавляем маску на само изображение, чтобы оно плавно растворялось по краям
       внутри "стеклянной" подложки (от 0% до 100% видимости). */
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}

.glass-content-wrapper {
    /* Это элемент, который выглядит как "вырезанное стекло" */
    background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный белый фон */
    backdrop-filter: blur(10px); /* Эффект размытия (стекла) */
    -webkit-backdrop-filter: blur(10px); /* Для Safari */
    border-radius: 20px; /* Скругленные углы */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Тонкая белая обводка */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Тень для объема */
    padding: 20px; /* Внутренние отступы */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%; /* Ограничиваем ширину "стеклянного" элемента */
    max-height: 80%; /* Ограничиваем высоту "стеклянного" элемента */
    box-sizing: border-box; /* Включаем padding в размеры элемента */
}

/* Модификатор для блока с телефонами */
.glass-content-wrapper.phone-block {
    position: absolute; /* Для корректного позиционирования top/left */
    top: 80px; /* Отступ сверху */
    left: 60px; /* Отступ слева */
    /* Сбрасываем flex-свойства родителя, чтобы контент внутри управлялся сам */
    display: inline-block; /* Меняем на inline-block, чтобы ширина подстраивалась под контент */
    /* Убираем ограничения по размеру, чтобы блок подстраивался под контент */
    max-width: none;
    max-height: none;
    padding: 40px;
    z-index: 10; /* Размещаем поверх генерируемых узоров */
}

.glass-phone-contacts {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Расстояние между номерами телефонов */
}

.glass-phone-line {
    display: flex;
    align-items: center;
    gap: 15px; /* Расстояние между иконкой и текстом */
    color: #FFF;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

/* Исправляем синий цвет у номеров телефона, которые браузеры делают ссылками */
.glass-phone-line a {
    color: inherit; /* Наследуем цвет родителя (#FFF) */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Центрируем содержимое строк с телефонами в мобильной версии */
@media (max-width: 768px) {
    .glass-phone-line {
        justify-content: center;
    }
}

.glass-phone-icon {
    /* Задаем только высоту, чтобы ширина подстраивалась автоматически, сохраняя пропорции */
    width: auto;
    flex-shrink: 0;
}

.glass-content-wrapper .glass-image {
    max-width: 100%; /* Изображение не выходит за границы контейнера */
    max-height: 100%;
    display: block; /* Убираем лишнее пространство под изображением */
    border-radius: 10px; /* Немного скругленные углы для самого изображения */
    object-fit: contain; /* Изображение вписывается без обрезки */
}

/* Адаптация glass-hero-block для мобильных */
@media (max-width: 768px) {
    .glass-hero-block {
        height: auto; /* Высота подстраивается под содержимое */
        min-height: 650px; /* Минимальная высота для размещения элементов */
        padding: 20px; /* Общие отступы для блока */
        display: block; /* Изменяем на block для более простого управления абсолютно позиционированными дочерними элементами */
        max-width: 100%; /* На мобильных занимает всю ширину */
    }

    /* Уменьшаем "стеклянную" рамку на мобильных */
    .glass-hero-block::before {
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
    }
    .glass-content-wrapper {
        padding: 15px;
        border-radius: 15px;
    }
    /* Корректировка блока с телефонами для мобильных (планшеты) */
    .glass-content-wrapper.phone-block {
        position: absolute; /* Делаем абсолютно позиционированным для центрирования */
        top: 100px; /* Отступ сверху */
        left: 50%; /* Центрируем по горизонтали */
        transform: translateX(-50%); /* Смещаем на половину своей ширины влево */
        padding: 20px; /* Внутренние отступы */
    }
}

@media (max-width: 480px) {
    .glass-hero-block {
        min-height: 550px; /* Еще уменьшаем минимальную высоту */
        height: auto;
    }
    .glass-content-wrapper {
        padding: 10px;
        border-radius: 10px;
    }
    /* Корректировка блока с телефонами для маленьких мобильных (смартфоны) */
    .glass-content-wrapper.phone-block {
        position: absolute; /* Делаем абсолютно позиционированным для центрирования */
        top: 80px; /* Отступ сверху */
        left: 50%; /* Центрируем по горизонтали */
        transform: translateX(-50%); /* Смещаем на половину своей ширины влево */
        width: 90%; /* Ширина */
    }
}

body .is-layout-flex {
    display: flex;
    justify-content: center;
}

/* New Hero Block Styles */
.custom-hero-block-wrapper {
    /* Ensures the block spans full width if needed and contains the hero block */
    overflow: hidden; /* Important for containing absolutely positioned elements */
    position: relative; /* For z-index context if needed */
}

.custom-hero-block {
    position: relative;
    width: 100%;
    min-height: 600px; /* Adjust as needed for content height */
    background-image: url('images/two-happy-girls-are-looking-something-window 1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes header to top, content to bottom */
    padding: 40px; /* General padding inside the block */
    box-sizing: border-box;
    color: #fff; /* Default text color for the block */
    z-index: 0; /* Base z-index */
}

.custom-hero-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px; /* Approximate width, adjust based on actual image size */
    height: 600px; /* Approximate height, adjust based on actual image size */
    background-image: url('images/Group 374.png');
    background-size: contain; /* or 'cover' depending on desired effect */
    background-repeat: no-repeat;
    z-index: 1; /* Under content, above background */
    pointer-events: none; /* Allow clicks through */
}

.custom-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    position: relative; /* To ensure it's above the overlay */
    z-index: 2;
}

.custom-hero-phone-numbers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.phone-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.phone-icon {
    width: 24px; /* Adjust icon size */
    height: 24px;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); /* Optional: add shadow to icons */
}

.custom-hero-logo .header-logo {
    max-width: 180px; /* Adjust logo size */
    height: auto;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5)); /* Optional: add shadow to logo */
}

.custom-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns content to the right */
    text-align: right;
    width: 100%; /* Takes full width */
    max-width: 50%; /* Restricts content to the right half */
    margin-left: auto; /* Pushes content to the right */
    position: relative; /* To ensure it's above the overlay */
    z-index: 2;
    padding-top: 50px; /* Add some space from the header */
}

.custom-hero-main-title {
    font-size: 48px; /* Large font for main title */
line-height: 1.2;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.custom-hero-subtitle {
    font-size: 20px; /* Smaller font for subtitle */
    line-height: 1.5;
    color: #e0e0e0;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    margin-bottom: 30px;
}

.custom-hero-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 15px 30px;
    background-image: url('images/Group 7.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Rounded corners for the button */
    min-width: 250px; /* Ensure button has a decent width */
    height: 60px; /* Fixed height for consistency */
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-hero-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
    .custom-hero-block {
        min-height: 500px;
        padding: 20px;
        flex-direction: column; /* Stack elements vertically */
        justify-content: flex-start; /* Align to top */
    }

    .custom-hero-overlay-image {
        width: 100%; /* Overlay can take full width on mobile */
        height: 300px; /* Adjust height for mobile */
        background-size: contain;
        top: 0;
        left: 0;
    }

    .custom-hero-header {
        flex-direction: column; /* Stack phone numbers and logo */
        align-items: center; /* Center header elements */
        gap: 20px;
        margin-bottom: 30px;
    }

    .custom-hero-phone-numbers {
        align-items: center; /* Center phone lines */
    }

    .custom-hero-content {
        max-width: 100%; /* Full width on mobile */
        margin-left: 0; /* Remove left margin */
        align-items: center; /* Center content */
        text-align: center;
        padding-top: 0; /* Remove top padding */
    }

    .custom-hero-main-title {
        font-size: 36px;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .custom-hero-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .custom-hero-button {
        width: 100%; /* Full width button */
        max-width: 300px; /* Limit max width for better appearance */
        height: 50px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .custom-hero-main-title {
        font-size: 28px;
    }
    .custom-hero-subtitle {
        font-size: 14px;
    }
    .custom-hero-button {
        padding: 12px 20px;
    }
}

body .is-layout-flex {
    display: flex;
    justify-content: center;
}
/* --- Стили для заголовка "вырезанного из стекла" --- */

/* Контейнер для позиционирования заголовка */
.glass-title-container {
    position: absolute;
    /* Отступы от краев родительского блока .glass-hero-block */
    top: 394px; /* Отступ сверху. Можете изменить это значение, чтобы подвинуть текст выше или ниже. */
    left: 60px; /* Отступ слева, такой же, как у блока с телефонами */
    z-index: 10; /* Размещаем поверх других элементов */
    pointer-events: none; /* Позволяет кликать "сквозь" текст, если под ним что-то будет */
}

/* Основные стили для самого заголовка */
.glass-cutout-title {
    font-family: 'Manrope', sans-serif;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.1; /* Немного уменьшаем межстрочный интервал */
    text-transform: uppercase;
    margin: 0; /* Убираем стандартные отступы у h1 */

    /* --- Магия "стеклянных" букв --- */

    /* 1. Основной цвет букв делаем полупрозрачным. Это создает основу эффекта стекла. */
    color: rgba(255, 255, 255, 0.35); /* Слегка увеличиваем прозрачность для лучшего эффекта */

    /* 2. Используем многослойную тень для создания 3D-эффекта и бликов.
       Тени накладываются друг на друга в указанном порядке. */
    text-shadow: 
        /* Светлый блик снизу/справа для имитации выступающей грани (обратное теснение) */
        0px 1px 1px rgba(255, 255, 255, 0.6),
        /* Темная тень сверху/слева для создания глубины (обратное теснение) */
        0px -1px 1px rgba(0, 0, 0, 0.5);
}

/* Делаем каждую часть текста блочным элементом, чтобы они расположились в две строки */
.glass-cutout-title span {
    display: block;
}

/* --- Адаптивность для заголовка --- */
@media (max-width: 768px) { /* Общий медиа-запрос для планшетов */
    .glass-cutout-title {
        font-size: 48px; /* Уменьшаем размер шрифта на планшетах */
        text-align: center; /* Центрируем текст на всех мобильных */
    }
    .glass-title-container {
        top: 250px; /* Отступ сверху для мобильных */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
}

@media (max-width: 480px) { /* Медиа-запрос для маленьких мобильных */
    .glass-cutout-title {
        font-size: 36px; /* Размер шрифта для маленьких мобильных */
    }
    .glass-title-container {
        /* Центрируем контейнер на мобильных */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        top: 200px; /* Корректируем отступ для маленьких экранов */
    }
}
/* --- Стили для надписи "Закажите бесплатную консультацию" --- */

.glass-consultation-container {
    position: absolute;
    top: 560px; /* Отступ от верхнего края */
    left: 60px; /* Отступ слева */
    z-index: 10;
    pointer-events: none;
}

.glass-consultation-text {
    color: rgba(255, 255, 255, 0.8); /* Полупрозрачный белый */
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4; /* Улучшаем читаемость */
    margin: 0; /* Убираем стандартные отступы */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); /* Легкая тень для объема */
}

.glass-consultation-text span {
    display: block; /* Каждая строка с новой строки */
}

/* Адаптивность */
@media (max-width: 768px) { /* Общий медиа-запрос для планшетов */
    .glass-consultation-container {
        top: 400px; /* Отступ сверху для мобильных */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
    .glass-consultation-text {
        font-size: 18px;
        text-align: center; /* Центрируем текст на всех мобильных */
        color: #FFFFFF; /* Возвращаем яркий белый для максимального контраста */
        /* Создаем эффект "внешнего свечения" для текста, чтобы отделить его от фона */
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    }

}

@media (max-width: 480px) { /* Медиа-запрос для маленьких мобильных */
    .glass-consultation-container {
        top: 350px; /* Корректируем отступ для маленьких экранов */
    }
    .glass-consultation-text {
        font-size: 16px;
    }
}

/* --- Стили для блока призыва к действию (CTA) --- */

.glass-cta-container {
    position: absolute;
    top: 650px; /* Немного поднимаем, чтобы соответствовать новой высоте блока */
    left: 60px;
    z-index: 10;
}

.glass-cta-content {
    width: 428px;
    height: 86px;
    border-radius: 60px;
    /* Эффект стекла */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    /* Центрирование содержимого */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Расстояние между иконкой и кнопкой */
    padding: 0 25px; /* Внутренние отступы по бокам */
    box-sizing: border-box;
}

.glass-cta-icon {
    display: block;
    flex-shrink: 0; /* Иконка не сжимается */
}

.glass-cta-button {
    display: inline-flex;
    padding: 15px 45px; /* Отступы внутри кнопки */
    justify-content: center;
    text-align: center; /* Центрируем текст, если он переносится на 2 строки */
    align-items: center;
    border-radius: 80px; /* Сильно скругленные углы */
    /* Яркий, но подходящий под стиль фон */
    background: rgba(255, 59, 54, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFF;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.glass-cta-button:hover {
    background: rgba(255, 59, 54, 0.9);
    transform: scale(1.05); /* Легкое увеличение при наведении */
}

/* --- Адаптивность для CTA блока --- */
@media (max-width: 768px) { /* Общий медиа-запрос для планшетов */
    .glass-cta-container {
        top: 500px; /* Отступ сверху для мобильных */
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) { /* Медиа-запрос для маленьких мобильных */
    .glass-cta-container {
        top: auto; /* Убираем жесткий отступ сверху */
        bottom: 20px; /* Прижимаем к низу для маленьких мобильных */
        width: 90%;
        left: 50%; /* Центрируем контейнер */
        transform: translateX(-50%); /* Центрируем контейнер */
    }
    .glass-cta-content {
        width: 100%;
    }
    .glass-cta-button {
        padding: 12px 20px;
        font-size: 14px;
        /* Убираем фиксированную ширину, чтобы текст мог свободно центрироваться */
        width: auto;
        max-width: 100%; /* Убедимся, что не выходит за границы родителя */
        text-align: center; /* Дополнительное центрирование текста */
    }
}

/* --- Стили для контейнера генерируемых стеклянных узоров на всю страницу (ВОССТАНОВЛЕНО) --- */
#page-patterns-container {
    position: absolute; /* Изменено на absolute, чтобы прокручивалось с контентом */
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0; /* Заменено height: 100% на bottom: 0, чтобы контейнер растягивался на всю высоту документа */
    pointer-events: none; /* Позволяет кликам проходить сквозь узоры */
    z-index: 1; /* Размещаем над фоном body, но под основным контентом страницы */
    overflow: hidden; /* Предотвращаем выход узоров за границы */
}


/* --- Стили для логотипа --- */
.glass-header-logo {
    position: absolute;
    top: 88px;
    right: 65px;
    z-index: 10;
}

.glass-header-logo img {
    display: block;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.glass-header-logo img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}

/* --- Адаптивность для логотипа --- */
@media (max-width: 768px) {
    .glass-header-logo {
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        right: auto; /* Сбрасываем правый отступ */
    }
}

@media (max-width: 480px) {
    .glass-header-logo {
        top: 15px; /* Еще немного поднимаем на самых маленьких экранах */
    }
}

/* --- Стили для нового блока "Модернизация" --- */

.glass-info-block {
    width: 508px;
    min-height: 357px; /* Используем min-height для возможности расширения */
    flex-shrink: 0;
    border-radius: 20px;
    margin: 40px auto; /* Для демонстрации, можно убрать */
    position: relative;
    overflow: hidden; /* Важно для скругления углов и позиционирования узоров */
    padding: 40px;
    box-sizing: border-box;

    /* Эффект стекла (ВОЗВРАЩЕНО) */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Располагаем контент (ВОЗВРАЩЕНО для корректной верстки) */
    display: flex;
    flex-direction: column;
}

/* Контейнер для основного контента внутри информационного блока (ВОЗВРАЩЕНО) */
.glass-info-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Занимает все доступное пространство, отодвигая кнопку и детали вниз */
}

.info-title {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1);
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0 15px 0;
}

.info-description {
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    flex-grow: 1; /* Занимает все доступное пространство, отодвигая кнопку вниз */
}

.info-footer {
    margin-top: 20px;
}

.info-button {
    /* Копируем стили из .slider-button для единообразия */
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 246px;
    height: 52px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.info-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Стили для разворачивающегося блока */
.info-details {
    position: relative;
    z-index: 2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, margin-top 0.4s ease-out;
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.5;
}

.info-details h4 {
    margin-top: 0;
}

.info-details ul {
    padding-left: 20px;
    margin-bottom: 0;
}

/* Стили для развернутого состояния */
/* .glass-info-block.is-expanded {} - отдельное правило не нужно, блок вырастет сам */

.glass-info-block.is-expanded .info-details {
    max-height: 1000px; /* Увеличиваем max-height, чтобы вместить весь контент */
    opacity: 1;
    margin-top: 20px; /* Отступ сверху от футера */
}

/* --- Адаптивность для информационных блоков --- */
@media (max-width: 768px) {
    .glass-info-block {
        width: 90%; /* Занимает 90% ширины на планшетах */
        padding: 30px; /* Уменьшаем внутренние отступы */
    }
}

@media (max-width: 480px) {
    .glass-info-block {
        width: 95%; /* Занимает почти всю ширину на мобильных */
        padding: 20px; /* Еще уменьшаем отступы */
        min-height: 0; /* Убираем минимальную высоту, чтобы блок подстраивался под контент */
    }

    .info-title {
        font-size: 22px; /* Немного уменьшаем заголовок */
    }

    .info-description {
        font-size: 15px; /* Немного уменьшаем основной текст */
        line-height: 1.5; /* Увеличиваем межстрочный интервал для читаемости */
    }

    .info-button {
        width: 100%; /* Кнопка на всю ширину */
        height: 48px; /* Уменьшаем высоту кнопки */
        font-size: 15px;
    }
}

/* --- Стили для галереи "Стеклянная карусель" --- */

.glass-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Максимальная ширина галереи */
    margin: 60px auto; /* Отступы сверху/снизу и центрирование */
    padding: 0 60px; /* Отступы по бокам для кнопок */
    box-sizing: border-box;
}

.glass-carousel-viewport {
    position: relative;
    width: 100%;
    height: 450px; /* Высота галереи, можно настроить */
    overflow: hidden;
    /* Стили стекла */
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    /* Эффект перспективы удален, так как эффект линзы убран */
}

/* Псевдо-элементы для эффекта "растворения" по краям (едва заметные) */
.glass-carousel-viewport::before,
.glass-carousel-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20%;
    z-index: 2;
    pointer-events: none; /* Пропускают клики */
    /* Фон для эффекта затухания в стекло */
    /* Снижаем прозрачность начального цвета и делаем градиент более плавным */
    background: linear-gradient(to right, rgba(38, 38, 42, 0.05), transparent 50%);
}

.glass-carousel-viewport::after {
    right: 0;
    left: auto;
    /* Снижаем прозрачность начального цвета и делаем градиент более плавным */
    background: linear-gradient(to left, rgba(38, 38, 42, 0.05), transparent 50%);
}

.glass-carousel-track {
    display: flex;
    align-items: center; /* Вертикальное выравнивание изображений по центру */
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.carousel-slide {
    flex-shrink: 0;
    height: 85%; /* Слайд чуть меньше высоты вьюпорта */
    margin: 0 20px; /* Отступы между слайдами */
    opacity: 0.5;
    transform: scale(0.85); /* Возвращаем исходное масштабирование */
    transition: opacity 0.6s ease, transform 0.6s ease; /* Удаляем filter из transition */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    /* Удаляем фильтр яркости, так как он был частью эффекта линзы */
}

.carousel-slide.is-center {
    opacity: 1;
    transform: scale(1); /* Возвращаем исходное масштабирование */
    height: 100%; /* Центральный слайд занимает всю высоту */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    /* Удаляем фильтр яркости */
}

/* --- Эффект линзы --- */
/* Стили для слайдов слева от центра */
/* Все стили, связанные с эффектом линзы, удалены */


.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Изменено с 'cover' на 'contain' для полного отображения изображения */
    display: block;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    /* Копируем стили кнопок из основного слайдера */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    transition: background-color 0.3s, transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-arrow:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.prev {
    left: 0;
}

.carousel-arrow.next {
    right: 0;
}

/* Адаптивность */
@media (max-width: 768px) {
    .glass-carousel-wrapper {
        padding: 0 10px; /* Уменьшаем отступы для кнопок */
    }
    .glass-carousel-viewport {
        height: 300px; /* Уменьшаем высоту на мобильных */
    }
    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .carousel-arrow.prev {
        left: -5px; /* Выносим кнопки чуть за пределы */
    }
    .carousel-arrow.next {
        right: -5px;
    }
}

/* --- Стили для блока с логотипами партнеров --- */
.glass-logo-bar {
    width: 1300px;
    height: 196px;
    flex-shrink: 0;
    border-radius: 20px;
    margin: 60px auto; /* Центрирование и отступы */

    /* Эффект стекла */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Центрирование логотипов */
    display: flex;
    justify-content: center; /* Изменено для группировки по центру */
    align-items: center;
    gap: 60px; /* Добавлен отступ между логотипами */
    padding: 20px 40px;
    box-sizing: border-box;
}

.glass-logo-bar img {
    max-height: 70%; /* Ограничиваем высоту логотипа */
    max-width: 180px; /* Заменено с % на пиксели для предсказуемости и предотвращения переноса */
    object-fit: contain; /* Сохраняем пропорции */
    opacity: 0.75; /* Делаем их чуть менее яркими для лучшей интеграции */
    transition: opacity 0.3s, transform 0.3s;
}

.glass-logo-bar img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Адаптивность */
@media (max-width: 1350px) {
    .glass-logo-bar {
        width: 95%;
        flex-wrap: wrap; /* Позволяем переноситься на новую строку, если не влезают */
        justify-content: center;
        height: auto;
        gap: 20px;
    }
}
/* --- Стили для кастомного футер-блока --- */

.custom-footer-block {
    width: 1300px;
    height: 236px;
    flex-shrink: 0;
    border-radius: 20px;
    margin: 60px auto; /* Отступы сверху/снизу и центрирование */
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around; /* Даем колонкам больше "воздуха" */
    align-items: flex-start;
    gap: 40px; /* Расстояние между колонками */
    font-family: 'Manrope', sans-serif;
    position: relative; /* Создаем контекст наложения */
    z-index: 10; /* Поднимаем блок над фоновыми узорами */

    /* Измененный "стеклянный" стиль: светлый, полупрозрачный фон */
    background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон, как у других "стеклянных" блоков */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Светлая рамка для блика */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Тень для объема, как у других блоков */
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 35px; /* Расстояние между заголовком и контентом в колонке */
}

.footer-column-title {
    color: rgba(255, 255, 255, 0.85); /* Светлый цвет для темного фона */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4); /* Тень для эффекта гравировки */
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.footer-column-description p {
    color: rgba(255, 255, 255, 0.75); /* Светлый цвет для темного фона */
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); /* Легкая тень */
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4; /* Немного увеличим для читаемости */
    margin: 0 0 8px 0;
}

.footer-column-description p:last-child {
    margin-bottom: 0;
}

.footer-column-description a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s;
}

.footer-column-description a:hover {
    color: #FF3B36;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 20px; /* Расстояние между иконками */
}

.footer-social-icons a {
    display: inline-block;
}

.footer-social-icons img {
    display: block;
    height: auto;
    transition: transform 0.3s ease;
}

.footer-social-icons a:hover img {
    transform: scale(1.1);
}

.footer-callback-form {
    display: flex;
    align-items: center;
    gap: 10px; /* Расстояние между полем ввода и кнопкой */
}

.footer-callback-form input[type="tel"] {
    padding: 15px 30px; /* Упрощенные отступы для лучшего вида */
    border-radius: 80px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Светлая рамка */
    background-color: rgba(0, 0, 0, 0.2); /* Полупрозрачный темный фон */
    color: #FFF; /* Белый цвет текста */
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    width: 260px; /* Задаем ширину поля */
    box-sizing: border-box;
    transition: background-color 0.3s, border-color 0.3s;
}

.footer-callback-form input[type="tel"]::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Полупрозрачный цвет для плейсхолдера */
}

.footer-callback-form input[type="tel"]:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}

.footer-callback-form button {
    padding: 15px 50px;
    border-radius: 80px;
    background: rgba(255, 59, 54, 0.75); /* Полупрозрачный красный, как в CTA */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Светлая рамка */
    color: #FFF;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    white-space: nowrap; /* Чтобы текст не переносился */
}

.footer-callback-form button:hover {
    background: rgba(255, 59, 54, 0.9); /* Делаем ярче при наведении */
    transform: scale(1.05);
}

/* --- Адаптивность для футер-блока --- */
@media (max-width: 1350px) {
    .custom-footer-block {
        width: 95%; /* Делаем резиновым */
        height: auto; /* Высота подстраивается под контент */
        flex-direction: column; /* Колонки встают друг под другом */
        align-items: center; /* Центрируем все по горизонтали */
        text-align: center;
        padding: 30px 20px;
    }

    .footer-social-icons {
        /* Центрируем иконки в мобильной версии */
        justify-content: center;
    }

    .footer-callback-form {
        flex-direction: column; /* Форма тоже становится вертикальной */
        width: 100%;
    }

    .footer-callback-form input[type="tel"] {
        width: 100%;
        max-width: 350px; /* Ограничиваем ширину на мобильных */
        text-align: center;
    }
}
/* --- Стили для нового стеклянного хедера --- */

/* ВАЖНО: Добавляем отступ сверху для основного контента, чтобы он не уезжал под фиксированный хедер */
body.custom-background { /* Применяем только если есть наш фон, чтобы не ломать админку */
    padding-top: 80px; /* Высота хедера + небольшой запас */
}

.glass-header-strip {
    position: fixed; /* Фиксируем хедер вверху страницы */
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Высота хедера */
    z-index: 1000; /* Хедер должен быть поверх всего контента */

    /* Эффект "матового стекла" */
    background-color: rgba(44, 44, 49, 0.5); /* Немного темнее для лучшего контраста */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.glass-header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.glass-header-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 40px; /* Расстояние между пунктами меню */
}

.glass-header-nav li {
    position: relative; /* Необходимо для позиционирования подменю */
}

.glass-header-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    transition: color 0.2s, background-color 0.2s, transform 0.2s ease-out;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap; /* Запрещаем перенос текста в ссылках */
}

.glass-header-nav > ul > li > a:hover,
.has-submenu.is-open > a {
    color: #FFF;
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Стили для выпадающего подменю --- */
.submenu {
    position: fixed; /* Позиционируем относительно окна браузера для центрирования по странице */
    top: 80px; /* Высота хедера */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Смещаем вниз для анимации и центрируем */

    /* Скрываем по умолчанию */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s linear;

    /* Эффект стекла для подменю */
    width: max-content; /* Ширина по самому длинному элементу */
    min-width: 220px; /* Минимальная ширина, чтобы не было слишком узко */
    background-color: rgba(44, 44, 49, 0.8); /* Более темный фон для контраста */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    padding: 8px;
}

.has-submenu.is-open .submenu {
    /* Показываем при клике (добавляется класс is-open) */
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.submenu ul {
    display: block;
    gap: 0;
    padding: 0; /* Убираем лишние отступы у вложенного списка */
    margin: 0; /* Убираем лишние отступы у вложенного списка */
}

.submenu a {
    display: block; /* Делаем ссылки блочными для корректного выделения */
    padding: 10px 20px;
}

.submenu a:hover, .submenu .current-menu-item > a {
    background-color: rgba(255, 255, 255, 0.1); /* Стеклянный фон, как у основного меню */
    color: #FFF;
}

/* --- Адаптивность для хедера --- */
@media (max-width: 768px) {
    /* ВАЖНО: Увеличиваем отступ для body, чтобы фиксированный хедер не перекрывал логотип */
    /* Отступ для body теперь управляется через JS для точной подстройки под высоту хедера */
    /* body.custom-background { padding-top: 120px; } */

    /* 1. ОСНОВНАЯ ПАНЕЛЬ */
    .glass-header-strip {
        height: auto; /* Высота адаптивная */
        padding: 15px 0; /* Устанавливаем комфортные вертикальные отступы, убрав min-height */
    }

    /* Убираем относительное позиционирование, чтобы подменю позиционировалось относительно .glass-header-strip */
    .glass-header-nav li {
        position: static;
    }

    /* 2. ОСНОВНОЕ МЕНЮ */
    .glass-header-nav > ul {
        flex-wrap: wrap; /* Разрешаем перенос пунктов */
        justify-content: center; /* Центрируем пункты */
        gap: 5px 15px; /* Уменьшаем отступы для мобильных */
        padding: 0 10px; /* Отступы по бокам, чтобы пункты не прилипали к краям */
    }

    /* 3. ПОДМЕНЮ */
    .submenu {
        position: absolute; /* Позиционируем относительно родителя (.glass-header-strip) */
        top: 100%; /* Появляется сразу под основной полосой хедера */
        left: 0;
        width: 100%;
        height: auto; /* Высота адаптивная */
        box-sizing: border-box;
        z-index: -1; /* Прячем под основной панелью, пока не активно */

        /* Стили стекла, чуть темнее для отличия */
        background-color: rgba(60, 60, 65, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        padding: 15px 0; /* Убираем боковые отступы, они будут на вложенном списке */
        overflow-x: auto; /* Включаем горизонтальную прокрутку */
        scrollbar-width: none; /* Скрываем скроллбар для Firefox */

        /* Скрываем по умолчанию */
        opacity: 0;
        transform: translateY(-10px); /* Начальное положение для анимации "выпадения" */
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s linear;
    }

    /* Скрываем скроллбар для Chrome/Safari */
    .submenu::-webkit-scrollbar {
        display: none;
    }

    .has-submenu.is-open .submenu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s; /* Убираем задержку для visibility при появлении */
        z-index: 1001; /* Выше чем хедер */
    }

    /* 4. СПИСОК ВНУТРИ ПОДМЕНЮ */
    .submenu ul {
        display: flex;
        flex-wrap: nowrap; /* ЗАПРЕЩАЕМ перенос пунктов, чтобы они выстроились в одну линию */
        justify-content: flex-start; /* Выравниваем по левому краю для корректной прокрутки */
        gap: 8px;
        padding: 0 15px; /* Добавляем боковые отступы внутри прокручиваемой области */
        width: max-content; /* Ширина списка определяется его содержимым, что и включает скролл */
    }

    /* 5. ССЫЛКИ */
    .glass-header-nav a {
        font-size: 16px; /* Чуть меньше для мобильных */
        padding: 8px 12px;
        white-space: nowrap; /* Гарантируем, что текст внутри ссылки не переносится */
    }

    /* Уменьшаем отступы специально для ссылок в подменю, чтобы они были компактнее */
    .submenu a {
        padding: 8px 10px; /* Возвращаем нормальную высоту, делаем чуть уже */
        font-size: 15px; /* Возвращаем читаемый размер шрифта, чуть меньше основного */
    }

    /* Убираем стрелки прокрутки, они больше не нужны */
    .menu-scroll-arrow {
        display: none;
    }
}
@media (max-width: 768px) {
    /* 1. Убираем "стеклянный" эффект у слайдера для производительности */
    .review-slider {
        background: #2c2c31 !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        border-radius: 15px !important;
        box-shadow: none !important;
    }

    /* 2. Меняем .slide на flex-контейнер для контроля над макетом */
    .review-slider .slide {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 0 15px 0 !important;
        height: 100%;
        box-sizing: border-box;
    }
    
    .review-slider .slide > * {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* 3. Задаем порядок и стили для элементов внутри flex-контейнера */
    .review-slider .slide-image {
        order: 1; 
        padding: 0 !important;
        margin: 0 !important;
    }


    
    .review-slider .slider-arrow {
        display: none !important; /* Полностью скрываем кнопки навигации */
    }

    .review-slider .slide-title {
        order: 3;
        font-size: 22px !important;
        margin-top: 15px !important;
    }

    .review-slider .slide-footer {
        order: 5; /* Футер теперь последний элемент */
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        width: 100%;
        margin-top: auto; /* Прижимает футер к низу */
        padding-top: 15px;
    }
    
    /* Скрываем отзывы и иконку */
    .review-slider .slide-reviews,
    .review-slider .slide-footer-icon {
        display: none !important;
    }
    
    /* 4. Убираем "стеклянный" эффект у информационных блоков */
    .glass-info-block {
        background: #2c2c31 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
}