/* ========== Основні змінні та базові стилі ========== */
:root {
    --primary-color: #1e3a8a;  /* Темно-синій */
    --primary-light: #3b82f6;  /* Світло-синій */
    --secondary-color: #f8fafc; /* Світло-сірий */
    --text-dark: #1f2937;      /* Темно-сірий для тексту */
    --text-muted: #6b7280;     /* Приглушений сірий */
    --bg-white: #ffffff;        /* Білий фон */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --border-radius: 0.75rem;
}

/* Скидання та базові стилі */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Плавний скрол */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #ffffff; /* Максимально білий фон */
    margin-bottom: 0; /* Забезпечуємо однаковий відступ знизу як і зверху */
}

/* Уніфіковані стилі для основних навігаційних секцій */
#about-teleshop,
#advantages {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 0;
    margin-bottom: 0;
    scroll-margin-top: 55px;
}

/* Окремі стилі для секції "Простий Старт" */
#easy-start {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 0;
    margin-bottom: 0;
    scroll-margin-top: 5px;
}

/* Головний заголовок для десктопу */
#easy-start h2 {
    font-size: 2.7rem !important; /* Ще більше збільшено шрифт для десктопу */
    line-height: 1.2 !important;
}

/* Підзаголовок для десктопу */
#easy-start .lead {
    font-size: 1.4rem !important; /* Ще більше збільшено підзаголовок для десктопу */
}

/* Окремі стилі для секції тарифів */
#pricing {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 0;
    margin-bottom: 0;
    scroll-margin-top: -45px; /* Піднято ще на 1см вище (2см нижче) */
}

/* Загальний scroll-margin для всіх секцій */
section {
    scroll-margin-top: 55px;
}

/* Зберігаємо Bootstrap py-5 відступи для інших секцій */
section.py-5:not(#about-teleshop):not(#easy-start):not(#advantages):not(#pricing) {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Специфічні правила для основних секцій */
#about-teleshop,
#advantages {
    scroll-margin-top: 55px !important;
}

/* Окреме правило для секції "Простий Старт" */
#easy-start {
    scroll-margin-top: -45px !important; /* Опущено на 2см як у тарифів */
}

/* Окреме правило для секції тарифів */
#pricing {
    scroll-margin-top: -45px !important; /* Піднято ще на 1см вище (2см нижче) */
}

/* Обнулення відступів для внутрішніх елементів основних секцій */
#about-teleshop .container,
#about-teleshop .container-sm,
#about-teleshop .container-xl,
#about-teleshop .row,
#easy-start .container,
#easy-start .container-sm,
#easy-start .container-xl,
#easy-start .row,
#advantages .container,
#advantages .container-sm,
#advantages .container-xl,
#advantages .row,
#pricing .container,
#pricing .container-sm,
#pricing .container-xl,
#pricing .row {
    margin-top: 0;
    padding-top: 0;
}

/* Обнулення зайвих відступів у заголовках основних секцій */
#about-teleshop h1,
#about-teleshop h2,
#easy-start h1,
#easy-start h2,
#advantages h1,
#advantages h2,
#pricing h1,
#pricing h2 {
    margin-top: 0;
}

/* Helper клас для точного позиціонування скролу */
.scroll-anchor {
    scroll-margin-top: 55px !important;
}

/* Адаптивність для планшетних пристроїв */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Основні навігаційні секції */
    #about-teleshop,
    #advantages {
        scroll-margin-top: 50px !important;
    }
    
    /* Окремі правила для секцій з мінімальним скролом */
    #easy-start {
        padding-bottom: 30px !important; /* Зменшено відстань до наступної секції для планшетів */
        scroll-margin-top: -45px !important; /* Опущено на 2см */
    }
    
    #pricing {
        scroll-margin-top: -45px !important; /* Піднято ще на 1см вище для планшетів */
    }
    
    /* Загальний scroll-margin для всіх секцій */
    section {
        scroll-margin-top: 50px;
    }
    
    .scroll-anchor {
        scroll-margin-top: 50px !important;
    }
    
    /* Зміна порядку у героїчній секції для планшетів */
    #hero .col-md-5 {
        order: 1 !important; /* Текст першим */
    }
    
    #hero .col-md-7 {
        order: 2 !important; /* Слайдер другим */
    }
    
    /* Налаштування блоків ілюстрацій для планшетів */
    #easy-start .illustration-block {
        padding: 16px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    #easy-start .illustration-image {
        margin-bottom: -40px !important; /* Негативний відступ для планшетів */
        position: relative !important;
        z-index: 1 !important;
    }
    
    #easy-start .illustration-image img {
        max-width: 180px !important;
    }
    
    #easy-start .illustration-content {
        text-align: center !important;
        width: 100vw !important; /* Повна ширина екрану для планшетів */
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-top: 50px !important; /* Відступ зверху для планшетів */
        position: relative !important;
        z-index: 2 !important;
        background: white !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    #easy-start .illustration-description {
        max-width: 100% !important; /* Повна ширина для планшетів */
        font-size: 1.1rem !important;
    }
    
    #easy-start .illustration-title {
        font-size: 1.3rem !important; /* Збільшений шрифт для планшетів */
        padding: 0 15px !important;
    }
    
    /* Підняття блоків з кроками на 1.2 см для планшетних пристроїв */
    .steps-item {
        margin-top: -30px !important; /* Підняти кожен крок на 1.2 см вище */
    }
    
    /* Оптимізація анімацій для планшетів */
    .steps-image-container,
    .ai-image,
    .ai-feature-item {
        transform: translateZ(0); /* Апаратне прискорення */
    }
}

/* Адаптивність для мобільних пристроїв */
/* Спеціальні налаштування для великих мобільних екранів (iPhone 15 Pro Max та подібні) */
@media (max-width: 932px) and (min-width: 769px) {
    #about-teleshop {
        scroll-margin-top: 80px !important; /* Висота navbar для великих мобільних */
    }
    
    #advantages {
        scroll-margin-top: 80px !important; /* Висота navbar для великих мобільних */
    }
    
    #easy-start {
        scroll-margin-top: 15px !important; /* Позитивне значення для navbar */
    }
    
    #pricing {
        scroll-margin-top: 80px !important; /* Висота navbar для великих мобільних */
    }
}

/* Додаткові налаштування для iPhone 15 Pro Max у портретному режимі */
@media (max-width: 430px) and (min-height: 900px) {
    #about-teleshop {
        scroll-margin-top: 65px !important; /* Точна висота navbar для iPhone 15 Pro Max */
    }
    
    #advantages {
        scroll-margin-top: 65px !important; /* Точна висота navbar для iPhone 15 Pro Max */
    }
    
    #easy-start {
        scroll-margin-top: 8px !important; /* Мінімальний відступ для navbar */
    }
    
    #pricing {
        scroll-margin-top: 65px !important; /* Точна висота navbar для iPhone 15 Pro Max */
    }
}

/* Спеціальний fix для Safari на iOS */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        #about-teleshop {
            scroll-margin-top: 70px !important; /* Висота navbar + відступ */
        }
        
        #advantages {
            scroll-margin-top: 70px !important; /* Висота navbar + відступ */
        }
        
        #easy-start {
            scroll-margin-top: 10px !important; /* Позитивне значення для компенсації navbar */
        }
        
        #pricing {
            scroll-margin-top: 70px !important; /* Висота navbar + відступ */
        }
    }
}

@media (max-width: 768px) {
    /* Основні навігаційні секції */
    #about-teleshop {
        padding-top: 70px;
        padding-bottom: 70px;
        scroll-margin-top: -156px !important; /* Опущено ще на 3см нижче (-43px - 113px = -156px) */
    }
    
    #advantages {
        padding-top: 30px !important; /* Зменшено верхній відступ для компактності */
        padding-bottom: 30px !important; /* Зменшено нижній відступ для компактності */
        scroll-margin-top: -156px !important; /* Опущено ще на 3см нижче (-43px - 113px = -156px) */
        margin-top: -76px !important; /* Підняття блоку на 2 см вгору */
    }
    
    /* Окремі правила для секцій з мінімальним скролом на мобільних */
    #easy-start {
        padding-top: 110px !important; /* Збільшений відступ на 3см щоб текст був чітко під зображенням */
        padding-bottom: 20px !important; /* Зменшено на 2см для меншої відстані до наступної секції */
        scroll-margin-top: -329px !important; /* Опущено ще на 3см нижче (-216px - 113px = -329px) */
        margin-top: 0 !important;
    }
    
    /* Налаштування заголовка секції на мобільних */
    #easy-start h2 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        font-size: 2.3rem !important; /* Ще більше збільшено шрифт головного заголовка */
        line-height: 1.3 !important;
    }
    
    /* Налаштування підзаголовка на мобільних */
    #easy-start .lead {
        font-size: 1.25rem !important; /* Ще більше збільшено шрифт підзаголовка */
        margin-bottom: 20px !important;
    }
    
    /* Мобільні налаштування для секції тарифів */
    #pricing {
        scroll-margin-top: -269px !important; /* Опущено ще на 3см нижче (-156px - 113px = -269px) */
    }
    
    /* Налаштування відступів hero-секції на мобільних */
    #hero {
        margin-bottom: 0 !important;
        padding-bottom: 50px !important; /* Збільшений відступ між зображенням і текстом */
        padding-top: 60px !important;
    }
    
    /* Налаштування контейнера секції easy-start на мобільних */
    #easy-start .container-xl {
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 0 !important; /* Прибрані бокові відступи контейнера */
        padding-right: 0 !important;
        overflow: visible !important;
    }
    
    /* Налаштування блоку з заголовком на мобільних */
    #easy-start .features-header-reduced-spacing {
        margin-bottom: 20px !important; /* Невеликий відступ до ілюстрацій */
        padding-top: 0 !important;
    }
    
    /* Налаштування row елементів у easy-start */
    #easy-start .row {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important; /* Прибрані бокові відступи рядків */
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Виправлення блоків ілюстрацій на мобільних */
    #easy-start .illustration-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 0 0 0 !important; /* Прибрані бокові відступи */
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important; /* Повна ширина блоку */
        margin: 0 !important;
        gap: 0 !important;
        overflow: visible !important; /* Дозвіл виходу за межі */
        position: relative !important;
    }
    
    /* Зображення в блоках ілюстрацій */
    #easy-start .illustration-image {
        width: 100% !important;
        margin-bottom: -50px !important; /* Негативний відступ - підняти текст на 2см вище */
        margin-top: -38px !important; /* Підняти зображення на 1.5см вище */
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    #easy-start .illustration-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 200px !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        vertical-align: bottom !important; /* Прибирання зайвих відступів під зображенням */
    }
    
    /* Image wrapper налаштування */
    #easy-start .image-wrapper {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        line-height: 0 !important; /* Прибирання зайвих відступів */
    }
    
    /* Контент блоків ілюстрацій */
    #easy-start .illustration-content {
        margin-top: -20px !important; /* Додатковий негативний відступ для підняття тексту до зображень */
        padding-top: 0px !important; /* Ще зменшено на 22px - тепер текст максимально близько до зображень */
        width: 100vw !important; /* Повна ширина екрану */
        margin-left: calc(-50vw + 50%) !important; /* Розширення до країв екрану */
        margin-right: calc(-50vw + 50%) !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        background: white !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    #easy-start .illustration-title {
        margin-top: 0 !important;
        margin-bottom: 8px !important; /* Відступ між заголовком і описом */
        font-size: 1.4rem !important; /* Збільшений шрифт для повної ширини */
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
        padding: 0 15px !important; /* Внутрішні відступи */
    }
    
    #easy-start .illustration-description {
        margin: 0 !important;
        padding: 0 15px !important; /* Внутрішні відступи */
        font-size: 1.15rem !important; /* Збільшений шрифт для повної ширини */
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important; /* Повна ширина екрану */
    }
    
    /* Bootstrap колонки на мобільних */
    #easy-start .col-12.col-sm-6.col-lg-3 {
        width: 100% !important;
        margin-bottom: 40px !important; /* Збільшений відступ між блоками для нових стилів */
        padding-left: 0 !important; /* Прибрані відступи для повної ширини */
        padding-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important; /* Вирівнювання по верху */
        overflow: visible !important; /* Дозвіл виходу за межі */
    }
    
    /* Обнулення зайвих відступів між блоками */
    #easy-start .row.g-4 {
        row-gap: 30px !important; /* Збільшений відступ між рядами блоків для нових стилів */
        margin-left: 0 !important;
        margin-right: 0 !important;
        column-gap: 0 !important; /* Прибрання відступів між колонками */
    }
    
    /* Підняття 2, 3, 4 картинки на 2см вище в мобільній версії */
    #easy-start .row.g-4 .col-12:nth-child(2),
    #easy-start .row.g-4 .col-12:nth-child(3),
    #easy-start .row.g-4 .col-12:nth-child(4) {
        margin-top: -50px !important; /* Підняти 2, 3, 4 блоки на 2см вище */
    }
    
    /* Прибирання можливих проблемних стилів */
    #easy-start .illustration-block,
    #easy-start .illustration-image,
    #easy-start .illustration-content {
        position: relative !important;
        z-index: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Повне обнулення відступів для максимального зближення */
    #easy-start .illustration-block * {
        border: none !important;
        outline: none !important;
    }
    
    #easy-start .illustration-image .image-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Перевизначення Bootstrap класів */
    #easy-start .mb-0 {
        margin-bottom: 0 !important;
    }
    
    #easy-start .mb-2 {
        margin-bottom: 2px !important;
    }
    
    /* Обнулення Bootstrap flex стилів що можуть заважати */
    #easy-start [class*="col-"] {
        display: block !important;
    }
    
    #pricing {
        padding-top: 70px;
        padding-bottom: 70px;
        scroll-margin-top: -50px !important; /* Опущено на 5px в мобільній версії */
    }
    
    /* Загальний scroll-margin для всіх секцій */
    section {
        scroll-margin-top: 40px;
    }
    
    /* Зберігаємо Bootstrap py-5 відступи для інших секцій на мобільних */
    section.py-5:not(#about-teleshop):not(#easy-start):not(#advantages):not(#pricing) {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    
    .scroll-anchor {
        scroll-margin-top: 40px !important;
    }
    
    /* Підняття блоків з кроками на 1.2 см в мобільній версії */
    .steps-item {
        margin-top: -30px !important; /* Підняти кожен крок на 1.2 см вище */
    }
    
    /* Оптимізація анімацій для мобільних */
    .steps-image-container,
    .ai-image,
    .ai-feature-item {
        transform: translateZ(0); /* Апаратне прискорення */
    }
}

/* Додаткові налаштування для дуже маленьких екранів */
@media (max-width: 576px) {
    /* Scroll налаштування для малих екранів */
    #about-teleshop {
        scroll-margin-top: -166px !important; /* Опущено ще на 3см нижче (-53px - 113px = -166px) */
    }
    
    #advantages {
        scroll-margin-top: -166px !important; /* Опущено ще на 3см нижче (-53px - 113px = -166px) */
    }
    
    #easy-start {
        scroll-margin-top: -334px !important; /* Опущено ще на 3см нижче (-221px - 113px = -334px) */
    }
    
    #pricing {
        scroll-margin-top: -279px !important; /* Опущено ще на 3см нижче (-166px - 113px = -279px) */
    }
    
    /* Збільшений шрифт для заголовка на маленьких телефонах */
    #easy-start h2 {
        font-size: 1.8rem !important; /* Збільшено для малих екранів */
        margin-bottom: 12px !important;
    }
    
    /* Збільшений підзаголовок */
    #easy-start .lead {
        font-size: 1.05rem !important; /* Збільшено для малих екранів */
        margin-bottom: 18px !important;
    }
    
    /* Збільшений відступ зверху секції для маленьких екранів */
    #easy-start {
        padding-top: 100px !important; /* Достатній відступ для маленьких екранів */
        padding-bottom: 15px !important; /* Мінімальний відступ для компактності */
        scroll-margin-top: -399px !important; /* Опущено ще на 3см нижче (-286px - 113px = -399px) */
    }
    
    /* Додаткові стилі для секції advantages на малих екранах */
    #advantages {
        padding-top: 15px !important; /* Мінімальний верхній відступ */
        padding-bottom: 20px !important; /* Мінімальний нижній відступ */
        margin-top: -76px !important; /* Підняття блоку на 2 см вгору */
        scroll-margin-top: -136px !important; /* Опущено ще на 3см нижче (-23px - 113px = -136px) */
    }
    
    /* Додаткові стилі для секції about-teleshop на малих екранах */
    #about-teleshop {
        scroll-margin-top: -136px !important; /* Опущено ще на 3см нижче (-23px - 113px = -136px) */
    }
    
    /* Додаткові стилі для секції pricing на малих екранах */
    #pricing {
        scroll-margin-top: -334px !important; /* Опущено ще на 3см нижче (-221px - 113px = -334px) */
    }
    
    /* Додаткові налаштування блоків для маленьких екранів */
    #easy-start .illustration-block {
        padding: 16px 8px !important;
    }
    
    #easy-start .illustration-image {
        margin-bottom: -60px !important; /* Ще більш негативний відступ для маленьких екранів */
        margin-top: -38px !important; /* Підняти зображення на 1.5см вище для маленьких екранів */
    }
    
    #easy-start .illustration-image img {
        max-width: 180px !important;
    }
    
    #easy-start .illustration-title {
        font-size: 1.25rem !important; /* Збільшений шрифт */
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
        padding: 0 10px !important; /* Менші внутрішні відступи */
    }
    
    #easy-start .illustration-description {
        font-size: 1.05rem !important;
        max-width: 100% !important; /* Повна ширина для маленьких екранів */
        padding: 0 10px !important; /* Менші внутрішні відступи */
    }
    
    /* Додаткові налаштування для контенту на маленьких екранах */
    #easy-start .illustration-content {
        margin-top: -20px !important; /* Додатковий негативний відступ для підняття тексту до зображень */
        padding-top: 0px !important; /* Ще максимально зменшено - текст максимально близько до зображень */
    }
    
    /* Підняття 2, 3, 4 картинки на 2см вище для дуже маленьких екранів */
    #easy-start .row.g-4 .col-12:nth-child(2),
    #easy-start .row.g-4 .col-12:nth-child(3),
    #easy-start .row.g-4 .col-12:nth-child(4) {
        margin-top: -50px !important; /* Підняти 2, 3, 4 блоки на 2см вище для маленьких екранів */
    }
    
    /* Підняття блоків з кроками на 1.2 см для дуже маленьких екранів */
    .steps-item {
        margin-top: -30px !important; /* Підняти кожен крок на 1.2 см вище */
    }
    
    /* Додаткові оптимізації анімацій для мобільних */
    .steps-image-container,
    .ai-image,
    .ai-feature-item {
        transform: translateZ(0); /* Апаратне прискорення */
    }
}

/* Слайдер демонстрації - базові стилі */
.demo-slider {
    display: none; /* Приховано за замовчуванням */
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.demo-slider-container {
    overflow: hidden;
    border-radius: 15px;
    position: relative;
}

.demo-slider-wrapper {
    display: flex;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

.demo-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
}

/* Навігаційні кнопки */
.demo-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.demo-slider-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.demo-slider-prev {
    left: 10px;
}

.demo-slider-next {
    right: 10px;
}

.demo-slider-btn i {
    font-size: 18px;
    color: #333;
}

/* Індикатори точок */
.demo-slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}

.demo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.demo-dot.active {
    background: #007bff;
    transform: scale(1.2);
}

.demo-dot:hover {
    background: #007bff;
    opacity: 0.7;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 768px) {
    /* Зміна порядку у героїчній секції - спочатку текст, потім слайдер */
    #hero .col-md-5 {
        order: 1 !important; /* Текст першим */
    }
    
    #hero .col-md-7 {
        order: 2 !important; /* Слайдер другим */
    }
    
    /* Приховати стандартний grid та показати слайдер */
    .demo-grid {
        display: none !important;
    }
    
    .demo-slider {
        display: block !important;
    }
    
    /* Збільшені кнопки для сенсорних екранів */
    .demo-slider-btn {
        width: 50px;
        height: 50px;
    }
    
    .demo-slider-btn i {
        font-size: 20px;
    }
    
    /* Збільшені точки для сенсорних екранів */
    .demo-dot {
        width: 14px;
        height: 14px;
    }
    
    /* Відступи для мобільних */
    .demo-slide {
        padding: 0 10px;
    }
}

@media (max-width: 576px) {
    /* Зміна порядку у героїчній секції для дуже маленьких екранів */
    #hero .col-md-5 {
        order: 1 !important; /* Текст першим */
    }
    
    #hero .col-md-7 {
        order: 2 !important; /* Слайдер другим */
    }
    
    /* Ще більші кнопки для маленьких екранів */
    .demo-slider-btn {
        width: 40px;
        height: 40px;
    }
    
    .demo-slider-btn i {
        font-size: 16px;
    }
    
    .demo-slider-prev {
        left: 5px;
    }
    
    .demo-slider-next {
        right: 5px;
    }
    
    /* Менші відступи */
    .demo-slide {
        padding: 0 5px;
    }
}

/* Глобальне прибирання рамок з усіх зображень */
img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

img:hover,
img:focus,
img:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Спеціальне прибирання рамок для Bootstrap img-fluid */
.img-fluid {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.img-fluid:hover,
.img-fluid:focus,
.img-fluid:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Додаткове прибирання можливих браузерних стилів */
* {
    -webkit-tap-highlight-color: transparent !important;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Спеціальне прибирання всіх можливих рамок для веб-версії */
.web-image,
.web-image-container,
[src*="img-21.png"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-clip: border-box !important;
    border-style: none !important;
    border-width: 0 !important;
    border-color: transparent !important;
}

.web-image:before,
.web-image:after,
.web-image-container:before,
.web-image-container:after {
    display: none !important;
}

/* Прибирання можливих Bootstrap рамок */
.web-image.img-thumbnail,
.web-image.img-fluid.img-thumbnail {
    border: none !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Стилі для заголовків з сучасним шрифтом */
h1, h2, h3, h4, h5, h6, .display-4 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lead {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Bootstrap кастомізація */
.text-primary {
    color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.bg-light {
    background-color: var(--secondary-color) !important;
}

/* ========== Header / Навігація ========== */
.navbar {
    padding: 0.5rem 0; /* Зменшено з 1rem до 0.5rem */
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
    z-index: 1050; /* Забезпечуємо що навбар завжди зверху */
    will-change: transform; /* Оптимізація для анімацій */
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color) !important;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    transform: scale(1.05);
}

.nav-link {
    font-weight: 500;
    color: var(--text-dark) !important;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 80%;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* Покращені стилі для навігації */
.nav-link {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    padding: 0.5rem 1rem !important; /* Зменшено з 0.75rem до 0.5rem */
}

/* Стилі для чорної CTA кнопки */
.btn-dark {
    background-color: #000000;
    border-color: #000000;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== Покращення навігації для всіх пристроїв ========== */

/* Покращена анімація для мобільного меню */
.navbar-collapse {
    transition: all 0.3s ease-in-out;
    /* Додаємо стилі для кращого скроллу */
    max-height: 80vh; /* Обмежуємо висоту мобільного меню */
    overflow-y: auto; /* Додаємо вертикальний скрол при потребі */
    overflow-x: hidden; /* Приховуємо горизонтальний скрол */
    -webkit-overflow-scrolling: touch; /* Покращений скрол для iOS */
    overscroll-behavior: contain; /* Запобігаємо скролу батьківського елемента */
    scroll-behavior: smooth; /* Плавний скрол всередині меню */
}

.navbar-collapse.show-mobile {
    animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 80vh;
    }
}

/* Стилі для touch-пристроїв */
@media (hover: none) and (pointer: coarse) {
    .nav-link:hover::after {
        width: 0; /* Відключаємо hover ефекти на touch-пристроях */
    }
    
    .nav-link:active {
        color: var(--primary-color) !important;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 6px;
    }
    
    /* Покращений скрол для touch-пристроїв */
    .navbar-collapse {
        scroll-padding-top: 20px; /* Відступ при скролі до елемента */
        scroll-snap-type: y proximity; /* Додаємо snap-скрол */
    }
    
    .nav-item {
        scroll-snap-align: start; /* Вирівнювання при snap-скролі */
    }
}

/* Адаптивні стилі для навігації */
@media (max-width: 992px) {
    .navbar {
        padding: 0.25rem 0;
    }
    
    .navbar-nav {
        background-color: rgba(255, 255, 255, 0.98);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        /* Покращення для скроллу */
        max-height: 70vh; /* Обмежуємо висоту навігації */
        overflow-y: auto; /* Додаємо скрол при потребі */
        -webkit-overflow-scrolling: touch; /* Покращений скрол для iOS */
        overscroll-behavior: contain; /* Запобігаємо bounce ефекту */
    }
    
    .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 6px;
        margin-bottom: 0.25rem;
        /* Покращення для touch */
        min-height: 44px; /* Мінімальна висота для touch */
        display: flex;
        align-items: center;
    }
    
    .nav-link:active,
    .nav-link:focus {
        background-color: rgba(0, 0, 0, 0.05);
        outline: none; /* Прибираємо стандартний outline */
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.25rem 0;
    }
    
    .navbar-brand img {
        height: 35px;
    }
    
    .btn-dark {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    /* Додаткові покращення для планшетів */
    .navbar-collapse {
        max-height: 60vh; /* Менша висота для планшетів */
    }
    
    .navbar-nav {
        max-height: 50vh;
        padding: 0.8rem; /* Менший padding */
    }
}

@media (max-width: 576px) {
    .navbar {
        padding: 0.2rem 0;
    }
    
    .navbar-brand img {
        height: 30px;
    }
    
    .btn-dark {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .nav-link {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem !important;
        min-height: 42px; /* Трохи менша висота для мобільних */
    }
    
    /* Оптимізація для маленьких екранів */
    .navbar-collapse {
        max-height: 50vh; /* Ще менша висота для мобільних */
    }
    
    .navbar-nav {
        max-height: 40vh;
        padding: 0.6rem;
    }
}

/* Покращення для iOS Safari */
@supports (-webkit-touch-callout: none) {
    .navbar {
        -webkit-backdrop-filter: blur(10px);
    }
    
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Фікс для скроллу в мобільному меню на iOS */
    .navbar-collapse {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0); /* Апаратне прискорення */
    }
    
    .navbar-nav {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
    }
}

/* Фікс для sticky navbar на мобільних пристроях */
@media (max-width: 992px) and (orientation: landscape) {
    .navbar {
        padding: 0.1rem 0;
    }
    
    .navbar-brand img {
        height: 28px;
    }
    
    /* Менша висота для landscape орієнтації */
    .navbar-collapse {
        max-height: 40vh;
    }
    
    .navbar-nav {
        max-height: 30vh;
    }
}

/* Глобальні покращення для скролу */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Додаткові покращення */
    scroll-padding-top: 80px; /* Оптимальний відступ для ноутбуків при скролі до якірних посилань */
}

/* Адаптивне налаштування глобального scroll-padding */
@media (max-width: 992px) {
    html {
        scroll-padding-top: 70px; /* Оптимізований відступ для планшетів */
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 60px; /* Оптимізований відступ для мобільних */
    }
}

@media (max-width: 576px) {
    html {
        scroll-padding-top: 50px; /* Мінімальний відступ для малих екранів */
    }
}

/* Спеціальні налаштування для всіх секцій з якірними посиланнями */
#about-teleshop, #easy-start, #advantages, #pricing, #faq-new {
    scroll-margin-top: 80px; /* Оптимальний відступ для ноутбуків */
}

/* Спеціальні налаштування для секції тарифів */
#pricing {
    scroll-margin-top: 90px; /* Оптимальний відступ для секції тарифів на ноутбуках */
    padding-top: 40px; /* Зменшений padding для кращого позиціонування */
}

/* Точне позиціонування заголовка секції тарифів */
#pricing h2 {
    margin-top: 0; /* Прибираємо зайвий відступ заголовка */
    padding-top: 0; /* Прибираємо зайвий padding заголовка */
    line-height: 1.2; /* Оптимізуємо висоту рядка */
}

/* Оптимізація для всіх заголовків в секціях з якірними посиланнями */
#about-teleshop h2, #easy-start h2, #advantages h2, #pricing h2, #faq-new h2 {
    margin-top: 0; /* Прибираємо верхній відступ заголовків для точнішого позиціонування */
    scroll-margin-top: inherit; /* Наслідуємо scroll-margin від батьківської секції */
}

/* Додаткові оптимізації для плавного скроллу */
#about-teleshop, #easy-start, #advantages, #pricing {
    position: relative; /* Забезпечуємо правильне позиціонування для скроллу */
    scroll-behavior: smooth; /* Плавний скрол всередині секції */
}

/* Покращення для iOS та інших touch-пристроїв */
@supports (-webkit-overflow-scrolling: touch) {
    #about-teleshop, #easy-start, #advantages, #pricing {
        -webkit-overflow-scrolling: touch; /* Плавний скрол на iOS */
    }
}

/* Оптимізація для reduced motion */
@media (prefers-reduced-motion: reduce) {
    #about-teleshop, #easy-start, #advantages, #pricing {
        scroll-behavior: auto; /* Відключаємо анімації для користувачів з reduced motion */
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Зменшуємо відступ знизу у попередньої секції для кращого flow */
#try-free {
    margin-bottom: 0; /* Прибираємо зайвий відступ знизу */
}

.try-free-section {
    margin-bottom: 0 !important; /* Прибираємо зайвий відступ знизу */
}

@media (max-width: 992px) {
    #about-teleshop, #easy-start, #advantages, #pricing, #faq-new {
        scroll-margin-top: 70px; /* Оптимізований відступ для планшетів */
    }
    
    #pricing {
        scroll-margin-top: 75px; /* Оптимізований відступ для секції тарифів на планшетах */
        padding-top: 50px; /* Оптимізований padding для планшетів */
    }
}

@media (max-width: 768px) {
    #about-teleshop, #easy-start, #advantages, #pricing, #faq-new {
        scroll-margin-top: 60px; /* Оптимізований відступ для мобільних пристроїв */
    }
    
    #pricing {
        scroll-margin-top: 65px; /* Оптимізований відступ для секції тарифів на мобільних */
        padding-top: 35px; /* Оптимізований padding для мобільних */
    }
}

@media (max-width: 576px) {
    #about-teleshop, #easy-start, #advantages, #pricing, #faq-new {
        scroll-margin-top: 50px; /* Мінімальний відступ для малих мобільних екранів */
    }
    
    #pricing {
        scroll-margin-top: 55px; /* Мінімальний відступ для секції тарифів на малих екранах */
        padding-top: 25px; /* Оптимізований padding для малих екранів */
    }
}

/* Покращення для скролу на iOS */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Фікс для viewport на мобільних */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Фікс для viewport на мобільних пристроях */
@media screen and (max-width: 992px) {
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* Фікс для скролу в Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html {
        scroll-behavior: auto; /* Відключаємо нативний smooth scroll в Safari */
    }
    
    /* Додаємо власну реалізацію через JS */
}

/* Покращення для Microsoft Edge та IE */
@supports (-ms-ime-align: auto) {
    html {
        scroll-behavior: auto;
    }
}

/* Покращення для Firefox */
@-moz-document url-prefix() {
    html {
        scroll-behavior: smooth;
    }
    
    .navbar-collapse {
        scrollbar-width: thin; /* Тонкий скролбар у Firefox */
        scrollbar-color: var(--primary-color) transparent;
    }
}

/* Prevent horizontal scroll */
body, html {
    overflow-x: hidden;
}

/* Navbar shadow animation */
.navbar.shadow {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Покращення для скролу в модальних вікнах Bootstrap */
.modal-open {
    overflow: hidden;
}

/* Фікс для скролу на Android */
@media screen and (max-width: 992px) {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateZ(0); /* Аппаратне прискорення */
    }
    
    /* Додаткові стилі для кращого скроллу на Android */
    .navbar-collapse {
        will-change: transform, opacity; /* Оптимізація анімацій */
    }
}

/* Кастомний скролбар для меню */
.navbar-nav::-webkit-scrollbar {
    width: 4px;
}

.navbar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.navbar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* Додаткові стилі для покращення скроллу */
.navbar-collapse::-webkit-scrollbar {
    width: 3px;
}

.navbar-collapse::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-collapse::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 1.5px;
}

.navbar-collapse::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Стилі для плавного скроллу в усіх елементах */
*, *::before, *::after {
    scroll-behavior: inherit;
}

/* Покращення для елементів з overflow */
.overflow-auto,
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Спеціальні стилі для touch-пристроїв */
@media (hover: none) and (pointer: coarse) {
    /* Збільшуємо висоту touch-елементів */
    .nav-link {
        min-height: 48px !important;
        touch-action: manipulation; /* Оптимізація touch-подій */
    }
    
    /* Покращуємо скрол для touch */
    .navbar-collapse {
        touch-action: pan-y; /* Дозволяємо тільки вертикальний скрол */
    }
    
    .navbar-nav {
        touch-action: pan-y;
    }
}

/* Фікси для різних браузерів */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari */
    .navbar-collapse {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@supports (-moz-appearance: none) {
    /* Firefox */
    .navbar-collapse {
        scroll-snap-type: none; /* Відключаємо scroll snap у Firefox */
    }
}

/* Покращення для Windows/Edge */
@supports (-ms-overflow-style: none) {
    .navbar-nav {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

/* Стилі для кнопки з переливами в герой-секції */
.btn-dark-gradient {
    background: linear-gradient(135deg, #000000 0%, #2c2c2c 50%, #000000 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 14px !important; /* Збільшено заокруглення */
    font-family: 'Inter', sans-serif;
    font-weight: 700 !important; /* Збільшено жирність */
    font-size: 1.2rem !important; /* Збільшено шрифт */
    letter-spacing: -0.01em;
    color: white !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3) !important; /* Збільшена тінь */
    padding: 0.8rem 2.2rem !important; /* Збільшений padding */
    min-width: 220px; /* Мінімальна ширина */
}

.btn-dark-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s;
}

.btn-dark-gradient:hover {
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
    color: white !important;
}

.btn-dark-gradient:hover::before {
    left: 100%;
}

.btn-dark-gradient:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ========== Герой-секція: Текстовий блок ========== */
.hero-text-content {
    padding-left: 1.5rem; /* Зменшено для компактності */
    padding-right: 0.5rem; /* Зменшено правий відступ для розширення */
    padding-top: 33px; /* Піднято на 0.7см (27px) */
    max-width: 100%; /* Використовуємо всю доступну ширину колонки */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центруємо по вертикалі */
    min-height: 480px; /* Вирівняно з висотою слайдів */
}

.hero-main-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 3.6rem; /* Ще більше збільшено для привернення уваги */
    line-height: 1.15; /* Зменшено з 1.2 до 1.15 */
    color: var(--text-dark);
    margin-bottom: 0.8rem; /* Зменшено з 1rem до 0.8rem */
    margin-top: 0; /* Додано для мінімального верхнього відступу */
    letter-spacing: -0.02em;
    opacity: 0;
    animation: slideInFromLeft 1s ease 0.3s forwards;
}

.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem; /* Ще більше збільшено для кращої читаності */
    line-height: 1.5; /* Зменшено з 1.6 до 1.5 */
    color: var(--text-muted);
    margin-bottom: 1.3rem; /* Зменшено з 1.5rem до 1.3rem */
    letter-spacing: -0.01em;
    opacity: 0;
    animation: slideInFromLeft 1s ease 0.6s forwards;
}

/* Збільшений шрифт для hero підзаголовка на цифровій сторінці */
.digital-page .hero-subtitle {
    font-size: 1.6rem !important; /* Збільшено для цифрової сторінки */
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
}

/* Планшетні стилі для цифрової сторінки */
@media (max-width: 992px) {
    .digital-page .hero-subtitle {
        font-size: 1.5rem !important; /* Збільшено для планшетів */
    }
}

.hero-cta-container {
    opacity: 0;
    animation: slideInFromLeft 1s ease 0.9s forwards;
}

/* ========== Герой-секція: Слайдер ========== */
.hero-slider-container {
    margin-top: 20px; /* Зменшено відступ для кращого вирівнювання з текстом */
    padding: 0.5rem 1rem; /* Зменшено верхній padding */
    width: 100%;
    max-width: 90%; /* Оптимальна ширина для компактного відображення */
    margin-left: auto; /* Автоматичне центрування */
    margin-right: auto; /* Автоматичне центрування */
    background: #ffffff !important; /* Білий фон контейнера */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
    display: flex;
    align-items: center; /* Вирівнювання по центру */
    min-height: 480px; /* Вирівняно з висотою слайдів */
}

.hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #ffffff !important; /* Білий фон */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
    transition: all 0.3s ease;
}

.hero-slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 600%; /* 6 слайдів */
    will-change: transform; /* Оптимізація для анімацій */
    transform: translateX(0%); /* Початкова позиція */
    background: #ffffff !important; /* Білий фон треку слайдера */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
}

.hero-slide {
    width: calc(100% / 6); /* 1/6 ширини (6 слайдів) */
    flex: 0 0 auto; /* Запобігає розтягуванню/стискуванню слайдів */
    padding: 0.6rem; /* Зменшено padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Вирівнювання зверху */
    text-align: center;
    min-height: 480px; /* Збільшено для кращого розміщення збільшеного тексту */
    background: #ffffff !important; /* Білий фон слайдів */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(30px);
    box-sizing: border-box; /* Включає padding у ширину */
}

.hero-slide.active {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide-image {
    margin-bottom: 0.5rem; /* Зменшено відступ для меншої відстані до тексту */
    width: 100%;
    max-width: 100%;
    height: 380px; /* Зменшено для компактності слайдера */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important; /* Білий фон контейнера картинки */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden; /* Захищаємо від виходу за межі */
}

.hero-slide-image img {
    width: 100%;
    height: 340px !important; /* Зменшено для компактності слайдера */
    max-height: 340px !important;
    object-fit: contain;
    object-position: center;
    background: #ffffff !important; /* Білий фон як на головній сторінці */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
    box-shadow: none !important; /* Видаляємо тіні */
    border: none !important; /* Видаляємо рамки */
    outline: none !important; /* Видаляємо outline */
    transition: all 0.4s ease;
    transform: none !important; /* Скидаємо всі трансформації для однаковості */
}



/* Уніфіковані стилі для всіх нових зображень слайдера */
.hero-slide-image img[src*="img-2.png"],
.hero-slide-image img[src*="img-3.png"],
.hero-slide-image img[src*="img-4.png"],
.hero-slide-image img[src*="img-11.png"],
.hero-slide-image img[src*="img-12.png"],
.hero-slide-image img[src*="img-31.png"] {
    height: 340px !important; /* Зменшено для компактності слайдера */
    max-height: 340px !important;
    width: auto !important; /* Зберігаємо пропорції */
    margin: 8px auto !important; /* Зменшено відступи для меншої відстані до тексту */
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff !important; /* Білий фон */
    background-color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Окремий стиль для img-21.png з прозорим фоном */
.hero-slide-image img[src*="img-21.png"] {
    height: 340px !important;
    max-height: 340px !important;
    width: auto !important;
    margin: 8px auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important; /* Прозорий фон для веб-версії */
    background-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Забезпечуємо білий фон для слайдів з ноутбуком */
.hero-slide.laptop-slide {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.hero-slide.laptop-slide .hero-slide-image {
    background: #ffffff !important;
    background-color: #ffffff !important;
    text-align: center;
    padding: 10px 0;
}

/* Додатковий селектор для слайдів з мобільним веб-інтерфейсом */
.hero-slide:has(img[alt*="Мобільний веб-інтерфейс"]) {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.hero-slide:has(img[alt*="Мобільний веб-інтерфейс"]) .hero-slide-image {
    background: #ffffff !important;
    background-color: #ffffff !important;
    text-align: center;
    padding: 10px 0;
}

.hero-slide-image:hover img {
    transform: scale(1.02);
}

.hero-slide-content {
    max-width: 100%;
    min-height: 120px; /* Мінімальна висота для вирівнювання */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.2s;
}

.hero-slide.active .hero-slide-content {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.85rem; /* Збільшено ще більше для кращої видимості */
    color: var(--text-dark);
    margin-bottom: 0.8rem; /* Оптимізовано для компактності */
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.2; /* Компактна висота рядка */
}

.hero-slide-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem; /* Збільшено ще більше для кращої читаності */
    line-height: 1.4; /* Оптимальна висота рядка */
    color: var(--text-muted);
    margin: 0;
    letter-spacing: -0.01em;
    max-width: 100%; /* Обмеження ширини для компактності */
    text-align: center;
}

/* Навігаційні стрілки для герой-слайдера */
.hero-slider-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95); /* Більш прозорий білий */
    border: 1px solid #e5e7eb; /* Світла обводка замість тіні */
    border-radius: 50%;
    width: 36px; /* Зменшено з 50px до 36px */
    height: 36px; /* Зменшено з 50px до 36px */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 0.8;
}

.hero-slider-arrow:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

.hero-slider-arrow-left {
    left: 15px;
}

.hero-slider-arrow-right {
    right: 15px;
}

.hero-slider-arrow i {
    font-size: 1rem; /* Зменшено з 1.2rem до 1rem */
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.hero-slider-arrow:hover i {
    color: white;
}

/* Адаптивність герой-секції */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 80px; /* Збільшено на 50px для мобільних */
        margin-bottom: 30px; /* Додано відступ 1см до наступної секції для планшетів */
    }
    
    .hero-section .row {
        min-height: 40vh !important; /* Зменшено висоту для компактності на планшетах */
    }
    
    .hero-text-content {
        padding-left: 2rem;
        padding-right: 0.5rem; /* Зменшено правий відступ */
        padding-top: 23px; /* Піднято на 0.7см (27px) для планшетів */
        max-width: 100%;
        text-align: center;
        margin-bottom: 1rem; /* Зменшено з 2rem до 1rem */
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 320px; /* Вирівняно з висотою слайдів для планшетів */
    }
    
    .hero-main-title {
        font-size: 2.8rem; /* Ще більше збільшено для планшетів */
        margin-bottom: 1.2rem; /* Зменшено з 1.5rem */
    }
    
    .hero-subtitle {
        font-size: 1.3rem; /* Ще більше збільшено підзаголовок для планшетів */
        margin-bottom: 1.5rem; /* Зменшено з 2rem */
    }
    
    .hero-slider-container {
        margin-top: 30px; /* Відступ зверху для планшетів */
        padding: 0.25rem 0.5rem; /* Ще менше padding на мобільних */
        max-width: 95%; /* Невелике обмеження ширини для планшетів */
        min-height: 320px; /* Вирівняно з висотою слайдів */
    }
    
    .hero-slide {
        min-height: 320px; /* Збільшено для кращого розміщення тексту на планшетах */
        padding: 0.25rem;
    }
    
    .hero-slide-image {
        margin-bottom: 0.8rem; /* Зменшено відступ для меншої відстані до тексту */
        height: 320px; /* Зменшено для компактності на планшетах */
        background: #ffffff !important; /* Білий фон контейнера картинки */
        background-color: #ffffff !important; /* Дублюємо для впевненості */
    }
    
    .hero-slide-image img {
        height: 300px !important; /* Зменшено для компактності на планшетах */
        max-height: 300px !important;
        width: 100%;
        background: #ffffff !important; /* Білий фон як на головній сторінці */
        background-color: #ffffff !important; /* Дублюємо для впевненості */
        box-shadow: none !important; /* Видаляємо тіні */
        border: none !important; /* Видаляємо рамки */
        outline: none !important; /* Видаляємо outline */
        transform: none !important; /* Скидаємо всі трансформації */
    }

    /* Уніфіковані стилі для всіх зображень слайдера на планшетах */
    .hero-slide-image img[src*="img-2.png"],
    .hero-slide-image img[src*="img-3.png"],
    .hero-slide-image img[src*="img-4.png"],
    .hero-slide-image img[src*="img-7.png"],
    .hero-slide-image img[src*="img-11.png"],
    .hero-slide-image img[src*="img-12.png"],
    .hero-slide-image img[src*="img-31.png"] {
        height: 300px !important; /* Зменшено для компактності на планшетах */
        max-height: 300px !important;
        width: auto !important;
        margin: 8px auto !important; /* Зменшено відступи для меншої відстані до тексту */
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }
    
    .hero-slide-title {
        font-size: 1.65rem; /* Збільшено для планшетів */
        margin-bottom: 0.7rem; /* Компактний відступ */
        line-height: 1.2; /* Компактна висота рядка */
    }
    
    .hero-slide-description {
        font-size: 1.1rem; /* Збільшено розмір тексту для планшетів */
        line-height: 1.35; /* Оптимальна висота рядка */
    }
    
    /* Адаптивні стилі кнопки для планшетів */
    .hero-cta-container .btn {
        font-size: 1.1rem !important; /* Збільшений розмір для планшетів */
        padding: 0.75rem 2rem !important; /* Збільшений padding для планшетів */
    }
    
    .hero-slider-arrow {
        width: 32px; /* Зменшено з 45px до 32px */
        height: 32px; /* Зменшено з 45px до 32px */
    }
    
    .hero-slider-arrow-left {
        left: 10px;
    }
    
    .hero-slider-arrow-right {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding-top: 70px; /* Збільшено на 50px для малих екранів */
        margin-bottom: 25px; /* Додано відступ 1см до наступної секції для мобільних */
    }
    
    /* Збільшуємо текст під слайдами для малих екранів */
    .hero-slide-title {
        font-size: 1.35rem; /* Збільшено для малих екранів */
        line-height: 1.2;
        margin-bottom: 0.6rem;
    }
    
    .hero-slide-description {
        font-size: 1rem; /* Збільшено для малих екранів */
        line-height: 1.35;
    }
    
    .hero-section .row {
        min-height: 35vh !important; /* Мінімальна висота для компактності на мобільних */
    }
    
    .hero-text-content {
        padding-left: 1rem;
        padding-right: 0.3rem; /* Зменшено правий відступ */
        padding-top: 3px; /* Піднято на 0.7см (27px) для мобільних */
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 300px; /* Вирівняно з висотою слайдів для мобільних */
    }
    
    .hero-cta-container .btn {
        font-size: 1.05rem !important; /* Збільшений розмір шрифту для кнопки на мобільних */
        padding: 0.7rem 1.8rem !important; /* Збільшений padding */
        font-weight: 700 !important; /* Жирний шрифт */
    }
    
    .hero-main-title {
        font-size: 2.3rem; /* Ще більше збільшено для мобільних */
        margin-bottom: 0.5rem; /* Ще менше */
    }
    
    .hero-subtitle {
        font-size: 1.15rem; /* Ще більше збільшено підзаголовок для мобільних */
        margin-bottom: 1rem; /* Зменшено з 1.5rem */
    }
    
    .hero-slider-container {
        margin-top: 20px; /* Відступ зверху для мобільних */
        max-width: 100%; /* Повна ширина на мобільних */
        margin-left: 0; /* Скидаємо автоматичне центрування */
        margin-right: 0; /* Скидаємо автоматичне центрування */
        min-height: 300px; /* Вирівняно з висотою слайдів */
    }
    
    .hero-slide {
        min-height: 300px; /* Збільшено для кращого розміщення тексту на мобільних */
        padding: 0.25rem;
    }

    .hero-slide-image {
        height: 280px; /* Зменшено для компактності на мобільних */
        margin-bottom: 0.6rem; /* Зменшено відступ для меншої відстані до тексту */
    }
    
    .hero-slide-image img {
        height: 260px !important; /* Зменшено для компактності на мобільних */
        max-height: 260px !important;
        width: 100%;
        background: #ffffff !important; /* Білий фон як на головній сторінці */
        background-color: #ffffff !important; /* Дублюємо для впевненості */
        box-shadow: none !important; /* Видаляємо тіні */
        border: none !important; /* Видаляємо рамки */
        outline: none !important; /* Видаляємо outline */
        transform: none !important; /* Скидаємо всі трансформації */
    }

    /* Уніфіковані стилі для всіх зображень слайдера на мобільних */
    .hero-slide-image img[src*="img-2.png"],
    .hero-slide-image img[src*="img-3.png"],
    .hero-slide-image img[src*="img-4.png"],
    .hero-slide-image img[src*="img-7.png"],
    .hero-slide-image img[src*="img-11.png"],
    .hero-slide-image img[src*="img-12.png"],
    .hero-slide-image img[src*="img-31.png"] {
        height: 240px !important; /* Зменшено для компактності на мобільних */
        max-height: 240px !important;
        width: auto !important;
        margin: 6px auto !important; /* Зменшено відступи для меншої відстані до тексту */
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }
    
    .hero-slide-title {
        font-size: 1.45rem; /* Збільшено для мобільних */
        line-height: 1.2; /* Компактна висота рядка */
        margin-bottom: 0.6rem; /* Компактний відступ */
    }
    
    .hero-slide-description {
        font-size: 1.05rem; /* Збільшено розмір тексту для мобільних */
        line-height: 1.35; /* Оптимальна висота рядка */
    }
    
    .hero-slider-arrow {
        width: 28px; /* Зменшено з 40px до 28px */
        height: 28px; /* Зменшено з 40px до 28px */
    }
    
    .hero-slider-arrow i {
        font-size: 0.875rem; /* Зменшено з 1rem до 0.875rem */
    }
}

/* ========== Секція "Про Нас" з чорним фоном ========== */
#about {
    background-color: #000000 !important; /* Максимально чорний фон */
    color: #ffffff !important; /* Білий текст */
    padding: 4rem 0 !important; /* Збільшені відступи */
}

#about h2 {
    color: #ffffff !important; /* Білий заголовок */
    font-weight: 700;
}

#about .lead {
    color: #e5e7eb !important; /* Світло-сірий для підтексту */
    opacity: 0.9;
}

#about .text-muted {
    color: #d1d5db !important; /* Замість звичайного text-muted */
    opacity: 0.8;
}

/* ========== Нові стилі для покращеної секції About ========== */
#about.py-5 {
    padding-top: 2.4rem !important; /* Збільшено на 1см зверху */
    padding-bottom: 2.4rem !important; /* Збільшено на 1см знизу */
}

.about-header-section {
    margin-bottom: 2rem;
}

.about-main-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important; /* Жирніший для більшої вираженості */
    font-size: 3.2rem !important; /* Більший розмір як у сучасних лендингах */
    line-height: 1.1 !important; /* Компактніше для кращого вигляду */
    letter-spacing: -0.03em !important; /* Стисло для сучасного вигляду */
    color: #ffffff !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Тонка тінь для глибини */
}

.about-content-section {
    max-width: 950px; /* Розширено на 2см (150px) для більшої ширини тексту */
    margin: 0 auto;
    padding: 0 1rem; /* Зменшено бічні відступи для розтягування тексту */
}

.about-main-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important; /* Більший розмір для кращої читаемості */
    line-height: 1.6 !important; /* Оптимальна висота рядка */
    letter-spacing: -0.01em !important;
    color: #e5e7eb !important; /* Світло-сірий для контрасту */
    margin-bottom: 0 !important;
    opacity: 0.95; /* Трохи прозорості для м'якості */
}

/* Адаптивні стилі для нової секції About */
@media (max-width: 992px) {
    #about {
        padding: 2.2rem 0 !important; /* Збільшено на 1см для великих планшетів */
    }
    
    .about-main-title {
        font-size: 2.6rem !important;
    }
    
    .about-main-description {
        font-size: 1.2rem !important;
    }
    
    .about-content-section {
        padding: 0 0.5rem; /* Зменшено для розтягування тексту на планшетах */
        max-width: 95%; /* Растянуто почти на весь экран */
    }
}

@media (max-width: 768px) {
    #about {
        padding: 2rem 0 !important; /* Збільшено на 1см для планшетів */
    }
    
    .about-main-title {
        font-size: 2.2rem !important; /* Збільшено для мобільних */
        margin-bottom: 0.8rem !important;
    }
    
    .about-main-description {
        font-size: 1.15rem !important; /* Збільшено для мобільних */
        line-height: 1.6 !important;
    }
    
    .about-content-section {
        padding: 0 0.5rem; /* Увеличены отступы для лучшей читаемости */
        max-width: 100%; /* Растянуто на весь экран */
    }
    
    .about-header-section {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    #about {
        padding: 1.8rem 0 !important; /* Збільшено на 1см для мобільних */
    }
    
    .about-main-title {
        font-size: 1.8rem !important; /* Збільшено для малих екранів */
        margin-bottom: 0.7rem !important;
    }
    
    .about-main-description {
        font-size: 1.1rem !important; /* Збільшено для малих екранів */
        line-height: 1.5 !important;
    }
    
    .about-content-section {
        padding: 0 0.5rem;
        max-width: 100%; /* Растянуто на весь экран */
    }
}

/* Додатковий медіа-запит для дуже малих екранів */
@media (max-width: 480px) {
    .about-main-title {
        font-size: 1.7rem !important; /* Збільшено для дуже малих екранів */
    }
    
    .about-main-description {
        font-size: 1.05rem !important; /* Збільшено для дуже малих екранів */
        line-height: 1.5 !important;
    }
    
    .about-header-section {
        margin-bottom: 0.8rem;
    }
    
    /* Стилі для блоку "Простий старт" на дуже малих екранах */
    #easy-start h2 {
        font-size: 1.7rem !important; /* Оптимальний розмір для дуже малих екранів */
        margin-bottom: 12px !important;
    }
    
    #easy-start .lead {
        font-size: 1rem !important; /* Оптимальний розмір для дуже малих екранів */
        margin-bottom: 18px !important;
    }
}

/* ========== Герой-секція ========== */
.hero-section {
    margin-top: 90px; /* Збільшено на 50px від навігації */
    margin-bottom: 38px; /* Додано відступ 1см до наступної секції */
    padding-top: 0px; /* Прибрано зайвий padding */
    background: #ffffff !important; /* Максимально білий фон */
    background-color: #ffffff !important; /* Дублюємо для впевненості */
    position: relative;
    overflow: hidden;
}

.hero-section .container-fluid {
    max-width: 1400px; /* Обмеження максимальної ширини */
    margin: 0 auto; /* Центрування контейнера */
}

/* Видалена анімація float - більше не потрібна */

/* Видалені старі стилі анімацій, замінені на нові в hero-text-content */

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Анімація для герой-слайдера */
.hero-slider-container {
    opacity: 0;
    animation: slideInFromRight 1s ease 0.6s forwards;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

/* ========== Секції з анімацією при скролі ========== */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* ========== Ілюстрації секції функцій ========== */
#features {
    background: #ffffff !important; /* Максимально білий фон */
}

/* Мінімальна відстань від тексту до зображень */
.features-header-reduced-spacing {
    margin-bottom: 12px !important; /* Мінімальна відстань без обрізання */
}

/* Збільшуємо останнє зображення img-15.jpg на 0.5см + 10мм (~57px загалом) */
img[src*="img-15.jpg"] {
    transform: scale(1.078) !important; /* Збільшуємо на ~0.5см + 10мм */
    transition: transform 0.3s ease !important;
}

img[src*="img-15.jpg"]:hover {
    transform: scale(1.128) translateY(-3px) !important; /* При hover збільшуємо ще більше */
}

/* Всі зображення та текст вирівняні на одному рівні */

/* Опускаємо тільки текст під останнім зображенням на 1см */
.illustration-content-lowered {
    margin-top: 38px !important; /* Опускаємо текст на 1см, зображення залишається на місці */
}

/* Адаптивні стилі для відстані заголовка */
@media (max-width: 768px) {
    .features-header-reduced-spacing {
        margin-bottom: 10px !important; /* Мінімальна відстань на планшетах */
    }
}

@media (max-width: 576px) {
    .features-header-reduced-spacing {
        margin-bottom: 8px !important; /* Мінімальна відстань на мобільних */
    }
}

.illustration-block {
    padding: 1.5rem 1rem; /* Збільшуємо padding для простору при hover */
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100%; /* Однакова висота для всіх блоків */
    width: 100%; /* Повна ширина стовпця */
    justify-content: center; /* Вирівнювання по центру по вертикалі */
    align-items: center; /* Вирівнювання по центру по горизонталі */
}

/* ========== РОЗМІРИ КАРТИНОК У СЕКЦІЇ FEATURES ========== */
/* Всі 4 картинки - scale(0.94) - однакові найменші розміри */
/* Вирівнювання по середині для всіх блоків */
/* 2-га картинка використовує img-2.png замість img-3.png */

/* Всі картинки однакові - найменші */
.illustration-block-medium {
    transform: scale(0.94); /* Однаковий розмір для всіх */
    z-index: 1; /* Стандартний рівень */
    position: relative;
    min-height: 620px !important; /* Достатня висота для тексту */
    height: 620px !important; /* Фіксована висота для всіх блоків */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important; /* Центруємо контент по горизонталі */
}

/* Забезпечуємо однакове вирівнювання колонок */
#features .col-lg-3 {
    display: flex !important;
    align-items: stretch !important; /* Розтягуємо блоки на повну висоту */
}

#features .col-lg-3 .d-flex {
    align-items: stretch !important;
}

/* Додаткове вирівнювання для секції features */
#features .row {
    align-items: stretch !important;
}

#features .illustration-block {
    width: 100% !important;
}

/* Контейнери зображень мають однакову висоту */
.illustration-image-medium {
    height: 500px !important; /* Компактна висота контейнера */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important; /* Видаляємо стандартний відступ */
    flex-shrink: 0 !important; /* Запобігає зменшенню */
    position: relative !important; /* Фіксоване позиціонування */
}

/* Обгортка для масштабування зображень */
.image-wrapper {
    overflow: visible !important; /* Щоб уникнути обрізання */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* підтягує зображення вгору */
    align-items: center;
    border-radius: 0; /* Прибираємо заокруглення */
    padding: 0;
    margin: 0;
    gap: 0;
    line-height: 1;
    position: relative !important; /* Забезпечує однакове позиціонування */
    flex-shrink: 0 !important; /* Запобігає зменшенню */
}

.illustration-image-medium img {
    display: block !important; /* прибирає inline-базову лінію */
    margin: 0 auto !important; /* центрує */
    padding: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center top !important; /* Зображення не обрізається зверху */
    vertical-align: top !important; /* критично: прибирає вирівнювання по baseline */
    transform: scale(1.1) !important; /* Зменшено щоб не обрізалося */
    transition: transform 0.3s ease;
}

/* Специфічні стилі для нових зображень секції функцій */
.illustration-image-medium img[src*="img-30.png"],
.illustration-image-medium img[src*="img-31.png"],
.illustration-image-medium img[src*="img-32.png"],
.illustration-image-medium img[src*="img-34.png"] {
    display: block !important; /* прибирає inline-базову лінію */
    margin: 0 auto !important; /* центрує */
    padding: 0 !important; /* Прибираємо всі відступи */
    height: auto !important;
    max-height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center top !important; /* Зображення не обрізається зверху */
    background: transparent !important; /* Прозорий фон для прозорих зображень */
    border-radius: 0 !important; /* Прибираємо заокруглення */
    vertical-align: top !important; /* критично: прибирає вирівнювання по baseline */
    transform: scale(1.1) !important; /* Зменшено щоб не обрізалося */
    transition: transform 0.3s ease !important;
    position: relative !important; /* Фіксоване позиціонування */
}

/* Hover ефект для зображень в обгортці */
.image-wrapper:hover img {
    transform: scale(1.2) !important; /* При hover збільшуємо трохи */
}

/* Вирівнювання контенту в блоках */
.illustration-block-medium .illustration-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Змінено для притиснення до зображення */
    margin-top: -173px !important; /* Піднімаємо текст ще на 1 см вище (2см + 1см = 3см) */
    padding-top: 0 !important; /* Прибираємо зайвий padding */
    position: relative !important; /* Для точного позиціонування */
    z-index: 10 !important; /* Щоб текст був поверх зображення */
}

/* 4-та картинка така ж сама */
.illustration-block-large-alt {
    transform: scale(0.94); /* Однаковий розмір для всіх */
    z-index: 1; /* Стандартний рівень */
    position: relative;
}

.illustration-image-large-alt img {
    max-height: 420px !important; /* Однакова висота для всіх картинок */
}

/* Прибирання фону з останньої картинки */
.illustration-no-bg {
    background: transparent !important;
    filter: contrast(1.1) brightness(1.05); /* Покращує контраст замість фону */
    border-radius: 8px;
    padding: 0;
}

/* ========== СЕКЦІЯ ПЕРЕВАГ (МАКСИМАЛЬНО КОМПАКТНА) ========== */
/* Всі розміри, відступи та padding максимально зменшені для компактності */
.advantages-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 5rem 0 !important; /* Максимально розтягнуто темний фон зверху та знизу */
    margin-top: 60px !important; /* Збільшено відстань до блоку */
    margin-bottom: 60px !important; /* Збільшено відстань після блоку */
    position: relative;
    overflow: hidden;
}

.advantages-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 193, 7, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.advantages-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important; /* Зменшено */
    font-size: 2.6rem !important; /* Збільшено шрифт заголовка для десктопа */
    color: #ffffff !important;
    letter-spacing: -0.03em !important; /* Менше стиснуто */
    line-height: 1.2 !important;
    margin-bottom: 0.2rem !important; /* Максимально зменшено відступ */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; /* Менша тінь */
    background: linear-gradient(135deg, #ffffff 0%, #ffc107 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.advantages-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important; /* Зменшено */
    font-size: 1.3rem !important; /* Збільшено шрифт підзаголовка для десктопа */
    color: rgba(255, 255, 255, 0.85) !important; /* Трохи менш яскраво */
    letter-spacing: -0.01em !important; /* Менше компактно */
    line-height: 1.4 !important; /* Зменшено */
    max-width: 900px !important; /* Збільшено ширину для розміщення в два ряди */
    margin: 0 auto 0.5rem auto !important; /* Максимально зменшено відступ знизу */
    font-style: italic; /* Курсив залишається */
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.8) !important; /* Трохи менш яскраво */
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.05rem !important; /* Збільшено для кращої читабельності */
    line-height: 1.5 !important;
    letter-spacing: -0.005em !important; /* Менше компактно */
    max-width: 240px; /* Трохи зменшено ширину */
    margin: 0 auto; /* Центруємо */
}

/* Стилі для іконок на чорному фоні */
.advantages-section .feature-icon {
    margin-bottom: 0.3rem !important; /* Максимально зменшено для компактності */
    transition: transform 0.3s ease !important;
}

.advantages-section .feature-icon:hover {
    transform: translateY(-3px) scale(1.05) !important;
}

.advantages-section .feature-icon i {
    font-size: 1.5rem !important; /* Зменшено для компактності */
    color: #ffc107 !important; /* Жовтий акцент */
    filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.3));
    transition: all 0.3s ease !important;
}

.advantages-section .feature-icon:hover i {
    color: #ffed4e !important;
    filter: drop-shadow(0 4px 8px rgba(255, 193, 7, 0.5));
    transform: scale(1.1) !important;
}

.advantages-section h5 {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important; /* Зменшено */
    font-size: 1.1rem !important; /* Зменшено для компактності */
    color: #ffffff !important;
    letter-spacing: -0.01em !important; /* Менш компактно */
    margin-bottom: 0.6rem !important; /* Зменшено відступ */
    transition: all 0.3s ease !important;
    text-transform: uppercase; /* Великі літери залишаються */
    position: relative;
}

/* Hover ефекти для блоків переваг */
.advantages-section .text-center {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            padding: 0.5rem 0.4rem !important; /* Максимально зменшено для компактності */
    border-radius: 12px !important; /* Зменшено заокруглення */
    cursor: pointer !important;
    height: 100%; /* Однакова висота блоків */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
            min-height: 140px; /* Максимально зменшено мінімальну висоту */
    position: relative;
    background: rgba(255, 255, 255, 0.02); /* Ледь помітний фон */
    border: 1px solid rgba(255, 193, 7, 0.1); /* Тонка золота рамка */
}

.advantages-section .text-center:hover {
    transform: translateY(-10px) scale(1.02) !important;
    background: rgba(255, 193, 7, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    box-shadow: 0 15px 40px rgba(255, 193, 7, 0.15) !important;
    backdrop-filter: blur(15px) !important;
}

.advantages-section .text-center:hover h5 {
    color: #ffc107 !important;
    text-shadow: 0 2px 8px rgba(255, 193, 7, 0.4) !important;
    transform: scale(1.05) !important;
}

.advantages-section .text-center:hover .text-white-75 {
    color: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px) !important;
}

.advantages-section .text-center:hover .feature-icon {
    transform: translateY(-5px) scale(1.15) rotate(5deg) !important;
}

/* Розширений контейнер для кращого відображення */
.advantages-section .container-sm {
    max-width: 1600px !important; /* Збільшено для розтягування тексту в два ряди */
    padding: 0 2rem !important; /* Збільшено відступи */
}

/* Додаткове збільшення для великих екранів */
@media (min-width: 1200px) {
    .advantages-title {
        font-size: 2.8rem !important; /* Ще більший шрифт для великих екранів */
    }
    
    .advantages-subtitle {
        font-size: 1.4rem !important; /* Ще більший підзаголовок для великих екранів */
        max-width: 1000px !important; /* Ще ширше для кращого розтягування */
    }
    
    .advantages-section .container-sm {
        max-width: 1800px !important; /* Максимальне розтягування для великих екранів */
        padding: 0 3rem !important; /* Більші відступи */
    }
}

/* Адаптивні стилі для секції переваг */
@media (max-width: 992px) {
    .advantages-section {
        padding: 4rem 0 !important; /* Максимально розтягнуто темний фон для планшетів */
        margin-top: 50px !important; /* Збільшено відстань до блоку для планшетів */
        margin-bottom: 50px !important; /* Збільшено відстань після блоку для планшетів */
    }
    
    .advantages-title {
        font-size: 2.2rem !important; /* Збільшено для планшетів */
    }
    
    .advantages-subtitle {
        font-size: 1.15rem !important; /* Збільшено для планшетів */
    }
    
    .advantages-section h5 {
        font-size: 1.15rem !important; /* Збільшено для планшетів */
    }
    
    .advantages-section .text-center {
        min-height: 120px !important; /* Максимально зменшено для планшетів */
        padding: 0.7rem 0.5rem !important;
    }
    
    .advantages-section .container-sm {
        padding: 0 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .advantages-section {
        padding: 4rem 0 !important; /* Ще більше розтягнуто темний фон для мобільних */
        margin-top: 40px !important; /* Збільшено відстань до блоку для мобільних */
        margin-bottom: 40px !important; /* Збільшено відстань після блоку для мобільних */
    }
    
    .advantages-title {
        font-size: 1.8rem !important; /* Збільшено заголовок для мобільних */
        margin-top: 2rem !important; /* Збільшено та зрівняно відстань від чорного фону до заголовка */
        margin-bottom: 0.4rem !important;
    }
    
    .advantages-subtitle {
        font-size: 1.05rem !important; /* Збільшено підзаголовок для мобільних */
        margin-bottom: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    .advantages-section h5 {
        font-size: 1.1rem !important; /* Збільшено назви блоків для мобільних */
        margin-bottom: 0.4rem !important;
    }
    
    .text-white-75 {
        font-size: 0.95rem !important; /* Збільшено опис блоків для мобільних */
        max-width: 100%; /* Розтягнуто по ширині */
        line-height: 1.3 !important;
    }
    
    .advantages-section .feature-icon i {
        font-size: 1.2rem !important; /* Компактнее */
    }
    
    .advantages-section .feature-icon {
        margin-bottom: 0.3rem !important;
        width: 35px !important;
        height: 35px !important;
    }
    
    .advantages-section .text-center {
        padding: 0.5rem 0.3rem !important; /* Максимально компактно */
        min-height: 85px !important; /* Еще компактнее */
        margin-bottom: 0.8rem !important;
    }
    
    .advantages-section .container-sm {
        padding: 0 1rem !important;
    }
    
    /* Збільшуємо відступ знизу після всіх пунктів переваг для мобільних */
    .advantages-section .row.g-2 {
        margin-bottom: 2rem !important; /* Збільшено та зрівняно відстань після всіх пунктів до низу чорного фону */
    }
}

@media (max-width: 576px) {
    .advantages-section {
        padding: 3.8rem 0 !important; /* Ще більше розтягнуто темний фон для малих екранів */
        margin-top: 35px !important; /* Збільшено відстань до блоку для малих екранів */
        margin-bottom: 35px !important; /* Збільшено відстань після блоку для малих екранів */
    }
    
    .advantages-title {
        font-size: 1.6rem !important; /* Збільшено заголовок для малих екранів */
        margin-top: 1.8rem !important; /* Збільшено та зрівняно відстань від чорного фону до заголовка */
        margin-bottom: 0.3rem !important;
    }
    
    .advantages-subtitle {
        font-size: 1rem !important; /* Збільшено підзаголовок для малих екранів */
        margin-bottom: 0.7rem !important;
        max-width: 100% !important; /* Розтягнуто на весь екран */
        line-height: 1.3 !important;
    }
    
    .advantages-section .row.g-2 {
        row-gap: 0.5rem !important; /* Уменьшенный отступ между рядами */
    }
    
    .advantages-section .col-md-6 {
        flex: 0 0 50% !important; /* Принудительно 2 колонки */
        max-width: 50% !important;
    }
    
    .advantages-section h5 {
        font-size: 1rem !important; /* Збільшено назви блоків для малих екранів */
        margin-bottom: 0.3rem !important;
        line-height: 1.2 !important;
        width: 100% !important; /* Розтягнуто по ширині */
    }
    
    .text-white-75 {
        font-size: 0.9rem !important; /* Збільшено опис блоків для малих екранів */
        max-width: 100%; /* Розтягнуто по ширині */
        line-height: 1.2 !important;
        margin: 0 auto;
        width: 100% !important; /* Повна ширина */
    }
    
    .advantages-section .feature-icon i {
        font-size: 1rem !important; /* Компактные иконки */
    }
    
    .advantages-section .feature-icon {
        margin-bottom: 0.2rem !important;
        width: 30px !important;
        height: 30px !important;
    }
    
    .advantages-section .text-center {
        padding: 0.4rem 0.2rem !important; /* Минимальный padding */
        min-height: 75px !important; /* Очень компактная высота */
        margin-bottom: 0.5rem !important;
    }
    
    .advantages-section .container-sm {
        padding: 0 0.5rem !important; /* Минимальные боковые отступы */
    }
    
    /* Збільшуємо відступ знизу після всіх пунктів переваг для малих екранів */
    .advantages-section .row.g-2 {
        margin-bottom: 1.8rem !important; /* Збільшено та зрівняно відстань після всіх пунктів до низу чорного фону */
    }
}

/* Додатковий медіа-запит для дуже малих екранів */
@media (max-width: 480px) {
    .advantages-section {
        padding: 3.5rem 0 !important; /* Ще більше розтягнуто темний фон для дуже малих екранів */
        margin-top: 30px !important; /* Збільшено відстань до блоку для дуже малих екранів */
        margin-bottom: 30px !important; /* Збільшено відстань після блоку для дуже малих екранів */
    }
    
    .advantages-title {
        margin-top: 1.5rem !important; /* Збільшено та зрівняно відстань від чорного фону до заголовка */
    }
    
    /* Збільшуємо відступ знизу після всіх пунктів переваг для дуже малих екранів */
    .advantages-section .row.g-2 {
        margin-bottom: 1.5rem !important; /* Збільшено та зрівняно відстань після всіх пунктів до низу чорного фону */
    }
}

/* Додатковий медіа-запит для найменших екранів */
@media (max-width: 360px) {
    .advantages-section {
        padding: 3.2rem 0 !important; /* Ще більше розтягнуто темний фон для найменших екранів */
        margin-top: 25px !important; /* Збільшено відстань до блоку для найменших екранів */
        margin-bottom: 25px !important; /* Збільшено відстань після блоку для найменших екранів */
    }
    
    .advantages-title {
        margin-top: 1.3rem !important; /* Збільшено та зрівняно відстань від чорного фону до заголовка */
    }
    
    /* Збільшуємо відступ знизу після всіх пунктів переваг для найменших екранів */
    .advantages-section .row.g-2 {
        margin-bottom: 1.3rem !important; /* Збільшено та зрівняно відстань після всіх пунктів до низу чорного фону */
    }
}

.illustration-image {
    overflow: visible; /* Дозволяємо зображенню виходити за межі при hover */
    border-radius: 8px;
    margin-bottom: 1rem;
    width: 100%;
    flex-shrink: 0; /* Не зменшується при flex */
    position: relative; /* Додаємо для правильного позиціонування при hover */
}

.illustration-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px; /* Мінімальна висота */
    max-height: 450px; /* Збільшена максимальна висота */
    object-fit: contain; /* Зберігає пропорції */
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.illustration-image:hover img {
    transform: scale(1.05) translateY(-3px);
    z-index: 10; /* Піднімаємо зображення поверх інших при hover */
    position: relative; /* Потрібно для z-index */
}

.illustration-block:hover .illustration-title {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.illustration-block:hover .illustration-description {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.illustration-content {
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Заповнює доступний простір */
    justify-content: flex-start;
}

.illustration-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.5rem !important; /* Збільшено шрифт для всіх заголовків */
    color: var(--text-dark);
    margin-bottom: 0.2rem !important; /* Мінімальний відступ між заголовком і описом */
    margin-top: 0 !important; /* Прибираємо верхній відступ */
    margin-left: -55px !important; /* Максимальне розширення вліво за рамки зображення */
    margin-right: -55px !important; /* Максимальне розширення вправо за рамки зображення */
    letter-spacing: -0.01em;
    min-height: 3rem; /* Збільшена фіксована висота для кращого вирівнювання */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Центруємо текст */
    line-height: 1.2 !important; /* Компактна висота рядка */
    background: transparent !important; /* Прибираємо фон */
    padding: 15px 30px !important; /* Ще більше збільшені внутрішні відступи */
    border-radius: 0 !important; /* Прибираємо закруглення */
    backdrop-filter: none !important; /* Прибираємо розмиття */
    box-shadow: none !important; /* Прибираємо тінь */
    width: calc(100% + 110px) !important; /* Ширина більша за зображення на 110px */
}

/* Специфічний стиль для "Рішення на замовлення" - в один рядок */
.illustration-title-custom {
    width: calc(100% + 160px) !important; /* Максимальна ширина для довгого тексту */
    margin-left: -80px !important; /* Максимальне розширення для довгого тексту */
    margin-right: -80px !important;
    white-space: nowrap !important; /* Заборона переносу рядків */
    text-overflow: ellipsis !important; /* Обрізання при необхідності */
    font-size: 1.3rem !important; /* Такий же розмір як у всіх інших заголовків */
}

.illustration-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem !important; /* Ще більше збільшено шрифт */
    line-height: 1.4 !important; /* Трохи збільшена висота рядка для читаності */
    color: var(--text-muted);
    margin: 0 !important; /* Прибираємо всі відступи */
    margin-left: -60px !important; /* Максимальне розширення вліво за рамки зображення */
    margin-right: -60px !important; /* Максимальне розширення вправо за рамки зображення */
    padding: 12px 35px !important; /* Ще більше збільшені внутрішні відступи */
    letter-spacing: -0.005em;
    flex-grow: 1; /* Заповнює залишковий простір */
    display: flex;
    align-items: flex-start;
    text-align: center; /* Центруємо текст */
    justify-content: center; /* Центруємо контент */
    background: transparent !important; /* Прибираємо фон */
    border-radius: 0 !important; /* Прибираємо закруглення */
    backdrop-filter: none !important; /* Прибираємо розмиття */
    box-shadow: none !important; /* Прибираємо тінь */
    margin-top: 4px !important; /* Маленький відступ від заголовка */
    width: calc(100% + 120px) !important; /* Ширина більша за зображення на 120px */
}

/* Адаптивність для ілюстрацій */
@media (min-width: 1200px) {
    .illustration-image img {
        max-height: 500px; /* Базовий розмір на великих екранах */
    }
    
    .illustration-image-medium img {
        max-height: 450px !important; /* Однакові картинки на великих екранах */
    }
    
    /* Responsive стилі для нових зображень на великих екранах */
    .illustration-image-medium img[src*="img-20.png"],
    .illustration-image-medium img[src*="img-21.png"],
    .illustration-image-medium img[src*="img-22.png"],
    .illustration-image-medium img[src*="img-23.png"] {
        height: 570px !important; /* Збільшено на 4 см */
        max-height: 570px !important;
    }
    
    .illustration-image-large-alt img {
        max-height: 450px !important; /* 4-та картинка на великих екранах */
    }
    
    .illustration-block-medium {
        transform: scale(0.92); /* Однакові на великих екранах */
    }
    
    .illustration-block-large-alt {
        transform: scale(0.92); /* Однакова на великих екранах */
    }
    
    .illustration-image-medium {
        height: 610px !important; /* Фіксована висота для великих екранів */
    }
    
    .illustration-title {
        font-size: 1.2rem;
    }
    
    .illustration-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 992px) {
    .illustration-image img {
        max-height: 350px; /* Базовий розмір для планшетів */
    }
    
    .illustration-image-medium img {
        max-height: 340px !important; /* Однакові картинки на планшетах */
    }
    
    /* Responsive стилі для нових зображень на планшетах */
    .illustration-image-medium img[src*="img-30.png"],
    .illustration-image-medium img[src*="img-31.png"],
    .illustration-image-medium img[src*="img-32.png"],
    .illustration-image-medium img[src*="img-34.png"] {
        height: auto !important; /* Автоматична висота для планшетів */
        max-height: 100% !important;
        transform: scale(1.1) !important; /* Оптимальне масштабування для планшетів */
    }
    
    /* Адаптивний hover ефект для планшетів */
    .image-wrapper:hover img[src*="img-30.png"],
    .image-wrapper:hover img[src*="img-31.png"],
    .image-wrapper:hover img[src*="img-32.png"],
    .image-wrapper:hover img[src*="img-34.png"] {
        transform: scale(1.2) !important;
    }
    
         /* Адаптивні стилі для тексту на планшетах */
     .illustration-title {
                   font-size: 1.4rem !important; /* Збільшено розмір для планшетів */
                   margin-left: -40px !important; /* Максимальне розширення для планшетів */
          margin-right: -40px !important;
          width: calc(100% + 80px) !important;
     }
     
     .illustration-description {
         font-size: 1.15rem !important; /* Збільшено шрифт для планшетів */
                   margin-left: -45px !important; /* Максимальне розширення для планшетів */
          margin-right: -45px !important;
                     width: calc(100% + 90px) !important;
           padding: 10px 35px !important;
       }
       
       /* Адаптивний стиль для "Рішення на замовлення" на планшетах */
       .illustration-title-custom {
           width: calc(100% + 120px) !important;
           margin-left: -60px !important;
           margin-right: -60px !important;
           font-size: 1.4rem !important;
       }
    
    .illustration-image-large-alt img {
        max-height: 340px !important; /* 4-та картинка на планшетах */
    }
    
    .illustration-block {
        margin-bottom: 2rem;
    }
    
    .illustration-block-large-alt {
        transform: scale(0.96); /* Однакова на планшетах */
    }
    
    .illustration-block-medium {
        transform: scale(0.96); /* Однакові всі картинки на планшетах */
        min-height: 550px !important; /* Достатня висота для тексту на планшетах */
        height: 550px !important; /* Фіксована висота для планшетів */
    }
    
    .illustration-image-medium {
        height: 450px !important; /* Компактна фіксована висота для планшетів */
    }
    
    /* Адаптивна обгортка для планшетів */
    .image-wrapper {
        border-radius: 0; /* Прибираємо заокруглення */
    }
    
    .illustration-block-medium .illustration-content {
        margin-top: -163px !important; /* Піднімаємо текст ще на 1 см вище для планшетів */
        padding-top: 0 !important; /* Прибираємо зайвий padding */
        position: relative !important; /* Для позиціонування */
        z-index: 10 !important; /* Поверх зображення */
    }
    
    .illustration-title {
        font-size: 1rem;
        min-height: 2.5rem; /* Збільшена висота для кращого вирівнювання на планшетах */
    }
    
    .illustration-description {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .illustration-image img {
        max-height: 280px;
    }
}

@media (max-width: 576px) {
    .illustration-image img {
        max-height: 250px;
    }
    
    .illustration-image-medium img {
        max-height: 240px !important; /* Однакові картинки на мобільних */
    }
    
    /* Responsive стилі для нових зображень на мобільних */
    .illustration-image-medium img[src*="img-30.png"],
    .illustration-image-medium img[src*="img-31.png"],
    .illustration-image-medium img[src*="img-32.png"],
    .illustration-image-medium img[src*="img-34.png"] {
        height: auto !important; /* Автоматична висота для мобільних */
        max-height: 100% !important;
        transform: scale(1.0) !important; /* Стандартне масштабування для мобільних */
    }
    
         /* Адаптивні стилі для тексту на мобільних */
     .illustration-title {
                   font-size: 1.3rem !important; /* Збільшено розмір для мобільних */
                   margin-left: -35px !important; /* Максимальне розширення для мобільних */
          margin-right: -35px !important;
          width: calc(100% + 70px) !important;
                   padding: 12px 30px !important;
     }
     
     .illustration-description {
         font-size: 1.1rem !important; /* Збільшено шрифт для мобільних */
                   margin-left: -40px !important; /* Максимальне розширення для мобільних */
          margin-right: -40px !important;
                     width: calc(100% + 80px) !important;
           padding: 8px 30px !important;
       }
       
       /* Адаптивний стиль для "Рішення на замовлення" на мобільних */
       .illustration-title-custom {
           width: calc(100% + 100px) !important;
           margin-left: -50px !important;
           margin-right: -50px !important;
           font-size: 1.3rem !important;
       }
    
    /* Адаптивний hover ефект для мобільних */
    .image-wrapper:hover img[src*="img-30.png"],
    .image-wrapper:hover img[src*="img-31.png"],
    .image-wrapper:hover img[src*="img-32.png"],
    .image-wrapper:hover img[src*="img-34.png"] {
        transform: scale(1.1) !important;
    }
    
    .illustration-image-large-alt img {
        max-height: 240px !important; /* 4-та картинка на мобільних */
    }
    
    .illustration-block {
        margin-bottom: 1.5rem;
        padding: 0.5rem 0;
    }
    
    .illustration-block-large-alt {
        transform: scale(0.98); /* Однакова на мобільних */
        margin: 0; /* Без компенсації */
    }
    
    .illustration-block-medium {
        transform: scale(0.98); /* Однакові всі картинки на мобільних */
        margin: 0; /* Без компенсації */
        min-height: 480px !important; /* Достатня висота для тексту на мобільних */
        height: 480px !important; /* Фіксована висота для мобільних */
    }
    
    .illustration-image-medium {
        height: 380px !important; /* Компактна фіксована висота для мобільних */
    }
    
    /* Адаптивна обгортка для мобільних */
    .image-wrapper {
        border-radius: 0; /* Прибираємо заокруглення */
    }
    
    .illustration-block-medium .illustration-content {
        margin-top: -153px !important; /* Піднімаємо текст ще на 1 см вище для мобільних */
        padding-top: 0 !important; /* Прибираємо зайвий padding */
        position: relative !important; /* Для позиціонування */
        z-index: 10 !important; /* Поверх зображення */
    }
    
    .illustration-title {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
        min-height: 2.2rem; /* Збільшена висота для кращого вирівнювання на мобільних */
    }
    
    .illustration-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* ========== Картки тарифів ========== */
.pricing-card {
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    border-color: var(--primary-light);
}

.pricing-card.bg-primary:hover {
    transform: translateY(-8px) scale(1.02);
}

/* ========== Форма контактів ========== */
.form-control {
    border: 2px solid #e5e7eb;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(30, 58, 138, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

/* ========== Footer ========== */
footer {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

footer a {
    transition: all 0.3s ease;
}

footer a:hover {
    opacity: 1 !important;
    transform: translateY(-2px);
}

.hover-opacity-100:hover {
    opacity: 1 !important;
}

/* ========== Адаптивність ========== */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 80px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .feature-card {
        margin-bottom: 1rem;
    }
    
    .pricing-card {
        margin-bottom: 2rem;
    }
    
    .navbar-brand {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .display-4 {
        font-size: 2rem !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* ========== Утиліти ========== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.border-gradient {
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--primary-color), var(--primary-light)) 1;
}

/* ========== Smooth scroll ========== */
html {
    scroll-behavior: smooth;
}

/* ========== Прелоадер (опціонально) ========== */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-white);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--secondary-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== Кастомний скролбар ========== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* Стилі скролбара для мобільних пристроїв */
@media (max-width: 992px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.5);
    }
}

/* Покращення скроллбара для Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--secondary-color);
}

@media (max-width: 992px) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    }
}

/* ========== СЕКЦІЯ ДЕМОНСТРАЦІЇ ========== */
/* Плавний перехід від чорного фону секції переваг до світло-сірого */
.demo-section {
    background: linear-gradient(180deg, #1a1a1a 0%, #333333 8%, #666666 16%, #999999 24%, #f8f9fa 32%, #f8f9fa 100%);
    padding: 5rem 0 4rem 0;
    position: relative;
    /* Додаємо тонку текстуру */
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%);
}

.demo-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 3rem !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
    /* Додаємо тонкий ефект тексту */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, var(--text-dark) 0%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.demo-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.2rem !important;
    color: var(--text-muted) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
}

/* Картки демонстрації */
.demo-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 1;
    transform: translateY(0) scale(1);
}

.demo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.demo-image {
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* Спеціальний контейнер для зображення "Гаджети та Електроніка" */
.demo-card .gadgets-container {
    overflow: hidden !important;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    /* Залишаємо стандартні розміри як у всіх демо-контейнерів */
}

/* Image wrapper для контролю збільшення */
.demo-card .gadgets-container .image-wrapper {
    overflow: hidden;
    width: 100%;
    height: 280px;
    background: transparent; /* Прозорий фон як у інших */
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Спеціальний контейнер для зображення "Гаджети та Електроніка" */
.demo-image-transparent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.demo-image img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    transition: transform 0.3s ease;
    background: transparent; /* Прозорий фон для всіх зображень */
    padding: 1rem;
}

/* ========== ОПТИМІЗАЦІЯ ЗОБРАЖЕННЯ "ГАДЖЕТИ ТА ЕЛЕКТРОНІКА" ========== */
/* 
   ВИРІШЕННЯ ПРОБЛЕМИ БІЛОГО ФОНУ:
   1. Видалили сірий фон (#f8f9fa) з зображення
   2. Зменшили padding для більш натурального вигляду
   3. Додали тінь drop-shadow замість box-shadow для реалістичності
   4. Зробили прозорий фон контейнера
   
   АЛЬТЕРНАТИВНЕ РІШЕННЯ (рекомендується):
   - Замінити img-3.png на версію з прозорим фоном
   - Використати формат PNG з alpha-каналом або SVG
   - URL: img-3-transparent.png або img-3-no-bg.png
*/

/* Стилі для зображення "Гаджети та Електроніка" тепер використовують стандартні .demo-image img стилі */

.demo-card:hover .demo-image img {
    transform: scale(1.05);
}

/* Hover ефект для рамки з зображенням "Гаджети та Електроніка" */
.demo-card:hover .gadgets-container .image-wrapper {
    transform: scale(1.05);
}

/* Зберігаємо позиціонування зображення при hover */
.demo-card:hover .gadgets-container .image-wrapper .gadgets-electronics-image {
    transform: translateY(-5px) !important;
}

.demo-card-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 1rem !important;
}

.demo-link {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    transition: all 0.3s ease;
    background: transparent;
}

.demo-link:hover {
    background: var(--primary-color);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.3);
}

.demo-link i {
    transition: transform 0.3s ease;
}

.demo-link:hover i {
    transform: translateX(5px);
}

/* Адаптивні стилі для демонстрації */
@media (max-width: 992px) {
    .demo-section {
        padding: 4rem 0 3rem 0;
    }
    
    .demo-title {
        font-size: 2.5rem !important;
    }
    
    .demo-subtitle {
        font-size: 1.1rem !important;
    }
    
    .demo-image img {
        height: 240px;
    }
    
    /* Адаптивні стилі для зображення "Гаджети та Електроніка" тепер стандартні */
    
    .demo-card {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 768px) {
    .demo-section {
        padding: 3rem 0 2.5rem 0;
    }
    
    .demo-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .demo-subtitle {
        font-size: 1rem !important;
    }
    
    .demo-card-title {
        font-size: 1.2rem !important;
    }
    
    .demo-image img {
        height: 200px;
    }
    
    /* Адаптивні стилі для зображення "Гаджети та Електроніка" тепер стандартні */
    
    .demo-card {
        padding: 1.2rem 0.8rem;
        margin-bottom: 1.5rem;
    }
    
    .demo-link {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.2rem;
    }
}

/* ========== СЕКЦІЯ ВБУДОВАНОГО ШІ (МАКСИМАЛЬНО БІЛИЙ ФОН) ========== */
.ai-section {
    background: #ffffff !important; /* Максимально білий фон без градієнтів */
    padding: 5rem 0; /* Збільшено для рівних відступів зверху і знизу */
    position: relative;
    overflow: visible; /* Змінено з hidden на visible */
}

.ai-content {
    position: relative;
    z-index: 2;
    padding-right: 1.5rem; /* Зменшено для компактності */
}

.ai-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.5rem !important; /* Збільшено для кращої читабльності */
    color: #1a1a1a !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important; /* Зменшено для компактності */
    text-shadow: none; /* Прибираємо тінь */
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.ai-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.15rem !important; /* Збільшено для кращої читабльності */
    color: #4a4a4a !important;
    letter-spacing: -0.01em !important;
    line-height: 1.5 !important; /* Зменшено для компактності */
    margin-bottom: 1.2rem !important; /* Зменшено для компактності */
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

/* Список функцій ШІ */
.ai-features-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem; /* Зменшено для компактності */
}

/* Стилі для рядків функцій (за замовчуванням для десктопу) */
.ai-features-row {
    display: contents; /* На десктопі елементи поводяться як звичайні діти .ai-features-list */
}

/* .ai-feature-item-full стилізується через мобільні медіа-запити */

.ai-feature-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.8rem; /* Зменшено для компактності */
    background: #ffffff !important; /* Чистий білий фон */
    border: 1px solid rgba(42, 42, 42, 0.15); /* Темна рамка */
    border-radius: 10px; /* Зменшено для компактності */
    transition: all 0.6s ease; /* Збільшено тривалість для плавності */
    position: relative;
    overflow: hidden;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateX(0) scale(1);
}

.ai-feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(42, 42, 42, 0.05), transparent); /* Темний ефект */
    transition: left 1.0s ease; /* Збільшено тривалість для плавності */
}

.ai-feature-item:hover::before {
    left: 100%;
}

.ai-feature-item:hover {
    transform: translateX(4px); /* Зменшено рух у два рази */
    border-color: rgba(42, 42, 42, 0.3); /* Темна рамка при hover */
    box-shadow: 0 4px 15px rgba(42, 42, 42, 0.12); /* Темна тінь */
    background: #ffffff !important; /* Чистий білий фон при hover */
}

.ai-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Зменшено для компактності */
    height: 35px; /* Зменшено для компактності */
    background: #2a2a2a; /* Темно-сірий фон */
    border-radius: 8px; /* Зменшено для компактності */
    margin-right: 0.8rem; /* Зменшено для компактності */
    transition: all 0.6s ease; /* Збільшено тривалість для плавності */
    position: relative;
    z-index: 2;
}

.ai-feature-icon i {
    font-size: 1.15rem; /* Збільшено для кращої видимості */
    color: #ffffff;
    transition: transform 0.6s ease;
}

.ai-feature-item:hover .ai-feature-icon {
    transform: scale(1.05) rotate(2.5deg); /* Зменшено ефекти у два рази */
    background: #1a1a1a; /* Темніший фон при hover */
    box-shadow: 0 4px 15px rgba(42, 42, 42, 0.3); /* Темна тінь */
}

.ai-feature-item:hover .ai-feature-icon i {
    transform: scale(1.05); /* Зменшено масштабування у два рази */
}

.ai-feature-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important; /* Збільшено для кращої читабльності */
    color: #2a2a2a !important;
    letter-spacing: -0.01em !important;
    position: relative;
    z-index: 2;
    transition: all 0.6s ease; /* Збільшено тривалість для плавності */
}

.ai-feature-item:hover .ai-feature-text {
    color: #000000; /* Чорний колір при hover */
}

/* Зображення ШІ - статична ілюстрація крупним планом */
.ai-image-container {
    position: relative;
    padding: 0; /* Прибираємо всі відступи для крупного плану */
    background: transparent; /* Повністю прозорий фон */
    overflow: visible;
    display: flex;
    align-items: center; /* Центруємо зображення вертикально */
    justify-content: center; /* Центруємо зображення горизонтально */
    height: 100%; /* Займаємо всю висоту */
}

.ai-image {
    width: 100%;
    height: auto;
    max-height: 537px; /* Зменшено на 3см (650px - 113px) */
    object-fit: contain;
    border-radius: 0; /* Прибираємо заокруглення */
    transition: none; /* Прибираємо transition */
    position: relative;
    z-index: 1;
    background: transparent; /* Прозорий фон */
    /* Початкові значення без анімації */
    opacity: 1;
    transform: scale(0.85); /* Додатково зменшуємо на 15% для компактності */
    /* Прибираємо анімації */
    animation: none;
}

.ai-image:hover {
    /* Прибираємо hover ефекти */
    transform: none;
    filter: none;
}

/* Анімації для зображення ШІ - видалені для статичної ілюстрації */
/* 
@keyframes aiFloat - не використовується
@keyframes aiGlow - не використовується  
@keyframes aiPulse - не використовується
*/

/* ========== СЕКЦІЯ ІНДИВІДУАЛЬНОЇ РОЗРОБКИ ========== */
.custom-dev-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 3rem 0 !important;
    position: relative;
    overflow: hidden;
}

/* ========== СЕКЦІЯ СПРОБУЙТЕ БЕЗКОШТОВНО ========== */
.try-free-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 1.5rem 0 !important; /* Зменшено на 1см зверху і знизу */
    position: relative;
    overflow: hidden;
}

.try-free-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 193, 7, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.try-free-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.4rem !important; /* Збільшено заголовок */
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.8rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffc107 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
}

.try-free-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important; /* Збільшено опис */
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    max-width: 900px !important;
    margin: 0 auto 1.5rem auto !important;
    font-style: italic;
    position: relative;
    z-index: 2;
}

.try-free-cta {
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.try-free-section .container-sm {
    max-width: 1300px !important;
    padding: 0 2rem !important;
    position: relative;
    z-index: 2;
}

/* Золотиста кнопка для чорного фону */
.try-free-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #000000 !important;
    border: 2px solid rgba(255, 193, 7, 0.3);
    padding: 0.9rem 2rem;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    letter-spacing: -0.01em;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.try-free-button:hover {
    background: linear-gradient(135deg, #ffffff 0%, #ffc107 100%) !important;
    color: #000000 !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    border-color: rgba(255, 193, 7, 0.6);
}

.try-free-button:focus {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #000000 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.try-free-button:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

/* Адаптивні стилі для секції спробуйте безкоштовно */
@media (max-width: 992px) {
    .try-free-section {
        padding: 1.2rem 0 !important; /* Пропорційно зменшено */
    }
    
    .try-free-title {
        font-size: 2.1rem !important; /* Збільшено для планшетів */
    }
    
    .try-free-description {
        font-size: 1.05rem !important; /* Збільшено для планшетів */
    }
    
    .try-free-button {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem !important;
    }
}

@media (max-width: 768px) {
    .try-free-section {
        padding: 1rem 0 !important; /* Пропорційно зменшено */
    }
    
    .try-free-title {
        font-size: 1.9rem !important; /* Збільшено для мобільних */
        margin-bottom: 0.8rem !important;
    }
    
    .try-free-description {
        font-size: 1rem !important; /* Збільшено для мобільних */
        margin-bottom: 1.2rem !important;
    }
    
    .try-free-button {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .try-free-section {
        padding: 0.8rem 0 !important; /* Пропорційно зменшено */
    }
    
    .try-free-title {
        font-size: 1.7rem !important; /* Збільшено для малих екранів */
    }
    
    .try-free-description {
        font-size: 0.95rem !important; /* Збільшено для малих екранів */
    }
    
    .try-free-cta {
        margin-top: 1.5rem;
    }
    
    .try-free-button {
        width: 100%;
        max-width: 280px;
        padding: 0.8rem 1rem;
        font-size: 0.85rem !important;
    }
    
    .try-free-section .container-sm {
        padding: 0 1rem !important;
    }
}

.custom-dev-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 193, 7, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.custom-dev-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.5rem !important; /* Трохи зменшено для оптимального балансу */
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.8rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffc107 50%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.custom-dev-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.35rem !important; /* ОПТИМАЛЬНО збільшено для точно 2 рядків */
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: -0.01em !important;
    max-width: 100% !important; /* Повна ширина для розтягнутого тексту */
    line-height: 1.5 !important;
    width: 100% !important; /* Розтягнуто на всю ширину контейнера */
    margin: 0 auto 1.5rem auto !important;
    text-align: center !important; /* Центрування тексту як на фото */
    word-wrap: break-word !important; /* Природні переноси слів */
    hyphens: none !important; /* Вимкнено автопереноси для точного контролю */
    word-break: normal !important; /* Природні переноси по словах */
    overflow-wrap: break-word !important; /* Переноси довгих слів */
    font-style: italic;
    position: relative;
    z-index: 2;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.custom-dev-cta {
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.custom-dev-section .container-sm {
    max-width: 100% !important; /* Максимально розтягнуто по всій ширині екрану */
    padding: 0 0.05rem !important; /* АБСОЛЮТНО мінімальні відступи */
    position: relative;
    z-index: 2;
}

/* Золотиста кнопка для чорного фону */
.custom-dev-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #000000 !important;
    border: 2px solid rgba(255, 193, 7, 0.3);
    padding: 0.9rem 2rem;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);
    letter-spacing: -0.01em;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0) scale(1);
}

.custom-dev-button:hover {
    background: linear-gradient(135deg, #ffffff 0%, #ffc107 100%) !important;
    color: #000000 !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    border-color: rgba(255, 193, 7, 0.6);
}

.custom-dev-button:focus {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important;
    color: #000000 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.custom-dev-button:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

/* Стилі для десктопних екранів */
@media (min-width: 993px) {
    .custom-dev-section .container-sm {
        max-width: 1500px !important; /* Збільшено для десктопу */
    }
    
    .custom-dev-description {
        max-width: 100% !important; /* Повна ширина для розтягування */
        width: 100% !important;
    }
}

/* Стилі для великих екранів */
@media (min-width: 1200px) {
    .custom-dev-section .container-sm {
        max-width: 100% !important; /* Повна ширина екрану для великих екранів */
        padding: 0 0.1rem !important; /* АБСОЛЮТНО мінімальні відступи для 2 рядків */
    }
    
    .custom-dev-description {
        max-width: 100% !important; /* Повна ширина для двох рядків */
        width: 100% !important;
    }
}

/* Адаптивні стилі для секції індивідуальної розробки */
@media (max-width: 992px) {
    .custom-dev-section {
        padding: 2.5rem 0; /* Зменшено для компактності */
    }
    
    .custom-dev-title {
        font-size: 2.2rem !important; /* Трохи зменшено для планшетів */
    }
    
    .custom-dev-description {
        font-size: 1.2rem !important; /* ЗБІЛЬШЕНО для планшетів */
        max-width: 100% !important; /* Повна ширина для планшетів */
        width: 100% !important;
    }
    
    .custom-dev-button {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem !important;
    }
}

@media (max-width: 768px) {
    .custom-dev-section {
        padding: 2rem 0; /* Зменшено для компактності */
    }
    
    .custom-dev-title {
        font-size: 2rem !important; /* Трохи зменшено для мобільних */
        margin-bottom: 0.8rem !important;
    }
    
    .custom-dev-description {
        font-size: 0.95rem !important; /* Зменшено для мобільних */
        margin-bottom: 1.2rem !important;
        max-width: 100% !important; /* Повна ширина для мобільних */
        width: 100% !important;
        padding: 0 0.3rem; /* Мінімальні бокові відступи для повної ширини */
    }
    
    .custom-dev-button {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem !important;
    }
    
    .custom-dev-section .container-sm {
        padding: 0 0.3rem !important; /* Мінімальні бокові відступи для повної ширини */
    }
}

@media (max-width: 576px) {
    .custom-dev-section {
        padding: 1.5rem 0; /* Додатково зменшено для компактності */
    }
    
    .custom-dev-title {
        font-size: 1.8rem !important; /* Трохи зменшено для малих екранів */
    }
    
    .custom-dev-description {
        font-size: 0.9rem !important; /* Зменшено для малих екранів */
        max-width: 100% !important;
        padding: 0 0.2rem; /* Мінімальні бокові відступи для повної ширини */
    }
    
    .custom-dev-cta {
        margin-top: 1.5rem;
    }
    
    .custom-dev-button {
        width: 100%;
        max-width: 280px;
        padding: 0.8rem 1rem;
        font-size: 0.85rem !important; /* Зменшено для компактності */
    }
    
    .custom-dev-section .container-sm {
        padding: 0 0.2rem !important; /* Мінімальні бокові відступи для повної ширини */
    }
}

/* ========== СЕКЦІЯ КРОКІВ ========== */
.steps-section {
    background: #ffffff;
    padding: 5rem 0;
    position: relative;
}

/* Розширюємо контейнер секції для кращого розміщення заголовка */
.steps-section .container {
    max-width: 1400px !important; /* Збільшуємо максимальну ширину */
}

/* Розтягування заголовків секції кроків */
.steps-section .col-lg-8 {
    max-width: 100% !important; /* Максимально розтягуємо контейнер заголовків */
}

/* Базові стилі для заголовка - в один ряд на десктопі */
@media (min-width: 768px) {
    .steps-main-title {
        white-space: nowrap !important; /* Заборона переносу рядків на десктопі */
        overflow: visible !important; /* Дозволяємо видимість */
    }
    
    /* Запобігаємо переносу емодзі в описах кроків на десктопі */
    .steps-description {
        word-break: keep-all !important; /* Заборона розриву слів та емодзі */
        white-space: pre-line !important; /* Зберігає пробіли та дозволяє ручні переноси */
        overflow-wrap: normal !important; /* Запобігаємо автоматичному переносу */
        hyphens: none !important; /* Відключаємо автоматичні переноси */
    }
}

/* Стилі для великих екранів */
@media (min-width: 1200px) {
    .steps-section .container {
        max-width: 1600px !important; /* Ще більше розширення для великих екранів */
    }
    
    .steps-section .col-lg-8 {
        max-width: 100% !important; /* Максимальне розтягування для великих екранів */
    }
    
    .steps-main-title,
    .steps-main-subtitle {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Робимо заголовок в один ряд для великих екранів */
    .steps-main-title {
        white-space: nowrap !important; /* Заборона переносу рядків */
        overflow: visible !important; /* Дозволяємо повну видимість */
    }
    
    /* Розтягуємо також контент кроків */
    .steps-content {
        padding: 0 1rem !important;
    }
    
    .steps-item .col-lg-5 {
        max-width: 45% !important; /* Розширюємо блоки кроків */
    }
    
    /* Запобігаємо переносу емодзі на великих екранах */
    .steps-description {
        word-break: keep-all !important; /* Заборона розриву слів та емодзі */
        white-space: pre-line !important; /* Зберігає пробіли та дозволяє ручні переноси */
        overflow-wrap: normal !important; /* Запобігаємо автоматичному переносу */
    }
    
    /* Зменшуємо шрифт кроків тільки на десктопі */
    .steps-title {
        font-size: 1.8rem !important; /* Трохи зменшено тільки для десктопу */
    }
    
    .steps-description {
        font-size: 1.1rem !important; /* Трохи зменшено тільки для десктопу */
    }
}

/* Стилі для десктопних екранів */
@media (min-width: 993px) {
    .steps-section .container {
        max-width: 1500px !important; /* Розширення контейнера для десктопу */
    }
    
    .steps-section .col-lg-8 {
        max-width: 100% !important; /* Максимальне розтягування для десктопу */
    }
    
    .steps-main-title,
    .steps-main-subtitle {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Збільшуємо шрифти заголовків та робимо заголовок в один ряд */
    .steps-main-title {
        font-size: 3.2rem !important;
        white-space: nowrap !important; /* Заборона переносу рядків */
        overflow: visible !important; /* Дозволяємо повну видимість */
    }
    
    .steps-main-subtitle {
        font-size: 1.4rem !important;
    }
    
    /* Розтягуємо контент кроків */
    .steps-content {
        padding: 0 0.5rem !important;
    }
    
    .steps-title {
        font-size: 1.85rem !important; /* Трохи зменшено для великих екранів */
    }
    
    .steps-description {
        font-size: 1.15rem !important; /* Трохи зменшено для великих екранів */
        word-break: keep-all !important; /* Заборона розриву слів та емодзі */
        white-space: pre-line !important; /* Зберігає пробіли та дозволяє ручні переноси */
        overflow-wrap: normal !important; /* Запобігаємо автоматичному переносу */
    }
}

.steps-main-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 3rem !important; /* Збільшено головний заголовок */
    color: var(--text-dark) !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important; /* Розтягуємо заголовок по ширині */
    width: 100% !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.steps-main-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.35rem !important; /* Збільшено підзаголовок */
    color: var(--text-muted) !important;
    letter-spacing: -0.01em !important;
    max-width: 100% !important; /* Розтягуємо підзаголовок по ширині */
    width: 100% !important;
    line-height: 1.6 !important;
    margin: 0 auto !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

/* Контейнер таймлайну */
.steps-timeline-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Вертикальна лінія по центру */
.steps-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #000000;
    transform: translateX(-50%);
    border-radius: 1px;
    z-index: 1;
}

/* Елементи кроків */
.steps-item {
    position: relative;
    padding: 2rem 0;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Плавна анімація для всього елементу */
}

/* Номери кроків - приховано */
.step-number {
    display: none;
}

/* Hover для номерів кроків - приховано */
.step-number:hover {
    display: none;
}

/* Контейнер зображень */
.steps-image-container {
    padding: 0.5rem;
    border-radius: 0;
    background: transparent;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Більш плавна та м'яка анімація */
    overflow: hidden;
}

.steps-image-container:hover {
    transform: translateY(-4px) scale(1.01); /* Менш активний та плавніший ефект */
    background: transparent;
}

/* Зображення кроків */
.steps-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    transition: all 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Ще більш плавна та м'яка анімація для зображень */
}

/* Спеціальне зображення img-21.png для веб-версії з прозорим фоном */
img[src*="img-21.png"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

img[src*="img-21.png"]:hover,
img[src*="img-21.png"]:focus,
img[src*="img-21.png"]:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Додаткове прибирання можливих рамок через Bootstrap або браузер */
img[src*="img-21.png"].img-fluid {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

img[src*="img-21.png"].img-fluid:hover,
img[src*="img-21.png"].img-fluid:focus,
img[src*="img-21.png"].img-fluid:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Спеціальне зображення img-10.png - збільшено до 13см у висоту */
img[src*="img-10.png"] {
    max-height: 491px !important; /* 13 см ≈ 491px (378px + 113px) */
    max-width: 390px !important; /* Пропорційно збільшуємо ширину */
    width: auto !important;
    object-fit: contain !important;
}

/* Спеціальне зображення img-12.png - збільшено на 3см */
img[src*="img-12.png"] {
    max-height: 513px !important; /* Базовий 400px + 3см (113px) */
    max-width: 410px !important; /* Пропорційно збільшуємо ширину */
    width: auto !important;
    object-fit: contain !important;
}

/* Спеціальне зображення img-9.png - зменшено на 2см */
img[src*="img-9.png"] {
    max-height: 324px !important; /* Базовий 400px - 2см (76px) */
    max-width: 260px !important; /* Пропорційно зменшуємо ширину */
    width: auto !important;
    object-fit: contain !important;
}

/* Спеціальне зображення img-16.png - збільшено на 8см від попереднього розміру */
img[src*="img-16.png"] {
    max-height: 475px !important; /* Попередній 173px + 8см (302px) */
    max-width: 380px !important; /* Пропорційно збільшуємо ширину */
    width: auto !important;
    object-fit: contain !important;
}

/* Контейнер для img-10.png - забезпечуємо центрування */
.steps-item[data-step="1"] .steps-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px; /* Збільшена висота для нового розміру зображення */
}

/* Контейнер для img-12.png - забезпечуємо центрування */
.steps-item[data-step="2"] .steps-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px; /* Висота для збільшеного зображення img-12.png */
}

/* Підняття секції "Додавання товарів" максимально вище */
.steps-item-closer {
    margin-top: -4rem !important; /* Підняття секції вгору */
}

/* Контейнер для img-9.png - забезпечуємо центрування */
.steps-item[data-step="3"] .steps-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px; /* Висота для зменшеного зображення img-9.png */
}

/* Контейнер для img-16.png - забезпечуємо центрування */
.steps-item[data-step="4"] .steps-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 485px; /* Висота для збільшеного зображення img-16.png */
}

/* Збільшене зображення для 5-го кроку */
.steps-item[data-step="5"] .steps-image {
    max-width: 480px;
    transform: scale(1.1);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* Плавна анімація для 5-го кроку */
}

.steps-image:hover {
    transform: scale(1.02); /* Менш активне збільшення при hover */
}

/* Контент кроків */
.steps-content {
    padding: 1rem; /* Зменшуємо відступи для розширення тексту */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Більш плавна та м'яка анімація для контенту */
}

.steps-item:hover .steps-content {
    transform: translateY(-2px); /* Легке піднімання контенту при hover */
}

.steps-item:hover .steps-title {
    color: var(--primary-color) !important; /* Зміна кольору заголовку при hover */
}

.steps-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important; /* Трохи зменшено заголовки кроків */
    color: var(--text-dark) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Плавна анімація для заголовків */
}

.steps-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.1rem !important; /* Трохи зменшено опис кроків */
    color: var(--text-muted) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.7 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Плавна анімація для описів */
    margin-bottom: 0 !important;
}

/* Адаптивні стилі для кроків */
@media (max-width: 992px) {
    .steps-section {
        padding: 4rem 0;
    }
    
    .steps-main-title {
        font-size: 2.7rem !important; /* Збільшено для планшетів */
    }
    
    .steps-main-subtitle {
        font-size: 1.25rem !important; /* Збільшено для планшетів */
    }
    
    .steps-timeline-line {
        display: none; /* Приховуємо лінію на планшетах */
    }
    
    .step-number {
        display: none;
    }
    
    .steps-title {
        font-size: 1.7rem !important; /* Збільшено для планшетів */
    }
    
    .steps-description {
        font-size: 1.15rem !important; /* Збільшено для планшетів */
        word-break: keep-all !important; /* Заборона розриву слів та емодзі */
        white-space: pre-line !important; /* Зберігає пробіли та дозволяє ручні переноси */
        overflow-wrap: normal !important; /* Запобігаємо автоматичному переносу */
    }
    
    .steps-item {
        padding: 1.5rem 0;
    }
    
    /* Компактні відступи для планшетів */
    .steps-item-compact {
        margin-bottom: 32px !important; /* Зменшено для планшетів */
    }
    
    .steps-item-compact .col-lg-5,
    .steps-item-compact .col-md-6 {
        margin-bottom: 0.8rem !important; /* Ще менші відступи */
    }
    
    .steps-item-compact .steps-content {
        padding: 0.6rem; /* Ще менші відступи для розширення тексту на планшетах */
    }
    
    .steps-item-compact .steps-image-container {
        padding: 0.2rem; /* Зменшені відступи навколо зображень для планшетів */
    }
    
    /* Адаптивні розміри для img-10.png на великих планшетах */
    img[src*="img-10.png"] {
        max-height: 455px !important; /* Збільшено пропорційно (+3см) */
        max-width: 365px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="1"] .steps-image-container {
        min-height: 455px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-12.png на великих планшетах */
    img[src*="img-12.png"] {
        max-height: 470px !important; /* Базовий планшетний розмір + 3см */
        max-width: 380px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="2"] .steps-image-container {
        min-height: 470px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-9.png на великих планшетах */
    img[src*="img-9.png"] {
        max-height: 280px !important; /* Зменшено пропорційно (-2см) */
        max-width: 225px !important; /* Пропорційно зменшена ширина */
    }
    
    .steps-item[data-step="3"] .steps-image-container {
        min-height: 280px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-16.png на великих планшетах */
    img[src*="img-16.png"] {
        max-height: 412px !important; /* Збільшено пропорційно (+8см) */
        max-width: 330px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="4"] .steps-image-container {
        min-height: 412px !important; /* Адаптивна висота */
    }
}

@media (max-width: 768px) {
    .steps-section {
        padding: 3rem 0;
    }
    
    .steps-main-title {
        font-size: 2.4rem !important; /* Збільшено для мобільних */
        margin-bottom: 1rem !important;
    }
    
    .steps-main-subtitle {
        font-size: 1.15rem !important; /* Збільшено для мобільних */
    }
    
    .steps-timeline-container {
        padding: 1rem 0;
    }
    
    .step-number {
        display: none;
    }
    
    /* Збільшене зображення для 5-го кроку на мобільних */
    .steps-item[data-step="5"] .steps-image {
        max-width: 100%;
        transform: scale(1.02);
    }
    
    .steps-image-container {
        padding: 0.3rem;
        border-radius: 0;
    }
    
    .steps-image {
        max-width: 100%;
        border-radius: 0;
    }
    
    /* Збільшене зображення для 5-го кроку на планшетах */
    .steps-item[data-step="5"] .steps-image {
        max-width: 100%;
        transform: scale(1.05);
    }
    
    .steps-content {
        padding: 0.7rem; /* Зменшуємо відступи для розширення тексту на мобільних */
    }
    
    .steps-title {
        font-size: 1.6rem !important; /* Збільшено для мобільних */
        margin-bottom: 0.8rem !important;
    }
    
    .steps-description {
        font-size: 1.1rem !important; /* Збільшено для мобільних */
    }
    
    .steps-item {
        padding: 1rem 0;
    }
    
    /* Компактні відступи для планшетів */
    .steps-item-compact {
        margin-bottom: 28px !important; /* Ще менше для планшетів */
    }
    
    .steps-item-compact .col-lg-5,
    .steps-item-compact .col-md-6 {
        margin-bottom: 0.6rem !important; /* Мінімальні відступи */
    }
    
    .steps-item-compact .steps-content {
        padding: 0.4rem; /* Ще менші відступи для максимального розширення тексту */
    }
    
    .steps-item-compact .steps-image-container {
        padding: 0.15rem; /* Мінімальні відступи навколо зображень */
    }
    
    /* Адаптивні розміри для img-10.png на планшетах */
    img[src*="img-10.png"] {
        max-height: 416px !important; /* Збільшено пропорційно (+3см) */
        max-width: 325px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="1"] .steps-image-container {
        min-height: 416px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-12.png на планшетах */
    img[src*="img-12.png"] {
        max-height: 430px !important; /* Базовий планшетний розмір + 3см */
        max-width: 340px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="2"] .steps-image-container {
        min-height: 430px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-9.png на планшетах */
    img[src*="img-9.png"] {
        max-height: 250px !important; /* Зменшено пропорційно (-2см) */
        max-width: 200px !important; /* Пропорційно зменшена ширина */
    }
    
    .steps-item[data-step="3"] .steps-image-container {
        min-height: 250px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-16.png на планшетах */
    img[src*="img-16.png"] {
        max-height: 358px !important; /* Збільшено пропорційно (+8см) */
        max-width: 285px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="4"] .steps-image-container {
        min-height: 358px !important; /* Адаптивна висота */
    }
}

@media (max-width: 576px) {
    .steps-main-title {
        font-size: 2.1rem !important; /* Збільшено для малих екранів */
    }
    
    .steps-main-subtitle {
        font-size: 1.1rem !important; /* Збільшено для малих екранів */
    }
    
    .step-number {
        display: none;
    }
    
    /* Збільшене зображення для 5-го кроку на малих екранах */
    .steps-item[data-step="5"] .steps-image {
        max-width: 100%;
        transform: scale(1.0);
    }
    
    .steps-image-container {
        padding: 0.2rem;
        border-radius: 0;
    }
    
    .steps-content {
        padding: 0.5rem; /* Мінімальні відступи для найменших екранів */
    }
    
    .steps-title {
        font-size: 1.5rem !important; /* Збільшено для малих екранів */
    }
    
    .steps-description {
        font-size: 1.05rem !important; /* Збільшено для малих екранів */
        line-height: 1.6 !important;
    }
    
    /* Компактні відступи для мобільних */
    .steps-item-compact {
        margin-bottom: 24px !important; /* Мінімальні відступи для мобільних */
    }
    
    .steps-item-compact .col-lg-5,
    .steps-item-compact .col-md-6 {
        margin-bottom: 0.5rem !important; /* Мінімальні відступи між колонками */
    }
    
    .steps-item-compact .steps-content {
        padding: 0.3rem; /* Максимально мінімальні відступи для розширення тексту */
    }
    
    .steps-item-compact .steps-image-container {
        padding: 0.1rem; /* Мінімальні відступи навколо зображень для мобільних */
    }
    
    /* Адаптивні розміри для img-10.png на мобільних */
    img[src*="img-10.png"] {
        max-height: 364px !important; /* Збільшено пропорційно (+3см) */
        max-width: 286px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="1"] .steps-image-container {
        min-height: 364px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-12.png на мобільних */
    img[src*="img-12.png"] {
        max-height: 380px !important; /* Базовий мобільний розмір + 3см */
        max-width: 300px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="2"] .steps-image-container {
        min-height: 380px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-9.png на мобільних */
    img[src*="img-9.png"] {
        max-height: 220px !important; /* Зменшено пропорційно (-2см) */
        max-width: 175px !important; /* Пропорційно зменшена ширина */
    }
    
    .steps-item[data-step="3"] .steps-image-container {
        min-height: 220px !important; /* Адаптивна висота */
    }
    
    /* Адаптивні розміри для img-16.png на мобільних */
    img[src*="img-16.png"] {
        max-height: 302px !important; /* Збільшено пропорційно (+8см) */
        max-width: 240px !important; /* Пропорційно збільшена ширина */
    }
    
    .steps-item[data-step="4"] .steps-image-container {
        min-height: 302px !important; /* Адаптивна висота */
    }
}

/* Компактні відступи між кроками - 1см */
.steps-item-compact {
    margin-bottom: 38px !important; /* 1см ≈ 38px */
}

/* Зменшені внутрішні відступи для компактності */
.steps-item-compact .row {
    margin-bottom: 0 !important;
}

.steps-item-compact .col-lg-5,
.steps-item-compact .col-md-6 {
    margin-bottom: 1rem !important; /* Зменшені відступи між колонками */
}

.steps-item-compact .steps-content {
    padding: 0.7rem; /* Ще менші відступи для розширення тексту */
}

.steps-item-compact .steps-image-container {
    padding: 0.3rem; /* Зменшені відступи навколо зображень */
}

/* Спеціальні ефекти для кроків - прибрано для чистого вигляду */
.steps-item:nth-child(even) .steps-image-container {
    background: transparent;
}

.steps-item:nth-child(odd) .steps-image-container {
    background: transparent;
}

/* Анімації для кроків */
@keyframes stepNumberPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        background: #000000;
        color: #ffffff;
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        background: #000000;
        color: #ffffff;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        background: #000000;
        color: #ffffff;
    }
}

@keyframes stepImageFloat {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1px) scale(1.005); /* Зменшено з -5px та 1.02 до -1px та 1.005 */
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

/* Анімація появи секції кроків */
@keyframes stepsAppear {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibility - зменшені анімації для користувачів з prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .steps-item,
    .step-number,
    .steps-image,
    .steps-image-container,
    .steps-main-title,
    .steps-main-subtitle {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .step-number:hover,
    .steps-image-container:hover,
    .steps-image:hover {
        transform: none !important;
    }
}

/* ========== СЕКЦІЯ СПРОБУЙТЕ ========== */
.try-section {
    background: #f8f9fa;
    padding: 5rem 0;
    position: relative;
    color: #000000;
}

.try-content {
    padding: 1rem 0;
}

.try-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.5rem !important;
    color: #000000 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.try-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.2rem !important;
    color: #000000 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.try-cta {
    padding: 1rem 0;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

/* Темна кнопка */
.try-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000000 !important;
    color: #ffffff !important;
    border: none;
    padding: 1rem 2.5rem;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.01em;
    min-width: 200px;
    margin-right: 5cm;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0) scale(1);
}

.try-button:hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.try-button:focus {
    background: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.try-button:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Веб-версія секція */
.web-section-row {
    min-height: 343px; /* Зменшено на 1.5см (57px) для десктопу */
}

.web-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрування по вертикалі */
    height: 100%; /* Використовуємо всю висоту контейнера */
    padding: 1rem 0;
    margin-top: 0; /* Прибираємо негативний margin */
}

.web-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.7rem !important; /* Збільшено заголовок веб-версії */
    color: #000000 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.web-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.35rem !important; /* Збільшено опис веб-версії */
    color: #000000 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

/* Контейнер зображення веб-версії */
.web-image-container {
    padding: 1rem;
    text-align: center;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important; /* Змінено з hidden на visible */
    box-shadow: none !important;
    border: none !important;
}

.web-image-container:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.web-image-container * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Зображення веб-версії */
.web-image {
    width: 100%;
    max-width: 480px;
    height: auto;
    object-fit: contain;
    border-radius: 0 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: brightness(1.0) contrast(1.0);
    transform: scale(1.1);
    /* Початкові значення для анімації */
    opacity: 1;
    background: transparent !important; /* Прозорий фон зображення */
    border: none !important; /* Прибираємо всі рамки */
    outline: none !important; /* Прибираємо outline */
    box-shadow: none !important; /* Прибираємо тіні */
}

.web-image:hover {
    transform: scale(1.15);
    filter: brightness(1.05) contrast(1.05);
    background: transparent !important; /* Прозорий фон при hover */
    border: none !important; /* Прибираємо всі рамки */
    outline: none !important; /* Прибираємо outline */
    box-shadow: none !important; /* Прибираємо всі тіні */
    border-radius: 0 !important; /* Прибираємо заокруглення */
}

/* Адаптивні стилі для try секції */
@media (max-width: 992px) {
    .try-section {
        padding: 4rem 0;
    }
    
    .try-title {
        font-size: 2.2rem !important;
    }
    
    .try-description {
        font-size: 1.1rem !important;
    }
    
    .web-title {
        font-size: 2.4rem !important; /* Збільшено для планшетів */
    }
    
    .web-description {
        font-size: 1.25rem !important; /* Збільшено для планшетів */
    }
    
    .web-content {
        margin-top: -2cm;
    }
    
    .try-button {
        padding: 0.9rem 2rem;
        font-size: 1rem !important;
        min-width: 180px;
        margin-right: 3cm;
    }
}

@media (max-width: 768px) {
    .try-section {
        padding: 3rem 0;
    }
    
    .try-title {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .try-description {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .web-title {
        font-size: 2.2rem !important; /* Збільшено для мобільних */
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .web-description {
        font-size: 1.15rem !important; /* Збільшено для мобільних */
        text-align: center !important;
    }
    
    .web-content {
        margin-top: -1.5cm;
    }
    
    .try-button {
        padding: 0.8rem 1.8rem;
        font-size: 0.95rem !important;
        min-width: 160px;
        margin-right: 2cm;
    }
    
    .web-image {
        max-width: 90%; /* Немного меньше для планшетов */
        transform: scale(0.9);
        background: transparent !important; /* Прозорий фон для планшетів */
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .web-image-container {
        padding: 0.5rem;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border: none;
        text-align: center;
        margin-top: -1rem; /* Поднимаем ближе к тексту */
    }
    
    .web-section-row {
        min-height: 350px; /* Мінімальна висота для планшетів */
    }
    
    .web-content {
        min-height: 300px; /* Мінімальна висота для планшетів */
    }
    
    .try-cta {
        text-align: center !important;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .try-title {
        font-size: 1.8rem !important;
    }
    
    .try-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    .web-title {
        font-size: 2rem !important; /* Збільшено для малих екранів */
        text-align: center !important;
    }
    
    .web-description {
        font-size: 1.1rem !important; /* Збільшено для малих екранів */
        line-height: 1.6 !important;
        text-align: center !important;
    }
    
    .web-content {
        margin-top: -1cm;
    }
    
             .try-button {
        width: 100%;
        max-width: 280px;
        padding: 0.9rem 1rem;
        margin-right: 0;
    }
    
    .web-image-container {
        padding: 0.3rem;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border: none;
        text-align: center;
        margin-top: -1.5rem; /* Поднимаем еще выше к тексту */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .web-section-row {
        min-height: 250px; /* Уменьшенная высота для компактности */
        flex-direction: column; /* Вертикальное расположение на мобильных */
    }
    
    .web-section-row .col-lg-6 {
        flex: none;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
    }
    
    .web-content {
        min-height: auto; /* Убираем фиксированную высоту */
        text-align: center; /* Центрируем текст */
        margin-bottom: 0.5rem; /* Небольшой отступ до изображения */
    }
    
    .web-image {
        max-width: 70%; /* Значительно меньше для мобильных */
        transform: scale(0.8);
        background: transparent !important; /* Прозорий фон для мобільних */
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 auto; /* Центрируем изображение */
    }
    
    .web-image:hover {
        transform: scale(0.85); /* Небольшое увеличение при hover */
        background: transparent !important; /* Прозорий фон при hover на мобільних */
        border: none !important;
        box-shadow: none !important;
    }
 }

/* Accessibility - зменшені анімації для користувачів з prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .try-title,
    .try-description,
    .try-button,
    .web-title,
    .web-description,
    .web-image,
    .try-cta {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .try-button:hover,
    .web-image:hover {
        transform: none !important;
    }
}

/* ========== СЕКЦІЯ ТАРИФІВ ========== */
.pricing-section {
    background: #ffffff;
    padding: 3rem 0;
    position: relative;
}

.pricing-main-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.5rem !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

.pricing-main-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.3rem !important;
    color: var(--text-muted) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.6 !important;
    max-width: none !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0);
}

/* Картки тарифів */
.pricing-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    position: relative;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Більш плавна анімація */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px; /* Фіксована мінімальна висота */
    /* Початкові значення для анімації */
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pricing-card:hover {
    transform: translateY(-4px); /* Менш активний рух */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #dee2e6;
}

/* Виділена картка (Максимальний) */
.pricing-card-featured {
    border: 2px solid #ffc107;
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
}

.pricing-card-featured:hover {
    border-color: #ffb400;
    box-shadow: 0 20px 40px rgba(255, 193, 7, 0.2);
}

/* Заголовок картки */
.pricing-card-header {
    text-align: center;
    margin-bottom: 1rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Заголовок для останньої картки (без фіксованої висоти) */
.pricing-card-featured .pricing-card-header {
    min-height: auto;
    margin-bottom: 0.5rem;
}

/* Спеціальні стилі для блоку "Максимальний" */
.pricing-card-featured {
    min-height: 400px; /* Така ж висота як звичайні картки */
}

.pricing-card-featured .pricing-card-body {
    margin-top: 0;
    padding-top: 0.5rem;
    min-height: 200px; /* Більше місця для списку функцій */
}

.pricing-card-featured .pricing-features {
    margin-top: 0;
    margin-bottom: 0;
}

.pricing-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: var(--text-dark) !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pricing-price {
    margin-bottom: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-amount {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    color: var(--text-dark) !important;
    line-height: 1 !important;
}

.price-period {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    color: var(--text-muted) !important;
}

/* Тіло картки */
.pricing-card-body {
    flex: 1;
    margin-bottom: 1rem;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Тіло для останньої картки (без фіксованої висоти) */
.pricing-card-featured .pricing-card-body {
    min-height: auto;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

.pricing-feature:last-child {
    margin-bottom: 0;
}

.pricing-feature i {
    margin-right: 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.pricing-feature span {
    color: var(--text-dark);
    font-weight: 400 !important;
}

/* Підвал картки */
.pricing-card-footer {
    margin-top: auto;
}

/* Кнопки тарифів */
.pricing-btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1rem !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Більш плавна анімація */
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
    text-align: center !important;
}

.pricing-btn:active {
    transform: translateY(0) !important;
}

/* Зелена кнопка (безкоштовна версія) */
.pricing-btn-free {
    background: #28a745 !important;
    color: #ffffff !important;
}

.pricing-btn-free:hover,
.pricing-btn-free:focus {
    background: #218838 !important;
    color: #ffffff !important;
    transform: translateY(-1px); /* Менш активний рух */
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    text-decoration: none !important;
}

/* Чорні кнопки (платні тарифи) */
.pricing-btn-dark {
    background: #000000 !important;
    color: #ffffff !important;
}

.pricing-btn-dark:hover,
.pricing-btn-dark:focus {
    background: #1a1a1a !important;
    color: #ffffff !important;
    transform: translateY(-1px); /* Менш активний рух */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    text-decoration: none !important;
}

/* Помаранчева кнопка (максимальний тариф) */
.pricing-btn-warning {
    background: #ffc107 !important;
    color: #000000 !important;
}

.pricing-btn-warning:hover,
.pricing-btn-warning:focus {
    background: #ffb400 !important;
    color: #000000 !important;
    transform: translateY(-1px); /* Менш активний рух */
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    text-decoration: none !important;
}

/* Адаптивні стилі для тарифів */
@media (max-width: 1200px) {
    .pricing-card {
        padding: 1rem 0.875rem;
        min-height: 380px;
    }
    
    .pricing-card-featured {
        min-height: 380px;
    }
    
    .pricing-card-header {
        min-height: 115px;
    }
    
    .pricing-card-body {
        min-height: 90px;
    }
    
    .pricing-card-featured .pricing-card-body {
        min-height: 180px;
    }
    
    .price-amount {
        font-size: 1.8rem !important;
    }
    
    .pricing-title {
        font-size: 1rem !important;
    }
    
    .pricing-main-title {
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 992px) {
    .pricing-section {
        padding: 2.5rem 0;
    }
    
    .pricing-main-title {
        font-size: 2.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .pricing-main-subtitle {
        font-size: 1.1rem !important;
    }
    
    .pricing-card {
        padding: 1rem 0.75rem;
        margin-bottom: 1rem;
        min-height: 360px;
    }
    
    .pricing-card-featured {
        min-height: 360px;
    }
    
    .pricing-card-header {
        min-height: 110px;
    }
    
    .pricing-card-body {
        min-height: 85px;
    }
    
    .pricing-card-featured .pricing-card-body {
        min-height: 160px;
    }
    
    .price-amount {
        font-size: 1.7rem !important;
    }
    
    .pricing-title {
        font-size: 1rem !important;
    }
    
    .pricing-feature {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 768px) {
    .pricing-section {
        padding: 2rem 0;
    }
    
    .pricing-main-title {
        font-size: 2.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .pricing-main-subtitle {
        font-size: 1rem !important;
        white-space: normal !important;
    }
    
    .pricing-card {
        padding: 0.875rem 0.625rem;
        min-height: 340px;
    }
    
    .pricing-card-featured {
        min-height: 340px;
    }
    
    .pricing-card-header {
        min-height: 100px;
    }
    
    .pricing-card-body {
        min-height: 80px;
    }
    
    .pricing-card-featured .pricing-card-body {
        min-height: 140px;
    }
    
    .price-amount {
        font-size: 1.6rem !important;
    }
    
    .pricing-title {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .pricing-feature {
        font-size: 0.7rem !important;
        margin-bottom: 0.4rem;
    }
    
    .pricing-btn {
        font-size: 0.85rem !important;
        padding: 0.6rem 1rem !important;
    }
}

@media (max-width: 576px) {
    .pricing-main-title {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .pricing-main-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        white-space: normal !important;
    }
    
    .pricing-card {
        padding: 0.75rem 0.5rem;
        margin-bottom: 0.75rem;
        min-height: 320px;
    }
    
    .pricing-card-featured {
        min-height: 320px;
    }
    
    .pricing-card-header {
        min-height: 90px;
    }
    
    .pricing-card-body {
        min-height: 70px;
    }
    
    .pricing-card-featured .pricing-card-body {
        min-height: 120px;
    }
    
    .price-amount {
        font-size: 1.5rem !important;
    }
    
    .pricing-title {
        font-size: 0.9rem !important;
    }
    
    .pricing-feature {
        font-size: 0.65rem !important;
    }
    
    .pricing-btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.875rem !important;
    }
    
    /* Додатковий простір між картками на мобільних */
    .pricing-card-footer {
        margin-top: 0.75rem;
    }
}

/* Анімації для секції тарифів */
@keyframes pricingCardAppear {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pricingButtonPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02); /* Менш активне масштабування */
    }
    100% {
        transform: scale(1);
    }
}

/* Accessibility - зменшені анімації для користувачів з prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .pricing-card,
    .pricing-btn,
    .pricing-main-title,
    .pricing-main-subtitle {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .pricing-card:hover,
    .pricing-btn:hover {
        transform: none !important;
    }
    
    @keyframes pricingButtonPulse {
        0%, 100% {
            transform: scale(1);
        }
    }
}

/* ========== СЕКЦІЯ ПРОТЕСТУЙТЕ ========== */
.test-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 1.5rem 0 !important;
    position: relative;
    overflow: hidden;
}

.test-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 193, 7, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.test-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    color: #ffffff !important;
    letter-spacing: -0.03em !important;
    line-height: 1.2 !important;
    margin-bottom: 0.8rem !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.test-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.6 !important;
    max-width: 700px !important;
    margin: 0 auto 1.5rem auto !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.test-button {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    padding: 1rem 2rem !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 220px !important;
}

.test-button:hover,
.test-button:focus {
    background: #1a1a1a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
}

.test-button:active {
    transform: translateY(0) !important;
}

/* ========== НОВА FAQ СЕКЦІЯ ========== */
.faq-new-section {
    background: #ffffff;
    padding: 2.5rem 0;
    position: relative;
}

/* Зменшуємо відступи секції для мобільних */
@media (max-width: 768px) {
    .faq-new-section {
        padding: 1.8rem 0; /* Зменшуємо вертикальні відступи */
    }
}

@media (max-width: 576px) {
    .faq-new-section {
        padding: 1.5rem 0; /* Ще менші відступи */
    }
}

.faq-new-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.7rem !important; /* Ще більше збільшуємо заголовок */
    color: var(--text-dark) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important; /* Зменшуємо відступ */
}

/* Десктопна версія - збільшуємо назад тільки для великих екранів */
@media (min-width: 993px) {
    .faq-new-title {
        font-size: 2.2rem !important;
    }
}

/* ФОРСУВАННЯ ОНОВЛЕННЯ СТИЛІВ FAQ */
.faq-new-section * {
    animation: none !important;
}

/* ДОДАТКОВІ СЕЛЕКТОРИ З МАКСИМАЛЬНОЮ СПЕЦИФІЧНІСТЮ */
@media screen and (max-width: 992px) {
    section[id="faq-new"] h2[class*="faq-new-title"] {
        font-size: 1.7rem !important; /* Оновлюємо */
    }
    section[id="faq-new"] h4[class*="faq-new-question-title"] {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media screen and (max-width: 768px) {
    section[id="faq-new"] h2[class*="faq-new-title"] {
        font-size: 1.7rem !important; /* Залишаємо великий */
    }
    section[id="faq-new"] h4[class*="faq-new-question-title"] {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media screen and (max-width: 576px) {
    section[id="faq-new"] h2[class*="faq-new-title"] {
        font-size: 1.7rem !important; /* Залишаємо великий */
    }
    section[id="faq-new"] h4[class*="faq-new-question-title"] {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media screen and (max-width: 480px) {
    section[id="faq-new"] h2[class*="faq-new-title"] {
        font-size: 1.7rem !important; /* Залишаємо великий */
    }
    section[id="faq-new"] h4[class*="faq-new-question-title"] {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

/* Мобільні стилі для FAQ заголовка - з високою специфічністю */
@media (max-width: 992px) {
    .faq-new-section .faq-new-title,
    .faq-new-section h2.faq-new-title,
    #faq-new .faq-new-title {
        font-size: 1.7rem !important; /* Великий шрифт */
    }
}

@media (max-width: 768px) {
    .faq-new-section .faq-new-title,
    .faq-new-section h2.faq-new-title,
    #faq-new .faq-new-title {
        font-size: 1.7rem !important; /* Великий шрифт */
    }
}

@media (max-width: 576px) {
    .faq-new-section .faq-new-title,
    .faq-new-section h2.faq-new-title,
    #faq-new .faq-new-title {
        font-size: 1.7rem !important; /* Великий шрифт */
    }
}

.faq-new-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1rem; /* Зменшуємо відступи між блоками */
}

/* Мобільні стилі для FAQ grid */
@media (max-width: 768px) {
    .faq-new-grid {
        gap: 0.6rem; /* Ще менші відступи для мобільних */
        grid-template-columns: 1fr; /* Одна колонка */
    }
    
    .faq-new-item {
        padding: 0.6rem 0.8rem; /* Менші внутрішні відступи */
        border-radius: 6px; /* Менший радіус */
    }
}

@media (max-width: 576px) {
    .faq-new-grid {
        gap: 0.5rem; /* Мінімальні відступи */
    }
    
    .faq-new-item {
        padding: 0.5rem 0.7rem; /* Мінімальні внутрішні відступи */
    }
}

.faq-new-item {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px; /* Зменшуємо радіус */
    padding: 0.75rem 1rem; /* Зменшуємо внутрішні відступи */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-new-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: #dee2e6;
}

.faq-new-question {
    margin-bottom: 0.5rem; /* Зменшуємо відступ між питанням та відповіддю */
}

.faq-new-question-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important; /* Трохи зменшуємо питання */
    color: var(--text-dark) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important; /* Зменшуємо висоту рядка */
    margin: 0 !important;
}

/* Десктопна версія - збільшуємо назад тільки для великих екранів */
@media (min-width: 993px) {
    .faq-new-question-title {
        font-size: 1.1rem !important;
    }
}

/* Мобільні стилі для FAQ питань - з високою специфічністю */
@media (max-width: 992px) {
    .faq-new-section .faq-new-question-title,
    .faq-new-section h4.faq-new-question-title,
    #faq-new .faq-new-question-title {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media (max-width: 768px) {
    .faq-new-section .faq-new-question-title,
    .faq-new-section h4.faq-new-question-title,
    #faq-new .faq-new-question-title {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media (max-width: 576px) {
    .faq-new-section .faq-new-question-title,
    .faq-new-section h4.faq-new-question-title,
    #faq-new .faq-new-question-title {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media (max-width: 480px) {
    .faq-new-section .faq-new-title,
    .faq-new-section h2.faq-new-title,
    #faq-new .faq-new-title {
        font-size: 1.7rem !important; /* Великий заголовок */
    }
    
    .faq-new-section .faq-new-question-title,
    .faq-new-section h4.faq-new-question-title,
    #faq-new .faq-new-question-title {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

@media (max-width: 360px) {
    .faq-new-section .faq-new-title,
    .faq-new-section h2.faq-new-title,
    #faq-new .faq-new-title {
        font-size: 1.7rem !important; /* Великий заголовок */
    }
    
    .faq-new-section .faq-new-question-title,
    .faq-new-section h4.faq-new-question-title,
    #faq-new .faq-new-question-title {
        font-size: 0.95rem !important; /* Трохи зменшуємо */
    }
}

.faq-new-answer {
    margin: 0;
}

.faq-new-answer p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important; /* Ще трохи зменшуємо відповіді */
    color: var(--text-muted) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.5 !important; /* Трохи зменшуємо висоту рядка */
    margin: 0 !important;
}

/* Десктопна версія - збільшуємо назад тільки для великих екранів */
@media (min-width: 993px) {
    .faq-new-answer p {
        font-size: 1rem !important;
    }
}

/* Мобільні стилі для FAQ відповідей - з високою специфічністю */
@media (max-width: 992px) {
    .faq-new-section .faq-new-answer p,
    #faq-new .faq-new-answer p {
        font-size: 0.85rem !important; /* Ще трохи зменшуємо відповіді */
    }
}

@media (max-width: 768px) {
    .faq-new-section .faq-new-answer p,
    #faq-new .faq-new-answer p {
        font-size: 0.85rem !important; /* Ще трохи зменшуємо відповіді */
    }
}

@media (max-width: 576px) {
    .faq-new-section .faq-new-answer p,
    #faq-new .faq-new-answer p {
        font-size: 0.85rem !important; /* Ще трохи зменшуємо відповіді */
    }
}

@media (max-width: 480px) {
    .faq-new-section .faq-new-answer p,
    #faq-new .faq-new-answer p {
        font-size: 0.85rem !important; /* Ще трохи зменшуємо відповіді */
    }
}

@media (max-width: 360px) {
    .faq-new-section .faq-new-answer p,
    #faq-new .faq-new-answer p {
        font-size: 0.85rem !important; /* Ще трохи зменшуємо відповіді */
    }
}

/* Адаптивні стилі для тест секції */
@media (max-width: 992px) {
    .test-section {
        padding: 2rem 0;
    }
    
    .test-title {
        font-size: 2rem !important;
    }
    
    .test-description {
        font-size: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .test-button {
        font-size: 1rem !important;
        padding: 0.875rem 1.75rem !important;
        min-width: 200px !important;
    }
    
    .faq-new-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .test-section {
        padding: 1.75rem 0;
    }
    
    .test-title {
        font-size: 1.8rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .test-description {
        font-size: 0.95rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .test-button {
        font-size: 0.95rem !important;
        padding: 0.75rem 1.5rem !important;
        min-width: 180px !important;
    }
    
    .faq-new-section {
        padding: 2rem 0;
    }
    
    /* FAQ заголовок стилі видалено - використовуються нові стилі вище */
    
    .faq-new-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .faq-new-item {
        padding: 1rem 1.25rem;
    }
    
    /* FAQ питання стилі видалено - використовуються нові стилі вище */
    
    .faq-new-answer p {
        font-size: 0.85rem !important; /* Зменшуємо відповіді */
    }
}

@media (max-width: 768px) {
    .faq-new-section {
        padding: 1.2rem 0;
    }
    
    /* FAQ заголовок стилі видалено - використовуються нові стилі вище */
    
    .faq-new-grid {
        grid-template-columns: 1fr; /* Одна колонка на планшетах */
        gap: 0.4rem;
    }
    
    .faq-new-item {
        padding: 0.6rem 0.8rem;
        cursor: pointer;
        border-radius: 6px;
    }
    
    .faq-new-question {
        margin-bottom: 0.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* FAQ питання стилі видалено - використовуються нові стилі вище */
    
    .faq-new-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        padding: 0;
    }
    
    .faq-new-answer.expanded {
        max-height: 200px;
        padding: 0.5rem 0 0 0;
    }
    
    .faq-new-answer p {
        font-size: 0.75rem !important; /* Зменшуємо відповіді */
        line-height: 1.4 !important;
        margin: 0;
    }
    
    /* Индикатор раскрытия */
    .faq-new-question::after {
        content: '+';
        font-size: 0.8rem;
        font-weight: bold;
        color: #6c757d;
        transition: transform 0.3s ease;
        margin-left: 0.3rem;
        flex-shrink: 0;
    }
    
    .faq-new-item.expanded .faq-new-question::after {
        content: '−';
        transform: rotate(0deg);
    }
}

@media (max-width: 576px) {
    .test-section {
        padding: 1.5rem 0;
    }
    
    .test-title {
        font-size: 1.6rem !important;
    }
    
    .test-description {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    .test-button {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.25rem !important;
        min-width: 160px !important;
    }
    
    .faq-new-section {
        padding: 1rem 0;
    }
    
    /* FAQ заголовок стилі видалено - використовуються нові стилі вище */
    
    .faq-new-grid {
        grid-template-columns: 1fr; /* Одна колонка на мобильных */
        gap: 0.3rem;
    }
    
    .faq-new-item {
        padding: 0.4rem 0.6rem;
        cursor: pointer; /* Показать что это кликабельно */
        border-radius: 6px;
    }
    
    .faq-new-question {
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* FAQ питання стилі видалено - використовуються нові стилі вище */
    
    .faq-new-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        padding: 0;
    }
    
    .faq-new-answer.expanded {
        max-height: 200px; /* Достаточно для большинства ответов */
        padding: 0.4rem 0 0 0;
    }
    
    .faq-new-answer p {
        font-size: 0.7rem !important; /* Зменшуємо відповіді для малих екранів */
        line-height: 1.3 !important;
        margin: 0;
    }
    
    /* Индикатор раскрытия */
    .faq-new-question::after {
        content: '+';
        font-size: 0.7rem;
        font-weight: bold;
        color: #6c757d;
        transition: transform 0.3s ease;
        margin-left: 0.2rem;
        flex-shrink: 0;
    }
    
    .faq-new-item.expanded .faq-new-question::after {
        content: '−';
        transform: rotate(0deg);
    }
}

/* Accessibility - зменшені анімації для користувачів з prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .test-button,
    .faq-new-item {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .test-button:hover,
    .faq-new-item:hover {
        transform: none !important;
    }
}

/* ========== FOOTER СЕКЦІЯ ========== */
.footer-section {
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    padding: 1.5rem 0 1.5rem 0; /* Компактні відступи */
    position: relative;
}

/* Логотип у footer */
.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

/* Навігаційні посилання */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.footer-link {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    color: #6c757d !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.5 !important;
    white-space: nowrap;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--text-dark) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Копірайт */
.footer-copyright {
    font-family: 'Inter', sans-serif !important;
    color: #6c757d !important;
}

.footer-copyright p {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    line-height: 1.4 !important;
    margin-bottom: 0.1rem !important; /* Зменшуємо відступ */
}

/* Соціальні мережі */
.footer-social {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #495057 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 1.2rem;
}

.footer-social-link:hover,
.footer-social-link:focus {
    background: #e9ecef;
    border-color: #dee2e6;
    color: var(--text-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
}

.footer-social-link i {
    font-size: 1.1rem;
}

/* Розділювач */
.border-light {
    border-color: #e9ecef !important;
}

/* Адаптивні стилі для footer */
@media (max-width: 992px) {
    .footer-section {
        padding: 1.2rem 0; /* Компактні відступи для планшетів */
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-links {
        gap: 1rem;
        justify-content: center;
        margin-top: 0.8rem; /* Зменшуємо відступ */
    }
    
    .footer-link {
        font-size: 0.85rem !important;
    }
    
    .footer-social {
        justify-content: center;
        margin-top: 0.8rem; /* Зменшуємо відступ */
    }
}

@media (max-width: 768px) {
    .footer-section {
        padding: 0.3rem 0 0.2rem 0; /* Ще більш компактні відступи */
        position: relative !important; /* Для абсолютного позиціонування соц мереж */
    }
    
    /* Супер компактний футер - все в одному ряду */
    .footer-section .row {
        margin: 0 !important;
        align-items: center !important;
    }
    
    /* Перший ряд: лого, посилання та соц мережі в одному ряду */
    .footer-section .row:first-child {
        margin-bottom: 0.4rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important; /* Для позиціонування соц мереж */
    }
    
    .footer-section .row:first-child .col-lg-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        padding-right: 0.8rem !important;
    }
    
    .footer-section .row:first-child .col-lg-10 {
        flex: 1 !important;
        width: auto !important;
        padding-left: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Лого максимально компактно */
    .footer-logo {
        justify-content: flex-start;
        margin: 0;
    }
    
    .footer-logo-img {
        height: 24px !important; /* Дуже компактний лого */
        max-width: 90px !important;
    }
    
    /* Посилання компактно в ряд, залишаємо місце для соц мереж */
    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0.4rem 0.8rem; /* Мінімальні відступи */
        margin: 0;
        flex: 1;
        margin-right: 1rem; /* Відступ від соц мереж */
        order: 1; /* Розташовуємо перед соц мережами */
    }
    
    /* Переміщуємо "База знань" після "Дропшипінг" тільки на мобільних */
    .footer-links .footer-link:last-child {
        order: 2; /* База знань в кінці */
    }
    
    .footer-link {
        font-size: 0.6rem !important; /* Ще компактніший шрифт */
        white-space: nowrap;
        padding: 0.1rem 0.2rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
        line-height: 1.1;
    }
    
    .footer-link:hover {
        background-color: rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }
    
    /* Другий ряд: переміщуємо соц мережі в перший ряд */
    .footer-section .row:nth-child(2) {
        position: absolute !important;
        top: -8px !important; /* Підняли менше, щоб не накладалися */
        right: 10px !important; /* Менший відступ від краю */
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .footer-section .row:nth-child(2) .col-12 {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Третій ряд: тільки копірайт, максимально компактно */
    .footer-section .row:nth-child(3) {
        margin: 0 !important;
        margin-top: 0.2rem !important;
    }
    
    /* Соціальні мережі в правій частині першого ряду */
    .footer-social {
        display: flex !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        justify-content: flex-end !important;
        text-align: center !important;
    }
    
    .footer-social-link {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
        transition: all 0.2s ease;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #f8f9fa !important; /* Забезпечуємо фон */
        border: 1px solid #e9ecef !important; /* Забезпечуємо рамку */
        border-radius: 6px !important; /* Менший радіус для компактності */
        color: #495057 !important; /* Забезпечуємо колір */
    }
    
    .footer-social-link:hover {
        transform: translateY(-1px) scale(1.05);
        background: #e9ecef !important;
        border-color: #dee2e6 !important;
    }
    
    /* Переконуємося що іконки видимі */
    .footer-social-link i {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }
    
    .footer-copyright {
        margin: 0;
        text-align: center;
    }
    
    .footer-copyright p {
        font-size: 0.55rem !important; /* Ще менший шрифт */
        line-height: 1.1 !important;
        margin: 0 !important;
        text-align: center;
        opacity: 0.8;
        padding: 0 0.3rem;
    }
}

.footer-social-link i {
    font-size: 1rem;
}

@media (max-width: 576px) {
    .footer-section {
        padding: 0.2rem 0 0.15rem 0; /* Максимально компактні відступи */
    }
    
    /* Ще менший лого для малих екранів */
    .footer-logo-img {
        height: 22px !important;
        max-width: 80px !important;
    }
    
    /* Ще компактніші посилання */
    .footer-links {
        gap: 0.3rem 0.6rem; /* Мінімальні відступи */
        margin-right: 0.8rem; /* Менший відступ від соц мереж */
    }
    
    .footer-link {
        font-size: 0.55rem !important; /* Максимально компактний шрифт */
        padding: 0.05rem 0.15rem;
    }
    
    /* Менші соціальні кнопки */
    .footer-social-link {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .footer-social {
        gap: 0.4rem; /* Менший відступ між іконками */
    }
    
    /* Компактний копірайт */
    .footer-copyright p {
        font-size: 0.5rem !important; /* Максимально компактний */
        padding: 0 0.2rem;
    }
    
    /* Менші відступи між рядами */
    .footer-section .row:first-child {
        margin-bottom: 0.3rem !important;
    }
    
    .footer-section .row:nth-child(3) {
        margin-top: 0.1rem !important;
    }
    
    .footer-social-link i {
        font-size: 0.9rem;
    }
}

/* Додаткові стилі для дуже малих екранів */
@media (max-width: 480px) {
    .footer-section {
        padding: 0.3rem 0 0.2rem 0; /* Максимально компактні відступи */
    }
    
    /* Найменший лого */
    .footer-logo-img {
        height: 20px !important;
        max-width: 70px !important;
    }
    
    /* Максимально компактні посилання */
    .footer-links {
        gap: 0.2rem 0.5rem; /* Найменші відступи */
        margin-right: 0.6rem;
    }
    
    .footer-link {
        font-size: 0.6rem !important; /* Мінімальний читабельний розмір */
        padding: 0.08rem 0.2rem;
    }
    
    /* Найменші соціальні кнопки */
    .footer-social-link {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    
    .footer-social {
        gap: 0.3rem; /* Мінімальний відступ між іконками */
    }
    
    /* Найменший копірайт */
    .footer-copyright p {
        font-size: 0.55rem !important;
        padding: 0 0.2rem;
        line-height: 1.1 !important;
    }
    
    /* Мінімальні відступи між рядами */
    .footer-section .row:first-child {
        margin-bottom: 0.25rem !important;
    }
    
    .footer-section .row:nth-child(3) {
        margin-top: 0.05rem !important;
    }
    
    /* Соціальні мережі оптимально на дуже малих екранах */
    .footer-section .row:nth-child(2) {
        top: -5px !important; /* Оптимальна позиція на малих екранах */
        right: 5px !important; /* Менший відступ для малих екранів */
    }
}

/* Додатковий медіа-запит для дуже малих екранів */
@media (max-width: 360px) {
    .footer-section {
        padding: 0.1rem 0 0.1rem 0; /* Мінімальні відступи */
    }
    
    .footer-logo-img {
        height: 18px !important;
        max-width: 70px !important;
    }
    
    .footer-link {
        font-size: 0.5rem !important; /* Мінімальний читабельний шрифт */
        padding: 0.05rem 0.1rem;
    }
    
    .footer-links {
        gap: 0.2rem 0.4rem;
        margin-right: 0.6rem;
    }
    
    .footer-social-link {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
    
    .footer-social {
        gap: 0.3rem;
    }
    
    .footer-copyright p {
        font-size: 0.45rem !important;
        padding: 0 0.1rem;
    }
    
    .footer-section .row:nth-child(2) {
        top: -3px !important;
        right: 3px !important;
    }
}

/* Accessibility - зменшені анімації для користувачів з prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .footer-link,
    .footer-social-link {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .footer-link:hover,
    .footer-social-link:hover {
        transform: none !important;
    }
}

/* ========== СТИЛІ ДЛЯ ПІДСТОРІНКИ DIGITAL.HTML ========== */

/* Коригування позиції скролу для секцій підсторінки - індивідуальні значення для десктопу */
body[data-page="digital"] #advantages {
    scroll-margin-top: -4.5cm !important; /* Переваги: піднято на 1.5см вгору (було -6см, стало -4.5см) */
}

body[data-page="digital"] #demo {
    scroll-margin-top: -1cm; /* Демонстрація: піднято ще на 0.5см (було -1.5см, стало -1см) */
}

body[data-page="digital"] #steps {
    scroll-margin-top: calc(80px - 3.7cm); /* Простий старт: підняти на 0.3см (було 4см, стало 3.7см) */
}

body[data-page="digital"] #faq-new {
    scroll-margin-top: calc(80px - 4cm); /* FAQ: залишаємо як було - 4см */
}

/* Видаляємо padding щоб не конфліктувало зі scroll-margin-top */

/* Мобільні стилі для блоку Переваги на підсторінці (точна копія easy-start з головної) */
@media (max-width: 768px) {
    /* Налаштування контейнера секції advantages на мобільних */
    .digital-page #advantages .container-xl {
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 0 !important; /* Прибрані бокові відступи контейнера */
        padding-right: 0 !important;
        overflow: visible !important;
    }
    
    /* Налаштування блоку з заголовком на мобільних */
    .digital-page #advantages .features-header-reduced-spacing {
        margin-bottom: 20px !important; /* Невеликий відступ до ілюстрацій */
        padding-top: 0 !important;
    }
    
    /* Налаштування row елементів у advantages */
    .digital-page #advantages .row {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important; /* Прибрані бокові відступи рядків */
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Виправлення блоків ілюстрацій на мобільних */
    .digital-page #advantages .illustration-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 0 0 0 !important; /* Прибрані бокові відступи */
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important; /* Повна ширина блоку */
        margin: 0 !important;
        gap: 0 !important;
        overflow: visible !important; /* Дозвіл виходу за межі */
        position: relative !important;
    }
    
    /* Зображення в блоках ілюстрацій */
    .digital-page #advantages .illustration-image {
        width: 100% !important;
        margin-bottom: -50px !important; /* Негативний відступ - підняти текст на 2см вище */
        margin-top: -38px !important; /* Підняти зображення на 1.5см вище */
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .digital-page #advantages .illustration-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 200px !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        vertical-align: bottom !important; /* Прибирання зайвих відступів під зображенням */
    }
    
    /* Image wrapper налаштування */
    .digital-page #advantages .image-wrapper {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        line-height: 0 !important; /* Прибирання зайвих відступів */
    }
    
    /* Контент блоків ілюстрацій */
    .digital-page #advantages .illustration-content {
        margin-top: -20px !important; /* Додатковий негативний відступ для підняття тексту до зображень */
        padding-top: 0px !important; /* Ще зменшено на 22px - тепер текст максимально близько до зображень */
        width: 100vw !important; /* Повна ширина екрану */
        margin-left: calc(-50vw + 50%) !important; /* Розширення до країв екрану */
        margin-right: calc(-50vw + 50%) !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        background: white !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .digital-page #advantages .illustration-title {
        margin-top: 0 !important;
        margin-bottom: 8px !important; /* Відступ між заголовком і описом */
        font-size: 1.2rem !important; /* Збільшений шрифт для повної ширини */
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
        padding: 0 15px !important; /* Внутрішні відступи */
    }
    
    .digital-page #advantages .illustration-description {
        margin: 0 !important;
        padding: 0 15px !important; /* Внутрішні відступи */
        font-size: 1rem !important; /* Збільшений шрифт для повної ширини */
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important; /* Повна ширина екрану */
    }
    
    /* Bootstrap колонки на мобільних */
    .digital-page #advantages .col-12.col-sm-6.col-lg-3 {
        width: 100% !important;
        margin-bottom: 40px !important; /* Збільшений відступ між блоками для нових стилів */
        padding-left: 0 !important; /* Прибрані відступи для повної ширини */
        padding-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important; /* Вирівнювання по верху */
        overflow: visible !important; /* Дозвіл виходу за межі */
    }
    
    /* Обнулення зайвих відступів між блоками */
    .digital-page #advantages .row.g-4 {
        row-gap: 30px !important; /* Збільшений відступ між рядами блоків для нових стилів */
        margin-left: 0 !important;
        margin-right: 0 !important;
        column-gap: 0 !important; /* Прибрання відступів між колонками */
    }
    
    /* Підняття 2, 3, 4 картинки на 2см вище в мобільній версії */
    .digital-page #advantages .row.g-4 .col-12:nth-child(2),
    .digital-page #advantages .row.g-4 .col-12:nth-child(3),
    .digital-page #advantages .row.g-4 .col-12:nth-child(4) {
        margin-top: -50px !important; /* Підняти 2, 3, 4 блоки на 2см вище */
    }
    
    /* Зменшення відступу між тарифами і FAQ на підсторінці */
    .digital-page #pricing {
        padding-bottom: 1rem !important; /* Зменшуємо нижній відступ тарифів */
        margin-bottom: 0 !important;
    }
    
    /* Додаткове вирівнювання для тарифів на digital.html */
    .digital-page .pricing-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .digital-page .pricing-card-header {
        align-items: center !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    /* Повні стилі для тарифів на digital.html */
    .digital-page .price-amount {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 2rem !important;
        color: var(--text-dark) !important;
        line-height: 1 !important;
    }
    
    .digital-page .price-period {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 0.9rem !important;
        color: var(--text-muted) !important;
    }
    
    .digital-page .pricing-feature span {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 0.8rem !important;
        color: var(--text-dark) !important;
        line-height: 1.4 !important;
    }
    
    /* Стилі для мобільних тарифів на digital.html */
    .digital-page .pricing-mobile-title {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 600 !important;
        font-size: 1.5rem !important;
        color: var(--text-dark) !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    
    .digital-page .price-mobile-amount {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 2.5rem !important;
        color: var(--primary-color) !important;
        line-height: 1 !important;
    }
    
    .digital-page .price-mobile-period {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 1.1rem !important;
        color: var(--text-muted) !important;
        margin-left: 0.3rem !important;
    }
    
    .digital-page .pricing-mobile-feature {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 1rem !important;
        color: var(--text-dark) !important;
        line-height: 1.4 !important;
    }
    
    .digital-page .pricing-mobile-feature span {
        font-weight: 400 !important;
    }
    
    /* Додаткове вирівнювання для конкретного заголовку "Бізнес" */
    .digital-page .pricing-card:nth-child(3) .pricing-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 0.75rem auto !important;
        padding: 0 !important;
    }
    
    /* Ідентичні стилі для тарифів на dropshipping.html */
    .dropshipping-page .pricing-title {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important;
        color: var(--text-dark) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .dropshipping-page .pricing-card-header {
        align-items: center !important;
        text-align: center !important;
    }
    
    .dropshipping-page .price-amount {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 2rem !important;
        color: var(--text-dark) !important;
        line-height: 1 !important;
    }
    
    .dropshipping-page .price-period {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 0.9rem !important;
        color: var(--text-muted) !important;
    }
    
    .dropshipping-page .pricing-feature span {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 0.8rem !important;
        color: var(--text-dark) !important;
        line-height: 1.4 !important;
    }
    
    /* Стилі для мобільних тарифів на dropshipping.html */
    .dropshipping-page .pricing-mobile-title {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 600 !important;
        font-size: 1.5rem !important;
        color: var(--text-dark) !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    
    .dropshipping-page .price-mobile-amount {
        font-family: 'Manrope', sans-serif !important;
        font-weight: 700 !important;
        font-size: 2.5rem !important;
        color: var(--primary-color) !important;
        line-height: 1 !important;
    }
    
    .dropshipping-page .price-mobile-period {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 1.1rem !important;
        color: var(--text-muted) !important;
        margin-left: 0.3rem !important;
    }
    
    .dropshipping-page .pricing-mobile-feature {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400 !important;
        font-size: 1rem !important;
        color: var(--text-dark) !important;
        line-height: 1.4 !important;
    }
    
    .dropshipping-page .pricing-mobile-feature span {
        font-weight: 400 !important;
    }
    
    /* Налаштування скролу для dropshipping.html ідентично до digital.html */
    .dropshipping-page {
        scroll-behavior: smooth !important;
    }
    
    /* JavaScript повністю керує скролом для dropshipping.html */
    .dropshipping-page {
        scroll-behavior: smooth !important;
    }
    
    /* Очищаємо всі попередні CSS offset для dropshipping */
    body.dropshipping-page #advantages,
    body[data-page="dropshipping"] #advantages,
    .dropshipping-page #advantages,
    html .dropshipping-page #advantages,
    body.dropshipping-page #demo,
    body[data-page="dropshipping"] #demo,
    .dropshipping-page #demo,
    html .dropshipping-page #demo,
    body.dropshipping-page #steps,
    body[data-page="dropshipping"] #steps,
    .dropshipping-page #steps,
    html .dropshipping-page #steps,
    body.dropshipping-page #faq-new,
    body[data-page="dropshipping"] #faq-new,
    .dropshipping-page #faq-new,
    html .dropshipping-page #faq-new,
    body.dropshipping-page #pricing,
    body[data-page="dropshipping"] #pricing,
    .dropshipping-page #pricing,
    html .dropshipping-page #pricing {
        scroll-margin-top: 0 !important;
        padding-top: initial !important;
        margin-top: initial !important;
        transform: none !important;
    }
    
    .digital-page #faq-new {
        padding-top: 1rem !important; /* Зменшуємо верхній відступ FAQ */
        margin-top: 0 !important;
    }
    
    /* Збільшення зображень слайдів в блоці Демонстрація для підсторінки */
    .digital-page .demo-image img {
        height: 250px !important; /* Збільшуємо з 200px до 250px */
    }
    
    /* Стилі для підсторінки дропшипінг */
    .dropshipping-page .hero-section {
        padding: 8.5rem 0 4rem 0; /* Збільшено на 50px зверху */
    }
    
    .dropshipping-page .hero-main-title {
        font-size: 3.5rem;
        font-weight: 800;
        color: #1a1a1a;
    }
    
    .dropshipping-page .hero-subtitle {
        font-size: 1.6rem !important; /* Оптимальний розмір для кращої читабельності */
        color: #666;
        font-weight: 400;
    }
    
    /* Додатковий специфічний селектор для перекриття інлайнових стилів */
    .dropshipping-page .hero-text-content .hero-subtitle {
        font-size: 1.6rem !important; /* Оптимальна специфічність */
    }

/* Планшетні стилі для дропшипінг сторінки */
@media (max-width: 992px) {
    .dropshipping-page .hero-subtitle,
    .dropshipping-page .hero-text-content .hero-subtitle {
        font-size: 1.5rem !important; /* Оптимально зменшено для планшетів */
    }
}
    
    .dropshipping-page .hero-image {
        max-width: 50%;
        height: auto;
    }
    
    .dropshipping-page .hero-image-container {
        height: 100%;
        min-height: 400px;
    }
    
    /* Test Section стилі */
    .test-section {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }
    
    .test-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }
    
    .test-description {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
    }
    
    .test-button {
        font-size: 1.1rem;
        padding: 1rem 2rem;
        border-radius: 50px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        border: none;
        transition: all 0.3s ease;
    }
    
    .test-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 123, 255, 0.3);
    }
    
    /* Web Store Section стилі */
    .webstore-section {
        padding: 5rem 0;
    }
    
    .webstore-title {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 2rem;
        color: #1a1a1a;
    }
    
    .webstore-description {
        font-size: 1.1rem;
        line-height: 1.7;
        color: #666;
        margin-bottom: 1.5rem;
    }
    
    .webstore-image img {
        max-width: 100%;
        height: auto;
        border-radius: 15px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }
    
    /* Зменшення відступу між блоком "Індивідуальна розробка" і "Демонстрація" для всіх версій */
    .digital-page .custom-dev-section {
        padding-bottom: 2.5rem !important; /* Зменшуємо нижній відступ для десктопу */
        margin-bottom: 0 !important;
    }
    
    .digital-page .demo-section {
        padding-top: 2.5rem !important; /* Зменшуємо верхній відступ для десктопу */
        margin-top: 0 !important;
    }
}

/* Десктопна версія - зменшення відступів між секціями */
@media (min-width: 769px) {
    .digital-page .custom-dev-section {
        padding-bottom: 2rem !important; /* Зменшуємо для десктопу */
    }
    
    .digital-page .demo-section {
        padding-top: 2rem !important; /* Зменшуємо для десктопу */
    }
}

/* Мобільна версія - опускаємо на 5см (2см початкові + 3см додаткові) */
@media (max-width: 768px) {
    /* Додаємо відступ до херо секції, щоб зображення не обрізалось */
    .digital-page .hero-section {
        padding-top: 7rem !important; /* Збільшено на додаткові 50px верхній відступ херо секції */
        padding-bottom: 5rem !important; /* Збільшуємо нижній відступ, щоб зображення не перекривалось блоком "Переваги" */
    }
    
    /* Додатковий відступ для мобільного зображення */
    .digital-page .hero-section .col-12.order-2.d-block.d-md-none {
        margin-bottom: 3rem !important; /* Додатковий відступ знизу для мобільного зображення */
    }
    
    /* Відступ для мобільної версії текстового контенту */
    .digital-page .hero-section .col-12.order-1.d-block.d-md-none {
        margin-bottom: 2rem !important;
    }
    
    /* Менші відступи для мобільної версії між блоками "Індивідуальна розробка" і "Демонстрація" */
    .digital-page .custom-dev-section {
        padding-bottom: 1rem !important; /* Ще менше для мобільних */
    }
    
    .digital-page .demo-section {
        padding-top: 1rem !important; /* Ще менше для мобільних */
    }
    
    body[data-page="digital"] #advantages {
        scroll-margin-top: calc(80px - 9.3cm); /* Опускаємо ще на 2см (було -7.3см, стало -9.3см) */
        padding-top: 1.5rem !important; /* Повертаємо до меншого значення */
    }

    body[data-page="digital"] #demo {
        scroll-margin-top: calc(80px - 10.5cm); /* Опускаємо ще на 2см (було -8.5см, стало -10.5см) */
    }

    body[data-page="digital"] #steps {
        scroll-margin-top: calc(80px - 11cm); /* Опускаємо ще на 3см (було -8см, стало -11см) */
    }

    body[data-page="digital"] #faq-new {
        scroll-margin-top: calc(80px - 7cm); /* Опускаємо на 2см (було -5см, стало -7см) */
    }
    
    /* JavaScript повністю керує мобільним скролом для dropshipping.html */
    
    /* Мобільні стилі для блоку Переваги на dropshipping.html (точна копія easy-start з головної) */
    .dropshipping-page #advantages .container-xl {
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }
    
    .dropshipping-page #advantages .features-header-reduced-spacing {
        margin-bottom: 20px !important;
        padding-top: 0 !important;
    }
    
    .dropshipping-page #advantages .row {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Блоки ілюстрацій як в easy-start */
    .dropshipping-page #advantages .illustration-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 0 0 0 !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Зображення в блоках як в easy-start */
    .dropshipping-page #advantages .illustration-image {
        width: 100% !important;
        margin-bottom: -50px !important;
        margin-top: -38px !important;
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .dropshipping-page #advantages .illustration-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 200px !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
        vertical-align: bottom !important;
    }
    
    /* Image wrapper як в easy-start */
    .dropshipping-page #advantages .image-wrapper {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        line-height: 0 !important;
    }
    
    /* Контент блоків як в easy-start */
    .dropshipping-page #advantages .illustration-content {
        margin-top: -20px !important;
        padding-top: 0px !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        background: white !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .dropshipping-page #advantages .illustration-title {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        font-size: 1.2rem !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
        padding: 0 15px !important;
    }
    
    .dropshipping-page #advantages .illustration-description {
        margin: 0 !important;
        padding: 0 15px !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .dropshipping-page #advantages .col-12.col-sm-6.col-lg-3 {
        width: 100% !important;
        margin-bottom: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        overflow: visible !important;
    }
    
    .dropshipping-page #advantages .row.g-4 {
        row-gap: 30px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        column-gap: 0 !important;
    }
    
    .dropshipping-page #advantages .row.g-4 .col-12:nth-child(2),
    .dropshipping-page #advantages .row.g-4 .col-12:nth-child(3),
    .dropshipping-page #advantages .row.g-4 .col-12:nth-child(4) {
        margin-top: -50px !important;
    }
    
    /* Мобільні стилі для підсторінки дропшипінг */
    .dropshipping-page .hero-section {
        padding: 6.5rem 0 3rem 0 !important; /* Збільшено на 50px зверху */
    }
    
    .dropshipping-page .hero-main-title {
        font-size: 2.5rem !important;
    }
    
    .dropshipping-page .hero-subtitle,
    .dropshipping-page .hero-text-content .hero-subtitle {
        font-size: 1.4rem !important; /* Оптимально зменшено для мобільних */
    }
    
    .dropshipping-page .hero-image {
        max-width: 60% !important;
    }
}

/* Додаткові стилі для малих екранів - дропшипінг сторінка */
@media (max-width: 576px) {
    .dropshipping-page .hero-subtitle,
    .dropshipping-page .hero-text-content .hero-subtitle {
        font-size: 1.3rem !important; /* Оптимально зменшено для малих екранів */
    }
}

@media (max-width: 480px) {
    .dropshipping-page .hero-subtitle,
    .dropshipping-page .hero-text-content .hero-subtitle {
        font-size: 1.25rem !important; /* Оптимально зменшено для дуже малих екранів */
    }
    
    .dropshipping-page .hero-image-container {
        min-height: 300px !important;
    }
    
    .test-title {
        font-size: 2rem !important;
    }
    
    .test-description {
        font-size: 1rem !important;
    }
    
    .webstore-title {
        font-size: 2.2rem !important;
    }
    
    .webstore-description {
        font-size: 1rem !important;
    }

    /* Альтернативний метод для мобільних */
    .digital-page #advantages,
    .digital-page #demo,
    .digital-page #steps,
    .digital-page #faq-new {
        padding-top: 5cm; /* Додаємо більший відступ для мобільних */
    }
}

/* Адаптивні стилі для ШІ секції */
@media (min-width: 993px) {
    /* Десктопні стилі для кращого центрування */
    .ai-section .row {
        align-items: center; /* Центруємо весь контент вертикально */
    }
    
    .ai-image-container {
        min-height: 400px; /* Мінімальна висота для кращого центрування */
        transform: translateY(30px); /* Опускаємо зображення трохи нижче */
    }
}

@media (min-width: 1200px) {
    .ai-image {
        max-height: 587px; /* Зменшено на 3см для великих екранів (700px - 113px) */
        transform: scale(0.85); /* Зберігаємо зменшення */
    }
    
    .ai-image-container {
        min-height: 450px; /* Збільшуємо мінімальну висоту для великих екранів */
        transform: translateY(40px); /* Трохи більший зсув для великих екранів */
    }
}

@media (max-width: 992px) {
    .ai-section {
        padding: 2.5rem 0; /* Зменшено для компактності */
    }
    
    .ai-content {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    
    .ai-title {
        font-size: 2.2rem !important; /* Збільшено для планшетів */
        text-align: center;
    }
    
    .ai-subtitle {
        text-align: center;
        font-size: 1.05rem !important; /* Збільшено для планшетів */
    }
    
    .ai-image-container {
        padding: 0; /* Прибираємо padding */
        transform: none; /* Скидаємо десктопний transform на планшетах */
    }
    
    .ai-image {
        max-height: 400px; /* Зменшено на 3см для планшетів */
        transform: scale(0.85); /* Зберігаємо зменшення */
    }
}

@media (max-width: 768px) {
    .ai-section {
        padding: 2rem 0; /* Зменшено для компактності */
    }
    
    .ai-title {
        font-size: 2rem !important; /* Збільшено для мобільних */
        margin-bottom: 0.8rem !important;
    }
    
    .ai-subtitle {
        font-size: 1rem !important; /* Збільшено для мобільних */
        margin-bottom: 1rem !important;
    }
    
    /* Нова структура сітки для функцій на мобільних - 2 колонки */
    .ai-features-list {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 рівні колонки */
        gap: 0.6rem;
        margin-bottom: 0.5rem; /* Зменшуємо відступ знизу для списку функцій */
    }
    
    .ai-features-row {
        display: contents; /* Ігноруємо row контейнери на мобільних */
    }
    
    .ai-feature-item {
        padding: 0.5rem 0.6rem; /* Зменшено для компактності */
    }
    
    .ai-feature-icon {
        width: 30px; /* Зменшено для компактності */
        height: 30px; /* Зменшено для компактності */
        margin-right: 0.6rem; /* Зменшено для компактності */
        flex-shrink: 0; /* Запобігає зменшенню іконки */
    }
    
    .ai-feature-icon i {
        font-size: 1.05rem; /* Збільшено для мобільних */
    }
    
    .ai-feature-text {
        font-size: 0.95rem !important; /* Збільшено для мобільних */
        line-height: 1.3 !important;
    }
    
    .ai-image-container {
        padding: 0; /* Прибираємо padding */
        margin-top: -3.5rem; /* Підіймаємо зображення ще вище до заголовка */
        transform: none; /* Скидаємо десктопний transform на мобільних */
    }
    
    .ai-image {
        max-height: 550px; /* Значно збільшуємо розмір зображення */
        transform: scale(1.2); /* Значно збільшуємо масштаб */
        /* Прибираємо анімації */
        animation: none;
    }
}

@media (max-width: 576px) {
    .ai-features-list {
        gap: 0.5rem; /* Зменшено для компактності */
        margin-bottom: 0.3rem; /* Ще менший відступ знизу для малих екранів */
        grid-template-columns: 1fr 1fr; /* Залишаємо 2 колонки для малих екранів */
    }
    
    .ai-feature-item {
        padding: 0.4rem 0.5rem; /* Зменшено для компактності */
    }
    
    .ai-feature-icon {
        width: 28px; /* Зменшено для компактності */
        height: 28px; /* Зменшено для компактності */
        margin-right: 0.5rem; /* Зменшено для компактності */
    }
    
    .ai-feature-text {
        font-size: 0.85rem !important; /* Збільшено для малих екранів */
        line-height: 1.2 !important;
    }
    
    .ai-image-container {
        margin-top: -2.0rem; /* Підіймаємо зображення ще на 1см вище для малих екранів */
    }
    
    .ai-image {
        max-height: 480px; /* Значно збільшуємо розмір для малих екранів */
        transform: scale(1.1); /* Значно збільшуємо масштаб для малих екранів */
    }
}

/* Для користувачів, які віддають перевагу зменшеним анімаціям */
@media (prefers-reduced-motion: reduce) {
    .ai-image {
        animation: none;
        transition: none;
    }
    
    .ai-image:hover {
        animation: none;
        transform: none;
        transition: none;
    }
}

/* Кастомні стилі для зображення "Гаджети та Електроніка" */
.demo-card .gadgets-container .image-wrapper .gadgets-electronics-image {
    width: 10.9cm !important;
    height: 7.9cm !important;
    max-width: none !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
    transform: none !important; /* Прибрано зміщення для центрування */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Стилі для emoji в тарифних планах */
.pricing-emoji {
    font-size: 1.2rem !important;
    margin-right: 0.5rem !important;
    display: inline-block !important;
    min-width: 1.5rem !important;
    text-align: center !important;
}

/* Стилі для FAQ заголовків з емоджі */
.faq-new-question-title {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-new-title {
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
}

/* Анімація для емоджі в FAQ при hover */
.faq-new-item:hover .faq-new-question-title {
    transform: translateX(5px);
}

.faq-new-question-title::first-letter {
    display: inline-block;
    transition: all 0.3s ease;
    font-size: 1.3em;
}

.faq-new-item:hover .faq-new-question-title::first-letter {
    transform: scale(1.2) rotate(10deg);
    animation: bounce-emoji 0.6s ease-in-out;
}

/* Keyframe анімація для емоджі */
@keyframes bounce-emoji {
    0%, 100% { 
        transform: scale(1.2) rotate(10deg) translateY(0); 
    }
    50% { 
        transform: scale(1.3) rotate(-5deg) translateY(-3px); 
    }
}

/* Додатковий hover ефект для всього FAQ елементу */
.faq-new-item {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 1rem;
}

.faq-new-item:hover {
    background-color: rgba(248, 249, 250, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Стилі для сторінки умов */
.terms-content {
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
}

.terms-content h2 {
    color: var(--text-dark);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
}

.terms-content h2:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.terms-content h4 {
    color: var(--primary-color);
    margin-top: 1.5rem;
}

.terms-content ul {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.terms-content li {
    margin-bottom: 0.5rem;
}

.terms-content strong {
    color: var(--text-dark);
}

/* Мінімальні анімації для секції кроків - базові стилі */
.steps-section {
    will-change: scroll-position;
}

.steps-main-title,
.steps-main-subtitle,
.steps-image-container,
.steps-title,
.steps-description {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Мінімальні анімації для секції ШІ - базові стилі */
.ai-section {
    will-change: scroll-position;
}

.ai-title,
.ai-subtitle,
.ai-image,
.ai-feature-item {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.ai-feature-icon,
.ai-feature-text {
    transition: transform 0.2s ease-out;
}

/* ========== МОБІЛЬНИЙ СЛАЙДЕР ДЛЯ СЕКЦІЇ КРОКІВ ========== */

/* Контейнер мобільного слайдера */
.steps-mobile-slider {
    position: relative;
    overflow: visible;
    padding: 0.5rem 0;
    margin-top: -2rem;
}

.steps-slider-container {
    position: relative;
    width: 100vw; /* Максимально широкий контейнер */
    max-width: none; /* Прибираємо обмеження ширини */
    margin: 0;
    margin-left: calc(-50vw + 50%); /* Розтягуємо на весь екран */
    margin-right: calc(-50vw + 50%);
    padding: 0 10px; /* Ще менші бічні відступи */
}

.steps-slider-wrapper {
    overflow: hidden;
    border-radius: 1rem;
}

.steps-slider-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 500%; /* За замовчуванням для 5 слайдів */
    touch-action: pan-y pinch-zoom; /* Дозволяємо вертикальний скрол */
}

.steps-slide {
    width: 20%; /* За замовчуванням для 5 слайдів */
    flex-shrink: 0;
    padding: 0 0.2rem; /* Ще менші відступи між слайдами */
}

/* Для підсторінок з 3 слайдами */
body[data-page="digital"] .steps-slider-track,
.steps-slider-track[data-slides="3"] {
    width: 300%; /* 3 слайди * 100% */
}

body[data-page="digital"] .steps-slide,
.steps-slider-track[data-slides="3"] .steps-slide {
    width: 33.333%; /* 100% / 3 слайди */
}

/* Картка слайду */
.steps-mobile-card {
    background: #ffffff;
    border-radius: 1.2rem;
    padding: 0.3rem; /* Ще менші відступи для максимального розширення тексту */
    padding-top: 1.5rem; /* Зменшуємо верхній відступ для підняття зображень ближче до номерів */
    margin-top: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    height: 100%;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%; /* Максимальна ширина картки */
    /* Поліпшення читабельності */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Номер кроку */
.steps-mobile-number {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-dark);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    z-index: 10;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
    border: 2px solid #ffffff;
}

/* Зображення в слайді */
.steps-mobile-image {
    margin: 0.2rem 0; /* Ще більше зменшуємо відступи для підняття ближче до нумерації */
    flex-shrink: 0;
}

.steps-mobile-image img {
    max-width: 100%;
    width: 100%;
    height: 280px;
    max-height: 280px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* Контент слайду */
.steps-mobile-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%; /* Розтягуємо контент на всю ширину */
    padding: 0; /* Прибираємо зайві відступи */
    justify-content: flex-start; /* Вирівнюємо з початку */
    text-align: center; /* Центруємо весь контент */
    min-height: 115px; /* Зменшуємо мінімальну висоту відповідно до менших шрифтів */
}

.steps-mobile-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.3rem; /* Збільшуємо розмір заголовка */
    color: var(--text-dark);
    margin-bottom: 0.7rem;
    line-height: 1.3;
    width: 100%;
    text-align: center; /* Вирівнюємо посередині */
    word-wrap: normal; /* Переноси тільки цілих слів */
    hyphens: none; /* Відключаємо автоматичні переноси складів */
    overflow-wrap: normal; /* Переноси тільки між словами */
    word-break: keep-all; /* Зберігаємо цілісність слів */
    min-height: 2.4rem; /* Зменшуємо висоту */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%; /* Використовуємо максимальну ширину */
    padding: 0; /* Прибираємо відступи для максимального розтягування */
}

.steps-mobile-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem; /* Збільшуємо розмір тексту */
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0;
    flex-grow: 1;
    width: 100%;
    text-align: center; /* Вирівнюємо посередині */
    padding: 0; /* Прибираємо всі відступи для максимального розтягування */
    word-wrap: normal; /* Переноси тільки цілих слів */
    hyphens: none; /* Відключаємо автоматичні переноси складів */
    overflow-wrap: normal; /* Переноси тільки між словами */
    word-break: keep-all; /* Зберігаємо цілісність слів */
    text-rendering: optimizeLegibility; /* Поліпшуємо рендеринг тексту */
    min-height: 4.5rem; /* Зменшуємо висоту */
    display: flex;
    align-items: flex-start; /* Вирівнюємо текст зверху */
    justify-content: center;
    max-width: 100%; /* Використовуємо максимальну ширину */
}

/* Навігаційні кнопки */
.steps-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    border-radius: 0;
    width: 30px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-weight: 300;
}

.steps-slider-btn:hover {
    color: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.steps-slider-prev {
    left: 0;
}

.steps-slider-next {
    right: 0;
}

/* Індикатори точок */
.steps-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: 0.8rem;
}

.steps-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.steps-dot.active {
    background: var(--text-dark);
    transform: scale(1.2);
}

.steps-dot:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Адаптивні стилі для мобільного слайдера */
@media (max-width: 480px) {
    .steps-mobile-slider {
        padding: 0.5rem 0;
        margin-top: -1.5rem;
    }
    
    .steps-slider-container {
        padding: 0 15px; /* Ще менше відступи для максимальної ширини */
        width: 100vw; /* Максимальна ширина */
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    
    .steps-mobile-card {
        padding: 0.4rem; /* Мінімальні відступи для максимального простору тексту */
        padding-top: 1.8rem;
        margin-top: 1rem;
        border-radius: 1rem;
        min-height: 480px;
        width: 100%; /* Максимальна ширина картки */
    }
    
    .steps-mobile-content {
        min-height: 110px; /* Зменшуємо висоту відповідно до менших шрифтів */
    }
    
    .steps-mobile-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        border: 2px solid #ffffff;
    }
    
    .steps-mobile-image img {
        height: 260px;
        max-height: 260px;
    }
    
    .steps-mobile-title {
        font-size: 1.2rem; /* Збільшуємо для малих екранів */
        margin-bottom: 0.6rem;
        width: 100%;
        text-align: center;
        word-wrap: normal;
        hyphens: none;
        overflow-wrap: normal;
        word-break: keep-all;
        min-height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        padding: 0; /* Прибираємо всі відступи */
        line-height: 1.3;
    }
    
    .steps-mobile-description {
        font-size: 0.95rem; /* Збільшуємо розмір тексту */
        width: 100%;
        text-align: center;
        padding: 0;
        line-height: 1.4;
        word-wrap: normal;
        hyphens: none;
        overflow-wrap: normal;
        word-break: keep-all;
        min-height: 4.2rem;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        max-width: 100%;
    }
    
    .steps-slider-btn {
        width: 25px;
        height: 50px;
        font-size: 1.6rem;
    }
    
    .steps-slider-prev {
        left: 0;
    }
    
    .steps-slider-next {
        right: 0;
    }
    
    .steps-dot {
        width: 10px;
        height: 10px;
    }
}

/* Переопределення стилів для всіх зображень в мобільному слайдері */
.steps-mobile-slider img[src*="img-10.png"],
.steps-mobile-slider img[src*="img-12.png"],
.steps-mobile-slider img[src*="img-16.png"],
.steps-mobile-slider img[src*="img-13.png"] {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Спеціальні стилі для зображення №3 - робимо його меншим */
.steps-mobile-slider img[src*="img-9.png"] {
    width: 80% !important; /* Зменшуємо ширину */
    height: 240px !important; /* Зменшуємо висоту */
    max-height: 240px !important;
    max-width: 80% !important;
    object-fit: contain !important;
    margin: 0 auto !important; /* Центруємо */
}

/* Спеціальні стилі для слайдера №5 - підіймаємо зображення вище */
.steps-mobile-slider .steps-slide:nth-child(5) .steps-mobile-image {
    margin: -0.5rem 0; /* Негативний відступ зверху для підняття */
}

.steps-mobile-slider .steps-slide:nth-child(5) .steps-mobile-card {
    padding-top: 1.2rem; /* Зменшуємо верхній відступ */
}

/* Для малих екранів */
@media (max-width: 480px) {
    .steps-slider-container {
        padding: 0 8px; /* Ще менші бічні відступи для малих екранів */
    }
    
    .steps-slide {
        padding: 0 0.15rem; /* Ще менші відступи між слайдами */
    }
    
    .steps-mobile-card {
        padding: 0.2rem; /* Мінімальні відступи в картках */
        padding-top: 1.8rem; /* Відступ зверху */
    }
    
    .steps-mobile-slider img[src*="img-10.png"],
    .steps-mobile-slider img[src*="img-12.png"],
    .steps-mobile-slider img[src*="img-16.png"],
    .steps-mobile-slider img[src*="img-13.png"] {
        height: 260px !important;
        max-height: 260px !important;
    }
    
    /* Спеціальні стилі для зображення №3 на малих екранах */
    .steps-mobile-slider img[src*="img-9.png"] {
        width: 75% !important; /* Ще менше на малих екранах */
        height: 220px !important; /* Зменшуємо висоту */
        max-height: 220px !important;
        max-width: 75% !important;
        margin: 0 auto !important; /* Центруємо */
    }
    
    /* Спеціальні стилі для слайдера №5 на малих екранах */
    .steps-mobile-slider .steps-slide:nth-child(5) .steps-mobile-image {
        margin: -0.8rem 0; /* Ще більше підіймаємо на малих екранах */
    }
    
    .steps-mobile-slider .steps-slide:nth-child(5) .steps-mobile-card {
        padding-top: 1rem; /* Ще менший верхній відступ */
    }
}

/* ========== МОБІЛЬНИЙ СЛАЙДЕР ТАРИФІВ ========== */

/* Контейнер мобільного слайдера тарифів */
.pricing-mobile-slider {
    position: relative;
    overflow: visible;
    padding: 1rem 0;
    margin-top: -1.5rem;
}

.pricing-slider-container {
    position: relative;
    width: 100vw; /* Розтягуємо на весь екран */
    max-width: none; /* Прибираємо обмеження ширини */
    margin: 0;
    margin-left: calc(-50vw + 50%); /* Розтягуємо на весь екран */
    margin-right: calc(-50vw + 50%);
    padding: 0 15px; /* Мінімальні бічні відступи */
}

.pricing-slider-wrapper {
    overflow: hidden;
    border-radius: 1rem;
}

.pricing-slider-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 500%; /* 5 слайдів * 100% */
    touch-action: pan-y pinch-zoom; /* Дозволяємо вертикальний скрол */
}

.pricing-slide {
    width: 20%; /* 100% / 5 слайдів */
    flex-shrink: 0;
    padding: 0 0.3rem; /* Зменшуємо відступи між слайдами */
}

/* Картка тарифу */
.pricing-mobile-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2.2rem; /* Ще більше збільшуємо padding */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 100%;
    min-height: 550px; /* Максимально збільшуємо висоту */
    display: flex;
    flex-direction: column;
    position: relative;
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.pricing-mobile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Виділена картка (Максимальний тариф) */
.pricing-mobile-card-featured {
    border: 2px solid #ffd700;
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
}

/* Заголовок тарифу */
.pricing-mobile-header {
    margin-bottom: 1.5rem; /* Збільшуємо відступ */
}

.pricing-mobile-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600 !important;
    font-size: 1.5rem; /* Збільшуємо заголовок */
    color: var(--text-dark);
    margin-bottom: 1.5rem; /* Ще більше збільшуємо відступ */
    line-height: 1.3;
    text-align: center;
}

.pricing-mobile-price {
    text-align: center;
    margin-bottom: 1.5rem; /* Збільшуємо відступ після ціни */
}

.price-mobile-amount {
    font-family: 'Manrope', sans-serif;
    font-weight: 700 !important;
    font-size: 2.5rem; /* Збільшуємо ціну */
    color: var(--primary-color);
    line-height: 1;
}

.price-mobile-period {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.1rem; /* Збільшуємо період */
    color: var(--text-muted);
    margin-left: 0.3rem;
}

/* Контент тарифу */
.pricing-mobile-body {
    flex-grow: 1;
    margin-bottom: 1.8rem; /* Збільшуємо відступ перед кнопкою */
}

.pricing-mobile-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.pricing-mobile-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0; /* Ще більше збільшуємо відступи між функціями */
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    font-size: 1rem; /* Збільшуємо шрифт */
    color: var(--text-dark);
    line-height: 1.4;
}

.pricing-mobile-feature span {
    font-weight: 400 !important;
}

.pricing-mobile-emoji {
    font-size: 1.3rem; /* Збільшуємо емодзі */
    margin-right: 0.8rem; /* Збільшуємо відступ */
    flex-shrink: 0;
}

/* Футер тарифу */
.pricing-mobile-footer {
    margin-top: auto;
}

.pricing-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 1.8rem; /* Збільшуємо padding */
    border-radius: 0.8rem; /* Збільшуємо радіус */
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 1.1rem; /* Збільшуємо шрифт */
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    min-height: 55px; /* Збільшуємо висоту */
}

.pricing-mobile-btn-free {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border: 1px solid #4caf50;
}

.pricing-mobile-btn-free:hover {
    background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
    color: white;
    transform: translateY(-2px);
}

.pricing-mobile-btn-dark {
    background: linear-gradient(135deg, #333333 0%, #000000 100%);
    color: white;
}

.pricing-mobile-btn-dark:hover {
    background: linear-gradient(135deg, #555555 0%, #333333 100%);
    color: white;
    transform: translateY(-2px);
}

.pricing-mobile-btn-warning {
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #333333;
    font-weight: 700;
}

.pricing-mobile-btn-warning:hover {
    background: linear-gradient(135deg, #ffe066 0%, #ffd700 100%);
    color: #333333;
    transform: translateY(-2px);
}

/* Навігаційні кнопки */
.pricing-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    border-radius: 0;
    width: 30px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.6);
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-weight: 300;
}

.pricing-slider-btn:hover {
    color: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.pricing-slider-prev {
    left: 0;
}

.pricing-slider-next {
    right: 0;
}

/* Індикатори точок */
.pricing-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: 0.8rem;
}

.pricing-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-dot.active {
    background: var(--text-dark);
    transform: scale(1.2);
}

.pricing-dot:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Адаптивні стилі для мобільного слайдера тарифів */
@media (max-width: 480px) {
    .pricing-mobile-slider {
        padding: 1rem 0;
        margin-top: -1rem;
    }
    
    .pricing-slider-container {
        padding: 0 10px; /* Ще менші відступи для максимального розширення */
    }
    
    .pricing-slide {
        padding: 0 0.2rem; /* Менші відступи між слайдами */
    }
    
    .pricing-mobile-card {
        padding: 2rem; /* Залишаємо великий padding */
        border-radius: 1rem;
        min-height: 520px; /* Залишаємо велику висоту навіть на малих екранах */
    }
    
    .pricing-mobile-title {
        font-size: 1.3rem; /* Залишаємо великий заголовок */
        margin-bottom: 1.2rem; /* Збільшуємо відступ */
    }
    
    .price-mobile-amount {
        font-size: 2.2rem; /* Залишаємо велику ціну */
    }
    
    .price-mobile-period {
        font-size: 1rem; /* Збільшуємо період */
    }
    
    .pricing-mobile-feature {
        padding: 0.7rem 0; /* Збільшуємо відступи між функціями */
        font-size: 0.95rem; /* Трохи збільшуємо шрифт */
    }
    
    .pricing-mobile-emoji {
        font-size: 1.2rem; /* Збільшуємо емодзі */
        margin-right: 0.7rem; /* Збільшуємо відступ */
    }
    
    .pricing-mobile-btn {
        padding: 1rem 1.5rem; /* Збільшуємо кнопку */
        font-size: 1rem; /* Збільшуємо шрифт кнопки */
        min-height: 50px; /* Додаємо мінімальну висоту */
    }
    
    .pricing-slider-btn {
        width: 25px;
        height: 50px;
        font-size: 1.6rem;
    }
    
    .pricing-dot {
        width: 10px;
        height: 10px;
    }
}

/* Синхронізація мобільних стилів для цифрової сторінки з основним сайтом */
@media (max-width: 768px) {
    /* Hero секція - синхронізація з основним сайтом */
    .digital-page .hero-main-title {
        font-size: 2.3rem !important; /* Синхронізовано з основним сайтом */
        margin-bottom: 0.5rem !important;
    }
    
    .digital-page .hero-subtitle {
        font-size: 1.35rem !important; /* Збільшено для кращої читабельності */
        margin-bottom: 1rem !important;
    }
    
    /* Демонстрація - синхронізація з основним сайтом */
    .digital-page .demo-title {
        font-size: 2rem !important; /* Синхронізовано з основним сайтом */
        margin-bottom: 1rem !important;
    }
    
    .digital-page .demo-subtitle {
        font-size: 1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* AI секція - синхронізація з основним сайтом */
    .digital-page .ai-title {
        font-size: 2rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .ai-subtitle {
        font-size: 1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* Індивідуальна розробка - синхронізація з основним сайтом */
    .digital-page .custom-dev-title {
        font-size: 2rem !important; /* Синхронізовано з основним сайтом - трохи зменшено */
    }
    
    .digital-page .custom-dev-description {
        font-size: 1.35rem !important; /* Синхронізовано - ОПТИМАЛЬНО для 2 рядків */
    }
    
    .digital-page .custom-dev-section .container-sm {
        max-width: 100% !important; /* Синхронізовано з основним сайтом - повна ширина */
        padding: 0 0.05rem !important; /* Синхронізовано - АБСОЛЮТНО мінімальні відступи */
    }
    
    /* Великі екрани для цифрової сторінки */
    @media (min-width: 1200px) {
        .digital-page .custom-dev-section .container-sm {
            padding: 0 0.1rem !important; /* Синхронізовано з основною сторінкою */
        }
    }
    
    /* Мобільні стилі для цифрової сторінки */
    @media (max-width: 768px) {
        .digital-page .custom-dev-description {
            font-size: 1.1rem !important; /* Трохи збільшено для мобільних */
            padding: 0 1rem; /* Зменшено бокові відступи */
        }
        
        .digital-page .custom-dev-section .container-sm {
            padding: 0 1rem !important; /* Зменшено бокові відступи */
        }
    }
    
    @media (max-width: 576px) {
        .digital-page .custom-dev-description {
            font-size: 1.05rem !important; /* Трохи збільшено для малих екранів */
            padding: 0 1.2rem; /* Зменшено бокові відступи */
        }
        
        .digital-page .custom-dev-section .container-sm {
            padding: 0 1.2rem !important; /* Зменшено бокові відступи */
        }
    }
    
    /* Кроки - синхронізація з основним сайтом */
    .digital-page .steps-main-title {
        font-size: 2.4rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .steps-title {
        font-size: 1.6rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .steps-description {
        font-size: 1.1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .steps-mobile-title {
        font-size: 1.3rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .steps-mobile-description {
        font-size: 1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* Веб-версія - синхронізація з основним сайтом */
    .digital-page .web-title {
        font-size: 2.2rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .web-description {
        font-size: 1.15rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* Тарифи - синхронізація з основним сайтом */
    .digital-page .pricing-main-title {
        font-size: 2.1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .pricing-main-subtitle {
        font-size: 1.05rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* Мобільні тарифи - синхронізація з основним сайтом */
    .digital-page .pricing-mobile-title {
        font-size: 1.5rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .price-mobile-amount {
        font-size: 2.8rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .price-mobile-period {
        font-size: 1.25rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .pricing-mobile-feature {
        font-size: 1.15rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .pricing-mobile-emoji {
        font-size: 1.5rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* FAQ - синхронізація з основним сайтом */
    .digital-page .faq-new-title {
        font-size: 1.8rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .faq-new-question-title {
        font-size: 1.1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    /* Переваги - оновлення існуючих стилів */
    .digital-page #advantages .illustration-title {
        font-size: 1.3rem !important; /* Синхронізовано з основним сайтом */
        margin-left: -35px !important;
        margin-right: -35px !important;
        width: calc(100% + 70px) !important;
        padding: 12px 30px !important;
    }
    
    .digital-page #advantages .illustration-description {
        font-size: 1.1rem !important; /* Синхронізовано з основним сайтом */
        margin-left: -40px !important;
        margin-right: -40px !important;
        width: calc(100% + 80px) !important;
        padding: 8px 30px !important;
    }
}

@media (max-width: 576px) {
    /* Додаткові стилі для малих екранів - синхронізація з основним сайтом */
    .digital-page .hero-main-title {
        font-size: 1.8rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .hero-subtitle {
        font-size: 1.25rem !important; /* Збільшено для кращої читабельності */
    }
    
    .digital-page .demo-title {
        font-size: 1.7rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .ai-title {
        font-size: 1.7rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .custom-dev-title {
        font-size: 1.8rem !important; /* Синхронізовано з основним сайтом - трохи зменшено */
    }
    
    .digital-page .steps-main-title {
        font-size: 2.1rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .steps-title {
        font-size: 1.5rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .steps-mobile-title {
        font-size: 1.35rem !important; /* Трохи збільшено для кращої читабельності */
    }
    
    .digital-page .steps-mobile-description {
        font-size: 1.05rem !important; /* Трохи збільшено для кращої читабельності */
    }
    
    .digital-page .web-title {
        font-size: 2rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .pricing-main-title {
        font-size: 1.7rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .pricing-mobile-title {
        font-size: 1.3rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .price-mobile-amount {
        font-size: 2.5rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .price-mobile-period {
        font-size: 1.15rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .pricing-mobile-feature {
        font-size: 1.05rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .faq-new-title {
        font-size: 1.5rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .faq-new-question-title {
        font-size: 1rem !important; /* Синхронізовано з основним сайтом */
    }
}

@media (max-width: 480px) {
    /* Стилі для дуже малих екранів - синхронізація з основним сайтом */
    .digital-page .hero-main-title {
        font-size: 1.7rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page .hero-subtitle {
        font-size: 1.2rem !important; /* Збільшено для кращої читабельності */
    }
    
    .digital-page .steps-mobile-title {
        font-size: 1.3rem !important; /* Трохи збільшено для кращої читабельності */
    }
    
    .digital-page .steps-mobile-description {
        font-size: 1rem !important; /* Трохи збільшено для кращої читабельності */
    }
}

/* Синхронізація відстаней між блоками для цифрової сторінки */
@media (max-width: 768px) {
    /* Відстані між секціями - синхронізація з основним сайтом */
    .digital-page #hero {
        padding-bottom: 2rem !important; /* Синхронізовано з основним сайтом */
    }
    
    .digital-page #advantages {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #demo {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #custom-development {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #ai-assistant {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #steps {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #try-teleshop {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #pricing {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    .digital-page #faq-new {
        padding-top: 2rem !important; /* Синхронізовано з основним сайтом */
        padding-bottom: 2rem !important;
    }
    
    /* Додаткові відстані для контейнерів */
    .digital-page .container,
    .digital-page .container-sm,
    .digital-page .container-xl {
        padding-left: 1rem !important; /* Синхронізовано з основним сайтом */
        padding-right: 1rem !important;
    }
}

/* ========================================== */
/* СИНХРОНІЗАЦІЯ ДРОПШИПІНГ СТОРІНКИ З ЦИФРОВОЮ */
/* ========================================== */

/* Синхронізація блоку "Індивідуальна розробка" для дропшипінг сторінки */
.dropshipping-page .custom-dev-title {
    font-size: 2.5rem !important; /* Синхронізовано з основною сторінкою - трохи зменшено */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
}

.dropshipping-page .custom-dev-description {
    font-size: 1.35rem !important; /* Синхронізовано - ОПТИМАЛЬНО для 2 рядків */
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.dropshipping-page .custom-dev-section {
    padding-top: 3rem !important; /* Синхронізовано з цифровою сторінкою */
    padding-bottom: 3rem !important;
}

.dropshipping-page .custom-dev-section .container {
    max-width: 1800px !important; /* МАКСИМАЛЬНО розширено на 12см (6см ліворуч + 6см праворуч) для дропшипінг сторінки */
    margin-left: auto !important; /* ЦЕНТРУВАННЯ контейнера */
    margin-right: auto !important; /* ЦЕНТРУВАННЯ контейнера */
    padding-left: 1.5cm !important; /* ЗМЕНШЕНИЙ внутрішній відступ 1.5см ліворуч для кращого використання простору */
    padding-right: 1.5cm !important; /* ЗМЕНШЕНИЙ внутрішній відступ 1.5см праворуч для кращого використання простору */
    width: calc(100% + 12cm) !important; /* Розширюємо ширину на 12см (6см з кожного боку) */
    position: relative !important;
    left: -6cm !important; /* Зсуваємо контейнер на 6см вліво для центрування */
}

/* Великі екрани для дропшипінг сторінки */
@media (min-width: 1200px) {
    .dropshipping-page .custom-dev-section .container {
        max-width: 2200px !important; /* МАКСИМАЛЬНЕ розширення для великих екранів - 14см додатково */
        margin-left: -7cm !important; /* МАКСИМАЛЬНИЙ зсув на 7см ліворуч для великих екранів */
        margin-right: -7cm !important; /* МАКСИМАЛЬНИЙ зсув на 7см праворуч для великих екранів */
        padding-left: 2cm !important; /* ЗМЕНШЕНИЙ внутрішній відступ 2см ліворуч для кращого використання простору */
        padding-right: 2cm !important; /* ЗМЕНШЕНИЙ внутрішній відступ 2см праворуч для кращого використання простору */
    }
}

/* Мобільні стилі для блоку "Індивідуальна розробка" - дропшипінг сторінка */
@media (max-width: 768px) {
    .dropshipping-page .custom-dev-title {
        font-size: 2rem !important; /* Синхронізовано з основною сторінкою - трохи зменшено */
    }
    
    .dropshipping-page .custom-dev-description {
        font-size: 1.15rem !important; /* Синхронізовано - ЗБІЛЬШЕНО */
    }
    
    .dropshipping-page .custom-dev-section {
        padding-top: 2rem !important; /* Синхронізовано з цифровою сторінкою */
        padding-bottom: 2rem !important;
    }
    
    .dropshipping-page .custom-dev-section .container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem !important; /* ЗМЕНШЕНІ відступи для мобільних */
        padding-right: 1rem !important; /* ЗМЕНШЕНІ відступи для мобільних */
        width: calc(100% + 2rem) !important; /* МІНІМАЛЬНЕ розширення для мобільних */
        left: -1rem !important; /* МІНІМАЛЬНИЙ зсув для мобільних */
        max-width: 100vw !important; /* Обмежуємо максимальну ширину розміром екрана */
        box-sizing: border-box !important; /* Включаємо padding у загальну ширину */
    }
    
    /* Збільшений верхній відступ для секції тарифів на мобільних */
    .dropshipping-page .pricing-section {
        padding: 4rem 0 2rem 0 !important; /* Збільшено верхній відступ для мобільних */
    }
}

@media (max-width: 576px) {
    .dropshipping-page .custom-dev-title {
        font-size: 1.8rem !important; /* Синхронізовано з основною сторінкою - трохи зменшено */
    }
    
    .dropshipping-page .custom-dev-description {
        font-size: 1.1rem !important; /* Синхронізовано - ЗБІЛЬШЕНО */
    }
    
    .dropshipping-page .custom-dev-section .container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0.75rem !important; /* БЕЗПЕЧНІ відступи для малих екранів */
        padding-right: 0.75rem !important; /* БЕЗПЕЧНІ відступи для малих екранів */
        width: 100% !important; /* БЕЗ розширення для малих екранів */
        left: 0 !important; /* БЕЗ зсуву для малих екранів */
        max-width: 100vw !important; /* Обмежуємо максимальну ширину розміром екрана */
        box-sizing: border-box !important; /* Включаємо padding у загальну ширину */
    }
    
    /* Збільшений верхній відступ для секції тарифів на малих мобільних */
    .dropshipping-page .pricing-section {
        padding: 4.5rem 0 2rem 0 !important; /* Ще більший верхній відступ для малих екранів */
    }
}

@media (max-width: 480px) {
    .dropshipping-page .custom-dev-title {
        font-size: 1.7rem !important; /* Синхронізовано з основною сторінкою - трохи зменшено */
    }
    
    .dropshipping-page .custom-dev-description {
        font-size: 1.05rem !important; /* Синхронізовано - ЗБІЛЬШЕНО */
    }
    
    .dropshipping-page .custom-dev-section .container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0.5rem !important; /* МІНІМАЛЬНІ безпечні відступи */
        padding-right: 0.5rem !important; /* МІНІМАЛЬНІ безпечні відступи */
        width: 100% !important; /* БЕЗ розширення для дуже малих екранів */
        left: 0 !important; /* БЕЗ зсуву для дуже малих екранів */
        max-width: 100vw !important; /* Обмежуємо максимальну ширину розміром екрана */
        box-sizing: border-box !important; /* Включаємо padding у загальну ширину */
        overflow: hidden !important; /* Запобігаємо горизонтальному скролу */
    }
}

/* МАКСИМАЛЬНО СПЕЦИФІЧНІ стилі для блоку "Переваги" - дропшипінг сторінка */
.dropshipping-page #advantages.advantages-section-mobile {
    padding-top: 4rem !important; /* ЗБІЛЬШЕНИЙ верхній відступ для всіх екранів */
    margin-top: 2rem !important; /* Додатковий зовнішній відступ */
    background: #ffffff !important;
}

@media (min-width: 769px) {
    .dropshipping-page #advantages.advantages-section-mobile {
        padding-top: 2rem !important; /* Стандартний відступ для десктопу */
        margin-top: 0 !important; /* БЕЗ додаткового відступу для десктопу */
    }
}

@media (max-width: 768px) {
    .dropshipping-page #advantages.advantages-section-mobile {
        padding-top: 4rem !important; /* ЗБІЛЬШЕНИЙ верхній відступ для мобільних */
        margin-top: 2rem !important; /* Додатковий зовнішній відступ */
    }
}

@media (max-width: 576px) {
    .dropshipping-page #advantages.advantages-section-mobile {
        padding-top: 3.5rem !important; /* ЗБІЛЬШЕНИЙ верхній відступ для малих екранів */
        margin-top: 1.5rem !important; /* Додатковий зовнішній відступ */
    }
}

@media (max-width: 480px) {
    .dropshipping-page #advantages.advantages-section-mobile {
        padding-top: 3rem !important; /* ЗБІЛЬШЕНИЙ верхній відступ для дуже малих екранів */
        margin-top: 1rem !important; /* Додатковий зовнішній відступ */
    }
}

/* МАКСИМАЛЬНО ЗБІЛЬШЕНИЙ шрифт для тексту блоку "Переваги" в мобільній версії - дропшипінг сторінка */
@media (max-width: 768px) {
    .dropshipping-page #advantages .illustration-title {
        font-size: 1.6rem !important; /* МАКСИМАЛЬНО ЗБІЛЬШЕНИЙ заголовок для мобільних */
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        font-weight: 700 !important;
    }
    
    .dropshipping-page #advantages .illustration-description {
        font-size: 1.15rem !important; /* МАКСИМАЛЬНО ЗБІЛЬШЕНИЙ опис для мобільних */
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 576px) {
    .dropshipping-page #advantages .illustration-title {
        font-size: 1.45rem !important; /* БІЛЬШЕ ЗБІЛЬШЕНИЙ заголовок для малих екранів */
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }
    
    .dropshipping-page #advantages .illustration-description {
        font-size: 1.1rem !important; /* БІЛЬШЕ ЗБІЛЬШЕНИЙ опис для малих екранів */
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .dropshipping-page #advantages .illustration-title {
        font-size: 1.35rem !important; /* БІЛЬШЕ ЗБІЛЬШЕНИЙ заголовок для дуже малих екранів */
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }
    
    .dropshipping-page #advantages .illustration-description {
        font-size: 1.05rem !important; /* БІЛЬШЕ ЗБІЛЬШЕНИЙ опис для дуже малих екранів */
        line-height: 1.5 !important;
    }
}

/* ========== МАКСИМАЛЬНО СПЕЦИФІЧНІ СТИЛІ ДЛЯ ДРОПШИПІНГ СТОРІНКИ ========== */

/* Збільшений верхній відступ для секції тарифів - максимальна специфічність */
@media (max-width: 768px) {
    body.dropshipping-page #pricing.pricing-section,
    body[data-page="dropshipping"] #pricing.pricing-section,
    .dropshipping-page #pricing.pricing-section {
        padding: 4rem 0 2rem 0 !important; /* Збільшено верхній відступ для мобільних */
    }
}

@media (max-width: 576px) {
    body.dropshipping-page #pricing.pricing-section,
    body[data-page="dropshipping"] #pricing.pricing-section,
    .dropshipping-page #pricing.pricing-section {
        padding: 4.5rem 0 2rem 0 !important; /* Ще більший верхній відступ для малих екранів */
    }
}

/* ========== СТИЛІ ДЛЯ МОБІЛЬНОГО СЛАЙДЕРА КРОКІВ НА ДРОПШИПІНГ СТОРІНЦІ ========== */

/* Збільшений шрифт для мобільного слайдера кроків */
@media (max-width: 768px) {
    .dropshipping-page .steps-mobile-title {
        font-size: 1.35rem !important; /* Трохи збільшено для кращої читабельності */
    }
    
    .dropshipping-page .steps-mobile-description {
        font-size: 1.05rem !important; /* Трохи збільшено для кращої читабельності */
    }
}

@media (max-width: 576px) {
    .dropshipping-page .steps-mobile-title {
        font-size: 1.3rem !important; /* Трохи збільшено для кращої читабельності */
    }
    
    .dropshipping-page .steps-mobile-description {
        font-size: 1rem !important; /* Трохи збільшено для кращої читабельності */
    }
}