:root {
    --color-primary: #082f5f;
    --color-secondary: #1c8b6d;
    --color-accent: #35c7d6;
    --color-bg: #ffffff;
    --color-bg-soft: #f3f7fa;
    --color-text: #142033;
    --color-text-strong: #08111d;
    --color-text-subtle: #7b8794;
    --color-muted: #6c7a89;
    --color-border: #d8e0e8;
    --color-border-strong: #b9c7d5;
    --container-width: 1200px;
    --radius: 8px;
    --shadow: 0 24px 70px rgba(8, 47, 95, 0.14);
    --color-line: rgba(20, 32, 51, 0.1);
    --color-dark: #061a33;
    --color-white: #ffffff;
    --transition: 220ms ease;
    --focus-ring: 0 0 0 3px rgba(53, 199, 214, 0.18);
}

/* Homepage application section, scoped to mirror the referenced module. */
.index-plate1 {
    --application-blue: #003894;
    --application-blue-bright: #0058dd;
    width: 100%;
    padding: 112px 0 116px;
    color: #333;
    background: #fff;
    overflow: hidden;
}

.index-plate1 *,
.index-plate1 *::before,
.index-plate1 *::after {
    box-sizing: border-box;
}

.index-plate1 button,
.index-plate1 h2,
.index-plate1 h3,
.index-plate1 p,
.index-plate1 ul {
    margin: 0;
}

.index-plate1 ul {
    padding: 0;
    list-style: none;
}

.index-plate1 button {
    padding: 0;
    color: inherit;
    border: 0;
    border-radius: 0;
    background: none;
    appearance: none;
}

.index-plate1 .application-wrap {
    width: min(calc(100% - 64px), 1490px);
    margin: 0 auto;
}

.index-plate1 .page-title {
    position: relative;
    font-size: 58px;
    font-weight: 700;
    line-height: 68px;
    text-align: center;
    letter-spacing: 0;
    background: linear-gradient(0deg, var(--application-blue), var(--application-blue-bright));
    background-clip: text;
    color: transparent;
    z-index: 2;
}

.index-plate1 .page-English {
    display: flex;
    justify-content: space-between;
    width: 520px;
    margin: -58px auto 0;
    font-family: "en_b", Arial, sans-serif;
    font-size: 45px;
    line-height: 55px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
    white-space: nowrap;
    -webkit-text-stroke: 1px var(--application-blue);
    opacity: .11;
}

.index-plate1 .plate1-top {
    position: relative;
    z-index: 3;
}

.index-plate1 .plate1-top .top-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 155px;
    margin-top: 34px;
}

.index-plate1 .plate1-top .top-main .main-item {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex: 0 1 228px;
    flex-wrap: wrap;
    position: relative;
    width: 20%;
    max-width: 228px;
    height: 107px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, .08);
    background: #fff;
    cursor: pointer;
    transition: height .5s, border-radius .5s, background .5s;
}

.index-plate1 .plate1-top .top-main .main-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 58px;
    margin-top: -29px;
    background: #e5e5e5;
}

.index-plate1 .plate1-top .top-main .main-item:last-child::after,
.index-plate1 .plate1-top .top-main .main-item-on::after {
    background: transparent;
}

.index-plate1 .plate1-top .top-main .main-item .item-icon {
    position: relative;
    width: 53px;
    height: 42px;
    margin: 0 auto;
}

.index-plate1 .plate1-top .top-main .main-item .item-icon img {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: auto;
    transition: opacity .5s;
}

.index-plate1 .plate1-top .top-main .main-item .item-icon .img2 {
    opacity: 0;
    color:#fff;
}

.index-plate1 .plate1-top .top-main .main-item .item-title {
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: #333;
    transition: color .5s;
}

.index-plate1 .plate1-top .top-main .main-item .item-arrow {
    width: 0;
    height: 0;
    margin: 0 auto;
    background: #fff url("../../img/zhanyanet/applications/icon-arrow.png") no-repeat center;
    background-size: 10px;
    border-radius: 50%;
    overflow: hidden;
    transition: width .5s, height .5s, margin .5s;
}

.index-plate1 .plate1-top .top-main .main-item-on {
    height: 155px;
    border-radius: 10px;
    background: linear-gradient(0deg, var(--application-blue), var(--application-blue-bright));
}

.index-plate1 .plate1-top .top-main .main-item-on .item-icon .img1 {
    opacity: 0;
}

.index-plate1 .plate1-top .top-main .main-item-on .item-icon .img2 {
    opacity: 1;
}

.index-plate1 .plate1-top .top-main .main-item-on .item-title {
    font-weight: 700;
    color: #fff;
}

.index-plate1 .plate1-top .top-main .main-item-on .item-arrow {
    width: 25px;
    height: 25px;
    margin: 15px auto 0;
}

.index-plate1 .plate1-main {
    position: relative;
    margin-top: -35px;
}

.index-plate1 .plate1-main .main-wrap {
    position: absolute;
    top: 53px;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1s, top 1s, visibility 1s;
}

.index-plate1 .plate1-main .main-wrap-on {
    position: relative;
    top: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.index-plate1 .plate1-main .main-wrap .wrap-box {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 19px;
    overflow: hidden;
}

.index-plate1 .plate1-main .main-wrap .wrap-box > .box-pic {
    width: 100%;
    aspect-ratio: 1200 / 453;
    overflow: hidden;
}

.index-plate1 .plate1-main .main-wrap .wrap-box > .box-pic img,
.index-plate1 .plate1-main .main-wrap .wrap-box > .box-web-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-plate1 .plate1-main .main-wrap .wrap-box > .box-web-pic {
    display: none;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    width: 44.3%;
    height: auto;
    padding: clamp(78px, 8.16vw, 141px) 10px 0;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-title {
    width: 100%;
    font-size: 23px;
    line-height: 1.45;
    text-align: center;
    background: linear-gradient(0deg, var(--application-blue), var(--application-blue-bright));
    background-clip: text;
    color: transparent;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-subTitle {
    width: 100%;
    font-size: clamp(40px, 3.36vw, 58px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    background: linear-gradient(0deg, var(--application-blue), var(--application-blue-bright));
    background-clip: text;
    color: transparent;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-button {
    width: auto;
    height: 43px;
    margin: 15px auto 0;
    padding: 0 23px;
    font-size: 17px;
    font-weight: 400;
    line-height: 39px;
    text-align: center;
    color: var(--application-blue);
    border: 1px solid var(--application-blue);
    border-radius: 43px;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 29px;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item {
    position: relative;
    width: 97px;
    height: auto;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 43px;
    margin-top: -21px;
    background: rgba(0, 0, 0, .08);
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item:last-child::after {
    display: none;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item .item-icon {
    display: block;
    width: 24px;
    height: 23px;
    margin: 0 auto;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item .item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item .item-title {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--application-blue);
    white-space: nowrap;
}

.index-plate1 .page-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 136px;
    height: 45px;
    margin-top: 44px;
    border-radius: 44px;
    background: linear-gradient(90deg, var(--application-blue), var(--application-blue-bright));
    transition: transform .3s;
}

.index-plate1 .page-button span {
    position: relative;
    font-family: "en_b", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    z-index: 1;
}

.index-plate1 .page-button em {
    position: relative;
    width: 13px;
    height: 12px;
    margin-left: 19px;
    background: url("../../img/zhanyanet/applications/icon-arrow2.png") no-repeat center;
    background-size: 100%;
    transition: margin .5s;
}

.index-plate1 .page-button:hover em,
.index-plate1 .page-button:focus-visible em {
    margin-left: 10px;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont {
    position: relative;
    width: 100%;
    margin-top: 58px;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.index-plate1 .swiper-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    transition-property: transform;
}

.index-plate1 .swiper-slide {
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide {
    width: calc(100% / 3 - 29px);
    height: auto;
    margin-right: 44px;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box {
    display: block;
    width: 100%;
    height: auto;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box .box-pic {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 19px;
    overflow: hidden;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box .box-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box .box-title {
    display: block;
    margin-top: 24px;
    font-size: 19px;
    line-height: 1.5;
    text-align: center;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .5s;
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box:hover .box-pic img,
.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box:focus-visible .box-pic img {
    transform: scale(1.1) translateZ(0);
}

.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box:hover .box-title,
.index-plate1 .plate1-main .main-wrap .wrap-cont .cont-swiper .swiper-slide .slide-box:focus-visible .box-title {
    color: var(--application-blue);
}

.index-plate1 .plate1-swiper-button-prev,
.index-plate1 .plate1-swiper-button-next {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -21px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: border-color .5s, background .5s;
}

.index-plate1 .plate1-swiper-button-prev {
    left: -82px;
}

.index-plate1 .plate1-swiper-button-next {
    right: -82px;
}

.index-plate1 .plate1-swiper-button-prev img,
.index-plate1 .plate1-swiper-button-next img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    transform: translate(-50%, -50%);
    transition: opacity .5s;
}

.index-plate1 .plate1-swiper-button-prev .img2,
.index-plate1 .plate1-swiper-button-next .img2 {
    opacity: 0;
}

.index-plate1 .plate1-swiper-button-prev:hover,
.index-plate1 .plate1-swiper-button-next:hover,
.index-plate1 .plate1-swiper-button-prev:focus-visible,
.index-plate1 .plate1-swiper-button-next:focus-visible {
    border-color: var(--application-blue);
    background: var(--application-blue);
}

.index-plate1 .plate1-swiper-button-prev:hover .img1,
.index-plate1 .plate1-swiper-button-next:hover .img1,
.index-plate1 .plate1-swiper-button-prev:focus-visible .img1,
.index-plate1 .plate1-swiper-button-next:focus-visible .img1 {
    opacity: 0;
}

.index-plate1 .plate1-swiper-button-prev:hover .img2,
.index-plate1 .plate1-swiper-button-next:hover .img2,
.index-plate1 .plate1-swiper-button-prev:focus-visible .img2,
.index-plate1 .plate1-swiper-button-next:focus-visible .img2 {
    opacity: 1;
}

@media (max-width: 1680px) and (min-width: 1005px) {
    .index-plate1 .plate1-swiper-button-prev {
        left: -24px;
    }

    .index-plate1 .plate1-swiper-button-next {
        right: -24px;
    }
}

@media (max-width: 1180px) and (min-width: 1005px) {
    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent {
        padding-top: 66px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-subTitle {
        font-size: 36px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump {
        margin-top: 20px;
    }

    .index-plate1 .page-button {
        margin-top: 28px;
    }
}

@media (max-width: 1004px) {
    .index-plate1 {
        padding: 40px 15px 38px;
    }

    .index-plate1 .application-wrap {
        width: 100%;
    }

    .index-plate1 .page-title {
        font-size: 30px;
        line-height: 42px;
    }

    .index-plate1 .page-English {
        width: 290px;
        margin-top: -37px;
        font-size: 25px;
        line-height: 42px;
    }

    .index-plate1 .plate1-top .top-main {
        flex-wrap: wrap;
        height: auto;
        margin-top: 18px;
    }

    .index-plate1 .plate1-top .top-main .main-item,
    .index-plate1 .plate1-top .top-main .main-item-on {
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: none;
        height: 65px;
        margin-bottom: 8px;
        border-radius: 0;
    }

    .index-plate1 .plate1-top .top-main .main-item-on {
        border-radius: 5px;
    }

    .index-plate1 .plate1-top .top-main .main-item:nth-child(3n)::after,
    .index-plate1 .plate1-top .top-main .main-item-on::after {
        background: transparent;
    }

    .index-plate1 .plate1-top .top-main .main-item .item-icon {
        width: 32px;
        height: 26px;
    }

    .index-plate1 .plate1-top .top-main .main-item .item-title {
        margin-top: 5px;
        font-size: 13px;
    }

    .index-plate1 .plate1-top .top-main .main-item .item-arrow {
        display: none;
    }

    .index-plate1 .plate1-main {
        margin-top: 13px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box {
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box > .box-pic {
        display: none;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box > .box-web-pic {
        display: block;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box > .box-web-pic img {
        width: 100%;
        height: auto;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent {
        position: relative;
        width: 100%;
        padding: 20px 10px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-title {
        font-size: 15px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-subTitle {
        margin-top: 5px;
        font-size: 18px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-button {
        height: 22px;
        margin-top: 13px;
        padding: 0 12px;
        font-size: 13px;
        line-height: 20px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump {
        margin-top: 15px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item {
        width: 75px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item .item-icon {
        width: 18px;
        height: 17px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-box .box-cent .cent-lump .lump-item .item-title {
        margin-top: 5px;
        font-size: 12px;
    }

    .index-plate1 .page-button {
        width: 70px;
        height: 23px;
        margin-top: 23px;
    }

    .index-plate1 .page-button span {
        font-size: 10px;
    }

    .index-plate1 .page-button em {
        width: 7px;
        height: 6px;
        margin-left: 8px;
    }

    .index-plate1 .plate1-main .main-wrap .wrap-cont {
        display: none;
    }
}

@media (max-width: 480px) {
    .index-plate1 .page-title {
        font-size: 25px;
    }

    .index-plate1 .page-English {
        font-size: 22px;
    }

    .index-plate1 .plate1-top .top-main .main-item .item-title {
        font-size: 12px;
    }
}

@font-face {
    font-family: "en_b";
    src: url("../fonts/FuturaMaxiStd-Bold.6ae8343d.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

.padding-0 {
    padding: 0 !important;
}

.padding-top-10 {
    padding: 100px 0 0 0 !important;
}

.padding-top-300 {
    padding: 300px 0 0 0 !important;
}

.heading-xl {
    font-size: 62px;
}

.text-xl {
    font-size: 28px;
}

@media (max-width: 960px) {
    .heading-xl {
        font-size: 31px;
    }
    .text-xl {
        font-size: 16px;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-bg);
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.7;
}

body.menu-open {
    overflow: hidden;
}

body.search-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(53, 199, 214, 0.26);
}

button, input {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.container {
    width: min(calc(100% - 48px), 1390px);
    margin: 0 auto;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    color: var(--color-white);
    transition: background var(--transition), box-shadow var(--transition), color var(--transition);
}

.site-header.is-scrolled, .site-header.is-open {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 42px rgba(8, 47, 95, 0.12);
    backdrop-filter: blur(18px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc(100% - 48px), 1360px);
    height: 78px;
    margin: 0 auto;
    gap: 26px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.brand-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text {
    display: grid;
    gap: 1px;
}

.brand-text strong {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

.brand-text em {
    color: currentColor;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.08em;
    opacity: 0.72;
}

.main-nav {
    flex: 1;
}

.main-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.main-nav li {
    position: relative;
}

.main-nav li > a {
    display: inline-flex;
    align-items: center;
    min-height: 78px;
    padding: 0 13px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition);
}

.main-nav li > a:hover {
    color: var(--color-accent);
}

.main-nav li > a.is-current {
    color: var(--color-accent);
}

.has-dropdown > a::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
}

.dropdown {
    position: absolute;
    top: 72px;
    left: 50%;
    min-width: 178px;
    padding: 12px;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity var(--transition), transform var(--transition);
}

.dropdown::before {
    position: absolute;
    top: -18px;
    left: 0;
    width: 100%;
    height: 18px;
    content: "";
}

.dropdown a {
    display: block;
    padding: 9px 12px;
    color: var(--color-muted);
    border-radius: 6px;
    font-size: 14px;
}

.dropdown a:hover {
    color: var(--color-primary);
    background: var(--color-bg-soft);
}

@media (min-width: 961px) {
    .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 960px) {
    .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
        opacity: 1;
        pointer-events: auto;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-button, .menu-toggle {
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: currentColor;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.icon-button {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 50%;
}

.is-scrolled .icon-button, .is-open .icon-button {
    border-color: rgba(8, 47, 95, 0.14);
}

.search-icon {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.search-icon::after {
    position: absolute;
    right: -6px;
    bottom: -5px;
    width: 7px;
    height: 2px;
    background: currentColor;
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
}

.language-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: currentColor;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.language-link em {
    color: currentColor;
    font-style: normal;
    opacity: 0.45;
}

.phone-link {
    padding: 9px 14px;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.is-scrolled .phone-link, .is-open .phone-link {
    color: var(--color-primary);
    background: rgba(8, 47, 95, 0.06);
    border-color: rgba(8, 47, 95, 0.12);
}

.search-panel {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: grid;
    place-items: center;
}

.search-panel[hidden] {
    display: none;
}

.search-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 16, 32, 0.62);
    backdrop-filter: blur(8px);
}

.search-panel-dialog {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 32px), 760px);
    max-height: min(82svh, 780px);
    padding: 28px;
    overflow: auto;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(6, 26, 51, 0.3);
}

.search-panel-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.search-panel-head h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
}

.search-close {
    color: var(--color-text);
    border-color: rgba(8, 47, 95, 0.12);
}

.search-close-icon {
    position: relative;
    width: 16px;
    height: 16px;
}

.search-close-icon::before, .search-close-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
    content: "";
}

.search-close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.search-close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.search-form {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.search-form input {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    color: var(--color-text);
    background: var(--color-bg-soft);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: 10px;
    height: 56px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.search-form input::placeholder {
    color: #8a93a3;
}

.search-form input:focus {
    background: var(--color-white);
    border-color: rgba(53, 199, 214, 0.65);
    box-shadow: 0 0 0 4px rgba(53, 199, 214, 0.14);
}

.search-form button {
    min-width: 112px;
    padding: 0 20px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border: 0;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.search-chips button {
    padding: 10px 14px;
    color: var(--color-primary);
    background: #eef5fa;
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.search-results {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.search-result {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    color: var(--color-text);
    background: #fafcfe;
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: 12px;
}

.search-result strong {
    font-size: 18px;
    line-height: 1.3;
}

.search-result p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
}

.search-empty {
    padding: 22px;
    color: var(--color-muted);
    background: #fafcfe;
    border: 1px dashed rgba(8, 47, 95, 0.15);
    border-radius: 12px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.menu-toggle {
    display: none;
    width: 42px;
    /* height: 42px; */
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--transition), opacity var(--transition);
}

.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100% important;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-dark);
}

.hero-slide, .hero-slide img, .hero-slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 900ms ease, transform 3000ms ease;
}

.hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.hero-slide img, .hero-slide video {
    object-fit: cover;
    object-position: center;
}

.hero-slide img {
    z-index: 0;
}

.hero-slide video {
    z-index: 1;
    display: block;
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(90deg, rgba(2, 18, 37, 0.82) 0%, rgba(5, 34, 66, 0.55) 42%, rgba(5, 28, 51, 0.18) 100%), linear-gradient(180deg, rgba(2, 18, 37, 0.58) 0%, rgba(2, 18, 37, 0.08) 45%, rgba(2, 18, 37, 0.72) 100%); */
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(calc(100% - 48px), var(--container-width));
    min-height: 100svh;
    padding: 120px 0 86px;
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 16px;
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: var(--color-accent);
}

.hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(46px, 7.2vw, 86px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
}

.hero-lead {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.65;
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    max-width: 740px;
    gap: 10px;
    margin-top: 30px;
}

.hero-tags span {
    padding: 8px 13px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 14px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: var(--color-white);
    background: var(--color-secondary);
    box-shadow: 0 16px 36px rgba(53, 199, 214, 0.26);
}

.button-ghost {
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.button-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

.button-outline {
    color: var(--color-primary);
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.16);
}

.button-outline:hover {
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 16px 36px rgba(8, 47, 95, 0.18);
}

.hero-control {
    position: absolute;
    right: max(24px, calc((100vw - var(--container-width)) / 2));
    bottom: 46px;
    z-index: 2;
    display: flex;
    gap: 10px;
}

.hero-control button {
    width: 34px;
    height: 3px;
    padding: 0;
    background: rgba(255, 255, 255, 0.42);
    border: 0;
    cursor: pointer;
    transition: width var(--transition), background var(--transition);
}

.hero-control button.is-active {
    width: 58px;
    background: var(--color-accent);
}

.section {
    padding: 104px 0;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 44px;
}

.section-heading.split {
    /* display: grid; */
    /* grid-template-columns: minmax(0, 1.05fr) minmax(280px, 3.1fr); */
    max-width: none;
    text-align: center !important;
    gap: 40px;
    align-items: end;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.section-heading h2, .section-copy h2, .manufacturing-copy h2, .culture-card h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
}

.section-heading p:not(.eyebrow), .section-copy p, .manufacturing-copy p, .culture-card p {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 17px;
}

.section-intro {
    padding: 86px 0;
    background: var(--color-white);
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 72px;
    align-items: center;
}

.intro-panel {
    position: relative;
    padding: 34px;
    color: var(--color-white);
    background: linear-gradient(145deg, var(--color-primary), #0d4977);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.intro-panel::after {
    position: absolute;
    right: -42px;
    bottom: -56px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    content: "";
}

.panel-number {
    display: block;
    color: var(--color-accent);
    font-size: 58px;
    font-weight: 900;
    line-height: 1;
}

.intro-panel p {
    position: relative;
    margin: 16px 0 28px;
    color: rgba(255, 255, 255, 0.78);
}

.intro-panel a {
    position: relative;
    display: inline-flex;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-accent);
    font-weight: 800;
}

.section-solutions {
    background: var(--color-bg-soft);
}

.solution-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--color-line);
    background: var(--color-white);
    box-shadow: 0 18px 50px rgba(8, 47, 95, 0.08);
}

.solution-strip article {
    min-height: 270px;
    padding: 32px 28px;
    border-right: 1px solid var(--color-line);
    transition: background var(--transition), transform var(--transition);
}

.solution-strip article:last-child {
    border-right: 0;
}

.solution-strip article:hover {
    background: linear-gradient(180deg, rgba(53, 199, 214, 0.09), rgba(28, 139, 109, 0.04));
    transform: translateY(-6px);
}

.solution-strip span {
    display: block;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 900;
}

.solution-strip h3 {
    margin: 58px 0 14px;
    font-size: 22px;
    line-height: 1.25;
}

.solution-strip p {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.image-card {
    position: relative;
    min-height: 460px;
    overflow: hidden;
    color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 18px 48px rgba(8, 47, 95, 0.14);
}

.image-card img, .case-card img, .manufacturing-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.image-card::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 22, 43, 0.1), rgba(4, 22, 43, 0.88));
    content: "";
}

.image-card:hover img, .case-card:hover img, .manufacturing-visual:hover img {
    transform: scale(1.045);
}

.image-card-body {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 30px;
}

.image-card-body span, .case-card span, .news-feature span, .news-list span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
}

.image-card-body h3 {
    margin: 12px 0 12px;
    font-size: 24px;
    line-height: 1.25;
}

.image-card-body p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}

.image-card-body a {
    display: inline-flex;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-accent);
    font-weight: 800;
}

.image-pos-left img {
    object-position: left top;
}

.image-pos-center img {
    object-position: center top;
}

.image-pos-top img {
    object-position: right top;
}

.image-pos-bottom img {
    object-position: left bottom;
}

.section-strength {
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(6, 26, 51, 0.96), rgba(8, 47, 95, 0.88)), radial-gradient(circle at 20% 0%, rgba(53, 199, 214, 0.3), transparent 34%);
}

.section-strength .section-heading h2 {
    color: var(--color-white);
}

.section-strength .eyebrow {
    color: var(--color-accent);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.stats-grid article {
    min-height: 220px;
    padding: 34px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.stats-grid article:last-child {
    border-right: 0;
}

.stats-grid strong {
    display: block;
    color: var(--color-white);
    font-size: clamp(22px, 2vw, 42px);
    font-weight: 900;
    line-height: 1;
}

.stats-grid span {
    display: block;
    margin-top: 12px;
    color: var(--color-accent);
    font-weight: 800;
}

.stats-grid p {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
}

.section-manufacturing {
    background: var(--color-bg-soft);
}

.manufacturing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 60px;
    align-items: center;
}

.manufacturing-visual {
    height: 560px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.manufacturing-visual img {
    object-position: right bottom;
}

.capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.capability-list span {
    padding: 10px 14px;
    color: var(--color-primary);
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: 999px;
    font-weight: 700;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.case-grid.case-grid-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-card {
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: 0 16px 42px rgba(8, 47, 95, 0.08);
}

.case-card img {
    aspect-ratio: 4 / 3;
}

.case-card:nth-child(1) img {
    object-position: left top;
}

.case-card:nth-child(2) img {
    object-position: center;
}

.case-card:nth-child(3) img {
    object-position: right top;
}

.case-card:nth-child(4) img {
    object-position: left bottom;
}

.case-card div {
    padding: 22px;
}

.case-card h3 {
    margin: 9px 0 12px;
    font-size: 19px;
    line-height: 1.38;
}

.case-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
}

.section-innovation {
    background: linear-gradient(90deg, var(--color-white) 0%, var(--color-white) 50%, var(--color-bg-soft) 50%, var(--color-bg-soft) 100%);
}

.innovation-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 80px;
    align-items: start;
}

.tech-list {
    display: grid;
    gap: 16px;
}

.tech-list article {
    padding: 28px;
    background: var(--color-white);
    border-left: 4px solid var(--color-secondary);
    box-shadow: 0 14px 42px rgba(8, 47, 95, 0.08);
}

.tech-list h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.tech-list p {
    margin: 0;
    color: var(--color-muted);
}

.section-news {
    background: var(--color-bg-soft);
}

.news-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 22px;
}

.news-feature, .news-list article {
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 44px rgba(8, 47, 95, 0.08);
}

.news-feature {
    min-height: 340px;
    padding: 34px;
}

.news-feature h3 {
    margin: 18px 0;
    font-size: 30px;
    line-height: 1.25;
}

.news-feature p {
    margin: 0 0 28px;
    color: var(--color-muted);
}

.news-feature a {
    display: inline-flex;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    font-weight: 800;
}

.news-list {
    display: grid;
    gap: 16px;
}

.news-list article {
    padding: 24px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.news-list article:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.news-list h3 {
    margin: 8px 0 0;
    font-size: 20px;
    line-height: 1.38;
}

.news-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.news-archive-panel {
    position: sticky;
    top: 104px;
    align-self: start;
    padding: 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

.news-archive-panel h2 {
    margin: 10px 0 18px;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.2;
}

.news-filter-group {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.news-filter-group span {
    color: var(--color-text-subtle);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.news-archive-note {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

.news-featured-article {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(8, 47, 95, 0.08);
}

.news-featured-media {
    display: block;
    min-height: 430px;
    overflow: hidden;
}

.news-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.news-featured-article:hover .news-featured-media img {
    transform: scale(1.04);
}

.news-featured-content {
    display: grid;
    gap: 16px;
    align-content: center;
    padding: 34px;
}

.news-featured-content h2 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.16;
}

.news-featured-content p {
    margin: 0;
    color: var(--color-muted);
    font-size: 16px;
}

.news-meta-line, .news-card-meta, .news-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.news-meta-line span, .news-card-meta span, .news-article-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 12px;
    color: var(--color-primary);
    background: #eef5fa;
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    font-weight: 800;
}

.news-card-grid, .news-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.news-card {
    display: grid;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

.news-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.news-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.news-card-body {
    display: grid;
    gap: 12px;
    padding: 22px;
}

.news-card-body p {
    display: -webkit-box;
    margin: 0;
    color: var(--color-muted);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.news-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

.news-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.news-immersive-hero {
    min-height: 560px;
}

.news-immersive-hero .hero-slide {
    z-index: 0;
}

.news-immersive-hero .hero-overlay {
    z-index: 2;
    background: linear-gradient(90deg, rgba(2, 14, 30, 0.88) 0%, rgba(5, 38, 67, 0.68) 46%, rgba(6, 42, 58, 0.24) 100%), linear-gradient(180deg, rgba(1, 12, 26, 0.5) 0%, rgba(1, 12, 26, 0.06) 48%, rgba(1, 12, 26, 0.76) 100%);
}

.news-immersive-hero .hero-content {
    z-index: 3;
    min-height: 560px;
    padding: 132px 0 96px;
}

.news-immersive-hero h1 {
    font-size: clamp(48px, 7vw, 86px);
}

.news-motion-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.news-motion-layer::before {
    position: absolute;
    inset: -20%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    mask-image: radial-gradient(circle at 72% 42%, #000 0%, transparent 58%);
    opacity: 0.32;
    transform: perspective(900px) rotateX(62deg) translateY(10%);
}

.news-orbit {
    position: absolute;
    width: clamp(260px, 36vw, 560px);
    aspect-ratio: 1;
    border: 1px solid rgba(74, 218, 227, 0.28);
    border-radius: 50%;
    filter: drop-shadow(0 0 24px rgba(53, 199, 214, 0.22));
}

.news-orbit::before, .news-orbit::after {
    position: absolute;
    border-radius: inherit;
    content: "";
}

.news-orbit::before {
    inset: 9%;
    border: 1px dashed rgba(255, 255, 255, 0.28);
}

.news-orbit::after {
    inset: 26%;
    border: 1px solid rgba(28, 139, 109, 0.34);
    box-shadow: inset 0 0 36px rgba(53, 199, 214, 0.14);
}

.news-orbit-one {
    right: 8%;
    bottom: 8%;
    animation: newsRotate 24s linear infinite;
}

.news-orbit-two {
    top: 18%;
    right: -6%;
    width: clamp(190px, 25vw, 380px);
    opacity: 0.72;
    animation: newsRotateReverse 30s linear infinite;
}

.news-scanline {
    position: absolute;
    width: 46vw;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 48%, transparent 100%);
    opacity: 0.5;
    transform: rotate(-18deg);
    animation: newsScan 8s ease-in-out infinite;
}

.news-scanline-one {
    top: 28%;
    left: -12%;
}

.news-scanline-two {
    right: -18%;
    bottom: 28%;
    animation-delay: -3.6s;
}

.news-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.news-hero-metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    backdrop-filter: blur(10px);
    font-size: 14px;
    font-weight: 800;
}

.news-ledger-section {
    background: linear-gradient(180deg, #ffffff 0%, #f2f7fa 54%, #ffffff 100%), radial-gradient(circle at 8% 20%, rgba(53, 199, 214, 0.12), transparent 32%);
}

.news-lead-story {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.1fr);
    min-height: 200px;
    overflow: hidden;
    color: var(--color-white);
    background: #071a2f;
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 28px 80px rgba(8, 47, 95, 0.16);
}

.news-lead-media {
    overflow: hidden;
}

.news-lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms ease;
}

.news-lead-story:hover .news-lead-media img {
    transform: scale(1.04);
}

.news-lead-content {
    display: grid;
    align-content: center;
    gap: 18px;
    min-height:458px;
    padding: clamp(34px, 5vw, 58px);
    background: linear-gradient(145deg, rgba(8, 47, 95, 0.94) 0%, rgba(5, 37, 52, 0.96) 58%, rgba(7, 26, 47, 0.98) 100%);
}

.news-lead-content h2 {
    margin: 0;
    font-size: clamp(34px, 3.8vw, 32px);
    line-height: 1.13;
}

.news-lead-content p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}

.news-date-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.news-date-line time, .news-date-line span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
}

.news-date-line time {
    color: #06223b;
    background: var(--color-accent);
}

.news-date-line span {
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.news-story-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.news-story-actions .news-link {
    color: var(--color-white);
    border-color: var(--color-accent);
}

.news-story-actions span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 14px;
    font-weight: 700;
}

.news-category-board {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 44px 0 24px;
}

.news-category-board h2 {
    margin: 0;
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.2;
}

.news-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(8, 47, 95, 0.12);
}

.news-tabs button {
    position: relative;
    min-height: 44px;
    padding: 0 0 14px;
    color: var(--color-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    transition: color var(--transition);
}

.news-tabs button::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    content: "";
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity var(--transition), transform var(--transition);
}

.news-tabs button:hover, .news-tabs button.is-active {
    color: var(--color-primary);
}

.news-tabs button:hover::after, .news-tabs button.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.news-feed-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.32fr);
    gap: 28px;
    align-items: start;
}

.news-list-stack {
    display: grid;
    gap: 18px;
}

.news-feed-card {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    min-height: 220px;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 46px rgba(8, 47, 95, 0.07);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.news-feed-card[hidden] {
    display: none;
}

.news-feed-card:hover {
    border-color: rgba(28, 139, 109, 0.24);
    box-shadow: 0 24px 68px rgba(8, 47, 95, 0.14);
    transform: translateY(-4px);
}

.news-feed-media {
    overflow: hidden;
    background: var(--color-bg-soft);
}

.news-feed-media img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 10px;
    object-fit: cover;
    transition: transform 650ms ease;
}

.news-feed-card:hover .news-feed-media img {
    transform: scale(1.05);
}

.news-feed-copy {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 28px 30px;
}

.news-feed-copy h3 {
    margin: 0;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.24;
}

.news-feed-copy h3 a {
    transition: color var(--transition);
}

.news-feed-copy h3 a:hover {
    color: var(--color-secondary);
}

.news-feed-copy p {
    margin: 0;
    color: var(--color-muted);
    font-size: 16px;
}

.news-sidebar {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 18px;
}

.news-side-panel {
    padding: 30px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 46px rgba(8, 47, 95, 0.08);
}

.news-side-panel h2 {
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.24;
}

.news-side-panel p {
    margin: 0 0 22px;
    color: var(--color-muted);
}

.news-side-panel-dark {
    color: var(--color-white);
    background: linear-gradient(145deg, rgba(8, 47, 95, 0.96), rgba(4, 45, 53, 0.96)), var(--color-primary);
}

.news-side-panel-dark .eyebrow {
    color: var(--color-accent);
}

.news-side-panel-dark p {
    color: rgba(255, 255, 255, 0.72);
}

@keyframes newsRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes newsRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes newsScan {
    0%, 100% {
        opacity: 0;
        transform: translate3d(-8%, 22%, 0) rotate(-18deg);
    }

    48% {
        opacity: 0.62;
    }

    70% {
        opacity: 0;
        transform: translate3d(72%, -22%, 0) rotate(-18deg);
    }
}

.news-detail-layout .detail-main {
    gap: 18px;
}

.news-article-head {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

.news-article-head h2 {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.14;
}

.news-article-lead {
    margin: 0;
    color: var(--color-muted);
    font-size: 17px;
}

.news-article-banner {
    overflow: hidden;
    padding: 0;
}

.news-article-banner img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.news-article-banner figcaption {
    padding: 14px 22px 18px;
    color: var(--color-muted);
    font-size: 13px;
}

.news-keypoints {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.news-keypoints article {
    padding: 18px;
    background: #f8fbfe;
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: calc(var(--radius) - 2px);
}

.news-keypoints h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.25;
}

.news-keypoints p {
    margin: 0;
    color: var(--color-muted);
}

.news-article-nav {
    display: flex;
    /* flex-wrap: wrap; */
    /* justify-content: space-between; */
    gap: 12px;
}

.news-article-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    color: var(--color-text);
    background: var(--color-white);
    /* border: 1px solid rgba(8, 47, 95, 0.08); */
    /* border-radius: 8px; */
    /* box-shadow: 0 10px 24px rgba(8, 47, 95, 0.06); */
    /* font-weight: 700; */
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
}

.partner-grid span {
    display: grid;
    min-height: 104px;
    place-items: center;
    color: #7c8794;
    background: #fbfcfd;
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    font-weight: 800;
}

.section-culture {
    padding-top: 0;
}

.culture-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.15fr);
    gap: 44px;
    align-items: stretch;
}

.culture-card {
    padding: 42px;
    color: var(--color-white);
    background: linear-gradient(145deg, var(--color-primary), #0b4c77);
    border-radius: var(--radius);
}

.culture-card h2, .culture-card p {
    color: var(--color-white);
}

.culture-card .eyebrow {
    color: var(--color-accent);
}

.timeline {
    display: grid;
    gap: 14px;
}

.timeline article {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 24px;
    align-items: center;
    padding: 25px 28px;
    background: var(--color-bg-soft);
    border-radius: var(--radius);
}

.timeline span {
    color: var(--color-secondary);
    font-size: 22px;
    font-weight: 900;
}

.timeline p {
    margin: 0;
    color: var(--color-muted);
}

.site-footer {
    color: rgba(255, 255, 255, 0.76);
    background: #061a33;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(140px, 0.5fr) minmax(360px, 1.1fr) 150px;
    gap: 42px;
    padding: 64px 0 52px;
}

.site-footer .brand {
    color: var(--color-white);
}

.footer-brand p {
    margin: 20px 0 0;
}

.footer-links, .footer-contact {
    display: grid;
    align-content: start;
    gap: 9px;
}

.footer-links h2, .footer-contact h2 {
    margin: 0 0 10px;
    color: var(--color-white);
    font-size: 18px;
}

.footer-links a, .footer-contact a {
    color: rgba(255, 255, 255, 0.86);
}

.footer-contact p {
    margin: 0;
}

.qr-box {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 12px;
}

.qr-box span {
    display: block;
    width: 116px;
    height: 116px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px), rgba(255, 255, 255, 0.06);
    background-size: 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.qr-box p {
    margin: 0;
    font-size: 13px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-size: 13px;
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    text-align: left;
}

.page-shell .site-header {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 42px rgba(8, 47, 95, 0.12);
    backdrop-filter: blur(18px);
}

.page-shell .brand-mark {
    color: var(--color-white);
}

.page-shell .main-nav li > a {
    color: var(--color-text);
}

.page-shell .main-nav li > a:hover, .page-shell .main-nav li > a.is-current {
    color: var(--color-accent);
}

.page-shell .icon-button {
    border-color: rgba(8, 47, 95, 0.14);
}

.page-shell .phone-link {
    color: var(--color-primary);
    background: rgba(8, 47, 95, 0.06);
    border-color: rgba(8, 47, 95, 0.12);
}

.page-shell .language-link {
    color: var(--color-primary);
}

.page-main {
    padding-top: 78px;
}

.page-hero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-dark);
}

.page-hero .hero-slide img {
    object-position: center;
}

.page-hero .hero-slide video {
    object-position: center;
}

.page-hero .hero-content {
    min-height: 420px;
    padding: 114px 0 76px;
}

/* Cases hero right-to-left carousel */
.hero-carousel {
    overflow: hidden;
}

.hero-carousel-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-carousel-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.hero-carousel-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-hero h1 {
    max-width: 920px;
    font-size: clamp(40px, 5.6vw, 68px);
}

.page-hero .hero-lead {
    max-width: 820px;
    font-size: 18px;
}

.page-hero .hero-control {
    display: none;
}

.page-hero.page-hero-slim {
    min-height: 420px;
}

.page-hero.page-hero-slim .hero-content {
    min-height: 420px;
    padding: 114px 0 76px;
}

.page-hero.page-hero-slim h1 {
    font-size: clamp(40px, 5.6vw, 68px);
}

.page-hero.news-hero .hero-content {
    max-width: 920px;
}

.page-hero.news-hero .hero-tags {
    max-width: 920px;
}

.breadcrumb {
    padding: 18px 0 0;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--color-muted);
    font-size: 19px;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.breadcrumb li + li::before {
    margin-right: 8px;
    color: var(--color-border-strong);
    content: "/";
}

.breadcrumb a {
    color: var(--color-text-muted);
}

.breadcrumb strong {
    color: var(--color-text);
    font-weight: 700;
}

.page-section {
    padding: 84px 0;
}

.page-section.alt {
    background: var(--color-bg-soft);
}

.page-section.compact {
    padding: 64px 0;
}

.panel {
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 44px rgba(8, 47, 95, 0.08);
}

.panel-pad {
    padding: 28px;
}

.section-title {
    /* max-width: 760px; */
    /* margin-bottom: 36px; */
    /* text-align: center; */
}

.section-title h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.18;
}

.section-title p {
    margin: 16px 0 0;
    color: var(--color-muted);
    font-size: 17px;
    /* text-align:center; */
}

.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
    gap: 42px;
    align-items: start;
}

.split-layout.reverse {
    grid-template-columns: minmax(320px, 0.96fr) minmax(0, 1.04fr);
}

.info-list {
    display: grid;
    gap: 14px;
    padding: 0;
}

.info-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(8, 47, 95, 0.08);
}

.info-list li:last-child {
    border-bottom: 0;
}

.info-list strong {
    min-width: 78px;
    color: var(--color-primary);
    font-size: 14px;
}

.info-list span {
    color: var(--color-muted);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-grid.feature-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card {
    padding: 26px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.06);
}

.feature-card .eyebrow {
    margin-bottom: 12px;
}

.feature-card h3 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.28;
}

.feature-card p {
    margin: 0;
    color: var(--color-muted);
}

.feature-card .link {
    display: inline-flex;
    margin-top: 18px;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    font-weight: 800;
}

.media-panel {
    display: grid;
    overflow: hidden;
    padding: 0;
}

.media-panel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.media-panel video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #071520;
}

.media-panel h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.28;
}

.media-panel p {
    margin: 0;
    color: var(--color-muted);
}

.media-panel .panel-pad {
    display: grid;
    gap: 12px;
}

.media-panel .tag-row {
    margin: 0;
}

.sports-advantage-section {
    padding-bottom: 92px;
}

.sports-advantage-stage {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    color: #fff;
    background: #06162a;
    border-radius: var(--radius);
    box-shadow: 0 24px 68px rgba(8, 47, 95, 0.16);
    isolation: isolate;
}

.sports-advantage-bg, .sports-advantage-overlay {
    position: absolute;
    inset: 0;
}

.sports-advantage-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sports-advantage-overlay {
}

.sports-advantage-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    /* min-height: 560px; */
    padding: 26px 36px 72px;
}

.sports-advantage-title {
    margin: 0;
}

.sports-advantage-title .eyebrow {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.74);
    letter-spacing: 0;
}

.sports-advantage-title h2 {
    margin: 0;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.08;
}

.sports-advantage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 1120px);
    margin: auto auto 0;
}

.sports-advantage-item {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

.sports-advantage-index {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}

.sports-advantage-item h3 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.sports-advantage-item p {
    max-width: 20ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.7;
}

.covered-tech-section {
    overflow: hidden;
    background: #07182f;
}

.covered-tech-row {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    color: #fff;
    background: #07182f;
}

.covered-tech-bg, .covered-tech-overlay {
    position: absolute;
    inset: 0;
}

.covered-tech-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
    filter: saturate(0.95) contrast(0.96);
}

.covered-tech-overlay {
    background: linear-gradient(90deg, rgba(4, 17, 34, 0.84) 0%, rgba(7, 27, 51, 0.48) 44%, rgba(7, 27, 51, 0.14) 100%), linear-gradient(180deg, rgba(4, 17, 34, 0.24) 0%, rgba(4, 17, 34, 0.1) 30%, rgba(4, 17, 34, 0.58) 100%);
}

.covered-tech-row.is-reverse .covered-tech-overlay {
    background: linear-gradient(90deg, rgba(7, 27, 51, 0.14) 0%, rgba(7, 27, 51, 0.48) 56%, rgba(4, 17, 34, 0.84) 100%), linear-gradient(180deg, rgba(4, 17, 34, 0.24) 0%, rgba(4, 17, 34, 0.1) 30%, rgba(4, 17, 34, 0.58) 100%);
}

.covered-tech-row.is-reverse {
    text-align: right;
}

.covered-tech-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    grid-template-areas: "copy card";
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
    width: min(calc(100% - 48px), 1280px);
    min-height: 100svh;
    padding: clamp(96px, 12vh, 136px) 0 clamp(60px, 7vh, 78px);
}

.covered-tech-row.is-reverse .covered-tech-inner {
    grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
    grid-template-areas: "card copy";
}

.covered-tech-copy {
    grid-area: copy;
    display: grid;
    gap: 18px;
    max-width: 640px;
    /* text-align: right; */
}

.covered-tech-copy .eyebrow {
    display: none;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    letter-spacing: 0.18em;
}

.covered-tech-copy h2 {
    margin: 0;
    text-align:left;
    color: #fff;
    font-size: clamp(46px, 5.8vw, 48px);
    font-weight: 800;
    line-height: 1.02;
}

.covered-tech-copy p {
    max-width: 100%;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.35vw, 18px);
    line-height: 1.82;
    text-align: justify;
}

.covered-tech-card {
    grid-area: card;
    display: grid;
    gap: 14px;
    padding: 28px 28px 24px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    box-shadow: 0 28px 72px rgba(2, 10, 22, 0.28);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.covered-tech-card-kicker {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.covered-tech-card h3 {
    max-width: 100%;
    display: none;
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 2.3vw, 28px);
    font-weight: 700;
    line-height: 1.22;
    text-align: left !important;
}

.covered-tech-card p {
    max-width: 100%;
    display: none;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.74;
}

.covered-tech-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.steel-tech-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.steel-tech-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.46fr) minmax(0, 1fr);
    gap: clamp(48px, 7vw, 108px);
    align-items: center;
}

.steel-tech-copy h2 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 42px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
}

.steel-tech-copy > p:not(.eyebrow) {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 17px;
}

.steel-tech-tabs {
    position: relative;
    display: grid;
    gap: 8px;
    margin-top: 46px;
    padding-left: 34px;
}

.steel-tech-tabs::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 1px;
    width: 1px;
    background: #e6edf4;
    content: "";
}

.steel-tech-tab {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 86px;
    padding: 12px 0;
    color: #a8b1ba;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--transition), transform var(--transition);
}

.steel-tech-tab::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: -34px;
    width: 4px;
    background: transparent;
    border-radius: 999px;
    content: "";
    transition: background var(--transition), top var(--transition), bottom var(--transition);
}

.steel-tech-tab:hover {
    color: var(--color-text);
    transform: translateX(3px);
}

.steel-tech-tab.is-active {
    color: var(--color-text-strong);
}

.steel-tech-tab.is-active::before {
    top: 8px;
    bottom: 8px;
    background: #1785f2;
}

.steel-tech-index {
    color: currentColor;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    opacity: 0.52;
}

.steel-tech-tab.is-active .steel-tech-index {
    color: #1785f2;
    opacity: 1;
}

.steel-tech-label {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.steel-tech-label strong {
    color: currentColor;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.18;
}

.steel-tech-label em {
    color: var(--color-muted);
    font-size: 14px;
    font-style: normal;
    line-height: 1.4;
    opacity: 0.76;
}

.steel-tech-tab.is-active .steel-tech-label em {
    color: #506071;
    opacity: 1;
}

.steel-tech-stage {
    position: relative;
    min-width: 0;
}

.steel-tech-visual {
    position: relative;
    min-height: 560px;
    padding: 34px 0 82px 54px;
}

.steel-tech-visual::before {
    position: absolute;
    inset: 0 0 62px 15%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 250, 0.74)), linear-gradient(0deg, rgba(8, 47, 95, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 47, 95, 0.04) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 22px 64px rgba(8, 47, 95, 0.08);
    content: "";
}

.steel-tech-image-wrap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #edf3f7;
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(8, 47, 95, 0.16);
}

.steel-tech-image-wrap::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 36%), linear-gradient(180deg, transparent 48%, rgba(3, 18, 34, 0.28));
    content: "";
    pointer-events: none;
}

.steel-tech-image-wrap img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    transition: opacity 180ms ease, transform 360ms ease, filter 360ms ease;
}

.steel-tech-summary {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: min(480px, 64%);
    padding: 28px 30px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 22px 56px rgba(8, 47, 95, 0.14);
    backdrop-filter: blur(16px);
    transition: opacity 180ms ease, transform 260ms ease;
}

.steel-tech-summary::before {
    display: block;
    width: 54px;
    height: 3px;
    margin-bottom: 18px;
    background: #1785f2;
    content: "";
}

.steel-tech-summary .eyebrow {
    margin-bottom: 10px;
    color: var(--color-secondary);
}

.steel-tech-summary h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: 28px;
    line-height: 1.25;
}

.steel-tech-summary p:not(.eyebrow) {
    margin: 14px 0 0;
    color: var(--color-muted);
}

.steel-tech-summary .tag-row {
    margin-top: 20px;
}

.steel-tech-stage.is-switching .steel-tech-image-wrap img {
    opacity: 0.22;
    filter: saturate(0.82);
    transform: scale(1.012);
}

.steel-tech-stage.is-switching .steel-tech-summary {
    opacity: 0;
    transform: translateY(10px);
}

.feature-card.media-card {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.feature-card.media-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.feature-card.media-card .media-body {
    display: grid;
    gap: 10px;
    padding: 22px;
    text-align: left;
}

.feature-card.media-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-card.media-card .meta span {
    padding: 6px 10px;
    color: var(--color-secondary);
    background: #eef8f5;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.cover-system-section {
    overflow: hidden;
    background: linear-gradient(180deg, rgba(245, 250, 249, 0.92), rgba(255, 255, 255, 0.98)), var(--color-bg-soft);
}

.cover-system-gallery {
    --cover-system-compact: clamp(132px, 12vw, 168px);
    --cover-system-gap: clamp(10px, 1vw, 14px);
    --cover-system-expanded: calc(100% - (3 * var(--cover-system-compact)) - (3 * var(--cover-system-gap)));
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    height: 450px;
    gap: var(--cover-system-gap);
    /* max-width: 1160px; */
    margin: 40px auto 0;
    width: 100%;
}

.cover-system-card {
    position: relative;
    min-width: 0;
    flex: 0 0 var(--cover-system-compact);
    width: var(--cover-system-compact);
    height: 100%;
    overflow: hidden;
    color: #fff;
    background: var(--color-primary);
    /* border: 1px solid rgba(255, 255, 255, 0.16); */
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(8, 47, 95, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    isolation: isolate;
    outline: 0;
    transition: flex-basis 0.68s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.68s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.68s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.68s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cover-system-card.is-active {
    flex: 0 0 var(--cover-system-expanded);
    width: var(--cover-system-expanded);
    z-index: 2;
    /* border-color: rgba(255, 255, 255, 0.22); */
    box-shadow: 0 28px 58px rgba(8, 47, 95, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cover-system-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(112, 234, 212, 0.35), 0 22px 46px rgba(8, 47, 95, 0.18);
}

.cover-system-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.88) contrast(0.96);
    transform: scale(1.04);
    transition: transform 0.68s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.68s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cover-system-card.is-active img {
    filter: saturate(1.02) contrast(1.01);
    transform: scale(1.015);
}

.cover-system-card::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: linear-gradient(180deg, rgba(232, 243, 255, 0.12), rgba(7, 25, 46, 0.18)), linear-gradient(180deg, rgba(7, 24, 43, 0.24), rgba(7, 24, 43, 0.46));
    backdrop-filter: blur(20px) saturate(78%);
    -webkit-backdrop-filter: blur(20px) saturate(78%);
    opacity: 0.96;
    transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cover-system-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background: radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.18), transparent 34%), linear-gradient(180deg, rgba(4, 16, 32, 0.08), rgba(4, 16, 32, 0.58)), linear-gradient(90deg, rgba(6, 21, 38, 0.18), rgba(6, 21, 38, 0.36));
    opacity: 0.88;
    transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cover-system-card.is-active::before {
    opacity: 0;
}

.cover-system-card.is-active::after {
    opacity: 0.34;
}

.cover-system-brief, .cover-system-panel {
    position: absolute;
    z-index: 2;
    display: grid;
    justify-items: start;
}

.cover-system-brief {
    inset: 0;
    padding: 34px 18px 42px;
    gap: 16px;
    align-content: center;
    justify-items: center;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cover-system-card.is-active .cover-system-brief {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
}

.cover-system-panel {
    left: clamp(34px, 7%, 84px);
    top: 50%;
    width: clamp(280px, 46%, 360px);
    min-height: 250px;
    padding: 30px 34px 32px;
    align-content: center;
    justify-items: center;
    gap: 18px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(180deg, rgba(230, 240, 252, 0.18), rgba(80, 98, 120, 0.22)), rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(5, 18, 36, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -20px 38px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    opacity: 0;
    transform: translateY(-50%) translateX(-16px) scale(0.97);
    visibility: hidden;
    transition: opacity 0.42s ease 0s, transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) 0s, visibility 0s linear 0.52s;
}

.cover-system-panel::before, .cover-system-panel::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.cover-system-panel::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.08));
    opacity: 0.9;
}

.cover-system-panel::after {
    inset: 1px;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0.86;
}

.cover-system-panel > * {
    position: relative;
    z-index: 1;
}

.cover-system-card.is-active .cover-system-panel {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
    visibility: visible;
    transition: opacity 0.4s ease 0.16s, transform 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s, visibility 0s linear 0s;
}

.cover-system-brief span, .cover-system-panel span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    border-radius: 999px;
    font-size: 15px;
    font-style: normal;
    font-weight: 850;
}

.cover-system-brief h3 {
    max-width: 100%;
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-shadow: 0 10px 24px rgba(3, 18, 36, 0.24);
    overflow-wrap: normal;
    word-break: normal;
}

.cover-system-panel h3 {
    max-width: 10ch;
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2vw, 18px);
    font-weight: 400;
    line-height: 1.14;
    text-align: center;
    text-shadow: 0 14px 30px rgba(3, 16, 32, 0.22);
}

.cover-system-panel em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 146px;
    min-height: 46px;
    padding: 0 30px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
    border-radius: 999px;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cover-system-card::before {
        background: linear-gradient(180deg, rgba(10, 29, 52, 0.36), rgba(10, 29, 52, 0.58)), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    }

    .cover-system-panel {
        background: linear-gradient(180deg, rgba(39, 59, 81, 0.84), rgba(25, 39, 58, 0.9)), rgba(32, 48, 68, 0.86);
    }
}

.covered-scenes-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.72fr) minmax(0, 1.08fr);
    grid-template-areas: "tile-01 tile-02 tile-03 tile-04" "tile-05 tile-05 tile-03 tile-06";
    grid-auto-rows: 240px;
    gap: 14px;
    margin-top: 34px;
}

.covered-scene-tile {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-primary-deep);
    border-radius: 18px;
    isolation: isolate;
    transition: transform var(--transition), box-shadow var(--transition);
}

.covered-scene-tile.is-large {
    grid-row: span 2;
    min-height: 494px;
}

.covered-scene-tile.is-wide {
    grid-column: span 2;
}

.covered-scenes-mosaic > .covered-scene-tile:nth-child(1) {
    grid-area: tile-01;
}

.covered-scenes-mosaic > .covered-scene-tile:nth-child(2) {
    grid-area: tile-02;
}

.covered-scenes-mosaic > .covered-scene-tile:nth-child(3) {
    grid-area: tile-03;
}

.covered-scenes-mosaic > .covered-scene-tile:nth-child(4) {
    grid-area: tile-04;
}

.covered-scenes-mosaic > .covered-scene-tile:nth-child(5) {
    grid-area: tile-05;
}

.covered-scenes-mosaic > .covered-scene-tile:nth-child(6) {
    grid-area: tile-06;
}

.covered-scene-tile img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease, filter 700ms ease;
}

.covered-scene-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 30, 54, 0.08) 0%, rgba(8, 30, 54, 0.28) 34%, rgba(6, 24, 42, 0.92) 100%), linear-gradient(90deg, rgba(8, 30, 54, 0.56), rgba(8, 30, 54, 0.12) 58%, rgba(8, 30, 54, 0.32) 100%);
    transition: background var(--transition), opacity var(--transition);
}

.covered-scene-tile.is-placeholder .covered-scene-shade {
    background: linear-gradient(180deg, rgba(8, 30, 54, 0.16) 0%, rgba(8, 30, 54, 0.34) 42%, rgba(6, 24, 42, 0.94) 100%), linear-gradient(135deg, rgba(22, 132, 103, 0.42), rgba(8, 30, 54, 0.18) 54%, rgba(53, 199, 214, 0.22) 100%);
}

.covered-scene-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: 10px;
    text-align: left;
    padding: 24px 22px 22px;
    transform: translateY(0);
    transition: transform var(--transition);
}

.covered-scene-index {
    display: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.covered-scene-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.covered-scene-tile h3 {
    display: none;
    max-width: 18ch;
    margin: 0;
    color: var(--color-white);
    font-size: 20p x-large;
    line-height: 1.3;
    text-shadow: 0 14px 28px rgba(4, 18, 34, 0.22);
}

.covered-scene-tile.is-large .covered-scene-content {
    padding: 30px 34px 34px;
    gap: 12px;
}

.covered-scene-tile.is-large h3 {
    max-width: 10ch;
    font-size: clamp(36px, 2.9vw, 40px);
    line-height: 1.18;
}

.covered-scene-tile.is-large .covered-scene-index {
    width: 58px;
    height: 58px;
    font-size: 15px;
}

.covered-scene-tile.is-large .covered-scene-label {
    font-size: 19px;
}

.covered-scene-tile.is-wide h3 {
    max-width: 16ch;
}

.covered-scene-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 64px rgba(8, 47, 95, 0.18);
}

.covered-scene-tile:hover img {
    filter: saturate(1.04);
    transform: scale(1.04);
}

.covered-scene-tile:hover .covered-scene-shade {
    background: linear-gradient(180deg, rgba(8, 30, 54, 0.04) 0%, rgba(8, 30, 54, 0.24) 34%, rgba(6, 24, 42, 0.94) 100%), linear-gradient(90deg, rgba(8, 30, 54, 0.48), rgba(8, 30, 54, 0.08) 58%, rgba(8, 30, 54, 0.28) 100%);
}

.covered-scene-tile:hover .covered-scene-content {
    transform: translateY(-4px);
}

@media (max-width: 960px) {
    .sports-advantage-section {
        padding-bottom: 76px;
    }

    .sports-advantage-stage {
        min-height: 0;
    }

    .sports-advantage-content {
        gap: 32px;
        min-height: 0;
        padding: 64px 24px 54px;
    }

    .sports-advantage-title h2 {
        font-size: 38px;
    }

    .sports-advantage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        width: 100%;
    }

    .sports-advantage-item p {
        max-width: none;
    }

    .covered-tech-stack {
        width: min(calc(100% - 32px), 1180px);
    }

    .covered-tech-row, .covered-tech-row.is-reverse {
        grid-template-columns: 1fr;
    }

    .covered-tech-row.is-reverse .covered-tech-copy {
        order: 0;
    }

    .covered-tech-copy, .covered-tech-row.is-reverse .covered-tech-copy {
        padding: 28px 24px 24px;
        border-left-width: 4px;
    }

    .covered-tech-copy h3 {
        font-size: 24px;
    }

    .covered-tech-copy > p {
        max-width: none;
    }

    .covered-tech-note {
        max-width: none;
    }

    .covered-tech-media img {
        min-height: 280px;
    }

    .cover-system-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
        height: auto;
        gap: 16px;
        margin-top: 32px;
    }

    .cover-system-card, .cover-system-card.is-active {
        width: auto;
        flex-basis: auto;
        min-height: 320px;
        height: 320px;
        flex: none;
    }

    .cover-system-brief {
        padding: 28px 16px 30px;
        gap: 14px;
    }

    .cover-system-brief h3 {
        max-width: 100%;
        font-size: 20px;
    }

    .cover-system-panel {
        left: 50%;
        width: calc(100% - 42px);
        min-height: 218px;
        padding: 26px 22px 24px;
        border-radius: 24px;
        transform: translate(-50%, -50%) translateY(14px) scale(0.97);
    }

    .cover-system-card.is-active .cover-system-panel {
        transform: translate(-50%, -50%) scale(1);
    }

    .cover-system-brief span, .cover-system-panel span {
        width: 54px;
        height: 54px;
    }

    .cover-system-panel h3 {
        max-width: 12ch;
        font-size: 26px;
    }

    .cover-system-panel em {
        min-width: 136px;
        min-height: 44px;
    }

    .covered-scenes-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "tile-01 tile-02" "tile-03 tile-03" "tile-04 tile-06" "tile-05 tile-05";
        grid-auto-rows: minmax(240px, auto);
        gap: 12px;
    }

    .covered-scene-tile, .covered-scene-tile.is-wide {
        min-height: 240px;
    }

    .covered-scene-tile.is-large {
        grid-row: span 1;
        min-height: 340px;
    }

    .covered-scene-tile.is-wide {
        grid-column: span 2;
    }

    .covered-scene-tile h3 {
        max-width: 16ch;
        font-size: 22px;
    }

    .covered-scene-tile.is-large h3 {
        max-width: 17ch;
        font-size: 28px;
    }

    .covered-scene-tile.is-large .covered-scene-content {
        padding: 26px 28px 28px;
    }

    .covered-scene-tile.is-large .covered-scene-index {
        width: 56px;
        height: 56px;
        font-size: 15px;
    }

    .covered-scene-tile.is-large .covered-scene-label {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .sports-advantage-section {
        padding-bottom: 58px;
    }

    .sports-advantage-content {
        gap: 24px;
        padding: 44px 18px 36px;
    }

    .sports-advantage-title h2 {
        font-size: 30px;
    }

    .sports-advantage-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sports-advantage-item {
        gap: 10px;
    }

    .sports-advantage-index {
        width: 52px;
        height: 52px;
        font-size: 13px;
    }

    .sports-advantage-item h3 {
        font-size: 20px;
    }

    .sports-advantage-item p {
        font-size: 14px;
        line-height: 1.72;
    }

    .covered-tech-stack {
        width: min(calc(100% - 24px), 1180px);
        gap: 12px;
    }

    .covered-tech-copy, .covered-tech-row.is-reverse .covered-tech-copy {
        padding: 24px 18px 20px;
    }

    .covered-tech-copy h3 {
        font-size: 22px;
    }

    .covered-tech-copy > p {
        font-size: 15px;
        line-height: 1.75;
    }

    .covered-tech-note {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
    }

    .covered-tech-note span {
        width: 52px;
        height: 52px;
        font-size: 14px;
    }

    .covered-tech-media img {
        min-height: 220px;
    }

    .cover-system-gallery {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cover-system-card, .cover-system-card.is-active {
        min-height: 280px;
        height: 280px;
    }

    .cover-system-brief {
        padding: 24px 16px 28px;
    }

    .cover-system-brief, .cover-system-panel {
        gap: 12px;
    }

    .cover-system-brief span, .cover-system-panel span {
        width: 50px;
        height: 50px;
        font-size: 14px;
    }

    .cover-system-brief h3 {
        font-size: 18px;
    }

    .cover-system-panel {
        width: calc(100% - 32px);
        min-height: 204px;
        padding: 22px 18px;
        border-radius: 20px;
    }

    .cover-system-panel h3 {
        font-size: 22px;
    }

    .cover-system-panel em {
        min-width: 126px;
        min-height: 40px;
        font-size: 13px;
    }

    .covered-scenes-mosaic {
        grid-template-columns: 1fr;
        grid-template-areas: "tile-01" "tile-02" "tile-03" "tile-04" "tile-05" "tile-06";
        grid-auto-rows: auto;
        gap: 12px;
        margin-top: 28px;
    }

    .covered-scene-tile, .covered-scene-tile.is-large, .covered-scene-tile.is-wide {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 260px;
    }

    .covered-scene-content, .covered-scene-tile.is-large .covered-scene-content {
        padding: 22px 18px 20px;
    }

    .covered-scene-index {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }

    .covered-scene-label {
        font-size: 12px;
    }

    .covered-scene-tile h3, .covered-scene-tile.is-large h3 {
        max-width: none;
        font-size: 20px;
    }
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.data-card {
    padding: 24px;
    color: var(--color-text);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfe 100%);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
}

.data-card strong {
    display: block;
    color: var(--color-primary);
    font-size: clamp(24px, 2.6vw, 42px);
    line-height: 1;
    font-weight: 900;
}

.data-card span {
    display: block;
    margin-top: 10px;
    color: var(--color-secondary);
    font-weight: 800;
}

.data-card p {
    margin: 14px 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.step {
    position: relative;
    padding: 24px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(8, 47, 95, 0.06);
}

.step::before {
    display: block;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    content: attr(data-step);
}

.step h3 {
    margin: 14px 0 10px;
    font-size: 20px;
    line-height: 1.25;
}

.step p {
    margin: 0;
    color: var(--color-muted);
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    padding: 9px 14px;
    color: var(--color-primary);
    background: #eef5fa;
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

.tag.is-active {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: transparent;
}

.article-card {
    display: grid;
    gap: 16px;
    padding: 26px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.08);
}

.article-card h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
}

.article-card p {
    margin: 0;
    color: var(--color-muted);
}

.article-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--color-text-subtle);
    font-size: 13px;
}

.article-card .meta span + span::before {
    margin-right: 10px;
    color: var(--color-border-strong);
    content: "\00b7";
}

.article-card .link {
    display: inline-flex;
    width: max-content;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    font-weight: 800;
}

.list-grid {
    display: grid;
    gap: 16px;
}

.list-item {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(8, 47, 95, 0.06);
}

.list-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

.list-item h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.28;
}

.list-item p {
    margin: 0;
    color: var(--color-muted);
}

.list-item .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.list-item .meta span {
    padding: 6px 10px;
    color: var(--color-secondary);
    background: #eef8f5;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.list-item .link {
    display: inline-flex;
    margin-top: 14px;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    font-weight: 800;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}

.detail-main {
    display: grid;
    gap: 22px;
}

.detail-block {
    padding: 28px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.08);
}

.detail-block h2 {
    margin: 0 0 16px;
    font-size: 28px;
    line-height: 1.2;
}

.detail-block p {
    margin: 0;
    color: var(--color-muted);
}

.rich-text {
    display: grid;
    gap: 14px;
    color: var(--color-text);
}

.rich-text h2, .rich-text h3 {
    margin: 18px 0 0;
    color: var(--color-text);
}

.rich-text ul, .rich-text ol {
    margin: 0;
    padding-left: 18px;
    color: var(--color-muted);
}

.aside-stack {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 104px;
}

.fact-card {
    padding: 24px;
    background: linear-gradient(180deg, #ffffff, #f7fbfe);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(8, 47, 95, 0.06);
}

.fact-card h3 {
    margin: 0 0 14px;
    font-size: 20px;
}

.fact-card dl {
    display: grid;
    gap: 12px;
    margin: 0;
}

.fact-card dt {
    color: var(--color-text-subtle);
    font-size: 13px;
    font-weight: 700;
}

.fact-card dd {
    margin: 4px 0 0;
    color: var(--color-text);
    font-weight: 700;
}

.fact-card .small {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 14px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

.detail-main .gallery-grid {
    grid-template-columns: 1fr;
}

.detail-main .gallery-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
}

.faq-item h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.faq-item p {
    margin: 0;
    color: var(--color-muted);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.pagination a, .pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: 8px;
    font-weight: 700;
}

.pagination .is-current {
    color: var(--color-white);
    background: var(--color-primary);
    border-color: transparent;
}

.pagination .is-disabled {
    color: var(--color-text-subtle);
    pointer-events: none;
    opacity: 0.56;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label {
    color: var(--color-text-strong);
    font-size: 14px;
    font-weight: 700;
}

.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-field textarea {
    min-height: 160px;
    padding: 14px 16px;
    resize: vertical;
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}

.form-note {
    color: var(--color-muted);
    font-size: 13px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.form-actions .button {
    border-radius: 12px;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: 24px;
    align-items: start;
}

.page-section.contact-map-stage {
    position: relative;
    padding: 0;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(180deg, #05111d 0%, #071b2d 100%);
}

.contact-map-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(4, 14, 26, 0.58) 0%, rgba(4, 14, 26, 0.32) 36%, rgba(4, 14, 26, 0.12) 66%, rgba(4, 14, 26, 0.42) 100%), url("../images/contact-region-map.png") center/cover no-repeat;
}

.contact-map-canvas::after {
    position: absolute;
    inset: 0;
    display: block;
    content: "";
    background: linear-gradient(135deg, transparent 0 46%, rgba(53, 199, 214, 0.1) 46.2% 46.8%, transparent 47% 100%), linear-gradient(45deg, transparent 0 58%, rgba(255, 255, 255, 0.05) 58.2% 58.8%, transparent 59% 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 320px 320px, 240px 240px, 56px 56px, 56px 56px;
    opacity: 0.28;
}

.contact-map-overlay {
    position: relative;
    z-index: 1;
    padding-top: 84px;
    padding-bottom: 84px;
}

.contact-side-stack {
    display: grid;
    gap: 16px;
    align-content: start;
}

.contact-map-stage .panel, .contact-map-stage .address-stack article, .contact-map-stage .faq-item {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(3, 12, 21, 0.24);
}

.contact-map-stage .address-stack article, .contact-map-stage .faq-item {
    border-color: rgba(255, 255, 255, 0.18);
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-card {
    padding: 24px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.06);
}

.contact-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.contact-card p {
    margin: 0;
    color: var(--color-muted);
}

.contact-card a {
    color: var(--color-primary);
    font-weight: 700;
}

.map-panel {
    min-height: 360px;
    padding: 24px;
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(7, 32, 62, 0.8), rgba(16, 59, 102, 0.9)), linear-gradient(180deg, #dce9f1, #f5fbff);
    border-radius: var(--radius);
    box-shadow: 0 18px 42px rgba(8, 47, 95, 0.18);
}

.map-panel h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.map-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.map-placeholder {
    display: grid;
    place-items: center;
    min-height: 260px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.72);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px), rgba(255, 255, 255, 0.05);
    background-size: 24px 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
}

.jobs-list {
    display: grid;
    gap: 14px;
}

.job-card {
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(8, 47, 95, 0.06);
    overflow: hidden;
}

.job-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    cursor: pointer;
}

.job-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.job-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.job-card .meta span {
    padding: 6px 10px;
    color: var(--color-secondary);
    background: #eef8f5;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.job-card-toggle {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--color-muted);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-line);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.job-card-toggle:hover {
    color: var(--color-primary);
    background: rgba(10, 77, 119, 0.06);
}

.job-card-arrow {
    display: block;
    width: 14px;
    height: 14px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-top: -4px;
}

.job-card.is-open .job-card-arrow {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.job-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 24px;
}

.job-card.is-open .job-card-body {
    max-height: 800px;
    padding: 0 24px 22px;
}

.job-card-body h4 {
    margin: 0 0 10px;
    color: var(--color-text-strong);
    font-size: 15px;
}

.job-card-body h4 + h4 {
    margin-top: 18px;
}

.job-card-body ol {
    margin: 0;
    padding-left: 20px;
    color: var(--color-muted);
    line-height: 1.9;
}

.job-card-body li {
    margin-bottom: 4px;
}

.job-card-body p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.8;
}

.job-card-note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
    color: var(--color-primary);
    font-weight: 600;
}

.table-wrap {
    overflow: auto;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(8, 47, 95, 0.06);
}

.table-wrap table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.table-wrap th, .table-wrap td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(8, 47, 95, 0.08);
}

.table-wrap th {
    color: var(--color-text-strong);
    background: var(--color-bg-soft);
    font-size: 14px;
    font-weight: 800;
}

.table-wrap td {
    color: var(--color-muted);
}

.table-wrap tr:last-child td {
    border-bottom: 0;
}

.storyline {
    display: grid;
    gap: 14px;
}

.story-item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 20px;
    padding: 22px 24px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(8, 47, 95, 0.06);
}

.story-item strong {
    color: var(--color-secondary);
    font-size: 22px;
}

.story-item p {
    margin: 0;
    color: var(--color-muted);
}

.callout {
    padding: 24px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), #0a4f78);
    border-radius: var(--radius);
    box-shadow: 0 18px 42px rgba(8, 47, 95, 0.16);
}

.callout h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.callout p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

.case-hero .hero-overlay, .about-hero .hero-overlay, .jobs-hero .hero-overlay {
    /* background: linear-gradient(90deg, rgba(2, 18, 37, 0.9) 0%, rgba(5, 34, 66, 0.58) 48%, rgba(5, 28, 51, 0.18) 100%), linear-gradient(180deg, rgba(2, 18, 37, 0.48) 0%, rgba(2, 18, 37, 0.12) 45%, rgba(2, 18, 37, 0.78) 100%); */
}

.page-hero.jobs-hero {
    min-height: 100svh;
}

.page-hero.jobs-hero .hero-content {
    min-height: 100svh;
}

.page-hero.contact-hero {
    min-height: 100svh;
}

.page-hero.contact-hero .hero-content {
    min-height: 100svh;
}

.case-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    min-height: 560px;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(8, 47, 95, 0.14);
}

.case-feature-media {
    position: relative;
    min-height: 420px;
}

.case-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 5vw, 64px);
}

.case-feature-content h2, .about-statement-copy h2, .about-band h2, .about-capability-copy h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.12;
    letter-spacing: 0;
}

.case-feature-content p, .about-statement-copy p, .about-capability-copy p {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 17px;
}

.case-feature-facts {
    display: grid;
    gap: 14px;
    margin: 30px 0;
}

.case-feature-facts div {
    padding-top: 14px;
    border-top: 1px solid rgba(8, 47, 95, 0.1);
}

.case-feature-facts dt {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 900;
}

.case-feature-facts dd {
    margin: 5px 0 0;
    color: var(--color-muted);
}

.case-filter {
    margin-bottom: 24px;
}

.case-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    gap: 18px;
}

.case-wall-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-tile {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 18px 46px rgba(8, 47, 95, 0.16);
    isolation: isolate;
}

.case-tile-large {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 540px;
}

.case-tile-wide {
    grid-column: span 2;
}

.case-tile img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms ease;
}

.case-tile-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 26, 51, 0.04) 0%, rgba(6, 26, 51, 0.36) 42%, rgba(6, 26, 51, 0.92) 100%), linear-gradient(90deg, rgba(6, 26, 51, 0.35), transparent 62%);
    transition: background var(--transition);
}

.case-tile div {
    position: absolute;
    inset: auto 0 0;
    padding: 26px;
    transition: transform var(--transition);
}

.case-tile small {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.case-tile h3 {
    margin: 10px 0 10px;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.22;
}

.case-tile p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
}

.case-tile strong {
    display: inline-flex;
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-accent);
    font-size: 14px;
}

.case-tile:hover img {
    transform: scale(1.055);
}

.case-tile:hover div {
    transform: translateY(-8px);
}

.case-value-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(8, 47, 95, 0.12);
    border-left: 1px solid rgba(8, 47, 95, 0.12);
}

.case-value-row article {
    min-height: 260px;
    padding: 32px;
    background: var(--color-white);
    border-right: 1px solid rgba(8, 47, 95, 0.12);
    border-bottom: 1px solid rgba(8, 47, 95, 0.12);
}

.case-value-row span, .solution-console span, .capability-ledger span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.case-value-row h3, .solution-console h3, .capability-ledger h3 {
    margin: 42px 0 12px;
    font-size: 24px;
    line-height: 1.26;
}

.case-value-row p, .solution-console p, .capability-ledger p, .value-matrix p {
    margin: 0;
    color: var(--color-muted);
}

.base-overview {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: 48px;
    align-items: end;
}

.base-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.base-facts article {
    min-height: 220px;
    padding: 28px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.08);
}

.base-facts span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.base-facts strong {
    display: block;
    margin: 46px 0 12px;
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
}

.base-facts p {
    margin: 0;
    color: var(--color-muted);
}

.base-zone-grid {
    position: relative;
    /* padding: 0 62px; */
}

.base-zone-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 36px) / 3);
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    padding: 2px 2px 28px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.base-zone-track::-webkit-scrollbar {
    display: none;
}

.base-zone-track article {
    min-width: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.08);
    scroll-snap-align: start;
}

.base-zone-track img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.base-zone-track article div {
    padding: 24px;
}

.base-zone-track span, .roadmap-board span, .research-card span, .evidence-strip span, .tech-application-grid span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.base-zone-track h3, .roadmap-board h3, .research-card h2, .evidence-strip strong, .tech-application-grid h3 {
    margin: 18px 0 12px;
    font-size: 23px;
    line-height: 1.24;
}

.base-zone-track p {
    margin: 0;
    color: var(--color-muted);
}

.base-zone-controls {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.base-zone-arrow {
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(8, 47, 95, 0.12);
    border-radius: 50%;
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.14);
    cursor: pointer;
    pointer-events: auto;
    transform: translateX(-50%);
    transition: opacity var(--transition), transform var(--transition), color var(--transition);
}

.base-zone-arrow-next {
    margin-left: auto;
    transform: translateX(50%);
}

.base-zone-arrow span {
    width: 13px;
    height: 13px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateX(2px) rotate(45deg);
}

.base-zone-arrow-next span {
    transform: translateX(-2px) rotate(225deg);
}

.base-zone-arrow:hover {
    color: var(--color-accent);
    transform: translate(-50%, -2px);
}

.base-zone-arrow-next:hover {
    transform: translate(50%, -2px);
}

.base-flow-section {
    position: relative;
    overflow: hidden;
    color: var(--color-bg-soft);
    background: linear-gradient(180deg, rgba(6, 26, 51, 0.58), rgba(6, 26, 51, 0.72)), url("https://panel.fii-foxconn.com//static/upload/2023/09/04/202309045573.png") center / cover no-repeat;
}

.base-flow-section-2 {
    background: linear-gradient(180deg, rgba(6, 26, 51, 0.58), rgba(6, 26, 51, 0.72)), url("/assets/img/zhanyanet/bg_innovation.png") center / cover no-repeat;
}

.base-flow-section::before, .base-flow-section::after {
    content: none;
}

.base-flow-section .container {
    position: relative;
}

.base-flow-section .section-title {
    max-width: 100%;
    margin-bottom: 40px;
    text-align: left;
}

.base-flow-section .section-title h2 {
    color: var(--color-bg-soft);
}

.base-flow-section .section-title, .base-flow-section .section-title * {
    color: var(--color-bg-soft);
}

.production-flow-board {
    display: grid;
    gap: 28px;
}

.production-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    padding: 0;
    overflow: hidden;
    background: rgba(8, 47, 95, 0.1);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 18px 52px rgba(8, 47, 95, 0.07);
}

.production-rail-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.production-rail-4 article {
    min-height: 124px !important;
}

.production-rail-4 em {
    position: absolute;
    top: 24px !important;
    left: 50px !important;
    color: #000000 !important;
    font-size: 26px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

.production-rail::before {
    content: none;
}

.production-rail article {
    position: relative;
    min-height: 224px;
    padding: 28px 20px 26px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 0;
    transition: background var(--transition), transform var(--transition);
}

.production-rail article::before {
    display: block;
    width: 12px;
    height: 12px;
    margin-bottom: 22px;
    background: var(--color-secondary);
    border: 3px solid rgba(28, 139, 109, 0.14);
    border-radius: 50%;
    box-shadow: none;
    content: "";
}

.production-rail article:nth-child(3n + 2)::before {
    background: var(--color-accent);
    border-color: rgba(53, 199, 214, 0.18);
}

.production-rail article:hover {
    background: #f7fbfd;
    transform: translateY(-2px);
}

.production-rail em {
    position: absolute;
    top: -20px;
    right: -10px;
    color: var(--color-text);
    font-size: 128px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -10px;
    line-height: 1;
    opacity: 0.1;
}

.production-rail span {
    display: block;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
}

.production-rail p {
    margin: 14px 0 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.72;
}

.production-focus {
    display: grid;
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 18px 52px rgba(8, 47, 95, 0.07);
}

.production-focus img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.production-focus-copy {
    padding: clamp(28px, 4vw, 44px);
}

.production-focus-copy > span {
    display: block;
    margin-bottom: 14px;
    color: var(--color-secondary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.production-focus h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.22;
}

.production-focus p {
    max-width: 620px;
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 16px;
}

.production-focus ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.production-focus li {
    position: relative;
    padding-left: 16px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.65;
}

.production-focus li::before {
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--color-secondary);
    content: "";
}

.page-section.alt.base-quality-section {
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
}

.quality-story {
    max-width: 880px;
    margin-bottom: 38px;
}

.quality-story h2 {
    margin: 0;
    color: var(--color-text);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.16;
}

.quality-story p:not(.eyebrow) {
    max-width: 780px;
    margin: 16px 0 0;
    color: var(--color-muted);
    font-size: 17px;
}

.quality-standard-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.quality-standard-media {
    margin: 0;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 18px 52px rgba(8, 47, 95, 0.07);
}

.quality-standard-media img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.quality-standard-media figcaption {
    padding: 22px 24px 24px;
    border-top: 1px solid rgba(8, 47, 95, 0.08);
}

.quality-standard-media span {
    display: block;
    margin-bottom: 8px;
    color: var(--color-secondary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.quality-standard-media strong {
    display: block;
    color: var(--color-primary);
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.3;
}

.quality-standard-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.quality-standard-cards article {
    min-height: 190px;
    padding: 24px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(8, 47, 95, 0.05);
}

.quality-standard-cards article:last-child {
    grid-column: 1 / -1;
    min-height: 0;
}

.quality-standard-cards span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 18px;
    padding: 0 10px;
    color: var(--color-secondary);
    background: rgba(28, 139, 109, 0.08);
    border: 1px solid rgba(28, 139, 109, 0.16);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 800;
}

.quality-standard-cards h3 {
    margin: 0;
    color: var(--color-primary);
    font-size: 21px;
    line-height: 1.3;
}

.quality-standard-cards p {
    margin: 12px 0 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.72;
}

.innovation-roadmap {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 42px;
    align-items: start;
}

.roadmap-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: rgba(8, 47, 95, 0.12);
    border: 1px solid rgba(8, 47, 95, 0.12);
    border-radius: var(--radius);
}

.roadmap-board article {
    min-height: 230px;
    padding: 26px;
    background: var(--color-white);
}

.roadmap-board p {
    margin: 36px 0 0;
    color: var(--color-muted);
}

.research-lab-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 24px;
    align-items: stretch;
}

.research-card {
    padding: 34px;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), #0b4b79);
    border-radius: var(--radius);
    box-shadow: 0 18px 42px rgba(8, 47, 95, 0.18);
}

.research-card h2 {
    color: var(--color-white);
}

.research-card ul {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding-left: 18px;
}

.research-card li {
    color: rgba(255, 255, 255, 0.82);
}

.research-visual {
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.research-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evidence-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.evidence-strip article {
    min-height: 220px;
    padding: 26px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.06);
}

.evidence-strip p {
    margin: 36px 0 0;
    color: var(--color-muted);
}

.tech-application-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tech-application-grid a {
    display: grid;
    min-height: 240px;
    padding: 26px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.06);
    transition: transform var(--transition), box-shadow var(--transition);
}

.tech-application-grid a:hover {
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.tech-application-grid h3 {
    margin-top: 18px;
}

.tech-application-grid p {
    margin: 0;
    color: var(--color-muted);
}

.innovation-page {
    background: #ffffff;
}

.innovation-hero {
    min-height: calc(100svh - 78px);
    background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(135deg, #03182d 0%, #0a314a 48%, #061a33 100%);
    background-size: 56px 56px, 56px 56px, auto;
}

.innovation-hero-video, .innovation-hero-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.innovation-hero-video {
    z-index: 0;
    overflow: hidden;
}

.innovation-hero-video video {
    object-fit: cover;
    object-position: 72% center;
    opacity: 0.78;
    filter: saturate(0.92) contrast(1.08);
}

.innovation-hero .hero-overlay {
    z-index: 2;
    background: radial-gradient(circle at 70% 38%, rgba(53, 199, 214, 0.18), transparent 30%), linear-gradient(90deg, rgba(1, 12, 25, 0.92) 0%, rgba(3, 22, 42, 0.78) 46%, rgba(3, 24, 45, 0.36) 100%), linear-gradient(180deg, rgba(1, 12, 25, 0.48) 0%, rgba(1, 12, 25, 0.12) 48%, rgba(1, 12, 25, 0.88) 100%);
}

.innovation-hero .hero-content {
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.44fr);
    min-height: calc(100svh - 78px);
    gap: 64px;
    align-items: end;
    padding: 118px 0 72px;
}

.innovation-hero-copy {
    align-self: center;
}

.innovation-hero h1 {
    max-width: 980px;
    font-size: clamp(48px, 6.8vw, 92px);
}

.innovation-hero .hero-lead {
    max-width: 760px;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(18px, 1.75vw, 22px);
}

.innovation-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.innovation-hero-grid::before, .innovation-hero-grid::after {
    position: absolute;
    content: "";
}

.innovation-hero-grid::before {
    inset: 46% -8% -24%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.42;
    transform: perspective(1000px) rotateX(62deg);
    transform-origin: top;
}

.innovation-hero-grid::after {
    top: 38%;
    right: -12%;
    width: 56vw;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(53, 199, 214, 0.82), rgba(28, 139, 109, 0.42), transparent);
    transform: rotate(-17deg);
}

.innovation-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.innovation-hero-index {
    display: grid;
    gap: 0;
    width: min(100%, 360px);
    justify-self: end;
    color: rgba(255, 255, 255, 0.78);
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.innovation-hero-index span {
    min-height: 54px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 14px;
    font-weight: 800;
}

.innovation-tech-title h2, .innovation-tech-payoffs-head h2, .innovation-proof-copy h2, .innovation-transfer-content h2, .innovation-collab h2 {
    margin: 0;
    font-size: clamp(34px, 4.3vw, 58px);
    line-height: 1.12;
}

.innovation-tech-lead-intro, .innovation-tech-payoffs-head > p, .innovation-proof-copy p, .innovation-transfer-content > p, .innovation-collab > p {
    margin: 22px 0 0;
    color: var(--color-muted);
    font-size: 17px;
}

.innovation-tech-lead-section, .innovation-tech-payoffs-section {
    background: #f7f7f7;
}

.innovation-tech-lead-section {
    padding-top: 96px;
    padding-bottom: 90px;
}

.innovation-tech-lead {
    display: grid;
    gap: 60px;
}

.innovation-tech-lead-head {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

.innovation-tech-title p {
    margin: 0 0 8px;
    color: #8b949b;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.45;
}

.innovation-tech-title h2 {
    color: #252a31;
    font-weight: 800;
}

.innovation-tech-title-center {
    text-align: center;
}

.innovation-tech-lead-intro {
    margin: 0;
    color: #333943;
    line-height: 1.9;
}

.innovation-tech-lead-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.innovation-tech-lead-list article {
    display: grid;
    min-height: 260px;
    place-items: center;
    align-content: center;
    gap: 26px;
    padding: 36px 24px;
    border-radius: 20px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(8, 47, 95, 0.06);
    box-shadow: 0 18px 48px rgba(8, 47, 95, 0.07);
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.innovation-tech-lead-list article:hover {
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: 0 24px 60px rgba(8, 47, 95, 0.18);
    transform: translateY(-4px);
}

.innovation-tech-lead-list p {
    margin: 0;
    color: #333943;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    transition: color var(--transition);
}

.innovation-tech-lead-list strong {
    color: var(--color-primary);
    font-size: clamp(28px, 3.1vw, 42px);
    font-weight: 800;
    line-height: 1;
    transition: color var(--transition);
}

.innovation-tech-lead-list strong span {
    font-size: clamp(56px, 7vw, 96px);
}

.innovation-tech-lead-list article:hover p, .innovation-tech-lead-list article:hover strong {
    color: #ffffff;
}

.innovation-tech-payoffs-section {
    padding-top: 88px;
}

.innovation-tech-payoffs {
    display: grid;
    gap: 46px;
}

.innovation-tech-payoffs-head {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.innovation-tech-payoffs-head > p {
    margin-top: 12px;
    color: #333943;
    line-height: 1.85;
}

.innovation-tech-payoffs-head > p:first-of-type {
    margin-top: 22px;
}

.innovation-tech-payoffs-visual {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    background: #d9e4ea;
}

.innovation-tech-payoffs-visual img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

/* ---- Patent Carousel (Stacked Cards) ---- */
.patent-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.patent-carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 480px;
}

.patent-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.patent-carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 310px;
    height: 422px;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1), opacity 0.5s ease, clip-path 0.5s cubic-bezier(0.22, 0.68, 0, 1.1), z-index 0s;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    clip-path: inset(0 round var(--radius));
    z-index: 0;
    pointer-events: none;
}

.patent-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(8, 47, 95, 0.13);
}


.patent-carousel-item.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 5;
    pointer-events: auto;
}

/* Left-1 */
.patent-carousel-item.is-prev-1 {
    opacity: 0.8;
    transform: translate(calc(-50% - 280px), -50%) scale(0.88);
    z-index: 4;
    pointer-events: auto;
}

/* Right-1 */
.patent-carousel-item.is-next-1 {
    opacity: 0.8;
    transform: translate(calc(-50% + 280px), -50%) scale(0.88);
    z-index: 4;
    pointer-events: auto;
}

/* Left-2 */
.patent-carousel-item.is-prev-2 {
    opacity: 0.55;
    transform: translate(calc(-50% - 460px), -50%) scale(0.76);
    z-index: 3;
}

/* Right-2 */
.patent-carousel-item.is-next-2 {
    opacity: 0.55;
    transform: translate(calc(-50% + 460px), -50%) scale(0.76);
    z-index: 3;
}

/* Left-3 */
.patent-carousel-item.is-prev-3 {
    opacity: 0.3;
    transform: translate(calc(-50% - 600px), -50%) scale(0.66);
    z-index: 2;
}

/* Right-3 */
.patent-carousel-item.is-next-3 {
    opacity: 0.3;
    transform: translate(calc(-50% + 600px), -50%) scale(0.66);
    z-index: 2;
}

.patent-carousel-prev, .patent-carousel-next {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    color: var(--color-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), box-shadow var(--transition);
    z-index: 10;
}

.patent-carousel-prev:hover, .patent-carousel-next:hover {
    background: var(--color-bg-soft);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.innovation-software {
    display: grid;
    gap: 46px;
}

.innovation-software-head {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.software-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.software-carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 440px;
}

.software-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.software-carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 360px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 0;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1), opacity 0.5s ease, z-index 0s;
}

.software-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(8, 47, 95, 0.13);
}

.software-carousel-item.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 5;
    pointer-events: auto;
}

.software-carousel-item.is-prev-1 {
    opacity: 0.8;
    transform: translate(calc(-50% - 280px), -50%) scale(0.88);
    z-index: 4;
    pointer-events: auto;
}

.software-carousel-item.is-next-1 {
    opacity: 0.8;
    transform: translate(calc(-50% + 280px), -50%) scale(0.88);
    z-index: 4;
    pointer-events: auto;
}

.software-carousel-item.is-prev-2 {
    opacity: 0.55;
    transform: translate(calc(-50% - 460px), -50%) scale(0.76);
    z-index: 3;
}

.software-carousel-item.is-next-2 {
    opacity: 0.55;
    transform: translate(calc(-50% + 460px), -50%) scale(0.76);
    z-index: 3;
}

.software-carousel-item.is-prev-3 {
    opacity: 0.3;
    transform: translate(calc(-50% - 600px), -50%) scale(0.66);
    z-index: 2;
}

.software-carousel-item.is-next-3 {
    opacity: 0.3;
    transform: translate(calc(-50% + 600px), -50%) scale(0.66);
    z-index: 2;
}

.software-carousel-prev, .software-carousel-next {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    color: var(--color-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), box-shadow var(--transition);
    z-index: 10;
}

.software-carousel-prev:hover, .software-carousel-next:hover {
    background: var(--color-bg-soft);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.innovation-store {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: min(calc(100% - 56px), 95.5%) !important;
}

.innovation-store-head {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.innovation-store-head > p {
    margin-top: 12px;
    color: #333943;
    line-height: 1.85;
}

.store-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.store-carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 460px;
}

.store-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.store-carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 380px;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1), opacity 0.5s ease, z-index 0s;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 0;
    pointer-events: none;
}

.store-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(8, 47, 95, 0.18);
}

.store-carousel-item.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 5;
    pointer-events: auto;
}

.store-carousel-item.is-prev-1 {
    opacity: 0.85;
    transform: translate(calc(-50% - 340px), -50%) scale(0.88);
    clip-path: inset(0 220px 0 0 round var(--radius));
    z-index: 4;
    pointer-events: auto;
}

.store-carousel-item.is-next-1 {
    opacity: 0.85;
    transform: translate(calc(-50% + 340px), -50%) scale(0.88);
    clip-path: inset(0 0 0 220px round var(--radius));
    z-index: 4;
    pointer-events: auto;
}

.store-carousel-item.is-prev-2 {
    opacity: 0.6;
    transform: translate(calc(-50% - 560px), -50%) scale(0.76);
    z-index: 3;
}

.store-carousel-item.is-next-2 {
    opacity: 0.6;
    transform: translate(calc(-50% + 560px), -50%) scale(0.76);
    z-index: 3;
}

.store-carousel-item.is-prev-3 {
    opacity: 0.32;
    transform: translate(calc(-50% - 720px), -50%) scale(0.66);
    z-index: 2;
}

.store-carousel-item.is-next-3 {
    opacity: 0.32;
    transform: translate(calc(-50% + 720px), -50%) scale(0.66);
    z-index: 2;
}

.store-carousel-prev, .store-carousel-next {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    color: var(--color-primary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), box-shadow var(--transition);
    z-index: 10;
}

.store-carousel-prev:hover, .store-carousel-next:hover {
    background: var(--color-bg-soft);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

@media (max-width: 960px) {
    .store-carousel-viewport {
        height: 360px;
    }

    .store-carousel-item {
        width: 420px;
        height: 290px;
    }

    .store-carousel-item.is-prev-1 {
        transform: translate(calc(-50% - 250px), -50%) scale(0.88);
        clip-path: inset(0 174px 0 0 round var(--radius));
    }

    .store-carousel-item.is-next-1 {
        transform: translate(calc(-50% + 250px), -50%) scale(0.88);
        clip-path: inset(0 0 0 174px round var(--radius));
    }

    .store-carousel-item.is-prev-2, .store-carousel-item.is-next-2 {
        display: none;
    }

    .store-carousel-item.is-prev-3, .store-carousel-item.is-next-3 {
        display: none;
    }
}

@media (max-width: 640px) {
    .store-carousel-viewport {
        height: 280px;
    }

    .store-carousel-item {
        width: 280px;
        height: 200px;
    }

    .store-carousel-item.is-prev-1 {
        transform: translate(calc(-50% - 170px), -50%) scale(0.86);
        clip-path: inset(0 115px 0 0 round var(--radius));
    }

    .store-carousel-item.is-next-1 {
        transform: translate(calc(-50% + 170px), -50%) scale(0.86);
        clip-path: inset(0 0 0 115px round var(--radius));
    }
}

.innovation-tech-payoffs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    min-height: 102px;
    margin-top: -28px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.innovation-tech-payoffs-item {
    position: relative;
    width: 120px;
    min-height: 55px;
    margin: 18px;
    padding: 0 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/assets/img/zhanyanet/left-icon.png) no-repeat , url(/assets/img/zhanyanet/right-icon.png) no-repeat;
    background-size: auto 80% , auto 80%;
    background-position: left top, right top;
}

.innovation-tech-payoffs-item::before {
    left: 0;
    border-left: 2px solid rgba(0, 98, 181, 0.26);
}

.innovation-tech-payoffs-item::after {
    right: 0;
    border-right: 2px solid rgba(0, 98, 181, 0.26);
}

.innovation-tech-payoffs-num {
    margin: 0 0 5px;
    color: #0062b5;
    font-size: clamp(25px, 2.2vw, 31px);
    font-weight: 700;
    line-height: 1.4;
}

.innovation-tech-payoffs-icon {
    width: 80px;
    /* height: 50px; */
    margin: 0 auto;
    object-fit: contain;
}

.innovation-transfer-list span {
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.innovation-tech-payoffs-name {
    margin: 0;
    color: #0062b5;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
}

.innovation-proof-section {
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(5, 25, 48, 0.98), rgba(4, 56, 71, 0.95)), #061a33;
}

.innovation-proof {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: 56px;
    align-items: start;
}

.innovation-proof-copy {
    position: sticky;
    top: 112px;
}

.innovation-proof-copy h2 {
    color: var(--color-white);
}

.innovation-proof-copy p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.68);
}

.innovation-proof-ledger {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.innovation-proof-ledger article {
    display: grid;
    grid-template-columns: 140px minmax(180px, 0.55fr) minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.innovation-proof-ledger span {
    color: var(--color-accent);
    font-size: clamp(34px, 4vw, 42px);
    font-weight: 900;
    line-height: 1;
}

.innovation-proof-ledger strong {
    color: var(--color-white);
    font-size: 19px;
}

.innovation-proof-ledger p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

.innovation-transfer-section {
    background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
}

.innovation-transfer {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.innovation-transfer-visual {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 28px 72px rgba(8, 47, 95, 0.16);
}

.innovation-transfer-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 26, 51, 0.06), rgba(6, 26, 51, 0.42)), linear-gradient(90deg, rgba(8, 47, 95, 0.34), transparent);
    content: "";
}

.innovation-transfer-visual img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
}

.innovation-transfer-list {
    display: grid;
    gap: 0;
    margin-top: 34px;
    border-top: 1px solid rgba(8, 47, 95, 0.14);
}

.innovation-transfer-list a {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    min-height: 76px;
    border-bottom: 1px solid rgba(8, 47, 95, 0.12);
    transition: color var(--transition), transform var(--transition);
}

.innovation-transfer-list a:hover {
    color: var(--color-secondary);
    transform: translateX(5px);
}

.innovation-transfer-list strong {
    font-size: 20px;
}

.innovation-collab-section {
    padding: 0 0 96px;
    background: #ffffff;
}

.innovation-collab {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(280px, 0.72fr) auto;
    gap: 40px;
    align-items: center;
    padding: 46px 0;
    border-top: 1px solid rgba(8, 47, 95, 0.14);
    border-bottom: 1px solid rgba(8, 47, 95, 0.14);
}

.innovation-collab h2 {
    font-size: clamp(30px, 3.8vw, 48px);
}

.innovation-collab > p {
    margin: 0;
}

.innovation-collab .button {
    white-space: nowrap;
}

.text-nowrap {
    white-space: nowrap;
}

.page-section.contact-desk-section {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #fff;
}

.contact-desk-section::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56vw;
    pointer-events: none;
    content: "";
    background: radial-gradient(circle at 78% 4%, rgba(204, 213, 255, 0.68), transparent 34%), radial-gradient(circle at 48% 46%, rgba(226, 240, 255, 0.82), transparent 42%), linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(241, 247, 255, 0.86) 54%, rgba(232, 240, 255, 0.92) 100%);
}

.container.contact-desk {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(360px, 0.88fr) minmax(680px, 1.28fr);
    align-items: start;
    gap: clamp(72px, 10vw, 210px);
    width: min(calc(100% - 72px), var(--container-width));
    min-height: 545px;
    padding: 118px 0 142px;
}

.contact-desk::after {
    position: absolute;
    right: 50%;
    bottom: 0;
    z-index: -1;
    width: 100vw;
    height: 164px;
    pointer-events: none;
    content: "";
    background: repeating-linear-gradient( 90deg, rgba(154, 170, 196, 0.3) 0 2px, transparent 2px 17px );
    opacity: 0.8;
    transform: translateX(50%);
    -webkit-mask: radial-gradient(ellipse 430px 156px at 24% 100%, #000 0 57%, transparent 58%), radial-gradient(ellipse 360px 120px at 5% 100%, #000 0 43%, transparent 44%), linear-gradient(#000 0 0) left bottom / 100% 30px no-repeat;
    mask: radial-gradient(ellipse 430px 156px at 24% 100%, #000 0 57%, transparent 58%), radial-gradient(ellipse 360px 120px at 5% 100%, #000 0 43%, transparent 44%), linear-gradient(#000 0 0) left bottom / 100% 30px no-repeat;
}

.contact-desk-left {
    min-width: 0;
}

.contact-desk-text {
    max-width: 620px;
}

.contact-desk-text h2 {
    margin: 0 0 18px;
    color: #05070b;
    font-size: 44px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0;
}

.contact-desk-text p {
    max-width: 620px;
    margin: 0;
    color: #7e8394;
    font-size: 17px;
    line-height: 1.72;
}

.contact-desk-text p + h2 {
    margin-top: 36px;
}

.contact-building-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    color: #4b4ee8;
}

.contact-building-icon > .bi {
    font-size: 15px;
    line-height: 1;
}

.contact-desk-right {
    min-width: 0;
    padding-top: 8px;
}

.contact-desk-item {
    margin: 0;
    padding: 0 0 42px;
    border-bottom: 1px dashed rgba(126, 135, 154, 0.24);
}

.contact-desk-item + .contact-desk-item {
    padding-top: 38px;
}

.contact-desk-item:last-child {
    border-bottom: none;
}

.contact-desk-item-title p {
    margin: 0 0 24px;
    color: #7e8394;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.35;
}

.contact-desk-item-info {
    display: grid;
    grid-template-columns: minmax(260px, 0.92fr) minmax(320px, 1.08fr);
    gap: 24px clamp(44px, 5vw, 78px);
    align-items: center;
}

.contact-desk-field {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 16px;
}

.contact-icon {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #2f3bd4;
    background: rgba(239, 241, 255, 0.98);
    border-radius: 50%;
}

.contact-icon > .bi {
    font-size: 20px;
    line-height: 1;
}

.contact-desk-field p {
    min-width: 0;
    margin: 0;
    color: #05070b;
    font-size: clamp(24px, 1.58vw, 31px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0;
    white-space: nowrap;
}

.contact-desk-field a {
    color: inherit;
    text-decoration: none;
}

.contact-desk-note {
    margin-left: 4px;
    color: #4f5869;
    font-size: 0.58em;
    font-weight: 600;
    vertical-align: 0.08em;
}

.contact-map-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(237, 243, 247, 0.78), rgba(255, 255, 255, 0.96)), var(--color-bg-soft);
}

.contact-map-section::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, rgba(7, 52, 93, 0.06) 1px, transparent 1px), linear-gradient(0deg, rgba(7, 52, 93, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
}

.contact-map-layout {
    width: 100% !important;
    position: relative;
    z-index: 1;
}

.contact-map-heading {
    max-width: 820px;
}

.contact-map-heading p:not(.eyebrow) {
    max-width: 720px;
}

.contact-map-shell {
    display: block;
    width: 100%;
    height: 100%;
}

.contact-map-embed {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    overflow: hidden;
}

.contact-map-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    border: 0;
}

.address-stack {
    display: grid;
    gap: 14px;
}

.address-stack article {
    padding: 24px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.06);
}

.address-stack span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.address-stack p {
    margin: 14px 0 0;
    color: var(--color-muted);
}

.about-statement-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.about-statement-copy {
    max-width: 900px;
}

.about-statement-copy p {
    max-width: 820px;
    font-size: 19px;
    line-height: 1.9;
}

.about-number-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--color-white);
    border-top: 1px solid rgba(8, 47, 95, 0.1);
    border-left: 1px solid rgba(8, 47, 95, 0.1);
}

.about-number-grid article {
    min-height: 260px;
    padding: 34px 28px;
    border-right: 1px solid rgba(8, 47, 95, 0.1);
    border-bottom: 1px solid rgba(8, 47, 95, 0.1);
}

.about-number-grid strong {
    display: block;
    color: var(--color-primary);
    font-size: clamp(34px, 4.8vw, 48px);
    font-weight: 900;
    line-height: 1;
}

.about-number-grid span {
    display: block;
    margin-top: 18px;
    color: var(--color-secondary);
    font-weight: 900;
}

.about-number-grid p {
    margin: 18px 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

.about-capability {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: 56px;
    align-items: center;
}

.about-capability-media {
    min-height: 620px;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.about-capability-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capability-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.capability-ledger article {
    padding: 24px;
    background: linear-gradient(180deg, #ffffff, #f8fbfe);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
}

.capability-ledger h3 {
    margin-top: 28px;
    font-size: 21px;
}

.about-band {
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(6, 26, 51, 0.96), rgba(8, 47, 95, 0.92)), url("../images/hero-industrial-treatment.png") center/cover;
}

.about-band h2, .about-band .eyebrow {
    color: var(--color-white);
}

.about-band .eyebrow {
    color: var(--color-accent);
}

.about-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 48px;
    align-items: center;
}

.about-link-panels {
    display: grid;
    gap: 16px;
}

.about-link-panels a {
    display: grid;
    gap: 10px;
    padding: 26px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    transition: transform var(--transition), background var(--transition);
}

.about-link-panels a:hover {
    background: rgba(255, 255, 255, 0.13);
    transform: translateY(-4px);
}

.about-link-panels span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
}

.about-link-panels strong {
    color: var(--color-white);
    font-size: 22px;
    line-height: 1.35;
}

.milestone-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(8, 47, 95, 0.12);
}

.milestone-rail article {
    position: relative;
    padding: 34px 26px 10px;
    border-right: 1px solid rgba(8, 47, 95, 0.1);
}

.milestone-rail article::before {
    position: absolute;
    top: -6px;
    left: 26px;
    width: 12px;
    height: 12px;
    background: var(--color-accent);
    border-radius: 50%;
    content: "";
}

.milestone-rail time {
    color: var(--color-primary);
    font-size: 30px;
    font-weight: 900;
}

.milestone-rail h3 {
    margin: 16px 0 10px;
    font-size: 21px;
}

.milestone-rail p {
    margin: 0;
    color: var(--color-muted);
}

.about-portal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.about-portal {
    min-height: 280px;
    padding: 30px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 16px 44px rgba(8, 47, 95, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

.about-portal:hover {
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.about-portal span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
}

.about-portal h3 {
    margin: 58px 0 12px;
    font-size: 25px;
    line-height: 1.25;
}

.about-portal p {
    margin: 0;
    color: var(--color-muted);
}

.business-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(540px, 1.18fr);
    gap: 48px;
    align-items: start;
}

.solution-console {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: rgba(8, 47, 95, 0.12);
    border: 1px solid rgba(8, 47, 95, 0.12);
    border-radius: var(--radius);
    box-shadow: 0 18px 48px rgba(8, 47, 95, 0.1);
}

.solution-console article {
    min-height: 250px;
    padding: 30px;
    background: linear-gradient(180deg, #ffffff, #f7fbfe);
}

.business-showcase {
    display: grid;
    gap: 22px;
}

.business-showcase-card {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1fr);
    min-height: 390px;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(8, 47, 95, 0.1);
    transition: transform var(--transition), box-shadow var(--transition);
}

.business-showcase-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
}

.business-showcase-card:nth-child(even) img {
    order: 2;
}

.business-showcase-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.business-showcase-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-showcase-card div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 60px);
}

.business-showcase-card small {
    color: var(--color-accent);
    font-weight: 900;
    letter-spacing: 0.12em;
}

.business-showcase-card h2 {
    margin: 16px 0;
    color: var(--color-text);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.1;
}

.business-showcase-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 17px;
}

.business-showcase-card strong {
    display: inline-flex;
    width: max-content;
    margin-top: 26px;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
}

.scene-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: rgba(8, 47, 95, 0.12);
    border: 1px solid rgba(8, 47, 95, 0.12);
    border-radius: var(--radius);
}

.scene-map article {
    min-height: 300px;
    padding: 30px;
    background: var(--color-white);
}

.scene-map span, .value-matrix span {
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 900;
}

.scene-map h3 {
    margin: 46px 0 12px;
    font-size: 23px;
    line-height: 1.28;
}

.scene-map p {
    margin: 0;
    color: var(--color-muted);
}

.scene-map a {
    display: inline-flex;
    margin-top: 22px;
    padding-bottom: 4px;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-secondary);
    font-weight: 800;
}

.value-matrix {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.value-matrix article {
    min-height: 250px;
    padding: 26px;
    background: var(--color-white);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(8, 47, 95, 0.06);
}

.value-matrix p {
    margin-top: 56px;
}

@media (max-width: 1180px) {
    .header-actions .phone-link {
        display: none;
    }

    .main-nav li > a {
        padding: 0 9px;
        font-size: 14px;
    }

    .solution-strip, .stats-grid, .case-grid, .about-number-grid, .value-matrix {
        grid-template-columns: repeat(2, 1fr);
    }

    .case-feature, .about-capability, .about-band-grid, .business-command-grid, .base-overview, .innovation-roadmap, .research-lab-grid, .contact-map-shell {
        grid-template-columns: 1fr;
    }

    .case-wall, .case-wall-compact, .scene-map, .production-rail, .roadmap-board, .evidence-strip, .tech-application-grid, .innovation-tech-grid, .innovation-standard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .production-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .base-zone-track {
        grid-auto-columns: calc((100% - 18px) / 2);
    }

    .business-showcase-card, .business-showcase-card:nth-child(even) {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .business-showcase-card:nth-child(even) img {
        order: 0;
    }

    .contact-map-overlay {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .container.contact-desk {
        grid-template-columns: 1fr;
        gap: 48px;
        width: min(calc(100% - 72px), var(--container-width));
        min-height: 0;
        padding: 86px 0 118px;
    }

    .contact-desk-section::before {
        width: 100%;
        opacity: 0.78;
    }

    .contact-desk-item-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solution-strip article:nth-child(2) {
        border-right: 0;
    }

    .solution-strip article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-line);
    }

    .stats-grid article {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .stats-grid article:nth-child(2n) {
        border-right: 0;
    }

    .business-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .header-inner {
        height: 68px;
    }

    .menu-toggle {
        display: inline-grid;
        order: 3;
    }

    .header-actions {
        margin-left: auto;
    }

    .main-nav {
        position: fixed;
        inset: 68px 0 auto;
        max-height: calc(100svh - 68px);
        padding: 18px 24px 28px;
        overflow: auto;
        color: var(--color-text);
        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--color-line);
        box-shadow: 0 18px 44px rgba(8, 47, 95, 0.12);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity var(--transition), transform var(--transition);
    }

    .menu-open .main-nav {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .main-nav ul {
        display: grid;
        justify-content: stretch;
    }

    .main-nav li > a {
        min-height: 46px;
        padding: 0;
        font-size: 17px;
    }

    .dropdown {
        position: static;
        min-width: 0;
        padding: 0 0 12px 16px;
        color: var(--color-muted);
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .dropdown a {
        padding: 6px 0;
    }

    .intro-grid, .manufacturing-grid, .innovation-grid, .news-grid, .news-overview, .news-featured-article, .news-detail-layout, .culture-grid, .section-heading.split, .about-statement-grid, .business-showcase-card, .business-showcase-card:nth-child(even), .base-overview, .production-focus, .quality-standard-layout, .innovation-roadmap, .research-lab-grid {
        grid-template-columns: 1fr;
    }

    .innovation-growth {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .innovation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .innovation-tech-card-large {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 480px;
    }

    .innovation-milestone {
        grid-template-columns: 1fr;
    }

    .news-card-grid, .news-related-grid, .news-keypoints {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .news-archive-panel {
        position: static;
    }

    .contact-map-stage {
        min-height: auto;
    }

    .contact-map-overlay {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .case-tile-large, .case-tile-wide {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 360px;
    }

    .milestone-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 28px;
    }

    .manufacturing-visual {
        height: 420px;
    }

    .production-focus img {
        min-height: 320px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .container, .header-inner, .hero-content {
        width: min(calc(100% - 32px), var(--container-width));
    }

    .brand-mark {
        width: 42px;
        height: 42px;
    }

    .brand-text strong {
        font-size: 15px;
    }

    .brand-text em, .language-link {
        display: none;
    }

    .icon-button {
        width: 34px;
        height: 34px;
    }

    .hero {
        min-height: 760px;
    }

    .hero-content {
        min-height: 760px;
        padding-top: 108px;
    }

    .hero h1 {
        font-size: clamp(40px, 13vw, 58px);
    }

    .hero-lead {
        font-size: 17px;
    }

    .hero-tags span {
        font-size: 13px;
    }

    .hero-control {
        right: 16px;
        bottom: 24px;
    }

    .section {
        padding: 64px 0;
    }

    .section-intro {
        padding: 58px 0;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .solution-strip, .business-grid, .stats-grid, .case-grid, .case-wall, .case-wall-compact, .case-value-row, .about-number-grid, .capability-ledger, .milestone-rail, .about-portal-grid, .solution-console, .scene-map, .value-matrix, .partner-grid, .footer-grid {
        grid-template-columns: 1fr;
    }

    .case-feature {
        min-height: 0;
    }

    .case-feature-media {
        min-height: 280px;
    }

    .case-feature-content {
        padding: 26px;
    }

    .case-tile, .case-tile-large, .case-tile-wide {
        min-height: 360px;
    }

    .case-tile div {
        padding: 22px;
    }

    .about-statement-copy p {
        font-size: 17px;
    }

    .about-capability-media {
        min-height: 330px;
    }

    .about-link-panels strong {
        font-size: 19px;
    }

    .business-showcase-card {
        min-height: 0;
    }

    .business-showcase-card img {
        aspect-ratio: 16 / 10;
    }

    .base-facts, .about-number-grid, .capability-ledger, .evidence-strip, .value-matrix, .tech-application-grid, .scene-map, .innovation-tech-grid, .innovation-standard-grid {
        grid-template-columns: 1fr;
    }

    .production-rail {
        grid-template-columns: 1fr;
    }

    .base-zone-track {
        grid-auto-columns: 100%;
    }

    .base-zone-grid {
        padding: 0 44px;
    }

    .base-zone-arrow {
        width: 40px;
        height: 40px;
        transform: translateX(-42%);
    }

    .base-zone-arrow-next {
        transform: translateX(42%);
    }

    .base-zone-arrow:hover {
        transform: translate(-42%, -2px);
    }

    .base-zone-arrow-next:hover {
        transform: translate(42%, -2px);
    }

    .production-rail::before {
        content: none;
    }

    .production-rail article {
        min-height: 0;
        padding: 24px;
    }

    .production-rail article::before {
        margin-bottom: 18px;
    }

    .production-focus img {
        min-height: 280px;
    }

    .production-focus ul, .quality-standard-cards {
        grid-template-columns: 1fr;
    }

    .quality-standard-cards article:last-child {
        grid-column: auto;
    }

    .container.contact-desk {
        gap: 38px;
        width: min(calc(100% - 32px), var(--container-width));
        padding: 62px 0 96px;
    }

    .contact-desk-text h2 {
        margin-bottom: 24px;
        font-size: 34px;
    }

    .contact-desk-text p {
        font-size: 18px;
        line-height: 1.68;
    }

    .contact-building-icon {
        margin-top: 24px;
    }

    .contact-desk-item {
        padding-bottom: 30px;
    }

    .contact-desk-item + .contact-desk-item {
        padding-top: 30px;
    }

    .contact-desk-item-title p {
        margin-bottom: 18px;
        font-size: 17px;
    }

    .contact-desk-item-info {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-icon {
        width: 38px;
        height: 38px;
    }

    .contact-desk-field {
        gap: 12px;
    }

    .contact-desk-field p {
        font-size: clamp(20px, 6vw, 25px);
        white-space: normal;
    }

    .contact-map-overlay {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .contact-side-stack {
        gap: 14px;
    }

    .contact-map-canvas {
        background-size: auto, 42px 42px, 42px 42px;
    }

    .contact-map-embed, .contact-map-embed iframe {
        min-height: 420px;
    }

    .solution-strip article, .solution-strip article:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }

    .solution-strip article:last-child {
        border-bottom: 0;
    }

    .image-card {
        min-height: 390px;
    }

    .stats-grid article {
        min-height: 0;
        border-right: 0;
    }

    .manufacturing-visual {
        height: 340px;
    }

    .news-feature h3 {
        font-size: 24px;
    }

    .news-overview {
        gap: 18px;
    }

    .news-featured-media {
        min-height: 300px;
    }

    .news-featured-content, .news-card-body, .news-archive-panel {
        padding: 22px;
    }

    .news-featured-content h2, .news-article-head h2 {
        font-size: 28px;
    }

    .news-card-grid, .news-related-grid, .news-keypoints {
        grid-template-columns: 1fr;
    }

    .news-article-nav {
        flex-direction: column;
    }

    .news-article-nav a, .news-article-nav span {
        width: 100%;
        justify-content: center;
    }

    .timeline article {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .footer-bottom .container {
        flex-direction: column;
    }

    .search-panel-dialog {
        padding: 24px 20px;
    }

    .search-form {
        display: grid;
    }

    .search-form button {
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.base-about-section {
    --base-blue: #0062b5;
    --base-blue-dark: #004a8f;
    --base-ink: #171b22;
    --base-muted: #666f7c;
    --base-line: #e7ebf0;
    --base-soft: #f7f8fa;
    padding: clamp(58px, 7vw, 92px) 0 0;
    color: var(--base-ink);
    background: #ffffff;
}

.base-about-copy {
    position: relative;
    min-width: 0;
    top: -356px;
    position: relative;
    color: var(--base-ink);
}

.base-about-copy h2 {
    margin: 10px 0 54px;
    color: rgb(28, 80, 156);
    font-size: clamp(34px, 3.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
}

.base-about-copy p {
    margin: 0 0 22px;
    color: #1f2733;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.72;
    text-align: justify;
}

.base-about-copy::after {
    display: none;
    content: "";
}

.base-about-inner {
    position: relative;
    z-index: 1;
    width: 100% !important;
    margin: 280px auto 0 auto;
    background: url('/assets/img/zhanyanet/BX2A1834.jpg') bottom no-repeat;
    background-size: 100%;
}

.base-about-grid {
    width: min(calc(100% - 56px), 1280px);
    margin: 0 auto;
    display: grid;
    height: 550px;
    grid-template-columns: minmax(520px, 0.95fr) minmax(620px, 1fr);
    gap: clamp(56px, 9vw, 180px);
    align-items: start;
}

.base-about-kicker {
    display: grid;
    justify-items: center;
    margin-bottom: 58px;
    text-align: center;
}

.base-about-kicker span {
    color: var(--base-blue);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.base-about-kicker strong {
    position: relative;
    margin-top: 4px;
    color: rgba(23, 27, 34, 0.08);
    font-size: clamp(34px, 7vw, 92px);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.base-about-kicker strong::after {
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 48px;
    height: 4px;
    background: var(--base-blue);
    content: "";
    transform: translateX(-50%) skewX(-24deg);
}

.base-company-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
}

.base-company-copy {
    position: relative;
    min-width: 0;
}

.base-brand-mark {
    display: grid;
    width: min(100%, 760px);
    color: rgb(28, 80, 156);
    line-height: 1;
    top: -330px;
    position: relative;
    font-family: "en_b", "Arial Black", "Microsoft YaHei", sans-serif;
}

.base-brand-mark span, .base-brand-mark em {
    display: block;
    width: max-content;
    margin: 0;
    padding: 0;
    color: rgb(28, 80, 156);
    font-family: "en_b", "Arial Black", "Microsoft YaHei", sans-serif;
    font-size: clamp(96px, 9vw, 90px);
    font-style: normal;
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: normal;
    text-align: left;
    position: relative;
}

.base-brand-mark strong {
    display: block;
    margin: 0;
    padding: 0;
    color: rgb(28, 80, 156);
    font-family: "en_b", "Arial Black", "Microsoft YaHei", sans-serif;
    font-size: clamp(96px, 9vw, 90px);
    font-style: normal;
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: normal;
    text-align: left;
    position: relative;
}

.base-brand-mark em {
    left: clamp(134px, 15vw, 260px);
}

.base-brand-mark strong {
    left: clamp(116px, 12vw, 220px);
}

.base-company-copy h2, .base-production-copy h2 {
    margin: 0;
    color: #1b2028;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.2;
}

.base-company-copy p, .base-production-copy p {
    margin: 18px 0 0;
    color: var(--base-muted);
    font-size: 17px;
    line-height: 1.92;
}

.base-company-media {
    position: relative;
    margin: 0;
    min-width: 0;
}

.base-company-media::before {
    position: absolute;
    inset: 28px -24px -28px 24px;
    background: var(--base-blue);
    content: "";
    opacity: 0.92;
    transform: skewX(-7deg);
}

.base-company-media::after {
    position: absolute;
    top: -24px;
    right: 22px;
    width: 96px;
    height: 96px;
    border-top: 12px solid var(--base-blue);
    border-right: 12px solid var(--base-blue);
    content: "";
}

.base-company-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1.16 / 1;
    object-fit: cover;
    box-shadow: 0 24px 60px rgba(23, 27, 34, 0.18);
    transition: transform 420ms ease;
}

.base-company-media:hover img, .base-production-media:hover img {
    transform: translateY(-4px) scale(1.015);
}

.base-application-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.75fr);
    gap: 34px;
    align-items: center;
    min-height: 440px;
    margin-top: 110px;
    padding: clamp(34px, 5vw, 70px);
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(16, 19, 26, 0.88), rgba(16, 19, 26, 0.56)), url("https://oss-ccn-resource.oss-cn-hangzhou.aliyuncs.com/zhanji/business-manufacturing-base.png") center / cover;
}

.base-application-panel::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.16) 48%, transparent 54%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 18px);
    content: "";
    mix-blend-mode: screen;
    pointer-events: none;
    animation: base-light-sweep 7s ease-in-out infinite;
}

.base-application-copy, .base-application-en {
    position: relative;
    z-index: 1;
}

.base-application-copy span, .base-production-copy span, .base-history-title span, .base-responsibility span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--base-blue);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.base-application-copy span::before, .base-production-copy span::before, .base-history-title span::before, .base-responsibility span::before {
    width: 34px;
    height: 3px;
    background: currentColor;
    content: "";
}

.base-application-copy h3 {
    max-width: 760px;
    margin: 14px 0 0;
    font-size: clamp(30px, 4vw, 58px);
    font-weight: 800;
    line-height: 1.22;
}

.base-application-copy p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.base-application-en {
    display: grid;
    justify-items: start;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.base-application-en span, .base-application-en em {
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.base-application-en strong {
    margin: 18px 0;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.24;
}

.base-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 auto;
    width: min(calc(100% - 56px), 1100px);
    transform: translateY(-50%);
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(23, 27, 34, 0.12);
}

.base-stat-row article {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 164px;
    padding: 28px 18px;
    overflow: hidden;
    border-right: 1px solid var(--base-line);
}

.base-stat-row article:last-child {
    border-right: 0;
}

.base-stat-row article::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(0, 98, 181, 0.08), transparent);
    content: "";
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity 360ms ease, transform 700ms ease;
}

.base-stat-row article:hover::before {
    opacity: 1;
    transform: translateX(100%);
}

.base-stat-row strong {
    color: var(--base-blue);
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 900;
    line-height: 1;
}

.base-stat-row sup {
    top: -0.7em;
    margin-left: 2px;
    color: #202630;
    font-size: 18px;
}

.base-stat-row span {
    margin-top: 16px;
    color: #343b46;
    font-size: 17px;
    font-weight: 700;
}

.base-production-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr);
    gap: clamp(34px, 5vw, 72px);
    align-items: center;
    margin-top: 14px;
    padding: 34px 0 82px;
}

.base-production-copy {
    min-width: 0;
}

.base-production-copy h2 {
    margin-top: 14px;
}

.base-production-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 18px;
    align-items: end;
    min-width: 0;
}

.base-production-media img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 24px 60px rgba(23, 27, 34, 0.16);
    transition: transform 420ms ease;
}

.base-production-media img:nth-child(2) {
    height: 330px;
    transform: translateY(42px);
}

.base-production-media:hover img:nth-child(2) {
    transform: translateY(34px) scale(1.015);
}

.base-history {
    padding: 0;
    background: var(--base-soft);
    margin-top: clamp(34px, 5vw, 64px);
}

.base-history-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}

.base-history-title h3 {
    margin: 0;
    color: #1b2028;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.1;
}

.base-history-rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 1px;
    overflow-x: auto;
    background: #dfe4ea;
    scroll-snap-type: x proximity;
}

.base-history-rail article {
    position: relative;
    min-height: 190px;
    padding: 26px 22px;
    overflow: hidden;
    background: #ffffff;
    scroll-snap-align: start;
}

.base-history-rail article::before {
    position: absolute;
    top: 60px;
    left: 22px;
    width: 10px;
    height: 10px;
    background: var(--base-blue);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 8px rgba(0, 98, 181, 0.12);
}

.base-history-rail time {
    display: block;
    margin-bottom: 44px;
    color: var(--base-blue);
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
}

.base-history-rail p {
    min-height: 92px;
    margin: 0;
    color: #303743;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}

.base-history-rail p span {
    display: block;
}

.base-history-rail img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 176px;
    object-fit: cover;
    transition: transform 420ms ease, filter 420ms ease;
}

.base-history-rail article:hover img {
    filter: saturate(1.08);
    transform: scale(1.06);
}

.base-responsibility {
    position: relative;
    min-height: 100svh;
    margin-top: 86px;
    padding: clamp(34px, 5vw, 74px);
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient(90deg, rgba(9, 13, 20, 0.86), rgba(9, 13, 20, 0.34)), url("https://oss-ccn-resource.oss-cn-hangzhou.aliyuncs.com/zhanji/hero-industrial-treatment.png") center / cover;
}

.base-responsibility::before {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 24px);
    content: "";
}

.base-responsibility > div {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.base-responsibility h2 {
    margin-top: 14px;
    color: #ffffff;
}

.base-responsibility p {
    color: rgba(255, 255, 255, 0.8);
}

.base-about-footer {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding-top: 70px;
    text-align: center;
}

.base-about-footer span {
    color: rgba(23, 27, 34, 0.12);
    font-size: clamp(36px, 8vw, 106px);
    font-weight: 900;
    line-height: 1;
}

.base-about-footer strong {
    color: #202630;
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.25;
}

@keyframes base-dial-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes base-light-sweep {
    0%, 34% {
        transform: translateX(-24%);
    }

    64%, 100% {
        transform: translateX(24%);
    }
}

@media (max-width: 1180px) {
    .base-about-grid, .base-application-panel, .base-production-grid {
        grid-template-columns: 1fr;
    }

    .base-production-grid {
        margin-top: 0;
    }

    .base-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        transform: translateY(-28px);
    }

    .base-stat-row article:nth-child(2) {
        border-right: 0;
    }

    .base-stat-row article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--base-line);
    }
}

@media (max-width: 760px) {
    .base-about-inner {
        width: min(calc(100% - 32px), 1280px) !important;
        margin: 36px auto 0;
        padding-bottom: 104px;
        background-size: 100% auto;
    }

    .base-about-grid {
        width: 100%;
        height: auto;
        gap: 18px;
    }

    .base-about-copy {
        top: 0;
        padding: 0;
        background-size: auto;
    }

    .base-about-copy h2 {
        margin: 0 0 18px;
        font-size: 26px;
        line-height: 1.28;
    }

    .base-about-kicker {
        margin-bottom: 42px;
    }

    .base-brand-mark {
        width: min(100%, 420px);
        top: 0;
        margin-bottom: 24px;
    }

    .base-brand-mark span {
        font-size: clamp(62px, 17vw, 96px);
    }

    .base-brand-mark em {
        left: clamp(76px, 19vw, 110px);
        font-size: clamp(62px, 17vw, 96px);
    }

    .base-brand-mark strong {
        left: clamp(64px, 16vw, 96px);
        font-size: clamp(62px, 17vw, 96px);
    }

    .base-about-copy p, .base-production-copy p, .base-responsibility p, .base-application-copy p {
        font-size: 16px;
        line-height: 1.82;
    }

    .base-about-media::before {
        inset: 18px -10px -18px 16px;
    }

    .base-about-media::after {
        top: -16px;
        right: 16px;
        width: 68px;
        height: 68px;
        border-width: 8px;
    }

    .base-application-panel {
        min-height: 0;
        margin-top: 76px;
        padding: 30px 22px;
    }

    .base-application-en {
        padding: 22px;
    }

    .base-stat-row {
        width: 100%;
        grid-template-columns: 1fr;
        transform: none;
    }

    .base-stat-row article {
        min-height: 138px;
        border-right: 0;
        border-bottom: 1px solid var(--base-line);
    }

    .base-stat-row article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--base-line);
    }

    .base-stat-row article:last-child {
        border-bottom: 0;
    }

    .base-production-grid {
        padding: 62px 0 70px;
    }

    .base-production-media {
        grid-template-columns: 1fr;
    }

    .base-production-media img, .base-production-media img:nth-child(2) {
        height: auto;
        min-height: 260px;
        transform: none;
    }

    .base-production-media:hover img:nth-child(2) {
        transform: scale(1.015);
    }

    .base-history {
        padding: 28px 0;
        margin-inline: calc((100vw - 100%) / -2); }

    .base-history-title {
        display: grid;
        padding: 0 20px;
    }

    .base-history-rail {
        grid-auto-columns: 78%;
        grid-auto-flow: column;
        grid-template-columns: none;
    }

    .base-responsibility {
        min-height: 460px;
        margin-top: 64px;
        padding: 32px 22px;
    }

    .base-about-footer {
        padding-top: 54px;
    }
}

@media (max-width: 1180px) {
    .steel-tech-shell {
        grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
        gap: 44px;
    }

    .steel-tech-copy h2 {
        font-size: 36px;
    }

    .steel-tech-visual {
        min-height: 500px;
        padding-left: 34px;
    }

    .steel-tech-summary {
        width: min(460px, 70%);
    }

    .innovation-hero .hero-content, .innovation-tech-lead-head, .innovation-proof, .innovation-transfer, .innovation-collab {
        grid-template-columns: 1fr;
    }

    .innovation-hero .hero-content {
        gap: 34px;
    }

    .innovation-hero-index {
        justify-self: stretch;
        width: 100%;
    }

    .innovation-tech-lead {
        gap: 44px;
    }

    .innovation-tech-payoffs-list {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .innovation-proof-copy {
        position: static;
    }

    .feature-grid, .feature-grid.feature-grid-four, .data-grid, .steps, .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-grid.case-grid-detail {
        grid-template-columns: 1fr;
    }

    .detail-layout, .contact-grid, .split-layout, .split-layout.reverse {
        grid-template-columns: 1fr;
    }

    .aside-stack {
        position: static;
    }

    .news-lead-story, .news-feed-layout {
        grid-template-columns: 1fr;
    }

    .news-lead-media {
        min-height: 360px;
    }

    .news-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .page-main {
        padding-top: 68px;
    }

    .steel-tech-shell {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .steel-tech-copy {
        max-width: 760px;
    }

    .steel-tech-tabs {
        max-width: 620px;
        margin-top: 30px;
    }

    .steel-tech-visual {
        min-height: 500px;
    }

    .innovation-hero, .innovation-hero .hero-content {
        min-height: calc(100svh - 68px);
    }

    .innovation-hero .hero-content {
        padding: 96px 0 58px;
    }

    .innovation-hero h1 {
        font-size: clamp(40px, 9vw, 68px);
    }

    .innovation-tech-lead-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .innovation-tech-payoffs-item {
        width: 43%;
        margin: 18px 3.5%;
    }

    .innovation-tech-lead-list article {
        min-height: 230px;
    }

    .innovation-tech-payoffs-visual {
        overflow: visible;
        min-height: 0;
    }

    .innovation-tech-payoffs-visual img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .innovation-tech-payoffs-list {
        min-height: 0;
        padding-bottom: 0;
    }

    .software-carousel-item {
        width: 340px;
        height: 255px;
    }

    .software-carousel-item.is-prev-1, .software-carousel-item.is-next-1 {
        transform: translate(calc(-50% - 220px), -50%) scale(0.88);
    }

    .software-carousel-item.is-next-1 {
        transform: translate(calc(-50% + 220px), -50%) scale(0.88);
    }

    .software-carousel-item.is-prev-2, .software-carousel-item.is-next-2 {
        transform: translate(calc(-50% - 370px), -50%) scale(0.76);
    }

    .software-carousel-item.is-next-2 {
        transform: translate(calc(-50% + 370px), -50%) scale(0.76);
    }

    .innovation-proof-ledger article {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .innovation-proof-ledger p {
        grid-column: 2;
    }

    .page-hero, .page-hero .hero-content, .page-hero.page-hero-slim, .page-hero.page-hero-slim .hero-content {
        min-height: 340px;
    }

    .page-hero .hero-content {
        padding: 108px 0 56px;
    }

    .page-hero h1 {
        font-size: clamp(34px, 7vw, 54px);
    }

    .feature-grid, .feature-grid.feature-grid-four, .data-grid, .steps, .contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .list-item {
        grid-template-columns: 1fr;
    }

    .story-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .news-immersive-hero, .news-immersive-hero .hero-content {
        min-height: 480px;
    }

    .news-immersive-hero .hero-content {
        padding: 116px 0 70px;
    }

    .news-category-board {
        align-items: flex-start;
        flex-direction: column;
    }

    .news-tabs {
        width: 100%;
        gap: 22px;
    }

    .news-tabs button {
        flex: 0 0 auto;
    }
}

@media (max-width: 760px) {
    .page-main {
        padding-top: 68px;
    }

    .innovation-hero, .innovation-hero .hero-content {
        min-height: calc(100svh - 68px);
    }

    .innovation-hero .hero-content {
        padding: 84px 0 44px;
    }

    .innovation-hero-video video {
        object-position: 66% center;
    }

    .innovation-hero h1 {
        font-size: clamp(36px, 11vw, 50px);
    }

    .innovation-hero .hero-lead {
        font-size: 16px;
    }

    .innovation-hero-actions {
        margin-top: 28px;
    }

    .innovation-hero-actions .button {
        width: 100%;
    }

    .innovation-hero-index {
        display: none;
    }

    .innovation-tech-lead-section {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .innovation-tech-title h2, .innovation-tech-payoffs-head h2, .innovation-software-head h2, .innovation-proof-copy h2, .innovation-transfer-content h2, .innovation-collab h2 {
        font-size: 28px;
    }

    .innovation-tech-lead-list {
        grid-template-columns: 1fr;
    }

    .innovation-tech-payoffs-item {
        width: 43%;
        margin: 14px 3.5%;
    }

    .innovation-tech-lead {
        gap: 32px;
    }

    .innovation-tech-lead-head {
        gap: 22px;
    }

    .innovation-tech-lead-list article {
        min-height: 190px;
        gap: 18px;
        padding: 28px 20px;
    }

    .innovation-tech-payoffs-section {
        padding-top: 58px;
    }

    .innovation-software-section {
        padding-top: 58px;
    }

    .innovation-software {
        gap: 30px;
    }

    .software-carousel-viewport {
        height: 300px;
    }

    .software-carousel-item {
        width: 280px;
        height: 210px;
    }

    .software-carousel-item.is-prev-1, .software-carousel-item.is-next-1 {
        transform: translate(calc(-50% - 180px), -50%) scale(0.85);
    }

    .software-carousel-item.is-next-1 {
        transform: translate(calc(-50% + 180px), -50%) scale(0.85);
    }

    .software-carousel-item.is-prev-2, .software-carousel-item.is-next-2 {
        transform: translate(calc(-50% - 300px), -50%) scale(0.7);
    }

    .software-carousel-item.is-next-2 {
        transform: translate(calc(-50% + 300px), -50%) scale(0.7);
    }

    .software-carousel-prev, .software-carousel-next {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .innovation-tech-payoffs {
        gap: 30px;
    }

    .innovation-tech-payoffs-item::before, .innovation-tech-payoffs-item::after {
        width: 12px;
    }

    .innovation-proof-ledger article {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 24px 0;
    }

    .innovation-proof-ledger p {
        grid-column: auto;
    }

    .innovation-transfer-visual, .innovation-transfer-visual img {
        min-height: 340px;
    }

    .innovation-transfer-list a {
        grid-template-columns: 1fr;
        gap: 4px;
        align-items: start;
        padding: 18px 0;
    }

    .innovation-transfer-list strong {
        font-size: 18px;
    }

    .innovation-collab-section {
        padding-bottom: 58px;
    }

    .innovation-collab {
        gap: 22px;
        padding: 34px 0;
    }

    .innovation-collab .button {
        width: 100%;
    }

    .page-hero, .page-hero .hero-content, .page-hero.page-hero-slim, .page-hero.page-hero-slim .hero-content {
        min-height: 300px;
    }

    .page-hero .hero-content {
        padding: 96px 0 44px;
    }

    .page-hero h1 {
        font-size: clamp(30px, 10vw, 44px);
    }

    .page-hero .hero-lead {
        font-size: 16px;
    }

    .breadcrumb {
        padding-top: 14px;
    }

    .page-section {
        padding: 58px 0;
    }

    .page-section.compact {
        padding: 46px 0;
    }

    .section-title {
        margin-bottom: 24px;
    }

    .section-title h2 {
        font-size: 26px;
    }

    .steel-tech-copy h2 {
        font-size: 28px;
    }

    .steel-tech-copy > p:not(.eyebrow) {
        font-size: 16px;
    }

    .steel-tech-tabs {
        display: flex;
        gap: 0;
        max-width: none;
        margin-top: 24px;
        padding-left: 0;
        overflow-x: auto;
        border-bottom: 1px solid rgba(8, 47, 95, 0.1);
    }

    .steel-tech-tabs::before, .steel-tech-tab::before {
        display: none;
    }

    .steel-tech-tab {
        flex: 0 0 178px;
        display: block;
        min-height: 96px;
        padding: 12px 14px 15px;
        border-bottom: 3px solid transparent;
    }

    .steel-tech-tab:hover {
        transform: none;
    }

    .steel-tech-tab.is-active {
        border-bottom-color: #1785f2;
    }

    .steel-tech-index {
        display: block;
        margin-bottom: 9px;
    }

    .steel-tech-label strong {
        font-size: 20px;
    }

    .steel-tech-label em {
        font-size: 13px;
    }

    .steel-tech-visual {
        min-height: 0;
        padding: 0;
    }

    .steel-tech-visual::before {
        display: none;
    }

    .steel-tech-image-wrap {
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: 0 16px 40px rgba(8, 47, 95, 0.12);
    }

    .steel-tech-image-wrap img {
        aspect-ratio: 4 / 3;
    }

    .steel-tech-summary {
        position: relative;
        width: 100%;
        padding: 22px;
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: 0 16px 40px rgba(8, 47, 95, 0.08);
        backdrop-filter: none;
    }

    .steel-tech-summary h3 {
        font-size: 24px;
    }

    .feature-grid, .feature-grid.feature-grid-four, .data-grid, .steps, .gallery-grid, .case-grid.case-grid-detail, .contact-cards, .form-grid {
        grid-template-columns: 1fr;
    }

    .fact-card, .detail-block, .panel-pad, .job-card, .article-card, .feature-card {
        padding: 22px;
    }

    .pagination {
        justify-content: flex-start;
    }

    .table-wrap table {
        min-width: 680px;
    }

    .news-immersive-hero, .news-immersive-hero .hero-content {
        min-height: 420px;
    }

    .news-immersive-hero .hero-content {
        padding: 98px 0 54px;
    }

    .news-immersive-hero h1 {
        font-size: clamp(34px, 12vw, 48px);
    }

    .news-hero-metrics span {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .news-orbit-one {
        right: -24%;
        bottom: 0;
    }

    .news-category-board, .news-lead-content, .news-side-panel {
        padding: 22px;
    }

    .news-lead-media {
        min-height: 260px;
    }

    .news-feed-card {
        grid-template-columns: 1fr;
    }

    .news-feed-media img {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .news-feed-copy {
        padding: 22px;
    }

    .news-feed-copy h3 {
        font-size: 22px;
    }

    .news-sidebar {
        grid-template-columns: 1fr;
    }
}

/* About page: layout inspired by enterprise bio/manufacturing storytelling pages */
.about-page {
    --about-deep: #082821;
    --about-ink: #12231f;
    --about-body: #42534d;
    --about-muted: #74827d;
    --about-green: #1f8b62;
    --about-lime: #94c84a;
    --about-soft: #f2f7f4;
    --about-warm: #f8f5ef;
    --about-line: rgba(18, 35, 31, 0.12);
    background: #ffffff;
    color: var(--about-body);
}

.about-main {
    background: linear-gradient(180deg, #ffffff 0%, #f7faf8 44%, #ffffff 100%);
}

.about-page .about-hero {
    min-height: 100svh;
    color: #ffffff;
    background: var(--about-deep);
}

.about-page .about-hero .hero-slide img, .about-page .about-hero .hero-slide video {
    object-position: center;
    filter: saturate(0.92) contrast(1.05);
}

.about-page .about-hero .hero-overlay {
    /* z-index: 2;
  background:
    linear-gradient(90deg, rgba(3, 23, 19, 0.9) 0%, rgba(6, 48, 39, 0.72) 38%, rgba(7, 59, 47, 0.22) 74%, rgba(3, 23, 19, 0.44) 100%),
    linear-gradient(180deg, rgba(3, 18, 16, 0.64) 0%, rgba(3, 18, 16, 0.1) 46%, rgba(3, 18, 16, 0.78) 100%); */
}

.about-page .about-hero::after {
    /* position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: min(46vw, 700px);
  height: 72%;
  background:
    linear-gradient(135deg, rgba(148, 200, 74, 0), rgba(148, 200, 74, 0.2)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  content: "";
  pointer-events: none; */
}

.about-page .about-hero-content {
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    gap: 56px;
    align-items: end;
    min-height: 100svh;
    padding-top: 130px;
    padding-bottom: 76px;
}

.about-hero-copy {
    max-width: 840px;
}

.about-page .about-hero h1 {
    color: #ffffff;
    font-size: clamp(58px, 8vw, 96px);
    font-weight: 650;
    letter-spacing: 0;
    line-height: 0.98;
}

.about-page .about-hero .hero-lead {
    max-width: 780px;
    margin-top: 32px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(19px, 2vw, 26px);
    line-height: 1.7;
}

.about-hero-panel {
    display: grid;
    color: rgba(255, 255, 255, 0.93);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
}

.about-hero-panel span {
    min-height: 68px;
    display: flex;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 16px;
    font-weight: 700;
}

.about-hero-panel span:last-child {
    border-bottom: 0;
}

.about-breadcrumb {
    padding: 18px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--about-line);
}

.about-overview-section {
    position: relative;
    overflow: hidden;
    padding: 66px 0 78px;
    background: #ffffff;
}

.about-overview {
    position: relative;
    z-index: 1;
}

.about-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
    margin-bottom: 54px;
}

.about-overview-stats article {
    min-width: 0;
}

.about-overview-stats strong {
    display: flex;
    align-items: flex-end;
    color: #0b4f84;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.about-overview-stats strong span {
    margin-left: 4px;
    padding-bottom: 5px;
    color: #9aa7ad;
    font-size: 13px;
    font-weight: 700;
}

.about-overview-stats p {
    margin: 15px 0 0;
    color: #7a8790;
    font-size: 13px;
    line-height: 1.5;
}

.about-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.96fr);
    gap: 52px;
    align-items: center;
}

.about-overview-media {
    overflow: hidden;
    background: var(--about-soft);
    border-radius: 8px;
}

.about-overview-media img, .about-overview-player, .about-overview-media .video-js, .about-overview-media .video-js video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.about-overview-player {
    background: #061a33;
}

.about-overview-media .video-js {
    min-height: 0;
}

.about-overview-media .video-js .vjs-tech {
    object-fit: cover;
}

.about-overview-media .video-js .vjs-poster {
    background-size: cover;
}

.about-overview-media .video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    margin-top: -44px;
    margin-left: -44px;
    line-height: 88px;
    background: rgba(6, 26, 51, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

.about-overview-copy {
    position: relative;
    min-width: 0;
}

.about-overview-copy h2 {
    margin: 0;
    color: var(--about-ink);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.42;
    letter-spacing: 0;
}

.about-overview-copy p {
    margin: 20px 0 0;
    color: var(--about-body);
    font-size: 13px;
    line-height: 1.6;
    text-align:justify;
    -webkit-text-align-last: left;
}

.about-overview-link {
    margin-top: 26px;
    min-height: 36px;
    padding: 0 20px;
    font-size: 13px;
}

.about-anchor-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--about-line);
    backdrop-filter: blur(16px);
}

.site-header.is-scrolled + .search-panel + .about-main .about-anchor-nav, .site-header.is-open + .search-panel + .about-main .about-anchor-nav {
    top: 78px;
}

.about-anchor-nav .container {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.about-anchor-nav .container::-webkit-scrollbar {
    display: none;
}

.about-anchor-nav a {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 62px;
    padding: 0 22px;
    color: var(--about-ink);
    border-right: 1px solid var(--about-line);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}

.about-anchor-nav a:first-child {
    border-left: 1px solid var(--about-line);
}

.about-anchor-nav a:hover {
    color: var(--about-green);
    background: var(--about-soft);
}

.about-section {
    padding: clamp(32px, 9vw, 32px) 0;
    scroll-margin-top: 92px;
}

.about-section-head {
    max-width: 880px;
    margin-bottom: 46px;
}

.about-section-head h2, .about-profile-copy h2, .about-platform-copy h2 {
    margin: 0;
    color: var(--about-ink);
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 650;
    line-height: 1.12;
}

.about-section-head p:not(.eyebrow), .about-profile-copy p, .about-platform-copy p {
    color: var(--about-body);
    font-size: 17px;
    line-height: 1.9;
}

.about-section-head p:not(.eyebrow) {
    max-width: 760px;
    margin-top: 18px;
}

.about-page .eyebrow {
    color: var(--about-green);
    letter-spacing: 0.13em;
}

.about-profile-section {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.about-values-section {
    position: relative;
    display: flex;
    min-height: clamp(340px, 35vw, 670px);
    overflow: hidden;
    padding: 0;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(3, 62, 110, 0.9) 0%, rgba(2, 93, 143, 0.54) 47%, rgba(2, 35, 58, 0.12) 100%), url("https://panel.fii-foxconn.com//static/upload/2023/09/04/202309045573.png") center / cover no-repeat;
}

.about-values-section::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 25, 48, 0.12), rgba(4, 25, 48, 0));
    content: "";
    pointer-events: none;
}

.about-values-section .container {
    width: 100%;
    max-width: none;
}

.about-values-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: inherit;
    padding: 0 clamp(24px, 5vw, 72px);
}

.about-values-grid article {
    min-width: 0;
    padding: clamp(34px, 4.2vw, 58px) clamp(20px, 3vw, 44px);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.about-values-grid article:first-child {
    border-left: 0;
}

.about-values-grid article:last-child {
    border-right: 0;
}

.about-values-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.92);
}

.about-values-icon .bi {
    font-size: 26px;
    line-height: 1;
}

.about-values-grid h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(20px, 1.7vw, 25px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.about-values-grid p {
    max-width: 260px;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
}

.about-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    gap: clamp(42px, 6vw, 78px);
    align-items: center;
}

.about-profile-copy p {
    max-width: 760px;
    margin: 22px 0 0;
}

.about-profile-visual {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    box-shadow: 0 32px 82px rgba(8, 40, 33, 0.16);
}

.about-profile-visual img {
    width: 100%;
    height: 100%;
    min-height: 570px;
    object-fit: cover;
}

.about-profile-tags {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(7, 38, 31, 0.78);
    backdrop-filter: blur(12px);
}

.about-profile-tags span {
    min-height: 72px;
    display: grid;
    place-items: center;
    padding: 12px;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    font-weight: 800;
    text-align: center;
}

.about-profile-tags span:last-child {
    border-right: 0;
}

.about-culture-section {
    background: linear-gradient(180deg, rgba(242, 247, 244, 0.9), rgba(255, 255, 255, 0.88)), var(--about-soft);
}

.about-culture-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.about-culture-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 560px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--about-line);
    box-shadow: 0 22px 58px rgba(8, 40, 33, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

.about-culture-card:hover {
    box-shadow: 0 32px 76px rgba(8, 40, 33, 0.12);
    transform: translateY(-6px);
}

.about-culture-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.about-culture-card > div {
    padding: 32px;
}

.about-culture-card h3 {
    margin: 0 0 16px;
    color: var(--about-ink);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 650;
    line-height: 1.22;
}

.about-culture-card p:not(.eyebrow) {
    margin: 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 1.85;
}

.about-culture-card-wide {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    grid-template-rows: auto;
    min-height: 430px;
}

.about-culture-card-wide img {
    height: 100%;
    min-height: 430px;
    aspect-ratio: auto;
}

.about-value-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

.about-value-pair > div {
    display: grid;
    align-content: start;
    padding: 36px;
    border-right: 1px solid var(--about-line);
}

.about-value-pair > div:last-child {
    border-right: 0;
}

.about-honors-section {
    padding: clamp(84px, 9vw, 128px) 0;
    overflow: hidden;
    background: #ffffff;
}

.about-honors-head {
    display: grid;
    justify-items: center;
    gap: 30px;
    margin-bottom: clamp(52px, 6vw, 82px);
    text-align: center;
}

.about-honors-head h2 {
    margin: 0;
    color: var(--about-ink);
    font-size: clamp(44px, 5.2vw, 68px);
    font-weight: 800;
    line-height: 1.08;
}

.about-honor-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.about-honor-tabs button {
    min-width: 160px;
    min-height: 54px;
    padding: 0 32px;
    color: #a0a7ad;
    background: #f2f4f6;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.about-honor-tabs button:hover {
    color: var(--about-green);
    transform: translateY(-2px);
}

.about-honor-tabs button.is-active {
    color: #ffffff;
    background: #09a984;
    box-shadow: 0 14px 32px rgba(9, 169, 132, 0.22);
}

.about-honor-stage {
    position: relative;
    display: grid;
    align-items: center;
}

.about-honor-viewport {
    overflow: hidden;
    outline: none;
    cursor: grab;
    touch-action: pan-y;
}

.about-honor-viewport:active {
    cursor: grabbing;
}

.about-honor-track {
    --honor-gap: 56px;
    display: flex;
    gap: var(--honor-gap);
    transition: transform 420ms ease;
    will-change: transform;
}

.about-honor-card {
    flex: 0 0 calc((100% - 112px) / 3);
    display: grid;
    gap: 28px;
    min-width: 0;
    text-align: center;
}

.about-honor-card[hidden] {
    display: none;
}

.about-honor-media {
    display: grid;
    width: 300px;
    height: 225px;
    margin: 0 auto;
    place-items: center;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(12, 33, 28, 0.08);
    box-shadow: 0 10px 24px rgba(8, 40, 33, 0.08);
    border-radius: 8px;
}

.about-honor-media img {
    display: block;
    width: 300px;
    height: 185px;
    object-fit: contain;
    background: #ffffff;
}

.about-certificate {
    position: relative;
    width: min(62%, 260px);
    aspect-ratio: 1.42 / 1;
    padding: 18px;
    background: #ffffff;
    border: 9px solid #7b4f35;
    box-shadow: 0 22px 34px rgba(44, 34, 26, 0.26);
}

.about-certificate::before {
    position: absolute;
    inset: 14px;
    border: 3px solid #e6a95e;
    content: "";
}

.about-certificate::after {
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 38px;
    height: 38px;
    border: 4px solid rgba(205, 35, 25, 0.74);
    border-radius: 50%;
    content: "";
}

.about-certificate span {
    position: relative;
    z-index: 1;
    display: grid;
    height: 100%;
    place-items: center;
    padding-top: 26px;
    color: #d06a32;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 800;
    letter-spacing: 0.32em;
}

.about-certificate span::before, .about-certificate span::after {
    position: absolute;
    left: 50%;
    width: min(62%, 124px);
    height: 5px;
    background: #25343b;
    border-radius: 999px;
    content: "";
    opacity: 0.7;
    transform: translateX(-50%);
}

.about-certificate span::before {
    top: 22px;
}

.about-certificate span::after {
    bottom: 28px;
    width: min(44%, 86px);
    opacity: 0.34;
}

.about-honor-card h3 {
    margin: 0;
    color: #1c2428;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 800;
    line-height: 1.45;
    display: none;
}

.about-honor-arrow {
    position: absolute;
    top: 42%;
    z-index: 2;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: var(--about-green);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(18, 35, 31, 0.12);
    border-radius: 50%;
    box-shadow: 0 16px 36px rgba(8, 40, 33, 0.14);
    cursor: pointer;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.about-honor-arrow:hover {
    box-shadow: 0 22px 42px rgba(8, 40, 33, 0.18);
    transform: translateY(-2px);
}

.about-honor-arrow:disabled {
    opacity: 0.28;
    cursor: default;
    transform: none;
}

.about-honor-arrow span {
    width: 13px;
    height: 13px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.about-honor-arrow-prev {
    left: -24px;
}

.about-honor-arrow-prev span {
    transform: translateX(3px) rotate(-45deg);
}

.about-honor-arrow-next {
    right: -24px;
}

.about-honor-arrow-next span {
    transform: translateX(-3px) rotate(135deg);
}

.about-honor-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    min-height: 18px;
    margin-top: clamp(42px, 5vw, 66px);
}

.about-honor-dots button {
    width: 12px;
    height: 12px;
    padding: 0;
    background: transparent;
    border: 3px solid #b7d7e2;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.about-honor-dots button.is-active {
    background: #00a98b;
    border-color: #00a98b;
    transform: scale(1.08);
}

.about-scale-section {
    background: #ffffff;
}

.about-page .about-number-grid {
    background: #ffffff;
    border-top: 1px solid var(--about-line);
    border-left: 1px solid var(--about-line);
    box-shadow: 0 22px 66px rgba(8, 40, 33, 0.08);
}

.about-page .about-number-grid article {
    min-height: 300px;
    padding: 38px 30px;
    border-right: 1px solid var(--about-line);
    border-bottom: 1px solid var(--about-line);
    transition: background var(--transition), transform var(--transition);
}

.about-page .about-number-grid article:hover {
    background: var(--about-soft);
    transform: translateY(-5px);
}

.about-page .about-number-grid strong {
    color: var(--about-green);
    font-size: clamp(46px, 5.6vw, 70px);
    font-weight: 700;
}

.about-page .about-number-grid span {
    color: var(--about-ink);
    font-size: 18px;
    font-weight: 800;
}

.about-page .about-number-grid p {
    color: var(--about-muted);
    line-height: 1.8;
}

.about-platform-section {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(6, 31, 27, 0.98), rgba(13, 79, 63, 0.92)), url("../images/business-manufacturing-base-hero-v3.png") center/cover;
}

.about-platform-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
    gap: clamp(44px, 6vw, 78px);
    align-items: center;
}

.about-platform-media {
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.26);
}

.about-platform-media img {
    width: 100%;
    height: 100%;
    min-height: 680px;
    object-fit: cover;
}

.about-platform-copy h2, .about-platform-copy .eyebrow {
    color: #ffffff;
}

.about-platform-copy .eyebrow {
    color: var(--about-lime);
}

.about-process-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.about-process-list article {
    position: relative;
    min-height: 238px;
    padding: 30px 28px;
    background: rgba(255, 255, 255, 0.07);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.about-process-list span {
    color: var(--about-lime);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.about-process-list h3 {
    margin: 34px 0 12px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 650;
}

.about-process-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.78;
}

.about-ecosystem-section {
    background: linear-gradient(180deg, #ffffff, var(--about-soft));
}

.about-ecosystem-section .about-section-head {
    max-width: 1080px;
}

.about-ecosystem-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    margin-bottom: 28px;
    border: 1px solid var(--about-line);
    background: #ffffff;
}

.about-ecosystem-tabs span {
    min-width: 128px;
    min-height: 52px;
    display: grid;
    place-items: center;
    padding: 0 22px;
    color: var(--about-ink);
    border-right: 1px solid var(--about-line);
    font-weight: 800;
}

.about-ecosystem-tabs span:first-child {
    color: #ffffff;
    background: var(--about-green);
}

.about-ecosystem-tabs span:last-child {
    border-right: 0;
}

.about-ecosystem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--about-line);
    box-shadow: 0 28px 72px rgba(8, 40, 33, 0.09);
}

.about-network-map {
    display: grid;
    border-right: 1px solid var(--about-line);
}

.about-network-map img {
    width: 100%;
    min-height: 420px;
    object-fit: cover;
}

.about-network-map div {
    display: flex;
    justify-content: flex-end;
    padding: 24px;
    border-top: 1px solid var(--about-line);
}

.about-address-list {
    display: grid;
}

.about-address-list article {
    display: grid;
    align-content: center;
    min-height: 25%;
    padding: 28px 32px;
    border-bottom: 1px solid var(--about-line);
}

.about-address-list article:last-child {
    border-bottom: 0;
}

.about-address-list span {
    color: var(--about-green);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.about-address-list p {
    margin: 12px 0 0;
    color: var(--about-body);
    font-size: 17px;
}

.about-history-section {
    background: #ffffff;
}

.about-history-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.32fr) minmax(0, 0.68fr);
    gap: clamp(42px, 6vw, 76px);
    align-items: start;
}

.about-history-layout .about-section-head {
    position: sticky;
    top: 106px;
}

.about-timeline {
    display: grid;
    gap: 26px;
}

.about-timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 0 0 26px;
    border-bottom: 1px solid var(--about-line);
}

/* .about-timeline article::before {
  position: absolute;
  top: 50%;
  left: 232px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 4px solid var(--about-lime);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
} */
.about-timeline img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: 137px;
    border-radius: 12px;
    aspect-ratio: auto;
    object-fit: cover;
}

.about-timeline time {
    color: var(--about-green);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    line-height: 1;
}

.about-timeline h3 {
    margin: 0 0 10px;
    color: var(--about-ink);
    font-size: 20px;
    font-weight: 650;
}

.about-timeline p {
    margin: 0;
    color: var(--about-muted);
    line-height: 1.8;
}

.about-partners-section {
    padding: clamp(82px, 9vw, 128px) 0;
    overflow: hidden;
    background: #f5f5f5;
}

.about-partners-wrap {
    width: 100%;
    margin: 0 auto;
    color: #111111;
    text-align: center;
}

.about-partners-head {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: 42px;
}

.about-partners-head h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.06;
}

.about-partners-dots {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.about-partners-dots span {
    width: 7px;
    height: 7px;
    background: #1597d3;
    border-radius: 50%;
}

.about-partners-dots span:nth-child(2) {
    background: #2cb7ed;
}

.about-partners-dots span:nth-child(3) {
    background: #7fc6e7;
}

.about-partners-head p {
    margin: 0;
    color: #606a72;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.65;
}

.about-brand-board {
    --brand-columns-per-view: 8;
    --brand-gap: 12px;
    --brand-side-padding: clamp(22px, 3vw, 44px);
    --brand-card-width: calc((100vw - (var(--brand-side-padding) * 2) - (var(--brand-gap) * 7)) / 8);
    position: relative;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.about-brand-board::before, .about-brand-board::after {
    position: absolute;
    z-index: 3;
    top: 0;
    width: clamp(42px, 8vw, 112px);
    height: calc(100% - 24px);
    pointer-events: none;
    content: "";
}

.about-brand-board::before {
    left: 0;
    background: radial-gradient(150% 86% at 0 50%, rgba(0, 0, 0, 0.16), transparent 64%), linear-gradient(90deg, #f5f5f5 0%, rgba(245, 245, 245, 0.92) 18%, rgba(245, 245, 245, 0) 100%);
}

.about-brand-board::after {
    right: 0;
    background: radial-gradient(150% 86% at 100% 50%, rgba(0, 0, 0, 0.16), transparent 64%), linear-gradient(270deg, #f5f5f5 0%, rgba(245, 245, 245, 0.92) 18%, rgba(245, 245, 245, 0) 100%);
}

.about-brand-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 24px;
    outline: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.about-brand-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.about-brand-viewport::-webkit-scrollbar {
    display: none;
}

.about-brand-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--brand-card-width);
    grid-template-rows: repeat(4, auto);
    gap: var(--brand-gap);
    width: max-content;
    padding: 0 var(--brand-side-padding);
    transform: translateZ(0);
}

.about-brand-card {
    display: grid;
    place-items: center;
    width: var(--brand-card-width);
    min-height: 72px;
    aspect-ratio: 322 / 166;
    box-sizing: border-box;
    padding: clamp(10px, 1vw, 18px) clamp(12px, 1.25vw, 22px);
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.06);
    transform: perspective(900px) rotateY(var(--brand-rotate, 0deg)) scale(var(--brand-scale, 1));
    transform-origin: center center;
}

.about-brand-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 180px;
    max-height: 60px;
    object-fit: contain;
    object-position: center;
}

.about-brand-controls {
    position: absolute;
    z-index: 4;
    inset: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--brand-side-padding);
    pointer-events: none;
}

.about-brand-arrow {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    color: #1597d3;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 50%;
    box-shadow: 0 14px 32px rgba(21, 151, 211, 0.16);
    cursor: pointer;
    pointer-events: auto;
    transition: color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.about-brand-arrow span {
    width: 13px;
    height: 13px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: translateX(2px) rotate(45deg);
}

.about-brand-arrow-next span {
    transform: translateX(-2px) rotate(225deg);
}

.about-brand-arrow:hover {
    color: #ffffff;
    background: #1597d3;
    border-color: #1597d3;
    box-shadow: 0 18px 38px rgba(21, 151, 211, 0.26);
    transform: translateY(-2px);
}

.about-brand-arrow:disabled {
    color: rgba(17, 17, 17, 0.25);
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(17, 17, 17, 0.08);
    box-shadow: none;
    cursor: default;
    transform: none;
}

.about-market-coverage {
    /* display: grid; */
    /* grid-template-columns: minmax(380px, 0.36fr) minmax(0, 0.64fr); */
    /* gap: clamp(32px, 5vw, 72px); */
    width: min(100%, 1240px);
    margin: -6px auto 0;
    align-items: center;
    text-align: left;
}

.about-market-copy {
    position: relative;
    z-index: 1;
    padding-top: 20px;
}

.about-market-line {
    display: flex;
    align-items: baseline;
    margin: 0 0 36px;
    color: #111111;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}

.about-market-line strong {
    margin: 0 8px;
    color: #109dd8;
    font-size: clamp(82px, 9vw, 128px);
    font-weight: 800;
    line-height: 0.9;
}

.about-market-copy ul {
    display: grid;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.about-market-copy li {
    position: relative;
    padding-left: 22px;
    color: #4b555e;
    font-size: clamp(16px, 1.35vw, 20px);
    line-height: 1.65;
}

.about-market-copy li::before {
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 8px;
    height: 8px;
    background: #1597d3;
    border-radius: 50%;
    content: "";
}

.about-market-copy li strong {
    color: #128ed0;
    font-weight: 800;
}

.about-market-map img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.about-updates-section {
    background: var(--about-soft);
}

.about-news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 24px;
}

.about-news-layout .news-card {
    border-radius: 0;
}

.about-news-card-large img {
    aspect-ratio: 16 / 9;
}

.about-news-card-large .news-card-body {
    padding: 34px;
}

.about-news-card-large h3 {
    font-size: clamp(28px, 3vw, 40px);
}

.about-news-stack {
    display: grid;
    gap: 24px;
}

.about-news-stack .news-card {
    grid-template-columns: 190px minmax(0, 1fr);
}

.about-news-stack .news-card img {
    height: 100%;
    aspect-ratio: auto;
}

.about-more-actions {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.about-page .about-band {
    position: relative;
    overflow: hidden;
    padding: clamp(82px, 9vw, 128px) 0;
    color: #ffffff;
    background: linear-gradient(105deg, rgba(4, 35, 29, 0.98), rgba(11, 76, 61, 0.86)), url("../images/hero-industrial-treatment.png") center/cover;
}

.about-page .about-band::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 72px 72px;
    content: "";
    opacity: 0.28;
    pointer-events: none;
}

.about-page .about-band-grid {
    position: relative;
    z-index: 1;
}

.about-page .about-band h2 {
    max-width: 560px;
    color: #ffffff;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 650;
    line-height: 1.16;
}

.about-page .about-band .eyebrow {
    color: var(--about-lime);
}

.about-page .about-link-panels {
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.about-page .about-link-panels a {
    position: relative;
    grid-template-columns: minmax(88px, 0.32fr) minmax(0, 1fr);
    align-items: center;
    padding: 24px 42px 24px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
}

.about-page .about-link-panels a::after {
    position: absolute;
    right: 8px;
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform var(--transition);
}

.about-page .about-link-panels a:hover {
    background: transparent;
    transform: none;
}

.about-page .about-link-panels a:hover::after {
    transform: translateX(6px) rotate(45deg);
}

.about-page .about-link-panels span {
    color: var(--about-lime);
}

.about-page .about-link-panels strong {
    color: #ffffff;
    font-size: 24px;
    font-weight: 650;
}

@media (max-width: 1180px) {
    .about-page .about-hero-content, .about-profile-grid, .about-platform-layout, .about-ecosystem-grid, .about-history-layout, .about-market-coverage, .about-news-layout {
        grid-template-columns: 1fr;
    }

    .about-hero-panel {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .about-hero-panel span {
        border-right: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: 0;
    }

    .about-hero-panel span:last-child {
        border-right: 0;
    }

    .about-history-layout .about-section-head {
        position: static;
    }

    .about-network-map {
        border-right: 0;
        border-bottom: 1px solid var(--about-line);
    }

    .about-honor-track {
        --honor-gap: 30px;
    }

    .about-honor-card {
        flex-basis: calc((100% - 30px) / 2);
    }

    .about-honor-arrow-prev {
        left: 8px;
    }

    .about-honor-arrow-next {
        right: 8px;
    }

    .about-market-coverage {
        width: min(100%, 920px);
        margin-top: 36px;
        text-align: center;
    }

    .about-market-copy {
        justify-self: center;
        max-width: 680px;
        padding-top: 0;
        text-align: left;
    }

    .about-market-map {
        order: -1;
    }

    .about-news-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-news-stack .news-card {
        grid-template-columns: 1fr;
    }

    .about-news-stack .news-card img {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 960px) {
    .about-page .about-hero, .about-page .about-hero-content {
        min-height: calc(100svh - 68px);
    }

    .about-page .about-hero-content {
        padding-top: 104px;
        padding-bottom: 56px;
    }

    .about-page .about-hero h1 {
        font-size: clamp(46px, 11vw, 68px);
    }

    .site-header.is-scrolled + .search-panel + .about-main .about-anchor-nav, .site-header.is-open + .search-panel + .about-main .about-anchor-nav {
        top: 68px;
    }

    .about-overview-section {
        padding: 54px 0 64px;
    }

    .about-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 38px;
        margin-bottom: 42px;
    }

    .about-overview-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .about-overview-media img, .about-overview-player, .about-overview-media .video-js, .about-overview-media .video-js video {
        aspect-ratio: 16 / 9;
    }

    .about-overview-copy {
        max-width: 680px;
    }

    .about-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 clamp(20px, 4vw, 42px);
    }

    .about-values-grid article {
        min-height: 220px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .about-values-grid article:nth-child(2n) {
        border-right: 1px solid rgba(255, 255, 255, 0.16);
    }

    .about-values-grid article:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .about-culture-card-wide {
        grid-template-columns: 1fr;
    }

    .about-culture-card-wide img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .about-value-pair {
        grid-template-columns: 1fr;
    }

    .about-value-pair > div {
        border-right: 0;
        border-bottom: 1px solid var(--about-line);
    }

    .about-value-pair > div:last-child {
        border-bottom: 0;
    }

    .about-profile-visual, .about-profile-visual img, .about-platform-media, .about-platform-media img {
        min-height: 460px;
    }

    .about-timeline article {
        grid-template-columns: 180px 110px minmax(0, 1fr);
    }

    .about-timeline article::before {
        left: 192px;
    }

    .about-brand-board {
        --brand-columns-per-view: 4;
        --brand-side-padding: 18px;
        --brand-card-width: calc((100vw - (var(--brand-side-padding) * 2) - (var(--brand-gap) * 3)) / 4);
    }
}

@media (max-width: 760px) {
    .about-page .about-hero, .about-page .about-hero-content {
        min-height: 620px;
    }

    .about-page .about-hero-content {
        gap: 28px;
        padding-top: 88px;
        padding-bottom: 42px;
    }

    .about-page .about-hero h1 {
        font-size: clamp(40px, 13vw, 54px);
    }

    .about-page .about-hero .hero-lead {
        font-size: 16px;
    }

    .about-brand-board {
        --brand-columns-per-view: 3;
        --brand-side-padding: 14px;
        --brand-card-width: calc((100vw - (var(--brand-side-padding) * 2) - (var(--brand-gap) * 2)) / 3);
    }

    .about-hero-panel {
        grid-template-columns: 1fr;
    }

    .about-hero-panel span {
        min-height: 46px;
        padding: 13px 16px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        font-size: 14px;
    }

    .about-section {
        padding: 62px 0;
    }

    .about-overview-section {
        padding: 44px 0 56px;
    }

    .about-overview-stats {
        gap: 24px 22px;
        margin-bottom: 34px;
    }

    .about-overview-stats strong {
        font-size: 31px;
    }

    .about-overview-stats strong span {
        padding-bottom: 3px;
        font-size: 12px;
    }

    .about-overview-stats p {
        margin-top: 10px;
    }

    .about-overview-layout {
        gap: 28px;
    }

    .about-overview-copy h2 {
        font-size: 25px;
        line-height: 1.38;
    }

    .about-overview-copy p {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.78;
    }

    .about-values-section {
        min-height: 0;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .about-values-grid article {
        min-height: 0;
        padding: 28px 16px 30px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .about-values-grid article:nth-child(2n), .about-values-grid article:last-child {
        border-right: 0;
    }

    .about-values-grid article:last-child {
        border-bottom: 0;
    }

    .about-values-icon {
        margin-bottom: 14px;
    }

    .about-values-grid p {
        max-width: none;
        margin-top: 10px;
    }

    .about-honors-section {
        padding: 64px 0 72px;
    }

    .about-honors-head {
        gap: 22px;
        margin-bottom: 36px;
    }

    .about-honors-head h2 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .about-honor-tabs {
        gap: 10px;
    }

    .about-honor-tabs button {
        min-width: 0;
        min-height: 42px;
        padding: 0 18px;
        font-size: 13px;
    }

    .about-honor-track {
        --honor-gap: 18px;
    }

    .about-honor-card {
        flex-basis: 100%;
        gap: 18px;
    }

    .about-honor-media {
        width: 233px;
        height: 165px;
    }

    .about-certificate {
        width: min(66%, 250px);
        border-width: 7px;
    }

    .about-certificate span {
        font-size: 24px;
    }

    .about-honor-arrow {
        top: 38%;
        width: 40px;
        height: 40px;
    }

    .about-honor-dots {
        margin-top: 32px;
    }

    .about-partners-section {
        padding: 62px 0 72px;
    }

    .about-partners-wrap {
        width: min(calc(100% - 28px), 720px);
    }

    .about-partners-head {
        gap: 8px;
        margin-bottom: 28px;
    }

    .about-partners-head h2 {
        font-size: clamp(34px, 9vw, 46px);
    }

    .about-partners-head p {
        max-width: 520px;
        font-size: 15px;
    }

    .about-brand-board {
        --brand-columns-per-view: 6;
        --brand-gap: 10px;
        --brand-card-width: calc((100vw - (var(--brand-side-padding) * 2) - (var(--brand-gap) * 5)) / 6);
    }

    .about-brand-track {
        padding: 0 18px;
    }

    .about-brand-viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
    }

    .about-market-coverage {
        gap: 24px;
        width: 100%;
        margin-top: 26px;
    }

    .about-market-line {
        justify-content: center;
        margin-bottom: 24px;
        font-size: clamp(19px, 5vw, 26px);
        white-space: normal;
        text-align: center;
    }

    .about-market-line strong {
        font-size: clamp(72px, 18vw, 94px);
    }

    .about-market-copy li {
        font-size: 15px;
    }

    .about-section-head {
        margin-bottom: 28px;
    }

    .about-section-head h2, .about-profile-copy h2, .about-platform-copy h2 {
        font-size: 30px;
    }

    .about-section-head p:not(.eyebrow), .about-profile-copy p, .about-platform-copy p {
        font-size: 16px;
        line-height: 1.76;
    }

    .about-anchor-nav a {
        min-height: 52px;
        padding: 0 16px;
        font-size: 14px;
    }

    .about-profile-grid, .about-platform-layout {
        gap: 28px;
    }

    .about-profile-visual, .about-profile-visual img, .about-platform-media, .about-platform-media img {
        min-height: 320px;
    }

    .about-profile-tags {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-profile-tags span {
        min-height: 52px;
        font-size: 14px;
    }

    .about-culture-grid, .about-process-list, .about-page .about-number-grid, .about-news-stack {
        grid-template-columns: 1fr;
    }

    .about-culture-card {
        min-height: 0;
    }

    .about-culture-card > div, .about-value-pair > div, .about-news-card-large .news-card-body {
        padding: 24px;
    }

    .about-culture-card h3, .about-process-list h3, .about-timeline h3 {
        font-size: 22px;
    }

    .about-page .about-number-grid article, .about-process-list article {
        min-height: 0;
        padding: 24px 22px;
    }

    .about-ecosystem-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .about-ecosystem-tabs span {
        min-width: 0;
        border-bottom: 1px solid var(--about-line);
    }

    .about-network-map img {
        min-height: 260px;
    }

    .about-network-map div {
        justify-content: stretch;
        padding: 18px;
    }

    .about-network-map .button {
        width: 100%;
    }

    .about-address-list article {
        padding: 22px;
    }

    .about-timeline {
        gap: 18px;
    }

    .about-timeline article {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-bottom: 22px;
    }

    .about-timeline article::before {
        display: none;
    }

    .about-timeline img {
        width: 220px;
        max-width: 100%;
        height: 137px;
        aspect-ratio: auto;
    }

    .about-timeline time {
        font-size: 36px;
    }

    .about-news-card-large h3 {
        font-size: 24px;
    }

    .about-page .about-link-panels a {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 20px 34px 20px 0;
    }

    .about-page .about-link-panels strong {
        font-size: 19px;
    }
}

/* 2026 visual reconstruction */
:root {
    --color-primary: #07345d;
    --color-primary-deep: #041b33;
    --color-secondary: #168467;
    --color-accent: #28a9bf;
    --color-amber: #c89438;
    --color-bg-soft: #f5f8fb;
    --color-bg-quiet: #edf3f7;
    --color-text: #152235;
    --color-text-strong: #071523;
    --color-muted: #607084;
    --color-line: rgba(7, 21, 35, 0.12);
    --container-width: 1240px;
    --shadow: 0 28px 70px rgba(6, 28, 51, 0.16);
    --section-gap: 112px;
}

body, body * {
    letter-spacing: 0;
}

body {
    background: linear-gradient(180deg, rgba(245, 248, 251, 0.8) 0, rgba(255, 255, 255, 0) 320px), #fff;
    color: var(--color-text);
}

.container {
    /* width: min(calc(100% - 56px), var(--container-width)); */
}

.site-header {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* .site-header::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(180deg, rgba(4, 18, 34, 0.56), rgba(4, 18, 34, 0));
  opacity: 1;
  transition: opacity var(--transition);
} */
.site-header.is-scrolled, .site-header.is-open {
    color: var(--color-text-strong);
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(7, 21, 35, 0.08);
    box-shadow: 0 16px 50px rgba(7, 21, 35, 0.1);
    backdrop-filter: blur(18px);
}

.site-header.is-scrolled::before, .site-header.is-open::before {
    opacity: 0;
}

.header-inner {
    width: min(calc(100% - 56px), 1420px);
    height: 86px;
    gap: 30px;
}

.brand-mark {
    width: 46px;
    height: 46px;
}

.brand-text strong {
    font-size: 18px;
}

.brand-text em {
    font-size: 10px;
    opacity: 0.7;
}

.main-nav li > a {
    min-height: 86px;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 650;
}

.main-nav li > a.is-current {
    color: #33bfd0;
}

.site-header.is-scrolled .main-nav li > a.is-current, .site-header.is-open .main-nav li > a.is-current {
    color: var(--color-primary);
}

.dropdown {
    top: 72px;
    min-width: 178px;
    padding: 12px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.dropdown a {
    padding: 9px 12px;
    color: var(--color-muted);
    border: 0;
    border-radius: 6px;
    font-size: 14px;
}

.dropdown a:hover {
    color: var(--color-primary);
    background: var(--color-bg-soft);
}

.phone-link {
    border-radius: 2px;
}

.button {
    min-height: 48px;
    border-radius: 2px;
    font-weight: 700;
}

.button-primary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    border-color: transparent;
    color: #fff;
}

.button-ghost {
    border-color: rgba(255, 255, 255, 0.48);
    color: #fff;
}

.button-outline {
    color: var(--color-primary);
    border-color: rgba(7, 52, 93, 0.22);
    background: transparent;
}

.text-link, .home-more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary);
    font-weight: 800;
}

.text-link::after, .home-more-link::after {
    width: 32px;
    height: 1px;
    content: "";
    background: currentColor;
}

.section, .page-section {
    padding: var(--section-gap) 0;
    min-height: 500px;
    width: 100%;
}

.section-heading, .section-title {
    margin-bottom: 44px;
}

.section-heading h2, .section-title h2, .home-section-kicker h2 {
    color: var(--color-text-strong);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.18;
    text-align: center;
}

.section-heading p, .section-title p, .home-section-kicker p, .home-about-copy p, .home-value-copy p, .home-base-copy p {
    color: var(--color-muted);
}

.eyebrow {
    color: var(--color-secondary);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.home-redesign {
    overflow: hidden;
}

.home-hero {
    min-height: 820px;
    height: 100vh;
    /* max-height: 980px; */
}

.home-hero .hero-slide::after, .page-hero .hero-slide::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgb(19 63 111 / 24%) 0%, rgb(56 103 153 / 48%) 42%, rgb(15 60 108 / 18%) 100%), linear-gradient(180deg, rgba(2, 15, 29, 0.18) 0%, rgba(2, 15, 29, 0.12) 90%);
}

.home-hero .hero-overlay, .page-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(4, 18, 34, 0.12), rgba(4, 18, 34, 0.72)), radial-gradient(circle at 74% 42%, rgba(40, 169, 191, 0.18), transparent 34%);
}

.home-hero-content {
    top: auto;
    width: min(calc(100% - 56px), 1240px);
    max-width: none;
    min-height: 100%;
    transform: none;
}

.home-hero-content .eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.home-hero-content h1 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 6vw, 46px);
    font-weight: 850;
    line-height: 1.08;
}

.home-hero-content .hero-lead {
    max-width: 760px;
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 19px;
    line-height: 1.8;
}

.home-hero-rail {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    width: min(880px, calc(100% - 56px));
    color: #fff;
    background: rgba(4, 18, 34, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
}

.home-hero-rail article {
    padding: 26px 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.home-hero-rail strong {
    display: block;
    margin-bottom: 8px;
    font-size: 34px;
    line-height: 1;
}

.home-hero-rail span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    line-height: 1.6;
}

.hero-control {
    left: 50%;
    right: auto;
    bottom: 150px;
    z-index: 5;
    width: min(calc(100% - 56px), 1240px);
    justify-content: flex-start;
    transform: translateX(-50%);
}

.hero-control button {
    width: 36px;
    height: 3px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.34);
}

.hero-control button.is-active {
    background: #fff;
}

.home-news-section {
    padding: 76px 0;
    background: #fff;
}

.home-news-layout {
    display: grid;
    grid-template-columns: 240px 1fr 120px;
    gap: 44px;
    align-items: start;
}

.home-section-kicker h2 {
    margin: 0;
}

.home-news-ledger {
    border-top: 1px solid var(--color-line);
}

.home-news-ledger a {
    display: grid;
    grid-template-columns: 96px 118px minmax(0, 1fr) 56px;
    gap: 24px;
    align-items: center;
    min-height: 92px;
    border-bottom: 1px solid var(--color-line);
    transition: color var(--transition), background var(--transition);
}

.home-news-ledger a:hover {
    color: var(--color-primary);
    background: linear-gradient(90deg, rgba(22, 132, 103, 0.06), transparent);
}

.home-news-ledger time strong {
    display: block;
    color: var(--color-text-strong);
    font-size: 25px;
    line-height: 1;
}

.home-news-ledger time span, .news-category, .home-news-ledger em {
    color: var(--color-muted);
    font-size: 13px;
    font-style: normal;
}

.home-news-ledger h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.home-news-ledger em {
    justify-self: end;
}

.home-about-section {
    /* background:
    linear-gradient(180deg, var(--color-bg-soft), #fff 78%),
    #fff; */
    min-height: 180px !important;
    /* margin:-100px; */
    padding: 0 !important;
}

.home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr);
    gap: 72px;
    align-items: center;
}

.home-about-copy h2, .home-value-copy h2, .home-base-copy h2 {
    margin: 0 0 24px;
    color: var(--color-text-strong);
    font-size: clamp(32px, 4.8vw, 52px);
    line-height: 1.12;
}

.home-about-copy p, .home-value-copy p, .home-base-copy p {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.9;
}

.home-about-media {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
}

.home-about-media::before {
    position: absolute;
    top: 36px;
    left: -42px;
    z-index: 1;
    width: 42%;
    height: 78%;
    content: "";
    border: 1px solid rgba(7, 52, 93, 0.2);
}

.home-about-media img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 520px;
    border-radius: 40px;
    object-fit: cover;
}

.home-stat-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* margin-top: 97px; */
    /* border-top: 1px solid var(--color-line); */
    /* border-bottom: 1px solid var(--color-line); */
}

.home-stat-bar article {
    min-height: 168px;
    text-align: left;
    /* padding: 28px 30px; */
    /* border-right: 1px solid var(--color-line); */
}

.home-stat-bar article:first-child {
    /* text-align:left; */
}

.home-stat-bar article:last-child {
    text-align: right;
    border-right: 0;
}

.home-stat-bar article:last-child strong {
    padding-left: 175px;
}

.home-stat-bar strong {
    display: block;
    color: var(--color-primary);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    text-align: left;
}

.home-stat-bar span {
    display: block;
    margin-top: 12px;
    color: var(--color-text-strong);
    font-weight: 800;
}

.home-stat-bar p {
    margin: 8px 0 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.7;
}

.home-solutions-section {
    background: var(--color-primary-deep);
}

.home-solutions-section .section-heading h2, .home-solutions-section .section-heading p {
    color: #fff;
}

.home-solutions-section .section-heading p {
    color: rgba(255, 255, 255, 0.72);
}

.home-solution-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-solution-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(260px, 1fr) auto;
    min-height: 470px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 20px 42px rgba(1, 45, 39, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(1, 45, 39, 0.24);
}

.home-solution-card.is-inverted {
    grid-template-rows: auto minmax(300px, 1fr);
}

.home-solution-card img {
    width: 100%;
    /* height: 100%; */
    min-height: 280px;
    object-fit: cover;
}

.home-solution-card-body {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 178px;
    padding: 24px 68px 28px 28px;
}

.home-solution-card.is-inverted .home-solution-card-body {
    min-height: 178px;
    padding-top: 28px;
}

.home-solution-card-body span {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.home-solution-card-body h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
}

.home-solution-card-body p {
    margin: 0;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.7;
}

.home-solution-card-body em {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
}

.home-solution-card.is-inverted .home-solution-card-body em {
    top: 28px;
    bottom: auto;
}

.home-solution-card-body em::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-58%, -50%) rotate(45deg);
}

.home-solution-card-body em::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2px;
    background: #fff;
    transform: translate(-62%, -50%);
}

.keyword-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 32px;
}

.keyword-row em {
    padding: 7px 10px;
    color: var(--color-primary);
    background: var(--color-bg-soft);
    border-left: 2px solid var(--color-secondary);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.home-value-section {
    background: #fff;
}

.home-value-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.82fr);
    gap: 72px;
    align-items: center;
}

.home-value-media {
    position: relative;
}

.home-value-media::after {
    position: absolute;
    right: -28px;
    bottom: -28px;
    width: 52%;
    height: 42%;
    content: "";
    background: var(--color-secondary);
    opacity: 0.16;
}

.home-value-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.home-value-tags {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

.home-value-tags span {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text-strong);
    font-weight: 750;
}

.home-value-tags strong {
    color: var(--color-secondary);
}

.home-projects-section {
    background: var(--color-bg-soft);
}

.home-case-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    gap: 14px;
}

.home-case-tile {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    color: #fff;
    background: var(--color-primary-deep);
}

.home-case-tile.is-large {
    grid-column: span 2;
    grid-row: span 2;
}

.home-case-tile.is-wide {
    grid-column: span 2;
}

.home-case-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 520ms ease;
}

.home-case-tile::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(4, 18, 34, 0.04), rgba(4, 18, 34, 0.82));
}

.home-case-tile div {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 26px;
    transform: translateY(8px);
    transition: transform var(--transition);
}

.home-case-tile span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.home-case-tile h3 {
    margin: 10px 0 8px;
    font-size: 22px;
    line-height: 1.32;
}

.home-case-tile p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.7;
}

.home-case-tile:hover img {
    transform: scale(1.05);
}

.home-case-tile:hover div {
    transform: translateY(0);
}

.home-section-action {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.home-base-section {
    color: #fff;
    background: linear-gradient(90deg, rgba(4, 27, 51, 0.96), rgba(7, 52, 93, 0.78)), url("/assets/img/zhanyanet/DJI_0754.jpg") center/cover;
}

.home-base-section .eyebrow, .home-base-section h2, .home-base-section p {
    color: #fff;
}

.home-base-section p {
    color: rgba(255, 255, 255, 0.74);
    text-align: justify;
}

.home-base-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap: 70px;
    align-items: end;
}

.home-base-flow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.home-base-flow span {
    min-height: 108px;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
}

.home-logo-section {
    padding: clamp(70px, 8vw, 112px) 0;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
}

.home-logo-head {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-bottom: clamp(30px, 4vw, 48px);
    text-align: center;
}

.home-logo-head h2 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(32px, 4.8vw, 52px);
    line-height: 1.12;
}

.home-logo-marquee {
    --home-logo-gap: 18px;
    --home-logo-card-width: clamp(148px, 13vw, 206px);
    position: relative;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9vw, #000 calc(100% - 9vw), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9vw, #000 calc(100% - 9vw), transparent 100%);
}

.home-logo-marquee::before, .home-logo-marquee::after {
    position: absolute;
    z-index: 2;
    top: 0;
    width: clamp(48px, 9vw, 128px);
    height: 100%;
    pointer-events: none;
    content: "";
}

.home-logo-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
}

.home-logo-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #f8fafc 0%, rgba(248, 250, 252, 0) 100%);
}

.home-logo-track {
    display: flex;
    width: max-content;
    transform: translate3d(0, 0, 0);
    animation: homeLogoMarquee 48s linear infinite;
    will-change: transform;
}

.home-logo-marquee:hover .home-logo-track {
    animation-play-state: paused;
}

.home-logo-set {
    display: flex;
    flex: 0 0 auto;
    gap: var(--home-logo-gap);
    padding-right: var(--home-logo-gap);
}

.home-logo-card {
    display: grid;
    place-items: center;
    flex: 0 0 var(--home-logo-card-width);
    width: var(--home-logo-card-width);
    height: 96px;
    padding: 18px 24px;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(8, 47, 95, 0.05);
}

.home-logo-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 150px;
    max-height: 54px;
    object-fit: contain;
    object-position: center;
    filter: saturate(0.92);
}

@keyframes homeLogoMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.page-hero {
    min-height: 560px;
    height: 100vh;
    /* max-height: 760px; */
}

.page-hero-slim {
    min-height: 460px;
    height: 56vh;
}

.page-hero .hero-content {
    top: auto;
    width: min(calc(100% - 56px), 1400px); 
    /* max-width: 880px; */
    min-height: inherit;
    transform: none;
}

.hero-content-2 {
    top: 20% !important;
}

.page-hero .hero-content h1 {
    font-size: clamp(38px, 5.5vw, 68px);
    position: absolute;
    left: 0;
    bottom: 50px;
}

.page-hero .hero-lead {
    max-width: 760px;
}

.breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--color-line);
}

.breadcrumb ol {
    min-height: 58px;
}

.page-section.alt {
    background: var(--color-bg-soft);
}

.feature-card, .panel, .fact-card, .contact-card, .job-card, .news-card, .case-card {
    border-radius: 0;
    border-color: rgba(7, 21, 35, 0.1);
    box-shadow: none;
}

.feature-card:hover, .case-card:hover, .news-card:hover, .business-showcase-card:hover {
    box-shadow: 0 24px 52px rgba(7, 21, 35, 0.12);
}

.business-showcase-card {
    border-radius: 0;
}

.business-showcase-card img {
    min-height: 410px;
}

.case-tile, .case-feature, .news-lead-story, .home-case-tile {
    border-radius: 0;
}

.news-feed-card {
    box-shadow: none;
}

.site-footer {
    background: #041b33;
}

.footer-grid {
    gap: 54px;
}

.site-footer h2 {
    color: #fff;
    font-size: 16px;
}

.site-footer p, .site-footer a, .footer-bottom {
    color: rgba(255, 255, 255, 0.68);
}

.qr-box {
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 1180px) {
    .header-actions .phone-link {
        display: none;
    }

    .home-news-layout, .home-about-grid, .home-value-layout, .home-base-grid {
        grid-template-columns: 1fr;
    }

    .home-solution-board {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .home-solution-card {
        min-height: 430px;
        border-radius: 24px;
    }

    .home-solution-card, .home-solution-card.is-inverted {
        grid-template-rows: auto auto;
    }

    .home-solution-card img {
        min-height: 240px;
    }

    .home-case-wall {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-logo-card {
        height: 88px;
    }
}

@media (max-width: 960px) {
    .container, .header-inner, .home-hero-content, .page-hero .hero-content {
        width: min(calc(100% - 36px), var(--container-width));
    }

    .header-inner {
        height: 72px;
    }

    .main-nav {
        top: 72px;
    }

    .main-nav ul {
        gap: 0;
    }

    .main-nav li {
        border-bottom: 1px solid var(--color-line);
    }

    .main-nav li:last-child {
        border-bottom: 0;
    }

    .main-nav li > a {
        display: flex;
        justify-content: space-between;
        min-height: 46px;
        padding: 0;
        font-size: 16px;
    }

    .has-dropdown > a::after {
        margin-left: auto;
        transition: transform var(--transition);
    }

    .has-dropdown.is-submenu-open > a::after {
        transform: rotate(-135deg) translateY(-1px);
    }

    .dropdown {
        position: static;
        top: auto;
        left: auto;
        display: block;
        min-width: 0;
        max-width: none;
        padding: 0 0 10px 18px;
        overflow: visible;
        color: var(--color-muted);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .has-dropdown:not(.is-submenu-open) > .dropdown {
        display: none;
    }

    .dropdown a {
        display: block;
        margin: 0;
        padding: 7px 0 7px 14px;
        color: var(--color-muted);
        background: transparent;
        border: 0;
        border-left: 1px solid rgba(8, 47, 95, 0.12);
        border-radius: 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .dropdown a:hover {
        color: var(--color-primary);
        background: transparent;
    }

    .home-hero {
        min-height: 760px;
        height: auto;
    }

    .home-hero-content {
        top: 46%;
    }

    .home-hero-content h1 {
        font-size: 38px;
    }

    .home-hero-content .hero-lead {
        font-size: 16px;
    }

    .home-hero-rail {
        left: 18px;
        right: 18px;
        grid-template-columns: 1fr;
        width: auto;
    }

    .home-hero-rail article {
        min-height: 0;
        padding: 16px 20px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .home-hero-rail article:first-child {
        border-top: 0;
    }

    .home-hero-rail strong {
        font-size: 26px;
    }

    .hero-control {
        display: none;
    }

    .section, .page-section {
        padding: 72px 0;
        overflow: hidden;
    }

    .home-news-layout {
        gap: 24px;
    }

    .home-news-ledger a {
        grid-template-columns: 78px 1fr;
        gap: 12px 18px;
        padding: 20px 0;
    }

    .home-news-ledger h3 {
        grid-column: 2;
    }

    .home-news-ledger em {
        display: none;
    }

    .news-category {
        align-self: end;
    }

    .home-about-media, .home-about-media img {
        min-height: 0;
        height: auto;
    }

    .home-stat-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-stat-bar article {
        border-bottom: 1px solid var(--color-line);
    }

    .home-solution-board {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-solution-card, .home-solution-card.is-inverted {
        min-height: 0;
        grid-template-rows: auto auto;
    }

    .home-solution-card img {
        min-height: 260px;
        max-height: 340px;
    }

    .home-solution-card-body, .home-solution-card.is-inverted .home-solution-card-body {
        min-height: 0;
        padding: 26px 70px 30px 24px;
    }

    .home-case-wall {
        grid-auto-rows: 300px;
    }

    .home-case-tile.is-large, .home-case-tile.is-wide {
        grid-column: span 1;
        grid-row: span 1;
    }

    .page-hero, .page-hero-slim {
        min-height: 420px;
        height: auto;
    }
}

@media (max-width: 640px) {
    .container, .header-inner, .home-hero-content, .page-hero .hero-content {
        width: min(calc(100% - 32px), var(--container-width));
    }

    .home-hero {
        height: auto;
        min-height: 0;
        padding-bottom: 24px;
    }

    .home-hero-content {
        top: auto;
        min-height: 0;
        padding: 112px 0 22px;
        justify-content: flex-start;
    }

    .home-hero-content h1, .page-hero .hero-content h1, .home-about-copy h2, .home-value-copy h2, .home-base-copy h2, .home-logo-head h2, .section-heading h2, .section-title h2, .home-section-kicker h2 {
        font-size: 30px;
        line-height: 1.22;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions .button {
        width: 100%;
        justify-content: center;
    }

    .home-news-ledger a {
        grid-template-columns: 1fr;
    }

    .home-news-ledger h3 {
        grid-column: auto;
    }

    .home-stat-bar, .home-base-flow, .home-case-wall {
        grid-template-columns: 1fr;
    }

    .home-hero-rail {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: min(calc(100% - 32px), var(--container-width));
        margin: 0 auto;
    }

    .home-stat-bar article {
        border-right: 0;
    }

    .home-solution-card {
        border-radius: 22px;
    }

    .home-solution-card img {
        min-height: 220px;
    }

    .home-case-wall {
        grid-auto-rows: 280px;
    }

    .home-logo-section {
        padding: 54px 0 62px;
    }

    .home-logo-marquee {
        --home-logo-gap: 12px;
        --home-logo-card-width: 136px;
    }

    .home-logo-card {
        height: 78px;
        padding: 14px 18px;
    }

    .home-logo-card img {
        max-height: 46px;
    }

    .footer-grid {
        gap: 34px;
    }
}

/* Hotfix v1.0 implementation */
:root {
    --radius: 12px;
    --media-radius: 16px;
}

.brand {
    gap: 10px;
}

.brand-mark {
    width: 54px;
    height: 54px;
}

.brand-name {
    color: currentColor;
    font-size: 19px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.header-actions {
    gap: 14px;
}

.hf-main {
    overflow: hidden;
    background: #fff;
}

.hf-hero {
    position: relative;
    min-height: 680px;
    color: #fff;
    background: #041b33;
}

.hf-hero-slim {
    min-height: 460px;
}

.hf-hero-media, .hf-hero-media img, .hf-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hf-hero-media img, .hf-hero-media video {
    object-fit: cover;
}

.hf-hero-media video {
    z-index: 1;
}

.hf-hero-media::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    background: linear-gradient(90deg, rgba(4, 18, 34, 0.84), rgba(4, 18, 34, 0.38) 58%, rgba(4, 18, 34, 0.18)), linear-gradient(180deg, rgba(4, 18, 34, 0.12), rgba(4, 18, 34, 0.7));
}

.hf-hero-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: inherit;
    padding: 130px 0 82px;
}

.hf-hero-left .hf-hero-copy {
    align-items: flex-start;
}

.hf-hero h1 {
    max-width: 980px;
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 5.8vw, 78px);
    font-weight: 850;
    line-height: 1.12;
}

.hf-hero p {
    max-width: 790px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(17px, 1.7vw, 22px);
    line-height: 1.8;
}

.hf-section {
    padding: clamp(72px, 8vw, 112px) 0;
}

.hf-soft {
    background: var(--color-bg-soft);
}

.hf-section-head {
    margin-bottom: 36px;
}

.hf-section-head h2, .hf-intro h2, .hf-base-copy h2, .hf-base-page h2, .hf-green-factory h2, .hf-history h2 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.16;
}

.hf-section-head p {
    max-width: 760px;
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.85;
}

.hf-intro, .hf-base-page, .hf-green-factory, .hf-detail-simple {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(34px, 6vw, 72px);
    align-items: center;
}

.hf-intro p, .hf-base-page p, .hf-base-copy p, .hf-detail-block p, .hf-article p {
    color: var(--color-muted);
    font-size: 17px;
    line-height: 1.95;
}

.hf-intro img, .hf-intro video, .hf-video-card, .hf-base-page img, .hf-green-factory img, .hf-detail-simple > img, .hf-article img, .hf-map {
    overflow: hidden;
    border-radius: var(--media-radius);
}

.hf-video-card video, .hf-intro img, .hf-base-page img, .hf-green-factory img, .hf-detail-simple > img, .hf-article img, .hf-map {
    width: 100%;
    object-fit: cover;
}

.hf-video-card video, .hf-intro img, .hf-base-page img {
    min-height: 500px;
}

.hf-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(44px, 6vw, 76px);
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
}

.hf-stat-row article {
    min-height: 170px;
    padding: 30px 26px;
    border-right: 1px solid var(--color-line);
}

.hf-stat-row article:last-child {
    border-right: 0;
}

.hf-stat-row strong {
    display: block;
    color: var(--color-primary);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
}

.hf-stat-row span {
    display: block;
    margin-top: 14px;
    color: var(--color-text-strong);
    font-weight: 800;
    line-height: 1.55;
}

.hf-card-grid {
    display: grid;
    gap: 22px;
}

.hf-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hf-image-card, .hf-service-grid article, .hf-case-card, .hf-news-list article {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(7, 21, 35, 0.08);
}

.hf-image-card img, .hf-service-grid img, .hf-case-card img, .hf-news-list img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.hf-image-card div, .hf-service-grid article > div, .hf-case-card div, .hf-news-list article > div {
    padding: 24px;
}

.hf-image-card h3, .hf-service-grid h3, .hf-case-card h3, .hf-news-list h2 {
    margin: 0 0 12px;
    color: var(--color-text-strong);
    font-size: 23px;
    line-height: 1.3;
}

.hf-image-card p, .hf-case-card p {
    margin: 0;
    color: var(--color-muted);
}

.hf-base-banner {
    color: #fff;
    background: linear-gradient(90deg, rgba(4, 27, 51, 0.95), rgba(7, 52, 93, 0.66)), url("../images/business-manufacturing-base-hero-v3.png") center/cover;
}

.hf-base-copy {
    max-width: 760px;
}

.hf-base-copy span {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.hf-base-copy h2, .hf-base-copy p {
    color: #fff;
}

.hf-case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hf-case-card {
    position: relative;
}

.hf-case-card span {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
}

.hf-case-card span::before {
    position: absolute;
    top: 16px;
    left: 14px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    content: "";
    transform: rotate(45deg);
}

.hf-partner-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.hf-partner-strip span {
    display: grid;
    min-height: 86px;
    place-items: center;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    color: var(--color-text-strong);
    font-weight: 800;
}

.hf-tree {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    min-height: 640px;
    gap: 24px;
}

.hf-tree-nav {
    display: grid;
    align-content: start;
    gap: 10px;
}

.hf-tree-nav button {
    display: grid;
    gap: 6px;
    min-height: 88px;
    padding: 18px 20px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    color: var(--color-text-strong);
    cursor: pointer;
}

.hf-tree-nav button.is-active {
    color: #fff;
    background: var(--color-primary);
}

.hf-tree-nav span {
    font-size: 18px;
    font-weight: 850;
}

.hf-tree-nav em {
    color: inherit;
    font-style: normal;
    opacity: 0.72;
}

.hf-tree-stage {
    position: relative;
    overflow: hidden;
    min-height: 640px;
    border-radius: var(--media-radius);
    color: #fff;
}

.hf-tree-stage img {
    width: 100%;
    height: 100%;
    min-height: 640px;
    object-fit: cover;
}

.hf-tree-stage::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(180deg, rgba(4, 18, 34, 0.08), rgba(4, 18, 34, 0.82));
}

.hf-tree-stage div {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 42px;
}

.hf-tree-stage span {
    color: rgba(255, 255, 255, 0.74);
    font-weight: 800;
}

.hf-tree-stage h2 {
    margin: 10px 0 12px;
    color: #fff;
    font-size: clamp(34px, 4vw, 58px);
}

.hf-tree-stage p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
}

.hf-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.hf-service-grid ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 16px 0 0;
    list-style: none;
}

.hf-service-grid li {
    padding: 8px 12px;
    background: var(--color-bg-soft);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 700;
}

.hf-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 42%);
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.hf-gallery img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--media-radius);
}

.hf-green-factory {
    color: #fff;
}

.hf-green-factory h2 {
    color: var(--color-text-strong);
}

.hf-two-blocks {
    display: grid;
    gap: 30px;
}

.hf-two-blocks article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
    gap: 36px;
    align-items: center;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
}

.hf-two-blocks article:nth-child(2) {
    grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1fr);
}

.hf-two-blocks img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--media-radius);
}

.hf-two-blocks h2 {
    margin: 0 0 16px;
    color: var(--color-text-strong);
}

.hf-two-blocks p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.85;
}

.hf-tool-board, .hf-culture-grid, .hf-honor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hf-tool-board article, .hf-culture-grid article, .hf-honor-grid article, .hf-contact-grid article {
    min-height: 150px;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
}

.hf-tool-board span, .hf-culture-grid span {
    color: var(--color-secondary);
    font-weight: 900;
}

.hf-tool-board h3, .hf-culture-grid strong, .hf-honor-grid h3, .hf-contact-grid h3 {
    display: block;
    margin: 18px 0 0;
    color: var(--color-text-strong);
    font-size: 22px;
}

.hf-case-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.hf-case-tabs a, .hf-filter-bar select {
    min-height: 44px;
    padding: 0 36px 0 16px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-text-strong);
    font-weight: 800;
}

.hf-case-tabs a.is-active {
    color: #fff;
    background: var(--color-primary);
}

.hf-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.hf-filter-bar label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-muted);
    font-weight: 800;
}

.benchmark-case-section {
    background: var(--color-bg-soft);
}

.benchmark-case-head {
    display: grid;
    gap: 12px;
    margin-bottom: 28px;
    text-align: center;
}

.benchmark-case-head span {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: 850;
}

.benchmark-case-head h2 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(34px, 4vw,46px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
}

.benchmark-filter-bar {
    justify-content: flex-end;
    margin-bottom: 30px;
}

.benchmark-filter-bar label {
    justify-content: space-between;
}

.benchmark-filter-bar select {
    min-width: 120px;
    padding-right: 46px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23607084' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 22px center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
}

.benchmark-case-grid {
    align-items: stretch;
    gap: 22px;
    margin-top: 50px;
}

.benchmark-case-card {
    display: flex;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: #f7f7f7;
    color: var(--color-text-strong);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-radius: 18px;
}

.benchmark-case-card[hidden] {
    display: none;
}

.benchmark-case-card img {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    transition: transform 700ms ease;
}

.benchmark-case-card .case-arrow {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-self: end;
    margin-top: 0;
    border-radius: 50%;
    background: #fff;
    /* border: 1px solid rgba(7, 21, 35, 0.14); */
    /* transition: border-color var(--transition), transform var(--transition); */
}

.benchmark-case-card .case-arrow::before {
    position: absolute;
    top: 15px;
    left: 14px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #111;
    border-right: 2px solid #111;
    content: "";
    transform: rotate(45deg);
}

.benchmark-case-card .benchmark-case-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12px;
    gap: 18px;
    align-items: start;
    min-height: 188px;
    padding: 26px 24px 28px;
    background: #ffffff;
}

.benchmark-case-card .benchmark-case-copy {
    min-width: 0;
    padding: 0;
}

.benchmark-case-card h3 {
    margin: 0 0 18px;
    color: #111;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.52;
    letter-spacing: 0;
    min-height: 40px;
    text-align: left;
}

.benchmark-case-card p {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    color: #777d83;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
}

.benchmark-case-card b {
    flex: 0 0 auto;
    color: #9a9fa5;
    font-weight: 750;
}

.benchmark-case-card:hover img {
    transform: scale(1.04);
}

.benchmark-case-card:hover .case-arrow {
    border-color: #111;
    transform: translateX(4px);
}

.benchmark-case-empty {
    padding: 42px 28px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    color: var(--color-muted);
    font-weight: 800;
    text-align: center;
}

.benchmark-pagination {
    margin-top: 42px;
}

.hf-detail-simple {
    align-items: start;
}

.hf-detail-simple > img {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 8;
}

.hf-detail-block {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
}

.hf-detail-block h2, .hf-article h2 {
    margin: 0 0 18px;
    color: var(--color-text-strong);
}

.hf-detail-block dl {
    display: grid;
    gap: 12px;
    margin: 0;
}

.hf-detail-block div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
}

.hf-detail-block dt {
    color: var(--color-muted);
    font-weight: 800;
}

.hf-detail-block dd {
    margin: 0;
    color: var(--color-text-strong);
}

.hf-culture-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hf-history {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
}

.hf-history ol {
    display: grid;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hf-history li {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-line);
}

.hf-history time {
    color: var(--color-secondary);
    font-size: 30px;
    font-weight: 850;
}

.hf-history span {
    align-self: center;
    color: var(--color-text-strong);
    font-weight: 800;
}

.hf-news-list {
    display: grid;
    gap: 22px;
}

.hf-news-list article {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: center;
}

.hf-news-list img {
    height: 100%;
    border-radius: 12px 0 0 12px;
}

.hf-news-list time {
    color: var(--color-secondary);
    font-weight: 850;
}

.hf-news-list a {
    display: inline-flex;
    margin-top: 16px;
    color: var(--color-primary);
    font-weight: 850;
}

.hf-article {
    max-width: 900px;
}

.hf-article img {
    margin: 24px 0;
    aspect-ratio: 16 / 9;
}

.hf-jobs details {
    margin-top: 16px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    overflow: hidden;
}

.hf-jobs summary {
    padding: 22px 26px;
    color: var(--color-text-strong);
    font-size: 22px;
    font-weight: 850;
    cursor: pointer;
}

.hf-jobs details > div {
    padding: 0 26px 26px;
    color: var(--color-muted);
}

.hf-jobs h3 {
    color: var(--color-text-strong);
}

.hf-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.hf-contact-grid article span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    color: #fff;
    font-weight: 850;
}

.hf-contact-grid p {
    margin: 10px 0 0;
    color: var(--color-muted);
}

.hf-contact-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: stretch;
}

.hf-contact-map img {
    width: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: var(--media-radius);
}

.hf-contact-map div {
    display: grid;
    align-content: center;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 12px;
}

.hf-contact-map h2 {
    margin: 0 0 14px;
    color: var(--color-text-strong);
}

.site-footer .brand-mark {
    width: 50px;
    height: 50px;
}

.feature-card, .panel, .fact-card, .contact-card, .job-card, .news-card, .case-card, .business-showcase-card, .case-tile, .case-feature, .news-lead-story, .home-case-tile, .qr-box {
    border-radius: 12px;
}

img, video, .hero-slide, .hero-slide img, .hero-slide video {
    border-radius: inherit;
}

@media (max-width: 1180px) {
    .hf-intro, .hf-base-page, .hf-green-factory, .hf-tree, .hf-two-blocks article, .hf-two-blocks article:nth-child(2), .hf-detail-simple, .hf-history, .hf-contact-map, .contact-map-shell {
        grid-template-columns: 1fr;
    }

    .hf-card-grid-3, .hf-case-grid, .hf-service-grid, .hf-contact-grid, .hf-tool-board, .hf-honor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hf-culture-grid, .hf-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .benchmark-filter-bar {
        justify-content: flex-start;
    }

    .benchmark-case-card .benchmark-case-info {
        min-height: 176px;
    }
}

@media (max-width: 760px) {
    .brand-mark {
        width: 44px;
        height: 44px;
    }

    .brand-name {
        font-size: 16px;
    }

    .hf-hero, .hf-hero-slim {
        min-height: 420px;
    }

    .hf-hero-copy {
        padding: 110px 0 56px;
    }

    .hf-hero h1 {
        font-size: 32px;
    }

    .hf-hero p {
        font-size: 15px;
    }

    .hf-card-grid-3, .hf-case-grid, .hf-service-grid, .hf-contact-grid, .hf-tool-board, .hf-honor-grid, .hf-culture-grid, .hf-stat-row, .hf-partner-strip {
        grid-template-columns: 1fr;
    }

    .contact-map-embed, .contact-map-embed iframe {
        min-height: 420px;
    }

    .hf-news-list article {
        grid-template-columns: 1fr;
    }

    .hf-news-list img {
        border-radius: 12px 12px 0 0;
    }

    .hf-tree-stage, .hf-tree-stage img {
        min-height: 420px;
    }

    .benchmark-case-head {
        gap: 8px;
        margin-bottom: 22px;
    }

    .benchmark-filter-bar {
        display: grid;
        gap: 12px;
    }

    .benchmark-filter-bar label {
        display: grid;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .benchmark-filter-bar select {
        width: 100%;
        min-width: 0;
    }

    .benchmark-case-card .case-arrow {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        top:-5px;
    }

    .benchmark-case-card .case-arrow::before {
        top: 13px;
        left: 13px;
    }

    .benchmark-case-card .benchmark-case-info {
        grid-template-columns: minmax(0, 1fr) 38px;
        min-height: 0;
        padding: 12px;
    }

    .benchmark-case-card p {
        /* display: grid; */
        gap: 3px;
    }

    .hf-detail-block div, .hf-history li {
        grid-template-columns: 1fr;
    }

    .hf-video-card video, .hf-intro img, .hf-base-page img {
        min-height: 300px;
    }
}

.about-page .about-hero, .page-hero.jobs-hero, .page-hero.contact-hero {
    min-height: 560px;
}

.about-page .about-hero > .hero-content, .page-hero.jobs-hero > .hero-content, .page-hero.contact-hero > .hero-content {
    min-height: 80vh;
}

@media (max-width: 960px) {
    .about-page .about-hero, .page-hero.jobs-hero, .page-hero.contact-hero {
        min-height: 420px;
    }
}

@media (max-width: 760px) {
    .about-page .about-hero, .page-hero.jobs-hero, .page-hero.contact-hero {
        min-height: 340px;
    }
}

@media (max-width: 640px) {
    .about-page .about-hero, .page-hero.jobs-hero, .page-hero.contact-hero {
        min-height: 300px;
    }

    .about-brand-board {
        --brand-columns-per-view: 2;
        --brand-card-width: calc((100vw - (var(--brand-side-padding) * 2) - var(--brand-gap)) / 2);
    }
}

.home-hero-content, .page-hero .hero-content {
    justify-content: flex-end;
    padding-bottom: clamp(58px, 10vh, 126px);
}

.home-hero-content > h2, .page-hero .hero-content > h2, .innovation-hero-copy > h2 {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 0 28px;
    color: #fff;
    font-size: clamp(34px, 4.8vw, 36px);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: 0;
}

.home-hero-content > h1, .page-hero .hero-content > h1, .innovation-hero-copy > h1 {
    position: static;
    max-width: 1400px;
    margin: 0;
    color: #fff;
    font-size: clamp(56px, 10.8vw, 88px);
    font-weight: 1200;
    line-height: 0.88;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.page-hero-slim .hero-content > h1 {
    font-size: clamp(48px, 8.8vw, 118px);
}

.home-hero-content .hero-lead, .page-hero .hero-lead {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin-top: 24px;
}

.home-hero-content .hero-actions, .page-hero .hero-actions, .page-hero .hero-tags {
    position: relative;
    z-index: 2;
}

.hero-minimal-page .site-header {
    color: var(--color-white);
}

.hero-minimal-page .page-hero {
    min-height: 100svh;
}

.hero-minimal-page .page-hero .hero-content {
    min-height: 100svh;
}

.hero-carousel {
    opacity: 1;
    transform: none;
}

.hero-carousel-track {
    position: absolute;
    inset: 0;
    display: flex;
    width: 400%;
    height: 100%;
    animation: heroCarouselSlide 18s linear infinite;
}

.hero-carousel-slide {
    position: relative;
    width: 25%;
    height: 100%;
    flex: 0 0 25%;
}

.hero-carousel .hero-carousel-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-carousel:hover .hero-carousel-track {
    animation-play-state: paused;
}

@keyframes heroCarouselSlide {
    0%, 18% {
        transform: translateX(0);
    }

    28%, 46% {
        transform: translateX(-25%);
    }

    56%, 74% {
        transform: translateX(-50%);
    }

    84%, 100% {
        transform: translateX(-75%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel-track {
        animation: none;
    }
}

@media (max-width: 960px) {
    .home-hero-content > h1, .page-hero .hero-content > h1, .innovation-hero-copy > h1 {
        font-size: clamp(46px, 13vw, 104px);
        line-height: 0.94;
    }
}

@media (max-width: 640px) {
    .home-hero-content, .page-hero .hero-content {
        padding-top: 112px;
        padding-bottom: 44px;
    }

    .home-hero-content > h2, .page-hero .hero-content > h2, .innovation-hero-copy > h2 {
        margin-bottom: 16px;
        font-size: 28px;
    }

    .home-hero-content > h1, .page-hero .hero-content > h1, .innovation-hero-copy > h1 {
        font-size: clamp(39px, 15vw, 72px);
        line-height: 0.98;
    }

    .page-hero-slim .hero-content > h1 {
        font-size: clamp(36px, 13vw, 64px);
    }
}

.business-dropdown {
    min-width: 220px;
    padding: 10px;
}

.business-dropdown .dropdown-item {
    position: relative;
}

.business-dropdown .dropdown-item.has-subdropdown::after {
    position: absolute;
    top: -10px;
    right: -14px;
    bottom: -10px;
    width: 14px;
    content: "";
}

.business-dropdown .dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-primary);
    font-weight: 750;
}

.business-dropdown .has-subdropdown > .dropdown-link::after {
    width: 6px;
    height: 6px;
    margin-left: 16px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.sub-dropdown {
    position: absolute;
    top: -10px;
    left: calc(100% + 12px);
    min-width: 210px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(8, 47, 95, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 41;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity var(--transition), transform var(--transition);
}

.business-dropdown .dropdown-item:hover > .sub-dropdown, .business-dropdown .dropdown-item:focus-within > .sub-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.sub-dropdown a {
    padding: 8px 12px;
    color: var(--color-muted);
    font-size: 13px;
}

[id] {
    scroll-margin-top: 96px;
}

@media (max-width: 960px) {
    .dropdown::before, .sub-dropdown::before {
        display: none;
    }

    .business-dropdown {
        padding: 0 0 10px 18px;
    }

    .business-dropdown .dropdown-link {
        font-size: 14px;
        font-weight: 700;
    }

    .business-dropdown .has-subdropdown > .dropdown-link::after {
        display: inline-block;
        flex: 0 0 auto;
        margin-left: 10px;
        margin-right: 4px;
        border-top: 0;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform var(--transition);
    }

    .business-dropdown .has-subdropdown.is-submenu-open > .dropdown-link::after {
        transform: rotate(-135deg) translateY(-1px);
    }

    .business-dropdown .dropdown-item.has-subdropdown::after {
        display: none;
    }

    .sub-dropdown {
        position: static;
        top: auto;
        left: auto;
        min-width: 0;
        max-width: none;
        padding: 0 0 6px 14px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: auto;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .business-dropdown .has-subdropdown:not(.is-submenu-open) > .sub-dropdown {
        display: none;
    }

    .sub-dropdown a {
        padding: 5px 0 5px 14px;
        font-size: 13px;
    }
}

.text-left {
    text-align: left !important;
}

.h800 {
    min-height: 800px;
}

/* Reference-style footer */
.site-footer {
    --footer-divider: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.76);
    background: #3b4553;
    padding: 44px 0 0;
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2.4fr) 156px;
    grid-template-areas: "brand links links" "topline topline topline" "contact contact qr" "bottomline bottomline bottomline";
    gap: 0 64px;
    padding: 0 0 38px;
}

.site-footer .footer-grid::before, .site-footer .footer-grid::after {
    display: block;
    height: 1px;
    background: var(--footer-divider);
    content: "";
}

.site-footer .footer-grid::before {
    grid-area: topline;
    margin: 32px 0 50px;
}

.site-footer .footer-grid::after {
    grid-area: bottomline;
    margin-top: 12px;
}

.site-footer .footer-brand {
    display: grid;
    grid-area: brand;
    align-content: start;
    gap: 18px;
}

.site-footer .footer-brand .brand {
    width: max-content;
    color: #fff;
}

.site-footer .brand-mark {
    width: 96px;
    height: 96px;
}

.site-footer .brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.site-footer .footer-brand p {
    max-width: 310px;
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
}

.site-footer .footer-links {
    display: flex;
    grid-area: links;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(28px, 6vw, 96px);
    min-height: 72px;
}

.site-footer .footer-links h2, .site-footer .footer-links a {
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.site-footer .footer-contact {
    display: grid;
    grid-area: contact;
    grid-template-columns: minmax(260px, 0.7fr) minmax(260px, 0.8fr) minmax(260px, 1.2fr);
    gap: 28px 34px;
    align-content: start;
}

.site-footer .footer-contact h2 {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-weight: 800;
}

.site-footer .footer-contact p {
    position: relative;
    min-height: 62px;
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
}

.site-footer .footer-contact p::before {
    display: block;
    font-family: bootstrap-icons;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    vertical-align: -0.125em;
    margin-right: 8px;
    margin-bottom: 8px;
    color: #fff;
}

.site-footer .footer-contact p:nth-of-type(1)::before {
    content: "\f5c1";
}

.site-footer .footer-contact p:nth-of-type(2)::before,
.site-footer .footer-contact p:nth-of-type(3)::before {
    content: "\f3e7";
}

.site-footer .footer-contact a {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.site-footer .footer-contact p:nth-of-type(2) a {
    font-size: 15px;
}

.site-footer .qr-box {
    display: grid;
    grid-area: qr;
    justify-items: center;
    align-content: start;
    justify-self: end;
    gap: 14px;
    /* min-width: 132px; */
    text-align: center;
    margin-top: -40px !important;
}

.site-footer .qr-box img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}

.site-footer .qr-box p {
    margin: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 800;
}

.site-footer .footer-bottom {
    color: rgba(255, 255, 255, 1);
    border-top: 0;
}

.site-footer .footer-bottom .container {
    padding: 0 0 34px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .site-footer .footer-grid {
        grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.8fr) 140px;
        gap: 0 34px;
    }

    .site-footer .footer-links {
        gap: 28px;
    }

    .site-footer .footer-contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .site-footer {
        padding-top: 34px;
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "links" "topline" "contact" "qr" "bottomline";
        gap: 24px;
        padding-bottom: 30px;
    }

    .site-footer .footer-grid::before {
        margin: 0 0 10px;
    }

    .site-footer .footer-grid::after {
        margin-top: 8px;
    }

    .site-footer .footer-links {
        flex-wrap: wrap;
        justify-content: flex-start;
        min-height: 0;
        gap: 16px 24px;
    }

    .site-footer .footer-contact {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .site-footer .qr-box {
        justify-self: start;
    }

    .site-footer .footer-bottom .container {
        display: grid;
        gap: 8px;
        padding-bottom: 28px;
    }
}

.text-center {
    text-align: center;
}

/* Mobile nav color guard */
@media (max-width: 960px) {
    body.menu-open .site-header, .site-header.is-open {
        color: var(--color-text-strong);
        background: #fff;
        border-bottom-color: rgba(7, 21, 35, 0.08);
    }

    body.menu-open .site-header .icon-button,
    body.menu-open .site-header .menu-toggle,
    body.menu-open .site-header .phone-link {
        color: var(--color-text-strong);
    }

    .main-nav,
    body.menu-open .main-nav {
        color: var(--color-text-strong);
        background: #fff;
        border-top: 1px solid var(--color-line);
    }

    .main-nav li > a,
    body.menu-open .main-nav li > a {
        color: var(--color-text-strong);
    }

    .main-nav li > a:hover,
    .main-nav li > a:focus-visible,
    .main-nav li > a.is-current,
    .has-dropdown.is-submenu-open > a,
    body.menu-open .main-nav li > a:hover,
    body.menu-open .main-nav li > a:focus-visible,
    body.menu-open .main-nav li > a.is-current,
    body.menu-open .has-dropdown.is-submenu-open > a {
        color: var(--color-primary);
    }

    .main-nav .dropdown,
    .main-nav .sub-dropdown,
    body.menu-open .main-nav .dropdown,
    body.menu-open .main-nav .sub-dropdown {
        color: var(--color-muted);
        background: transparent;
    }

    .main-nav .dropdown a,
    .main-nav .sub-dropdown a,
    body.menu-open .main-nav .dropdown a,
    body.menu-open .main-nav .sub-dropdown a {
        color: var(--color-muted);
        background: transparent;
    }

    .main-nav .dropdown a:hover,
    .main-nav .dropdown a:focus-visible,
    .main-nav .dropdown a.is-current,
    .main-nav .sub-dropdown a:hover,
    .main-nav .sub-dropdown a:focus-visible,
    .main-nav .sub-dropdown a.is-current,
    body.menu-open .main-nav .dropdown a:hover,
    body.menu-open .main-nav .dropdown a:focus-visible,
    body.menu-open .main-nav .dropdown a.is-current,
    body.menu-open .main-nav .sub-dropdown a:hover,
    body.menu-open .main-nav .sub-dropdown a:focus-visible,
    body.menu-open .main-nav .sub-dropdown a.is-current {
        color: var(--color-primary);
    }

    .main-nav .business-dropdown .dropdown-link,
    body.menu-open .main-nav .business-dropdown .dropdown-link {
        color: var(--color-primary);
    }

    .main-nav .business-dropdown .has-subdropdown.is-submenu-open > .dropdown-link,
    body.menu-open .main-nav .business-dropdown .has-subdropdown.is-submenu-open > .dropdown-link {
        color: var(--color-secondary);
    }
}