/* --- Підключення локальних шрифтів --- */

@font-face {
    font-family: 'Montserrat Alternates';
    src: url('../fonts/MontserratAlternates.woff') format('woff');
    /* Вказуємо, що це ультра-легкий шрифт */
    font-weight: 100; 
    font-style: normal;
    font-display: swap; /* Дозволяє тексту з'явитися раніше */
  }
  
  @font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.woff') format('woff'); /* Припускаю, що файл називається так */
    /* Вказуємо, що це легкий шрифт */
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff') format('woff'); /* Припускаю, що файл називається так */
    /* Вказуємо, що це звичайний шрифт */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  


/* --- Базові стилі --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    overflow-x: hidden;
}

html { 
    scroll-behavior: smooth; 
}

body { 
    font-family: var(--font-main); 
    background-color: var(--dynamic-bg-dark); 
    color: var(--dynamic-text-light); 
    line-height: 1.7;
    font-weight: 300; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* overflow-x: hidden; -- це правило переноситься вище */
}
body.no-scroll { overflow: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { 
    /* ВИПРАВЛЕНО: Використовуємо динамічну змінну для посилань */
    color: var(--dynamic-accent-color); 
    text-decoration: none; 
    transition: color 0.3s ease; 
}
a:hover { color: var(--dynamic-text-light); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, .nav-menu a, .btn { /* Стиль .btn тут залишається для шрифту, це не впливає на колір */
    font-family: var(--font-headings); 
    font-weight: 100;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}
h1 { font-size: 40px; line-height: 1.2; }
h2.section-title { font-size: 30px; margin-bottom: 60px; text-align: center; font-weight: 100; text-transform: uppercase; }
p { 
    font-family: var(--font-main); 
    /* ВИПРАВЛЕНО: Використовуємо динамічну змінну */
    color: var(--dynamic-text-secondary); 
    font-weight: 300; 
}

/* --- Шапка сайту --- */
/* css/style.css */

/* --- Шапка сайту --- */
main {
    /* Додаємо цей блок, якщо його немає */
    overflow-x: hidden !important; /* Запобігає виходу дочірніх елементів за межі */
}
/* --- Шапка сайту (Стиль "Frosted Glass") --- */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    
    /* 1. Робимо фон напівпрозорим */
    background-color: rgba(3, 1, 0, 0.5);

    /* 2. Розмиваємо все, що знаходиться ПІД шапкою */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Для підтримки Safari */

    /* 3. Плавний перехід для зміни фону при скролі */
    transition: background-color 0.4s ease;
    will-change: transform;
}

/* При прокрутці робимо фон трохи темнішим для кращої читабельності */
.main-header.scrolled {
    background-color: rgba(3, 1, 0, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); /* Ледь помітна лінія знизу */
}


.main-nav { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 40px; }
.nav-menu { display: flex; list-style: none; gap: 25px; }
.nav-menu a { color: var(--text-light); font-size: 11px; font-weight: 100; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone img { height: 25px; }
.lang-switcher a { color: var(--text-secondary); font-size: 12px; margin-left: 5px; }
.lang-switcher a.active { color: var(--primary-color); font-weight: bold; }

/* --- Бургер-меню --- */
.burger-menu-icon { display: none; cursor: pointer; width: 30px; height: 22px; position: fixed; top: 24px; right: 20px; z-index: 1005; }
.burger-menu-icon span { display: block; position: absolute; height: 2px; width: 100%; background: var(--primary-color); border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
.burger-menu-icon span:nth-child(1) { top: 0px; }
.burger-menu-icon span:nth-child(2) { top: 10px; }
.burger-menu-icon span:nth-child(3) { top: 20px; }
.burger-menu-icon.open span:nth-child(1) { top: 10px; transform: rotate(135deg); }
.burger-menu-icon.open span:nth-child(2) { opacity: 0; left: -60px; }
.burger-menu-icon.open span:nth-child(3) { top: 10px; transform: rotate(-135deg); }

/* --- Мобільне меню (v2.0 - з лого та ефектами) --- */

/* Оверлей (затемнення фону) */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Сам блок меню, що виїжджає */
.mobile-nav-menu {
    position: fixed;
    top: 0;
    left: -85%;
    width: 80%;
    max-width: 320px;
    height: 100%;
    z-index: 1002;
    padding: 80px 30px 30px;
    display: flex;
    flex-direction: column; /* Важливо для позиціонування логотипу внизу */
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden; /* Ховаємо все, що виходить за межі */

    /* << 1. РОБИМО ФОН ПРОЗОРИМ З ЕФЕКТОМ СКЛА >> */
    background-color: rgba(15, 15, 15, 0.5); /* Напівпрозорий темний фон */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.mobile-nav-menu.open {
    left: 0;
}

/* Список посилань */
.mobile-nav-list {
    list-style: none;
    text-align: left;
    padding: 0;
    flex-grow: 1; /* Займає весь доступний простір, відштовхуючи лого вниз */
}
.mobile-nav-list li {
    margin: 20px 0;
}
.mobile-nav-list a {
    color: var(--text-light);
    font-size: 22px;
    font-family: var(--font-headings);
    font-weight: 100;
    text-transform: uppercase;
}

/* << 2. СТИЛІ ДЛЯ ЛОГОТИПУ ВНИЗУ >> */
.mobile-nav-logo {
    width: 70%;
    margin: 20px auto;
    position: relative;
    z-index: 2;
    /* Рядок 'opacity: 0.7;' видалено */
}
.mobile-nav-logo img {
    width: 100%; /* Логотип автоматично підлаштовується під ширину контейнера */
    height: auto;
}

/* << 3. СТИЛІ ДЛЯ ПОМАРАНЧЕВОЇ ЛІНІЇ >> */
.mobile-nav-accent-line {
    position: absolute;
    top: 0;
    right: 0; /* Позиціонуємо справа */
    width: 3px; /* Ширина лінії */
    height: 100%; /* Висота на все меню */
    background-color: var(--primary-color);
    /* Тінь для об'єму */
    box-shadow: -2px 0 10px rgba(255, 73, 0, 0.5);
}

/* Головний екран */
.hero { min-height: 80vh; display: flex; align-items: center; position: relative; padding-top: 80px; overflow: hidden; }
.hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/ezgif-305109f591d1b0.gif'); background-size: cover; background-position: center; z-index: -2; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(3, 1, 0, 0.8) 30%, rgba(3, 1, 0, 0) 70%); z-index: -1; }
.hero-content { max-width: 600px; }
.hero-content h1 { font-family: var(--font-headings); font-weight: 100; }
.hero-content p { color: var(--text-light); opacity: 0.8; font-weight: 300; }
.hero-buttons { margin-top: 30px; display: flex; gap: 20px; }




/* === ЄДИНИЙ СТИЛЬ ДЛЯ ВСІХ КНОПОК ПРОЕКТУ === */

.btn {
    display: inline-block; /* Дозволяє кнопці займати місце в рядку */
    padding: 12px 30px; /* Внутрішні відступи */
    border-radius: 50px; /* Повністю заокруглені кути */
    font-family: var(--font-headings); /* Шрифт для заголовків */
    font-weight: 100; /* Легке накреслення */
    font-size: 13px; /* Розмір тексту */
    text-transform: uppercase; /* Великі літери */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    
    /* --- Магія тут --- */
    border: 1px solid var(--primary-color); /* ЗАВЖДИ помаранчева рамка */
    background-color: transparent; /* Прозорий фон за замовчуванням */
    color: var(--text-light); /* Білий колір тексту */
    
    /* Плавний перехід для ефекту наведення */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Ефект при наведенні миші */
.btn:hover {
    background-color: var(--primary-color); /* НЕПРОЗОРИЙ помаранчевий фон */
    color: var(--text-light); /* Білий текст (залишається) */
    transform: translateY(-2px); /* Легкий підйом кнопки */
}

/* Стиль для "білої" кнопки (якщо вона потрібна як виняток) */
.btn.btn-white {
    border-color: var(--text-light); /* Біла рамка */
    color: var(--text-light); /* Білий текст */
}

.btn.btn-white:hover {
    background-color: var(--text-light); /* Білий фон при наведенні */
    color: var(--dark-bg); /* Темний текст */
}

/* --- Адаптація для кнопок у різних секціях --- */

/* Кнопки на головному екрані */
.hero-buttons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Дозволяє кнопкам переноситись на новий рядок на малих екранах */
}

/* Кнопка в картці продукту */
.product-card__content .btn {
    margin-top: auto; /* Притискає кнопку до низу картки */
}



/* Секція "Про нас" */
.about-section { padding: 80px 20px; display: flex; gap: 40px; align-items: center; }
.about-image { flex: 1; }
.about-text { flex: 1.5; }
.about-text h2 { text-align: left; }
.about-stats { display: flex; gap: 30px; margin-top: 30px; }
.stat-item { text-align: center; }
.stat-item img { height: 40px; margin-bottom: 10px; margin-left: auto; margin-right: auto; }
.stat-item h4 { font-weight: 400; font-size: 16px; }
.stat-item p { color: var(--primary-color); font-size: 14px; }






/*
============================================================
  СЕКЦІЯ "НАША ПРОДУКЦІЯ" (V12.0 - ISOLATED & CORRECTED)
============================================================
*/

/* 1. Загальний контейнер секції */
.products-section {
    padding: 80px 20px 150px 20px; /* <-- ВАЖЛИВО: Додаємо бічні відступи сюди */
    position: relative;
    overflow: hidden;
    /* clip-path: inset(0); -- більше не потрібен */
}

/* 2. Сітка для карток ("стільники") */
.honeycomb-grid {
    display: grid;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    /* --- ОСНОВА: 3 колонки для десктопу --- */
    grid-template-columns: repeat(3, 1fr);
}

/* 3. Загальний стиль для кожної картки */
.honeycomb-card {
    position: relative;
    aspect-ratio: 1 / 1.15;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none;
    color: inherit;
}

/* 4. Ефект при наведенні на картку */
.honeycomb-card:hover {
    z-index: 10;
    box-shadow: 0 10px 30px var(--shadow-color);
    transform: scale(1.05); 
}

/* 5. Фонові зображення "стільників" */
.honeycomb-card__bg,
.honeycomb-card__bg-hover {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease;
}
.honeycomb-card__bg { background-image: var(--dynamic-honeycomb-bg); opacity: 1; }
.honeycomb-card__bg-hover { background-image: var(--dynamic-honeycomb-bg-hover); opacity: 0; }
.honeycomb-card:hover .honeycomb-card__bg { opacity: 0; }
.honeycomb-card:hover .honeycomb-card__bg-hover { opacity: 1; }

/* 6. Зображення продукту всередині картки */
.honeycomb-card__image {
    position: relative;
    z-index: 2;
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
    margin: 20% auto 0 auto;
    transition: transform 0.4s ease;
}
.honeycomb-card:hover .honeycomb-card__image { transform: scale(1.1); }

/* 7. Стилізація назви продукту */
.honeycomb-card__title {
    position: relative;
    z-index: 2;
    font-family: var(--font-headings);
    font-weight: 100;
    text-transform: uppercase;
    font-size: 16px;
    color: var(--text-light);
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    text-align: center;
    margin-top: 15px;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}
.honeycomb-card:hover .honeycomb-card__title {
    color: var(--primary-color);
    text-shadow: 0 0 10px var(--shadow-color);
}

/* 8. Спеціальні стилі для картки-кнопки */
.honeycomb-card--button { display: flex; align-items: center; justify-content: center; }
.honeycomb-button-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-secondary); transition: color 0.4s ease; }
.honeycomb-card--button:hover .honeycomb-button-content { color: var(--primary-color); }
.honeycomb-button-content svg { width: 48px; height: 48px; stroke: currentColor; transition: transform 0.4s ease; }
.honeycomb-card--button:hover .honeycomb-button-content svg { transform: scale(1.1); }
.honeycomb-button-content span { font-family: var(--font-headings); font-weight: 100; text-transform: uppercase; font-size: 14px; line-height: 1.3; }

/* --- 9. ПРАВИЛЬНА ЛОГІКА РОЗТАШУВАННЯ ТА АДАПТИВНОСТІ --- */

/* Логіка для 3-х колонок (десктоп) */
.honeycomb-card:nth-child(3n-1) {
    transform: translateY(50%);
}
.honeycomb-card:nth-child(3n-1):hover {
    transform: translateY(50%) scale(1.05);
}

/* Логіка для 2-х колонок (планшети та мобільні) */
@media (max-width: 859px) {
    .products-section { 
        padding-bottom: 200px; 
    }
    
    /* Переключаємось на 2 колонки */
    .honeycomb-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Скидаємо правило для 3-х колонок */
    .honeycomb-card:nth-child(3n-1) {
        transform: translateY(0);
    }
    .honeycomb-card:nth-child(3n-1):hover {
        transform: scale(1.05);
    }
    
    /* Застосовуємо правило для 2-х колонок: КОЖЕН ДРУГИЙ ЕЛЕМЕНТ ОПУСКАЄТЬСЯ */
    .honeycomb-card:nth-child(2n) {
        transform: translateY(50%);
    }
    .honeycomb-card:nth-child(2n):hover {
        transform: translateY(50%) scale(1.05);
    }
}









/* === ЄДИНИЙ СТИЛЬ ДЛЯ ВСІХ КНОПОК (ЗА ВАШИМ ЗРАЗКОМ) === */

/* Об'єднуємо всі кнопки під один стиль */
.product-card__button,
.hero-buttons .liquidGlass-wrapper,
.fixed-action-buttons .liquidGlass-wrapper,
.footer-contact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    border: 1px solid var(--primary-color) !important; /* !important, щоб перебити інші стилі */
    color: var(--primary-color) !important;
    background: transparent !important;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Об'єднуємо ефект наведення для всіх кнопок */
.product-card__button:hover,
.hero-buttons .liquidGlass-wrapper:hover,
.fixed-action-buttons .liquidGlass-wrapper:hover,
.footer-contact-btn:hover {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}

/* Текст всередині кнопок */
.liquidGlass-text,
.catalog-btn-content span,
.scroll-top-arrow,
.catalog-btn-content svg,
.contact-btn-content span,  /* <-- ДОДАНО */
.contact-btn-content svg {   /* <-- ДОДАНО */
    color: inherit !important; /* Успадковує колір від батьківської кнопки */
    stroke: currentColor !important; /* Для SVG іконок */
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Специфічні налаштування для круглої кнопки "Нагору" */
.scroll-top-btn.liquidGlass-wrapper {
    width: 50px;
    height: 50px;
    padding: 0;
}

/* Окреме правило для "білої" кнопки на головному екрані */
.hero-buttons .button-white {
    border-color: var(--text-light) !important;
    color: var(--text-light) !important;
}
.hero-buttons .button-white:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}












/* --- Секція "Відгуки" (Новий дизайн) --- */
/*
========================================
  НОВА, ПОВНІСТЮ ПЕРЕРОБЛЕНА СЕКЦІЯ ВІДГУКІВ
========================================
*/

.reviews-section { 
    padding: 80px 0; 
    background-color: var(--dark-bg); 
}

.reviews-slider-container {
    position: relative;
    padding: 0 60px;
    padding-bottom: 80px; 
}

.reviews-slider .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.reviews-slider .swiper-slide {
    height: auto;
    display: flex;
    padding-bottom: 50px; 
}

/* --- ЗАГАЛЬНА КАРТКА ВІДГУКУ --- */
.review-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
    display: flex;
    position: relative; 
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 16 / 9;
}
.review-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px var(--shadow-color);
}

/* **ВИПРАВЛЕНО: Єдиний контейнер для всього вмісту** */
.review-card__content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Повертаємо центрування */
}


/* --- БЛОК АВТОРА --- */
.review-card__author {
    position: absolute;
    bottom: -60px; 
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid var(--primary-color);
    background-color: rgba(34, 34, 34, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    border-radius: 16px;
    padding: 10px 15px;
    width: 90%;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
}
.review-card:hover .review-card__author {
    background-color: var(--primary-color);
}

.review-card__author-content {
    display: flex;
    align-items: center;
    width: 100%;
}

.review-card__author-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    margin-right: 15px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.review-card__author-info strong { color: var(--text-light); }
.review-card__author-info span { 
    color: var(--text-secondary); 
    font-size: 14px;
    transition: color 0.3s ease;
}
.review-card:hover .review-card__author-info span {
    color: var(--text-light);
}


/* --- СТИЛІ ДЛЯ ТЕКСТОВОГО ВІДГУКУ --- */
.review-card.is-text .review-card__content-wrapper {
    padding: 20px;
}

.review-card__quote-icon {
    font-size: 80px;
    color: var(--primary-color);
    position: absolute;
    top: 15px;      
    left: 25px;     
    line-height: 1;
    opacity: 0.2;
}

.review-card__text {
    text-align: center;
    padding: 20px;
    color: var(--text-light);
    line-height: 1.8;
    font-size: clamp(14px, 1.2vw, 18px);
}


/* --- СТИЛІ ДЛЯ ВІДЕО-ВІДГУКУ --- */
.review-card.is-video {
    background-color: #000;
}

/* Для відео-картки обгортка порожня, вона не потрібна */
.review-card.is-video .review-card__content-wrapper {
    display: none;
}

.review-card__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    transform: translateZ(0);
    z-index: 1;
}

.review-card__video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- СТИЛІ ДЛЯ СТРІЛОК --- */
.reviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 40px));
    width: 50px;
    height: 50px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 10;

    /* *** ОСЬ ЦЕ ДОДАНО: *** */
    background-color: rgba(34, 34, 34, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reviews-arrow:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color); /* Додано для консистентності */
}
.reviews-arrow-prev { left: 0; }
.reviews-arrow-next { right: 0; }
.reviews-arrow i { font-size: 20px; }


.reviews-section .swiper-pagination {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

@media (max-width: 768px) {
    .reviews-slider-container {
        padding: 0;
        padding-bottom: 80px;
    }
    .reviews-arrow {
        width: 40px;
        height: 40px;
        transform: translateY(calc(-50% - 40px));
    }
    .reviews-arrow-prev { left: 10px; }
    .reviews-arrow-next { right: 10px; }
    .review-card__text {
        padding: 15px;
    }
}






/* Секція "Новини" */
.news-section { padding: 80px 0; background-color: var(--card-bg); }
.news-slider { position: relative; /* padding: 0 50px; -- ВИДАЛЯЄМО ЦЕ */ overflow: hidden; padding-top: 20px;}
.swiper-container { width: 100%; height: 100%; padding-top: 10px;}
.swiper-slide { text-align: center; font-size: 18px; background: transparent; display: flex; justify-content: center; align-items: center; height: auto; }
.news-card { background-color: var(--dark-bg); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; width: 100%; }
.news-card:hover { border: 1px solid var(--primary-color); transform: translateY(-5px); }
.news-card img { width: 100%; height: 200px; object-fit: cover; }
.news-card-content { padding: 20px; text-align: left; }
/* --- Виправлення кольору заголовків новин --- */
.news-card a {
    text-decoration: none;
    color: var(--text-light); /* <-- ОСЬ КЛЮЧОВЕ ВИПРАВЛЕННЯ: Встановлюємо колір для посилання */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    min-height: 54px;
    text-transform: none;
    transition: color 0.3s ease;
    color: var(--text-light); /* <-- Дублюємо для надійності */
}

/* При наведенні на посилання, змінюємо колір заголовка всередині нього */
.news-card a:hover h3 {
    color: var(--primary-color);
}

.news-date { font-size: 12px; color: var(--text-secondary); }
.news-section .swiper-pagination { position: static; margin-top: 30px; }
.news-section .swiper-pagination-bullet { background: var(--text-secondary); opacity: 0.5; }
.news-section .swiper-pagination-bullet-active { background: var(--primary-color); opacity: 1; }
.news-section .swiper-button-next, .news-section .swiper-button-prev { color: var(--primary-color); width: 20px; height: 20px; top: 50%; transform: translateY(-50%); }
.news-section .swiper-button-next { right: 0; }
.news-section .swiper-button-prev { left: 0; }
.news-section .swiper-button-next:after, .news-section .swiper-button-prev:after { font-size: 24px; font-weight: bold; }

/* --- Підвал --- */
.main-footer-section {
    background-color: var(--dark-bg);
    padding: 60px 0 20px;
    
    /* Ось ця лінія додає помаранчеву рамку зверху */
    border-top: 2px solid var(--primary-color);
    
    /* Додамо також тінь для глибини, як у хедера */
    box-shadow: 0 -5px 15px -5px rgba(255, 73, 0, 0.2);
}
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.footer-col { flex: 1; min-width: 200px; position: relative; display: flex; flex-direction: column; align-items: center; }
.footer-contact-btn {
    align-self: stretch; /* <-- ДОДАЙТЕ ЦЕЙ БЛОК */
}
.footer-logo { height: 35px; margin-bottom: 20px; width: auto; object-fit: contain; }
.footer-col h4 { font-weight: 500; margin-bottom: 15px; text-transform: uppercase; }
.footer-col p { margin-bottom: 10px; }
.footer-col p, .footer-col a { color: var(--text-secondary); font-size: 14px; font-weight: 300; }
.footer-col a:hover { color: var(--primary-color); }
.social-links a { margin-right: 15px; }
.footer-bottom { border-top: 1px solid var(--card-bg); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-secondary); }

/* --- Адаптивність --- */
@media (max-width: 992px) {
    .nav-menu { display: none; }
    body .burger-menu-icon {
        display: block !important;
    }
    .main-nav .header-actions { padding-right: 60px; }
    .about-section {
        flex-direction: column;
        text-align: center;
        padding-top: 80px;
        padding-bottom: 40px; /* Додамо відступ знизу */
        filter: url('#liquid-glass');
    }
    
    .about-image {
        width: 100%;
        max-height: 60vh; /* <<<< ОСНОВНА МАГІЯ ТУТ */
        /* Обмежуємо висоту зображення до 60% висоти екрану */
        overflow: hidden; /* Ховаємо все, що не влізло у фрейм */
        margin-bottom: 50px;
    }
    
    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Гарантує, що зображення заповнить блок, навіть якщо обріжеться */
    }
    
    .about-text {
        margin-top: -25%; /* <<<< ОСНОВНА ЗМІНА ТУТ */
        /* Наїзд на 25% від ширини контейнера. Можна погратися зі значенням (напр. -30%) */
        position: relative;
        background: rgba(3, 1, 0, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 2px solid var(--primary-color);
        padding: 40px 20px 20px;
        border-radius: 12px;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
        width: 100%;
        margin-top: -130px;
    }
    
    .about-text h2 {
        text-align: center;
    }
    
    .about-stats {
        justify-content: center;
    }
    .news-slider { padding: 0; padding-top: 10px;}
    .news-section .swiper-button-next, .news-section .swiper-button-prev { display: none; }
}

@media (max-width: 768px) {
    h1 { font-size: 32px; }
    h2.section-title { font-size: 26px; }
    .main-nav { display: flex; justify-content: space-between; }
    .header-actions { margin-left: auto; }
    .footer-content {
        flex-direction: column; 
        align-items: center; 
    }
    .footer-col {
        align-items: center; 
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
    .footer-logo { margin-left: auto; margin-right: auto; }
    .social-links {
        display: flex;
        justify-content: center; /* Центрує посилання всередині блоку */
        gap: 20px;             /* Відстань між посиланнями */
        width: 100%;           
    }
    
    .social-links a {
        margin-right: 0; /* Скидаємо старий відступ */
    }
    .footer-bottom { flex-direction: column; gap: 10px; }

    .items-grid-v2 { grid-template-columns: 1fr; }
    .item-card-v2:nth-child(n) { transform: translateY(0) !important; margin: 0 0 30px 0 !important; } /* Скидаємо шаховий порядок на мобільних */
}


/* --- Стилізація рамки для зображень --- */
.image-frame {
    position: relative;
    padding: 12px; /* Внутрішній відступ, що створює ефект рамки */
    background: linear-gradient(145deg, var(--card-bg), #1a1a1a); /* Легкий градієнт для глибини */
    border-radius: 12px; /* Заокруглення кутів */
    box-shadow: 
        5px 5px 15px rgba(0, 0, 0, 0.5), /* Темна тінь для об'єму */
        -5px -5px 15px rgba(34, 34, 34, 0.1); /* Світлий відблиск зверху */
}

.image-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px; /* Повторюємо заокруглення */
    border: 2px solid transparent; /* Прозора рамка за замовчуванням */
    background: 
        linear-gradient(var(--primary-color), var(--primary-color)) padding-box, /* Колір рамки */
        linear-gradient(145deg, #ff6a00, #ff2a00) border-box; /* Градієнт для самої рамки */
    -webkit-mask: /* Маска для створення ефекту внутрішньої рамки */
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    transition: all 0.3s ease-in-out;
}

.image-frame:hover::before {
    transform: scale(1.02); /* Легке збільшення при наведенні */
    box-shadow: 0 0 20px var(--shadow-color); /* Світіння при наведенні */
}

.image-frame img {
    border-radius: 6px; /* Легке заокруглення для самого зображення */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Гарантує, що зображення заповнить блок без спотворень */
}

/* Анімація появи секцій при скролі */
.section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --- Кастомізація пагінації слайдера відгуків --- */
.reviews-section .swiper-pagination-bullet {
    background: var(--text-secondary);
    opacity: 0.4;
    transition: all 0.3s ease;
}

.reviews-section .swiper-pagination-bullet-active {
    background: var(--primary-color);
    opacity: 1;
    transform: scale(1.2); /* Робимо активну точку трохи більшою */
}


/* --- Єдиний стиль для всіх Liquid Glass кнопок (v5.0) --- */

.liquidGlass-wrapper {
    position: relative;
    display: inline-flex; /* Використовуємо inline-flex для кращого контролю */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    
    /* Базові розміри та заокруглення, як у .product-card__button */
    padding: 12px 28px;
    border-radius: 50px;

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5);
}

.liquidGlass-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 0, 0, 0.15);
}

/* Шари ефекту (без змін) */
.liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
}
.liquidGlass-effect {
    backdrop-filter: blur(4px);
    filter: url(#glass-distortion);
    isolation: isolate;
}
.liquidGlass-shine {
    z-index: 2;
    box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.4),
                inset -1px -1px 1px 0 rgba(0, 0, 0, 0.2);
}
.liquidGlass-tint {
    z-index: 1;
    transition: background 0.4s ease;
}

/* Текст всередині кнопки */
.liquidGlass-text {
    z-index: 3;
    font-family: var(--font-headings);
    font-weight: 100;
    text-transform: uppercase;
    font-size: 12px; /* << ЄДИНИЙ РОЗМІР ШРИФТУ */
    color: var(--text-light);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* --- Логіка кольорів та наведення --- */

/* Помаранчева кнопка (за замовчуванням) */
.button-orange .liquidGlass-tint {
  background: rgba(255, 73, 0, 0.35); 
}
.button-orange:hover .liquidGlass-tint {
  background: rgba(255, 73, 0, 0.5);
}

/* Біла/Прозора кнопка */
.button-white .liquidGlass-tint {
  background: rgba(255, 255, 255, 0.15);
}

/* << ЄДИНЕ ПРАВИЛО ДЛЯ НАВЕДЕННЯ НА БІЛУ КНОПКУ >> */
.button-white:hover .liquidGlass-tint {
  background: rgba(255, 73, 0, 0.5); /* Стає напівпрозорою помаранчевою */
}

/* --- Специфічні налаштування для кнопок у різних місцях --- */

/* Кнопки в головному блоці (можна зробити їх трохи більшими) */
.hero .liquidGlass-wrapper {
    padding: 14px 32px;
}
.hero .liquidGlass-text {
    font-size: 13px;
}

/* Кнопка в картці продукту */
.product-card__button.liquidGlass-wrapper {
    margin-top: auto;
    align-self: center;
}

  
  







/* css/style.css */

/* --- Секція "Наші продукти" (Оновлення) --- */
.product-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center; /* << ЦЕНТРУЄМО ВСІ ЕЛЕМЕНТИ */
    text-align: center; /* Центруємо текст */
}

.product-card__title {
    font-size: 20px;
    font-weight: 400;
    text-transform: none;
    color: var(--text-light);
    margin-bottom: 15px;
}

.product-card__description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 25px;
}

/* Обгортка для кнопки, щоб вона не розтягувалась */
.product-card__button-wrapper {
    /* Скидаємо align-self: flex-start з попередніх стилів */
    align-self: center;
}



/* Додайте це в кінець секції стилів для новин */
.news-card-excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 10px 0 15px 0; /* Відступи зверху і знизу */
    
    /* Обмежуємо висоту двома рядками */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px; /* Резервуємо місце під два рядки */
}



/* --- Адаптація Liquid Glass кнопки для карток продуктів --- */

.product-card__button.liquidGlass-wrapper {
    /* Робимо кнопку меншою, щоб вона пасувала до картки */
    padding: 12px 28px;
    border-radius: 50px;
    margin-top: auto; /* Притискає кнопку до низу, якщо опис короткий */
    align-self: center;
}

.product-card__button .liquidGlass-text {
    /* Робимо текст трохи меншим */
    font-size: 12px;
}





/* --- ФІКСОВАНІ КНОПКИ "КАТАЛОГ" ТА "НАГОРУ" (ЄДИНЕ ПРАВИЛЬНЕ РІШЕННЯ) --- */

.fixed-action-buttons {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

/* Загальний стиль для обох кнопок всередині цього блоку */
.fixed-action-buttons .liquidGlass-wrapper {
    /* Плавна анімація появи/зникнення */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

/* Стилі для кнопки "Каталог" */
.fixed-action-buttons .catalog-btn {
    padding: 12px 25px;
}

.catalog-btn-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    font-family: var(--font-headings);
    font-weight: 100;
    text-transform: uppercase;
    font-size: 13px;
}

.catalog-btn-content svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-light);
}

/* Стилі для кнопки "Нагору" */
.fixed-action-buttons .scroll-top-btn {
    width: 60px;
    height: 60px;
    padding: 0;
}

.scroll-top-icon {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-top-target {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: target-spin 10s linear infinite;
}

.scroll-top-arrow {
    position: relative;
    width: 24px;
    height: 24px;
    stroke: var(--text-light); 
}

.scroll-top-btn:hover .scroll-top-arrow {
    stroke: var(--dark-bg);
    transition: stroke 0.3s ease;
}

/* КЛЮЧОВЕ ПРАВИЛО, ЯКЕ ВСЕ ВИПРАВИТЬ */
/* Це правило робить кнопки невидимими, ТІЛЬКИ якщо у них є клас .hidden */
.fixed-action-buttons .hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
}






/* =================================================================== */
/* === СТИЛІ ДЛЯ ФОРМИ ЗВОРОТНОГО ЗВ'ЯЗКУ === */
/* =================================================================== */

.feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: rgba(3, 1, 0, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.feedback-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.feedback-form-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 95vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feedback-overlay.is-visible .feedback-form-wrapper {
    transform: scale(1);
}

.feedback-form-wrapper .liquidGlass-effect,
.feedback-form-wrapper .liquidGlass-tint,
.feedback-form-wrapper .liquidGlass-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.feedback-form-wrapper .liquidGlass-effect {
    backdrop-filter: blur(5px);
    filter: url(#glass-distortion);
}

.feedback-form-wrapper .liquidGlass-tint {
    background: rgba(255, 255, 255, 0.1);
}

.feedback-form-wrapper .liquidGlass-shine {
    box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.feedback-form {
    position: relative;
    z-index: 3;
    padding: 40px;
    overflow-y: auto;
    max-height: 95vh;
}

.feedback-form-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 4;
    transition: transform 0.3s ease;
}

.feedback-form-close:hover {
    transform: rotate(90deg);
}

.feedback-form-close:before,
.feedback-form-close:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
}

.feedback-form-close:before {
    transform: translateY(-50%) rotate(45deg);
}

.feedback-form-close:after {
    transform: translateY(-50%) rotate(-45deg);
}

.feedback-form h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    position: relative;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--text-light);
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
}

.form-group .liquid-input-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--shadow-color);
    transition: border-color 0.3s ease; /* Плавний перехід для ефекту фокусу */
}

.liquid-input-wrapper .liquidGlass-effect,
.liquid-input-wrapper .liquidGlass-tint,
.liquid-input-wrapper .liquidGlass-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.liquid-input-wrapper .liquidGlass-effect {
    backdrop-filter: blur(2px);
    filter: url(#glass-distortion);
}

.liquid-input-wrapper .liquidGlass-tint {
    background: rgba(255, 73, 0, 0.2);
}

.liquid-input-wrapper .liquidGlass-shine {
    box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.liquid-input-wrapper input,
.liquid-input-wrapper textarea,
.liquid-input-wrapper select {
    background: transparent;
    position: relative;
    z-index: 2;
}

.liquid-input-wrapper input:focus,
.liquid-input-wrapper textarea:focus,
.liquid-input-wrapper select:focus {
    outline: none;
}

.liquid-input-wrapper:has(input:focus),
.liquid-input-wrapper:has(textarea:focus),
.liquid-input-wrapper:has(select:focus) {
    border-color: var(--primary-color); 
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--text-light);
    pointer-events: none;
    z-index: 3;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.captcha-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.captcha-image {
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
    cursor: pointer;
}

.captcha-image img {
    filter: grayscale(1) contrast(3) brightness(1.2);
}

.form-actions {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .feedback-form {
        padding: 40px 20px;
    }
}






/*
========================================
  СТИЛІ ДЛЯ ВІДЕО-ВІДГУКІВ
========================================
*/

/* Контейнер для відео, що зберігає пропорції 16:9 */
.review-card__video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    /* Створює новий контекст рендерингу, змушуючи браузер обрізати iframe */
    transform: translateZ(0);
}

/* Сам iframe з відео */
.review-card__video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Прибираємо рамку, яку браузери можуть додавати за замовчуванням */
}

/* Якщо картка містить відео, ховаємо іконку з лапками */
.review-card.is-video .review-card__quote-icon {
    display: none;
}








/*
========================================
  ВИПРАВЛЕННЯ ДЛЯ СЛАЙДЕРА ВІДГУКІВ
========================================
*/

/* Змушуємо слайди займати всю доступну висоту */
.reviews-slider .swiper-slide {
    height: auto;
}

/* Змушуємо картку всередині слайда також займати всю висоту */
.reviews-slider .review-card {
    height: 100%;
    display: flex;
    flex-direction: column; /* Це важливо для правильного розподілу простору */
}

/* Дозволяємо текстовому блоку розтягуватися, щоб заповнити місце */
.reviews-slider .review-card__text {
    flex-grow: 1;
}









/*
===================================================================
  ПОЗИЦІОНУВАННЯ УНІКАЛЬНИХ СТРІЛОК НОВИН
===================================================================
*/

/* Позиціонуємо стрілки відносно .slider-container */
.news-section .slider-container {
    position: relative;
}

.news-section .news-arrow-prev-unique {
    left: 0;
}
.news-section .news-arrow-next-unique {
    right: 0;
}





/*
===================================================================
  ВИРІВНЮВАННЯ КАРТОК НОВИН ПО ВИСОТІ
===================================================================
*/

/* 1. Робимо слайди гнучкими по висоті */
.news-section .swiper-slide {
    height: auto; /* Дозволяє слайду розтягуватися по висоті вмісту */
    display: flex; /* Включаємо flexbox для вирівнювання */
}

/* 2. Робимо саму картку гнучкою і вертикальною */
.news-section .news-card {
    display: flex;
    flex-direction: column; /* Всі елементи всередині картки будуть в стовпчик */
    height: 100%; /* Картка буде займати всю висоту слайда */
}

/* 3. Дозволяємо текстовому контейнеру розтягуватися */
.news-section .news-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Це найважливіше правило! Воно змушує цей блок зайняти весь вільний простір по висоті */
}

/* 4. Притискаємо дату до низу картки */
.news-section .news-date {
    margin-top: auto; /* Це змушує дату "відштовхнутися" від верхніх елементів і притиснутися до низу */
    padding-top: 15px; /* Додаємо невеликий відступ зверху для краси */
}







/*
============================================================
  ПАРАЛАКС ФОНІВ (V10.0 - THE ONLY ONE THAT WORKS)
============================================================
*/

/* 1. Робимо секції батьківськими контейнерами */
.products-section,
.news-section,
.reviews-section {
    position: relative;
    overflow: hidden; /* Прибирає будь-який люфт */
}

/* 2. Стилізуємо контейнер для фону */
.section-background {
    position: absolute;
    top: 0;
    left: -15%;
    width: 130%;
    height: 100%;
    z-index: 0; /* <-- ВАЖЛИВО: z-index: 0, а не -1 */
    pointer-events: none;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
    will-change: transform;
}

/* 3. Градієнтна маска */
.section-background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--dynamic-bg-dark) 10%, rgba(3, 1, 0, 0) 80%);
}



/* 5. ВИДАЛЯЄМО КОНФЛІКТНИЙ Z-INDEX */
.products-section .container,
.news-section .container,
.reviews-section .container {
    position: relative;
    /* z-index: 5; -- ЦЕЙ РЯДОК ВИДАЛЕНО АБО ЗАКОМЕНТОВАНО */
}

/* 6. ★★★ НОВИЙ БЛОК: Градієнтна маска ЗВЕРХУ для плавної появи ★★★ */
.products-section::before,
.news-section::before,
.reviews-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Висота градієнту, можна регулювати */
    background: linear-gradient(to bottom, var(--dynamic-bg-dark) 0%, rgba(3, 1, 0, 0) 100%);
    z-index: 2; /* Розміщуємо над фоном, але під контентом */
    pointer-events: none; /* Градієнт не повинен заважати клікам */
}
















/*
========================================
  ДЕКОРАТИВНИЙ ФОН ДЛЯ СЕКЦІЇ "ПРО НАС"
========================================
*/

/* 1. Робимо секцію "Про нас" батьківським контейнером */
.about-section {
    position: relative;
    overflow: hidden; /* Ховаємо частини SVG, які можуть вийти за межі */
}

/* 2. Створюємо псевдоелемент, який буде нашим фоном */
.about-section::before {
    content: '';
    position: absolute;
    
    /* 3. Притискаємо до правого нижнього кута */
    right: 0;
    bottom: 0;
    
    /* 4. Задаємо розміри (можна погратися з цими значеннями) */
    width: 400px; 
    height: 400px;
    
    /* 5. Встановлюємо фонове зображення */
    background-image: url('../images/tild3563-3834-4165-b762-393063313436__rhombus.svg');
    background-repeat: no-repeat;
    background-position: right bottom; /* Вирівнюємо саме зображення всередині блоку */
    background-size: contain; /* Масштабуємо, щоб воно повністю влізло в блок */
    
    /* 6. Робимо його напівпрозорим і розміщуємо позаду контенту */
    opacity: 0.1; /* Дуже низька прозорість для ледь помітного ефекту */
    z-index: -1;
    
    /* 7. Для краси можна додати легке обертання і зміщення */
    transform: translate(20%, 20%); /* Трохи зміщуємо за межі, щоб було видно лише частину */
}

/* 8. Переконуємось, що контент секції залишається над фоном */
.about-section .about-image,
.about-section .about-text {
    position: relative;
    z-index: 5;
}






/* Стилі для кнопки зі стрілочкою вниз */
.button-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Відстань між текстом та іконкою */
}






/*
========================================
  FIX: Розмитий текст на кнопках "Liquid Glass"
========================================
*/
.liquidGlass-wrapper .catalog-btn-content,
.liquidGlass-wrapper .contact-btn-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Окремо для текстових кнопок, де немає іконок */
.liquidGlass-wrapper .liquidGlass-text {
    position: relative;
    z-index: 5;
}






/*
============================================================
  ОСТАТОЧНЕ ВИПРАВЛЕННЯ ГОРИЗОНТАЛЬНОЇ ПРОКРУТКИ (V.FINAL)
============================================================
*/

/* 1. Робимо контейнер новин точкою відліку для стрілок */
.news-slider-container {
    position: relative !important; /* Гарантуємо позиціонування */
    padding: 0 60px !important; /* Гарантуємо відступи */
    box-sizing: border-box !important; /* Гарантуємо правильний розрахунок ширини */
}

/* 2. Позиціонуємо стрілки всередині цього контейнера */
.news-slider-container .reviews-arrow {
    position: absolute !important; /* Гарантуємо абсолютне позиціонування */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Вирівнюємо по центру вертикально */
    margin: 0 !important; /* Скидаємо будь-які зовнішні відступи */
}

.news-slider-container .news-arrow-prev-unique {
    left: 10px !important; /* Ставимо з невеликим відступом від краю */
}

.news-slider-container .news-arrow-next-unique {
    right: 10px !important; /* Ставимо з невеликим відступом від краю */
}

/* 3. Прибираємо padding з самого слайдера, щоб він не конфліктував */
.news-slider {
    padding: 0 !important;
    overflow: visible !important; /* Дозволяємо тіням слайдів бути видимими */
}







/*
===================================================================
  СТИЛІ ДЛЯ УНІКАЛЬНИХ СТРІЛОК НОВИН
===================================================================
*/

.news-arrow-prev,
.news-arrow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 10;
    background-color: rgba(34, 34, 34, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.news-arrow-prev:hover,
.news-arrow-next:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.news-arrow-prev { left: 0; }
.news-arrow-next { right: 0; }

.news-arrow-prev i,
.news-arrow-next i {
    font-size: 20px;
}







/*
========================================
  Анімація обертання мішені на кнопці "Нагору"
========================================
*/

/* Створюємо анімацію обертання */
@keyframes spin-target {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Застосовуємо анімацію до зображення мішені */
  .scroll-top-target {
    /* 
      Задаємо нескінченну анімацію 'spin-target'
      Тривалість: 5 секунд
      Тип анімації: linear (рівномірна швидкість)
      Стан: paused (за замовчуванням анімація не програється)
    */
    animation: spin-target 5s linear infinite;
    animation-play-state: paused;
  }
  
  /* 
    Коли кнопка НЕ прихована (.scroll-top-btn:not(.hidden)) 
    І ми наводимо на неї курсор (:hover),
    тоді запускаємо анімацію для мішені.
  */
  .scroll-top-btn:not(.hidden):hover .scroll-top-target {
    animation-play-state: running;
  }
  








  /*
========================================
  Оновлені стилі для карток новин
========================================
*/

/* 1. Деактивація неактивних посилань */
.disabled-link {
    pointer-events: none; /* Забороняє кліки та інші події миші */
    cursor: default;      /* Стандартний курсор замість "руки" */
}

/* 2. Стилі для заголовка */
.news-card__title a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-card__title a:not(.disabled-link):hover {
    color: var(--primary-color);
}

/* 3. Оновлення контейнера контенту */
.news-card-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Дозволяє футеру притиснутися донизу */
}

.news-card-excerpt {
    flex-grow: 1; /* Займає весь доступний простір, відсуваючи футер вниз */
}

/* 4. Стилі для футера картки (дата та кнопка) */
.news-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

/* 5. Стилізація кнопки "Більше..." */
.news-read-more-btn {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.news-read-more-btn:hover {
    background-color: #e04000; /* Трохи темніший відтінок при наведенні */
    transform: scale(1.05);
}








/*
========================================
  Стиль для приховування кнопки "Зв'язок" біля футера
========================================
*/

/* 
  Цей клас додається через JS, коли футер стає видимим.
  Він має вищий пріоритет і примусово ховає кнопку.
*/
.contact-btn.hidden-by-footer {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Плавне зникнення вниз */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}






/* Застосовуємо flex до всіх контейнерів з текстом та іконками */
.liquidGlass-text,
.catalog-btn-content,
.contact-btn-content {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Початковий відступ */
    transition: gap 0.3s ease;
}

/* Застосовуємо ефект наведення до всіх кнопок */
.liquidGlass-wrapper:hover .liquidGlass-text,
.liquidGlass-wrapper:hover .catalog-btn-content,
.liquidGlass-wrapper:hover .contact-btn-content {
    gap: 12px; /* Збільшений відступ */
}

/* Стилі для іконок всередині кнопок, щоб вони не стрибали */
.liquidGlass-text svg,
.catalog-btn-content svg,
.contact-btn-content svg {
    transition: transform 0.3s ease;
    width: 1em;
    height: 1em;
    flex-shrink: 0; /* Забороняємо іконці стискатися */
}








.header-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light); /* Колір іконки */
    transition: color 0.3s ease;
}

.header-phone:hover {
    color: var(--primary-color); /* Колір іконки при наведенні */
}

/* Задаємо розмір для SVG всередині посилання */
.header-phone svg {
    width: 24px;  /* або 22px, підберіть розмір, який вам подобається */
    height: 24px; /* або 22px */
}

/*
============================================================
  ПОЛІТИКА КОНФІДЕНЦІЙНОСТІ ТА БАНЕР ЗГОДИ
============================================================
*/

.privacy-policy-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 1, 0, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.privacy-policy-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.privacy-policy-modal {
    position: relative;
    width: min(980px, 100%);
    max-height: min(86dvh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 73, 0, 0.45);
    border-radius: 28px;
    background: rgba(10, 7, 5, 0.92);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 73, 0, 0.16);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.3s ease;
}

.privacy-policy-overlay.is-visible .privacy-policy-modal {
    transform: translateY(0) scale(1);
}

.privacy-policy-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 73, 0, 0.75);
    border-radius: 50%;
    background: rgba(3, 1, 0, 0.82);
    color: var(--text-light);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.privacy-policy-modal__close:hover,
.privacy-policy-modal__close:focus-visible {
    background: var(--primary-color);
    color: var(--text-light);
    transform: rotate(90deg);
    outline: none;
}

.privacy-policy-modal__header {
    padding: 34px 80px 22px 34px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(255, 73, 0, 0.14), rgba(255, 255, 255, 0.03));
}

.privacy-policy-modal__eyebrow {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.privacy-policy-modal__header h2 {
    margin: 0;
    color: var(--text-light);
    font-size: clamp(24px, 4vw, 40px);
    line-height: 1.15;
}

.privacy-policy-modal__body {
    padding: 30px 34px 36px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.privacy-policy-content {
    color: var(--dynamic-text-secondary);
}

.privacy-policy-content h1,
.privacy-policy-content h2,
.privacy-policy-content h3 {
    color: var(--text-light);
    font-family: var(--font-headings);
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.privacy-policy-content h1 {
    margin: 0 0 24px;
    font-size: clamp(24px, 4vw, 38px);
}

.privacy-policy-content h2 {
    margin: 34px 0 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 73, 0, 0.24);
    font-size: clamp(19px, 3vw, 26px);
}

.privacy-policy-content h3 {
    margin: 24px 0 12px;
    color: var(--primary-color);
    font-size: clamp(16px, 2.3vw, 20px);
}

.privacy-policy-content p,
.privacy-policy-content li {
    color: var(--dynamic-text-secondary);
    font-size: 15px;
    line-height: 1.85;
}

.privacy-policy-content p {
    margin: 0 0 14px;
}

.privacy-policy-content ul {
    margin: 0 0 18px 0;
    padding: 0;
    list-style: none;
}

.privacy-policy-content li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 24px;
}

.privacy-policy-content li::before {
    content: '';
    position: absolute;
    top: 0.82em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 12px rgba(255, 73, 0, 0.55);
}

.privacy-policy-content--compact h1 {
    display: none;
}

.privacy-policy-content--compact h2 {
    margin-top: 22px;
    padding-top: 18px;
    font-size: 18px;
}

.privacy-policy-content--compact h3 {
    font-size: 16px;
}

.privacy-policy-content--compact p,
.privacy-policy-content--compact li {
    font-size: 13px;
    line-height: 1.65;
}

.privacy-consent {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 10010;
    width: min(1120px, calc(100% - 32px));
    transform: translate(-50%, 28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.privacy-consent.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.privacy-consent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 20px 22px;
    border: 1px solid rgba(255, 73, 0, 0.5);
    border-radius: 24px;
    background: rgba(10, 7, 5, 0.9);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 73, 0, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.privacy-consent__title {
    margin: 0 0 6px;
    color: var(--text-light);
    font-family: var(--font-headings);
    font-size: 16px;
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.privacy-consent__text,
.privacy-consent__note {
    margin: 0;
    color: var(--dynamic-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.privacy-consent__note {
    margin-top: 8px;
    opacity: 0.78;
}

.privacy-consent__details {
    margin-top: 10px;
}

.privacy-consent__details summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.privacy-consent__details summary:focus-visible {
    outline: 1px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 8px;
}

.privacy-consent__details-body {
    max-height: 230px;
    margin-top: 12px;
    padding: 16px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.28);
    -webkit-overflow-scrolling: touch;
}

.privacy-consent__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.privacy-consent__accept {
    white-space: nowrap;
}

body.privacy-consent-visible .fixed-action-buttons {
    bottom: 190px;
}

@media (max-width: 768px) {
    .privacy-policy-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .privacy-policy-modal {
        width: 100%;
        max-height: 88dvh;
        border-radius: 24px 24px 0 0;
    }

    .privacy-policy-modal__header {
        padding: 28px 64px 18px 22px;
    }

    .privacy-policy-modal__body {
        padding: 22px;
    }

    .privacy-policy-content p,
    .privacy-policy-content li {
        font-size: 14px;
        line-height: 1.75;
    }

    .privacy-consent {
        width: calc(100% - 20px);
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .privacy-consent__inner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
        border-radius: 20px;
    }

    .privacy-consent__actions {
        justify-content: stretch;
    }

    .privacy-consent__accept {
        width: 100%;
    }

    .privacy-consent__details-body {
        max-height: 180px;
    }

    body.privacy-consent-visible .fixed-action-buttons {
        bottom: 240px;
    }
}

@media (max-width: 420px) {
    .privacy-policy-modal__close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 26px;
    }

    .privacy-policy-modal__header {
        padding-right: 58px;
    }

    .privacy-consent__text,
    .privacy-consent__note,
    .privacy-consent__details summary {
        font-size: 12px;
    }

    body.privacy-consent-visible .fixed-action-buttons {
        bottom: 260px;
    }
}