* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100svh;

    font-family: Roboto, Arial, sans-serif;
    font-weight: 800;

    background: #000000 url("./assets/images/bg-desktop.jpg") center / cover no-repeat;
}

h1,
p,
ol {
    margin: 0;
}

ol {
    padding: 0;
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    padding: 0;
    border: 0;

    background: none;
    cursor: pointer;
}

@font-face {
    font-family: "Roboto";
    src: url("./assets/fonts/Roboto-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("./assets/fonts/Roboto-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("./assets/fonts/Montserrat-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

.page {
    min-height: 100svh;
}

.banner {
    display: flex;
    flex-direction: column;

    padding: 132px 86px 107px 86px;
    min-height: 100svh;
    row-gap: 32px;
}

.banner__content {
    display: flex;
    justify-content: start;
}

.banner__offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;

    color: #fff;
    text-shadow: 0 4px 10px #050031;
}

.banner__logo {
    margin-bottom: 17px;
}

.banner__title {
    font-size: 120px;
    font-weight: 900;
    text-transform: uppercase;
}

.banner__subtitle {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 54px;
    font-weight: 800;
    text-shadow: 0 4px 15px #000;
    text-transform: uppercase;
}

.banner__action {
    margin-top: 61px;
}

.button {
    position: relative;
    display: inline-block;
    overflow: hidden;

    padding: 10px;
    border: 6px solid #93e126;
    border-radius: 56px;

    box-shadow:
        0 0 8px #92e20a,
        0 17px 74px 0 #011741;

    text-decoration: none;
    text-transform: uppercase;
}

.button__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 350px;
    height: 62px;
    overflow: hidden;

    border-radius: 48px;
    background: #93e126;
    box-shadow:
        0 0 19px #92e20a,
        inset 0 2px 0 #bdff82;
}

.button__highlight {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 48px;
}

.button__highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    display: block;
    width: 64px;
    height: 100%;

    transform: skewX(-45deg);

    background: linear-gradient(
        90deg,
        rgba(252, 255, 255, 0),
        rgba(252, 255, 255, 0.3) 45%,
        rgba(252, 255, 255, 0.4) 50%,
        rgba(252, 255, 255, 0.3) 55%,
        rgba(252, 255, 255, 0)
    );
    animation: animationHighlight 4s linear 0.3s infinite forwards;
}

.button__text {
    position: relative;
    z-index: 1;

    color: #000;
    font-size: 39px;
    font-weight: 800;
    line-height: 42px;
    text-shadow: none;
}

.button:hover {
    opacity: 0.9;
}

.banner__steps {
    display: flex;
    column-gap: 45px;

    margin-top: auto;
    margin-left: 14px;
}

.banner__step {
    color: #fff;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 51px;
    text-transform: uppercase;
}

.banner__step:not(:last-child) {
    display: flex;
    align-items: center;
    column-gap: 45px;
}

.banner__step:not(:last-child)::after {
    content: "";
    display: block;
    width: 73px;
    height: 51px;

    background: url("./assets/icons/arrow.svg") center / contain no-repeat;
    flex-shrink: 0;
}

.banner__step--accent {
    color: #9ee607;
}

@keyframes animationHighlight {
    0%,
    100% {
        left: -100%;
        opacity: 1;
    }

    97% {
        left: 120%;
        opacity: 1;
    }

    98% {
        left: 120%;
        opacity: 0;
    }

    99% {
        left: -100%;
        opacity: 0;
    }
}

@media screen and (min-width: 541px) {
    .banner {
        padding: clamp(40px, 6.875vw, 132px) clamp(24px, 4.48vw, 86px) clamp(48px, 5.57vw, 107px);
    }

    .banner__offer {
        row-gap: clamp(8px, 0.78vw, 15px);
    }

    .banner__logo {
        margin-bottom: clamp(10px, 0.885vw, 17px);
    }

    .banner__title {
        font-size: clamp(64px, 6.25vw, 120px);
    }

    .banner__subtitle {
        font-size: clamp(26px, 2.8125vw, 54px);
    }

    .banner__action {
        margin-top: clamp(32px, 4.21875vw, 81px);
    }

    .button {
        padding: clamp(4px, 0.5208vw, 10px);
    }

    .button__inner {
        width: clamp(220px, 18.2292vw, 350px);
        height: clamp(44px, 3.229vw, 62px);
    }

    .button__text {
        font-size: clamp(24px, 2.03125vw, 39px);
        line-height: clamp(28px, 2.1875vw, 42px);
    }

    .banner__steps {
        column-gap: clamp(16px, 2.34375vw, 45px);
        margin-left: clamp(0px, 0.729vw, 14px);
    }

    .banner__step {
        font-size: clamp(18px, 1.667vw, 32px);
        line-height: clamp(28px, 2.65625vw, 51px);
    }

    .banner__step:not(:last-child) {
        column-gap: clamp(16px, 2.34375vw, 45px);
    }

    .banner__step:not(:last-child)::after {
        width: clamp(36px, 3.802vw, 73px);
        height: clamp(25px, 2.65625vw, 51px);
    }
}

@media screen and (max-width: 540px) {
    body {
        background: #000000 url("./assets/images/bg-mobile.jpg") center / cover no-repeat;
    }

    .banner {
        padding: 20px 20px 37px 20px !important;
    }

    .banner__content {
        justify-content: center !important;
        width: 100%;
    }

    .banner__offer {
        width: 100% !important;
        row-gap: 0 !important;
    }

    .banner__logo {
        width: 78px;
        height: 17px;
        margin-bottom: 24px;
    }

    .banner__title {
        margin-bottom: 10px;

        font-size: 60px;
        font-weight: 900;
        text-shadow: 0 1px 3px #050031;
    }

    .banner__subtitle {
        font-size: 24px;
        font-weight: 900;
        line-height: 140%;
        text-shadow: 0 1px 4px #000;
    }

    .banner__action {
        margin-top: 14px;
    }

    .button {
        padding: 6px;
        border-width: 4px;
    }

    .button__inner {
        width: 200px;
        height: 44px;
        overflow: hidden;
    }

    .button__text {
        text-align: center;

        font-size: 23px;
        line-height: 25px;
    }

    .banner__steps {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
        flex-wrap: nowrap;
    }

    .banner__step {
        max-width: 100%;

        font-size: 22px;
        line-height: 160%;
        text-align: center;
        white-space: nowrap;
    }

    .banner__step:not(:last-child) {
        flex-direction: column;
    }

    .banner__step:not(:last-child)::after {
        height: 35px;
        width: 24px;
        background-image: url("./assets/icons/arrow-mobile.svg");
    }
}