/* 全站样式 v2：配色取自产品本身——熄屏面板的深墨、盖板玻璃的冷灰、排线的琥珀。
   内容区最宽 1360px；页头断点 1280 / 1440；栅格断点 600 / 900 / 1024 / 1280。手机优先。
   兼容：flex 容器不用 gap（Chrome 83、Safari 14 以下不支持），改用外边距；clamp() 前先写固定值；
   关键颜色与尺寸先写字面值再写变量，IE11 / Opera Mini 不认变量时仍可读。 */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #13213a;
  --ink-2: #24344f;
  --glass: #eef2f5;
  --paper: #ffffff;
  --flex: #e8a13a;
  --flex-deep: #8f5600;
  --steel: #5e6b7d;
  --line: #d6dde5;
  --radius-tile: 12px;
  --radius-photo: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --container: 1360px;
  --gutter: 16px;
  /* 英文用自托管的 Archivo；中文字符落到系统字体 */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
/* 吸顶页头约 64–72px，锚点跳转时留出空间，避免标题被页头盖住 */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
/* 不认识 <dialog> 的浏览器会把灯箱直接显示在页面上 */
dialog:not([open]) { display: none; }
a { color: var(--ink); text-decoration-color: var(--flex); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* 标题用宽体重磅，像印在排线上的零件标签 */
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; color: var(--ink); font-stretch: 118%; font-weight: 800; letter-spacing: -.01em; }
/* 首屏标题按产品写成两类（屏幕 + 组件），偏长；上限 3.9rem，桌面 4 行以内，按钮留在首屏 */
h1 { font-size: 3rem; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.9rem); font-stretch: 125%; line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: 2rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); }
h3 { font-size: 1.125rem; font-stretch: 110%; font-weight: 750; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--flex); outline-offset: 2px; }

/* 流式容器：超过 1360px 居中，两侧留白随断点加宽 */
.container { width: 100%; max-width: 1424px; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 16px; padding: 0 var(--gutter); }
.section { padding: 72px 0; padding: clamp(56px, 6vw, 96px) 0; }
.section--glass { background: #eef2f5; background: var(--glass); }
.section__head { max-width: 760px; margin: 0 0 36px; margin: 0 0 clamp(28px, 3vw, 44px); }
.section__head p { color: var(--steel); margin: 0; max-width: 62ch; }
.section__head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; max-width: none; }
.section__head--split > * { margin: 0 32px 16px 0; }
.section__foot { margin-top: 32px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; }

/* 按钮：全圆角是最高层级的可点元素；最小高度 44px 满足手指点击 */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-stretch: 110%; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn--primary { background: #e8a13a; background: var(--flex); color: #13213a; color: var(--ink); }
.btn--ink { background: #13213a; background: var(--ink); color: #fff; }
.btn--line { border-color: #13213a; border-color: var(--ink); color: #13213a; color: var(--ink); background: transparent; }
.btn--line-light { border-color: #fff; color: #fff; background: transparent; }

/* 页头：≥1440 常规；1280–1439 收紧；≤1279 收成汉堡菜单 */
.site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.logo { display: inline-flex; align-items: center; font-weight: 800; font-stretch: 125%; font-size: 1.125rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
/* 中文页 Logo 是 14 个字的公司全称：页头右侧还要放语言与菜单两个按钮（约 100px），
   390px 屏需缩到约 15px、360px 屏需缩到 13px 才不横向溢出 */
@media (max-width: 599px) { html[lang="zh-CN"] .logo { font-size: .95rem; letter-spacing: 0; } }
@media (max-width: 400px) { html[lang="zh-CN"] .logo { font-size: .8125rem; } html[lang="zh-CN"] .logo::before { margin-right: 6px; } }
/* 标志：一块屏的剖面，底部一条琥珀排线 */
.logo::before { content: ""; margin-right: 10px; width: 14px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; box-shadow: inset 0 -5px 0 var(--flex); }
.header-actions { display: flex; align-items: center; }
.header-actions > * + * { margin-left: 12px; }
.header-actions .btn { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.site-nav ul { list-style: none; margin: 0; padding: 8px var(--gutter) 16px; }
/* 无 JS（Opera Mini 省流模式等）时导航直接展开；有 JS 时才收进汉堡菜单 */
.js .site-nav { display: none; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: 100%; background: #fff; border-bottom: 1px solid var(--line); }
.js .site-nav.is-open { display: block; }
.no-js .nav-toggle { display: none; }
.no-js .site-header__inner { flex-wrap: wrap; }
.no-js .site-nav { width: 100%; -webkit-box-ordinal-group: 4; order: 3; }
.no-js .site-nav ul { display: flex; flex-wrap: wrap; padding: 0 0 8px; }
.no-js .site-nav li { margin-right: 20px; }
.site-nav a { display: block; padding: 12px 0; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .2s var(--ease); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--flex); text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (min-width: 1280px) {
  .site-header__inner { min-height: 72px; }
  .nav-toggle { display: none; }
  .header-actions { margin-left: 24px; }
  .header-actions .btn { display: inline-flex; padding: 8px 16px; font-size: .9375rem; }
  /* 手机下拉菜单的白底要清掉：页头是 96% 白加毛玻璃，纯白导航区在深色首屏上会显出一块框 */
  .site-nav, .js .site-nav, .no-js .site-nav { display: block; position: static; width: auto; border: 0; background: none; margin-left: auto; -webkit-box-ordinal-group: 1; order: 0; }
  .site-nav ul, .no-js .site-nav ul { display: flex; padding: 0; }
  .site-nav li, .no-js .site-nav li { margin-right: 0; }
  .site-nav li + li { margin-left: 20px; }
  .no-js .site-header__inner { flex-wrap: nowrap; }
  .site-nav a { padding: 8px 0; font-size: .9375rem; }
}
@media (min-width: 1440px) {
  .header-actions { margin-left: 32px; }
  .header-actions .btn { padding: 10px 22px; font-size: 1rem; }
  .site-nav li + li { margin-left: 32px; }
  .site-nav a { font-size: 1rem; }
}

/* 语言选择：原生 <details> 下拉，不依赖 JS 也能开合 */
.lang-menu { position: relative; }
.lang-menu summary { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: .875rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; white-space: nowrap; transition: background-color .2s var(--ease); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.lang-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.lang-menu summary svg { width: 18px; height: 18px; margin-right: 6px; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 140px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px rgba(19, 33, 58, .16); }
.lang-menu li a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.lang-menu li a[aria-current="true"] { background: var(--glass); box-shadow: inset 3px 0 0 var(--flex); }
/* 手机页头空间紧，只留地球图标和箭头 */
@media (max-width: 599px) { .lang-menu summary span { display: none; } }

/* 首屏：车间实拍打底，深墨渐变遮罩压暗（文字所在的左侧最深），左侧标题，右侧浅色线条的分层图 */
.hero { position: relative; overflow: hidden; background: #13213a; background: var(--ink); color: #fff; }
.hero__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(19, 33, 58, .88); }
@media (min-width: 1024px) {
  .hero::after { background: linear-gradient(90deg, rgba(19, 33, 58, .94) 0%, rgba(19, 33, 58, .88) 50%, rgba(19, 33, 58, .72) 100%); }
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
/* 只设上下内边距：左右留白由 .container 负责，用 padding 简写会把它清零；padding-block 在 Safari 14.1 以下无效，拆成上下两条 */
.hero__grid { display: grid; align-items: center; gap: 24px; padding-top: 64px; padding-top: clamp(40px, 6vw, 96px); padding-bottom: 64px; padding-bottom: clamp(48px, 6vw, 88px); }
.hero__body { max-width: 720px; }
.hero__body p { max-width: 56ch; font-size: 1.125rem; color: #d7dfea; }
.hero__meta { margin-top: 20px; font-size: .9375rem; color: #b8c4d4; }
.hero__actions { display: flex; flex-wrap: wrap; margin: 22px -6px -6px; }
.hero__actions > * { margin: 6px; }
.hero__visual { width: 100%; max-width: 620px; justify-self: center; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; }
  .hero__visual { justify-self: end; }
}
.page-hero { background: #eef2f5; background: var(--glass); padding: 56px 0; padding: clamp(40px, 5vw, 72px) 0; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: 2.5rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); margin: 0; }
.page-hero p { color: var(--steel); margin: 12px 0 0; max-width: 62ch; }

/* 爆炸分层图：唯一一处自动动效——页面载入时各层从叠在一起缓缓分开 */
.exploded { width: 100%; height: auto; overflow: visible; }
@keyframes separate { from { transform: translateY(calc((2 - var(--i)) * 54px)); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
.x-glass { fill: rgba(255, 255, 255, .72); stroke: var(--ink); stroke-width: 1.5; }
.x-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.x-oca { fill: rgba(255, 255, 255, .35); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.x-fog { fill: #f8fafc; stroke: var(--ink); stroke-width: 1.5; }
.x-grid { fill: none; stroke: var(--steel); stroke-width: .8; opacity: .45; }
.x-lcd { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.x-lcd-view { fill: #1d3354; }
.x-back { fill: #dfe5ec; stroke: var(--ink); stroke-width: 1.5; }
.x-flex { fill: var(--flex); stroke: var(--flex-deep); stroke-width: 1; }
.x-leader { fill: none; stroke: var(--steel); stroke-width: 1; }
.x-dot { fill: var(--flex); stroke: var(--ink); stroke-width: 1; }
.x-label { font-family: var(--font); font-size: 15px; font-weight: 650; fill: var(--ink); }
/* 手机上整张图缩到约 360px 宽，标签按比例会小到 9px；放大到缩放后约 12px */
@media (max-width: 599px) { .x-label { font-size: 20px; } }

/* 分层图放在深色首屏里：线条和标签改浅色，层次靠透明度区分 */
.hero .x-glass { fill: rgba(255, 255, 255, .10); stroke: #e6edf5; }
.hero .x-shine { stroke: rgba(255, 255, 255, .8); }
.hero .x-oca { fill: rgba(255, 255, 255, .06); stroke: #c9d4e1; }
.hero .x-fog { fill: rgba(255, 255, 255, .16); stroke: #e6edf5; }
.hero .x-grid { stroke: #c9d4e1; opacity: .5; }
.hero .x-lcd { fill: #0b1628; stroke: #e6edf5; }
.hero .x-lcd-view { fill: #1f3a61; }
.hero .x-back { fill: rgba(255, 255, 255, .26); stroke: #e6edf5; }
.hero .x-leader { stroke: #9fb0c6; }
.hero .x-dot { stroke: #fff; }
.hero .x-label { fill: #fff; }

/* 栅格：各区块在自己的断点改列数 */
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
/* 型号瓷砖在手机上就两列并排，否则 8 个型号会把页面拉得很长 */
.grid--tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 600px) { .grid--tiles { gap: 20px; } }
@media (min-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .grid--features { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* 卖点：无框四栏，顶部一条琥珀细线 */
.feature { padding-top: 20px; border-top: 3px solid var(--flex); }
.feature__icon { width: 28px; height: 28px; margin-bottom: 12px; color: var(--ink); }
.feature__icon svg { width: 100%; height: 100%; }
.feature p { color: var(--steel); margin: 0; }

/* 型号瓷砖：型号码用宽体大字，价格用等宽数字 */
.tile { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-tile); overflow: hidden; }
.tile__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 12px; border-bottom: 1px solid var(--line); }
.tile__body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 18px; }
.tile__code { margin: 0; font-size: 1.3rem; font-size: clamp(1.15rem, .9rem + 1vw, 1.5rem); font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; }
/* 手机两列瓷砖太窄，两位数价格会把「/ pc」挤到下一行；区块标题已写明按件计价，这里省掉 */
@media (max-width: 599px) { .tile__body { padding: 12px; } .tile__fit, .tile__price { font-size: .875rem; } .tile__price strong { font-size: 1rem; } .tile__price small { display: none; } }
.tile__fit { margin: 2px 0 12px; color: var(--steel); font-size: .9375rem; }
.tile__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.tile__price > * { margin: 0 8px 4px 0; }
.tile__price strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.tile__price small { color: var(--steel); }
.tile__price a { font-weight: 700; font-size: .9375rem; white-space: nowrap; }

/* 型号区末尾：没列出的型号引导询价，客户简介里的其他适配品牌放在这里 */
.more-models { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 28px; padding: 20px 24px; border: 1px dashed #b9c3cf; border-radius: var(--radius-tile); background: var(--paper); }
.more-models > * { margin: 8px 32px 8px 0; }
.more-models p { max-width: 70ch; }
.more-models strong { font-stretch: 110%; }

/* 组件规格表：与首屏分层图一一对应 */
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.spec-row { display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
/* 组件缩略图：与首屏分层图同一画法的线条图标 */
.spec-icon { grid-row: span 3; width: 56px; height: 56px; padding: 4px; border-radius: var(--radius-photo); background: #eef2f5; background: var(--glass); overflow: visible; }
.ci-glass { fill: rgba(255, 255, 255, .9); stroke: #13213a; stroke-width: 1.2; }
.ci-shine { fill: none; stroke: #9fb0c6; stroke-width: 1.6; stroke-linecap: round; }
.ci-oca { fill: rgba(255, 255, 255, .6); stroke: #13213a; stroke-width: 1.1; stroke-dasharray: 3 2; }
.ci-fog { fill: #f8fafc; stroke: #13213a; stroke-width: 1.2; }
.ci-grid { fill: none; stroke: #5e6b7d; stroke-width: .7; opacity: .6; }
.ci-back { fill: #dfe5ec; stroke: #13213a; stroke-width: 1.2; }
.ci-flex { fill: #e8a13a; stroke: #8f5600; stroke-width: .8; }
.spec-row picture { grid-row: span 3; }
.spec-row img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-photo); background: var(--glass); }
.spec-row h3 { margin: 0; }
.spec-row p { margin: 0; color: var(--steel); font-size: .9375rem; }
.spec-row .spec-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .spec-row { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 24px; }
  .spec-row picture, .spec-icon { grid-row: auto; }
  .spec-row img, .spec-icon { width: 72px; height: 72px; }
  .spec-row .spec-price { text-align: right; font-size: 1.125rem; }
}
.spec-note { margin: 16px 0 0; color: var(--steel); font-size: .9375rem; }

/* 产品页组件区：左侧分层图（点选跳到右侧对应行），右侧规格表 */
.components-layout { display: grid; gap: 32px; align-items: start; }
.components-layout__visual { max-width: 520px; }
@media (min-width: 1024px) { .components-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
/* 跳到某一行时短暂标亮，让人看清落在哪一行 */
.spec-row:target { background: rgba(232, 161, 58, .12); }
.tile:target { box-shadow: 0 0 0 3px #e8a13a; }
/* 规格表：标签 / 数值两栏（v2 重写样式表时曾漏掉这组基础规则，参数表退回成浏览器默认的上下缩进排列） */
.specs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0; }
.specs dt { color: #5e6b7d; color: var(--steel); }
.specs dd { margin: 0; }
.tile .specs { grid-template-columns: auto 1fr; font-size: .875rem; margin: 0 0 12px; }
.tile .specs dd { font-weight: 600; overflow-wrap: anywhere; }

/* 工厂：一大三小的照片拼贴 */
.factory__points { display: grid; gap: 24px; margin: 28px 0; }
@media (min-width: 600px) { .factory__points { grid-template-columns: repeat(2, 1fr); } }
.factory { display: grid; gap: 32px; align-items: center; }
.factory__photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.factory__photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
.factory__photos picture:first-child { grid-column: 1 / -1; }
.factory__photos picture:first-child img { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .factory { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; }
  .factory__photos { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .factory__photos img, .factory__photos picture:first-child img { aspect-ratio: auto; }
  .factory__photos picture:first-child { grid-column: 1; grid-row: 1 / span 3; }
}
.checklist { list-style: none; padding: 0; margin: 0 0 1.25em; }
.checklist li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 6px; border-left: 2px solid var(--flex); border-bottom: 2px solid var(--flex); transform: rotate(-45deg); }

/* 适配品牌 */
.brands { padding: 32px 0; border-bottom: 1px solid var(--line); }
.brands__inner { display: flex; flex-wrap: wrap; align-items: baseline; }
.brands__inner > * { margin: 0 36px 10px 0; }
.brands__label { width: 100%; color: var(--steel); font-size: .9375rem; }
.brands__name { font-size: 1.35rem; font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); font-weight: 800; font-stretch: 118%; color: #6f7c8e; }
@media (min-width: 900px) { .brands__label { width: auto; margin-right: 8px; } }

/* 下单流程：真正的先后顺序，才用编号；编号之间用排线色连起来 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: step; }
.step { position: relative; padding-left: 64px; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--steel); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .step { padding: 64px 16px 0 0; }
  .step::after { content: ""; position: absolute; top: 21px; left: 52px; right: 8px; height: 2px; background: var(--flex); }
  .step:last-child::after { display: none; }
}

.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.split img { width: 100%; border-radius: var(--radius-photo); }
.split--top { align-items: start; }
.tags { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1em; }
.tags li { margin: 0 8px 8px 0; }
.tags li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; }
.note { margin-top: 24px; padding: 12px 16px; border-left: 3px solid var(--flex); background: var(--glass); }

.gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery a { display: block; overflow: hidden; border-radius: var(--radius-photo); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 图库 5 张：第一张横跨两格，手机 1+2+2、桌面 2+1 / 1+1+1，不留空位 */
.gallery a:first-child { grid-column: span 2; }
/* 横跨两列时用 8:3，高度正好等于一行 4:3 的单格，右侧那一格不会下方留空 */
.gallery a:first-child img { aspect-ratio: 8 / 3; }
.gallery img { transition: transform .4s var(--ease); }

/* 收尾询价：深墨底，琥珀主按钮 */
.cta-band { padding: 64px 0; padding: clamp(48px, 6vw, 80px) 0; background: #13213a; background: var(--ink); color: #d7dfea; }
.cta-band__inner { display: grid; gap: 24px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin: 0; color: #b8c4d4; }
.cta-band .hero__actions { margin: -6px; }
@media (min-width: 1024px) { .cta-band__inner { grid-template-columns: 1fr auto; } }

.contact-list { display: grid; list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.contact-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-list .label { display: block; font-size: .875rem; color: var(--steel); }
.contact-list a, .contact-list .value { font-size: 1.125rem; font-weight: 700; color: var(--ink); word-wrap: break-word; overflow-wrap: anywhere; }

/* 页脚 */
.site-footer { padding: 48px 0 96px; background: #13213a; background: var(--ink); color: #b8c4d4; font-size: .9375rem; }
.site-footer a { color: #fff; }
.site-footer h2 { font-size: 1rem; font-stretch: 110%; color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; word-wrap: break-word; overflow-wrap: anywhere; }
.site-footer__grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1.5fr; } }
.site-footer__bottom { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; }

/* 右下角邮件悬浮按钮，手机上页头的询价按钮隐藏时仍有入口；页脚底部留了 96px，避免它盖住版权行 */
.contact-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e8a13a; background: var(--flex); color: #13213a; color: var(--ink); box-shadow: 0 8px 20px rgba(19, 33, 58, .25); transition: background-color .2s var(--ease); }
.contact-float svg { width: 26px; height: 26px; }

.lightbox { max-width: 92vw; padding: 0; border: 0; background: transparent; }
.lightbox::backdrop { background: rgba(10, 18, 32, .88); }
.lightbox img { width: auto; max-height: 86vh; }
.lightbox__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; font-size: 1.5rem; cursor: pointer; }

/* 404：大号琥珀数字 + 分层图里「找不到」的那一层（虚线空框缓慢明灭） */
/* 选择器要带 .hero__body：否则会被 .hero__body p 的字号和颜色盖掉 */
.hero__body .big-404 { max-width: none; margin: 0 0 .1em; font-size: 6rem; font-size: clamp(5rem, 3rem + 7vw, 9rem); font-weight: 800; font-stretch: 125%; line-height: .9; letter-spacing: -.03em; color: #e8a13a; color: var(--flex); }
.hero__body .hero__zh { margin: -.2em 0 1em; font-size: 1.5rem; font-weight: 700; color: #fff; }
.x-missing { fill: rgba(242, 180, 87, .08); stroke: #f2b457; stroke-width: 2; stroke-dasharray: 8 6; animation: missing 2.4s ease-in-out infinite; }
@keyframes missing { 50% { opacity: .35; } }
.x-label--missing { font-weight: 800; }
.hero .x-label--missing { fill: #f2b457; }

/* 占位符标黄描红，上线前一眼能看出还有哪些信息没填 */
[data-placeholder] { background: #fff3a3; color: #7a1d1d; outline: 2px dashed #d33; }

/* ===== 动效 =====
   只动 transform / opacity，不触发重排；主题取自产品：屏幕通电、盖板反光、排线。
   减少动态效果时由文件末尾统一关闭；不认识的旧浏览器直接显示静态结果。 */

/* 1 首屏：分层图分开后 LCD 面板通电点亮，随后各层轻浮 */
.x-layer { animation: separate 1.1s calc(.15s + var(--i) * .06s) var(--ease) both, float 6s calc(1.5s + var(--i) * .35s) ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* 鼠标进入分层图（或键盘聚焦其中一层）时暂停浮动：浮动叠加悬停抽出会显得晃；用暂停而不是取消，停在当前位置不跳变 */
.hero__visual:hover .x-layer, .exploded:hover .x-layer, .exploded:focus-within .x-layer { animation-play-state: paused; }
.x-lcd-view { animation: power-on 1.4s 1.2s ease-out both; }
@keyframes power-on { 0% { opacity: .35; } 18% { opacity: 1; } 26% { opacity: .55; } 40%, 100% { opacity: 1; } }

/* 2 滚动入场：html 带 io 类（支持 IntersectionObserver 且未要求减少动效）时才先隐藏；
   万一脚本没加载，4 秒后兜底动画自动显示，内容不会一直空着 */
.io .section__head, .io .tile, .io .spec-row, .io .more-models, .io .factory > div, .io .factory__photos, .io .step, .io .cta-band__inner {
  opacity: 0; transform: translateY(18px);
  animation: reveal-fallback .01s 4s forwards;
}
/* 显示规则逐条对应隐藏规则，优先级不能低于它（曾因 .io .factory > div 高于 .io .is-visible，工厂区一直透明） */
.io .section__head.is-visible, .io .tile.is-visible, .io .spec-row.is-visible, .io .more-models.is-visible, .io .factory > div.is-visible, .io .factory__photos.is-visible, .io .step.is-visible, .io .cta-band__inner.is-visible {
  opacity: 1; transform: none; animation: none; transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
/* 瓷砖和步骤逐个错开出现 */
.io .tile:nth-child(4n+2), .io .step:nth-child(2) { transition-delay: .07s; }
.io .tile:nth-child(4n+3), .io .step:nth-child(3) { transition-delay: .14s; }
.io .tile:nth-child(4n+4), .io .step:nth-child(4) { transition-delay: .21s; }

/* 5 下单流程：琥珀连线从左到右画出，编号弹出 */
@media (min-width: 1024px) {
  .step::after { transform-origin: 0 50%; }
  .io .step::after { transform: scaleX(0); transition: transform .7s .35s var(--ease); }
  .io .step:nth-child(2)::after { transition-delay: .5s; }
  .io .step:nth-child(3)::after { transition-delay: .65s; }
  .io .step.is-visible::after { transform: scaleX(1); }
}
.io .step::before { transform: scale(.6); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.io .step.is-visible::before { transform: none; }

/* 6 按钮：按下时微缩（触屏也有反馈）；主按钮悬停时光泽扫过 */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: scale(.97); }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: skewX(-20deg); pointer-events: none; }

/* 3 型号瓷砖：盖板玻璃的一道反光 */
.tile { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tile picture { position: relative; overflow: hidden; }
.tile picture::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: skewX(-18deg); pointer-events: none; }

/* 4 组件规格行：左侧长出一条琥珀排线 */
.spec-row { position: relative; }
.spec-row::before { content: ""; position: absolute; left: -16px; top: 16px; bottom: 16px; width: 4px; border-radius: 2px; background: #e8a13a; background: var(--flex); transform: scaleY(0); transition: transform .3s var(--ease); }
.spec-row img, .spec-icon { transition: transform .3s var(--ease); }

/* 7 导航：琥珀下划线从左滑入；当前页常驻 */
.site-nav a { position: relative; }
.site-nav a[aria-current="page"] { text-decoration: none; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 2px; background: #e8a13a; background: var(--flex); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1279px) { .site-nav a::after { right: auto; width: 32px; } }

/* 8 语言菜单、手机菜单展开 */
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-menu[open] ul, .js .site-nav.is-open { animation: drop .2s var(--ease); }

/* 9 悬浮邮件按钮：打开 4 秒后泛起两圈光圈，然后静止 */
.contact-float::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(232, 161, 58, .7); animation: ping 1.6s 4s 2 ease-out; pointer-events: none; }
@keyframes ping { to { box-shadow: 0 0 0 18px rgba(232, 161, 58, 0); } }

/* 10 分层图互动：指向某一层（或它的标签），这一层从叠层里往左上抽出，两道琥珀走线光沿外框绕行（周期 360 正好是周长 720 的一半，循环无跳变）；
   LCD 面板被指到时显示区点亮；其余各层变淡。键盘 Tab 聚焦同样生效；点击跳到产品页对应组件 */
.x-link { cursor: pointer; outline: none; }
/* 只有不动的感应区接收鼠标；会动的图形不接收，否则图形抽离后悬停会在边缘反复切换 */
.x-lift { pointer-events: none; }
.x-hit { fill: transparent; pointer-events: all; }
.x-lift { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .35s var(--ease); }
.x-edge { fill: none; stroke: #f2b457; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 110 250; stroke-dashoffset: 0; opacity: 0; transition: opacity .2s var(--ease); }
@keyframes trace { to { stroke-dashoffset: -720; } }
.x-label { transition: fill .25s var(--ease); }
.x-dot { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease); }
/* :has 不支持的旧浏览器只是不做「其余变淡」，其余效果照常 */
.exploded:has(.x-link:hover) .x-lift, .exploded:has(.x-link:focus) .x-lift { opacity: .25; }
.exploded .x-link:hover .x-lift, .exploded .x-link:focus .x-lift { opacity: 1; transform: translate(-26px, -12px); }
.x-link:hover .x-edge, .x-link:focus .x-edge { opacity: 1; animation: trace 2.4s linear infinite; filter: drop-shadow(0 0 4px rgba(242, 180, 87, .9)); }
.x-link:hover .x-leader, .x-link:focus .x-leader { stroke: #f2b457; stroke-width: 1.8; }
.x-link:hover .x-label, .x-link:focus .x-label { fill: #f2b457; font-weight: 800; }
.x-link:hover .x-dot, .x-link:focus .x-dot { transform: scale(1.9); }
.x-link:hover .x-lcd-view, .x-link:focus .x-lcd-view { fill: #3a6fb0; transition: fill .3s var(--ease); }
/* 浅色底里的分层图（非首屏）标签用深琥珀，保证对比度 */
.exploded .x-link:hover .x-label, .exploded .x-link:focus .x-label { fill: #8f5600; }
.hero .x-link:hover .x-label, .hero .x-link:focus .x-label { fill: #f2b457; }

/* 悬停效果只给能悬停的设备；触屏上 :hover 会在点击后粘住 */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #f2b457; }
  .btn--ink:hover { background: var(--ink-2); }
  .btn--line:hover { background: var(--ink); color: #fff; }
  .btn--line-light:hover { background: #fff; color: var(--ink); }
  .site-nav a:hover { color: var(--flex-deep); }
  .lang-menu summary:hover, .lang-menu li a:hover { background: var(--glass); }
  .tile__price a:hover { color: var(--flex-deep); }
  .contact-float:hover { background: #f2b457; }
  .btn--primary:hover::after { left: 120%; transition: left .6s var(--ease); }
  .tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(19, 33, 58, .12); }
  .tile:hover picture::after { left: 130%; transition: left .8s var(--ease); }
  .spec-row:hover::before { transform: scaleY(1); }
  .spec-row:hover img, .spec-row:hover .spec-icon { transform: scale(1.06); }
  .gallery a:hover img { transform: scale(1.04); }
  .site-nav a:hover::after { transform: scaleX(1); }
}

/* 系统开启「减少动态效果」时关闭全部动画与过渡 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}