@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400..700&display=swap');


:root {
    --p-color: #4f3a6e;
    --ios-button-bg: #6C4797;
    --android-button-bg: #81C119;
    --white: #fff;
    --info-box-bg: #F1F4FE;
    --info-box-white-bg: #fff;
    --info-box-alert-bg: #FFF2F7;
    --link-color: #5a45ec;

    --gradient-1: #FF5C94;
    --gradient-2: #5741FA;

    --gradient-1-soft: #ff66a1;
    --gradient-2-soft: #ab5eff;

    --number-1-bg: #A88CE4;
    --number-2-bg: #D78ACE;
    --number-3-bg: #EC89B2;

    --android-box-bg: #F6F7FC;

    --header-height: clamp(650px, 100dvh, 800px);
    /*--header-buttons-height: clamp(650px, 100dvh, 1000px)*/
}

body {
   font-family: "Jost", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;

}
a {
    color: var(--link-color);
    &:hover {
      text-decoration: none;
    }
}

/*@media screen and (max-width: 768px) {*/
/*    html {*/
/*        font-size: clamp(14px, 1vw, 18px)*/
/*    }*/

/*}*/
header {
    height: var(--header-height);
    background-image: url(../images/header_background.webp);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    position: relative;
    padding-top: 3.37rem;
    z-index: 9;
}
@media screen and (-webkit-min-device-pixel-ratio: 2),  screen and (min-resolution: 192dpi) {
    .header {
        background-image: url(../images/header_background@2x.webp);
    }
}
.header-hearts {
    width: 122px;
    height: 300px;
    background: url(../images/header_hearts.webp) no-repeat top left;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 10vh;
    /*outline: 1px solid red*/
}
.logo {
    position: relative;
    z-index: 2;
    user-select: none;
}
.gradient-text {
    /*background: linear-gradient(135deg, #ef6995, #5443f0);*/
    background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.paragraph {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--p-color);
    letter-spacing: -0.5px
}

h1 {
    font-weight: 700;
    font-size: 4.5rem;
    letter-spacing: -0.5px;
    line-height: 4.5rem;
    margin-top: 6.5rem
}


h2 {
    font-weight: 700;
    font-size: 4rem;
    letter-spacing: -0.5px;
    line-height: 4rem;
    margin-top: 2rem;
    text-align: center;
}
h3{
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: -0.5px;
    line-height: 3.125rem;
    margin-top: 3.5rem;
    text-align: center;
    color: var(--p-color)
}

.footer-text {
    font-weight: 700;
    font-size: 3.5rem;
    letter-spacing: -1px;
    line-height: 3.125rem;
    margin-top: 5rem;
    text-align: center;
    color: var(--p-color)
}

.header-paragraph {
    margin-top: 3rem;
    max-width: 32rem
}

.header-buttons {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: center;
    /*margin-top: 15rem;*/
    position: absolute;
    height: var(--header-height);
    /*border: 1px solid red;*/
    inset: 0;
    padding-bottom: 1.25rem;
    z-index: 10;
}

/*@media screen and (min-width: 1440px) {*/
/*    .header-buttons {*/
/*        height: var(--header-height)*/
/*    }*/

/*}*/

.header-button {
    width: 210px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    border: unset;
    outline: unset;
    padding-left: 1.25rem;
    gap: 1rem;
    color: var(--white);
    font-weight: 500;
    text-decoration: none;
    transition: filter 0.3s linear;
    user-select: none;
    font-size: 20px;
    &.header-button-ios {
        background-color: var(--ios-button-bg) ;
        img {
            transform: translateY(-3px);
        }
    }
    &.header-button-android {
        background-color: var(--android-button-bg) ;
        img {
            transform: translateY(-1px);
        }
    }
    img {
        max-width: 28px;
        max-height: 33px
    }
    &:hover {
        filter: brightness(1.15);
    }
}

.title-helper {
    font-size: 1.25rem;
    color: var(--p-color);
    margin-top: 1.25rem;
    font-weight: 500
}

main {
    margin-top: 2.4rem
}
.info-box-wrapper {
    gap: 1.75rem;
    margin-top: 3.25rem
}
.info-box {
    display: flex;
    gap: 1.6rem;
    padding: 1.6rem 2rem;
    background-color: var(--info-box-bg);
    text-decoration: none;
    border-radius: 1.25rem;
    color: var(--p-color);
    /*letter-spacing: -0.7px;*/
    align-items: center;
    &.info-box-white {
        background-color: var(--info-box-white-bg);
    }
    &.info-box-alert {
        background-color: var(--info-box-alert-bg);
    }
    .info-box-icon {
        width: 3.1rem;
        height: 3.1rem;
        flex-shrink: 0;
        color: var(--white);
        font-weight: 600;
        text-transform: uppercase;
        background: linear-gradient(to right, var(--gradient-1), var(--gradient-2));
        background-size: 125%;
        border-radius: 50em;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        user-select: none;
    }
    .info-box-arrow {
        margin-left: auto;
        min-width: 15px;
        user-select: none;
    }
    .info-box-text {
        line-height: 1.25rem
    }

}

.info-box-b {
    margin-top: 3rem;
    margin-bottom: 2rem
}
.info-box-android {
    margin-top: 5rem;
    margin-bottom: 2rem
}

.info-box-c {
    margin-top: 3rem;
    margin-bottom: 2rem
}


.ios-rules-wrapper, .android-rules-wrapper {
    z-index: 3
}



.ios-bg {
    width: 100%;
    aspect-ratio: 2560/3889;


    left: 0;
    right: 0;
    bottom: 5vh;
    pointer-events: none;
}
.ios-bg-in {
    background-image: url(../images/ios_bg.webp);
    aspect-ratio: 2560/3889;
    width: 100%;
    background-position: bottom center;
    bottom: 0
}

.ios-bg-c-wrap {
    aspect-ratio: 0.66;
    /*outline: 1px solid red;*/
    top: 50%;
    transform: translateY(-60%);
    width: 100%
}
.ios-bg-c {
    bottom: 0;
}
.ios-bg-1 {
    width: 130px;
    height: 260px;
    background-image: url(../images/ios_bg_1.webp);
    background-position: top right;
    right: 0;
    top: 15vh;
    pointer-events: none;
}
.ios-bg-2 {
    width: 130px;
    height: 590px;
    background-image: url(../images/ios_bg_2.webp);
    background-position: top right;
    right: 0;
    top: clamp(500px, 40vh, 800px);
    pointer-events: none;
}

.ios-bg-3 {
    width: 320px;
    height: 764px;
    background-image: url(../images/ios_bg_3.webp);
    background-position: top left;
    left: 0;
    top: clamp(1300px, 100vh, 1500px);
    pointer-events: none;
    &.ios-bg-3-c {
        top: clamp(1100px, 80vh, 1300px);
    }
    &.ios-bg-3-g {
        top: clamp(200px, 10vh, 500px);
    }
}

.ios-bg-4 {
    width: 108px;
    height: 242px;
    background-image: url(../images/ios_bg_4.webp);
    background-position: top right;
    right: 0;
    top: clamp(1350px, 110vh, 1550px);
    pointer-events: none;
    &.ios-bg-4-c {
        top: clamp(1150px, 80vh, 1550px);
    }
}

.ios-bg-5 {
    width: 499px;
    height: 913px;
    background-image: url(../images/ios_bg_5.webp);
    background-position: top right;
    right: 0;
    bottom: -5vh;
    pointer-events: none;
}

.footer-bg-1 {
    width: 100%;
    /*height: 1591px;*/
    /*aspect-ratio: 0.80;*/
    aspect-ratio: 0.384;
    background-image: url(../images/footer_6.webp);
    background-position: bottom center;
    right: 0;
    left: 0;
    bottom: -40vh;
    pointer-events: none;
}

.footer-bg-2 {
    width: 326px;
    height: 442px;
    background-image: url(../images/footer_7.webp);
    background-position: bottom left;
    left: 0;
    bottom: -10vh;
    pointer-events: none;
}

.footer-bg-3 {
    width: 100%;
    /*height: 442px;*/
    aspect-ratio: 3.56;
    background-image: url(../images/footer_9.webp);
    background-position: bottom center;
    left: 0;
    right: 0;
    bottom: -5vh;
    pointer-events: none;
}




.instruction-list {
    margin-top: 5rem;
    row-gap: 6.25rem
}

.instruction-item {
    display: flex;
    gap: 1rem;
    .instruction-number {
        flex-shrink: 0;
        flex-basis: 3.125rem;
        transform: translateY(-1rem);
        .number {
            width: 3rem;
            height: 3rem;
            border-radius: 50em;
            background-color: var(--number-1-bg);
            display: flex;
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            justify-content: center;
            align-items: center;
            font-size: 1.25rem;
            user-select: none;
            &.number-2 {
                background-color: var(--number-2-bg);
            }
            &.number-3 {
                background-color: var(--number-3-bg);
            }
            &.gradient {
               background: linear-gradient(to right, var(--gradient-1-soft), var(--gradient-2-soft));
            }



        }
    }
    .instruction-content {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        overflow: hidden;
        &.instruction-content-h {
            flex-direction: row;
        }
        .instruction-title {
            color: var(--p-color);
            font-size: 1.25rem;
            line-height: 1.5rem;
            font-weight: 500;
            min-height: 48px

        }
        .instruction-text {
            color: var(--p-color);
            font-size: 1rem;
            line-height: 1.5rem;
            p {
                margin-top: 20px
            }
        }
    }
    .instruction-image {
        picture, img {
            max-width: 100%;
            height: auto
        }
    }
}

.android-rules-wrapper {
    margin-top: 7rem
}

.android-links {
    margin-top: 3rem;
    row-gap: 1rem;
}

.android-link {
    background-color: var(--android-box-bg);
    padding: 2.2rem 2rem;
    border-radius: 1.25rem;
    display: flex;
    gap: 2rem;
    .android-link-icon {
        user-select: none
    }
    .android-link-title {
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--p-color);
        margin-top: 0.75rem
    }
    .android-link-content {
        display: flex;
        gap: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .android-link-text {
        font-size: 1rem;
        line-height: 1.25rem;
        color: var(--p-color)
    }
    .android-link-button {
        text-decoration: none;
        background-color: var(--ios-button-bg);
        color: var(--white);
        border-radius: 0.75rem;
        padding: 0.75rem 1.25rem;
        transition: filter 0.3s ease-in-out;
        user-select: none;
        &:hover {
            filter: brightness(1.2);
        }
    }
}

.col-6 {
    /*outline: 1px solid red*/
}







.footer {
    padding-bottom: 9rem;
    /*justify-content: center;*/
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
    .footer-logo {
        /*display: inlinflex;*/
        margin-top: 3rem
    }
}


@media screen and (max-width: 768px) {
    h1 {
        font-size: 7vw;
        line-height: 1;
    }
    h2 {
        font-size: 6vw;
        line-height: 1;
    }

    .header-hearts, .ios-bg-1 {
        max-width: 10vw
    }

    .ios-bg-2, .ios-bg-4 {
        max-width: 12vw
    }

    .ios-bg-3 {
        max-width: 20vw
    }

     .ios-bg-5 {
        max-width: 40vw;
        background-position: bottom;
    }

    .footer-bg-2 {
        max-width: 30vw
    }


}

@media screen and (max-width: 1000px) and (orientation: portrait){
    :root {
        --header-height: unset;
    }
    .header-buttons {
        height: calc(100% + 150px);
    }
    .main {
        margin-top: 12rem
    }
}


@media screen and (max-width: 576px) {

    /*[data-parallax] {*/
    /*    display: none*/
    /*}*/
    /*.info-box {*/
    /*    display: none*/
    /*}*/
    /** {*/
    /*    outline: 1px dashed red*/
    /*}*/
    header {
        padding-top: 1rem;
    }
    h1 {
        margin-top: 1.5rem;
        margin-right: 30vw
    }
    .header-paragraph {
        max-width: 80vw
    }
    .header-button {
        width: 45vw;
        min-width: 150px;
        padding-left: 4vw;
        font-size: 17px;
        img {
            max-width: 24px;
            max-height: 24px;
        }
    }

    .header-hearts, .ios-bg-1 {
        max-width: 20vw
    }

    .ios-bg-2, .ios-bg-4 {
        max-width: 24vw
    }

    .ios-bg-3 {
        max-width: 25vw
    }

    .ios-bg-5 {
        max-width: 30vw;
        background-position: bottom;
    }

    .footer-bg-2 {
        max-width: 30vw
    }

    .android-link {
        padding: 2rem 1rem;
        gap: 1rem
    }
    .android-link-icon img {
        width: 56px;
        height: 56px;
    }

    h3 {
        font-size: 7vw;
        line-height: 1;
    }

    .android-rules-wrapper {
        margin-top: 2rem;
    }
    .instruction-list {
        margin-top: 2rem;
        row-gap: 4rem
    }
    .info-box {
        padding: 1rem 1.5rem
    }
    .instruction-content.pb-5.mb-5 {
        margin-bottom: 0 !important;
        padding-bottom: 10px !important;
    }
    .info-box-c {
        /*margin: 0;*/
    }
    .info-box-white {
        background-color: var(--info-box-bg) !important;
    }
    .info-box-android {
        margin-top: 2rem;
    }
    .info-box-b {
        margin-top: 2rem;
    }
    .info-box-icon-link {
        display: none !important;
    }
    .instruction-list-2 {
        row-gap: 2rem
    }
    .instruction-number {
        transform: unset !important;
    }
    .instruction-title {
        font-size: 1.5rem !important;
        min-height: unset !important;
    }
    .instruction-text {
        font-size: 1.25rem !important;
    }
}




@media screen and (min-width: 1600px) {
    .ios-bg-in {
        transform-origin: bottom center;
        transform: scaleY(0.85);
    }
}

@media screen and (min-width: 1800px) {
    .ios-bg-in {
        transform-origin: bottom center;
        transform: scaleY(0.75);
    }
}

@media screen and (min-width: 1920px) {
    .ios-bg-in {
        transform-origin: bottom center;
        transform: scaleY(0.7);
    }
}


@media screen and (max-width: 320px) {
    /** {outline: 1px dashed red}*/
    .paragraph {
        font-size: 1rem;
        line-height: 1.25
    }
    .header-paragraph {
        font-size: 1rem;
    }
    :root {
        --header-height: calc(100dvh - 100px);
    }
    .header-buttons {
        /*height: var(--header-height);*/
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }
    .android-link-icon {
        display: none;
    }
    .info-box {
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        .info-box-icon {
            display: none
        }
    }
    .instruction-image {
        overflow: hidden;
    }
    .instruction-item {
        .instruction-content {
            .instruction-title {
                font-size: 1.2rem !important;
                min-height: unset
            }
            .instruction-text {
                font-size: 1rem !important;
            }
        }
    }


    .instruction-item {
        .instruction-number {
            flex-basis: 20px;
            .number {
                width: 24px;
                height: 24px;
                font-size: 16px
            }
        }
    }

}