:root {
	/* Greyscale */
	--cps-white: #fff;
    --cps-grey: #f3f3f3;
    --cps-gray: #f3f3f3;
	--cps-black: #191919;

    /* Brand / primaries */
    --cps-purple: #564E94;
    --cps-purple-dark: #3F3A79;
    --cps-pink: #E0167A;
    --cps-yellow: #F9CD3D;
    --cps-teal: #42BAB8;

    /* Neutrals */
    --cps-ink: #1B1B1F;
    --cps-muted: #5B5F6A;
    --cps-bg: #FFFFFF;
    --cps-soft: #F4F5F8;

    /* Lines / shadows */
    --cps-border: rgba(20, 20, 30, 0.12);
    --cps-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
    --cps-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.08);

    /* Optional “tint” backgrounds (handy for badges/blocks) */
    --cps-purple-tint: rgba(86, 78, 148, 0.10);
    --cps-pink-tint: rgba(224, 22, 122, 0.10);
    --cps-yellow-tint: rgba(249, 205, 61, 0.18);
    --cps-teal-tint: rgba(66, 186, 184, 0.12);

    --carrousel-duration: 45s;
    --transition: all 0.25s ease;
}

@keyframes carrousel-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes carrousel-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.btn {
	padding: 7.5px 30px;
    padding-right: 60px;
	display: inline-block;
	background: var(--cps-purple-dark);
	color: var(--cps-white);
	border-radius: 70px;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 30px;
        width: 22px;
        height: 22px;
        transform: translateY(-50%);
        background-color: var(--cps-teal);
        transition: var(--transition);

        /* Mask */
        -webkit-mask-image: url("../img/cps-arrow.png");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;

        mask-image: url("../img/cps-arrow.png");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }
}

.block {
	width: 100%;
    overflow: hidden;

	&.block__buttons {
		position: fixed;
		bottom: 30px;
        z-index: 100;

        .wrapper {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            gap: 30px;
        }

        .btn {

            &::after {
                background-color: var(--cps-pink);
            }

            &:first-child {
                &::after {
                    background-color: var(--cps-teal);
                }
            }

            &:last-child {
                &::after {
                    background-color: var(--cps-yellow);
                }
            }

        }
	}

	&.block__banner {
        background: var(--cps-grey);
        position: relative;
        min-height: 75vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 60px 0;

        .wrapper {
            height: 100%;
        }

		.banner__text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            gap: 30px;

            h1 {
                font-size: 32px;
                font-weight: 700;
                color: var(--cps-purple);

                + span {
                    display: inline-block;
                    font-size: 22px;
                    font-weight: 700;
                    color: var(--cps-teal);
                }
            }
		}

        .banner__image {
            position: absolute;
            height: 100%;
            width: 50vw;
            right: 0;
            top: 0;

            img {
                position: absolute;
                height: 100%;
                width: 100%;
                object-fit: contain;
                object-position: center right;
            }
        }
	}

    &.block__mission {
        background: var(--cps-purple);
        position: relative;

        &::after {
            position: absolute;
            content: '';
            display: block;
            aspect-ratio: 192 / 160;
            width: 192px;
            background-image: url("../img/cps-puzzle-teal.png");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            top: 50%;
            right: 0;
            transform: translate(25%, -50%);
        }

        .mission__image {
            position: relative;
            margin-bottom: 60px;

            &::before {
                content: '';
                display: block;
                background: var(--cps-grey);
                height: 50%;
                width: 100vw;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
            }

            > div {
                position: relative;
                overflow: hidden;
                border-radius: 70px;
                width: 100%;
                aspect-ratio: 1063 / 394;

                img {
                    position: absolute;
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }

        .mission__text {
            max-width: 830px;
            margin: auto;

            h2 {
                color: var(--cps-white);
                margin-bottom: 30px;
                font-size: 18px;
            }

            p {
                color: var(--cps-white);
            }
        }

        .mission__cards {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 30px;
            margin-top: 90px;
            position: relative;

            &::before {
                content: '';
                display: block;
                background: var(--cps-white);
                height: 50%;
                width: 100vw;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            .mission__card {
                background: var(--cps-grey);
                border-radius: 70px;
                padding: 30px;
                display: flex;
                flex-direction: column;
                gap: 30px;
                position: relative;
                z-index: 2;

                h3 {
                    color: var(--cps-purple);
                    font-size: 18px;
                }
            }
        }
    }

    &.block__buy {
        background: var(--cps-white);
        padding: 60px 0 90px;
        position: relative;

        &::before {
            position: absolute;
            content: '';
            display: block;
            aspect-ratio: 192 / 160;
            width: 192px;
            background-image: url("../img/cps-puzzle-pink.png");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            bottom: 90px;
            left: 0;
            transform: translateX(-33%);
        }

        .wrapper {
            position: relative;
            direction: rtl;

            * {
                direction: ltr;
            }
        }

        .buy__text {
            padding-bottom: 30px;

            .buy__icon {
                margin-bottom: 15px;
            }

            h2 {
                font-size: 32px;
                color: var(--cps-purple);
                margin-bottom: 30px;
                font-weight: 700;

                + span {
                    display: inline-block;
                    font-size: 22px;
                    color: var(--cps-teal);
                    font-weight: 700;
                    margin-bottom: 30px;
                }
            }

        }

        .buy__image {
            position: absolute;
            width: calc(50vw - 75px);
            right: calc(50% + 75px);
            border-radius: 0 70px 70px 0;
            height: 100%;
            overflow: hidden;

            .buy__bubble {
                background: var(--cps-teal);
                color: var(--cps-white);
                padding: 45px 30px;
                border-radius: 70px;
                position: absolute;
                top: 30px;
                left: 30px;
                max-width: calc(100% - 30px);
                z-index: 2;

                p {
                    max-width: 180px;

                    strong {
                        font-size: 32px;
                        font-weight: bold;
                        margin-bottom: 30px;
                        display: inline-block;
                    }
                }
            }

            img {
                position: absolute;
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center right;
                z-index: 1;
            }
        }

        .buy__cards {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: 30px;
            margin-top: 75px;

            .buy__card {
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 30px;
                align-items: center;
                max-width: 240px;

                h3 {
                    color: var(--cps-purple);
                }
            }
        }
    }

    &.block__cycle {
        background: var(--cps-grey);
        padding-top: 60px;
        position: relative;

        .wrapper {
            position: relative;
            z-index: 2;
        }

        &::before {
            position: absolute;
            content: '';
            display: block;
            aspect-ratio: 170 / 180;
            width: 170px;
            background-image: url("../img/cps-puzzle-purple.png");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            top: 0;
            left: 30px;
        }

        &::after {
            position: absolute;
            content: '';
            display: block;
            aspect-ratio: 156 / 192;
            width: 156px;
            background-image: url("../img/cps-puzzle-yellow.png");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            bottom: 25%;
            right: 0;
            transform: translate(33%, -50%) rotate(-90deg);
        }

        .cycle__text {
            text-align: center;
        }

        .cycle__image {
            max-width: 100%;

            img {
                max-width: 100%;
            }
        }

        .cycle__stats {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            gap: 30px;
            align-items: flex-start;
            margin-top: 45px;

            .cycle__stat {
                display: flex;
                align-items: center;
                gap: 15px;
                flex-direction: column;
                color: var(--cps-purple);
                text-align: center;
                max-width: 330px;

                strong {
                    font-weight: 700;
                    font-size: 32px;
                }

                span {
                    font-size: 18px;
                }
            }
        }

        .cycle__box {
            position: relative;
            margin-top: 60px;

            &::before {
                content: '';
                display: block;
                background: var(--cps-white);
                height: 50%;
                width: 100vw;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            > div {
                background: var(--cps-purple);
                color: var(--cps-white);
                position: relative;
                z-index: 2;
                border-radius: 70px;
                padding: 30px 120px 45px;
            }

            .cycle__boxicon {
                position: absolute;
                width: 60px;
                left: 30px;
                top: 30px;
            }

            h3 {
                color: var(--cps-white);
                font-size: 18px;
                font-weight: 700;
                margin-top: 15px;
            }

            .cycle__buttons {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: flex-start;
                gap: 15px;
                margin-top: 30px;
            }

        }
    }

    &.block__give {
        background: var(--cps-white);
        padding: 60px 0 90px;

        .wrapper {
            position: relative;
        }

        .give__text {
            padding-bottom: 30px;

            .give__icon {
                margin-bottom: 15px;
            }

            h2 {
                font-size: 32px;
                color: var(--cps-purple);
                margin-bottom: 30px;
                font-weight: 700;

                + span {
                    display: inline-block;
                    font-size: 22px;
                    color: var(--cps-pink);
                    font-weight: 700;
                    margin-bottom: 30px;
                }
            }

        }

        .give__image {
            position: absolute;
            width: calc(50vw - 75px);
            left: calc(50% + 75px);
            border-radius: 70px 0 0 70px;
            height: 100%;
            overflow: hidden;

            .give__bubble {
                background: var(--cps-teal);
                color: var(--cps-white);
                padding: 45px 30px;
                border-radius: 70px;
                position: absolute;
                top: 30px;
                left: 30px;
                max-width: calc(100% - 30px);
                z-index: 2;

                p {
                    max-width: 180px;

                    strong {
                        font-size: 32px;
                        font-weight: bold;
                        margin-bottom: 30px;
                        display: inline-block;
                    }
                }
            }

            img {
                position: absolute;
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center left;
                z-index: 1;
            }
        }

        .give__cards {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: 30px;
            margin-top: 75px;

            .give__card {
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 30px;
                align-items: center;
                max-width: 240px;

                h3 {
                    color: var(--cps-purple);
                }
            }
        }

        .give__box {
            position: relative;
            margin-top: 75px;

            &::before {
                content: '';
                display: block;
                background: var(--cps-white);
                height: 50%;
                width: 100vw;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            > div {
                background: var(--cps-pink);
                color: var(--cps-white);
                position: relative;
                z-index: 2;
                border-radius: 70px;
                padding: 30px 120px 45px;
            }

            .give__boxicon {
                position: absolute;
                width: 60px;
                left: 30px;
                top: 30px;
            }

            h3 {
                color: var(--cps-white);
                font-size: 18px;
                font-weight: 700px;
                margin-top: 15px;
            }

            .give__buttons {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: flex-start;
                gap: 15px;
                margin-top: 30px;
            }
        }
    }

    &.block__help {
        background: var(--cps-white);
        padding: 60px 0 90px;

        .wrapper {
            position: relative;
            direction: rtl;

            * {
                direction: ltr;
            }
        }

        .help__text {
            padding-bottom: 30px;

            .help__icon {
                margin-bottom: 15px;
            }

            h2 {
                font-size: 32px;
                color: var(--cps-yellow);
                margin-bottom: 30px;
                font-weight: 700;

                + span {
                    display: inline-block;
                    font-size: 22px;
                    color: var(--cps-teal);
                    font-weight: 700;
                    margin-bottom: 30px;
                }
            }

        }

        .help__image {
            position: absolute;
            width: calc(50vw - 75px);
            right: calc(50% + 75px);
            border-radius: 0 70px 70px 0;
            height: 100%;
            overflow: hidden;

            .help__bubble {
                background: var(--cps-teal);
                color: var(--cps-white);
                padding: 45px 30px;
                border-radius: 70px;
                position: absolute;
                top: 30px;
                left: 30px;
                max-width: calc(100% - 30px);
                z-index: 2;

                p {
                    max-width: 180px;

                    strong {
                        font-size: 32px;
                        font-weight: bold;
                        margin-bottom: 30px;
                        display: inline-block;
                    }
                }
            }

            img {
                position: absolute;
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center right;
                z-index: 1;
            }
        }

        .help__cards {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: 30px;
            margin-top: 75px;

            .help__card {
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 30px;
                align-items: center;
                max-width: 240px;

                h3 {
                    color: var(--cps-purple);
                }
            }
        }

        .help__faq {
            direction: ltr;
            margin-top: 60px;

            .faq__questions {
                display: flex;
                flex-direction: column;
                gap: 15px;

                .faq__question {
                    display: block;
                    padding: 30px;
                    padding-right: 75px;
                    border-radius: 70px 0 0 70px;
                    background: var(--cps-yellow);
                    color: var(--cps-purple);
                    border: none;
                    text-align: right;
                    font-weight: 700;
                    font-size: 18px;
                    cursor: pointer;
                    position: relative;
                    transition: var(--transition);

                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        right: 15px;
                        width: 30px;
                        height: 30px;
                        transform: translateY(-50%);
                        background-color: var(--cps-purple);
                        transition: var(--transition);

                        /* Mask */
                        -webkit-mask-image: url("../img/cps-arrow.png");
                        -webkit-mask-repeat: no-repeat;
                        -webkit-mask-position: center;
                        -webkit-mask-size: contain;

                        mask-image: url("../img/cps-arrow.png");
                        mask-repeat: no-repeat;
                        mask-position: center;
                        mask-size: contain;
                    }

                    &.faq__question--active {
                        background: var(--cps-purple);
                        color: var(--cps-yellow);

                        &::after {
                            background-color: var(--cps-yellow);
                        }
                    }
                }
            }

            .faq__answers {
                display: grid;

                .faq__answer {
                    grid-row: 1 / -1;
                    grid-column: 1 / -1;
                    opacity: 0;
                    transition: var(--transition);

                    &.faq__answer--active {
                        opacity: 1;
                    }
                }
            }
        }
    }

    &.block__carrousel {
        padding: 90px 0;

        .carrousel__carrousel {
            width: 100%;
            overflow: hidden;

            .carrousel__slider {
                display: flex;
                flex-flow: row nowrap;
                gap: 2px;
                align-items: center;
                width: max-content;
                will-change: transform;

                &.carrousel__slider--top {
                    animation: carrousel-left var(--carrousel-duration) linear infinite;
                }

                &.carrousel__slider--bottom {
                    animation: carrousel-right var(--carrousel-duration) linear infinite;
                }

                .carrousel__slide {
                    aspect-ratio: 1 / 1;
                    position: relative;
                    width: calc(100vw / 8);
                    overflow: hidden;
                    border-radius: 70px;
                    flex: 0 0 auto;

                    img {
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        object-position: center center;
                    }
                }
            }
        }
    }

    &.block__coords {
        background: var(--cps-teal);
        position: relative;

        .coords__map {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 75%;
            background: var(--cps-grey);

            #map {
                display: block;
                height: 100%;
                width: 100%;
            }
        }

        .wrapper {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
            padding: 60px 0;
            position: relative;
            z-index: 5;
            pointer-events: none;
        }

        .coords__box {
            padding: 60px 45px;
            background: var(--cps-white);
            display: flex;
            flex-flow: row wrap;
            gap: 30px;
            border-radius: 70px;
            max-width: 480px;
            width: 100%;
            pointer-events: initial;
            position: relative;

            &::before {
                position: absolute;
                content: '';
                display: block;
                aspect-ratio: 233 / 245;
                width: 233px;
                background-image: url("../img/cps-puzzle-purple.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                bottom: 0;
                right: 0;
                transform: translate(50%, 30px) rotate(90deg);
                z-index: -1;
            }

            &::after {
                position: absolute;
                content: '';
                display: block;
                aspect-ratio: 110 / 136;
                width: 110px;
                background-image: url("../img/cps-puzzle-yellow.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                top: 0;
                right: 0;
                transform: translate(30px, -30px);
            }

            .coords__logo {
                width: 100%;

                img {
                    width: 100%;
                    display: block;
                    max-width: 225px;
                }
            }

            h2 {
                font-size: 16px;
            }
        }
    }
}

@media (max-width: 960px) {
    .block {

        &.block__banner {

            .banner__image {
                position: relative;
                height: initial;
                width: 100%;
                top: initial;
                right: initial;
                margin-top: 60px;

                img {
                    position: relative;
                    height: auto;
                    width: 100%;
                    max-width: 480px;
                    display: block;
                    margin: auto;
                    object-fit: initial;
                    object-position: initial;
                }
            }
        }

        &.block__buy {

            .buy__image {
                right: 50%;
                width: 50vw;
            }

        }

        &.block__give {
            padding: 60px 0;

            .give__image {
                left: 50%;
                width: 50vw;
            }

        }

        &.block__help {

            .help__image {
                right: 50%;
                width: 50vw;
            }

        }

        &.block__coords {
            display: flex;
            flex-direction: column;

            .wrapper {
                order: 1;
                justify-content: center;
            }

            .coords__map {
                position: relative;
                width: 100%;
                aspect-ratio: 16 / 9;
                order: 2;
            }

        }
    }
}

@media (max-width: 768px) {
    .block {

        &.block__buttons {

            .wrapper {
                gap: 15px;
            }

        }

        &.block__mission {

            .mission__image {

                > div {
                    border-radius: 35px;
                    aspect-ratio: 16 / 9;
                }

            }

            .mission__cards {
                grid-template-columns: repeat(12, 1fr);

                .mission__card {
                    border-radius: 35px;
                    grid-column: span 6;
                    gap: 15px;

                    &:last-child {
                        grid-column: 4 / -4;
                    }

                    h3 {
                        text-align: center;
                        width: 100%;
                        display: inline-block;
                    }

                    .card__icon {

                        img {
                            display: block;
                            margin: auto;
                        }

                    }
                }
            }

        }

        &.block__buy {
            padding: 30px 0;

            .buy__image {
                position: relative;
                right: initial;
                width: initial;
                aspect-ratio: 16 / 9;
                border-radius: 35px;

                .buy__bubble {
                    border-radius: 35px;
                    padding: 30px 15px;
                }
            }

            .buy__icon {

                img {
                    display: block;
                    margin: auto;
                }

            }

            h2 {
                text-align: center;

                + span {
                    text-align: center;
                    display: inline-block;
                    width: 100%;
                }
            }

        }

        &.block__cycle {

            &::before {
                display: none;
            }

            .cycle__stats {
                flex-direction: column;
                align-items: center;
            }

            .cycle__box {

                > div {
                    border-radius: 35px;
                    padding: 30px;

                    .cycle__boxicon {
                        position: initial;
                        left: initial;
                        top: initial;
                        margin: auto;
                    }
                }

            }

        }

        &.block__give {
            padding: 30px 0;

            .give__image {
                position: relative;
                left: initial;
                width: initial;
                aspect-ratio: 16 / 9;
                border-radius: 35px
            }

            .give__icon {

                img {
                    display: block;
                    margin: auto;
                }

            }

            h2 {
                text-align: center;

                + span {
                    text-align: center;
                    display: inline-block;
                    width: 100%;
                }
            }

            .give__box {

                > div {
                    border-radius: 35px;
                    padding: 30px;

                    .give__boxicon {
                        position: initial;
                        left: initial;
                        top: initial;
                        margin: auto;
                    }
                }

            }

        }

        &.block__help {
            padding: 30px 0;

            .help__image {
                position: relative;
                right: initial;
                width: initial;
                aspect-ratio: 16 / 9;
                border-radius: 35px
            }

            .help__icon {

                img {
                    display: block;
                    margin: auto;
                }

            }

            h2 {
                text-align: center;

                + span {
                    text-align: center;
                    display: inline-block;
                    width: 100%;
                }
            }

            .help__faq {

                .faq__questions {
                    flex-flow: row wrap;
                    align-items: center;
                    justify-content: center;

                    .faq__question {
                        width: initial;
                        font-size: 18px;
                        padding: 15px 30px;
                        padding-right: 60px;
                        border-radius: 35px;
                    }

                }

            }

        }

        &.block__carrousel {

            .carrousel__carrousel {

                .carrousel__slider {

                    .carrousel__slide {
                        width: 25vw;
                    }

                }

            }

        }

        &.block__coords {

            .coords__box {
                padding: 30px;
                border-radius: 15px;
            }

        }

    }
}

@media (max-width: 640px) {
    .block {

        &.block__mission {

            .mission__cards {
                gap: 15px;
            }

        }

    }
}

@media (max-width: 480px) {
    .block {

        &.block__buttons {

            .wrapper {
                gap: 7.5px;
            }

        }

        &.block__mission {

            .mission__image {

                > div {
                    aspect-ratio: 4 / 3;
                }

            }

            .mission__cards {
                grid-template-columns: 1fr;

                .mission__card {
                    grid-column: 1 / -1;

                    &:last-child {
                        grid-column: 1 / -1;
                    }
                }
            }

        }

        &.block__cycle {
            .cycle__box {

                > div {
                    padding: 15px;
                }

            }
        }

        &.block__buy {

            .buy__image {
                aspect-ratio: 4 / 3;

                .buy__bubble {
                    top: 15px;
                    left: 15px;
                }
            }
        }

        &.block__give {

            .give__image {
                aspect-ratio: 4 / 3;
            }

            .give__box {

                > div {
                    padding: 15px;
                }

            }
        }

        &.block__help {

            .help__image {
                aspect-ratio: 4 / 3;
            }
        }

        &.block__carrousel {

            .carrousel__carrousel {

                .carrousel__slider {

                    .carrousel__slide {
                        width: 50vw;
                    }

                }

            }

        }

        &.block__coords {

            .coords__box {
                padding: 15px
            }

        }

    }
}