/* ===== ecosystem page ===== */
body.page-ecosystem {
    background: #fff;
    --eco-anchor-sticky-top: calc(10 * var(--rpx));
}

/* ----- hero ----- */
.ecosystem-hero {
    position: relative;
    width: 100%;
    height: calc(760 * var(--rpx));
    overflow: hidden;
    color: var(--text-primary);
}

.ecosystem-hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ecosystem-hero .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.0) 80%);
}

.ecosystem-hero .hero-bg-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ecosystem-hero .hero-inner {
    position: relative;
    z-index: 1;
    height: calc(620 * var(--rpx));
    display: flex;
    align-items: flex-start;
}

.ecosystem-hero .hero-inner .wrapper {
    padding-top: calc(206 * var(--rpx));
}

.ecosystem-hero .hero-title {
    margin: 0;
    font-size: calc(58 * var(--fpx-50));
    font-weight: 600;
    line-height: calc(68 / 58);
    color: var(--text-primary);
}

.ecosystem-hero .hero-subtitle {
    margin: calc(16 * var(--rpx)) 0 0;
    max-width: calc(640 * var(--rpx));
    font-size: calc(24 * var(--fpx));
    font-weight: 600;
    line-height: calc(36 / 24);
    color: var(--text-primary);
}

.ecosystem-hero .hero-stats {
    display: flex;
    align-items: flex-start;
    margin-top: calc(40 * var(--rpx));
}

.ecosystem-hero .hero-stat-sep {
    flex-shrink: 0;
    width: 1px;
    height: calc(60 * var(--rpx));
    margin: calc(45 * var(--rpx)) calc(30 * var(--rpx)) 0;
    background: rgba(0, 0, 0, 0.1);
}

.ecosystem-hero .hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex-shrink: 0;
    width: auto;
    min-width: calc(128 * var(--rpx));
    max-width: calc(288 * var(--rpx));
}

.ecosystem-hero .hero-stat.is-wide {
    min-width: calc(217 * var(--rpx));
    max-width: calc(288 * var(--rpx));
}

.ecosystem-hero .hero-stat-icon-wrap {
    position: relative;
    flex-shrink: 0;
    margin-bottom: calc(12 * var(--rpx));
}

.ecosystem-hero .hero-stat-icon {
    display: block;
    width: calc(32 * var(--rpx));
    height: calc(33 * var(--rpx));
    object-fit: contain;
}

body.wfEditorMode .ecosystem-hero .hero-stat-icon-wrap .editor-link-mockup {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(100% + calc(4 * var(--rpx)));
    transform: translateX(-50%);
}

.ecosystem-hero .hero-stat-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 * var(--rpx));
}

.ecosystem-hero .hero-stat-value-row {
    display: flex;
    align-items: baseline;
    gap: calc(2 * var(--rpx));
}

.ecosystem-hero .hero-stat-value {
    font-size: calc(38 * var(--fpx-50));
    font-weight: 600;
    line-height: 1;
    color: var(--brand-red);
}

.ecosystem-hero .hero-stat-unit {
    font-size: calc(16 * var(--fpx));
    font-weight: 600;
    line-height: calc(24 / 16);
    color: var(--brand-red);
}

.ecosystem-hero .hero-stat-label {
    font-size: calc(14 * var(--fpx));
    font-weight: 400;
    line-height: calc(21 / 14);
    color: var(--text-primary);
}

.ecosystem-hero .hero-footnote {
    margin: calc(24 * var(--rpx)) 0 0;
    font-size: calc(12 * var(--fpx));
    font-weight: 400;
    line-height: calc(18 / 12);
    color: var(--text-muted);
}

/* ----- logo marquee ----- */
.eco-logo-marquee {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(80 * var(--rpx));
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.eco-logo-marquee__track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: eco-marquee 50s linear infinite;
    will-change: transform;
}

.eco-logo-marquee__group {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 100%;
}

.eco-logo-marquee__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(240 * var(--rpx));
    height: 100%;
    box-sizing: border-box;
}

.eco-logo-marquee__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(160 * var(--rpx));
    max-height: calc(40 * var(--rpx));
    object-fit: contain;
}

@keyframes eco-marquee {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eco-logo-marquee__track {
        animation: none;
    }

    .eco-accordion__body,
    .eco-accordion__body-inner {
        transition: none;
    }
}

/* ----- anchor nav pill ----- */
.eco-sticky-scope {
    position: relative;
}

.eco-anchor-nav-wrap {
    position: relative;
    z-index: 550;
    display: flex;
    justify-content: center;
    margin-bottom: calc(38 * var(--rpx));
    padding-top: calc(10 * var(--rpx));
}

.eco-anchor-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.eco-anchor-nav__placeholder {
    display: none;
    width: 100%;
}

.eco-anchor-nav-wrap.is-pinned .eco-anchor-nav__placeholder {
    display: block;
}

.eco-anchor-nav__bar {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rpx));
    width: calc(550 * var(--rpx));
    max-width: calc(100% - 40 * var(--rpx));
    height: calc(60 * var(--rpx));
    padding: calc(10 * var(--rpx));
    background: #fff;
    border-radius: calc(300 * var(--rpx));
    box-shadow: 0 calc(5 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 12, 36, 0.1);
}

.eco-anchor-nav__bar.is-fixed {
    position: fixed;
    top: var(--eco-anchor-sticky-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 550;
}

.eco-anchor-nav__top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(40 * var(--rpx));
    height: calc(40 * var(--rpx));
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.eco-anchor-nav__top img {
    display: block;
    width: calc(40 * var(--rpx));
    height: calc(40 * var(--rpx));
    object-fit: contain;
}

.eco-anchor-nav__tracks {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.eco-anchor-nav__tracks:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rpx));
    width: 100%;
    height: 100%;
}

.eco-anchor-nav__tracks.swiper-initialized .swiper-slide {
    width: auto;
}

.eco-anchor-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: calc(40 * var(--rpx));
    padding: 0 calc(8 * var(--rpx));
    font-size: calc(16 * var(--fpx));
    font-weight: 600;
    line-height: calc(24 / 16);
    color: var(--text-primary);
    border-radius: calc(300 * var(--rpx));
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.eco-anchor-nav__tracks:not(.swiper-initialized) .eco-anchor-nav__item {
    flex: 1;
}

.eco-anchor-nav__item:hover {
    color: var(--brand-red);
}

.eco-anchor-nav__item.is-active {
    color: #fff;
    background: var(--brand-red);
}

/* ----- split sections (50/50, no wrapper) ----- */
.eco-split {
    width: 100%;
    overflow: hidden;
}

.eco-split__shell {
    width: 100%;
    max-width: var(--hero-max-width);
    margin-left: auto;
    margin-right: auto;
}

.eco-split:not(.eco-split--flip) {
    background: #fff;
}

.eco-split--flip {
    background: #FAFCFD;
}

.eco-split__header {
    text-align: center;
    padding-left: max(0px, calc((100% - min(var(--wrapper-width), 100%)) / 2));
    padding-right: max(0px, calc((100% - min(var(--wrapper-width), 100%)) / 2));
}

.eco-split__header-media {
    display: none;
}

.eco-split__header-inner {
    position: relative;
    z-index: 1;
}

.eco-split:not(.eco-split--flip) .eco-split__header {
    padding-top: 0;
    padding-bottom: calc(90 * var(--rpx));
}

.eco-split--flip .eco-split__header {
    padding-top: calc(78 * var(--rpx));
    padding-bottom: calc(90 * var(--rpx));
}

.eco-split__title {
    margin: 0;
    font-size: calc(48 * var(--fpx));
    font-weight: 600;
    line-height: calc(72 / 48);
    color: var(--text-primary);
}

.eco-split__intro {
    margin: calc(20 * var(--rpx)) auto 0;
}

.eco-split:not(.eco-split--flip) .eco-split__intro {
    max-width: calc(557 * var(--rpx));
}

.eco-split--flip .eco-split__intro {
    max-width: calc(864 * var(--rpx));
}

.eco-split__intro p {
    margin: 0;
    font-size: calc(18 * var(--fpx));
    font-weight: 400;
    line-height: calc(30 / 18);
    color: var(--text-primary);
}

.eco-split__intro p + p {
    margin-top: 0;
}

.eco-split__row {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.eco-split__col {
    width: 50%;
    box-sizing: border-box;
}

.eco-split__col--content {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.eco-split__col--media {
    order: 2;
    display: flex;
    align-items: stretch;
}

.eco-split--flip .eco-split__col--content {
    order: 2;
}

.eco-split--flip .eco-split__col--media {
    order: 1;
}

.eco-split__figure {
    flex: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 960 / 640;
    background: #E6EEF2;
    overflow: hidden;
}

.eco-split__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
}

/* ----- accordion ----- */
.eco-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.eco-accordion__item {
    flex: 0 0 auto;
    background: #FAFCFD;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.eco-accordion__item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.eco-accordion__item.is-expanded {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--brand-red);
    color: #fff;
    border-bottom-color: transparent;
}

.eco-accordion__item.is-expanded:first-child {
    border-top-color: transparent;
}

.eco-accordion__head {
    display: flex;
    align-items: center;
    gap: calc(17 * var(--rpx));
    width: 100%;
    min-height: calc(100 * var(--rpx));
    margin: 0;
    padding: 0 calc(150 * var(--rpx)) 0 calc(17 * var(--rpx));
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
}

.eco-accordion__icon {
    flex-shrink: 0;
    position: relative;
    width: calc(100 * var(--rpx));
    height: calc(100 * var(--rpx));
}

.eco-accordion__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.eco-accordion__icon-white {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.eco-accordion__item.is-expanded .eco-accordion__icon-white {
    opacity: 1;
}

.eco-accordion__item.is-expanded .eco-accordion__icon-color {
    opacity: 0;
    filter: none;
}

.eco-accordion__item.is-expanded .eco-accordion__icon:not(:has(.eco-accordion__icon-white)) .eco-accordion__icon-color {
    opacity: 1;
    filter: brightness(0) invert(1);
}

.eco-accordion__title {
    flex: 1;
    min-width: 0;
    font-size: calc(20 * var(--fpx));
    font-weight: 600;
    line-height: calc(30 / 20);
}

.eco-accordion__plus {
    flex-shrink: 0;
    width: calc(21 * var(--rpx));
    height: calc(21 * var(--rpx));
    margin-left: auto;
    object-fit: contain;
    transition: opacity 0.35s ease;
}

.eco-accordion__item.is-expanded .eco-accordion__plus {
    opacity: 0;
}

.eco-accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.eco-accordion__item.is-expanded .eco-accordion__body {
    grid-template-rows: 1fr;
    flex: 1;
    min-height: 0;
    transition: grid-template-rows 0.35s ease;
}

.eco-accordion__body-inner {
    overflow: hidden;
    min-height: 0;
    margin-top: 0;
    padding: 0 calc(150 * var(--rpx)) 0 calc(134 * var(--rpx));
    opacity: 0;
    transition:
        opacity 0.35s ease,
        padding-bottom 0.35s ease,
        margin-top 0.35s ease;
}

.eco-accordion__item.is-expanded .eco-accordion__body-inner {
    margin-top: calc(-17.5 * var(--rpx));
    opacity: 1;
    padding-bottom: calc(20 * var(--rpx));
    transition:
        opacity 0.35s ease,
        padding-bottom 0.35s ease,
        margin-top 0.35s ease;
}

.eco-accordion__desc {
    margin: 0;
    font-size: calc(16 * var(--fpx));
    font-weight: 400;
    line-height: calc(30 / 16);
}

/* ----- cooperate ----- */
.eco-cooperate {
    position: relative;
    height: calc(1080 * var(--rpx));
    overflow: hidden;
    color: var(--text-primary);
}

.eco-cooperate__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.eco-cooperate__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.eco-cooperate__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.0) 80%);
}

.eco-cooperate .wrapper {
    position: relative;
    z-index: 1;
    height: 100%;
}

.eco-cooperate__body {
    box-sizing: border-box;
    height: 100%;
    max-width: calc(640 * var(--rpx));
    padding-top: calc(320 * var(--rpx));
}

.eco-cooperate__title {
    margin: 0;
    font-size: calc(48 * var(--fpx));
    font-weight: 600;
    line-height: calc(72 / 48);
}

.eco-cooperate__subtitle {
    margin: calc(8 * var(--rpx)) 0 0;
    font-size: calc(20 * var(--fpx));
    font-weight: 600;
    line-height: calc(30 / 20);
}

.eco-cooperate__content {
    margin-top: calc(40 * var(--rpx));
}

.eco-cooperate__content p {
    margin: 0 0 calc(24 * var(--rpx));
    font-size: calc(16 * var(--fpx));
    font-weight: 400;
    line-height: calc(30 / 16);
}

.eco-cooperate__contact {
    font-weight: 400;
    margin-bottom: 0;
}

.eco-cooperate__contact a {
    color: var(--brand-red);
}

.eco-cooperate__contact a:hover {
    text-decoration: underline;
}

/* ===== @828 mobile ===== */
@media (max-width: 828px) {
    .eco-anchor-nav-wrap {
        margin-bottom: calc(32 * var(--fpx));
        padding-top: calc(40 * var(--fpx));
    }

    .eco-anchor-nav__bar {
        gap: calc(12 * var(--fpx));
        width: calc(100% - 24 * var(--fpx));
        max-width: none;
        height: calc(72 * var(--fpx));
        padding: calc(12 * var(--fpx));
        border-radius: calc(300 * var(--fpx));
        box-shadow: 0 calc(6 * var(--fpx)) calc(18 * var(--fpx)) rgba(0, 12, 36, 0.1);
    }

    .eco-anchor-nav__tracks:not(.swiper-initialized) .swiper-wrapper {
        justify-content: center;
        gap: calc(12 * var(--fpx));
    }

    .eco-anchor-nav__tracks:not(.swiper-initialized) .swiper-slide {
        width: auto;
        flex-shrink: 0;
    }

    .eco-anchor-nav__bar.is-fixed {
        top: var(--eco-anchor-sticky-top);
    }

    .eco-anchor-nav__top {
        width: calc(48 * var(--fpx));
        height: calc(48 * var(--fpx));
    }

    .eco-anchor-nav__top img {
        width: calc(48 * var(--fpx));
        height: calc(48 * var(--fpx));
    }

    .eco-anchor-nav__item {
        flex: 0 0 auto;
        height: calc(48 * var(--fpx));
        padding: 0 calc(18 * var(--fpx));
        font-size: calc(18 * var(--fpx));
        line-height: calc(26 / 18);
        border-radius: calc(300 * var(--fpx));
    }

    .eco-anchor-nav__tracks:not(.swiper-initialized) .eco-anchor-nav__item {
        flex: 0 0 auto;
    }

    .ecosystem-hero {
        height: auto;
        min-height: calc(560 * var(--rpx));
    }

    .ecosystem-hero .hero-inner {
        height: auto;
    }

    .ecosystem-hero .hero-inner .wrapper {
        padding-top: var(--mobile-hero-pad-top);
        padding-bottom: calc(40 * var(--rpx));
    }

    .ecosystem-hero .hero-title {
        font-size: calc(36 * var(--fpx));
    }

    .ecosystem-hero .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: none;
        margin: calc(40 * var(--rpx)) 0 0;
        column-gap: calc(20 * var(--rpx));
        row-gap: calc(20 * var(--rpx));
        align-items: start;
    }

    .ecosystem-hero .hero-stat {
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .ecosystem-hero .hero-stat.is-wide {
        min-width: 0;
        max-width: none;
    }

    .ecosystem-hero .hero-stat-sep {
        display: none;
    }

    .eco-split__row {
        flex-direction: column;
    }

    .eco-split__col {
        width: 100%;
    }

    .eco-split__col--content {
        order: unset;
    }

    .eco-split__col--media {
        display: none;
    }

    .eco-split__header {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: calc(640 * var(--rpx));
        padding-top: 0;
        padding-bottom: calc(40 * var(--rpx));
    }

    .eco-split__header-media {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .eco-split__header-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .eco-split__header::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 1) 100%
        );
        pointer-events: none;
    }

    .eco-split--flip .eco-split__header::after {
        background: linear-gradient(
            to bottom,
            rgba(250, 252, 253, 0) 0%,
            rgba(250, 252, 253, 1) 80%
        );
    }

    .eco-split__header-inner {
        position: relative;
        z-index: 2;
    }

    .eco-split:not(.eco-split--flip) .eco-split__header {
        padding-bottom: calc(40 * var(--rpx));
    }

    .eco-split--flip .eco-split__header {
        padding-top: 0;
        padding-bottom: calc(40 * var(--rpx));
    }

    .eco-split__title {
        font-size: calc(32 * var(--fpx));
    }

    .eco-split:not(.eco-split--flip) .eco-split__intro,
    .eco-split--flip .eco-split__intro {
        max-width: none;
    }

    .eco-accordion {
        flex: none;
        --eco-acc-pad-x: calc(17 * var(--rpx));
        --eco-acc-icon: calc(120 * var(--rpx));
        --eco-acc-gap: calc(17 * var(--rpx));
    }

    .eco-accordion__item.is-expanded {
        flex: none;
        display: block;
    }

    .eco-accordion__head {
        min-height: var(--eco-acc-icon);
        gap: var(--eco-acc-gap);
        padding: 0 calc(24 * var(--rpx)) 0 var(--eco-acc-pad-x);
    }

    .eco-accordion__icon {
        width: var(--eco-acc-icon);
        height: var(--eco-acc-icon);
    }

    .eco-accordion__body {
        padding: 0;
    }

    .eco-accordion__body-inner {
        padding:
            0
            calc(24 * var(--rpx))
            0
            calc(var(--eco-acc-pad-x) + var(--eco-acc-icon) + var(--eco-acc-gap));
    }

    .eco-accordion__item.is-expanded .eco-accordion__body-inner {
        margin-top: 0;
    }

    .eco-cooperate {
        height: auto;
        min-height: calc(480 * var(--rpx));
    }

    .eco-cooperate__body {
        padding-top: calc(120 * var(--rpx));
        padding-bottom: calc(60 * var(--rpx));
    }
}