/* css/style.css */
@import url('base.css');
@import url('header.css');
@import url('main.css');
@import url('inner.css');
@import url('footer.css');

/* ==========================================================================
   1. ГЛОБАЛЬНАЯ АНИМАЦИЯ (APPLE ENTRY)
   ========================================================================== */

@keyframes ultimateEntry {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Применяем анимацию ко всем ключевым элементам */
.reveal-text, 
.main-title, 
.service-card, 
.bottom-slogan,
.slogan-badge {
    opacity: 0;
    animation: ultimateEntry 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;
    will-change: transform, opacity;
}

/* Последовательные задержки */
.delay-1 { animation-delay: 0.1s !important; }
.delay-2 { animation-delay: 0.2s !important; }
.delay-3 { animation-delay: 0.3s !important; }
.delay-4 { animation-delay: 0.4s !important; }
.delay-5 { animation-delay: 0.5s !important; }
.delay-6 { animation-delay: 0.6s !important; }

/* ==========================================================================
   ВОССТАНОВЛЕНИЕ ЛОЗУНГА ЧЕРЕЗ ИЗОЛИРОВАННЫЙ КЛАСС
   ========================================================================== */

/* Контейнер-обертка */
.inner-slogan {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 60px auto 0 !important;
    padding: 0 !important;
    background: none !important;
    opacity: 0; /* Для анимации */
}

/* Сама черная плашка */
.inner-slogan .slogan-badge {
    display: inline-block !important;
    background-color: #000000 !important; /* Черный фон */
    color: #ffffff !important;
    border-right: 12px solid #e31e3b !important; /* Красная полоса */
    padding: 20px 50px !important;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
    text-transform: uppercase !important;
    text-align: right !important;
    line-height: 1.2 !important;
    box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.5) !important;
    opacity: 0; /* Начальное состояние */
}

/* Анимация для нового класса */
.inner-slogan, 
.inner-slogan .slogan-badge {
    animation: ultimateEntry 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards !important;
    animation-delay: 0.8s !important; /* Задержка как у последнего элемента */
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .inner-slogan {
        justify-content: center !important;
    }
    .inner-slogan .slogan-badge {
        padding: 15px 30px !important;
        font-size: 1rem !important;
        border-right-width: 8px !important;
    }
}

/* ==========================================================================
   3. ФИКСЫ ДЛЯ СЕТКИ УСЛУГ (SERVICES GRID)
   ========================================================================== */

.services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
}

.service-card {
    min-width: 0 !important;
    transition: background 0.3s, border-color 0.3s, transform 0.3s !important;
}

.service-card.active {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    background: rgba(10, 10, 10, 0.95) !important;
}

/* ==========================================================================
   4. АДАПТИВНОСТЬ
   ========================================================================== */

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr !important; }
    .main-title { font-size: 2.5rem !important; }
    
    body .bottom-slogan { 
        justify-content: center !important; 
        padding: 0 20px !important;
    }
    
    body .bottom-slogan .slogan-badge { 
        padding: 15px 25px !important; 
        font-size: 0.9rem !important; 
        border-right-width: 8px !important;
    }
}

/* ==========================================================================
   ФИНАЛЬНЫЙ СТИЛЬ КНОПКИ "ЗАКАЗАТЬ РАСЧЕТ"
   ========================================================================== */

/* Контейнер кнопки */
.cta-container {
    margin-top: 30px !important;
    text-align: right !important;
    width: 100% !important;
}

/* Сама кнопка-ссылка */
.btn-calculate {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    color: #e31e3b !important; /* Фирменный красный */
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    background: transparent !important;
    padding: 10px 0 !important;
}

/* Состояние при наведении (Hover) */
.btn-calculate:hover {
    color: #ffffff !important; /* Текст белеет */
    text-shadow: 0 0 15px rgba(227, 30, 59, 0.8) !important;
    transform: translateX(-5px) !important; /* Легкое смещение всей кнопки */
}

/* Убираем фиолетовый для посещенных ссылок */
.btn-calculate:visited {
    color: #e31e3b !important;
}

/* Анимация иконки стрелки */
.btn-calculate i {
    margin-left: 15px !important;
    font-size: 1.2rem !important;
    transition: transform 0.4s ease, color 0.4s ease !important;
}

.btn-calculate:hover i {
    transform: translateX(10px) !important; /* Стрелка улетает вправо */
    color: #e31e3b !important;
}

/* Эффект подчеркивания при наведении (опционально, для стиля Apple) */
.btn-calculate::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #e31e3b;
    transition: width 0.4s ease;
}

.btn-calculate:hover::after {
    width: 100%;
}

/* ==========================================================================
   5. СТРАНИЦА "О НАС" (НА БАЗЕ СТРАНИЦЫ УСЛУГ)
   ========================================================================== */

/* Общий контейнер-герой для страницы */
.about-page .services-hero {
    min-height: 100vh !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    padding-top: 140px !important; /* Опускаем заголовок ниже навигации */
    position: relative;
}

/* Затемнение фона для читаемости белого текста */
.about-page .services-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%) !important;
    z-index: 0;
}

/* Гарантируем, что контент поверх затемнения */
.about-page .services-container {
    position: relative;
    z-index: 2 !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Специфическая сетка для About */
.about-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 колонки для баланса */
    gap: 20px !important;
    margin-top: 50px !important;
}

/* Главная карточка манифеста (шире остальных) */
.about-main-card {
    grid-column: span 2 !important;
    background: rgba(227, 30, 59, 0.1) !important; /* Легкий фирменный оттенок */
    border-left: 5px solid #e31e3b !important;
}

/* Стилизация карточек-инфо */
.about-page .service-card {
    cursor: default !important; /* Убираем палец, это не кнопка */
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px !important;
    transition: transform 0.3s ease !important;
}

.about-page .service-card:hover {
    transform: translateY(-5px);
    border-color: #e31e3b !important;
}

/* Иконки в карточках */
.service-icon {
    color: #e31e3b;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Фикс иконки фиксированной цены (рукопожатие вместо зачеркнутого) */
.fa-handshake-slash::before { 
    content: "\f2b5" !important; 
}

/* ==========================================================================
   6. ФУТЕР (ФИНАЛЬНЫЙ ФИКС)
   ========================================================================== */

.main-footer {
    width: 100%;
    background-color: #000; /* Цвет фона твоего футера */
    padding: 60px 0 20px; /* Отступы сверху и снизу */
}

.footer-container {
    /* Устанавливаем ширину контейнера такую же, как у верхней части сайта */
    max-width: 1200px; /* Подбери это значение под свою сетку, если оно отличается */
    margin: 0 auto;    /* Центрируем весь контейнер */
    padding: 0 20px;   /* Внутренние отступы, чтобы на мобилках не прилипало к краям */
    
    display: flex;
    justify-content: space-between; /* Распределяем блоки внутри этой ширины */
    align-items: flex-start;
}

/* Настройка левого блока, который мы двигали по зеленой стрелке */
.footer-info {
    flex: 0 1 350px; /* Ограничиваем ширину, чтобы текст не растягивался слишком сильно */
    text-align: left;
}

/* Чтобы логотип и текст внутри стояли строго по левому краю линии */
.footer-logo {
    margin-bottom: 20px;
}

/* Адаптив для About */
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr 1fr !important; }
    .about-main-card { grid-column: span 2 !important; }
}

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr !important; }
    .about-main-card { grid-column: span 1 !important; }
    .about-page .services-hero { padding-top: 100px !important; }
}

/* Изолированные стили для страницы About */
.about-page .main-title {
    font-size: 3.5rem !important; /* Уменьшили с гигантского до солидного */
    text-transform: none !important; /* Убираем капс для мягкости */
    letter-spacing: -1px !important;
    margin-bottom: 10px !important;
}

.about-header-text {
    text-align: left;
    margin-bottom: 40px;
}

.about-header-text .subtitle {
    font-size: 1.5rem;
    color: #e31e3b;
    font-weight: 700;
    opacity: 0.9;
}

/* Сетка карточек: делаем их компактнее, чтобы не резались */
.about-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}

.about-page .service-card {
    background: rgba(15, 15, 15, 0.7) !important; /* Тёмное прозрачное стекло */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 25px !important;
    height: auto !important;
}

.about-page .service-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

.about-page .service-card p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Лозунг - двигаем его, чтобы не лип к карточкам */
.about-page .inner-slogan {
    margin-top: 50px !important;
}

/* Адаптив для планшетов */
@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr !important; }
    .about-page .main-title { font-size: 2.8rem !important; }
}

/* Специально для страницы About, чтобы сетка была аккуратной */
.about-page .services-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* Ровно 3 карточки в ряд */
    max-width: 1100px !important;
}

@media (max-width: 1024px) {
    .about-page .services-grid {
        grid-template-columns: 1fr !important; /* На мобилках в колонку */
    }
}

/* Иконки в карточках About */
.about-page .card-header i.icon-default {
    color: #e31e3b !important;
    font-size: 1.8rem;
}