.intro-bottom__title,
.intro-fixed-point,
.intro-fixed-title,
.popover {
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.25, 0.74, 0.22, 0.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: 0.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), 0.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, 0.5);
}

.visualization-debug-point {
    position: absolute;
    border: 1px dotted rgba(0, 255, 0, 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), 0.3);
        text-decoration-color: rgba(var(--t-heading-rgb), 0.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-fixed-point--4 {
    right: var(--point-x);
    top: 20%;
}

    .intro-fixed-point--4 .intro-fixed-point__deco {
       
top: calc(var(--scale-px) * 30);
transform: translateX(calc(-30%)) scaleX(-1);
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);
}

.intro-legend--4:before {
    background: var(--c-chart-purple);
}

.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, 0.01em) var(--n-md, 0.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(0.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(0.55, 0, 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(0.55, 0, 0.1, 1);
        transform-origin: 0 0;
        transition-delay: 0.16s;
    }

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

    .animation--process-table
    .l-process-table__row:nth-child(5)
    .l-process-table__row-line {
        transition-delay: 0.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), 0.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), 0.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) * 0.9));
            --lh: var(--md, 1.23077em) var(--n-md, 1.11111em);
            line-height: var(--lh);
            letter-spacing: var(--md, 0.01em) var(--n-md, 0.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;*/
    width:100%;
}

.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%;
}

/* Unified CTA button style: white text, white border with radius
   Add class `maas-unified-btn` to any button to apply.
   Non-destructive: existing classes/JS hooks remain intact. */
.maas-unified-btn {
    --btn-radius: 14px;
    --btn-border: 2px;
    --btn-color: #ffffff;
    --btn-bg: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    color: var(--btn-color) !important;
    background: var(--btn-bg);
    border: var(--btn-border) solid var(--btn-color);
    border-radius: var(--btn-radius);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
    position: relative;
}

/* Subtle glow baseline to keep border crisp on dark bg */
.maas-unified-btn {
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
}

/* Animated border on hover using pulsing glow */
@keyframes maasBorderPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.65) inset, 0 0 8px rgba(255,255,255,0.35); }
    50% { box-shadow: 0 0 0 2px rgba(255,255,255,1) inset, 0 0 18px rgba(255,255,255,0.65); }
}

.maas-unified-btn:hover {
    animation: maasBorderPulse 1.1s ease-in-out infinite;
    transform: translateY(-1px);
}

.maas-unified-btn:active {
    transform: translateY(0);
}