:root{
    color-scheme: light dark;

    --nav-size: clamp(16px, 1.1vw + .2rem, 20px); /* адаптивный размер меню */
    --nav-tracking: .2px;


    --bg2: #5d7e5c;
    --bg3: #97999a;
    --nav-fg: #E5E6E1;
    --fg: #3A3A32;
    --fg-soft: #4A4A42;
    --muted: #43515a;



    --space-md: 16px;
    --space-lg: 24px;


    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 14px;
    --glass-radius: 18px;
    --glass-shadow: 0 8px 30px rgba(0,0,0,.12);
}

html, body {
    min-height: 100%;
}

html{
    background-image:
            url("../images/noise.avif"),
            linear-gradient(
                    to bottom,
                    var(--bg2) 15%,
                    var(--bg3) 30%,
                    var(--bg3) 100%
            );
    background-repeat: repeat, no-repeat;
    background-blend-mode: soft-light, normal;

}
@media (max-width: 1100px) {
    html{
        background-image:
                url("../images/noise.avif"),
                linear-gradient(
                        to bottom,
                        var(--bg2) 10%,
                        var(--bg3) 20%,
                        var(--bg3) 100%
                );
    }
}
@media (max-width: 877px) {
    html{
        background-image:
                url("../images/noise.avif"),
                linear-gradient(
                        to bottom,
                        var(--bg2) 5%,
                        var(--bg3) 10%,
                        var(--bg3) 100%
                );
    }
}

body{
    margin: 0;
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: transparent;
    color: var(--fg);
}

.page {
    min-height: 100vh; /* фолбэк для старых браузеров (может не учитывать
панели на мобилках) */
    min-height: 100svh; /* стабильный минимум: высота экрана с панелями
(всегда влезет) */
    min-height: 100dvh; /* на новых браузерах — актуальная видимая высота,
обновляется при скролле */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    width: 70%;
    padding: 40px;
    margin: 0 auto;
    grid-area: main;
}
@media (max-width: 700px) {
    .main {
        width: 80%;
    }
}


.two-col-layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
@media (min-width: 1000px){
    .two-col-layout{
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1200px){
    .two-col-layout{
        grid-template-columns: 2fr 3fr;
    }
}



.section-title{
    margin: 1.5rem 0 1rem;
    text-align: center;

    font-family: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: clamp(22px, 1.8vw + .4rem, 28px);
    font-weight: 700;
    letter-spacing: .03em;

    color: var(--fg-soft);
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}