/* =========================================
   7. МОБІЛЬНА АДАПТАЦІЯ
   ========================================= */
@media (max-width: 1024px) {
    .nav-links { display: none; }
    .navbar { padding: 1rem; }
    
    .hero {
        padding-top: 120px;
        text-align: center;
    }
    
    .hero-content {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 50px;
    }

    .hero-grid {
        grid-template-columns: 1fr; /* Картки теж в одну колонку на планшетах */
    }

    .hero h1 { font-size: 2.2rem; }
    .hero-desc { margin: 0 auto 30px; }
    .hero-actions { align-items: center; justify-content: center; }
    .btn { width: 100%; text-align: center; }
    .dynamic-fact-container { min-height: auto; }
}

@media (max-width: 600px) {
    .hero-trust {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 на 2 */
        gap: 20px;
        justify-content: center;
        text-align: center;
    }
}
/* В самому низу файлу, всередині @media */
@media (max-width: 1024px) {
    
    /* ... ваші інші стилі для мобільного ... */

    .hero-actions {
        display: flex;
        flex-direction: column; /* Розміщуємо кнопки стовпчиком */
        gap: 15px; /* <--- ОСЬ ЦЕЙ ВІДСТУП (15px між кнопками) */
        width: 100%;
        align-items: center;
    }

    .btn {
        width: 100%; /* Кнопки на всю ширину екрану */
        text-align: center;
        margin: 0; /* Прибираємо зайві відступи, бо працює gap */
    }

}
/* В самому низу файлу, всередині існуючого @media */
@media (max-width: 1024px) {
    
    /* ... (тут ваші стилі для hero-actions і кнопок) ... */

    /* ЦЕНТРУВАННЯ КАРТОК (GRID) НА МОБІЛЬНОМУ */
    .grid-item {
        text-align: center; /* Центруємо текст опису (p) */
        align-items: center; /* Центруємо елементи по горизонталі (для flex-контейнера) */
    }

    .grid-header {
        justify-content: center; /* Центруємо іконку та заголовок */
    }

    .grid-btn {
        align-self: center; /* Кнопка по центру, а не зліва */
        width: 100%; /* Можна зробити на всю ширину для зручності натискання... */
        max-width: 250px; /* ...але не ширше 250px, щоб виглядало гарно */
        margin-top: 15px; /* Додатковий відступ зверху */
    }
}