/* ===== БАЗОВЫЕ СБРОСЫ И ШРИФТЫ ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
            line-height: 1.6;
            color: #1e1e2f;
            background-color: #f9fafc;
        }

        /* ===== ОБЩИЕ СТИЛИ ДЛЯ ЭКРАНОВ ===== */
        .screen {
            min-height: 100vh;         /* каждый экран занимает всю высоту окна */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 4rem 2rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .screen:nth-child(odd) {
            background-color: #ffffff;
        }

        .screen:nth-child(even) {
            background-color: #f4f6fb;
        }

        /* ============================================================ */
        /* ПЕРВЫЙ ЭКРАН — ОСОБАЯ СТРУКТУРА: ХЭДЕР + КОНТЕНТ            */
        /* ============================================================ */
#screen1 {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
        url('background2.jpg') center / cover no-repeat fixed;
    padding: 0;
    justify-content: flex-start;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;                 /* ← ДОБАВИТЬ */
}

#screen1 .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    height: 100%;
    min-height: 0;                    /* ← ДОБАВИТЬ */
    overflow: hidden;                 /* ← ДОБАВИТЬ */
}
#screen1 .container {
    max-width: 100%;
    padding: 0;
    height: 80%;
    min-height: 0;                    /* ← ДОБАВИТЬ */
    overflow: hidden;                 /* ← ДОБАВИТЬ */
}
#screen1 .grid-2 > div:first-child {
    padding: 2rem 3rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;                    /* ← тоже, на всякий случай */
    overflow: hidden;                 /* ← если текст длинный — обрежется, а не раздуёт секцию */
}
/* ===== ТРЕТИЙ ЭКРАН ===== */
#screen3 {
    padding: 0;                        /* убираем отступы — баннер на всю ширину */
    justify-content: flex-start;       /* контент прижат к верху */
    align-items: stretch;              /* дети тянутся по ширине */
    border-bottom: none;               /* если не нужна разделительная линия */
}

#screen4 {
    padding: 0;                        /* убираем отступы — баннер на всю ширину */
    justify-content: flex-start;       /* контент прижат к верху */
    align-items: stretch;              /* дети тянутся по ширине */
    border-bottom: none;               /* если не нужна разделительная линия */
}

#screen5 {
    padding: 0;
    justify-content: flex-start;
    min-height: auto;        /* ← убираем принудительные 100vh */
    border-bottom: none;     /* ← если футер идёт сразу после */
}

.header {
    height: 11vh;
    min-height: 70px;
    width: 100%;
    background: url('banner4.jpg') center / cover no-repeat;
    border-bottom: 3px solid #ffcc00;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    flex-shrink: 0;
}

.header-inner {
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
}

        /* Место под логотип */
        .logo-placeholder {
            font-weight: 700;
            font-size: 1.25rem;
            color: #1e1e2f;
            letter-spacing: -0.01em;
            /* сюда можно вставить <img> вместо текста */
        }

.logo-placeholder img {
    filter: brightness(0) invert(1);       /* полностью белый */
}
        /* Место под навигацию */
        .nav-placeholder {
            display: flex;
            gap: 1.75rem;
            list-style: none;
        }

       .nav-placeholder a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: color 0.2s;
}

.nav-placeholder a:hover {
    color: #ffcc00;
}

        /* Обёртка для контента первого экрана (занимает оставшуюся высоту) */
        .hero-content {
    flex: 1;
    display: flex;
    align-items: stretch;       /* ← было center, из-за этого картинка не тянется */
    justify-content: center;
    padding: 0;
    width: 100%;
}
        /* ===== КОНТЕЙНЕР ДЛЯ КОНТЕНТА ===== */
        .container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;          /* отступы для читаемости */
}

        /* ===== ЗАГОЛОВКИ И ТЕКСТ ===== */
        h1 {
            font-size: clamp(2.2rem, 6vw, 4rem);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
        }

        h2 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 600;
            margin-bottom: 1.5rem;
            letter-spacing: -0.01em;
			text-align: center; 
        }

        h3 {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        p {
            font-size: 1rem;
            color: #3a3a4a;
            margin-bottom: 1.25rem;
            max-width: 70ch;
			
        }

        .subtitle {
            font-size: 1.25rem;
            color: #5a5a6e;
            margin-bottom: 2rem;
        }

        /* ===== МЕСТА ДЛЯ КАРТИНОК ===== */
        .image-placeholder {
            width: 100%;
            background-color: #e2e8f0;
            border-radius: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-weight: 500;
            font-size: 1rem;
            border: 2px dashed #cbd5e1;
            transition: background 0.2s;
            aspect-ratio: 16 / 9;
            margin: 2rem 0;
            overflow: hidden;
            text-align: center;
            padding: 1rem;
        }

        .image-placeholder:hover {
            background-color: #d9e2ec;
        }

        .image-placeholder.square {
            aspect-ratio: 1 / 1;
        }

        .image-placeholder.portrait {
            aspect-ratio: 3 / 4;
        }

        /* ===== ДВУХКОЛОНОЧНАЯ СЕТКА ===== */
        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0rem;
            align-items: center;
        }

        /* ===== КАРТОЧКИ ===== */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}
    .card {
        flex: 1 1 220px;
    background: #ffffff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: transform 0.2s, box-shadow 0.2s;
}

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
        }

        /* ===== КНОПКИ ===== */
        .btn {
            display: inline-block;
            background: #1e1e2f;
            color: #ffffff;
            padding: 0.9rem 2.2rem;
            border-radius: 3rem;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
            margin-top: 1rem;
        }

        .btn:hover {
            background: #2d2d44;
        }

        .btn-outline {
            background: transparent;
            color: #1e1e2f;
            border: 2px solid #1e1e2f;
            padding: 0.8rem 2rem;
        }

        .btn-outline:hover {
            background: #1e1e2f;
            color: #ffffff;
        }

        /* ===== ФУТЕР ===== */
        .footer-note {
            text-align: center;
            color: #8a8a9e;
            font-size: 0.9rem;
            margin-top: 3rem;
        }

        /* ===== АДАПТИВ ===== */
        @media (max-width: 768px) {
            .screen {
                padding: 3rem 1.5rem;
            }

            .header {
                padding: 0 1.5rem;
                height: 12.5vh;
                min-height: 60px;
				
            }

            .nav-placeholder {
                gap: 1rem;
                font-size: 0.85rem;
            }

.hero-content {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    width: 100%;
    min-height: 0;                    /* ← ДОБАВИТЬ — важно для flex! */
    overflow: hidden;                 /* ← ДОБАВИТЬ */
}

            .grid-2 {
                grid-template-columns: 1fr;
                gap: 2rem;
            }



            p {
                font-size: 1rem;
            }

            .image-placeholder {
                margin: 1rem 0;
            }
        }

        /* Скрываем навигацию на очень узких экранах (можно заменить на burger) */
        @media (max-width: 520px) {
            .nav-placeholder {
                display: none;
            }
        }

        /* ===== УТИЛИТЫ ===== */
        .text-center { text-align: center; }
        .text-center p { margin-left: auto; margin-right: auto; }
        .mt-2 { margin-top: 2rem; }
        .mb-2 { margin-bottom: 2rem; }
        .flex { display: flex; }
		
		
		/* Обёртка правой колонки — на всю высоту */
.hero-image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    display: block;
}

/* ===== FAQ — БЛЕДНО-СЕРЫЕ ПУНКТЫ СО СКРУГЛЕНИЕМ ===== */
.faq-item {
    background: #f0f0f0;              /* бледно-серый фон */
    border-radius: 1rem;              /* скруглённые углы */
    margin-bottom: 1rem;              /* отступ между пунктами */
    overflow: hidden;                 /* чтобы фон обрезался по скруглению */
    border: 1px solid #e5e5e5;        /* тонкая окантовка */
    transition: background 0.2s;
}

.faq-item[open] {
    background: #ebebeb;              /* чуть темнее, когда раскрыт */
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e1e2f;
    cursor: pointer;
    list-style: none;                 /* убираем стандартный треугольник */
    padding: 1.25rem 1.5rem;          /* внутренние отступы */
    display: flex;
    align-items: center;
    justify-content: space-between;   /* вопрос слева, плюс справа */
    transition: background 0.2s;
}

.faq-question:hover {
    background: #e8e8e8;              /* подсветка при наведении */
}

/* Убираем стандартный маркер в Safari/Chrome */
.faq-question::-webkit-details-marker {
    display: none;
}

/* Плюс/минус справа */
.faq-question::after {
    content: "➕";
    font-size: 0.9rem;
    margin-left: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

details[open] .faq-question::after {
    content: "➖";
}

.faq-answer {
    padding: 0 1.5rem 1.25rem 1.5rem; /* отступы внутри, сверху 0 */
    color: #5a5a6e;
    font-size: 1rem;
    margin: 0;                        /* сброс глобального p */
    max-width: 100%;                  /* перебить p { max-width: 70ch } */
}

/* ===== БАННЕР С ТЕКСТОМ ПОВЕРХ ===== */
.banner {
    position: relative;               /* якорь для позиционирования текста */
    width: 100%;
    height: 33vh;
    overflow: hidden;
}

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

.banner-text {
    position: absolute;               /* ← текст поверх картинки */
    inset: 0;                         /* растянуть на весь баннер */
    display: flex;
    flex-direction: column;
    align-items: center;              /* по центру по горизонтали */
    justify-content: center;          /* по центру по вертикали */
    text-align: center;
    color: #ffffff;                   /* белый текст */
    padding: 2rem;
    background: rgba(0, 0, 0, 0.35);  /* лёгкое затемнение для читаемости */
}

.banner-text h2 {
    color: #ffffff;                   /* перебить глобальный h2 */
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);  /* тень для читаемости */
}

.banner-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    margin: 0;
    max-width: 100%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
footer.header {
    border-bottom: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* ===== МОДАЛЬНАЯ ГАЛЕРЕЯ ===== */
.gallery-dialog {
    border: none;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 60vw;                     /* было 70vw — уменьшили */
    max-width: 700px;                /* было 900px — уменьшили */
    max-height: 100vh;
    overflow: auto;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);

    /* ЦЕНТРИРОВАНИЕ — вот чего не хватало */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.gallery-dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.5rem;
    display: block;
}

.gallery-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #1e1e2f;
    color: #ffffff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-close:hover {
    background: #2d2d44;
}