/* ==========================================================================
   1. МАГІЯ КОЛЬОРОВИХ ГАМ СТО: ПАЛІТРИ ДЛЯ 4 ПРЕМІУМ-ТЕМ НА CSS-ЗМІННИХ
   ========================================================================== */

/* --- ТЕМА: STANDART (Фірмова світла авто-тема СТО) --- */
body.theme-standart {
    --bg-main: #ffffff;
    --bg-tier-top: #f8fafc;
    --text-primary: #1a1a1a;
    --text-secondary: #475569;
    --accent-color: #3b82f6;
    --accent-hover: #1d4ed8;
    --border-color: rgba(0,0,0,0.08);
}

/* --- ТЕМА: DARKSIDE (Глубокий матовий чорний + бірюзовий неон) --- */
body.theme-darkside {
    --bg-main: #0b0f19;
    --bg-tier-top: #111827;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --accent-color: #06b6d4;
    --accent-hover: #0891b2;
    --border-color: rgba(255,255,255,0.08);
}

/* --- ТЕМА: LAMBA (Спортивна матово-чорна з агресивним жовтим) --- */
body.theme-lamba {
    --bg-main: #121212;
    --bg-tier-top: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --accent-color: #eab308;
    --accent-hover: #ca8a04;
    --border-color: rgba(255,255,255,0.05);
}

/* --- ТЕМА: TABBACCO (Дорога темна тема: Дерево, шкіра та сталь) --- */
body.theme-tabbacco {
    --bg-main: #1e1a18;
    --bg-tier-top: #2c2421;
    --text-primary: #fdf6e2;
    --text-secondary: #bbaaa6;
    --accent-color: #d97706;
    --accent-hover: #b45309;
    --border-color: rgba(217,119,6,0.15);
}

/* ==========================================================================
   2. СКИДАННЯ СТИЛІВ ТА ГЛОБАЛЬНІ НАЛАШТУВАННЯ САЙТУ
   ========================================================================== */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

body {
        background-color: var(--bg-main) !important;
        color: var(--text-primary) !important;
        -webkit-font-smoothing: antialiased;
        transition: background-color 0.3s, color 0.3s;
}

a {
        text-decoration: none;
        color: inherit;
        transition: color 0.2s ease;
}

ul {
        list-style: none;
        margin: 0;
        padding: 0;
}

.fixed-top-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
}

.main-content {
        margin-top: 175px;
        display: block;
        position: relative;
        z-index: 1;
}

/* ==========================================================================
   3. ГЛОБАЛЬНІ СУЧАСНІ КНОПКИ (УНІВЕРСАЛЬНІ КЛАСИ)
   ========================================================================== */
.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 32px;
        font-weight: 700;
        border-radius: 8px;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.5px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        border: none;
}

.btn-primary {
        background-color: var(--accent-color) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
        background-color: var(--accent-hover) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
        background-color: transparent;
        color: #ffffff;
        border: 2px solid #ffffff;
}

.btn-secondary:hover {
        background-color: #ffffff;
        color: #1a1a1a;
        transform: translateY(-2px);
}

.btn-secondary:active { transform: translateY(0); }
.btn-block { display: flex; width: 100%; }
/* ==========================================================================
   4. СУЧАСНИЙ ГОЛОВНИЙ БАНЕР (HERO SECTION)
   ========================================================================== */
.hero-banner {
        position: relative;
        height: 65vh;
        min-height: 500px;
        background: url('https://picsum.photos') center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #ffffff;
        padding: 0 20px;
}

.banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.banner-body {
        position: relative;
        z-index: 2;
        max-width: 850px;
}

.banner-body h1 {
        font-size: 46px;
        font-weight: 800;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: -0.5px;
        line-height: 1.2;
}

.banner-body p {
        font-size: 19px;
        margin-bottom: 35px;
        opacity: 0.95;
        line-height: 1.5;
        font-weight: 400;
}

.banner-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
}

/* ==========================================================================
   4a. СУЧАСНИЙ БЛОК "ПРО НАС" (ABOUT SECTION)
   ========================================================================== */
.about-section { padding: 80px 0; }

.about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
}

.about-image-box {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}


".about-image-box img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        transition: transform 0.4s ease;
}

/* Мікро-анімація при наведенні на фото СТО */
.about-image-box:hover img {
        transform: scale(1.03);
}

/* Контентна частина */
.about-content h2 {
        font-size: 34px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.5px;
        margin-bottom: 20px;
        color: var(--main-text);
}

/* Лід-текст (головна думка, виділена більшим шрифтом) */
.about-lead {
        font-size: 18px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--main-text);
        margin-bottom: 15px;
}

.about-content p {
        font-size: 16px;
        line-height: 1.6;
        color: #555555;
        margin-bottom: 30px;
}

/* Цифри статистики СТО */
.about-stats {
        display: flex;
        gap: 40px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding-top: 25px;
}

.stat-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
}

/* Великі червоні акцентні цифри */
.stat-num {
        font-size: 36px;
        font-weight: 800;
        color: var(--accent-color, #e53935);
        line-height: 1;
        letter-spacing: -1px;
}

.stat-lbl {
        font-size: 14px;
        font-weight: 600;
        color: #777777;
        text-transform: uppercase;
        letter-spacing: 0.5px;
}

/* ==========================================================================
   4b. ПРЕМІУМ БЛОК АВТОМОБІЛЬНИХ БРЕНДІВ (BRANDS SECTION)
   ========================================================================== */
.brands-section {
        background-color: #f8fafc; /* Преміальний світлий відтінок */
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        padding: 80px 0;
}

/* Сучасна гнучка авто-сітка брендів */
.brands-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 20px;
}

/* Картка бренду */
.brand-item {
        background: var(--header-bg, #ffffff);
        border: 1px solid rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        padding: 24px 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}"
"/* Контейнер для логотипу */
.brand-logo-wrap {
        width: 65px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.brand-logo-wrap img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* Ефект монохрому: робимо логотипи стильними та сірими */
        filter: grayscale(100%);
        opacity: 0.4;
        transition: filter 0.3s ease, opacity 0.3s ease;
}

.brand-name {
        font-size: 13px;
        font-weight: 700;
        color: #777777;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
}

/* ЕФЕКТ НАВЕДЕННЯК КАРТКИ: Плавне повернення кольору та підйом */
.brand-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
        border-color: rgba(0, 0, 0, 0.08);
}

.brand-item:hover .brand-logo-wrap img {
        filter: grayscale(0%); /* Логотип стає кольоровим */
        opacity: 1; /* Повна яскравість */
}

.brand-item:hover .brand-name {
        color: var(--main-text, #1a1a1a); /* Текст стає чітким */
}

/* ==========================================================================
   4c. ПРЕМІУМ БЛОК НАШИХ ПЕРЕВАГ (BENEFITS SECTION)
   ========================================================================== */
.benefits-section {
        background-color: #ffffff;
        padding: 80px 0;
}

/* 4. Галерея робіт — робимо димчасто-сірою з тонкими рамками */
.gallery-section {
        background-color: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 80px 0 !important;
}


/* Сітка у 4 стовпчики для моніторів, яка сама стискається на планшетах */
.benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 30px;
}

/* Об'ємна біла картка переваги */
.benefit-item {
        background: var(--header-bg, #ffffff);
        border: 1px solid rgba(0, 0, 0, 0.03);
        border-radius: 16px;
        padding: 40px 30px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Великі нативні іконки */
.benefit-icon {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 1;
        display: inline-block;
        transition: transform 0.3s ease;
}

.benefit-item h4 {
        font-size: 18px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.3px;
        margin-bottom: 12px;
        color: var(--main-text, #1a1a1a);
}

.benefit-item p {
        font-size: 14.5px;
        line-height: 1.6;
        color: #666666;
}"
"/* ЕФЕКТ НАВЕДЕННЯ: Картка плавно піднімається, а іконка трохи збільшується */
.benefit-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

.benefit-item:hover .benefit-icon {
        transform: scale(1.12);
}

/* ==========================================================================
   4d. ПРЕМІУМ БЛОК ВІДГУКІВ ТА МОДЕРНІЗАЦІЇ (REVIEWS SECTION)
   ========================================================================== */
.reviews-section {
        background-color: #ffffff;
        padding: 80px 0;
}

/* Шапка блоку: заголовок зліва, кнопка або плашка справа */
.reviews-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        gap: 20px;
}

.reviews-header .section-title {
        margin-bottom: 0;
        text-align: left;
}

.review-login-notice {
        font-size: 14.5px;
        font-weight: 600;
        color: #64748b;
        background: #f8fafc;
        padding: 12px 20px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
}

.review-login-notice a {
        color: var(--accent-color, #e53935);
        text-decoration: underline;
        font-weight: 700;
}

/* Сітка карток */
.reviews-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
}

/* Об'ємна картка відгуку */
.review-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 30px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;
}

.review-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
}

.review-author {
        display: flex;
        flex-direction: column;
        gap: 4px;
}

.review-author strong {
        font-size: 16px;
        color: var(--main-text, #1a1a1a);
}

.review-car-badge {
        font-size: 12px;
        font-weight: 700;
        color: #e53935;
        background: rgba(229, 57, 53, 0.06);
        padding: 3px 8px;
        border-radius: 6px;
        display: inline-block;
        width: fit-content;
}

/* Золоті зірочки */
.review-stars {
        font-size: 18px;
        color: #cbd5e1; /* Сірі порожні зірки */
        letter-spacing: 2px;
}"
".review-stars .star.filled {
        color: #fbbf24; /* Золоті заповнені зірки */
}

.review-text {
        font-size: 15px;
        line-height: 1.6;
        color: #475569;
        font-style: italic;
}

/* Офіційна відповідь СТО */
.review-reply-box {
        background: #f8fafc;
        border-left: 3px solid var(--accent-color, #e53935);
        padding: 15px 20px;
        border-radius: 0 12px 12px 0;
        margin-top: 5px;
}

.reply-manager-title {
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--main-text, #1a1a1a);
        margin-bottom: 6px;
        letter-spacing: 0.5px;
}

.review-reply-box p {
        font-size: 14px;
        line-height: 1.5;
        color: #555555;
        margin-bottom: 0;
}

/* ==========================================================================
   МОДАЛЬНЕ ВІКНО ФОРМИ ВІДГУКУ (ПРИХОВАНЕ ЗА ЗАМОВЧУВАННЯМ)
   ========================================================================== */
.review-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.6); /* Темне напівпрозоре тло */
        backdrop-filter: blur(4px); /* Ефект розмиття ззаду */
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
}

.review-modal-overlay.active {
        opacity: 1;
        pointer-events: auto;
}

.review-modal-window {
        background: #ffffff;
        width: 100%;
        max-width: 500px;
        padding: 40px;
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        position: relative;
        transform: translateY(-20px);
        transition: transform 0.3s ease;
}

.review-modal-overlay.active .review-modal-window {
        transform: translateY(0);
}

.modal-close-btn {
        position: absolute;
        top: 20px;
        right: 25px;
        font-size: 30px;
        color: #94a3b8;
        cursor: pointer;
        transition: color 0.2s ease;
}

.modal-close-btn:hover {
        color: var(--main-text);
}

.review-modal-window h3 {
        font-size: 24px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
}

.modal-sub {
        font-size: 14px;
        color: #64748b;
        line-height: 1.4;
        margin-bottom: 25px;
}"
".modal-review-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
}

/* Інтерактивний вибір зірочок кліком */
.modal-rating-selector {
        display: flex;
        align-items: center;
        gap: 15px;
        background: #f8fafc;
        padding: 12px 15px;
        border-radius: 10px;
        border: 1px solid #e2e8f0;
}

.rating-label {
        font-size: 14px;
        font-weight: 700;
        color: #475569;
}

.interactive-stars {
        display: flex;
        flex-direction: row-reverse; /* Для правильного підсвічування зліва направо */
        gap: 4px;
}

.interactive-stars input {
        display: none; /* Ховаємо радіо-кнопки */
}

.interactive-stars label {
        font-size: 26px;
        color: #cbd5e1;
        cursor: pointer;
        transition: color 0.15s ease;
}

/* Підсвічування зірок при наведенні та кліку */
.interactive-stars input:checked ~ label,
.interactive-stars label:hover,
.interactive-stars label:hover ~ label {
        color: #fbbf24;
}

/* ==========================================================================
   🛠️ ЗАЛІЗОБЕТОННИЙ МОБІЛЬНИЙ ФІКС УСЬОГО САЙТУ (АНТИ-ПЕРЕКІС)
   ========================================================================== */
html, body {
        max-width: 100% !important;
        overflow-x: hidden !important; /* Назавжди вбиває горизонтальну прокрутку */
}

@media (max-width: 768px) {
        /* 1. Лікуємо гігантські заголовки, які ламали екран */
        .about-content h2,
        .section-title h2,
        .reviews-header .section-title h2 {
                font-size: 23px !important; /* Тепер заголовок поміститься на будь-якому iPhone */
                line-height: 1.3 !important;
                letter-spacing: -0.3px !important;
        }

        /* 2. Шапка блоку відгуків стає вертикальною */
        .reviews-header {
                flex-direction: column;
                text-align: center;
                gap: 20px;
                margin-bottom: 30px;
        }

        .reviews-header .section-title {
                text-align: center;
        }

        .reviews-action-zone {
                width: 100%;
        }

        .reviews-action-zone .btn {
                width: 100%; /* Кнопка «+ Залишити відгук» на весь екран смартфона */
        }

        .reviews-grid {
                grid-template-columns: 1fr; /* Картки строго в один ряд */
                gap: 20px;
        }

        .review-card {
                padding: 20px;
        }

        /* 3. Лікуємо мобільне модальне вікно */
        .review-modal-window {
                padding: 30px 20px;
                width: 92%;
                border-radius: 16px;
        }
        
        .review-modal-window h3 {
                font-size: 20px;
        }

        /* 4. Фікс іконок соцмереж у шапці, щоб не злипалися */
        .tier-socials {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 12px !important;
                width: 100%;
        }
}"
"/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ БЛОКУ ПЕРЕВАГ (МОБІЛЬНІ)
   ========================================================================== */
@media (max-width: 768px) {
        .benefits-grid {
                grid-template-columns: 1fr; /* На телефонах картки стають строго в один стовпчик */
                gap: 20px;
        }

        .benefit-item {
                padding: 30px 20px;
                border-radius: 12px;
        }
}

/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ БЛОКУ БРЕНДІВ (МОБІЛЬНІ)
   ========================================================================== */
@media (max-width: 768px) {
        .brands-grid {
                grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
                gap: 12px; /* Менші відступи на смартфонах */
        }

        .brand-item {
                padding: 16px 10px;
                border-radius: 10px;
        }

        .brand-logo-wrap {
                width: 45px;
                height: 45px;
        }
        
        /* На телефонах відразу показуємо логотипи трохи яскравіше, бо там немає наведення мишкою */
        .brand-logo-wrap img {
                opacity: 0.6;
        }
}


/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ БЛОКУ "ПРО НАС" (МОБІЛЬНІ СМАРТФОНИ)
   ========================================================================== */
@media (max-width: 768px) {
        /* На телефонах колонки стають одна під одну у правильному порядку */
        .about-grid {
                grid-template-columns: 1fr;
                gap: 35px;
                text-align: center;
        }

        .about-content h2 {
                font-size: 26px;
        }

        .about-lead {
                font-size: 17px;
        }

        /* Центруємо статистику на мобільних пристроях */
        .about-stats {
                justify-content: center;
                gap: 30px;
        }

        .stat-num {
                font-size: 30px;
        }
}


/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ ЧАСТИНИ 1 (МОБІЛЬНІ СМАРТФОНИ)
   ========================================================================== */
@media (max-width: 768px) {
        .main-content {
                margin-top: 190px; /* Адаптуємо відступ під нову мобільну шапку */
        }

        .hero-banner {
                height: auto;
                padding: 60px 20px;
        }

        .banner-body h1 {
                font-size: 28px; /* Зменшуємо, щоб не наповзало на екранах телефонів */
                margin-bottom: 15px;
        }

        .banner-body p {
                font-size: 16px;
                margin-bottom: 25px;
        }

        .banner-buttons {
                flex-direction: column; /* Кнопки стають одна під одну на мобілці */
                gap: 12px;
                max-width: 320px;
                margin: 0 auto;
        }

        .btn {
                width: 100%; /* Кнопки розтягуються для зручного тапу пальцем */
                padding: 14px 20px;
        }
}
/* ==========================================================================
   5. ОПТИМІЗАЦІЯ КОНТЕЙНЕРІВ ТА СЕКЦІЙ СТО
   ========================================================================== */
.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px; /* Прибрали 60px/80px зверху і знизу */
}

.container-small {
        max-width: 950px;
        margin: 0 auto;
        padding: 0 20px;
}


.section-title {
        text-align: center;
        margin-bottom: 50px; /* Більше відступу до сітки карток */
}

.section-title h2 {
        font-size: 34px;
        font-weight: 800;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: -0.5px; /* Сучасна затиснена розрядка */
        color: var(--main-text);
}

.section-title p {
        color: #666666;
        font-size: 17px;
        font-weight: 400;
}"
"/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ БЛОКУ ПЕРЕВАГ (МОБІЛЬНІ)
   ========================================================================== */
@media (max-width: 768px) {
        .benefits-grid {
                grid-template-columns: 1fr; /* На телефонах картки стають строго в один стовпчик */
                gap: 20px;
        }

        .benefit-item {
                padding: 30px 20px;
                border-radius: 12px;
        }
}

/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ БЛОКУ БРЕНДІВ (МОБІЛЬНІ)
   ========================================================================== */
@media (max-width: 768px) {
        .brands-grid {
                grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
                gap: 12px; /* Менші відступи на смартфонах */
        }

        .brand-item {
                padding: 16px 10px;
                border-radius: 10px;
        }

        .brand-logo-wrap {
                width: 45px;
                height: 45px;
        }
        
        /* На телефонах відразу показуємо логотипи трохи яскравіше, бо там немає наведення мишкою */
        .brand-logo-wrap img {
                opacity: 0.6;
        }
}


/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ БЛОКУ "ПРО НАС" (МОБІЛЬНІ СМАРТФОНИ)
   ========================================================================== */
@media (max-width: 768px) {
        /* На телефонах колонки стають одна під одну у правильному порядку */
        .about-grid {
                grid-template-columns: 1fr;
                gap: 35px;
                text-align: center;
        }

        .about-content h2 {
                font-size: 26px;
        }

        .about-lead {
                font-size: 17px;
        }

        /* Центруємо статистику на мобільних пристроях */
        .about-stats {
                justify-content: center;
                gap: 30px;
        }

        .stat-num {
                font-size: 30px;
        }
}


/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ ЧАСТИНИ 1 (МОБІЛЬНІ СМАРТФОНИ)
   ========================================================================== */
@media (max-width: 768px) {
        .main-content {
                margin-top: 190px; /* Адаптуємо відступ під нову мобільну шапку */
        }

        .hero-banner {
                height: auto;
                padding: 60px 20px;
        }

        .banner-body h1 {
                font-size: 28px; /* Зменшуємо, щоб не наповзало на екранах телефонів */
                margin-bottom: 15px;
        }

        .banner-body p {
                font-size: 16px;
                margin-bottom: 25px;
        }

        .banner-buttons {
                flex-direction: column; /* Кнопки стають одна під одну на мобілці */
                gap: 12px;
                max-width: 320px;
                margin: 0 auto;
        }"
".btn {
                width: 100%; /* Кнопки розтягуються для зручного тапу пальцем */
                padding: 14px 20px;
        }
}
/* ==========================================================================
   5. ОПТИМІЗАЦІЯ КОНТЕЙНЕРІВ ТА СЕКЦІЙ СТО
   ========================================================================== */
.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px; /* Прибрали 60px/80px зверху і знизу */
}

.container-small {
        max-width: 950px;
        margin: 0 auto;
        padding: 0 20px;
}


.section-title {
        text-align: center;
        margin-bottom: 50px; /* Більше відступу до сітки карток */
}

.section-title h2 {
        font-size: 34px;
        font-weight: 800;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: -0.5px; /* Сучасна затиснена розрядка */
        color: var(--main-text);
}

.section-title p {
        color: #666666;
        font-size: 17px;
        font-weight: 400;
}

/* ==========================================================================
   6. ПРЕМІУМ ГАЛЕРЕЯ РОБОЧИХ БОКСІВ (3D GRID)
   ========================================================================== */
.gallery-grid {
        display: grid;
        /* Надійна автоматична сітка, яка сама знає, скільки карток вмістити */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px; /* Збільшено відстань між картками */
}

.gallery-item {
        position: relative;
        border-radius: 12px; /* М'які преміальні кути */
        overflow: hidden; /* Захищає від виходу фото за межі картки при збільшенні */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); /* Легка елегантна тінь */
        background: var(--header-bg);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Захисний контейнер для фотографій у галереї */
.gallery-img-wrapper {
        width: 100%;
        height: 240px;
        background-color: #f1f3f5; /* Світло-сірий сучасний фон, якщо фото впаде */
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
}

/* Якщо картинка заблокована, замість неї красиво пишемо бренд системи */
.gallery-img-wrapper::before {
        content: "STOCRM WORKSPACE";
        font-size: 13px;
        font-weight: 700;
        color: #cccccc;
        letter-spacing: 1px;
        position: absolute;
        z-index: 1;
}

/* Сама картинка лягає поверх нашої текстової заглушки */
.gallery-img-wrapper img {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        object-fit: cover;
}


.gallery-item img {
        width: 100%;
        height: 240px; /* Трохи збільшено висоту фотографій */
        object-fit: cover;
        display: block;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Плавне збільшення */
}

/* Крутий 3D ефект підйому картки та збільшення картинки всередині */
.gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); /* Глибока м'яка тінь */
}"
".gallery-item:hover img {
        transform: scale(1.06); /* Зображення плавно росте всередині рамки */
}

.gallery-desc {
        padding: 18px 15px;
        font-weight: 700; /* Насичений сучасний шрифт */
        font-size: 15px;
        text-align: center;
        color: var(--main-text);
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        background-color: var(--header-bg);
}

/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ ЧАСТИНИ 2 (ПЛАНШЕТИ ТА СМАРТФОНИ)
   ========================================================================== */
@media (max-width: 768px) {
        .container, .container-small {
                padding: 50px 15px; /* Компактніші відступи на телефонах */
        }

        .section-title {
                margin-bottom: 35px;
        }

        .section-title h2 {
                font-size: 24px; /* Шрифт заголовка адаптується під мобілку */
        }

        .section-title p {
                font-size: 15px;
        }

        .gallery-grid {
                gap: 16px; /* Менші проміжки на мобілках */
        }
        
        .gallery-item img {
                height: 200px; /* Оптимальна висота фото на смартфоні */
        }
}
/* ==========================================================================
   7. СУЧАСНА КОМПАКТНА ФОРМА З КНОПКОЮ ЗБОКУ
   ========================================================================== */
.feedback-section {
        background: #ffffff;
        padding: 80px 0;
}

/* Батьківський контейнер ділить екран: текст зліва, форма справа */
.feedback-box {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr; /* Формі даємо більше місця під лінійку */
        gap: 40px;
        align-items: center;
}

.feedback-info h3 {
        font-size: 28px;
        margin-bottom: 10px;
        font-weight: 800;
        letter-spacing: -0.5px;
        text-transform: uppercase;
        color: var(--main-text);
}

.feedback-info p {
        color: #666666;
        font-size: 15px;
        line-height: 1.5;
}

/* Картка самої форми */
.feedback-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #ffffff;
        padding: 30px;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.02);
}

/* Верхній рядок: Ім'я + Телефон + Кнопка збоку */
.form-row-top {
        display: flex;
        gap: 12px;
        width: 100%;
        align-items: center;
}

/* Ниgeneric рядок: Коротке текстове поле проблеми */
.form-row-bottom {
        width: 100%;
}"
".form-group {
        flex: 1; /* Рівномірно розтягує поля */
}

/* Чисті сучасні інпути */
.form-group input {
        width: 100%;
        padding: 13px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-family: var(--base-font-family);
        font-size: 14px;
        background: #f8fafc;
        color: var(--main-text);
        transition: all 0.2s ease-in-out;
}

.form-group input:focus {
        border-color: var(--accent-color);
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.1);
        outline: none;
}

/* Компактна кнопка, що стоїть збоку в рядку */
.btn-inline {
        padding: 13px 24px;
        font-size: 14px;
        border-radius: 8px;
        height: 45px; /* Ідеально підганяє висоту під інпути */
        white-space: nowrap; /* Забороняє тексту кнопки переноситися */
}

/* ==========================================================================
   АДАПТИВНІСТЬ ДЛЯ КОМПАКТНОЇ ФОРМИ (МОБІЛЬНІ)
   ========================================================================== */
@media (max-width: 992px) {
        .feedback-box {
                grid-template-columns: 1fr; /* Перебудова в стовпчик на планшетах */
                text-align: center;
                gap: 25px;
        }
}

@media (max-width: 600px) {
        /* На маленьких телефонах інлайновий рядок розгортається вертикально */
        .form-row-top {
                flex-direction: column;
                gap: 12px;
        }
        
        .btn-inline {
                width: 100%;
                height: auto;
                padding: 14px;
        }

        .form-group input {
                font-size: 16px !important; /* Анти-зум для iPhone */
        }
}



/* ==========================================================================
   8. СУЧАСНИЙ ПІДВАЛ САЙТУ (PREMIUM FOOTER)
   ========================================================================== */
.main-footer {
        background-color: #141414; /* Глибокий графітовий колір */
        color: #ffffff;
        border-top: 4px solid var(--accent-color);
        margin-top: 60px;
}

.footer-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 40px;
}

.footer-column h4 {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 24px;
        position: relative;
        padding-bottom: 10px;
        color: #ffffff;
}

/* Червона лінія під заголовками в підвалі */
.footer-column h4::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 35px;
        height: 2px;
        background-color: var(--accent-color);
}"
".footer-about-text {
        color: #aaaaaa;
        font-size: 14px;
        line-height: 1.6;
}

.footer-links {
        display: flex;
        flex-direction: column;
        gap: 14px;
}

.footer-links a {
        color: #cccccc;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
}

/* Ефект при наведенні на посилання в підвалі */
.footer-links a:hover {
        color: var(--accent-color);
        padding-left: 6px; /* Плавне зсування вбік */
}

.footer-bottom {
        background-color: #0d0d0d;
        text-align: center;
        padding: 22px 20px;
        border-top: 1px solid #1f1f1f;
        font-size: 14px;
        color: #666666;
        font-weight: 500;
}

/* ==========================================================================
   9. ПОВНА МОБІЛЬНА АДАПТИВНІСТЬ ДЛЯ ВСЬОГО САЙТУ (АНТИ-НАЇЖДЖАННЯ)
   ========================================================================== */
@media (max-width: 768px) {
        /* Форма стає компактною та в один стовпчик */
        .feedback-box {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 30px 20px;
        }

        .feedback-info {
                text-align: center;
        }

        .feedback-info h3 {
                font-size: 22px;
        }

        .feedback-info p {
                font-size: 15px;
        }

        /* Запобігання автозуму полей на iPhone (строго 16px) */
        .form-group input,
        .form-group textarea {
                font-size: 16px !important;
                padding: 12px 15px;
        }

        /* Підвал адаптується під мобілку */
        .footer-container {
                grid-template-columns: 1fr;
                gap: 35px;
                text-align: center;
                padding: 40px 20px;
        }

        .footer-column h4::after {
                left: 50%;
                transform: translateX(-50%); /* Центруємо лінію під заголовком */
        }

        .footer-links a:hover {
                padding-left: 0; /* Вимикаємо зсування на мобілках */
                color: var(--accent-color);
        }
}
/* ==========================================================================
   10. СКРОЛ ФІКС (КЕРУЄТЬСЯ ЧЕРЕЗ JS)
   ========================================================================== */
html {
        scroll-behavior: auto !important; /* Вимикаємо CSS-скрол, тепер працює чистий JS */
}