.main-wr {
    background-image: url("../static/background-main.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.main {
    position: relative;
    height: 90vh;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.main .background {
    position: relative;
}

.main .background img {
    width: 100%;
    height: auto;
    display: block;
}

.main .logo-button {
    width: clamp(260px, 35vw, 410px);

    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;

    position: absolute;
}

@media (max-width: 964px) {
    .main .logo-button {
        top: 44%;
    }
}

@media (max-width: 840px) {
    .main .logo-button {
        top: 47%;
    }
}

.main .logo-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);

    width: clamp(220px, 40vw, 360px);
    height: clamp(440px, 80vw, 720px);

    border-radius: 999px;
    background: linear-gradient(101.56deg, #FDF6EB 12.57%, #FFFBF7 96.46%);
    filter: blur(27vw);
    z-index: -1;
}

@media (max-width: 768px) {
    .main .logo-button::before {
        background: linear-gradient(101.56deg, #fdf6ebc1 12.57%, #fffbf76b 96.46%);
    }
}

.main .logo-button img,
.main .logo-button button {
    width: 100%;
    max-width: 100%;
    height: auto;

    position: relative;
    z-index: 1;

    cursor: pointer;
}

.main .logo-button button a {
    text-decoration: none;
    color: #FFFBF7;
}

.main .logo-button button {
    width: 100%;
    padding: 16px 0;
    border: none;
    border-radius: 12px;
    background-color: #190C04;

    font-size: 17px;
    color: #FFFBF7;
}

/* PHONE ADAPTIVE */

@media (max-width: 768px) {
    .background-wr {
        width: 100%;
    }

    .main {
        height: 100svh;
        overflow: hidden;
    }

    .main .background {
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%); /* центрируем по обеим осям */
        width: 160%;
    }

    .main .background img {
        width: 100%;
        height: auto;
        display: block;
    }

    .main .logo-button {
        width: clamp(200px, 65vw, 320px); /* чуть поменьше */
        top: 42%;
        gap: 20px;
    }

    .main .logo-button button {
        font-size: 15px;
        padding: 13px 0;
    }
}

@media (max-width: 425px) {
    .main .background {
        width: 180%;
    }

    .main .logo-button {
        width: clamp(180px, 60vw, 280px);
    }
}

@media (max-width: 320px) {
    .main .background {
        width: 210%;
    }

    .main .logo-button {
        width: clamp(160px, 55vw, 240px);
    }
}