/* ==========================================================================
   1. СБРОС СТИЛЕЙ (RESET)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, 
body {
    height: 100%;
    background-color: var(--color-bg);
}

img, 
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button, 
input, 
textarea, 
select {
    font: inherit;
    background: none;
    border: none;
    color: inherit;
}

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

li {
    list-style: none;
}

/* ==========================================================================
   2. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (CSS VARIABLES)
   ========================================================================== */
:root {
    /* Цветовая палитра макета */
    --color-bg: #000000;
    --color-text-white: #ffffff;
    --color-text-gray: #aaaaaa;
    --color-accent-red: #ff0000;
    --color-accent-yellow: #ffff00;
    --color-accent-green: #00ff00;
    --color-accent-cyan: #00ffff;
    --color-accent-magenta: #ff00ff;
    --color-border-blue: #0000ff;
    --color-border-cyan: #00ffff;

    /* Шрифты */
    --font-primary: 'Courier New', Courier, monospace;
    --font-pixel: 'VT323', monospace;
    --font-courier-prime: 'Courier Prime', monospace;

    /* Сетки и отступы */
    --site-width: 1854px;
    --side-padding: 20px;
}

/* ==========================================================================
   3. БАЗОВЫЕ СТИЛИ ДЛЯ BODY
   ========================================================================== */
body {
    font-family: var(--font-primary);
    background-color: var(--color-bg);
    /* Разноцветное звездное небо (розовые, синие, желтые, белые неоновые звезды) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cdefs%3E%3CradialGradient id='gp' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='25%25' stop-color='%23ff00ff'/%3E%3Cstop offset='60%25' stop-color='%23aa00aa' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%23ff00ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gb' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='25%25' stop-color='%2300ffff'/%3E%3Cstop offset='60%25' stop-color='%23008888' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%2300ffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gy' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='25%25' stop-color='%23ffff00'/%3E%3Cstop offset='60%25' stop-color='%23888800' stop-opacity='0.4'/%3E%3Cstop offset='100%25' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='gw' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='30%25' stop-color='%23aaaaaa' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(80, 120) scale(0.5)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gp)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%23ff00ff' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(380, 70) scale(0.45)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gb)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%2300ffff' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(210, 240) scale(0.38)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gy)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%23ffff00' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(420, 390) scale(0.3)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gp)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%23ff00ff' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(60, 410) scale(0.35)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gw)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%23ffffff' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(310, 440) scale(0.28)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gy)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%23ffff00' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(320, 290) scale(0.25)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gb)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%2300ffff' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Cg transform='translate(130, 20) scale(0.48)'%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23gw)'/%3E%3Cpath d='M 50,0 Q 50,50 0,50 Q 50,50 50,100 Q 50,50 100,50 Q 50,50 50,0' fill='%23ffffff' opacity='0.9'/%3E%3Cpath d='M 50,15 Q 50,50 15,50 Q 50,50 50,85 Q 50,50 85,50 Q 50,50 50,15' fill='%23ffffff'/%3E%3C/g%3E%3Ccircle cx='40' cy='200' r='1.5' fill='%23ffff00' opacity='0.5'/%3E%3Ccircle cx='180' cy='180' r='1' fill='%2300ffff' opacity='0.6'/%3E%3Ccircle cx='280' cy='110' r='2' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='150' cy='380' r='1' fill='%23ff00ff' opacity='0.5'/%3E%3Ccircle cx='480' cy='260' r='1' fill='%2300ffff' opacity='0.4'/%3E%3Ccircle cx='460' cy='150' r='1.5' fill='%23ffff00' opacity='0.5'/%3E%3Ccircle cx='20' cy='30' r='1' fill='%23ffffff' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 500px 500px;
    color: var(--color-text-white);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.4;
    image-rendering: pixelated;
}

/* ==========================================================================
   4. КОНТЕЙНЕРЫ И СЕТКА ПЕРВОГО ЭКРАНА (HERO SECTION)
   ========================================================================== */
.page-container {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 var(--side-padding);
    position: relative;
    overflow: hidden;
}

.hero {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Приветствие сверху */
.hero__welcome {
    font-size: 22px;
    color: var(--color-text-white);
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Тонкий ретро-разделитель (длина строго 1854px задается по ширине контейнера) */
.hero__divider,
/* ==========================================================================
   МЕЖСЕКЦИОННЫЙ РАЗДЕЛИТЕЛЬ
   ========================================================================== */
.main-divider {
    border: none;
    border-top: 2px dotted var(--color-text-white);
    width: 100%;
    height: 0;
    margin: 40px 0; /* Гарантированные отступы сверху и снизу */
    clear: both;
    display: block;
    opacity: 0.8;
}

.hero__divider-bottom {
    margin-top: 20px;
    margin-bottom: 0;
}

/* Информеры Netscape и FrontPage */
.hero__badges {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Netscape блок */
.badge-netscape {
    display: flex;
    flex-direction: column;
}

.badge-netscape__title {
    font-size: 14px;
    color: var(--color-text-white);
    margin-bottom: 5px;
}

.badge-netscape__content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-netscape__logo {
    border: 1px solid var(--color-text-gray);
    image-rendering: pixelated;
}

.badge-netscape__text {
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text-white);
}

/* Frontpage блок */
.badge-frontpage {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.badge-frontpage__title {
    font-size: 16px;
    color: var(--color-text-white);
    margin-bottom: 5px;
}

.badge-frontpage__logo {
    width: 235px;
    height: 56px;
    border: 1px solid var(--color-text-gray);
    image-rendering: pixelated;
}

/* Основная трехколоночная сетка первого экрана */
.hero__grid {
    display: grid;
    grid-template-columns: 405px 1fr 410px;
    gap: 30px;
    align-items: start;
    margin-bottom: 30px;
}

/* ==========================================================================
   5. ЛЕВАЯ КОЛОНКА (ФОТО)
   ========================================================================== */
.hero__photo-wrapper {
    width: 405px;
}

.hero__photo-frame {
    width: 405px;
    height: 405px;
    border: 4px double var(--color-border-blue);
    /* Классический эффект свечения рамки */
    box-shadow: 0 0 10px var(--color-border-blue), inset 0 0 10px var(--color-border-blue);
    background-color: var(--color-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}

/* ==========================================================================
   6. ЦЕНТРАЛЬНАЯ КОЛОНКА (ЗАГОЛОВКИ И КИРПИЧИ) - ОБНОВЛЕННАЯ ВЕРСИЯ
   ========================================================================== */
.hero__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    height: 100%;
}

.hero__title {
    /* Ретро-пиксельный шрифт */
    font-family: var(--font-pixel); 
    font-size: 84px; /* Слегка увеличили размер, так как пиксельный шрифт уже обычного */
    color: var(--color-accent-red);
    text-shadow: 3px 3px 0px #300, 0px 0px 10px rgba(255, 0, 0, 0.6);
    line-height: 1.0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero__subtitle {
    /* Ретро-пиксельный шрифт */
    font-family: var(--font-pixel); 
    font-size: 36px; /* Слегка увеличили размер */
    color: var(--color-accent-green);
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 25px;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.hero__bricks {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: auto;
}

.hero__bricks-img {
    width: 410px;
    height: auto; 
    image-rendering: pixelated; /* Сохраняет четкость пикселей при увеличении */
}

/* ==========================================================================
   7. ПРАВАЯ КОЛОНКА (COOL MAN, СЧЕТЧИК, ПОЧТА)
   ========================================================================== */
.hero__right {
    position: relative;
    height: 460px; /* Фиксированная высота для перекрытия элементов */
}

/* Счетчик посетителей */
.hero__counter {
    position: absolute;
    top: 40px;
    right: 0;
    width: 300px;
    height: 195px;
    border: 3px dashed var(--color-border-blue);
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    z-index: 1; /* Под картинкой Cool Man */
    box-shadow: 0 0 15px rgba(0, 0, 255, 0.3);
}

.hero__counter-label {
    font-size: 21px;
    color: var(--color-text-white);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.hero__counter-value {
    font-family: var(--font-pixel);
    font-size: 35px;
    color: var(--color-accent-yellow);
    letter-spacing: 4px;
    margin: 10px 0;
}

/* Cool Man с наложением на счетчик */
.hero__coolman-wrapper {
    position: absolute;
    bottom: 0;
    left: -120px; /* Сдвиг влево для наложения плеча на рамку счетчика */
    width: 373px;
    height: 428px;
    z-index: 2; /* Поверх счетчика */
    pointer-events: none; /* Чтобы рамку счетчика под ним можно было кликнуть при необходимости */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__coolman-img {
    width: 373px;
    height: 428px;
    object-fit: contain;
    image-rendering: pixelated;
}

.hero__coolman-text {
    font-size: 21px;
    color: var(--color-accent-yellow);
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 0px #000;
    margin-top: -35px; /* Наложение текста поверх картинки */
    z-index: 3;
}

/* Ссылка на гостевую с письмом */
.hero__guestbook-link {
    position: absolute;
    bottom: 40px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero__guestbook-link:hover {
    transform: scale(1.05);
}

.hero__guestbook-link:active {
    transform: scale(0.95);
}

.hero__guestbook-icon {
    width: 66px;
    height: 44px;
    image-rendering: pixelated;
}

.hero__guestbook-text {
    font-size: 12px;
    color: var(--color-accent-magenta);
    font-weight: bold;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ==========================================================================
   8. БЕГУЩАЯ СТРОКА (TICKER BANNER)
   ========================================================================== */
.hero__ticker-container {
    border: 4px dashed var(--color-accent-yellow);
    background-color: var(--color-bg);
    padding: 10px 15px;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 25px;
}

.hero__ticker {
    display: flex;
    white-space: nowrap;
}

.hero__ticker-text {
    display: inline-block;
    font-size: 20px;
    color: var(--color-accent-magenta);
    font-weight: bold;
    letter-spacing: 2px;
    animation: marquee-scroll 25s linear infinite;
}

@keyframes marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ==========================================================================
   9. НАВИГАЦИОННОЕ МЕНЮ (NAV)
   ========================================================================== */
.nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.nav__item {
    font-size: 20px;
    color: var(--color-text-white);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Расстояние между ссылками 100px */
.nav__item:not(:last-child) {
    margin-right: 100px;
}

.nav__link {
    color: var(--color-accent-cyan);
    font-weight: bold;
    /* Расстояние между словом и скобками 22px с каждой стороны */
    margin: 0 22px;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.nav__link:hover {
    color: var(--color-accent-yellow);
    text-shadow: 0 0 8px var(--color-accent-yellow);
}

.nav__link:active {
    color: var(--color-accent-magenta);
}

/* ==========================================================================
   10. АДАПТИВНОСТЬ ДЛЯ ШАГА 1
   ========================================================================== */
@media (max-width: 1200px) {
    .hero__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 40px;
    }

    .hero__photo-wrapper,
    .hero__right {
        width: 100%;
        max-width: 405px;
    }

    .hero__right {
        height: auto;
        min-height: 480px;
    }

    .hero__coolman-wrapper {
        left: 0;
    }

    .nav__item:not(:last-child) {
        margin-right: 40px; /* Уменьшаем расстояние для планшетов */
    }
}

@media (max-width: 768px) {
    .hero__title {
        font-size: 48px;
    }

    .hero__subtitle {
        font-size: 24px;
    }

    .hero__welcome {
        font-size: 18px;
    }

    .hero__badges {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .badge-frontpage {
        align-items: center;
    }

    .nav__item {
        font-size: 16px;
    }

    .nav__item:not(:last-child) {
        margin-right: 20px;
    }

    .nav__link {
        margin: 0 10px;
    }
}

/* ==========================================================================
   11. СЕКЦИЯ ДОСЬЕ (DOSSIER SECTION)
   ========================================================================== */
.dossier {
    padding: 40px 0;
    position: relative;
}

/* Заголовок секции: шрифт 29px, зеленый, ретро-пиксельный стиль */
.dossier__title {
    font-family: var(--font-pixel);
    font-size: 29px;
    color: var(--color-accent-green);
    text-align: center;
    text-transform: lowercase; /* Строго как в макете */
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.4);
}

/* Сетка секции: две колонки */
.dossier__grid {
    display: grid;
    grid-template-columns: 1fr 380px 720px;
    gap: 40px;
    align-items: start;
}

/* Левый текстовый блок */
.dossier__info {
    display: flex;
    flex-direction: column;
}

/* Подзаголовок "Личное дело:": шрифт 20px, маджента */
.dossier__subtitle {
    font-size: 20px;
    color: var(--color-accent-magenta);
    font-weight: bold;
    margin-bottom: 25px;
    text-transform: none;
    letter-spacing: 1px;
}

.dossier__list {
    display: flex;
    flex-direction: column;
    gap: 14px; /* Отступы между строками досье */
}

/* Элемент списка досье: шрифт 18px, белый */
.dossier__item {
    font-size: 18px;
    color: var(--color-text-white);
    display: flex;
    align-items: flex-start;
    line-height: 1.4;
}

/* Зеленая звездочка перед строкой */
.dossier__bullet {
    color: var(--color-accent-green);
    font-weight: bold;
    margin-right: 15px;
    user-select: none;
}

/* Название поля (Ключ) - фиксированная ширина для идеального выравнивания двоеточий */
.dossier__label {
    width: 170px;
    flex-shrink: 0;
    color: var(--color-text-white);
}

/* Значение поля */
.dossier__value {
    color: var(--color-text-white);
}

/* Правый блок: контейнер изображения Брестоблгаза */
.dossier__image-wrapper {
    width: 720px;
    height: 562px;
    border: 2px solid var(--color-text-white);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.dossier__image {
    width: 720px;
    height: 562px;
    object-fit: cover;
    display: block;
    image-rendering: auto; /* Оптимальное сглаживание для реальных фото */
}

.dossier__portrait-wrapper {
    width: 380px;
    height: 562px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.dossier__portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
}

/* ==========================================================================
   12. АДАПТИВНОСТЬ ДЛЯ СЕКЦИИ ДОСЬЕ
   ========================================================================== */
@media (max-width: 1200px) {
    .dossier__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 30px;
    }

    .dossier__image-wrapper,
    .dossier__image {
        width: 100%;
        max-width: 720px;
        height: auto;
    }

    .dossier__portrait-wrapper,
    .dossier__portrait {
        width: 100%;
        max-width: 380px;
        height: auto;
    }
}

@media (max-width: 768px) {
    .dossier__title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .dossier__subtitle {
        font-size: 18px;
    }

    .dossier__item {
        font-size: 16px;
        flex-direction: column;
    }

    .dossier__label {
        width: 100%;
        margin-bottom: 4px;
    }

    .dossier__bullet {
        display: none; /* Скрываем звездочки на мобильном для экономии места */
    }
}

/* ==========================================================================
   13. СЕКЦИЯ КАРТОЧЕК "О НАС" (ABOUT CARDS)
   ========================================================================== */
.about-cards {
    padding: 30px 0;
    margin: 40px 0;
    background-color: transparent;
}

.about-cards__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Колонка: ширина ровно 600px */
.about-cards__column {
    width: 600px;
    height: 748px; /* Высота подгоняется под размер вертикальных разделителей */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Текст наверху, фото внизу */
    padding: 10px 20px;
    box-sizing: border-box;
}

/* Заголовки колонок: шрифт 30px, зеленый */
.about-cards__title {
    font-family: var(--font-pixel);
    font-size: 30px;
    color: var(--color-accent-green);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

/* Контейнер для текста внутри колонки */
.about-cards__text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

/* Белый текст внутри колонок: шрифт 20px */
.about-cards__intro,
.about-cards__line,
.about-cards__list-item {
    font-size: 20px;
    color: var(--color-text-white);
    line-height: 1.4;
    font-family: var(--font-primary);
}

/* Стилизация маркированного списка для первой колонки */
.about-cards__list {
    margin-top: 5px;
    padding-left: 20px;
}

.about-cards__list-item {
    list-style-type: disc; /* Стандартный круглый маркер */
    margin-bottom: 8px;
}

/* Обычные строки во 2 и 3 колонках */
.about-cards__line {
    margin: 0;
    position: relative;
}

/* Вертикальные разделители: высота ровно 748px */
.about-cards__vertical-divider {
    width: 0;
    height: 748px;
    border-left: 2px dotted var(--color-text-white);
    opacity: 0.7;
    align-self: center;
}

/* Рамки для фотографий */
.about-cards__image-frame {
    width: 100%;
    height: 340px;
    border: 1px solid var(--color-text-white);
    background-color: var(--color-bg);
    overflow: hidden;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.about-cards__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
}

/* ==========================================================================
   14. АДАПТИВНОСТЬ ДЛЯ СЕКЦИИ КАРТОЧЕК
   ========================================================================== */
@media (max-width: 1800px) {
    .about-cards__container {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .about-cards__vertical-divider {
        display: none; /* Скрываем вертикальные разделители при перестроении сетки */
    }

    .about-cards__column {
        height: auto; /* Сбрасываем фиксированную высоту */
        min-height: 700px;
        border: 2px dotted var(--color-text-white); /* Добавляем рамку вокруг колонок при адаптации */
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .about-cards {
        padding: 15px 0;
    }

    .about-cards__column {
        width: 100%;
        max-width: 600px;
        padding: 15px;
        min-height: auto;
    }

    .about-cards__title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .about-cards__intro,
    .about-cards__line,
    .about-cards__list-item {
        font-size: 18px;
    }

    .about-cards__image-frame {
        height: 260px;
    }
}

/* ==========================================================================
   15. СЕКЦИЯ ПУТЕШЕСТВИЙ (ADVENTURES SECTION)
   ========================================================================== */
.adventures {
    padding: 30px 0;
    position: relative;
}

/* Главный заголовок секции: зеленый, 30px */
.adventures__title {
    font-family: var(--font-pixel);
    font-size: 30px;
    color: var(--color-accent-green);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 35px;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

/* Трехколоночная сетка */
.adventures__grid {
    display: grid;
    grid-template-columns: 756px 1fr 756px;
    gap: 20px;
    align-items: start;
}

/* Колонки локаций */
.adventures__column {
    display: flex;
    flex-direction: column;
}

/* Названия локаций: желтые, 26px */
.adventures__location-title {
    font-family: var(--font-primary);
    font-size: 26px;
    color: var(--color-accent-yellow);
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Фоторамки с оранжево-золотой ретро-границей */
.adventures__image-frame {
    width: 756px;
    height: 390px;
    border: 2px solid #ffaa00; /* Ретро оранжево-золотой бордюр */
    background-color: var(--color-bg);
    overflow: hidden;
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.2);
    margin-bottom: 20px;
}

.adventures__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Описание ниже картинок */
.adventures__description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 5px;
}

/* Ретро сине-фиолетовый (лавандовый) шрифт для эмоциональных фраз */
.adventures__text-blue {
    font-family: var(--font-primary);
    font-size: 20px;
    color: #9999ff; /* Ретро лавандово-синий цвет */
    line-height: 1.3;
}

/* Мета-информация (Год и Результат) */
.adventures__meta {
    margin-top: 10px;
    font-family: var(--font-primary);
    font-size: 18px;
    color: var(--color-text-white);
    line-height: 1.4;
}

/* Желтый акцент для меток "Год:" и "Результат:" */
.adventures__meta-label {
    color: var(--color-accent-yellow);
    font-weight: bold;
}

/* Центральная колонка (Глобус) */
.adventures__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding-top: 100px; /* Смещение вниз для центрирования относительно картинок */
}

/* Глобус строго 100x100px */
.adventures__globe {
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    border-radius: 50%;
}

/* Вертикальный слоган желтого цвета */
.adventures__vertical-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.adventures__word {
    font-family: var(--font-primary);
    font-size: 20px;
    color: var(--color-accent-yellow);
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 2px 2px 0px #000;
}

/* ==========================================================================
   16. АДАПТИВНОСТЬ ДЛЯ СЕКЦИИ ПУТЕШЕСТВИЙ
   ========================================================================== */
@media (max-width: 1700px) {
    .adventures__grid {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 50px;
    }

    .adventures__center {
        padding-top: 0;
        order: -1; /* Глобус уходит наверх при мобильной верстке */
        flex-direction: row;
        gap: 40px;
    }

    .adventures__vertical-text {
        flex-direction: row;
        gap: 15px;
    }
}

@media (max-width: 820px) {
    .adventures__image-frame {
        width: 100%;
        max-width: 756px;
        height: auto;
        aspect-ratio: 756 / 390;
    }

    .adventures__location-title {
        font-size: 22px;
    }

    .adventures__text-blue {
        font-size: 18px;
    }

    .adventures__meta {
        font-size: 16px;
    }
}

/* ==========================================================================
   17. СЕКЦИЯ ДОСТИЖЕНИЙ И ДРУЗЕЙ (ACHIEVEMENTS)
   ========================================================================== */
.achievements {
    padding: 30px 0;
    position: relative;
}

/* Сетка: левая колонка (1fr), центральная (ровно 512px), правая (1fr) + разделители */
.achievements__grid {
    display: grid;
    grid-template-columns: 1fr auto 512px auto 1fr;
    gap: 20px;
    align-items: stretch; /* Растягиваем колонки и разделители по высоте */
}

.achievements__column {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
}

/* Названия крайних колонок: зеленые, 30px */
.achievements__title {
    font-family: var(--font-pixel);
    font-size: 30px;
    color: var(--color-accent-green);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-align: center;
}

/* Название центральной колонки: маджента */
.achievements__title--magenta {
    color: var(--color-accent-magenta);
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
}

/* --- ЛЕВАЯ КОЛОНКА --- */
.achievements__column--left {
    align-items: flex-start;
}

.achievements__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.achievements__list-item {
    font-family: var(--font-primary);
    font-size: 18px;
    color: var(--color-text-white);
    display: flex;
    align-items: center;
}

.achievements__bullet {
    color: var(--color-accent-green);
    font-weight: bold;
    margin-right: 12px;
    font-size: 20px;
}

/* Блок "Наша гордость" */
.achievements__pride-row {
    margin-top: auto; /* Прижимает к низу */
    display: flex;
    align-items: flex-end;
    gap: 25px;
    padding-left: 20px;
}

.achievements__pride-text {
    font-family: var(--font-primary);
    font-size: 20px;
    color: var(--color-text-white);
    line-height: 1.3;
}

.achievements__trophy-img {
    width: auto !important;
    height: 127px !important;
    flex-shrink: 0; /* Запрещает flex-контейнеру деформировать пропорции изображения */
    image-rendering: pixelated;
}

/* --- ЦЕНТРАЛЬНАЯ КОЛОНКА (512px) --- */
.achievements__column--center {
    width: 512px;
    align-items: center;
}

.achievements__cake-img {
    width: 220px;
    height: 150px;
    image-rendering: pixelated;
    margin-bottom: 25px;
}

.achievements__congrats-box {
    text-align: left;
    width: 100%;
    padding-left: 50px; /* Смещение для выравнивания по макету */
}

/* Текст "Так держать, Молодой!" */
.achievements__congrats-lead {
    font-family: var(--font-primary);
    font-size: 20px;
    color: var(--color-accent-magenta);
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* Список пожеланий */
.achievements__wish-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.achievements__wish-item {
    font-family: var(--font-primary);
    font-size: 18px;
    color: var(--color-accent-cyan); /* Циановый / светло-голубой цвет строчек */
    line-height: 1.3;
}

/* --- ПРАВАЯ КОЛОНКА --- */
.achievements__column--right {
    align-items: center;
    text-align: center;
}

.achievements__friends-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
}

.achievements__friends-paragraph {
    font-family: var(--font-primary);
    font-size: 20px;
    color: var(--color-text-white);
    line-height: 1.3;
}

/* Фотоаппарат и блокнот */
.achievements__camera-wrapper {
    margin-top: auto;
    margin-bottom: 25px;
}

.achievements__camera-img {
    width: 280px;
    height: 150px;
    image-rendering: pixelated;
}

/* Ссылка "Жми сюда!" */
.achievements__friend-link {
    font-family: var(--font-primary);
    font-size: 20px;
    color: var(--color-accent-cyan);
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.achievements__friend-link:hover {
    color: var(--color-accent-yellow);
    text-shadow: 0 0 5px var(--color-accent-yellow);
}

/* --- ВЕРТИКАЛЬНЫЕ РАЗДЕЛИТЕЛИ --- */
.achievements__vertical-divider {
    width: 0;
    border-left: 2px dotted var(--color-text-white);
    opacity: 0.7;
}

/* ==========================================================================
   18. АДАПТИВНОСТЬ ДЛЯ СЕКЦИИ ДОСТИЖЕНИЙ
   ========================================================================== */
@media (max-width: 1400px) {
    .achievements__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .achievements__vertical-divider {
        display: none; /* Скрываем вертикальные разделители при перестроении */
    }

    .achievements__column--center {
        width: 100%;
        max-width: 512px;
        margin: 0 auto;
    }

    .achievements__column {
        border: 2px dotted var(--color-text-white);
        padding: 20px;
        align-items: center;
        text-align: center;
    }

    .achievements__column--left {
        align-items: center;
    }

    .achievements__list {
        align-items: flex-start;
    }

    .achievements__congrats-box {
        padding-left: 0;
        text-align: center;
    }

    .achievements__wish-list {
        align-items: center;
    }
}

/* ==========================================================================
   19. ПОДВАЛ САЙТА (FOOTER SECTION)
   ========================================================================== */
.footer {
    padding: 25px 0 40px 0;
    position: relative;
    background-color: transparent;
}

.footer__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 30px;
}

/* Общие стили для баннеров/изображений в подвале */
.footer__badge-img {
    display: block;
    image-rendering: pixelated;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Принудительное переопределение размеров для отключения влияния height: auto */
.footer__left .footer__badge-img {
    width: 306px;
    height: 146px;
}

.footer__right-badge .footer__badge-img {
    width: 292px;
    height: 117px;
}

/* Центральный блок копирайта */
.footer__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

/* Шрифт 16px, Courier monospace, белый */
.footer__text {
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-text-white);
    line-height: 1.3;
    margin: 0;
    letter-spacing: 0.5px;
}

/* Группа с котом */
.footer__cat-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* Текст "THE BEST": шрифт 16px, маджента */
.footer__cat-title {
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-accent-magenta);
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000;
}

.footer__cat-img {
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
}

/* ==========================================================================
   20. АДАПТИВНОСТЬ ДЛЯ ПОДВАЛА
   ========================================================================== */
@media (max-width: 1024px) {
    .footer__container {
        flex-direction: column;
        gap: 35px;
        text-align: center;
    }

    .footer__left,
    .footer__right-badge,
    .footer__cat-group {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer__text {
        font-size: 14px;
    }
}

/* ==========================================================================
   21. ФИНАЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ ПОДВАЛА (FOOTER BOTTOM)
   ========================================================================== */
.footer__bottom {
    margin-top: 40px; /* Отступ от верхнего блока баннеров */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Строка навигации */
.footer__bottom-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: var(--font-primary);
    font-size: 20px; /* Размер шрифта ссылок */
}

/* Желтые подчеркнутые ссылки */
.footer__bottom-link {
    color: var(--color-accent-yellow);
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.1s ease, text-shadow 0.1s ease;
}

.footer__bottom-link:hover {
    color: var(--color-accent-cyan);
    text-shadow: 0 0 4px var(--color-accent-cyan);
}

/* Разделители '|' желтого цвета */
.footer__bottom-separator {
    color: var(--color-accent-yellow);
    margin: 0 15px;
    font-weight: bold;
    user-select: none;
}

/* Текст "Спасибо, что зашёл..." оранжевого цвета */
.footer__thanks {
    font-family: var(--font-primary);
    font-size: 20px;
    color: #ff5500; /* Классический ретро-оранжевый */
    font-weight: bold;
    text-align: center;
    margin: 0;
    letter-spacing: 1px;
}

/* Адаптивность для нижнего подвала */
@media (max-width: 768px) {
    .footer__bottom-nav {
        font-size: 16px;
    }

    .footer__bottom-separator {
        margin: 0 8px;
    }

    .footer__thanks {
        font-size: 16px;
    }
}

/* Изменение высоты рамки только для карточки "На работе" */
.about-cards__image-frame--work {
    height: 450px; /* Укажите здесь нужную вам высоту */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .footer__credits {
        font-size: 12px;
    }
}