/* =================================================================
 * ROOT.CSS - CSS CUSTOM PROPERTIES (DESIGN TOKENS)
 * Используются для централизованного управления стилями
 * ================================================================= */

 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pontano+Sans:wght@300..700&display=swap');

 :root {
    /* -----------------------------------
     * ЦВЕТА
     * ----------------------------------- */
    --color-red-base: #ED3237;
    --color-white-base: #FFFFFF;
    --color-grey: #777777;
    --color-black-base: #000000;
    --color-beige-base: #F4ECDD;
    --color-card-grey: #F0F0F0;
    --color-red-base-30: rgba(237, 50, 55, 0.30);

    /* ГРАДИЕНТ */
    --gradient-primary: linear-gradient(89deg, #D2AE6D 23.17%, #ED3237 135%);

    /* -----------------------------------
     * ШРИФТЫ
     * ----------------------------------- */
    /* Предполагается, что Pontano Sans, Montserrat и Inter загружены через @font-face или <link> */
    --font-heading: "Pontano Sans", sans-serif;
    --font-body: "Montserrat", sans-serif;
    --font-button: "Inter", sans-serif; /* Для кнопки WhatsApp */

    /* -----------------------------------
     * УТИЛИТИ
     * ----------------------------------- */
     --btn-border-radius-50: 3.125rem;
     --btn-border-radius-40: 2.5rem;
     --btn-border-radius-30: 1.875rem;
     --btn-border-radius-20: 1.25rem;
     --btn-border-radius-5: 0.3125rem;

    /* -----------------------------------
    * ОБЩИЕ ПЕРЕМЕННЫЕ КАРТОЧКИ НА СТРАНИЦЕ ФЛОТ
    * ----------------------------------- */
    --card-width: 100%;
    --card-total-height: 36.25rem; /* Уменьшено для лучшей пропорции */
    --transition-speed: 0.3s;
    --red-color: #ED3237;
    /* Высота, на которую сдвигается контент при раскрытии (Зависит от высоты скрытого контента) */
    --content-reveal-height: 11.25rem; 
}

/* =================================================================
 * ТИПОГРАФИКА: ЗАГОЛОВКИ (H1-H6)
 * Подход Mobile-First с адаптацией для десктопа
 * ================================================================= */

/* H1 - H6: Базовые стили */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    margin-bottom: 1rem; /* Используем универсальный отступ */
}

/* --- MOBILE (Default Styles) --- */

h1 {
    /* На мобильных уменьшаем размер H1 */
    font-size: 3rem; 
    color: var(--color-red-base); /* Устанавливаем красный как стандартный, так как H1 на hero часто белый, но это исключение */
    letter-spacing: -0.06rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.375rem;
    color: var(--color-black-base);
    letter-spacing: -0.0475rem;
}

h3 {
    font-size: 2rem;
    color: var(--color-black-base);
    letter-spacing: -0.04rem;
}

h4 {
    font-size: 1.5rem;
    color: var(--color-black-base);
    letter-spacing: -0.03rem;
}

h5 {
    font-size: 1.125rem;
    color: var(--color-black-base);
    letter-spacing: -0.0225rem;
}

h6 {
    font-size: 1rem;
    color: var(--color-black-base);
    letter-spacing: -0.02rem;
}

/* --- DESKTOP (Min-width 1024px) --- */
@media (min-width: 1024px) {
    h1 {
        /* Исходные значения H1 для десктопа */
        font-size: 4.375rem;
        letter-spacing: -0.0875rem;
    }
    
    h2 {
        /* Исходные значения H2 для десктопа */
        font-size: 3rem;
        letter-spacing: -0.06rem;
    }
    /* H3, H4, H5, H6 можно оставить мобильными, если разница не критична, 
       либо уточнить их десктопные размеры, если они должны быть больше. */
}

/* =================================================================
 * ТИПОГРАФИКА: ПАРАГРАФЫ
 * ================================================================= */

p {
    color: var(--color-black-base);
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: -0.02rem;
}

.content {
    color: var(--color-black-base);
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: -0.02rem;
}

a {
    text-decoration: none !important; /* Убираем подчеркивание по умолчанию */
    color: inherit; /* Наследуем цвет от родителя */
}


/* =================================================================
 * КОМПОНЕНТЫ: КНОПКИ
 * ================================================================= */

/* Общий базовый стиль для всех градиентных кнопок */
.btn-primary-gradient,
.btn-whatsapp-gradient {
    /* Параметры контейнера */
    height: 3.125rem;
    padding: 0.625rem 1.5625rem; /* Увеличил горизонтальный паддинг для лучшего вида */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 3.125rem;
    border: none; /* Убедимся, что нет стандартной рамки */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none; /* Для использования с тегом <a> */
    
    /* Градиент */
    background: var(--gradient-primary);
    color: var(--color-white-base);
}

/* Стили текста для Кнопки "Связаться с нами" */
.btn-primary-gradient {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.0175rem;
    text-transform: uppercase;
}

/* Стили текста для Кнопки WhatsApp */
.btn-whatsapp-gradient {
    font-family: var(--font-button);
    font-size: 1rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.02rem;
    text-transform: uppercase;
}

/* Эффект при наведении (можно добавить тень или небольшой сдвиг) */
.btn-primary-gradient:hover,
.btn-whatsapp-gradient:hover {
    opacity: 0.9;
    box-shadow: 0 0.25rem 0.9375rem rgba(237, 50, 55, 0.4);
    transform: translateY(-0.125rem);
}

/* Стили текста для Кнопки "Красная кнопка" */
.btn-primary-red {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.0175rem;
    text-transform: uppercase;
    /* Параметры контейнера */
    height: 3.125rem;
    padding: 0.625rem 1.5625rem; /* Увеличил горизонтальный паддинг для лучшего вида */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 3.125rem;
    border: none; /* Убедимся, что нет стандартной рамки */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none; /* Для использования с тегом <a> */
    /* Цвет фона */
    background: var(--color-red-base);
    color: var(--color-white-base);
}

/* Эффект при наведении (можно добавить тень или небольшой сдвиг) */
.btn-primary-red:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #ED3237;
    opacity: 0.9;
    box-shadow: 0 0.25rem 0.9375rem rgba(237, 50, 55, 0.4);
    transform: translateY(-0.125rem);
}

/* Стили текста для Кнопки "Cтать партнером" белая и длинная*/
.btn-primary-white {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.0175rem;
    text-transform: uppercase;
    /* Параметры контейнера */
    height: 3.125rem;
    padding: 0.625rem 1.5625rem; /* Увеличил горизонтальный паддинг для лучшего вида */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 2.5rem;
    border: none; /* Убедимся, что нет стандартной рамки */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none; /* Для использования с тегом <a> */
    /* Цвет фона */
    background: var(--color-white-base);
    color: var(--color-black-base);
}

/* Эффект при наведении (можно добавить тень или небольшой сдвиг) */
.btn-primary-white:hover {
    background: rgba(0, 0, 0, 20%);
    color: var(--color-white-base);
    transform: translateY(-0.125rem);
}

/* Стили текста для Кнопки "Cтать партнером" белая и длинная*/
.btn-primary-gray {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.0175rem;
    text-transform: uppercase;
    /* Параметры контейнера */
    height: 3.125rem;
    padding: 0.625rem 1.5625rem; /* Увеличил горизонтальный паддинг для лучшего вида */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    border-radius: 2.5rem;
    border: none; /* Убедимся, что нет стандартной рамки */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none; /* Для использования с тегом <a> */
    /* Цвет фона */
    background: var(--color-grey);
    color: var(--color-white-base);
}

/* Эффект при наведении (можно добавить тень или небольшой сдвиг) */
.btn-primary-gray:hover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #777777;
    color: var(--color-white-base);
    transform: translateY(-0.125rem);
}