.n-hero {
    min-height: 100svh;
    color: var(--color-text-inverse);
    background-image: url(../../../../assets/img/hero/hero-bg.avif),linear-gradient(171deg,#2e49fb,#2f58fb 26%,#3493fd 72%,#3ad4ff);
    background-position: 50% 31%,0 0;
    background-repeat: no-repeat,repeat;
    background-size: 1987px,auto;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 11.25rem;
    padding-bottom: 6.25rem;
    display: flex;
}

.n-hero__list {
    height: 1.1em;
    font-family: var(--font-heading);
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    font-style: italic;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    letter-spacing: var(--text-h1-letter-spacing);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: .25rem;
    display: flex;
    overflow: hidden;
}

.n-hero-button-wrapper {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2.5rem;
    display: flex;
}

.n-hero-icons {
    width: 5.5rem;
    min-width: 5.5rem;
    height: 3rem;
    box-shadow: 0 1px 1px #74748005,0 3px 1.4rem 1px #0000000f;
}

.n-hero-icons-wrapper {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    color: #fffc;
    font-size: var(--text-base-1-size);
    line-height: var(--text-body-line-height);
    font-weight: var(--text-base-1-line-height);
    letter-spacing: var(--text-article-letter-spacing);
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-right: 3.625rem;
    display: flex;
}

.n-hero-note {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    border-left: 1px solid #ffffff4d;
    flex-flow: row;
    flex: 1;
    justify-content: flex-start;
    align-items: stretch;
    padding-left: 3.625rem;
    display: flex;
}

.n-hero-note-ttitle {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    font-family: var(--font-heading);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--text-headline-letter-spacing);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.n-hero-note-icon {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.0625rem;
}

.n-hero-note-text {
    opacity: .8;
    font-family: var(--font-body);
    font-size: var(--text-base-1-size);
    line-height: var(--text-base-1-line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.n-section__suptitle.n-section__suptitle_hero {
    font-family: var(--font-body);
    color: var(--color-text-inverse);
    font-size: 1.75rem;
    line-height: var(--text-body-line-height);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--text-body-letter-spacing);
    text-transform: none;
    margin-bottom: 1rem;
    display: block;
}

.n-hero__title-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-left: 10rem;
    display: flex;
}

.n-hero-note-wrapper {
    justify-content: center;
    align-items: center;
    margin-top: 8.75rem;
    display: flex;
}

.mira-section__suptitle.n-section__suptitle_hero {
    font-family: var(--font-body);
    color: var(--color-text-inverse);
    font-size: 1.75rem;
    line-height: var(--text-body-line-height);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--text-body-letter-spacing);
    text-transform: none;
    margin-bottom: 1rem;
    display: block;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
    .n-hero__title-wrapper {
        grid-column-gap: 0rem;
        grid-row-gap: 0rem;
        flex-flow: column;
        padding-left: 0;
    }

    .n-hero__list {
        align-items: center;
    }
}

@media screen and (max-width: 767px) {
    .n-hero {
        min-height: 100svh;
        background-image: url(../../../../assets/img/hero/hero-bg-mobile.avif),linear-gradient(171deg,#2e49fb,#2f58fb 26%,#3493fd 72%,#3ad4ff);
        background-size: 767px,auto;
        padding-top: 9.375rem;
        padding-bottom: 5rem;
        overflow: hidden;
    }

    .n-hero__list {
        justify-content: flex-start;
        align-items: center;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .n-hero-button-wrapper {
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
        flex: 1;
    }

    .n-hero-icons {
        width: 4.5625rem;
        min-width: 4.5625rem;
        height: 2.5rem;
    }

    .n-hero-icons-wrapper {
        padding-right: 0;
    }

    .n-hero-note {
        border-left-style: none;
        padding-left: 0;
    }

    .n-hero-note-text {
        margin-left: -1.3rem;
    }

    .n-section__suptitle.n-section__suptitle_hero {
        margin-bottom: .75rem;
        font-size: 1.375rem;
        line-height: 1.3;
    }

    .n-hero__title-wrapper {
        grid-column-gap: 0rem;
        grid-row-gap: 0rem;
        flex-flow: column;
        padding-left: 0;
    }

    .n-hero-note-wrapper {
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
        flex-flow: column-reverse wrap;
        margin-top: auto;
    }

    .mira-section__suptitle.n-section__suptitle_hero {
        margin-bottom: .75rem;
        font-size: 1.375rem;
        line-height: 1.3;
    }
}

@media screen and (max-width: 479px) {
    .n-hero-note {
        padding-top: 2rem;
    }
}

.n-hero__list {
    --item-height: 1.2em;
    height: var(--item-height);
    list-style: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 95%, transparent 100%);
}

.n-hero__item {
    flex: 0 0 var(--item-height);
    height: var(--item-height);
    white-space: nowrap;
    animation: n-hero-list-roll 10s infinite;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.n-hero__item > div {
    height: var(--item-height);
    line-height: var(--item-height);
}

@media (prefers-reduced-motion: reduce) {
    .n-hero__item {
        animation: none;
    }
}

@keyframes n-hero-list-roll {
    0%, 16% {
        transform: translateY(0);
    }
    20%, 36% {
        transform: translateY(calc(var(--item-height) * -1));
    }
    40%, 56% {
        transform: translateY(calc(var(--item-height) * -2));
    }
    60%, 76% {
        transform: translateY(calc(var(--item-height) * -3));
    }
    80%, 96% {
        transform: translateY(calc(var(--item-height) * -4));
    }
    100% {
        transform: translateY(calc(var(--item-height) * -5));
    }
}