:root {
    --gray-color: #666666;
    --orange-color: #b0946f;
    --title-txt-desk: clamp(12px, calc(12px + (100vw - 320px) * 26 / 1600), 38px);
    --title-txt-mob: clamp(16px, calc(16px + (100vw - 320px) * 24 / 320), 40px);
    --title-small-txt-desk: clamp(12px, calc(12px + (100vw - 320px) * 18 / 1600), 30px);
    --title-small-txt-mob: clamp(18px, calc(18px + (100vw - 320px) * 12 / 320), 30px);
    --point-width: clamp(35px, calc(35px + (100vw - 641px) * 265 / 1279), 300px);
}

@font-face {
    font-family: "Proxima Nova 2";
    src: url("/expert2026/buy/fonts/proxima-nova/proxima-nova.eot");
    src: url("/expert2026/buy/fonts/proxima-nova/proxima-nova.eot?#iefix")format("embedded-opentype"),
        url("/expert2026/buy/fonts/proxima-nova/proxima-nova.woff")format("woff"),
        url("/expert2026/buy/fonts/proxima-nova/proxima-nova.woff2")format("woff2"),
        url("/expert2026/buy/fonts/proxima-nova/proxima-nova.ttf")format("truetype"),
        url("/expert2026/buy/fonts/proxima-nova/proxima-nova.svg#UVF Proxima Nova Rg")format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Proximax";
    src:
        url("../fonts/geist/geist-cyrillic-300-normal.woff2") format("woff2"),
        url("../fonts/geist/geist-cyrillic-300-normal.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Proxima";
    src:
        url("../fonts/geist/geist-latin-300-normal.woff2") format("woff2"),
        url("../fonts/geist/geist-latin-300-normal.woff") format("woff");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: "Proximax", "Proxima", sans-serif;
}

.buy-page {
    position: relative;
    display: flow-root;
    width: 100%;
}

#top {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

#content {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 300px;

}

.line {
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            #fff 5%,
            var(--orange-color) 20%,
            var(--orange-color) 80%,
            #fff 95%,
            transparent);
}

.line-white {
    margin: 0 auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            #fff 5%,
            #fff 20%,
            #fff 80%,
            #fff 95%,
            transparent);
}

.title-block {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

.title-block-orange {
    color: var(--orange-color);
}

.title-block-white {
    color: #fff;
}

@media (max-width: 640px) {

    .only-desk {
        display: none;
    }

    .title-block {
        font-size: var(--title-txt-mob);
    }

    #top {
        background: url('/expert2026/buy/img/mob-top.jpg') top center / contain no-repeat;
        aspect-ratio: 640 / 897;
    }

    #content {
        background: url('/expert2026/buy/img/mob-top-bottom.png') top center / contain no-repeat;
        min-height: 860px;
    }
}

@media (min-width:641px) {

    .only-mob {
        display: none;
    }

    .title-block {
        font-size: var(--title-txt-desk);
    }

    #top {
        background: url('/expert2026/buy/img/desk-top.jpg') top center / contain no-repeat;
        aspect-ratio: 1920 / 1123;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
    }

    #content {
        padding-top: calc(100vw * 783 / 1920);
        margin-top: 0;
        position: relative;
        z-index: 1;
    }

}

@media (min-width:1920px) {
    #content {
        padding-top: 783px !important;
        margin-top: 0 !important;
    }
}