/* Fold */

.fold {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);
}

.fold__body-wrapper {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-m);

    position: relative;
}

.fold__social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.fold__social-link {
    width: 48px;
    height: 48px;

	border-radius: var(--radius-l);
    
    background-color: var(--color-05);

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

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.fold__social-link-icon {
    width: 18px;
    height: 18px;

    object-fit: contain;
    object-position: center;
}

.fold__body {
    grid-column: 2 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.fold__tracking-form {
    width: 100%;
    height: 48px;

    display: flex;
}

.tn__field-label--ftr001 {
    width: 100%;

    border-radius: var(--radius-l);

    background-color: var(--color-05);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);

    padding: 0 var(--space-m);
}

.tn__field-icon--ftr001 {
    height: 16px;

    transition: var(--transition-02);
    -webkit-transition: var(--transition-02);
}

.tn__field-label--ftr001:has(.tn__field--ftr001:active) > .tn__field-icon--ftr001 {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

.tn__field--ftr001 {
    width: calc(100% - 16px - var(--space-m));
    height: 100%;
    
    border: unset;

    outline: none;

    background: unset;

    text-transform: uppercase;

    padding: unset;

    margin: unset;
}

.tn__field--ftr001::placeholder {
    text-transform: none;
}

.submit__btn-label--ftr001 > .c-btn__icons-wrapper {
    background-color: var(--color-05);

    cursor: pointer;
}

.submit__btn-label-body--ftr001 {
    height: 48px;

	border-radius: var(--radius-l);

    background-color: var(--color-01);
    
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 var(--space-m);

    cursor: pointer;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.submit__btn-label-body--ftr001:hover {
    background-color: var(--color-01);
}

.submit__btn-label-body--ftr001 > span {
    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.submit__btn-label-body--ftr001:hover > span {
    color: var(--color-04);
}

.fold__media-wrapper {
    width: 100%;

    border-radius: var(--radius-s);

    display: flex;

    position: relative;

    /* pointer-events: none; */

    overflow: hidden;
}

.fold__vid-wrapper {
    width: calc(100% - var(--space-xxxl) - var(--space-xxxl));

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xxxl);

    position: absolute;

    bottom: var(--space-xxxl);
    left: var(--space-xxxl);
}

.fold__vid {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-s);

    background-color: rgba(255, 255, 255, 0.12);

	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);

    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);

    padding: var(--space-m);

    cursor: pointer;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.fold__vid:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.fold__vid-media-wrapper {
    border-radius: var(--radius-s);

    display: flex;

    position: relative;

    overflow: hidden;
}

.fold__vid-media-play-icon-wrapper {
    width: 48px;
    height: 48px;

    border-radius: var(--radius-l);

    background-color: var(--color-05);

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);

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

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 1;
}

.fold__vid-media-play-icon {
    height: 16px;
}

.fold__vid-media {
    width: 100%;

    filter: brightness(88%);
}

.fold__media {
    width: 100%;
}

/* Stats */

.stats {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);
}

.stats__wrapper {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats__bar {
    width: calc(75% + 2px);
    height: 1px;

    background-color: var(--color-05);
}

.stats__body {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

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

.stat__hanger {
    width: 1px;

    background-color: var(--color-05);
}

.stat:nth-child(1) > .stat__hanger,
.stat:nth-child(4) > .stat__hanger {
    height: 160px;
}

.stat:nth-child(2) > .stat__hanger,
.stat:nth-child(3) > .stat__hanger {
    height: 48px;
}

.stat__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.stat__icon-wrapper {
    width: 64px;
    height: 64px;

    border-radius: var(--radius-xxl);

    background-color: var(--color-02);

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

.stat__icon {
    height: 24px;
}

.stat__data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

/* About */

.about {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);
}

.about__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xxxl);
}

.about__group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-m);
}

.about__media-wrapper {
    width: 100%;

    border-radius: var(--radius-s);

    display: flex;

    overflow: hidden;
}

.about__media {
    width: 100%;
}

/* Services */

.services {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);
}

.services__slider-wrapper {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxl);
}

.services__slider {
    width: 100%;
}

.service {
    height: auto;

    border: 1px solid var(--color-05);
    border-radius: var(--radius-s);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xxxl);

    padding: var(--space-m);
}

.service__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.services__nav {
    height: 48px;
    
    display: flex;
}

.services__slider-pagination {
    height: 100%;

	border-radius: var(--radius-l);
    
    background-color: var(--color-05);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    padding: 0 var(--space-m);
}

.services__slider-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
}

.services__nav-btn {
    width: 48px;
    height: 48px;

	border-radius: var(--radius-l);
    
    background-color: var(--color-05);
    
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.services__nav-btn:hover {
    background-color: var(--color-01);
}

.services__nav-btn-icon {
    width: 18px;
    height: 18px;

    object-fit: contain;
    object-position: center;

    position: absolute;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.services__nav-btn:hover > .services__nav-btn-icon--primary {
    opacity: 0;
}

.services__nav-btn-icon--secondary {
    opacity: 0;
}

.services__nav-btn:hover > .services__nav-btn-icon--secondary {
    opacity: 1;
}

.services__slider-pagination-bullet {
    width: 28px;
    height: 28px;

    border-radius: var(--radius-m);
    
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.services__slider-pagination-bullet---active {
    background-color: var(--color-01);
}

.services__slider-pagination-bullet > span {
    font-size: var(--font-size-s);
}

.services__slider-pagination-bullet---active > span {
    color: var(--color-04);
}

.services__link {
    color: var(--color-01);
}

.services__link::after {
    opacity: 1;
}

/* Purpose */

.purpose {
    width: 100%;

    padding: var(--space-xxxl) 0;
}

.purpose__body {
    width: 100%;

    background-color: #fcfbfb;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);
}

.purpose__body > .c-header > .c-header__tag {
    background-color: var(--color-07);
}

.purpose__body > .c-header > .c-header__tag > .c-header__tag-label {
    color: var(--color-04);
}

.purpose__main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-m);
}

.purpose__blocks {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-m);
}

.purpose__block {
    border: 1px solid var(--color-05);
    border-radius: var(--radius-s);

    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    padding: var(--space-m);
}

.purpose__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.purpose__icon-wrapper {
    width: 64px;
    height: 64px;

    border-radius: var(--radius-xxl);

    background-color: var(--color-01);

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

.purpose__icon {
    height: 24px;
}

.purpose__header > .c-heading--03 {
    color: var(--color-01);
}

.purpose__media-wrapper {
    grid-column: 2 / span 2;

    display: flex;
    align-items: center;
}

.purpose__media {
    width: 100%;
}

/* Advantages */

.advantages {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);

    padding: var(--space-xxxl);
}

.advantages__row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-m);
}

.advantage {
    border-radius: var(--radius-s);

    display: flex;
}

.advantage--01 {
    background-color: var(--color-01);
    background-image: url("../../assets/media/components/noise.webp");
    background-position: top left;
    background-repeat: repeat;
    background-size: 200px 200px;

    grid-column: span 3;
    flex-direction: column;
    gap: var(--space-xs);

    padding: var(--space-m);
}

.advantage--02 {
    border: 1px solid var(--color-05);

    grid-column: span 2;
    align-items: flex-end;
    gap: var(--space-xs);

    padding: var(--space-m);
}

.advantage--03 {
    grid-column: span 3;

    overflow: hidden;
}

.advantage--04 {
    grid-column: span 2;

    overflow: hidden;
}

.advantage--05 {
    border: 1px solid var(--color-05);

    grid-column: span 3;
    flex-direction: column;
    gap: var(--space-xs);

    padding: var(--space-m);
}

.advantage--06 {
    background-color: var(--color-02);
    background-image: url("../../assets/media/components/noise.webp");
    background-position: top left;
    background-repeat: repeat;
    background-size: 200px 200px;

    grid-column: span 3;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xs);

    padding: var(--space-m);
}

.advantage__media {
    width: 100%;
}

.advantage__link-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* FAQ */

.faq {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-xxxl);

    padding: var(--space-xxxl);
}

.faq > .c-header {
    align-items: flex-start;
}

.faq > .c-header > .c-header__tag > .c-header__tag-cutout {
    background-color: var(--color-01);
}

.faq > .c-header > .c-header__tag > .c-header__tag-cutout > span {
    color: var(--color-04);
}

.faq__body {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.faq__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.faq__question-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xxxl);
}

.faq__question {
    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.faq__block:hover > .faq__question-wrapper > .faq__question {
    color: var(--color-01);
}

.faq__answer-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xxxl);
}

.faq__answer {
    grid-column: 2;
}

.faq__hr {
    width: 100%;
    height: 1px;

    background-color: var(--color-05);
}

/* Steps */

.steps {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-m);

    padding: var(--space-xxxl);

    position: relative;
}

.steps__hanger-wrapper {
    width: 100%;
    height: 64px;

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

    position: absolute;

    bottom: var(--space-xxxl);

    z-index: -1;
}

.steps__hanger {
    width: 75%;
    height: 1px;

    background-color: var(--color-05);
}

.step {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-m);
}

.step__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.step__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.step__icon-wrapper {
    width: 64px;
    height: 64px;

    border-radius: var(--radius-xxl);

    background-color: var(--color-01);

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

.step__icon {
    height: 24px;
}

.step__media-wrapper {
    width: 100%;

    border-radius: var(--radius-s);

    display: flex;
    justify-content: flex-start;

    overflow: hidden;
}

.step__media {
    width: 100%;

    object-position: left;
}

/* CTA */

.cta {
    width: 100%;

    padding: var(--space-xxxl);
}

.cta__media-wrapper {
    width: 100%;

    border-radius: var(--radius-s);

    background-color: var(--color-09);
    background-image: url("../../assets/media/components/noise.webp");
    background-position: top left;
    background-repeat: repeat;
    background-size: 200px 200px;

    display: flex;
    justify-content: center;

    padding: var(--space-xxxl);
}

.cta__body {
    width: 50%;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-s);

    background-color: rgba(255, 255, 255, 0.12);

	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);

    padding: var(--space-m);

    cursor: pointer;

    transition: var(--transition-01);
    -webkit-transition: var(--transition-01);
}

.cta__body:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.cta__heading--mobile {
    display: none;
}

.cta__media {
    width: 100%;
}

@media (max-width: 1024px) {
    /* Fold */

    .fold__body-wrapper {
        grid-template-columns: auto;
    }

    .fold__social-links {
        display: none;
    }

    .fold__body {
        grid-column: unset;
    }

    .fold__vid-wrapper {
        display: none;
    }

    /* Stats */

    .stats__wrapper {
        flex-direction: unset;
        align-items: unset;
    }

    .stats__bar {
        display: none;
    }

    .stats__body {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-m);
    }

    .stat {
        flex-direction: unset;
        justify-content: center;
    }

    .stat__hanger {
        display: none;
    }

    /* About */

    .about {
        display: flex;
        flex-direction: column;
    }

    /* Purpose */

    .purpose__main {
        display: flex;
        flex-direction: column;
    }

    /* Advantages */

    .advantages__row--01 {
        display: flex;
        flex-direction: column;
    }

    .advantage--01 {
        gap: var(--space-m);
    }

    .advantage--04 {
        display: none;
    }

    .advantage--05 {
        grid-column: span 4;
        gap: var(--space-m);
    }

    .advantage--06 {
        grid-column: span 4;
        gap: var(--space-m);
    }

    /* Steps */

    .steps {
        display: flex;
        flex-direction: column;
        gap: var(--space-xxxl);
    }

    .steps__hanger-wrapper {
        width: 64px;
        height: 100%;

        bottom: unset;
    }

    .step {
        flex-direction: column;
        align-items: flex-end;
    }

    .step__body {
        width: 100%;

        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .step__group {
        align-items: flex-start;
    }

    .step__group > span {
        text-align: unset;
    }

    .step__media-wrapper {
        display: none;
    }

    .steps__hanger {
        display: none;
    }

    /* CTA */

    .cta__body {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Advantages */

    .advantages__row--02 {
        display: flex;
        flex-direction: column;
    }

    .advantage__link-wrapper {
        justify-content: unset;
    }

    /* FAQ */

    .faq__question-wrapper {
        grid-template-columns: auto;
    }

    .faq__answer-wrapper {
        grid-template-columns: auto;
    }

    .faq__answer {
        grid-column: unset;
    }

    /* CTA */

    .cta__heading--desktop {
        display: none;
    }

    .cta__heading--mobile {
        display: block;
    }
}

@media (max-width: 480px) {
    /* CTA */

    .cta__body {
        border: unset;
        border-radius: unset;

        background-color: unset;

        backdrop-filter: unset;
        -webkit-backdrop-filter: unset;

        padding: unset;
    }
}