/* ==========================================================================
   Unilumin S — 1:1 style clone of en.unilumin.com (tokens extracted from main.css)
   ========================================================================== */

:root {
    --fastest: 0.15s;
    --faster: 0.25s;
    --fast: 0.35s;
    --slow: 0.65s;
    --slower: 0.75s;
    --slowest: 1s;
    --default-duration: var(--fast);
    --default-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    --color-primary: #0d50eb;
    --color-primary-hover: #0049c7;
    --color-green: #00c684;
    --color-red: #ec0204;
    --color-black: #191919;
    --color-white: #ffffff;
    --color-gray-bg: #f3f5f7;
    --color-gray-border: #cfd0d5;
    --color-gray-text: #575656;
    --color-bg: #000000;
    --color-fg: #ffffff;
    --color-bg-rgb: 0, 0, 0;
    --color-fg-rgb: 255, 255, 255;
    --radius: 1.25rem;
}

/* ---------- Reset/base (参考站实测: html font-size 随视口等比 100vw/120, 移动 100vw/64) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-size: calc(100vw / 120); }
body {
    margin: 0;
    font-family: "Figtree", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-fg);
    background-color: var(--color-bg);
    padding: 0;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }
ul { margin: 0; padding-left: 1.5em; }

/* ---------- Container (参考站实测: 桌面 max-width 88rem 居中, padding 0; 窄屏 media 覆盖) ---------- */
.container {
    --max-width: 88rem;
    --padding-x: 0;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
    width: 100%;
}

/* ---------- 排版 Heading ---------- */
.heading {
    --icon-size: 4rem;
    --margin: 6rem;
    font-size: 5.25rem;
    line-height: 6rem;
    gap: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-fg);
}
.heading h1, .heading h2 { font-size: inherit; line-height: inherit; font-weight: 600; margin: 0; }
.heading sup { font-size: 0.35em; font-family: sans-serif; font-weight: 400; margin-left: 0.25em; }
.heading .icon-tricolor { width: var(--icon-size); height: var(--icon-size); }
.icon-tricolor svg { width: 100%; height: 100%; display: block; }
.icon-tricolor rect { rx: 2; }

._header { text-align: center; padding-top: 6rem; padding-bottom: 4rem; }
/* 参考站真实规则: flex column 居中 + max-width 900px + 150px 上边距 */
.p-home ._header {
    display: flex; flex-direction: column; align-items: center;
    margin-top: 9.375rem; margin-bottom: 4rem;
    max-width: 56.25rem; margin-left: auto; margin-right: auto;
    padding-top: 0; padding-bottom: 0;
}
.p-home ._header .heading { text-transform: initial; }
.p-home ._header .subtitle { text-align: center; font-size: 1.25rem; margin-top: 1rem; color: var(--color-fg); }
.p-home ._header .btn { margin-top: 2rem; }
._header .subtitle { font-size: 1.25rem; color: var(--color-fg); opacity: 0.8; margin-top: 1.25rem; }

/* ---------- 黑页配色变量 (.black 与参考站一致) ---------- */
.black { --color-bg: #000000; --color-bg-rgb: 0,0,0; --color-fg: #ffffff; --color-fg-rgb: 255,255,255; background-color: var(--color-bg); color: var(--color-fg); display: flow-root; }

/* ---------- Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    transition-property: background-color, color, box-shadow;
    transition-duration: var(--fast);
    transition-timing-function: var(--default-easing);
    background-color: transparent;
}
/* 参考站: 滚动后 header 白底黑字+阴影 (scrollbar-start 态) */
.header.scrolled, .header.solid {
    background-color: #fff;
    color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.header.scrolled .nav a:hover, .header.solid .nav a:hover { background-color: rgba(0,60,200,.15); }
.header.scrolled .search-box .control::placeholder { color: rgba(0,0,0,.6); }
.header.scrolled .search-box { background: rgba(0,0,0,.05); }
.header > .container { position: relative; display: flex; align-items: center; height: 5rem; gap: 0.5rem; }
.header .logo { width: 9rem; height: 2.25rem; margin-right: auto; display: flex; align-items: center; }
.header .logo img, .header .logo svg { width: 100%; height: 100%; object-fit: contain; }
.header .nav {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-weight: 500; display: flex; gap: 1.5rem;
}
.header .nav > a { padding: 0.5rem 1rem; border-radius: 9999px; transition: background-color 0.25s ease-in-out; }
.header .nav > a:hover { background-color: hsla(0,0%,100%,.25); text-decoration: underline; }
.header.scrolled .nav > a:hover { background-color: rgba(0,60,200,.15); }
.header .action { position: relative; display: flex; width: 1.5rem; height: 1.5rem; margin-left: 0.75rem; color: var(--color-fg); }
.header .action > * { margin: auto; }
.header .action svg { width: 1.25rem; height: 1.25rem; }
.header .action.menu { width: auto; }
.header .action.menu .icon-menu, .header .action.menu .icon-close { display: flex; width: 1.5rem; height: 1.5rem; }
.header .action.menu.open .icon-menu, .header .action.menu:not(.open) .icon-close { display: none; }
.header .language-list { position: absolute; top: 2rem; right: 0; background: #fff; color: #000; border-radius: 0.75rem; padding: 0.75rem; min-width: 10rem; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.1); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.header .action.language:hover .language-list, .header .action.language.open .language-list { opacity: 1; visibility: visible; }
.header .language-list a { display: block; padding: 0.25rem 0.5rem; border-radius: 0.5rem; font-size: 0.875rem; text-align: center; }
.header .language-list a:hover { text-decoration: 2px underline; }
.header .search-box {
    width: 41.6666666667%; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
    border-top: 1px solid transparent; border-bottom: 1px solid currentColor;
    display: none; align-items: center;
}
.header.search-box-open .search-box { display: flex; }
.header.search-box-open .logo { display: none; }
.header .search-box .control { width: 0; flex-grow: 1; padding: 0.5rem 0.75rem 0.5rem 0; border-radius: 0; background-color: initial; color: currentColor; }
.header .search-box .control::placeholder { color: inherit; opacity: .6; }
.header .search-box button.icon-search { display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; color: inherit; }
.header .search-box button.icon-search svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { --line-width: 11rem; position: relative; z-index: 9; margin-top: 2rem; }
.breadcrumb .content { position: relative; border-bottom: 1px solid var(--color-gray-border); padding: 1.25rem 0; display: flex; align-items: center; }
.breadcrumb .content::after {
    content: ""; position: absolute; left: 0; top: 100%;
    width: var(--line-width); max-width: 100%; height: 1px;
    background-image: linear-gradient(90deg, #0D50EB 50%, #00C684 50%, #00C684 75%, #EC0204 75%);
}
.breadcrumb .slash { margin: 0 0.5rem; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration: underline; }
.p-home .breadcrumb { display: none; }

/* ---------- Btn ---------- */
.btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; line-height: 1; min-width: 8rem; height: 3rem; padding: 0.5rem 1.5rem;
    overflow: hidden; border-radius: 0.5rem;
}
.btn.round { border-radius: 9999px; }
.btn.blue { background-color: #0d50eb; color: #fff; }
.btn .wrapper { overflow: hidden; }
.btn .name { transition: transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); }
.btn:not(:disabled):hover .name { animation: btn-shuttle 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); }
@keyframes btn-shuttle {
    0% { transform: translateY(0); }
    40% { transform: translateY(-120%); }
    41% { transform: translateY(120%); }
    100% { transform: translateY(0); }
}

/* ---------- Icon btn (arrow circle) ---------- */
.icon-btn {
    --btn-size: 3rem; --icon-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    width: var(--btn-size); height: var(--btn-size); border-radius: 9999px;
    color: inherit;
}
.icon-btn svg { width: var(--icon-size); height: var(--icon-size); }
.icon-arrow { transform: rotate(0deg); }
.news .icon-btn, .product .icon-btn, .case .icon-btn { background-color: #0d50eb; color: #fff; transform: rotate(-45deg); }
.news a:hover .icon-btn svg, .product:hover .icon-btn svg, .case:hover .icon-btn svg { animation: icon-btn-shuttle 1s; }
@keyframes icon-btn-shuttle {
    0% { transform: translate(0, 0); }
    40% { transform: translate(120%, -120%); }
    41% { transform: translate(-120%, 120%); }
    100% { transform: translate(0, 0); }
}

/* ---------- Banner (内页) ---------- */
.banner {
    position: absolute; z-index: -1; inset: 0 0 auto;
    width: 100%; max-width: 120rem; height: 40.625rem;
    object-fit: cover; margin-left: auto; margin-right: auto;
}

/* ---------- header-2 内页标题区 (参考站: 完整 .heading 5.25rem 居中) ---------- */
.header-2 { padding-top: 6rem; }
.p-products .header-2, .p-news .header-2, .p-about .header-2, .p-contact .header-2, .p-solutions .header-2, .p-service .header-2, .p-news-single .header-2, .p-product-single .header-2 { padding-bottom: 6rem; }
.p-case-study .header-2 { padding-bottom: 12rem; }
.header-2 .meta { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-top: 2rem; padding-bottom: 2rem; font-size: 1.125rem; }
.header-2 .meta > :not(:last-child) { position: relative; margin-right: 1.25rem; padding-right: 1.25rem; }
.header-2 .meta > :not(:last-child)::after {
    content: ""; position: absolute; inset: 0 0 0 auto; margin: auto 0;
    height: 0.75em; border-left: 1px solid rgba(0,0,0,0.25);
}

/* ---------- Filter ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: flex-end; margin-top: 2.5rem; }
.filter .select { width: 16.875rem; }
.filter .select select,
.filter .searchbox .input {
    width: 100%; height: 3rem; border: 1px solid rgba(255,255,255,0.3); border-radius: 9999px;
    padding: 0 1.25rem; color: var(--color-fg); background: rgba(255,255,255,0.06);
    appearance: none; -webkit-appearance: none;
}
.filter .select select option { background: #1e1e1e; }
.filter .searchbox { position: relative; width: 16.875rem; }
.filter .searchbox .input { padding-right: 3.5rem; }
.filter .searchbox .icon-btn { position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%); background-color: #0d50eb; color: #fff; }

/* ---------- 全屏菜单 overlay ---------- */
.menu-overlay {
    position: fixed; inset: 0; background-color: rgba(0,0,0,0.07);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 11; display: none; flex-direction: column;
}
.menu-overlay.open { display: flex; }
.menu-overlay .container { --padding-x: 8rem; width: 100%; height: 100%; padding-top: 2rem; padding-bottom: 2rem; overflow: auto; }
.menu-overlay .wrapper { position: relative; background-color: #1e1e1e; border-radius: 1.25rem; padding: 4rem; }
.menu-overlay .icon-btn.icon-close { --btn-size: 2.5rem; --icon-size: 1.25rem; position: absolute; top: 0.5rem; right: 0.5rem; color: #fff; }
.menu-overlay .icon-btn.icon-close:hover { background-color: #575656; }
.menu-overlay .content { position: relative; display: flex; }
.menu-overlay .item { display: flex; }
.menu-overlay .link { color: #575656; transition: color 0.25s; white-space: nowrap; }
.menu-overlay .link:hover, .menu-overlay .link.active { color: #fff; }
.menu-overlay .link .name { transition: transform 0.25s; }
.menu-overlay .link:hover .name { transform: translateX(8px); }
.menu-overlay .list.a { width: 33.75rem; }
.menu-overlay .list.a > .item > .link > .name { font-size: 3.25rem; font-weight: 500; display: flex; align-items: center; line-height: 1.3; }
.menu-overlay .list.a > .item { padding: 0.25rem 0; align-items: center; }
.menu-overlay .list.a > .item .children { display: none; }
.menu-overlay .item:hover > .children, .menu-overlay .item.open > .children { display: block; }
.menu-overlay .list.b { padding: 0.5rem 0 1rem 2rem; }
.menu-overlay .list.b > .item > .link { font-size: 1.5rem; font-weight: 500; color: #9b9b9b; padding: 0.35rem 0; display: inline-block; }
.menu-overlay .list.b > .item:hover > .children { display: block; }
.menu-overlay .list.c { padding: 0.25rem 0 0.75rem 2rem; }
.menu-overlay .list.c > .item > .link { font-size: 1.125rem; color: #575656; padding: 0.3rem 0; display: inline-block; }
.menu-overlay .list.c > .item > .link:hover { color: #fff; }
.menu-overlay ._footer { display: flex; align-items: center; gap: 0.75rem; margin-top: 4rem; font-size: 0.875rem; color: #9b9b9b; }
.menu-overlay ._footer a { color: #9b9b9b; }
.menu-overlay ._footer a:hover { color: #fff; }
.menu-overlay ._footer .icon-language { display: flex; width: 1.5rem; height: 1.5rem; }
.menu-overlay ._footer .slash { border-left: 1px solid #333; height: 1rem; }

/* ---------- Home: hero swiper ---------- */
.p-home .swiper-banner { margin-top: -6rem; position: relative; height: 50rem; overflow: hidden; }
.p-home .swiper-banner .swiper-slide { position: relative; }
.p-home .swiper-banner .image { width: 100%; height: 50rem; object-fit: cover; }
.p-home .swiper-banner video.image { background: #000; }
.p-home .swiper-banner .overlay { position: absolute; inset: 0; }
.p-home .swiper-banner .swiper-slide.playing .overlay { display: none; }
.p-home .swiper-banner .heading { text-align: left; justify-content: flex-start; font-size: 5.25rem; line-height: 6rem; }
.p-home .swiper-banner .content { max-width: 64rem; padding-top: 14rem; display: flex; flex-direction: column; align-items: flex-start; }
.p-home .swiper-banner .btn { margin-top: 3rem; font-size: 0.875rem; }
.p-home .swiper-banner .swiper-pagination { position: absolute; z-index: 1; inset: auto 0 0; margin: 0 auto 6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.p-home .swiper-banner .swiper-pagination .bullet { height: 0.375rem; width: 2rem; border-radius: 2px; transition: width 0.25s; }
.p-home .swiper-banner .swiper-pagination .bullet:nth-child(3n+1) { background-color: #0d50eb; }
.p-home .swiper-banner .swiper-pagination .bullet:nth-child(3n+2) { background-color: #00c684; }
.p-home .swiper-banner .swiper-pagination .bullet:nth-child(3n) { background-color: #ec0204; }
.p-home .swiper-banner .swiper-pagination .bullet.active { width: 5rem; }

/* ---------- Home: app scene ---------- */
.p-home .container.a { padding-top: 4rem; }
.p-home .app-scene-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; margin-top: 4rem; }
.p-home .app-scene-nav .action { font-weight: 500; font-size: 1.5rem; transition: color 0.25s ease-in-out; color: hsla(0,0%,100%,0.25); }
.p-home .app-scene-nav .action.active { color: var(--color-fg); text-decoration: underline; }
.p-home .app-scene-nav .action:not(.active):hover { color: currentColor; }
.p-home .case-swipers { margin-top: 3rem; }
.p-home .swiper-cases { overflow: visible; }
.p-home .swiper-cases:not(.active) { display: none; }
.p-home .swiper-cases .swiper-slide { width: 31.25rem; border-radius: var(--radius); margin-left: 1rem; margin-right: 1rem; position: relative; overflow: hidden; }
.p-home .swiper-cases .swiper-slide .image { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: inherit; }
.p-home .swiper-cases .overlay { position: absolute; inset: auto 0 0; color: #fff; padding: 2rem; background-image: linear-gradient(180deg, transparent, #000000); border-radius: inherit; }
.p-home .swiper-cases .overlay .title { font-size: 1.5rem; font-weight: 600; }

/* ---------- Home: products row (参考站真实公式 --total:100 37/63) ---------- */
.p-home .row-products { --total: 100; --gap: 2rem; display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: 9.375rem; }
.p-home .row-products .product { --size: 37; --column: calc(var(--total) / var(--size)); width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)); }
.p-home .row-products .product :is(.image, .image-2) { height: 100%; width: 100%; }
.p-home .row-products .product .image-2 { display: none; border-radius: calc(var(--radius) - 2px); aspect-ratio: 900/600; object-fit: cover; }
.p-home .row-products .product:nth-child(4n+2), .p-home .row-products .product:nth-child(4n+3) { --size: 63; --column: calc(var(--total) / var(--size)); width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)); }
.p-home .row-products .product:nth-child(4n+2) .image, .p-home .row-products .product:nth-child(4n+3) .image { display: none; }
.p-home .row-products .product:nth-child(4n+2) .image-2, .p-home .row-products .product:nth-child(4n+3) .image-2 { display: block; }

/* ---------- Product / Case / solution cards (通用, 参考站规则) ---------- */
.product, .case, .solution-card {
    position: relative; z-index: 1; border-radius: var(--radius); padding: 2px;
    background-clip: content-box; background-color: var(--color-bg); color: var(--color-fg);
}
.product.black { --color-bg: #191919; }
.product .image { border-radius: inherit; width: 100%; aspect-ratio: 500/600; object-fit: cover; }
.case .image, .solution-card .image { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
/* 渐变描边: 默认隐藏 hover 显示 (参考站 product::before) */
.anim-gradient::before, .anim-gradient::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
    background: linear-gradient(135deg, #0d50eb, #00c684 50%, #ec0204);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity .35s var(--default-easing), visibility .35s;
}
.anim-gradient::after { filter: blur(8px); }
.anim-gradient:hover::before, .anim-gradient:hover::after { opacity: 1; visibility: visible; }
.product .overlay {
    position: absolute; inset: 0; border-radius: inherit; padding: 2rem; text-align: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.product .overlay .title { font-size: 2.25rem; font-weight: 600; }
.product .overlay .title sup { font-size: 0.5em; font-family: sans-serif; font-weight: 400; margin-left: 0.25em; }
.product .icon-btn { position: absolute; top: 1rem; right: 1rem; background-color: #0d50eb; color: #fff; transform: rotate(-45deg); }
.product:not(:hover,:focus-visible) .icon-btn { opacity: 0; visibility: hidden; transform: rotate(-45deg) scale(0); }
.product:hover .icon-btn svg { animation: icon-btn-shuttle 1s; }
.case .info { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }

/* ---------- product list 页 ---------- */
.product-list { --gap: 2rem; display: flex; flex-wrap: wrap; gap: var(--gap); }
.product-list .product { width: calc((100% - 2 * var(--gap)) / 3); }
.product-list-wrap { padding-top: 4rem; padding-bottom: 8rem; }
.product-list .title { font-size: 1.5rem; }

/* ---------- case list 页 ---------- */
.case-section { padding-top: 6rem; padding-bottom: 8rem; }
.case-list { --column-gap: 2rem; --row-gap: 4rem; display: flex; flex-wrap: wrap; gap: var(--row-gap) var(--column-gap); }
.case-list .case { width: calc((100% - var(--column-gap)) / 2); background-color: #fff; color: #000; }
.case-list .case .wrapper { position: relative; }
.case-list .case .image { aspect-ratio: 4/3; }
.case-list .case .info { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 2rem; background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent 45%); color: #fff; }
.case-list .case .title { font-size: 2rem; font-weight: 600; }
.case-list .case .desc { margin-top: 0.5rem; font-size: 1rem; opacity: 0.85; }

/* ---------- News 列表页 (参考站: 白底黑字 无banner, heading 6rem 顶距) ---------- */
body.p-news { background-color: #fff; color: #000; }
.p-news { --color-bg: #ffffff; --color-fg: #000000; --color-bg-rgb: 255,255,255; --color-fg-rgb: 0,0,0; }
.p-news .heading { padding-top: 6rem; padding-bottom: 6rem; }
.p-news .heading .icon-tricolor svg { filter: brightness(0.9); }
.p-news .news { border-color: #cfd0d5; }
.p-news .pagination { --background-color: #F3F5F7; --foreground-color: #000; }

/* ---------- News rows (参考站: 每行 border-bottom, 连续行去掉上边线) ---------- */
.news-list { }
.news {
    display: flex; align-items: center;
    padding: 2.5rem 0; gap: 3rem; font-weight: 600;
    border-bottom: 1px solid var(--color-gray-border);
    color: var(--color-fg);
}
.news:first-child { border-top: 1px solid var(--color-gray-border); }
.news .meta { margin-right: 4rem; }
.news .date { font-size: 1.25rem; }
.news .content { flex: 1; max-width: 667px; margin-left: auto; }
.news .title { font-size: 1.5rem; line-height: 2rem; }
.news .media { width: 12.5rem; position: relative; }
.news .image { width: 100%; border-radius: 0.625rem; aspect-ratio: 16/9; object-fit: cover; }
.news .actions { margin-left: 1rem; display: flex; }
.news .actions .icon-btn { position: static; }
.news:hover .icon-btn svg { animation: icon-btn-shuttle 1s; }

/* ---------- White sections ---------- */
.white { background-color: #fff; color: #000; display: flow-root; }
.white .heading { color: #000; }
.p-home .white { margin-top: -2rem; }

/* ---------- hypertext 富文本排版 (参考站完整规则) ---------- */
.hypertext { --media-margin: 3rem; --heading-font-size: 1.5rem; --heading-line-height: 2rem; --heading-color: currentColor; }
.hypertext :is(h1, h2, h3, h4, h5, h6) { font-size: var(--heading-font-size); line-height: var(--heading-line-height); color: var(--heading-color); font-weight: 600; margin: 0 0 1em; }
.hypertext :is(img, video) { margin: var(--media-margin) auto; max-width: 100%; height: auto !important; border-radius: 0.625rem; }
.hypertext :is(ul, ol) { padding-left: 1.25em; margin: 0 0 1em; }
.hypertext ul { list-style: disc; }
.hypertext ol { list-style: decimal; }
.hypertext li { margin-top: 0.25em; }
.hypertext a { border-bottom: 1px solid currentColor; }
.hypertext a:hover { color: #0d50eb; text-decoration: underline; }
.hypertext p:not(:first-child) { margin-top: 1em; }
.hypertext p { margin-bottom: 1em; }

/* ---------- Why choose features (参考站: 灰卡+蓝标题+三色线 icon 右上, 末卡蓝底66%) ---------- */
.p-home .row-features { --gap: 2rem; display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: 6rem; }
.p-home .row-features .feature { --size: 4; --column: calc(12 / var(--size)); width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)); }
.p-home .row-features .feature:last-child { --size: 8; --column: calc(12 / var(--size)); width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)); }
.p-home .feature {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    padding: 2rem 4rem 2rem 2rem; border-radius: var(--radius); min-height: 21.25rem;
    transition: background-color .35s var(--default-easing);
}
.p-home .feature .icon { position: absolute; top: 1.5rem; right: 1.5rem; width: 4rem; height: 4rem; }
.p-home .feature .title { font-size: 2.5rem; line-height: 3rem; font-weight: 600; color: #0d50eb; margin-bottom: 2rem; }
.p-home .feature .desc { position: relative; margin-top: auto; font-size: 1.25rem; line-height: 1.75rem; padding-top: 2rem; }
.p-home .feature .desc::before {
    content: ""; position: absolute; left: 0; top: 0; width: 6rem; height: 4px;
    background-image: linear-gradient(90deg, #0D50EB 50%, #00C684 50%, #00C684 75%, #EC0204 75%);
}
.p-home .row-features .feature:not(:last-child):not(:hover) { background-color: #f3f5f7; color: #000; }
.p-home .row-features .feature:not(:last-child):hover { background-color: rgba(0,0,0,.15); }
.p-home .row-features .feature:last-child {
    background-color: #2e68ef; color: #fff;
    background-image: url("../img/theme/global.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
}
.p-home .row-features .feature:last-child .title { color: inherit; }
.p-home .row-features .feature:last-child .desc { --heading-font-size: 1.25em; font-size: 1rem; line-height: 1.5rem; }
.p-home .row-features .feature:last-child .desc::before { background-image: linear-gradient(90deg, #ffffff 50%, #00C684 50%, #00C684 75%, #EC0204 75%); }
.p-home .row-features .feature .desc h3 { font-size: 1.25em; font-weight: 600; margin: 0 0 0.5rem; }
.p-home .row-features .feature .desc ul { font-size: 1rem; line-height: 1.5rem; margin: 0; padding-left: 1.25em; }
.p-home .row-features .feature .desc li { margin-top: 0.25rem; }

/* ---------- CTA (参考站: 5.625rem 标题 / 灰色描述 / 无固定比例大图) ---------- */
.p-home .contact-us { position: relative; margin-bottom: 5rem; }
.p-home .contact-us .img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.p-home .contact-us ._overlay { position: absolute; inset: 0; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 2rem; }
.p-home .contact-us ._heading { font-size: 5.625rem; line-height: 1; font-weight: 600; width: 100%; max-width: 40rem; margin: 0 auto; }
.p-home .contact-us ._desc { font-weight: 500; color: #707070; width: 100%; max-width: 32rem; margin: 1rem auto; }
.p-home .contact-us .btn { margin-top: 2.5rem; }

/* ---------- Footer ---------- */
.footer { color: #fff; background: url("../img/theme/footer.jpg") 50% 50% / 100% 100% no-repeat #000; margin-top: 0; }
.footer .desc, .footer .children a { color: hsla(0,0%,100%,0.5); }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; }
.footer .logo { display: block; width: 12rem; height: 2.5rem; margin-bottom: 1.5rem; }
.footer .logo img, .footer .logo svg { width: 100%; height: 100%; object-fit: contain; }
.footer .wrapper { display: flex; justify-content: space-between; gap: 2rem; padding: 5rem 0; }
.footer .intro { width: 28.125rem; }
.footer .columns { columns: 3; width: 37.5rem; font-size: 0.875rem; }
.footer .column { margin-bottom: 0.5rem; break-inside: avoid; }
.footer .column .title { font-weight: 600; font-size: 1rem; }
.footer .column .item { margin-top: 0.5rem; }
.footer .column .item:last-child { margin-bottom: 1.5rem; }
.footer .bottom { display: flex; flex-wrap: wrap; align-items: center; padding: 2.5rem 0; border-top: 1px solid #1e296d; font-size: 0.875rem; line-height: 1.25rem; }
.footer .bottom .bar { border-left: 1px solid currentColor; height: 0.75rem; margin: 0 1rem; }
.footer .copyright { margin-right: 1.25rem; }
.footer .bottom .followus { margin-left: auto; margin-right: 0.75rem; }
.footer .bottom .social-media { display: flex; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; }
.footer .bottom .social-media:not(:first-child) { margin-right: 0.5rem; }
.footer .bottom .social-media svg { width: 100%; height: 100%; }
.footer-zx { position: fixed; right: 2rem; bottom: 2rem; z-index: 30; }
.footer-zx .fzx-link {
    display: none;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background-color: #0049c7; box-shadow: 0 0 0.375rem #0049c7; color: #fff;
    align-items: center; justify-content: center;
}
.footer-zx .fzx-link.show { display: flex; }
.footer-zx .fzx-link svg { width: 1.25rem; height: 1.25rem; }
.footer-zx .fzx-link:hover { background-color: #0d50eb; }

/* ---------- About 页 (参考站: 4rem 简介标题/圆形图/features 10rem 间距) ---------- */
.p-about { position: relative; }
.p-about .banner { height: 46.875rem; }
.p-about ._intro { padding-top: 5rem; }
.p-about ._intro ._heading { font-size: 4rem; line-height: 1; font-weight: 600; }
.p-about ._intro ._heading p { margin: 0.25rem 0; }
.p-about ._intro ._heading img { display: inline; border-radius: 9999px; vertical-align: middle; height: 4rem; width: auto; }
.p-about ._intro .desc { margin-top: 2.5rem; font-size: 1.25rem; line-height: 2rem; max-width: 60rem; opacity: 0.85; }
.p-about .row-stats { --columns: 4; display: flex; flex-wrap: wrap; margin-top: 5rem; }
.p-about .row-stats .stats { position: relative; text-align: center; flex: 1 1 25%; }
.p-about .row-stats .stats::after {
    content: ""; position: absolute; height: 5rem; inset: 0 0 0 auto; margin: auto 0;
    border-left: 1px solid #45474b;
}
.p-about .row-stats .stats:last-child::after { display: none; }
.p-about .row-stats .data { font-weight: 600; font-size: 3.375rem; line-height: 1; color: #0d50eb; }
.p-about .row-stats .label { font-weight: 400; font-size: 1.25rem; margin-top: 1rem; }
.p-about .row-features { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 10rem; margin-bottom: 10rem; }
.p-about .row-features .feature {
    flex: 1 1 calc(25% - 2rem); border-radius: var(--radius); padding: 2.5rem; gap: 2rem;
    background-color: rgba(0,0,0,0.15); backdrop-filter: blur(32px);
    min-height: 25rem; display: flex; flex-direction: column;
}
.p-about .row-features .feature .title { font-size: 1.25rem; font-weight: 600; }
.p-about .row-features .feature .desc { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; margin-top: 10rem; }
.p-about .sections.white { margin-top: 6rem; }
.p-about .sections.white .container { padding-top: 4rem; padding-bottom: 6rem; }

/* ---------- Contact 页 (参考站: 白色卡 / heading-2 居中 / office 卡) ---------- */
.p-contact .container.a { padding-top: 6rem; }
.p-contact .row-card-a { display: flex; flex-wrap: wrap; gap: 2rem; margin: 4rem 0; }
.p-contact .card-a {
    flex: 1 1 calc(25% - 2rem); display: flex; flex-direction: column; gap: 2rem;
    min-height: 21.25rem; background-color: #fff; color: rgba(0,0,0,.5);
    border-radius: var(--radius); padding: 2rem;
}
.p-contact .card-a .icon { width: 4rem; height: 4rem; }
.p-contact .card-a .content { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; margin-top: auto; min-height: 6rem; }
.p-contact .card-a .content h3 { font-size: 1.25rem; line-height: 1.75rem; color: #000; font-weight: 600; margin: 0 0 0.5rem; }
.p-contact .card-a .content p { font-size: 0.875rem; line-height: 1.25rem; margin: 0 0 0.5rem; }
.p-contact .card-a .content a { color: #0d50eb; text-decoration: underline; }
.p-contact .heading-2 { font-size: 2.5rem; line-height: 3rem; font-weight: 600; text-align: center; padding-top: 9rem; padding-bottom: 4rem; margin: 0; }
.p-contact .row-offices { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 8rem; }
.p-contact .office { position: relative; border-radius: var(--radius); padding: 2px; background-color: #000; }
.p-contact .office .image { width: 100%; aspect-ratio: 450/550; object-fit: cover; border-radius: inherit; }
.p-contact .office .overlay {
    position: absolute; inset: 0; border-radius: inherit; padding: 2.25rem;
    display: flex; flex-direction: column;
    background-color: rgba(0,0,0,0.5);
}
.p-contact .office .title { font-size: 2rem; line-height: 2.5rem; font-weight: 600; }
.p-contact .office .subtitle { font-size: 1rem; line-height: 1.5rem; margin-top: 0.5rem; opacity: 0.9; }
.p-contact .office .content { margin-top: auto; }
.p-contact .office .content p { font-size: 0.875rem; line-height: 1.25rem; opacity: 0.75; margin: 0; }
.p-contact .office .icon-btn { --icon-size: 1.25rem; position: absolute; background-color: #fff; color: #000; left: 2.25rem; bottom: 2.25rem; transform: rotate(-45deg); }
.p-contact .office .icon-btn:hover { background-color: #0d50eb; color: #fff; }

/* ---------- Solutions ---------- */
.p-solutions .row-solutions { display: flex; flex-wrap: wrap; gap: 2rem; padding: 4rem 0 8rem; }
.p-solutions .solution-card { flex: 1 1 calc(33.33% - 2rem); }
.p-solutions .solution-card .overlay { opacity: 1; background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent 55%); justify-content: flex-end; }
.p-solutions .solution-card .title { font-size: 1.5rem; }
.p-solutions .solution-card .desc { font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem; }

/* ---------- Single 页 ---------- */
.p-product-single .banner, .p-case-single .banner, .p-news-single .banner { position: relative; z-index: 0; height: 34rem; }
.product-single-body, .case-single-body, .news-single-body { padding: 3rem 0 8rem; max-width: 60rem; margin: 0 auto; }
.product-single-body .lead, .news-single-body .lead { font-size: 1.25rem; line-height: 2rem; opacity: 0.9; }
.entry-content { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,0.85); }
.entry-content img { border-radius: var(--radius); margin: 1.5rem 0; }
.news-single-body .feature-img { width: 100%; border-radius: var(--radius); margin-bottom: 2rem; }
.p-news-single .header-2 .heading { font-size: 2.5rem; line-height: 3rem; }

/* ---------- Solution detail ---------- */
.p-solution-details .hero-solution { position: relative; height: 40.625rem; }
.p-solution-details .hero-solution .banner { position: absolute; inset: 0; height: 100%; }
.p-solution-details .hero-solution .overlay {
    position: absolute; inset: 0; display: flex; align-items: center;
    background: rgba(0,0,0,0.4);
}
.p-solution-details .heading-2 { font-size: 3.5rem; font-weight: 600; }
.p-solution-details .desc { font-size: 1.25rem; margin-top: 1.5rem; max-width: 50rem; opacity: 0.9; }
.p-solution-details .container.a { padding: 4rem 0 8rem; }

/* ---------- Pagination (参考站: F3F5F7 底 + active 三色渐变描边) ---------- */
.pagination { --background-color: #F3F5F7; --active-background-color: #ffffff; --foreground-color: #000000; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; font-weight: 600; font-size: 1rem; line-height: 1.5rem; padding: 4rem 0; text-align: center; }
.pagination .page-numbers { height: 2.5rem; min-width: 2.5rem; padding: 0.5rem; background-color: var(--background-color); color: var(--foreground-color); border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.pagination .page-numbers.current { border-color: transparent; background: linear-gradient(var(--active-background-color), var(--active-background-color)) padding-box, linear-gradient(#0d50eb 0%, #1bd547 50%, #f93836 100%) border-box; border: 1px solid transparent; }

/* ---------- Scroll 动画 ---------- */
.st-target { transition: opacity 0.65s ease, transform 0.65s ease; }
.st-target.slide { opacity: 0; transform: translateY(40px); }
.st-target.slide.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .st-target.slide { opacity: 1; transform: none; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 1024px) {
    .header .nav { display: none; }
    .header .search-box { position: static; margin-right: auto; flex-grow: 1; }
    .header .search-box .control { padding: 0.25rem 0; }
    .container { --padding-x: 4rem; }
    .heading { --icon-size: 2rem; font-size: 3rem; line-height: 4rem; }
}

/* 参考站: 移动端 rem 基准 100vw/64 (不等比缩放) */
@media (max-width: 1023px) {
    html { font-size: calc(100vw / 64); }
}

@media (max-width: 767px) {
    body { padding: 0; }
    .container { --padding-x: 1.5rem; }
    .header > .container { height: 4rem; }
    .header .logo { width: 6.5rem; }
    .heading { --margin: 4rem; font-size: 2.5rem; line-height: 3rem; }
    .p-home .swiper-banner { height: 34.375rem; }
    .p-home .swiper-banner .image { height: 34.375rem; }
    .p-home .swiper-banner .content { padding-top: 12rem; }
    .p-home .swiper-banner .heading { font-size: 2.25rem; line-height: 2.5rem; padding-right: 1.5rem; }
    .p-home .app-scene-nav { column-gap: 1rem; row-gap: 0.5rem; margin-top: 2rem; }
    .p-home .app-scene-nav .action { font-size: 1.25rem; }
    .p-home .swiper-cases .swiper-slide { width: 12.5rem; margin-left: 5px; margin-right: 5px; }
    .p-home .swiper-cases .overlay { display: none; }
    .p-home .row-products { --total: 12; }
    .p-home .row-products .product, .p-home .row-products .product:nth-child(4n+2), .p-home .row-products .product:nth-child(4n+3) { --size: 12; --column: calc(var(--total) / var(--size)); width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)) !important; }
    .p-home .row-products .product:nth-child(4n+2) .image, .p-home .row-products .product:nth-child(4n+3) .image { display: block; }
    .p-home .row-products .product:nth-child(4n+2) .image-2, .p-home .row-products .product:nth-child(4n+3) .image-2 { display: none; }
    .p-home .feature { min-height: 16rem; padding: 1.5rem 3rem 1.5rem 1.5rem; }
    .p-home .feature .icon { width: 2.5rem; height: 2.5rem; }
    .p-home .feature .title { font-size: 2rem; line-height: 2.5rem; padding-right: 2rem; }
    .p-home .feature .desc { font-size: 1rem; line-height: 1.25rem; }
    .p-home .row-features .feature, .p-home .row-features .feature:last-child { --size: 12; --column: calc(12 / var(--size)); width: calc((100% - var(--gap) * (var(--column) - 1)) / var(--column)) !important; }
    .p-home .row-features .feature:last-child { min-height: 25rem; background-size: contain; }
    .p-home .contact-us .img { height: 24rem; }
    .p-home .contact-us ._overlay { padding: 2rem; }
    .p-home .contact-us ._heading { font-size: 2rem; padding-left: 1em; padding-right: 1em; }
    .p-home .contact-us ._desc { font-size: 0.875rem; line-height: 1.25rem; }
    .news { flex-wrap: wrap; gap: 0; padding: 2rem 0; }
    .news .meta { margin-right: 0; width: 100%; margin-bottom: 0.5rem; }
    .news .title { font-size: 1rem; line-height: 1.25rem; }
    .news .content { flex: 1 1 100%; margin: 0.5rem 0; }
    .news .media { width: 6rem; margin-left: auto; display: flex; gap: 1rem; align-items: center; }
    .news .media .image { width: 100%; }
    .news .actions { display: none; }
    .product-list .product, .case-list .case, .solution-card, .p-contact .office { width: 100%; flex: 1 1 100% !important; }
    .product-list { --columns: 1; --gap: 1.5rem; }
    .p-contact .card-a { flex: 1 1 100%; }
    .p-about .row-stats .stats { flex: 1 1 50%; }
    .p-about .row-features { margin-top: 4rem; margin-bottom: 4rem; }
    .p-about .row-features .feature { flex: 1 1 100%; min-height: 15rem; }
    .p-about .row-features .feature .desc { margin-top: 3rem; }
    .p-about ._intro ._heading { font-size: 2.5rem; }
    .p-about ._intro ._heading img { height: 2rem; }
    .footer .wrapper { flex-direction: column; padding: 3rem 0; }
    .footer .intro { width: 100%; }
    .footer .columns { columns: 2; width: 100%; }
    .filter .select, .filter .searchbox { width: 100%; }
    .menu-overlay .container { --padding-x: 1.5rem; }
    .menu-overlay .wrapper { padding: 3rem 1.5rem; }
    .menu-overlay .list.a { width: 100%; }
    .menu-overlay .list.a > .item > .link > .name { font-size: 2rem; }
    .banner { height: 30rem; }
    .header-2 { padding-top: 4rem; }
    .p-case-study .header-2 { padding-bottom: 4rem; }
}