body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Современный шрифт для лучшей читаемости */
    margin: 0; /* Убираем стандартные отступы браузера */
    padding: 0; /* Убираем стандартные внутренние отступы */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Красивый градиентный фон всей страницы */
    min-height: 100vh; /* Минимальная высота равна высоте окна браузера */
}

.page-container {
    max-width: 1200px; /* Максимальная ширина контента */
    margin: 0 auto; /* Центрирование контейнера по горизонтали */
    background: white; /* Белый фон для основного содержимого */
    min-height: 100vh; /* Минимальная высота равна высоте окна браузера */
    box-shadow: 0 0 30px rgba(0,0,0,0.1); /* Легкая тень вокруг всего контента */
}

.header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* Темный градиентный фон */
    color: white; /* Белый цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    padding: 30px; /* Внутренние отступы со всех сторон */
    font-size: 28px; /* Размер шрифта */
    font-weight: 300; /* Легкое начертание шрифта */
    letter-spacing: 2px; /* Расстояние между буквами */
}

/* НАВИГАЦИЯ */

.nav {
    background: #2c3e50; /* Темно-синий фон навигации */
    padding: 20px 0; /* Вертикальные отступы */
}

.nav__list {
    list-style: none; /* Убираем маркеры списка */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
    display: flex; /* Горизонтальное расположение элементов */
    justify-content: center; /* Выравнивание по центру */
    gap: 25px; /* Расстояние между элементами навигации */
}

.nav__list-item {
    margin: 0;
}

.nav__link {
    color: white; /* Белый цвет текста ссылок */
    text-decoration: none; /* Убираем подчеркивание ссылок */
    padding: 12px 25px; /* Отступы внутри ссылок */
    border-radius: 25px; /* Скругленные углы (капсульная форма) */
    transition: all 0.3s ease; /* Плавные анимации при изменении */
    font-weight: 500; /* Средняя жирность шрифта */
}

.nav__link:hover {
    background: rgba(255,255,255,0.1); /* Полупрозрачный белый фон при наведении */
    transform: translateY(-2px); /* Легкое поднятие элемента при наведении */
}

/* MAIN */

main.content { /* ИЗМЕНЕНИЕ: Заменили .content на main для семантики */
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
    /* Новое: Привязка к области сетки */
    grid-area: main;
}

.horizontal-section {
    text-align: center;
    margin-bottom: 40px;
}

.vertical-section {
    display: grid;
    text-align: center;
    margin-bottom: 40px;
}

.section__image {
    width: 220px;
    height: 280px;
    border-radius: 15px;
    object-fit: cover;
    margin: 20px auto;
    border: 4px solid #667eea;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.section__link {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.section__link:hover {
    transform: translateY(-5px);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.grid__tag {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
    transition: all 0.3s ease;
    text-align: center;
}

.grid__tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

.section__label {
    display: flex;
    background: white; /* Белый фон карточки */
    padding: 25px; /* Внутренние отступы */
    margin: 20px 0; /* Вертикальные отступы */
    border-radius: 12px; /* Скругленные углы */
    box-shadow: 0 5px 20px rgba(0,0,0,0.08); /* Легкая тень */
    border-left: 4px solid #667eea; /* Синяя полоса слева */
    transition: transform 0.3s ease; /* Плавная анимация трансформации */
}

.section__label:hover {
    transform: translateX(5px); /* Сдвиг вправо при наведении */
}

/* FOOTER */

.footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); /* Темный градиентный фон */
    color: white; /* Белый цвет текста */
    text-align: center; /* Выравнивание по центру */
    padding: 30px; /* Внутренние отступы */
    margin-top: 50px; /* Отступ сверху */
}

.footer__link {
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(38, 2, 71, 0.411);
    transition: transform 1s ease;
}

.footer__link:hover {
    transform: translateY(-5px);
}