/* 1. Глобальный сброс для Safari */
html, body {
    overflow-x: hidden; /* Запрещает горизонтальный скролл всего сайта */
    width: 100%;
    -webkit-text-size-adjust: 100%; /* Запрещает Safari самовольно менять размер шрифта */
}

/* 2. Фикс Hero-секции и всех картинок */
img {
    max-width: 100%; /* Картинка никогда не будет шире экрана */
    height: auto;
    display: block;
}

/* 3. Фикс сетки (Grid) для старых Safari */
.grid {
    display: -ms-grid;
    display: grid;
}

/* 4. Принудительное ограничение контейнера */
.max-w-6xl, .container {
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
}

/* --- БАЗОВЫЕ НАСТРОЙКИ ШРИФТОВ И СКРОЛЛА --- */
body { 
    font-family: 'Inter', sans-serif; 
    scroll-behavior: smooth; /* Плавная прокрутка к якорям (секциям) */
}

/* Заголовки и антиквенные шрифты */
h1, h2, h3, .font-serif, .logo-font { 
    font-family: 'Playfair Display', serif; 
}

/* Каллиграфический шрифт для логотипа (ваша подпись) */
.logo-script { 
    font-family: 'Marck Script', cursive; 
}

/* --- ЦВЕТОВЫЕ АКЦЕНТЫ И ФОНЫ --- */
.hero-bg { background-color: #eff6ff; }       /* Светло-голубой фон первого экрана */
.accent-pastel { background-color: #f8fafc; } /* Очень светлый серый для блоков */
.accent-blue { background-color: #dbeafe; }   /* Мягкий синий акцент */

/* --- КНОПКИ --- */
.btn-primary { 
    transition: all 0.3s ease; 
    background-color: #1d4ed8; 
}
.btn-primary:hover { 
    background-color: #1e40af; 
    transform: translateY(-1px); /* Легкий подъем кнопки при наведении */
}

/* --- КАРТОЧКИ (Услуги, Статьи) --- */
.card { 
    background: white; 
    transition: transform 0.3s ease; 
    z-index: 10; 
    position: relative; 
}
.card:hover { 
    transform: translateY(-5px); /* Всплытие карточки при наведении */
}

/* --- МОБИЛЬНОЕ МЕНЮ --- */
#mobile-menu { 
    transition: transform 0.3s ease-in-out; 
    transform: translateX(100%); /* По умолчанию скрыто за правым краем */
}
#mobile-menu.active { 
    transform: translateX(0); /* Появление при активации */
}

/* --- КАРАУСЕЛЬ ОТЗЫВОВ --- */
.carousel-container { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
}
.carousel-track { 
    display: flex; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Плавное движение слайдов */
}
.review-card { 
    min-width: 100%; /* Один отзыв на мобильных */
    box-sizing: border-box; 
    padding: 0 12px; 
}

/* Адаптивность карусели: количество карточек в ряд */
@media (min-width: 768px) { .review-card { min-width: 50%; } }     /* Два отзыва на планшетах */
@media (min-width: 1024px) { .review-card { min-width: 33.333%; } } /* Три отзыва на десктопах */

/* --- АНИМАЦИЯ ПОЯВЛЕНИЯ (Для экрана успеха и модалок) --- */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.95); /* Начинает с чуть меньшего размера */
    }
    to { 
        opacity: 1; 
        transform: scale(1);    /* Становится в полный размер */
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards; /* Плавное проявление за 0.4 сек */
}

/* --- СЕРТИФИКАТЫ: БЕСКОНЕЧНАЯ ЛЕНТА (ФИНАЛЬНАЯ ВЕРСИЯ) --- */

/* 1. Окно просмотра (Viewport) */
.cert-marquee-viewport {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    background: transparent;
    padding: 10px 0;
    position: relative;
    /* Ускорение рендеринга для Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 2. Лента (Track) */
#certs-track {
    display: flex;
    width: max-content;
    /* Увеличиваем время (например, 60s вместо 30s) для медленного хода */
    animation: marquee 300s linear infinite; 
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Остановка при наведении — так пользователю будет удобнее рассмотреть */
.cert-marquee-viewport:hover #certs-track {
    animation-play-state: paused;
}

/* Остановка при наведении (только для устройств с мышкой) */
@media (hover: hover) {
    .cert-marquee-viewport:hover #certs-track {
        animation-play-state: paused;
    }
}

/* 3. Карточки (Адаптивные размеры) */
.marquee-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 140px;
    flex: 0 0 140px; /* Размер для мобильных */
    margin: 0 8px;
    transition: transform 0.4s ease;
    -webkit-transition: -webkit-transform 0.4s ease;
}

@media (min-width: 768px) {
    .marquee-item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 180px;
        flex: 0 0 180px; /* Размер для ПК */
        margin: 0 10px;
    }
}

.marquee-item img {
    display: block;
    width: 100% !important;
    height: 110px !important; /* Указываем высоту ячейки принудительно */
    object-fit: cover;        /* Обрезает края, заполняя всё пространство без дыр */
    border-radius: 12px;
    -webkit-border-radius: 12px;
    background: #f8fafc;     /* Фон на случай, если картинка долго грузится */
}

/* Эффект при наведении */
.marquee-item:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

/* 4. Анимация (стандартный @keyframes marquee объявлен выше в блоке сертификатов) */
@-webkit-keyframes marquee {
    0% { -webkit-transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); }
}

/* 5. Модальное окно (Адаптация) */
@media (max-width: 768px) {
    /* Принудительно показываем стрелки */
    .nav-btn {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        background: transparent !important; /* Убираем круг */
        color: white !important; /* Белые стрелки */
        font-size: 2rem;
        opacity: 0.6;
        transition: opacity 0.3s ease;
        padding: 20px; /* Увеличим область нажатия */
    }

    .nav-btn:hover {
        opacity: 1;
    }

    /* Тень для стрелок, чтобы их было видно на светлых фото */
    .nav-btn i {
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .nav-btn:first-of-type { left: 0; }
    .nav-btn:last-of-type { right: 0; }

    #cert-img {
        max-width: 85% !important; /* Даем место для стрелок по бокам */
        max-height: 80vh;
        object-fit: contain;
        /* Запрещаем браузеру пытаться "тащить" картинку как файл */
        touch-action: none; 
        -webkit-user-drag: none;
    }
}