.intro-bottom__title,
.intro-fixed-point,
.intro-fixed-title,
.popover {
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(.25, .74, .22, .99)
}

.popover {
    background: var(--t-background);
    position: absolute;
    z-index: 2;
    left: 0;
    top: calc(var(--scale-px) * -23);
    height: calc(var(--scale-px) * 30);
    border-radius: 30px;
    padding: calc(var(--scale-px) * 17);
    pointer-events: none;
    transition-duration: 1s;
    transition-property: opacity, transform;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -100%) translateY(-40px)
}

.popover--active {
    transition-delay: .3s;
    opacity: 1;
    transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -100%) translateY(-20px);
    color: #808190
}

.sticky {
    position: relative
}

.sticky__sticky {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.sticky__sticky-content {
    position: sticky;
    top: 0;
    height: calc(var(--lvh) * 100)
}

.has-scroll-smooth .sticky__sticky-content {
    position: relative
}

.sticky__sticky-content__inner {
    position: relative;
    height: calc(var(--lvh) * 100)
}

.sticky--center .sticky__sticky-content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.card--info {
    --card-ratio: 1;
    --card-spacing-h: calc(var(--scale-px) * 20);
    --card-spacing-v: calc(var(--scale-px) * 20);
    background: var(--t-background-alt)
}

.card--info .card__title {
    max-width: calc(var(--scale-px) * 120)
}

.card--info--transparent {
    background: rgba(var(--t-background-rgb), .3)
}

.card--advantage,
.card--info--transparent {
    border: 1px solid var(--t-line);
    -webkit-backdrop-filter: blur(calc(var(--scale-px) * 20));
    backdrop-filter: blur(calc(var(--scale-px) * 20))
}

.card--advantage {
    --card-ratio: var(--md, 1.16667) var(--n-md, 1.24138)
}

.card--advantage .card__sizer {
    padding-top: min(700px, calc(var(--card-ratio) * 100%))
}

.card--advantage .card__icon {
    padding-bottom: calc(var(--spacing) * 1.5)
}

.card--advantage .card__icon .icon {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.card--advantage .card__b {
    max-width: 420px
}

.card-news {
    display: flex;
    align-items: stretch
}

.card-news__image {
    --i: var(--sm, var(--grid-col)) var(--n-sm, calc(var(--grid-col) * 2));
    width: var(--i);
    flex: 0 0 var(--i);
    overflow: hidden;
    overflow: clip;
    display: flex
}

.card-news__image img,
.card-news__image picture {
    display: block;
    width: 100%;
    height: auto
}

.card-news__image img {
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 100%
}

.card-news__content {
    flex: 1 1 100%;
    position: relative;
    border: 1px solid var(--t-line);
    padding: var(--spacing)
}

.card-news__title {
    max-width: calc(var(--scale-px) * 360)
}

.card-news__date {
    display: block
}

.card-news__button {
    position: absolute;
    right: var(--spacing);
    bottom: var(--spacing)
}

.intro-top {
    z-index: 1
}

.intro-top,
.intro-top__content {
    position: relative;
    height: calc(var(--lvh) * 100)
}

.intro-top__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding-top: var(--xxl, calc(var(--scale-px) * 260)) var(--n-xxl, var(--md, calc(var(--scale-px) * 120)) var(--n-md, calc(var(--scale-px) * 20)))
}

.intro-top__content-next {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: calc((var(--lvh) - var(--svh)) * 100 + var(--spacing))
}

.intro-top__content-more {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: var(--md, var(--spacing)) var(--n-md, calc(var(--scale-px) * 120))
}

.intro-bottom {
    position: relative;
    height: var(--md, calc(var(--lvh) * 177.77778)) var(--n-md, auto);
    z-index: var(--md, initial) var(--n-md, 1)
}

.intro-bottom__title {
    margin-top: var(--md, calc(var(--lvh) * 20)) var(--n-md, var(--sm, calc(var(--scale-px) * 100)) var(--n-sm, calc(var(--scale-px) * 200)));
    margin-bottom: var(--md, 0) var(--n-md, var(--sm, calc(var(--scale-px) * 100)) var(--n-sm, calc(var(--scale-px) * 190)));
    transition-property: opacity;
    will-change: opacity
}

.intro-bottom__title--hidden {
    opacity: 0
}

.visualization-debug {
    position: absolute;
    border: 1px dashed rgba(255, 0, 0, .5)
}

.visualization-debug-point {
    position: absolute;
    border: 1px dotted rgba(0, 255, 0, .5);
    width: 9%;
    height: 9%
}

.intro-canvas {
    overflow: hidden
}

.intro-canvas-sticky>.sticky__sticky {
    height: var(--md, 100%) var(--n-md, var(--sm, calc(var(--lvh) * 100 + 420px)) var(--n-sm, calc(var(--lvh) * 100 + 760px)))
}

.intro-fixed-title {
    position: absolute;
    bottom: calc(var(--lvh) * 50);
    left: var(--md, 48vw) var(--n-md, var(--spacing));
    transition-property: opacity, transform;
    will-change: opacity, transform;
    opacity: 0;
    transform: translateY(65px)
}

.intro-fixed-title--active {
    opacity: 1;
    transform: translateY(0)
}

.intro-fixed-point {
    --point-x: calc(var(--spacing-title) + (100vw - var(--spacing-title) * 2 - calc(var(--scale-px) * 20) * 5) / 6 + calc(var(--scale-px) * 20));
    display: block;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-property: opacity, transform;
    opacity: 0;
    transform: translateY(65px)
}

.intro-fixed-point__button {
    width: calc(var(--scale-px) * 160)
}

.intro-fixed-point__text {
    position: absolute;
    top: calc(100% + calc(var(--scale-px) * 20));
    left: 50%;
    width: 220px;
    margin-left: -110px;
    display: block;
    text-align: center
}

.intro-fixed-point__text a:where(:not(.btn)) {
    color: inherit;
    text-decoration: underline;
    -webkit-text-decoration-style: solid;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    -webkit-text-decoration-color: rgba(var(--t-heading-rgb), .3);
    text-decoration-color: rgba(var(--t-heading-rgb), .3);
    text-underline-offset: calc(var(--scale-px) * 3)
}

.has-hover .intro-fixed-point__text a:where(:not(.btn)):hover {
    text-decoration: none
}

.intro-fixed-point__deco {
    position: absolute;
    width: 16.7vw;
    width: calc(41vw - var(--point-x) - calc(var(--scale-px) * 160));
    min-width: calc(var(--scale-px) * 126);
    height: calc(var(--scale-px) * 62)
}

.intro-fixed-point--active {
    opacity: 1;
    transform: translateY(0)
}

.intro-fixed-point--1 {
    left: var(--point-x);
    top: 20%
}

.intro-fixed-point--1 .intro-fixed-point__deco {
    left: 100%;
    top: calc(var(--scale-px) * 30)
}

.intro-fixed-point--2 {
    left: var(--point-x);
    top: 72%
}

.intro-fixed-point--2 .intro-fixed-point__deco {
    left: 100%;
    top: calc(var(--scale-px) * 30);
    transform: scaleY(-1);
    transform-origin: 0 0
}

.intro-fixed-point--3 {
    right: var(--point-x);
    top: 72%
}

.intro-fixed-point--3 .intro-fixed-point__deco {
    left: 0;
    top: calc(var(--scale-px) * 30);
    transform: rotate(180deg);
    transform-origin: 0 0
}

.intro-bottom__legend {
    margin-top: auto
}

.intro-legend {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border-top: 1px solid var(--t-line);
    padding: 20px 0
}

.intro-legend:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    flex: 0 0 10px;
    margin-top: 3px
}

.intro-legend__title {
    width: 95px;
    flex: 0 0 95px
}

.intro-legend__text {
    color: var(--t-text);
    flex-grow: 1;
    padding: 2px 0 0
}

.intro-legend--1:before {
    background: var(--c-chart-grey)
}

.intro-legend--2:before {
    background: var(--c-chart-cyan)
}

.intro-legend--3:before {
    background: var(--c-chart-navy)
}

.l-process {
    height: calc(var(--lvh) * 400);
    --item-height: var(--xxxl, calc(var(--scale-px) * 120)) var(--n-xxxl, var(--xxl, calc(var(--scale-px) * 80)) var(--n-xxl, var(--md, calc(var(--scale-px) * 70)) var(--n-md, calc(var(--scale-px) * 50))))
}

.l-process-table {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    padding: 0 0 1px 1px;
    padding-top: var(--item-height);
    margin: var(--md, 0) var(--n-md, 0 calc(var(--scale-px) * 5))
}

.l-process-table__axis-x,
.l-process-table__axis-y {
    color: var(--t-heading);
    position: absolute;
    font-family: PP Neue Montreal, Helvetica Neue, Helvetica, Arial, sans-serif;
    --fos: -0.155em;
    --foe: -0.125em;
    font-weight: 500;
    font-size: var(--md, calc(var(--scale-text-rem) * 1.3)) var(--n-md, calc(var(--scale-text-rem) * 1.1));
    --lh: var(--md, 1.23077em) var(--n-md, 1.27273em);
    line-height: var(--lh);
    letter-spacing: var(--md, .01em) var(--n-md, .02em)
}

.is-win .l-process-table__axis-x,
.is-win .l-process-table__axis-y {
    --fos: -0.16em;
    --foe: -0.125em
}

.l-process-table__axis-y {
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--t-heading)
}

.l-process-table__axis-y .icon {
    position: absolute;
    left: -1px;
    top: -1px;
    transform: translateX(-50%)
}

.l-process-table__axis-y span {
    position: absolute;
    top: 0;
    left: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 10));
    transform-origin: 100% 0;
    transform: translateX(-100%) rotate(-90deg)
}

.l-process-table__axis-x {
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--t-heading)
}

.l-process-table__axis-x .icon {
    position: absolute;
    right: -1px;
    bottom: -2px;
    transform: rotate(90deg) translateY(-50%) translateX(.5px)
}

.l-process-table__axis-x span {
    position: absolute;
    right: 0;
    bottom: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 10))
}

.l-process-table__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "left center right";
    position: relative
}

.l-process-table__row-line {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1px solid var(--t-line)
}

.l-process-table__item--left {
    grid-area: left
}

.l-process-table__item--center {
    grid-area: center
}

.l-process-table__item--right {
    grid-area: right
}

.l-process-table__item--top {
    z-index: 1
}

.l-process-item {
    background: var(--t-background-alt);
    padding: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 13) calc(var(--scale-px) * 10) calc(var(--scale-px) * 10));
    display: flex;
    justify-content: space-between;
    height: var(--item-height)
}

.l-process-item__title {
    white-space: nowrap
}

.l-process-item__steps {
    align-self: flex-end;
    display: flex;
    gap: 5px
}

.l-process-item__steps span {
    width: calc(var(--scale-px) * 20);
    height: calc(var(--scale-px) * 20);
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--t-small);
    background: var(--t-button-secondary-background)
}

.l-process-item__steps span:after,
.l-process-item__steps span:before {
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
    position: relative
}

.l-process-item__steps span:before {
    margin-bottom: calc((var(--lh) - 1em) / -2 + var(--fos, 0em))
}

.l-process-item__steps span:after {
    margin-top: calc((var(--lh) - 1em) / -2 + var(--foe, 0em))
}

.animation--process-table {
    transition: border-color 2.56s
}

.animation--process-table .l-process-table__axis-x,
.animation--process-table .l-process-table__axis-y {
    transition: all 1.6s cubic-bezier(.55, 0, .1, 1);
    transition-property: -webkit-clip-path;
    transition-property: clip-path;
    transition-property: clip-path, -webkit-clip-path
}

.animation--process-table .l-process-table__axis-x {
    -webkit-clip-path: polygon(0 -40px, 110% -40px, 110% 40px, 0 40px);
    clip-path: polygon(0 -40px, 110% -40px, 110% 40px, 0 40px)
}

.animation--process-table .l-process-table__axis-y {
    -webkit-clip-path: polygon(-40px -10%, 40px -10%, 40px 100%, -40px 100%);
    clip-path: polygon(-40px -10%, 40px -10%, 40px 100%, -40px 100%)
}

.animation--process-table .l-process-table__row-line {
    transition: transform 1.6s cubic-bezier(.55, 0, .1, 1);
    transform-origin: 0 0;
    transition-delay: .16s
}

.animation--process-table .l-process-table__row:nth-child(4) .l-process-table__row-line {
    transition-delay: .32s
}

.animation--process-table .l-process-table__row:nth-child(5) .l-process-table__row-line {
    transition-delay: .48s
}

.animation--process-table--inactive .l-process-table__axis-x {
    -webkit-clip-path: polygon(0 -40px, 0 -40px, 0 40px, 0 40px);
    clip-path: polygon(0 -40px, 0 -40px, 0 40px, 0 40px)
}

.animation--process-table--inactive .l-process-table__axis-y {
    -webkit-clip-path: polygon(-40px 100%, 40px 100%, 40px 100%, -40px 100%);
    clip-path: polygon(-40px 100%, 40px 100%, 40px 100%, -40px 100%)
}

.animation--process-table--inactive .l-process-table__row-line {
    transform: scaleX(0)
}

.l-process-nav {
    background: rgba(var(--t-heading-rgb), .3);
    overflow: hidden;
    overflow: clip
}

.l-process-nav,
.l-process-nav span {
    border-radius: 4px;
    width: calc(var(--scale-px) * 30);
    height: calc(var(--scale-px) * 4)
}

.l-process-nav span {
    display: block;
    background: var(--t-heading);
    transform: translateX(-50%)
}

.l-process-text {
    max-width: var(--xxxl, calc(var(--scale-px) * 320)) var(--n-xxxl, calc(var(--scale-px) * 280))
}

.l-process-list {
    counter-reset: list
}

.l-process-list li {
    display: flex;
    align-items: var(--md, center) var(--n-md, flex-start);
    gap: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 10));
    counter-increment: list;
    color: var(--t-heading)
}

.l-process-list li:before {
    content: counter(list);
    background: rgba(var(--t-background-alt-rgb), .2);
    color: var(--t-heading);
    font-family: PP Neue Montreal, Helvetica Neue, Helvetica, Arial, sans-serif;
    --fos: -0.155em;
    --foe: -0.125em;
    font-weight: 500;
    font-size: var(--md, calc(var(--scale-text-rem) * 1.3)) var(--n-md, calc(var(--scale-text-rem) * .9));
    --lh: var(--md, 1.23077em) var(--n-md, 1.11111em);
    line-height: var(--lh);
    letter-spacing: var(--md, .01em) var(--n-md, .02em);
    border-radius: 20px;
    flex: 0 0 var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 12));
    width: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 12));
    height: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 12));
    line-height: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 12));
    text-align: center
}

.is-win .l-process-list li:before {
    --fos: -0.16em;
    --foe: -0.125em
}

.l-process-list li span {
    display: block;
    padding-top: var(--md, 0) var(--n-md, calc(var(--scale-px) * 2))
}

.l-process-list li+li {
    margin-top: calc(var(--scale-px) * 8)
}

@media (min-width:568px) and (max-aspect-ratio:13/9),
(min-width:668px) and (min-height:416px),
(min-width:980px) {
    .l-process-list li+li {
        border-top: 1px solid var(--t-line);
        margin-top: calc(var(--scale-px) * 10);
        padding-top: calc(var(--scale-px) * 10)
    }
}

.l-results-line {
    position: relative;
    z-index: 1
}

.l-results-bg {
    top: 0;
    left: var(--md, 0) var(--n-md, auto);
    right: var(--md, auto) var(--n-md, 0);
    width: var(--md, calc(var(--container-h-padding-left) + var(--grid-col) * 4 + var(--grid-gutter) * 3)) var(--n-md, calc(var(--scale-px) * 1122))
}

.l-results__title {
    margin-bottom: 20px
}

.l-results__item-bottom {
    margin-top: 10px
}

@media (min-width:568px) and (max-aspect-ratio:13/9),
(min-width:668px) and (min-height:416px),
(min-width:980px) {
    .l-results__title {
        padding-top: calc(var(--scale-px) * 20);
        margin-bottom: 0;
        border-top: 1px solid var(--t-line)
    }

    .l-results__item-bottom {
        margin-top: 0
    }
}

.l-results+.l-results {
    margin-top: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 45))
}

@media (min-width:568px) and (max-aspect-ratio:13/9),
(min-width:668px) and (min-height:416px),
(min-width:980px) {
    .l-advantages {
        padding-bottom: calc(var(--lvh) * 140)
    }

    .no-scroll-smooth .l-advantages {
        padding-bottom: 0
    }
}

.l-advantages-bg {
    position: absolute;
    overflow: visible;
    left: 50%;
    top: 50%;
    transform: var(--md, translate(-50%, -50%)) var(--n-md, translate(-37%, -57%));
    width: var(--md, 66.66667vw) var(--n-md, 153.84615vw);
    height: var(--md, 100%) var(--n-md, auto);
    max-width: 1280px
}

.has-scroll-smooth .l-advantages-bg {
    height: auto
}

.l-advantages-bg img {
    display: block;
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.l-advantages-list .col {
    flex-shrink: 0
}

@media (min-width:568px) and (max-aspect-ratio:13/9),
(min-width:668px) and (min-height:416px),
(min-width:980px) {

    .l-advantages-list,
    .l-advantages-list .container-h,
    .l-advantages-list .row,
    .l-advantages-list__sticky {
        height: 100%
    }

    .js.no-scroll-smooth .l-advantages-list {
        height: calc(var(--lvh) * 200)
    }

    .js.no-scroll-smooth .l-advantages-list__sticky {
        overflow: hidden;
        height: auto;
        position: sticky;
        margin-left: calc(var(--spacing-title) * -1);
        margin-right: calc(var(--spacing-title) * -1);
        padding-left: var(--spacing-title);
        padding-right: var(--spacing-title);
        top: calc(50% - min(700px, calc(var(--grid-col) * 1.24138)))
    }

    .no-js .l-advantages-list__sticky>.row {
        flex-wrap: wrap;
        gap: calc(var(--scale-px) * 20) 0
    }
}

.l-platform-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}