:root { --hd-unit: calc(100vh - var(--header-height)); --hd-navy: #0F335F; --hd-navy-deep: #0a2547; --hd-blue: #74BCE7; --hd-blue-soft: #cfe4f7; --hd-ink: #123a6b; --ergo-navy: #0F335F; --ergo-blue: #74BCE7; --ergo-muted: #5a6d7d; }
* { font-family: Arial, sans-serif; }
/* 覆盖默认屏内边距，改由各屏自行控制 */
.screens__flow-container > .hd-hero, .screens__flow-container > .hd-core, .screens__flow-container > .hd-thermal, .screens__flow-container > .hd-structural, .screens__flow-container > .hd-ergo, .screens__flow-container > .hd-ergo-core { padding: 0; overflow: hidden; box-sizing: border-box; }
/* technologie2：纵向堆叠滚动，不再整屏翻页 */
.main.is-page-stack, .main:has(.page-stack) { overflow: visible; height: auto; max-height: none; }
.page-stack { margin-top: var(--header-height); }
.page-stack > .hd-ergo, .page-stack > .hd-ergo-core, .page-stack > .hd-structural { position: relative; width: 100%; padding: 0; overflow: hidden; box-sizing: border-box; }
@media (prefers-reduced-motion:reduce) {
.page-stack [class*="-trAnim-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
.page-stack .hd-ergo.active .hd-ergo__visual img, .page-stack .hd-ergo-core.active .hd-ergo-core__visual > img, .page-stack .hd-ergo-core.active .hd-ergo-core__spot svg circle[stroke] { animation: none !important; }
}
/* ================= 第一屏：主视觉 ================= */
.hd-hero { position: relative; height: var(--hd-unit); background: linear-gradient(135deg, #eef5fc 0%, #d7e7f6 55%, #c9def1 100%); color: var(--hd-ink); }
.hd-hero__bg { position: absolute; inset: 0; background: radial-gradient(circle at 78% 42%, rgba(116, 188, 231, .28) 0%, rgba(116, 188, 231, 0) 55%); pointer-events: none; }
.hd-hero__text { position: relative; z-index: 2; padding-left: 6rem; padding-right: 2rem; margin-top: 6.5rem; }
.hd-hero__title { margin: 0;     /* font-family: Azonix, PlusJakartaDisplay, "Microsoft YaHei", sans-serif; */ font-family: Arial, sans-serif; font-size: 3rem; font-weight: 700; color: var(--hd-navy); line-height: 1.15; }
.hd-hero__title sup { font-size: .45em; }
.hd-hero__subtitle { margin: .8rem 0 0; font-size: 3rem; font-weight: 500; color: #0F335F; }
.hd-hero__desc { margin: 1.4rem 0 0; max-width: 30rem; font-size: .95rem; line-height: 1.7; color: #0F335F; }
.hd-hero__visual { position: absolute; z-index: 0; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #eef5fc 0%, #d7e7f6 55%, #c9def1 100%); pointer-events: none; }
.hd-hero__visual video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.hd-hero__bar { position: absolute; z-index: 3; left: 21%; right: 21%; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem 3rem; background: var(--hd-blue); color: #fff; font-size: .95rem; letter-spacing: .06em; }
.hd-hero__bar-label { font-weight: 700; }
.hd-hero__bar-item { opacity: .95; }
/* ================= 第二屏：三大核心能力 ================= */
.hd-core { position: relative; height: var(--hd-unit); display: flex; align-items: center; gap: 4rem; padding: 0 6rem; background: linear-gradient(115deg, #7db4e0 0%, #3a6ea8 40%, var(--hd-navy) 78%, var(--hd-navy-deep) 100%); color: #fff; }
.hd-core::after { content: ""; position: absolute; right: -1%; bottom: -15%; width: min(55%, 45rem); aspect-ratio: 1; z-index: 0; background: url('../image/hd-thermal-bg1.svg') center / contain no-repeat; mix-blend-mode: lighten; pointer-events: none; opacity: 0; transition: calc(var(--content-appear-time, .75s) + .5s) opacity; }
.hd-core.active::after { opacity: 1; }
/* 第三屏：3 个 SVG 光晕（::before 已用于网格，无法用双伪元素叠 3 张） */
.hd-thermal__glow { position: absolute; z-index: 7; aspect-ratio: 1; pointer-events: none; mix-blend-mode: lighten; background: center / contain no-repeat; opacity: 0; transition: opacity .4s ease calc(var(--content-appear-time, .75s) + .5s); }
.hd-thermal.active .hd-thermal__glow { opacity: 1; }
.hd-thermal__glow--1 { top: 38%; right: -2%; width: min(38%, 30rem); background-image: url('../image/hd-thermal-bg1.svg'); }
.hd-thermal__glow--2 { top: 44%; left: 27%; width: min(46%, 36rem); background-image: url('../image/hd-thermal-bg1.svg'); transition-delay: calc(var(--content-appear-time, .75s) + .65s); }
.hd-thermal__glow--3 { right: -5%; bottom: -16%; width: min(55%, 45rem); background-image: url('../image/hd-thermal-bg1.svg'); transition-delay: calc(var(--content-appear-time, .75s) + .8s); }
.hd-structural__glow { position: absolute; z-index: 7; aspect-ratio: 1; pointer-events: none; mix-blend-mode: lighten; background: center / contain no-repeat; opacity: 0; transition: opacity .4s ease calc(var(--content-appear-time, .75s) + .5s); }
.hd-structural.active .hd-structural__glow { opacity: 1; }
.hd-structural__glow--1 { top: 38%; right: -2%; width: min(38%, 30rem); background-image: url('../image/hd-thermal-bg1.svg'); }
.hd-structural__glow--2 { top: 44%; left: 27%; width: min(46%, 36rem); background-image: url('../image/hd-thermal-bg1.svg'); transition-delay: calc(var(--content-appear-time, .75s) + .65s); }
.hd-structural__glow--3 { right: -5%; bottom: -16%; width: min(55%, 45rem); background-image: url('../image/hd-thermal-bg1.svg'); transition-delay: calc(var(--content-appear-time, .75s) + .8s); }
/* 网格线背景（SVG 式细线） */
.hd-core::before { content: ""; position: absolute; inset: 0; z-index: 0;     /* background-image:
linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); */ background-size: 12.5% 25%; pointer-events: none; }
.hd-core__visual { position: relative; z-index: 2; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; overflow: visible; }
.hd-core__panel { position: relative; width: 100%; max-width: 40rem; aspect-ratio: 1 / .82; display: flex; align-items: center; justify-content: center; overflow: visible; }
.hd-core__panel::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url(../image/technologies/2-bg.png) center / contain no-repeat; mix-blend-mode: lighten; pointer-events: none; }
.hd-core__img { position: absolute; z-index: 1; object-fit: contain; opacity: 0; pointer-events: none; transform: scale(1); transition: opacity .6s ease, transform .6s ease; }
.hd-core__img.is-active { opacity: 1; transform: scale(1); }
/* 三张图构图不同：透气图偏横、层结构更收、人体工学接近铺满面板 */
.hd-core__img[data-feature="0"] { width: 120%; right: -8%; top: -13%; }
.hd-core__img[data-feature="1"] { width: 100%; right: 11%; top: 11%; }
.hd-core__img[data-feature="2"] { width: 100%; right: 6%; top: -19%; }
.hd-core__content { position: relative; z-index: 1; flex: 1; }
.hd-core__title { margin: 0; font-family: Azonix, PlusJakartaDisplay, "Microsoft YaHei", sans-serif; font-size: 2.4rem; font-weight: 700; color: #e6eef8; }
.hd-core__title sup { font-size: .45em; }
.hd-core__subtitle { margin: .55rem 0 0; font-size: 2rem; font-weight: 400; letter-spacing: .04em; color: #c5d6ea; }
.hd-core__feature { display: flex; align-items: flex-start; gap: 1.2rem; margin-top: 2.2rem; padding: .4rem .6rem; border-radius: .8rem; cursor: pointer; transition: opacity .35s ease, transform .35s ease; }
.hd-core__feature:hover .hd-core__feature-text h3 { color: rgba(255, 255, 255, .92); }
.hd-core__icon { flex: 0 0 auto; width: 3rem; height: 3rem; color: #74BCE7; transition: color .35s ease; }
.hd-core__icon svg, .hd-core__icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.hd-core__icon img { filter: brightness(0) saturate(100%) invert(72%) sepia(31%) saturate(712%) hue-rotate(163deg) brightness(96%) contrast(92%); transition: filter .35s ease; }
.hd-core__feature.is-active .hd-core__icon, .hd-core__feature:hover .hd-core__icon { color: #fff; }
.hd-core__feature.is-active .hd-core__icon img, .hd-core__feature:hover .hd-core__icon img { filter: brightness(0) invert(1); }
.hd-core__feature-text h3 { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 500; color: #74BCE7; transition: color .35s ease; }
.hd-core__feature.is-active .hd-core__feature-text h3 { color: #fff; }
.hd-core__feature-text p { margin: 0; font-size: .9rem; line-height: 1.6; color: #74BCE7; transition: color .35s ease; }
.hd-core__feature.is-active .hd-core__feature-text p { color: #fff; }
/* ================= 第三屏：动态热管理（1.5 屏） =================
设计稿 1920×1625 ≈ 1.5 个可视屏。上约 38% 文案+泡棉，下约 62% 对比卡片。
翻页两步：第一步停在顶部，第二步把卡片底对齐视口底（见 js/main.js screenOffset）
============================================================ */
.hd-thermal { position: relative; display: flex; flex-direction: column; height: calc(1.5 * var(--hd-unit)); background: linear-gradient(115deg, #5b9bd0 0%, #2b6296 40%, var(--hd-navy) 100%) left bottom / 100% 62% no-repeat, #ececec; color: var(--hd-navy); }
.hd-structural { position: relative; display: flex; flex-direction: column; background: linear-gradient(74.18deg, #74BCE7 11.05%, #0F335F 92.92%); color: var(--hd-navy); }
@media screen and (max-width:1200px) {
.hd-thermal__top { flex: 0 0 40%; }
.hd-thermal__card { flex: none; }
}
/* 下半区网格线 */
.hd-thermal::before, .hd-structural::before { content: ""; position: absolute; left: 0; right: 0; top: 38%; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 12.5% 25%; pointer-events: none; }
.hd-thermal__top { position: relative; flex: 0 0 55%; display: flex; padding: 0 6rem; box-sizing: border-box; }
.hd-thermal__text { position: relative; z-index: 2; flex: 0 0 44%; }
.hd-thermal__title { margin: 3rem 0 0px 0; font-size: 2.6rem; font-weight: 700; font-family: Arial, sans-serif; color: var(--hd-navy); }
.hd-thermal__desc { margin: 1.2rem 0 0; max-width: 26rem; font-size: 1rem; line-height: 1.7; color: #3c5a7d; }
.hd-thermal__label { display: block; margin-top: 2rem; font-family: Arial, sans-serif; font-size: 2.4rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-blue); }
.hd-structural__top { position: relative; display: flex; padding: 120px 6rem; box-sizing: border-box; background-color: #d9d9d9; }
.hd-structural__text { position: relative; z-index: 3; }
.hd-structural__title { font-size: 4rem; font-weight: 700; font-family: Arial, sans-serif; color: var(--hd-navy); }
.hd-structural__desc { margin: 1.2rem 0 0; font-size: 1.25rem; line-height: 1.7; color: #3c5a7d; }
.hd-structural__label { display: block; margin-top: 2rem; font-family: Arial, sans-serif; font-size: 2.4rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-blue); }
/* 泡棉主视觉：跨上半区落入卡片 */
.hd-thermal__visual { margin-top: 50px; position: absolute; z-index: 2; top: 0; right: 6%; width: 35%; display: flex; align-items: flex-start; justify-content: flex-end; pointer-events: none; }
.hd-thermal__visual img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: top right; transform: scaleX(-1); }
.hd-structural__visual { position: absolute; z-index: 2; bottom: 0; right: 6%; width: 50%; height: 100%; display: flex; align-items: flex-start; justify-content: flex-end; pointer-events: none; }
.hd-structural__visual img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: top right; transform: scaleX(-1); }
/* 泡棉主视觉：跨上半区落入卡片 */
/* 下半区：深蓝面板，吃掉 1.5 屏剩余高度 */
.hd-thermal__card { position: relative; z-index: 5; flex: 1 1 auto; min-height: 0; margin: 0 9% 2.2%; box-sizing: border-box; display: flex; align-items: stretch; gap: 2.5rem; padding: 1.6rem 2.2rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 1rem; color: #fff; background: #0F335F; opacity: 0.8 !important; }
.hd-thermal__compare { flex: 0 0 26%; display: flex; flex-direction: column; justify-content: space-between; gap: 0rem; min-height: 0; }
.hd-thermal__compare-item { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: .35rem; }
.hd-thermal__compare-item::before { position: absolute; width: 1px; height: 100%; content: ""; left: 3px; top: 10px; background: rgba(255, 255, 255, .28); }
.hd-thermal__compare-item:last-child::before { display: none; }
.hd-thermal__compare-item-text span { font-size: 12px; }
.hd-thermal__compare-title { flex: 0 0 auto; display: flex; align-items: center; gap: .5em; font-size: .95rem; font-weight: 700; letter-spacing: .04em; color: #fff; }
.hd-thermal__compare-title::before { content: ""; flex: 0 0 auto; width: .45em; height: .45em; border-radius: 50%; background: #fff; }
.hd-thermal__compare-item img { flex: none; display: block; margin-left: 8%; width: 90%; height: auto; object-fit: contain; object-position: center top; border-radius: .4rem; padding-bottom: 15px; }
.hd-thermal__hands { flex: none; height: auto; object-fit: contain; box-sizing: border-box; }
.hd-thermal__compare-item3 { display: flex; flex-direction: row; align-items: stretch; gap: .55rem; margin-left: 3px; width: 100%; padding: .5rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; box-sizing: border-box; }
.hd-thermal__compare-pair { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.hd-thermal__compare-item3 .hd-thermal__compare-title { font-size: .7rem; font-weight: 400; letter-spacing: 0; line-height: 1.35; }
.hd-thermal__compare-item3 .hd-thermal__compare-title::before { display: none; }
.hd-thermal__compare-item3 img { margin: 0; width: 100%; height: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: .75rem; background: rgba(6, 24, 52, .45); object-fit: contain; }
.hd-thermal__compare-item-text { display: flex; justify-content: space-around; }
.hd-thermal__ergo { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .8rem; }
.hd-thermal__ergo-head { flex: 0 0 auto; background: rgba(255, 255, 255, .82); color: var(--hd-navy); border-radius: 10px; padding: 1.4rem 1.6rem; text-align: center; }
.hd-thermal__ergo-head h3 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.hd-thermal__ergo-head p { margin: .6rem 0 0; font-size: .95rem; letter-spacing: .12em; color: #33517a; }
.hd-thermal__ergo-visual { flex: 1; min-height: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; padding: 1rem 1.2rem; background-color: rgba(255, 255, 255, .2); }
.hd-thermal__ergo-visual img { width: 100%; height: 100%; object-fit: contain; }
/* ================= Ergo-Backcare™ 第一屏（technologie2 · design1.svg 1920×1080） ================= */
.hd-ergo { position: relative; height: var(--hd-unit); background: #fff; color: var(--ergo-navy); overflow: hidden; }
.hd-ergo__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;     /* background: radial-gradient(circle at 90% 100%, rgba(116, 188, 231, .2) 0%, rgba(116, 188, 231, .08) 28%, rgba(116, 188, 231, 0) 52%); */ background-color: #FFFFFF; opacity: 0; transition: calc(var(--content-appear-time, .75s) + .5s) opacity; }
.hd-ergo.active .hd-ergo__bg { opacity: 1; }
.hd-ergo__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; max-width: 48%; padding: 8.5rem 2rem 6.2rem 7.125rem; box-sizing: border-box; }
.hd-ergo__copy { flex: 0 0 auto; }
.hd-ergo__title { margin: 0; font-size: clamp(2.5rem, 4.7vw, 5.625rem); font-weight: 700; line-height: 1.08; color: var(--ergo-navy); }
.hd-ergo__title sup { font-size: .45em; top: -.35em; }
.hd-ergo__desc { margin: 3.5rem 0 0; max-width: 31rem; font-size: 1.125rem; line-height: 1.7; color: var(--ergo-navy); }
.hd-ergo__label { margin: 5.1rem 0 0; font-size: clamp(1.8rem, 2.35vw, 2.8rem); font-weight: 400; line-height: 1.15; color: var(--ergo-navy); }
.hd-ergo__logo { flex: 0 0 auto; width: 7.4375rem; }
.hd-ergo__logo img { display: block; width: 100%; height: auto; }
.hd-ergo__visual { position: absolute; z-index: 1; left: 33.3%; right: 7rem; bottom: 6.2rem; height: 30%; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
.hd-ergo__visual video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
@keyframes hdErgoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hd-ergo-core.active .hd-ergo-core__visual > img { animation: hdErgoCoreFloat 5s ease-in-out infinite; }
@keyframes hdErgoCoreFloat {
0%, 100% { transform: scaleX(1) translateY(0); }
50% { transform: scaleX(1) translateY(-10px); }
}
.hd-ergo-core.active .hd-ergo-core__spot svg circle[stroke] { transform-origin: center; animation: hdErgoSpotPulse 2.4s ease-in-out infinite; }
@keyframes hdErgoSpotPulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
/* ================= Ergo 第二屏：三大核心能力（design2.svg 1920×1080） ================= */
.hd-ergo-core { position: relative; height: var(--hd-unit) !important; min-height: 700px; color: #fff; overflow: hidden; background: linear-gradient(118deg, #74BCE7 0%, #3a7eb8 38%, var(--ergo-navy) 100%); }
.hd-ergo-core__bg, .hd-ergo-core__grid, .hd-ergo-core__glows { position: absolute; inset: 0; pointer-events: none; }
.hd-ergo-core__grid { z-index: 1; background-image: linear-gradient(90deg, rgba(255, 255, 255, .15) 1px, transparent 1px); background-size: 12.5% 100%; opacity: .55; }
.hd-ergo-core__glows { z-index: 0; background: radial-gradient(circle at 24% 50%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 54% 50%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 22%), radial-gradient(circle at 92% 83%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(circle at 90% 16%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 20%); opacity: 0; transition: calc(var(--content-appear-time, .75s) + .35s) opacity; }
.hd-ergo-core.active .hd-ergo-core__glows { opacity: 1; }
.hd-ergo-core__logo { position: absolute; z-index: 4; top: 2rem; right: 6rem; width: 7.4375rem; }
.hd-ergo-core__logo img { display: block; width: 100%; height: auto; }
.hd-ergo-core__panel { position: relative; z-index: 3; width: min(34rem, 42vw); margin: 3.5rem 0 0 13rem; padding: 1.35rem 1.5rem 1.5rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: .35rem; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-sizing: border-box; }
.hd-ergo-core__title { margin: 0; font-size: clamp(1.75rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.2; color: #fff; }
.hd-ergo-core__desc { margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.75; color: rgba(255, 255, 255, .92); }
.hd-ergo-core__badge { display: inline-block; margin-top: 1.15rem; padding: .28rem 1rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; font-size: .82rem; letter-spacing: .04em; color: #fff; }
.hd-ergo-core__visual { position: absolute; z-index: 2; left: 0; bottom: -20px; width: 100%; }
.hd-ergo-core__visual img { display: block; width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; transform: scaleX(1); }
.hd-ergo-core__hotspots { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.hd-ergo-core__spot { position: absolute; left: var(--spot-x); top: var(--spot-y); transform: translate(-50%, -50%); }
.hd-ergo-core__spot-dot { position: relative; z-index: 2; display: block; width: .875rem; height: .875rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .35rem rgba(255, 255, 255, .35); }
.hd-ergo-core__spot-line { position: absolute; z-index: 1; left: 50%; width: 1px; height: var(--spot-line-h, 3.5rem); background: rgba(255, 255, 255, .75); transform-origin: top center; transform: translateX(-50%) rotate(var(--spot-line-deg, 0deg)); }
.hd-ergo-core__spot-label { position: absolute; z-index: 2; left: 50%; min-width: 11rem; padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: .75rem; background: rgba(255, 255, 255, .08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .82rem; line-height: 1.35; text-align: center; color: #fff; white-space: nowrap; transform: translate(-50%, var(--spot-label-y, calc(100% + .85rem))); }
.hd-ergo-core__spot--1 { position: absolute; left: 16%; top: 36.5%; }
.hd-ergo-core__spot--2 { position: absolute; left: 34.5%; top: 34%; }
.hd-ergo-core__spot--3 { position: absolute; left: 53.5%; top: 20%; }
.hd-ergo-core__spot svg { display: block; width: 17.375rem; height: auto; max-width: none; }
/* ================= Ergo 第三屏：中间详情卡（swiper.js 切换，底部 Tab 固定） ================= */
.hd-ergo-detail { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(65rem, 68vw); transform: translate(-50%, -46%); pointer-events: none; }
.hd-ergo-detail__card { position: relative; padding: 2.4rem 2rem 3.4rem; border-radius: 1rem; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 48px rgba(8, 24, 48, .28); pointer-events: auto; box-sizing: border-box; }
.hd-ergo-detail__arrow { position: absolute; top: 1.6rem; z-index: 2; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .55); font-size: 1rem; letter-spacing: .08em; cursor: pointer; font-family: inherit; }
.hd-ergo-detail__arrow span { margin: 0 .15rem; }
.hd-ergo-detail__arrow--prev { left: 1.25rem; }
.hd-ergo-detail__arrow--next { right: 1.25rem; }
.hd-ergo-detail-swiper { margin: 50px auto 0; overflow: hidden; width: 86%; }
.hd-ergo-detail__slide { height: auto; }
.hd-ergo-detail__figure { display: flex; align-items: center; justify-content: center; min-height: 14rem; }
.hd-ergo-detail__figure img { display: block; width: 100%; max-height: 16.5rem; object-fit: contain; }
.hd-ergo-detail__copy { width: 100%; margin: 1.1rem auto 0; padding: .9rem 1.25rem 1rem; border-radius: .35rem; background: rgba(255, 255, 255, .1); text-align: center; box-sizing: border-box; }
.hd-ergo-detail__copy h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 700; line-height: 1.3; color: #fff; }
.hd-ergo-detail__copy p { margin: .55rem 0 0; font-size: .9rem; line-height: 1.65; color: rgba(255, 255, 255, .9); }
.hd-ergo-detail__nav { margin: 1.1rem auto 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 86%; min-height: 3.1rem; padding: .35rem .5rem; border-radius: .45rem; background: #EAEAEA; box-shadow: 0 -6px 18px rgba(15, 51, 95, .18), 0 8px 22px rgba(8, 24, 48, .16); box-sizing: border-box; }
.hd-ergo-detail__tab { flex: 1 1 0; position: relative; padding: .45rem .25rem; border: 0; background: none; color: #6b7a88; font-size: .8125rem; line-height: 1.3; text-align: center; cursor: pointer; font-family: inherit; }
.hd-ergo-detail__tab + .hd-ergo-detail__tab::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 1em; background: #8a96a3; transform: translateY(-50%); }
.hd-ergo-detail__tab.is-active { color: var(--ergo-navy); font-weight: 700; }
.hd-structural__panel { position: relative; z-index: 6; margin: 0 auto; width: 80%; }
.hd-structural__logo { margin: 100px auto 100px; width: 165px; height: auto; }
.hd-structural__logo img { width: 165px; height: auto; }
.hd-structural-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; padding-bottom: 6.25rem; }
.hd-structural-items .item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 17rem; padding: 1.6rem 1.2rem 1.35rem; background: rgba(217, 217, 217, 0.2); border-radius: .35rem; box-shadow: 0 4px 14px rgba(10, 31, 61, .12); box-sizing: border-box; }
.hd-structural-items .item__icon { margin: 3rem 10% 3rem; width: 80%; display: flex; align-items: center; justify-content: center; border-radius: .45rem; }
.hd-structural-items .item__icon img { display: block; width: 100%; max-width: 190px; height: auto; }
.hd-structural-items .item__line { width: 80%; height: 3px; margin: 1rem auto 2rem; background: rgba(15, 51, 95, 1); opacity: .95; }
.hd-structural-items .item__text { margin-top: 2rem; margin-bottom: 3rem; font-size: 1.75rem; line-height: 1.35; font-weight: 500; text-align: center; color: #1f3f67; letter-spacing: .01em; }
.body-zh .hd-core__subtitle { font-size: 2rem; }
@media screen and (max-width:991px) {
.body-zh .hd-core__subtitle { font-size: 1.5rem; }
}
@media screen and (max-width:576px) {
.body-zh .hd-core__subtitle { font-size: 1.25rem; }
}
@media screen and (max-width:1500px) {
.hd-thermal__visual { width: 39%; }
}
@media screen and (max-width:1400px) {
.hd-hero__bar { left: 10%; right: 10%; }
}
/* ============================================================
响应式：iPad（≤1200 / ≤1024）
============================================================ */
@media screen and (max-width:1200px) {
.hd-hero__text { padding-left: 3rem; flex-basis: 44%; }
.hd-hero__title { font-size: 2.6rem; }
.hd-hero__bar { gap: 2rem; font-size: .85rem; }
.hd-core { gap: 2.5rem; padding: 0 3rem; }
.hd-core__title { font-size: 2rem; }
.hd-core__feature { margin-top: 1.5rem; }
.hd-thermal__top { padding: 0 3rem; }
.hd-structural__top { padding: 3rem 3rem; }
.hd-thermal__title { font-size: 2.1rem; }
.hd-structural__title { font-size: 2.1rem; }
.hd-thermal__label { font-size: 1.9rem; }
.hd-structural__label { font-size: 1.9rem; }
.hd-thermal__card { margin-left: 5%; margin-right: 5%; padding: 1.5rem; gap: 1.5rem; }
/* 中窄屏：面板内容紧凑排列、垂直居中，避免均分拉伸产生大间距 */
.hd-thermal__card { align-items: center; }
.hd-thermal__compare { gap: 0rem; }
.hd-thermal__compare-item { flex: 0 0 auto; }
.hd-thermal__compare-item img { flex: none; height: auto; }
.hd-thermal__hands { flex: 0 0 auto; height: auto; }
.hd-thermal__ergo { justify-content: center; }
.hd-thermal__ergo-visual { flex: 0 0 auto; }
.hd-structural__panel { width: min(64rem, 94vw); bottom: 1.4rem; }
.hd-structural-items { gap: 1rem; }
.hd-structural-items .item { min-height: 14rem; padding: 1.2rem .8rem 1rem; }
.hd-structural-items .item__text { font-size: 1.5rem; margin-top: 1rem; }
.hd-ergo-core__visual { top: 41%; }
.hd-ergo-core__spot--1 { left: 9%; top: 26%; }
.hd-ergo-core__spot--2 { top: 18%; }
.hd-ergo-core__spot--3 { top: -2%; }
}
@media screen and (max-width:1024px) {
.hd-hero { justify-content: center; }
.hd-hero__text { flex: none; width: 60%; padding-left: 2.5rem; padding-right: 0; }
.hd-hero__bar { left: 8%; right: 8%; gap: 1.4rem; flex-wrap: wrap; }
.hd-thermal__top { padding: 0 2rem; }
.hd-thermal__text { flex-basis: 52%; }
.hd-structural__text { flex-basis: 52%; }
.hd-thermal__visual { width: 46%; height: 56%; }
.hd-thermal__card { margin-left: 3%; margin-right: 3%; padding: 1.2rem; gap: 1.2rem; }
.hd-thermal__compare { flex-basis: 30%; gap: .9rem; }
.hd-thermal__compare-title { font-size: .8rem; }
.hd-thermal__ergo-head { padding: 1rem 1.2rem; }
.hd-thermal__ergo-head h3 { font-size: 1.3rem; }
.hd-thermal__ergo-head p { font-size: .8rem; }
.hd-thermal__ergo-visual { padding: 20px; }
}
/* <991：第二屏强制一页，覆盖 app.css 的 14.5rem 左边距和 576 的双屏高 */
@media screen and (max-width:991px) {
.hd-ergo { height: auto !important; }
.hd-ergo-core { height: auto !important; }
.hd-core { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; height: var(--hd-unit); max-height: var(--hd-unit); gap: .55rem; padding: 1rem 1.5rem .9rem; box-sizing: border-box; overflow: hidden; }
.hd-core__panel { max-width: 55rem; }
.hd-core__content { flex: 1 1 auto; width: 100%; min-height: 0; padding: 3rem; display: flex; flex-direction: column; box-sizing: border-box; }
.hd-core__title { font-size: 1.85rem; }
.hd-core__subtitle { font-size: 1.1rem; margin-top: .28rem; }
.hd-core__feature { gap: 1rem; }
.hd-core__visual { flex: 0 0 auto; height: 50%; max-height: 50%; width: 100%; padding: 0; }
.hd-core__panel { max-width: 36rem; width: 86%; margin: 0 auto; }
.hd-core { gap: 1rem; padding: 1.25rem 2.4rem 1.4rem; }
.hd-ergo__text { max-width: 100%; padding: 5rem 1.5rem 3.5rem 3.5rem; gap: 5rem; }
.hd-ergo__title { font-size: 2.6rem; }
.hd-ergo__desc { margin-top: 2rem; font-size: 1rem; }
.hd-ergo__label { margin-top: 2.8rem; font-size: 2rem; }
.hd-ergo__logo { width: 6.5rem; }
.hd-ergo__visual { left: 28%; bottom: 3.5rem; height: 36%; }
.hd-ergo-core__logo { top: 2rem; right: 3rem; width: 6.5rem; }
.hd-ergo-core__panel { margin: 3rem 0 0 3.5rem; width: min(30rem, 52vw); padding: 1.1rem 1.2rem 1.25rem; }
.hd-ergo-core__title { font-size: 1.85rem; }
.hd-ergo-core__desc { font-size: .88rem; }
.hd-ergo-core__spot-label { min-width: 9rem; font-size: .75rem; padding: .45rem .75rem; white-space: normal; }
.hd-ergo-core__spot svg { width: 12.5rem; }
.hd-ergo-detail { width: min(46rem, 86vw); transform: translate(-50%, -42%); }
.hd-ergo-detail__card { padding: 2.1rem 1.2rem 3.1rem; }
.hd-ergo-detail__figure { min-height: 11rem; }
.hd-ergo-detail__figure img { max-height: 12.5rem; }
.hd-ergo-detail__copy { width: 92%; padding: .75rem 1rem .85rem; }
.hd-ergo-detail__copy h3 { font-size: 1.15rem; }
.hd-ergo-detail__copy p { font-size: .8rem; }
.hd-ergo-detail__tab { font-size: .68rem; padding: .4rem .4rem; }
.hd-structural__panel { position: relative; left: auto; bottom: auto; transform: none; width: calc(100% - 3rem); margin: .8rem auto 1.25rem; }
.hd-structural-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.hd-structural-items .item { min-height: 11.4rem; padding: .9rem .7rem .75rem; }
.hd-structural-items .item__line { margin-top: .7rem; }
.hd-structural-items .item__text { font-size: 1.1rem; margin-top: .75rem; }
.hd-structural__visual { position: absolute; z-index: 2; bottom: 0; width: 100%; right: 0%; }
.hd-structural__visual img { max-width: 100%; max-height: 100%; position: absolute; bottom: 0px; right: 0px; }
}
/* 平板 577–991（含 iPad 820px） */
@media screen and (max-width:991px) and (min-width:577px) {
.hd-thermal { height: calc(1.5 * var(--hd-unit)); background: linear-gradient(115deg, #5b9bd0 0%, #2b6296 40%, var(--hd-navy) 100%) left bottom / 100% 70% no-repeat, #ececec; }
.hd-structural { }
.hd-hero__text { width: 100%; padding: 0 2.5rem; margin-top: 3.5rem; text-align: center; }
.hd-hero__title { font-size: 2.4rem; }
.hd-hero__subtitle { font-size: 1.6rem; }
.hd-hero__desc { font-size: .95rem; max-width: 28rem; margin-left: auto; margin-right: auto; }
.hd-hero__visual { position: absolute; z-index: 0; inset: 0; background: linear-gradient(135deg, #eef5fc 0%, #d7e7f6 55%, #c9def1 100%); }
.hd-hero__visual video { width: 100%; height: 100%; margin: 0; display: block; object-fit: cover; object-position: center; }
.hd-hero__bar { left: 1.2rem; right: 1.2rem; gap: 1rem; font-size: .8rem; padding: .9rem 1.2rem; flex-wrap: wrap; justify-content: center; }
.hd-thermal__top { flex: 0 0 17%; flex-direction: column; align-items: flex-start; padding: 0 2rem; }
.hd-structural__top { flex-direction: column; align-items: flex-start; }
.hd-thermal__text { flex: none; width: 100%; }
.hd-structural__text { flex: none; width: 100%; }
.hd-thermal__visual { position: relative; top: auto; right: auto; width: 100%; height: auto; margin-top: .5rem; justify-content: center; }
.hd-thermal__visual img { max-width: 55%; max-height: 28vh; object-position: center; }
.hd-thermal__card { flex-direction: column; margin-left: 4%; margin-right: 4%; }
.hd-thermal__compare { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; gap: .75rem; }
.hd-thermal__compare-item { flex: 1 1 45%; min-width: 0; }
.hd-thermal__compare-item3 { flex: 1 1 100%; gap: .45rem; }
.hd-thermal__compare-item3 .hd-thermal__compare-title { font-size: .65rem; }
}
/* ============================================================
响应式：iPhone（≤576）—— 第二屏仍为一页
============================================================ */
@media screen and (max-width:576px) {
.hd-hero__bg { background: #d7ecfe; }
.hd-hero { display: flex; flex-direction: column; height: var(--hd-unit); padding-bottom: 3.4rem; box-sizing: border-box; overflow: hidden; }
.hd-hero__title { font-size: 1.7rem; }
.hd-hero__subtitle { font-size: 1.1rem; }
.hd-hero__desc { font-size: .9375rem; }
.hd-hero__text { position: relative; z-index: 2; flex: 0 0 auto; width: 100%; margin-top: 0; padding: 3rem 1.5rem 0; text-align: center; }
.hd-hero__desc { margin-left: auto; margin-right: auto; }
.hd-hero__bar { left: .6rem; right: .6rem; gap: .8rem; font-size: .7rem; padding: .8rem .5rem; }
.hd-hero__visual { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%; padding-bottom: 0; align-items: stretch; justify-content: center; }
.hd-hero__visual video { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 68%; }
.hd-core { height: var(--hd-unit); max-height: var(--hd-unit); padding: .85rem 1.15rem .7rem; gap: .35rem; }
.hd-core__visual { margin-top: 50px; height: 30%; max-height: 30%; padding: 0; }
.hd-core__content { margin-top: 2rem; padding: 15px; gap: 1rem; }
.hd-core__title { font-size: 1.28rem; }
.hd-core__subtitle { font-size: 1rem; margin-top: .22rem; }
.hd-core__feature { gap: .6rem; padding: .08rem 0; }
.hd-core__icon { width: 1.85rem; height: 1.85rem; }
.hd-core__feature-text p { font-size: .875rem; line-height: 1.35; }
/* 小屏第三屏：高度随内容撑开，翻页步数由 js/main.js 按 offsetHeight 计算 */
.screens__flow-container > .hd-thermal, .hd-thermal, .screens__flow-container > .hd-structural, .hd-structural { height: auto !important; max-height: none !important; min-height: var(--hd-unit); overflow: visible !important; }
.hd-thermal__top { flex: 0 0 auto !important; }
/* .hd-structural__top {
flex: 0 0 auto !important;
} */
.hd-thermal__card { flex: 0 0 auto !important; }
.hd-thermal { background: linear-gradient(160deg, #5b9bd0 0%, #2b6296 40%, var(--hd-navy) 100%) left bottom / 100% 70% no-repeat, #ececec; }
.hd-thermal::before { top: 42%; background-size: 25% 12.5%; }
.hd-thermal__top { flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding: .7rem 1.1rem 0; }
.hd-structural__top { flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; padding: 2rem 1rem; }
.hd-thermal__text { flex: none; width: 100%; }
.hd-structural__text { flex: none; width: 100%; }
.hd-thermal__title { font-size: 1.35rem; margin-top: 0; }
.hd-structural__title { font-size: 1.35rem; margin-top: 0; }
.hd-thermal__desc { margin: .5rem auto 0; font-size: 1rem; max-width: 22rem; }
.hd-structural__desc { margin: .5rem 0 0; font-size: 1rem; max-width: 22rem; }
.hd-thermal__label { margin-top: .55rem; font-size: 1.05rem; }
.hd-structural__label { margin-top: .55rem; font-size: 1.05rem; }
.hd-thermal__visual { position: relative; top: auto; left: auto; right: auto; width: 100%; height: auto; flex: 0 0 auto; margin-top: .15rem; justify-content: center; align-items: center; }
.hd-thermal__visual img { width: auto; max-width: 78%; height: auto; object-fit: contain; object-position: center; }
.hd-thermal__card { flex: 0 0 auto; width: auto; height: auto; margin: 0 .7rem .75rem; flex-direction: column; align-items: stretch; padding: .65rem .75rem; gap: .65rem; overflow: visible; }
.hd-thermal__compare { flex: 0 0 auto; width: 100%; justify-content: flex-start; gap: .35rem; overflow: visible; }
.hd-thermal__compare-item { flex: 0 0 auto; overflow: visible; }
.hd-thermal__compare-item img { width: 90%; height: auto; object-fit: contain; object-position: left top; padding-bottom: .35rem; }
.hd-thermal__compare-item3 { box-sizing: border-box; overflow: visible; gap: .35rem; }
.hd-thermal__compare-item3 .hd-thermal__compare-title { font-size: .58rem; }
.hd-thermal__compare-item3 img { width: 100%; margin: 0; padding: 0; border-radius: .55rem; object-position: center; }
.hd-thermal__compare-item-text span { font-size: 10px; }
.hd-thermal__compare-item img.hd-thermal__hands { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; padding: .15rem 0 0; object-fit: contain; object-position: center; }
.hd-thermal__ergo { flex: 0 0 auto; width: 100%; gap: .5rem; overflow: visible; justify-content: flex-start; }
.hd-thermal__ergo-head { flex: 0 0 auto; padding: .5rem .65rem; position: relative; z-index: 1; }
.hd-thermal__ergo-head h3 { font-size: .95rem; }
.hd-thermal__ergo-head p { font-size: .68rem; margin-top: .22rem; }
.hd-thermal__ergo-visual { flex: 0 0 auto; width: 100%; padding: .3rem; overflow: visible; }
.hd-thermal__ergo-visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.hd-core__img[data-feature="1"] { width: 93%; right: 5%; top: 11%; }
.hd-ergo { display: flex; flex-direction: column; height: auto; padding-bottom: 0; box-sizing: border-box; }
.hd-ergo__text { flex: 0 0 auto; max-width: none; width: 100%; height: auto; padding: 1.25rem 1.5rem 0; text-align: center; align-items: center; gap: 2rem; }
.hd-ergo__copy { width: 100%; }
.hd-ergo__title { font-size: 1.65rem; }
.hd-ergo__desc { margin-top: .85rem; font-size: .82rem; max-width: 20rem; margin-left: auto; margin-right: auto; color: var(--ergo-navy); }
.hd-ergo__label { margin-top: 1.1rem; font-size: 1.45rem; font-weight: 400; color: var(--ergo-navy); }
.hd-ergo__logo { width: 5.5rem; margin-top: .85rem; }
.hd-ergo__visual { position: relative; flex: 1 1 auto; left: auto; right: auto; bottom: auto; width: 100%; height: auto; min-height: 0; align-items: flex-end; justify-content: center; padding: .5rem 1rem 1rem; box-sizing: border-box; }
.hd-ergo__visual img { width: 100%; height: auto; max-width: 22rem; max-height: 100%; object-fit: contain; object-position: center bottom; }
.hd-ergo-core { display: flex; flex-direction: column; height: auto !important; }
.hd-ergo-core__logo { position: relative; top: auto; right: auto; align-self: center; width: 5.5rem; margin: 3.5rem auto 2rem; }
.hd-ergo-core__panel { width: auto; margin: 2rem; padding: 1rem 1.1rem 1.15rem; text-align: center; }
.hd-structural__panel { width: calc(100% - 1.25rem); margin: .45rem auto .9rem; }
.hd-structural-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.hd-structural-items .item { min-height: 8.9rem; padding: .65rem .5rem .6rem; }
.hd-structural-items .item__line { margin-top: .45rem; }
.hd-ergo-core__title { font-size: 1.35rem; }
.hd-ergo-core__desc { font-size: .82rem; margin-top: .65rem; }
.hd-ergo-core__badge { margin-top: .85rem; font-size: .75rem; }
.hd-ergo-core__visual { position: relative; padding-bottom: 80px; flex: 1 1 auto; height: auto; min-height: 0; margin-top: 30px; }
.hd-ergo-core__spot svg { width: clamp(5.75rem, 34vw, 8.25rem); }
.hd-ergo-core__hotspots { display: none; }
.hd-ergo-core__spot--1 { top: 17.5%; left: 6%; }
.hd-ergo-core__spot--2 { top: 6%; left: 37.5%; }
.hd-ergo-core__spot--3 { top: -9%; left: 62.5%; }
.hd-ergo-detail { margin: 0 auto; position: relative; width: 96%; transform: none; left: 0; top: 0; }
.hd-ergo-detail__card { padding: 1.7rem .75rem 2.6rem; border-radius: .75rem; }
.hd-ergo-detail__arrow { top: .5rem; font-size: .62rem; }
.hd-ergo-detail__arrow--prev { left: .7rem; }
.hd-ergo-detail__arrow--next { right: .7rem; }
.hd-ergo-detail__figure { min-height: 8rem; }
.hd-ergo-detail__figure img { max-height: 8.5rem; }
.hd-ergo-detail__copy { width: 100%; margin-top: .7rem; padding: .55rem .65rem .65rem; }
.hd-ergo-detail__copy h3 { font-size: .95rem; }
.hd-ergo-detail__copy p { font-size: .72rem; margin-top: .35rem; }
.hd-ergo-detail__nav { width: 96%; min-height: 2.6rem; padding: .25rem .2rem; }
.hd-ergo-detail__tab { font-size: .52rem; padding: .3rem .15rem; }
.hd-structural__visual { position: absolute; z-index: 2; bottom: 0; width: 100%; right: 0%; }
.hd-structural__visual img { max-width: 100%; max-height: 100%; position: absolute; bottom: 0px; left: 0px; }
}
/* ============================================================
超小屏：iPhone SE 375
============================================================ */
@media screen and (max-width:400px) {
.hd-core { height: var(--hd-unit); max-height: var(--hd-unit); padding: .55rem .85rem .45rem; gap: .2rem; }
.hd-core__visual { height: 26%; max-height: 26%; }
.hd-core__panel { width: 75%; max-width: 17rem; margin: 0 auto; }
.hd-ergo-core__spot svg { width: clamp(5rem, 30vw, 7rem); }
.hd-structural-items .item { min-height: 8.2rem; }
.hd-ergo-detail__copy h3 { font-size: .88rem; }
.hd-ergo-detail__tab { font-size: .48rem; }
}