/*Hero*/
.hero{
    height: 112vh;
    position: relative;
}
.hero > div:first-child {
    padding-top: 152px;
    display: grid;
    justify-content: center;
    align-content: center;
}
.hero .CTA-primary {
    justify-self: center;
}
.hero h1{
    margin-bottom: 16px;
    text-align: center;
}
.hero .tag-row{
    justify-content: center;
    column-gap: 16px;
    margin-bottom: 40px;
}

.hero > img{
    width: 96%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform-origin: center;
    transform: rotate(4deg) translate(-50%, -4%);
}
.hero > img.mobile{
    display: none;
}


/*context separator*/
.separator {
    padding: 80px 0;
}
.separator .row{
    justify-content: space-between;
}
.separator .row > div:first-child{
    width: 64%;
}
.separator h2{
    margin-bottom: 80px;
}
.separator h3{
    margin-bottom: 16px;
}
.separator .row > div:first-child p:nth-child(3) {
    margin-bottom: 40px;
}
.separator h4{
    margin: 40px 0 8px;
}
.separator .card div:first-child h4{
    margin-top: 0;
}
.separator .card{
    width: auto;
    flex-grow: 0;
}

/*target audience*/
.target {
    margin: 240px auto;
}

.target-frame{
    width:36%;
    aspect-ratio: 1/1;
    position: relative;
    z-index: -1;
 }
 .framed-target{
     width: 152%;
     aspect-ratio: 1/1;
     border-radius: 80px;
     overflow: hidden;
     position: absolute;
     top: 50%;
     transform-origin: center;
     transform: translateX(-40%) translateY(-50%) rotate(40deg);
 }
 .framed-target img{
     height: 136%;
     transform-origin: center;
     transform: rotate(-40deg) translate(-24% , -34%);
 }

.target > .row{
    justify-content: space-between;
}
.target > .row > div:last-child{
    width: 56%;
}
.target h2{
    margin-bottom: 24px;
}
.target > .row > div > p {
    margin-bottom: 80px;
}

.target .card{
    padding: 20px;
    width: 32%;
    flex-grow: 0;
}
.target .row div .row {
    justify-content: space-between;
}
.target h4{
    margin-bottom: 24px;
}
.target .card .row{
    column-gap: 16px;
}
.target .card p{
    font-size: 24px;
    line-height: 28px;
    text-align: center;
}

.icon{
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
}
.stonks{
    background: url('../img/svg/Stonks.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.lightbulb{
    background: url('../img/svg/lightbulb.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ID{
    background: url('../img/svg/ID.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*How*/

.how h2{
    text-align: center;
    margin-bottom: 80px;
}

.sitemap{
    width: 100%;
    aspect-ratio: 9/7;
    position: relative;
}
.sitemap img{
    height: 88%;
    position: absolute;
    right: 50%;
    transform: translate(50%, 0);
}

.how .container > .row {
    justify-content: space-between;
    margin-top: 160px;
}
.how .container > .row > div:first-child {
    width: 48%;
}
.how h3{
    margin-bottom: 24px;
}
.how .row .row{
    margin-top: 40px;
    column-gap: 20px;
}
.card.row {
    padding: 20px;
    align-items: center;
    column-gap: 16px;
    align-items: center;
    flex-grow: 0;
    width: 50%;
}
.how .icon{
    aspect-ratio: 1/1;
    width: 48px;
    height: 48px;
    margin: 0;
}
.happy{
    background: url('../img/svg/happy.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.dollar{
    background: url('../img/svg/dollars.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.perf{
    background: url('../img/svg/perf.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
}
.maintenance{
    background: url('../img/svg/maintenance.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.how .container > .row > div:last-child {
    width: 48%;
    aspect-ratio: 1/1;
    position: relative;
}
.how .container > .row > div:last-child img{
    width: 140%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.how .container > .row:nth-child(3) > div:last-child img{
    left: 10%;
}
.how .container > .row.reversed > div:last-child img{
    width: 140%;
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}
.how .container > .row:last-child > div:last-child img{
    width: 100%;
    left: 10%;
}

/*Challenges*/
.challenges{
    margin-top: 160px;
}
.challenges h2{
    text-align: center;
    margin-bottom: 80px;
}
.challenges .row {
    width: 100%;
    column-gap: 20px;
    justify-content: space-between;
}
.challenges .card{
    width: 32%;
    padding: 20px;
}
.challenges h4{
    margin-bottom: 16px;
    text-align: center;
}
.challenges .card p{
    text-align: center;
}
.picto{
    width: 128px;
    display: block;
    margin: 0 auto 24px;
}

/*Responsive*/
@media screen and (max-width: 800px){
    /*Hero*/
    .hero h1{
        text-align: center;
    }
    .hero .tag-row{
        display: none;
    }
    .hero > img{
        display: none;
    }
    .hero > img.mobile{
        display: block;
        width: 88%;
        transform: translate(-50%, -8%);
    }
    /*Separator*/
    .separator {
        padding: 40px 0;
    }
    .separator .container > .row {
        flex-wrap: wrap-reverse;
    }
    .separator .container > .row > div{
        width: 100%;
    }
    .separator .card{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 80px;
        justify-content: space-between;
    }
    .separator .card > div{
        width: 48%;
    }
    .separator .card > div:nth-child(2) h4{
        margin-top: 0;
    }

    /*Target*/
    .target{
        margin-top: 160px;
    }
    .target .target-frame{
        width: 100%;
    }
    .target .framed-target{
        width: 110%;
        left: 40%;
        transform: translate(-50%, -50%), rotate(-40deg);
    }
    
    .target > .row{
        flex-wrap: wrap;
    }
    .target  > .row > div{
        width: 100%;
    }
    .target> .row > div:last-child{
        width: 100%;
    }
    .target .row .row{
        flex-wrap: wrap;
        row-gap: 16px;
    }
    .target .card{
        width: auto;
        column-gap: 20px;
        padding: 20px;
        display: flex;
        align-items: center;
    }
    .target .icon{
        width: 40px;
        height: 40px;
        margin: 0;
    }

    /*How*/
    .sitemap {
        display: none;
    }
    .how .container > .row:nth-child(3){
        margin-top: 0;
    }
    .how .container > .row{
        flex-wrap: wrap-reverse;
    }
    .how .container > .row > div:last-child, .how .container > .row > div:first-child{
        width: 100%;
    }
    .how .container > .row > div:last-child{
        margin-bottom: 40px;
    }
    .how .container > .row > div:first-child > .row{
        flex-wrap: wrap;
        row-gap: 16px;
    }
    .how .card.row{
        width: auto;
        margin: 0;
    }
    .how .icon{
        width: 24px;
        height: 24px;
    }
    .how .container > .row:nth-child(3) > div:last-child img, .how .container > .row.reversed > div:last-child img{
        width: 100%;
        margin: 0 auto;
        display: block;
    }
    .how .container > .row:nth-child(3) > div:last-child img{
        left: 0;
    }
    
    .how .container > .row.reversed > div:last-child img{
        right: 0;
    }

    /*Challenges*/
    .challenges .row{
        flex-wrap: wrap;
        row-gap: 24px;
    }
    .challenges .row .card{
        width: 80%;
        flex-grow: 0;
        margin: 0 auto;
    }
    .challenges .row .card .picto{
        width: 64px;
        height: 64px;
    }
}