/*
 * GLOBAL.CSS
 * Базовые стили, сброс, переменные и утилиты
 */

/* 1. Сброс стилей (Reset) */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* 2. CSS-переменные (Цвета, переходы и т.д.) */
:root {
    --цвет-основной: #ffffff;
    --цвет-текста: #333333;
    --цвет-акцентный-синий: #3b82f6;
    --цвет-акцентный-фиолетовый: #8b5cf6;
    --цвет-градиент: linear-gradient(45deg, var(--цвет-акцентный-синий), var(--цвет-акцентный-фиолетовый));
    --цвет-серый-фон: #f8f9fa;
    --переход-быстрый: all 0.2s ease-in-out;
    --переход-плавный: all 0.4s ease-in-out;
    --контейнер-ширина: 1200px;
    --контейнер-отступ: 1rem;
    --header-height: 80px;
}

/* 3. Базовая типографика и стили для body (КЛЮЧЕВОЕ ОБНОВЛЕНИЕ) */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--цвет-основной);
    color: var(--цвет-текста);
    line-height: 1.6;
    font-weight: 400; /* Стандартная толщина для всего текста по умолчанию */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit; /* Заставляет элементы форм наследовать шрифт от body */
}

/* Явно задаем стили для всех заголовков */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif; /* Гарантируем один и тот же шрифт */
    font-weight: 700; /* Жирное начертание для всех заголовков */
    line-height: 1.2;
    color: var(--цвет-текста);
}

/* Стили для параграфов, если нужно */
p {
    margin-bottom: 1rem;
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* 4. Базовая сетка и утилиты */
.контейнер {
    max-width: var(--контейнер-ширина);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--контейнер-отступ);
    padding-right: var(--контейнер-отступ);
}

.секция {
    padding: 5rem 0;
}

.заголовок-секции {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.подзаголовок-секции {
    font-size: 1.1rem;
    text-align: center;
    font-weight: 400; /* Заголовки жирные, а подзаголовки - нет */
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto 4rem auto;
}

.кнопка {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 500; /* Средняя толщина для кнопок */
    text-align: center;
    cursor: pointer;
    transition: var(--переход-быстрый);
    border: 1px solid transparent;
}

.кнопка-основная {
    background: var(--цвет-градиент);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.кнопка-основная:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.кнопка-вторичная {
    background-color: var(--цвет-основной);
    color: var(--цвет-акцентный-синий);
    border-color: var(--цвет-акцентный-синий);
}

.кнопка-вторичная:hover {
    background-color: var(--цвет-акцентный-синий);
    color: var(--цвет-основной);
}