/* ==========================================================================
   Accuracy Trade — 自研站点样式
   设计方向：工业精密感 / 金属质感 / 高对比 / 强排版
   ========================================================================== */

:root {
  --ink:        #0f1419;
  --ink-2:      #1c242d;
  --ink-3:      #2c3742;
  --line:       #e3e8ee;
  --line-2:     #eef2f6;
  --paper:      #ffffff;
  --paper-2:    #f7f9fb;
  --paper-3:    #eef2f6;
  --text:       #1a2430;
  --text-mid:   #5a6b7c;
  --text-dim:   #8b9aa9;
  /* 品牌色：取自 logo 单色 #00ACC2
     原色对比度仅 2.73，不能直接用于文字/按钮，
     因此派生三档：brand(原色，装饰) / accent(交互) / accent-dk(悬停) */
  --brand:      #00ACC2;   /* logo 原色，仅装饰、图形、发光 */
  --brand-soft: #E6F7FA;   /* 极浅底，用于标签/选中背景 */
  --brand-mid:  #7FD4E0;   /* 中间调，边框/分隔 */
  --accent:     #00808F;   /* 交互主色：白底 4.68，白字压底 4.68，双向达标 */
  --accent-dk:  #006B78;   /* 悬停加深 */
  --accent-on:  #FFFFFF;
  --steel:      #6b7c8d;
  --radius:     10px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md:  0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg:  0 12px 32px rgba(16,24,40,.10), 0 4px 8px rgba(16,24,40,.04);
  --wrap:       1200px;
  --ease:       cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .6em; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
p  { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------ 头部 */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { color: var(--accent); display: flex; }
/* 真实 logo：单色青蓝透明 PNG，比例 7.37:1。用高度控制尺寸，
   width 自动，避免变形；不设 filter，保持 logo 原色 */
.brand-logo {
  height: 30px;
  width: auto;
  display: block;
  transition: opacity .2s var(--ease);
}
.brand:hover .brand-logo { opacity: .82; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text em {
  font-style: normal; font-size: .6875rem; color: var(--text-dim);
  letter-spacing: .02em; margin-top: 2px;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 导航 */
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-item { position: relative; }
.nav-item > a {
  display: block; padding: 8px 13px; border-radius: 8px;
  font-size: .9375rem; font-weight: 500; color: var(--text-mid);
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.nav-item > a:hover { color: var(--text); background: var(--paper-2); }
.nav-item.is-active > a { color: var(--accent); font-weight: 600; }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: all .2s var(--ease);
}
.nav-item.has-sub:hover .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.submenu a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: .875rem; color: var(--text-mid); transition: all .15s var(--ease);
}
.submenu a:hover { background: var(--paper-2); color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* ---------------------------------------------------------- 语言下拉
   与旧站一致的交互：显示 "Language ▼"，点击展开语言列表。
   桌面与移动端共用一套结构，避免两套实现不一致。 */
.lang-dd { position: relative; flex-shrink: 0; }

.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--text-mid); line-height: 1;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.lang-dd-btn:hover { border-color: var(--brand-mid); color: var(--text); }
.lang-dd-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.lang-dd-caret { transition: transform .2s var(--ease); flex-shrink: 0; }
.lang-dd.open .lang-dd-caret { transform: rotate(180deg); }

.lang-dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 168px; margin: 0; padding: 6px;
  list-style: none;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 120;
}
.lang-dd.open .lang-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* 仅在真正支持 hover 的设备上启用悬停展开；
   触屏设备若也套用 hover，点开后会因 :hover 残留而无法点击关闭 */
@media (hover: hover) and (pointer: fine) {
  .lang-dd:hover .lang-dd-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  /* Esc 键或点击收起时临时压制 hover 展开，避免菜单"关不掉" */
  .lang-dd.force-closed:hover .lang-dd-menu {
    opacity: 0; visibility: hidden; transform: translateY(-6px);
  }
}

.lang-dd-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 7px;
  font-size: .875rem; font-weight: 500; color: var(--text-mid);
  transition: background .14s var(--ease), color .14s var(--ease);
  white-space: nowrap;
}
.lang-dd-menu a:hover { background: var(--paper-2); color: var(--text); }
.lang-dd-menu a.on {
  background: var(--brand-soft); color: var(--accent); font-weight: 700;
}
/* 当前语言前打勾 */
.lang-dd-menu a.on::before {
  content: ''; width: 0; height: 0; flex-shrink: 0;
}

/* 汉堡按钮：列方向 flex，span 之间用 gap 控制间距，
   这样 adjust-padding 的方案下三条杠的粗细与间距不受影响。
   视觉通透（无背景无边框），负 margin 抵消触控 padding，不影响布局 */
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px 0;
  background: var(--ink); border-radius: 2px; transition: .25s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 9px;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: all .2s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,128,143,.3); }
.btn-primary:hover { background: var(--accent-dk); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,128,143,.28); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--steel); background: var(--paper-2); }
.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.btn-light:hover { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------------ Hero */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0b1016 0%, #16202b 45%, #1e2c3a 100%);
  color: #fff;
  padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 132px);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.hero::after {
  content: ''; position: absolute;
  width: 620px; height: 620px; right: -180px; top: -220px;
  background: radial-gradient(circle, rgba(0,172,194,.30) 0%, transparent 65%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 780px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; margin-bottom: 22px;
  background: rgba(0,172,194,.14); border: 1px solid rgba(0,172,194,.42);
  border-radius: 999px; font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #7FE3F0;
}
.hero .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 10px var(--brand);
}
.hero h1 { color: #fff; margin-bottom: 20px; letter-spacing: -.03em; }
.hero .lead {
  font-size: clamp(1rem, 1.5vw, 1.1875rem); color: rgba(255,255,255,.72);
  max-width: 620px; margin-bottom: 34px; line-height: 1.7;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero 数据条 */
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; margin-top: clamp(48px, 6vw, 72px);
  background: rgba(255,255,255,.10); border-radius: var(--radius);
  overflow: hidden; border: 1px solid rgba(255,255,255,.10);
}
.hero-stat { padding: 22px 20px; background: rgba(12,18,25,.55); }
.hero-stat strong {
  display: block; font-size: 1.625rem; font-weight: 800;
  letter-spacing: -.03em; color: #fff; line-height: 1.2;
}
.hero-stat span { font-size: .8125rem; color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------------ 区块 */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section.alt { background: var(--paper-2); }
.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .kicker {
  display: block; margin-bottom: 12px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.section-head p { color: var(--text-mid); font-size: 1.0625rem; margin: 0; }
.section-foot { margin-top: 44px; text-align: center; }

/* ------------------------------------------------------------------ 卡片网格 */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-mid); }
.card-thumb {
  aspect-ratio: 4/3; background: var(--paper-3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card-thumb img { transform: scale(1.04); }
.card-thumb .ph {
  color: var(--text-dim); opacity: .45;
  display: flex; align-items: center; justify-content: center;
}
.card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.card-body p { font-size: .875rem; color: var(--text-mid); margin: 0; line-height: 1.6; }
.card-more {
  margin-top: auto; padding-top: 16px;
  font-size: .8125rem; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 5px;
}
.card-more::after { content: '\2192'; transition: transform .2s var(--ease); }
.card:hover .card-more::after { transform: translateX(3px); }

/* 产品分类卡（无图也能好看） */
.cat-card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .22s var(--ease);
}
.cat-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cat-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  background: var(--paper-2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
}
.cat-card:hover .cat-icon { background: #eaf2ff; }
.cat-card strong { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.cat-card small { color: var(--text-dim); font-size: .75rem; }

/* ---------------------------------------------- 首页产品分类（带图卡片）
   一排 2 个。图不再满铺：外层留白 + 图片自身细边框，
   使产品图更聚焦、卡片层次更像"产品目录"而不是"图墙"。 */
.prod-cards { gap: 32px; }

.prod-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.prod-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-mid);
  box-shadow: 0 20px 44px rgba(16,24,40,.13), 0 4px 12px rgba(16,24,40,.06);
}
.prod-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* 图片外框：内缩留白，形成"画框"感，图片因此比原来小一圈 */
.prod-card-media {
  position: relative;
  /* 四周 24px 留白：图片明显小于卡片，形成"产品册"的画框层次 */
  margin: 24px 24px 0;
  /* 框与素材同比例(4:3)：cover 才能无留白铺满，不会出现白边 */
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.prod-card:hover .prod-card-media {
  border-color: var(--brand-mid);
  box-shadow: inset 0 0 0 1px rgba(0,172,194,.10);
}

/* 图片本身再加一圈内边距，与边框形成"双框"精致感 */
.prod-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 8px;
  background: var(--paper);
  transition: transform .55s var(--ease), filter .3s var(--ease);
}
.prod-card:hover .prod-card-media img { transform: scale(1.035); }

.prod-card-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); opacity: .4;
}

/* 右上角箭头：默认隐藏，hover 淡入，提示可点击 */
.prod-card-arrow {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.96);
  color: var(--accent);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(16,24,40,.14);
  opacity: 0; transform: translateY(-4px) scale(.92);
  transition: opacity .26s var(--ease), transform .26s var(--ease), background .2s var(--ease);
  pointer-events: none;
}
.prod-card:hover .prod-card-arrow,
.prod-card:focus-visible .prod-card-arrow {
  opacity: 1; transform: translateY(0) scale(1);
}
.prod-card:hover .prod-card-arrow { background: var(--brand-soft); border-color: var(--brand-mid); }

.prod-card-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 20px 26px 24px;
  min-height: 72px;
}
/* 左侧一条细色条，hover 时变长——很轻但有"目录索引"的暗示 */
.prod-card-title {
  position: relative;
  margin: 0;
  padding-left: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--text);
  transition: color .22s var(--ease), padding-left .22s var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-card:hover .prod-card-title { color: var(--accent); }

.prod-card-meta {
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

/* 平板：仍两列，收紧间距与留白 */
@media (max-width: 980px) {
  .prod-cards { gap: 22px; }
  .prod-card-media { margin: 18px 18px 0; }
  .prod-card-body { padding: 16px 20px 20px; min-height: 64px; }
  .prod-card-title { font-size: 1rem; }
}

/* 手机：单列，图片比例回到 4:3 更紧凑 */
@media (max-width: 640px) {
  .prod-cards { gap: 18px; }
  .prod-card { border-radius: 15px; }
  .prod-card-media { margin: 14px 14px 0; }
  .prod-card-media img { padding: 6px; }
  .prod-card-body { padding: 14px 16px 16px; min-height: 56px; }
  .prod-card-title { font-size: .9375rem; }
  .prod-card-arrow { top: 9px; right: 9px; width: 30px; height: 30px; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 页头（内页） */
.page-hero {
  background: linear-gradient(160deg, #0e151d 0%, #1a2632 100%);
  color: #fff; padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 60px);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; width: 480px; height: 480px;
  right: -120px; bottom: -280px;
  background: radial-gradient(circle, rgba(0,172,194,.24) 0%, transparent 68%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .8125rem; color: rgba(255,255,255,.5); margin-bottom: 16px;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .4; }
.page-hero h1 { color: #fff; margin-bottom: 10px; font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
.page-hero p { color: rgba(255,255,255,.65); max-width: 660px; margin: 0; }

/* ------------------------------------------------------------------ 列表页 */
.list-layout { display: grid; grid-template-columns: 268px 1fr; gap: 48px; align-items: start; }

.sidebar { position: sticky; top: 96px; }
.side-nav {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper);
}
.side-nav h4 {
  padding: 16px 20px; margin: 0; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.side-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 20px; font-size: .9rem; color: var(--text-mid);
  border-bottom: 1px solid var(--line-2);
  transition: all .18s var(--ease);
}
.side-nav a:last-child { border-bottom: 0; }
.side-nav a:hover { background: var(--paper-2); color: var(--text); padding-left: 24px; }
.side-nav a.on { background: #f0f6ff; color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.side-nav a .n { font-size: .6875rem; color: var(--text-dim); background: var(--paper-3); padding: 2px 7px; border-radius: 999px; }

.side-contact {
  margin-top: 20px; padding: 24px 20px;
  background: linear-gradient(160deg, #16202b, #1e2c3a);
  border-radius: var(--radius-lg); color: #fff;
}
.side-contact h4 { color: #fff; font-size: .9375rem; margin-bottom: 8px; }
.side-contact p { color: rgba(255,255,255,.6); font-size: .8125rem; margin-bottom: 16px; }

/* 列表内容区 */
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.list-toolbar .count { font-size: .875rem; color: var(--text-dim); }

/* 文章列表（横向条） */
.article-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--line-2);
  transition: all .2s var(--ease);
}
.article-row:hover { padding-left: 6px; }
.article-row:first-child { padding-top: 0; }
.article-row .thumb {
  aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden;
  background: var(--paper-3); display: flex; align-items: center; justify-content: center;
}
.article-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-row h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.article-row .meta { font-size: .75rem; color: var(--text-dim); margin-bottom: 8px; }
.article-row p { font-size: .875rem; color: var(--text-mid); margin: 0; }

/* 空状态 */.empty {
  padding: 72px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.empty .ico { color: var(--text-dim); opacity: .4; margin-bottom: 16px; }
.empty h3 { font-size: 1.125rem; color: var(--text-mid); margin-bottom: 8px; }
.empty p { font-size: .875rem; color: var(--text-dim); margin: 0 0 20px; }

/* ------------------------------------------------------------------ 详情页 */
.detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.detail-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.detail-head h1 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); margin-bottom: 12px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8125rem; color: var(--text-dim); }

.prose { font-size: 1rem; line-height: 1.8; color: var(--text); }
.prose h2 { margin-top: 2em; font-size: 1.375rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.125rem; }
.prose p { margin-bottom: 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.prose li { margin-bottom: .5em; }
.prose img { border-radius: var(--radius); margin: 1.6em 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.6em 0; padding: 16px 22px;
  border-left: 3px solid var(--accent); background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .9375rem; }
.prose th, .prose td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--paper-2); font-weight: 600; }

.detail-aside {
  position: sticky; top: 96px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; background: var(--paper);
}
.detail-aside h4 { font-size: .9375rem; margin-bottom: 14px; }
.detail-aside .row-item {
  display: flex; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line-2); font-size: .875rem;
}
.detail-aside .row-item:last-of-type { border-bottom: 0; }
.detail-aside .row-item span:first-child { color: var(--text-dim); flex-shrink: 0; min-width: 68px; }

/* ------------------------------------------------------------------ 表单 */
.form-card {
  max-width: 680px; padding: clamp(28px, 4vw, 44px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 7px; font-size: .875rem; font-weight: 600; }
.field label .req { color: #e5484d; margin-left: 2px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: .9375rem; color: var(--text);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; transition: all .18s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,172,194,.16);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: .8125rem; color: var(--text-dim); margin-top: 16px; }

.alert {
  padding: 14px 18px; border-radius: 8px; margin-bottom: 24px;
  font-size: .9rem; border: 1px solid transparent;
}
.alert-ok  { background: #ecfdf3; border-color: #a7f0c4; color: #05593a; }
.alert-err { background: #fef2f2; border-color: #fecaca; color: #9f1239; }

/* ------------------------------------------------------------------ 页脚 */
.site-footer {
  margin-top: 0; padding: 64px 0 28px;
  background: var(--ink); color: rgba(255,255,255,.62);
  font-size: .875rem;
}
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.f-brand strong { display: block; color: #fff; font-size: 1.0625rem; margin-bottom: 8px; }
.f-brand p { color: rgba(255,255,255,.45); font-size: .8125rem; margin: 0; max-width: 280px; }
.f-col h4 {
  color: #fff; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px;
}
.f-col a {
  display: block; padding: 5px 0; color: rgba(255,255,255,.55);
  transition: color .16s var(--ease);
}
.f-col a:hover { color: #fff; }
/* 页脚地址：长文本换行，字号与链接一致，视觉上不与链接抢焦点 */
.f-col .f-addr {
  margin: 5px 0; color: rgba(255,255,255,.45);
  font-size: .8125rem; line-height: 1.6;
  word-break: break-word;
}
.footer-bottom {
  padding-top: 26px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px;
  font-size: .8125rem; color: rgba(255,255,255,.35);
}

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

/* 移动端菜单（样式由 JS 切换 .open） */
/* 6 种语言按钮组 + logo + 导航在窄桌面/平板会撑破 header，
   1100px 以下改为下拉；此断点独立于导航折叠的 980px */
@media (max-width: 1100px) {
  /* iOS 表单放大：640 断点已覆盖手机，这里兜住 641-1100 的平板/窄桌面
     （iPad 报 "Request Desktop Website" 时视口会到 1024，仍会触发 zoom）。
     只提字号，不动内边距与高度，桌面视觉几乎无变化 */
  .field input:not([type="hidden"]),
  .field textarea,
  .field select,
  .form-card input:not([type="hidden"]),
  .form-card textarea,
  .form-card select {
    font-size: 16px;
  }
}

@media (max-width: 980px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 16px 20px; margin: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 72px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    /* visibility:hidden 只是「不绘制」，并不阻止命中测试：
       折叠态菜单仍是一个 fixed、满宽、撑到视口底部的盒子，
       若不显式关掉 pointer-events，它会拦截首屏内所有元素的点击
       （轮播指示点、箭头、首屏按钮全部点不动）。
       展开时 .nav.open 会重新打开 pointer-events。 */
    pointer-events: none;
    transition: all .22s var(--ease);
  }
  .nav.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-item { border-bottom: 1px solid var(--line-2); }
  .nav-item > a { padding: 14px 4px; font-size: 1rem; border-radius: 0; }
  .submenu {
    position: static; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 10px 14px; min-width: 0;
  }
  .submenu a { padding: 9px 0; font-size: .875rem; }
  .burger { display: block; }
  .brand-text em { display: none; }
  .burger { display: block; }
  /* 汉堡按钮触控目标：42 + 1 + 2 + 1 + 42 = 88px，已满足 44×44，
     桌面端不需要再做外扩，此处显式关闭移动端的外扩伪元素 */
  .burger::after { content: none; }

  /* 平板段同样补齐 44 高触控目标：padding 15/12 + 等效负 margin，
     保证 44px 可点但布局尺寸不变（负 margin 在桌面段不生效） */
  .burger { padding: 15px 12px; margin: -15px -12px; }

  /* 平板/横屏段的指示点触控区（641-980px）。
     此段沿用基础规则的 gap: 9px，外扩 9px（左右各 4.5px）与 gap 正好互补，
     相邻两点触控区边界相接、不重叠。
     640 断点与 375 断点会按各自 gap 再覆盖，互不影响。 */
  .banner-dot { position: relative; }
  .banner-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: calc(100% + 9px); height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
  }
  .list-layout { grid-template-columns: 1fr; gap: 32px; }
  .sidebar { position: static; }
  .detail-layout { grid-template-columns: 1fr; gap: 36px; }
  .detail-aside { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  /* 真 logo 比原文字宽（比例 7.37:1），需收紧间距与右区，
     否则 .header-right 会把汉堡按钮推出视口，造成横向滚动 */
  .header-inner { height: 64px; gap: 10px; }
  .header-right { gap: 8px; min-width: 0; }
  .burger { padding: 6px; flex-shrink: 0; }
  .nav { top: 64px; max-height: calc(100vh - 64px); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .article-row { grid-template-columns: 1fr; gap: 12px; }
  .article-row .thumb { aspect-ratio: 16/9; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .brand-text strong { font-size: .9375rem; }
  .brand-logo { height: 26px; }

  /* ---- 移动端触控与 iOS 表单适配 ----
     以下 4 组规则只作用于 ≤640px，桌面/平板完全不受影响
     （Q1 那条 extra-wide 兜底在 1100 断点里，专门管平板）。 */

  /* Q1 表单控件最小 16px：iOS Safari 对 fontSize < 16px 的 input/select/textarea
     会自动 zoom in 且无法自动还原，这里统一提到 16px。
     选择器用 `input:not([type=hidden])` + 裸元素兜底，
     覆盖蜜罐字段（`.field` 之外的 input）与任何未走 `.field` 的控件 */
  .field input:not([type="hidden"]),
  .field textarea,
  .field select,
  .form-card input:not([type="hidden"]),
  .form-card textarea,
  .form-card select {
    font-size: 16px;
  }

  /* Q2 汉堡按钮：可点击区域 44×44，三条杠的粗细/间距观感不变
     - 上下 padding 各 15px（15+16+15 = 46px 高，> 44）
     - 左右 padding 各 12px（12+20+12 = 44px 宽）
     - 负 margin 上下各 -15px、左右各 -12px，抵消 padding 对布局的占用，
       所以 .header-right 的尺寸与改动前一致，320px 视口不会溢出
     - 列方向 flex + gap:4px 复刻原先 span 的 `margin: 4px 0` 视觉 */
  .burger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 15px 12px;
    /* 垂直 -15px：不撑高 header（保持 64px）。
       水平 -4px：`.header-right` 的 gap 是 8px，单侧外扩 4px 正好与 gap 互补，
       相邻（语言按钮）触控区边界相接、不重叠；再大就会抢占邻居的点击 */
    margin: -15px -4px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .burger span { margin: 0; }

  /* Q3 轮播指示点：视觉仍是 10px 小圆点，触控区外扩到 44px 高。
     `position: relative` 在基础规则已补（见 .banner-dot 基础段落），
     这是 ::after 的 `width: calc(100%)` 能按「圆点自身」而非「整行容器」
     计算的前提，否则触控区会变成整屏宽并互相重叠。 */
  .banner-dot {
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .banner-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    /* 左右各外扩 gap/2 = 5px → 与 gap: 10px 正好互补，相邻触控区边界相接不重叠
       普通点：10 + 10 = 20px 宽；激活点：26 + 10 = 36px 宽；高度 44px */
    width: calc(100% + 10px); height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
  }

  /* Q4 语言切换按钮：触控高度 36px（原 26/29px），
     左右 padding 与字号在 375 断点里继续收紧，保证单行不溢出 */
  .lang-dd-btn { min-height: 36px; padding: 8px 10px; }
}

/* 打印 */
@media print {
  .site-header, .site-footer, .sidebar, .detail-aside, .hero-actions { display: none; }
  body { color: #000; }
}

/* 404 大数字 */
.err-code {
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 16px;
  background: linear-gradient(160deg, #00ACC2, #0e151d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   首页 Banner 轮播
   - 背景层绝对定位铺满 Hero，图片 object-fit: cover，1920×675 / 1700×600 均不变形
   - 纯 CSS transition 淡入淡出，无第三方库
   ========================================================================== */

/* 有轮播时的 Hero：底部留出指示点空间；高度自适应，保证小屏也不塌陷 */
.hero.hero-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(420px, 36vw, 640px);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.hero.hero-banner .wrap { width: 100%; }
/* 有底图时的遮罩：左侧浓、右侧淡。左半边压暗保证新站文案可读，
   右半边保留原图（图片自带的标语就在右侧）。
   z-index: 1 —— 必须高于 .banner(0)、低于内容(2)，否则会被盖住失效 */
.hero.hero-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  /* 关键：图片自带大字标语，必须整幅压暗，否则与新站文案叠字
     左侧 92% 浓遮罩保证文案可读，右侧只降到 62%（不是透明），
     使原图文字弱化到「纹理」级别，不与白色文案争夺注意力 */
  background:
    linear-gradient(90deg,
      rgba(5,9,14,.94) 0%,
      rgba(5,9,14,.92) 42%,
      rgba(5,9,14,.86) 58%,
      rgba(5,9,14,.74) 72%,
      rgba(5,9,14,.62) 100%),
    linear-gradient(180deg,
      rgba(5,9,14,.45) 0%,
      rgba(5,9,14,.20) 35%,
      rgba(5,9,14,.55) 100%);
  pointer-events: none;
}
/* 去掉网格纹理，避免与照片细节打架 */
.hero.hero-banner::after { display: none; }

/* 文案区：固定左栏、限制宽度，与右侧原图文字天然分区，互不重叠 */
.hero.hero-banner .hero-inner {
  /* 加宽到 560：标题少换行、层次更清楚 */
  max-width: 560px;
  margin-right: auto;
  /* 关键：背景图自带白色大字，仅靠模糊+遮罩仍会与本区文案互相干扰。
     给文案区加半透明深色毛玻璃底板，形成独立视觉层，彻底解决叠字 */
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px);
  border-radius: 18px;
  background: rgba(8,12,18,.58);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
.hero.hero-banner .hero-inner h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 14px; }
.hero.hero-banner .hero-inner .lead {
  font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
  margin-bottom: 24px;
  line-height: 1.65;
}
.hero.hero-banner .eyebrow { margin-bottom: 16px; }
.hero.hero-banner .hero-actions .btn { padding: 11px 20px; }

/* 数据条：半透明浮在底图上 */
.hero.hero-banner .hero-stats { margin-top: clamp(26px, 3.2vw, 40px); }

/* 叠加标题：放在左下角文案区之内，只用左半屏宽度 */
.banner-caption {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  z-index: 1; pointer-events: none;
}
.banner-caption-title {
  max-width: 460px;
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}

/* 轮播容器：压在遮罩之下（z-index 0），遮罩与文案在其上方 */
.banner {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #0b1016;
}

/* 轨道与幻灯片：淡入淡出叠放 */
.banner-track { position: absolute; inset: 0; }

.banner-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .85s var(--ease), visibility 0s linear .85s;
  will-change: opacity;
}
.banner-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .85s var(--ease), visibility 0s linear 0s;
}

/* 图片：铺满并裁切，任何尺寸都不变形；
   裁切时优先保留原图右侧 65%+ 的区域（两张原图的标语都在右侧），
   让图片自带文字落在画面右半边，与左侧的新站文案天然分开 */
.banner-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 100% center;
  display: block;
  /* 关键：原图自带白色大字标语，仅靠遮罩压不住（白字对比度太高）。
     轻微模糊(1.2px) + 轻度降饱和，使其退化为「色彩质感」，
     彻底消除与新站文案的视觉竞争；放大 2% 消除模糊产生的边缘露出 */
  filter: blur(2.5px) saturate(.88) brightness(.88);
  transform: scale(1.02);
}
.banner-slide .banner-link { display: block; position: absolute; inset: 0; }

/* 叠加标题（模板里位于 .banner-slide 内、与 Hero 文案区同宽同位置，
   图片自带文字时不填标题即可完全避免叠加冲突） */

/* 左右切换按钮：桌面悬停 Hero 显示，移动端常显 */
.banner-nav {
  position: absolute; top: 50%; z-index: 3;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: -23px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(12,18,25,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  /* 常显：用户反馈"看不到箭头以为不能切换"，hover 才显的交互在小站不友好 */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s var(--ease), visibility .25s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.banner-prev { left: max(14px, calc(50% - 640px + 18px)); }
.banner-next { right: max(14px, calc(50% - 640px + 18px)); }
.banner-nav:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.banner-nav:active { transform: scale(.97); }

/* 指示点 */
.banner-dots {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
/* 指示点：外层 9px 小圆点视觉不变，触控区用「透明底 + 伪元素」外扩，
   见文件末尾「移动端触控目标」段落 —— 不在此处改 padding，
   避免撑开 .banner-dots 的 gap 让圆点间距看起来变宽

   ⚠ position: relative 是触控区正确工作的前提：
   `::after` 是 absolute，若圆点本身是 static，它会越过圆点向上找到
   最近的已定位祖先 `.banner-dots`（absolute，宽度=整行），
   于是 `width: calc(100% + Npx)` 的 100% 按「整行宽度」解析，
   触控区变成整屏宽并与所有相邻点重叠，轮播点不可用。 */
.banner-dot {
  position: relative;
  width: 9px; height: 9px; padding: 0;
  border-radius: 999px; border: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: width .28s var(--ease), background .22s var(--ease);
}
.banner-dot:hover { background: rgba(255,255,255,.72); }
.banner-dot.is-active { width: 26px; background: var(--accent); }

/* 键盘可达性 */
.banner-dot:focus-visible,
.banner-nav:focus-visible,
.banner-slide .banner-link:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- 轮播：平板 */
@media (max-width: 980px) {
  /* 触屏无 hover：箭头常显，并放大到 44px 触控最小尺寸 */
  .banner-nav {
    opacity: 1; visibility: visible;
    width: 44px; height: 44px; margin-top: -22px;
  }
  .banner-prev { left: 12px; }
  .banner-next { right: 12px; }

  /* 平板开始图片整体居中，不偏右 */
  .banner-slide img { object-position: center center; }

  /* 文案与图片文字在窄屏无法左右分区，改为整体压暗 */
  .hero.hero-banner::before {
    background:
      linear-gradient(180deg,
        rgba(5,9,14,.72) 0%,
        rgba(5,9,14,.80) 50%,
        rgba(5,9,14,.90) 100%);
  }
  .hero.hero-banner .hero-inner {
    max-width: 100%;
    padding: 20px 20px 22px;
    border-radius: 14px;
    background: rgba(8,12,18,.62);
  }
  .hero.hero-banner .hero-inner h1 { font-size: clamp(1.5rem, 4.2vw, 2rem); }
}

/* ---------------------------------------------------------------- 轮播：手机 */
@media (max-width: 640px) {
  .hero.hero-banner {
    /* 图片是 16:9 横图，手机竖屏用更高的画幅，避免裁掉主体 */
    min-height: clamp(380px, 62vh, 520px);
    padding-top: 48px;
    padding-bottom: 72px;
  }
  /* 手机端遮罩接近实心：图片只做质感底色，文字必须最高对比度 */
  .hero.hero-banner::before {
    background:
      linear-gradient(180deg,
        rgba(6,10,16,.80) 0%,
        rgba(6,10,16,.86) 55%,
        rgba(6,10,16,.94) 100%);
  }
  .banner-slide img { object-position: center 40%; }

  /* 箭头：44px 触控友好，贴边但不遮字 */
  .banner-nav {
    width: 44px; height: 44px; margin-top: -22px;
    background: rgba(8,12,17,.55);
  }
  .banner-prev { left: 8px; }
  .banner-next { right: 8px; }

  /* 指示点：加大到 10px、间距拉开、避开数据条 */
  .banner-dots { bottom: 14px; gap: 10px; }
  .banner-dot { width: 10px; height: 10px; }
  .banner-dot.is-active { width: 26px; }

  /* 手机端文案排版收紧 */
  .hero.hero-banner .hero-inner {
    padding: 16px 16px 18px;
    border-radius: 12px;
  }
  .hero.hero-banner .hero-inner h1 {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
    line-height: 1.22;
    margin-bottom: 12px;
  }
  .hero.hero-banner .hero-inner .lead {
    font-size: .9375rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .hero.hero-banner .hero-actions { gap: 10px; }
  .hero.hero-banner .hero-actions .btn {
    padding: 12px 18px;
    font-size: .9375rem;
    flex: 1 1 auto;
    justify-content: center;
  }
  .hero.hero-banner .hero-stats { margin-top: 22px; }
}

/* 超小屏（iPhone SE 等 320-375px）*/
@media (max-width: 375px) {
  /* 极窄屏：logo 缩到 22px，语言按钮收紧，确保不溢出 */
  .brand-logo { height: 22px; }
  .header-inner { gap: 8px; }
  /* 320 预算：284(可用) = 162(logo) + 8 + ?(语言) + 8 + 32(汉堡布局宽)
     → 语言按钮最多 74px。用 padding 7px + 字号 .6875rem 把它压到 ~72px，
     既保住 36px 触控高度，也不与汉堡的触控区重叠 */
  .lang-dd-btn { padding: 7px 7px; font-size: .6875rem; gap: 3px; min-height: 36px; }
  .lang-dd-btn .lang-dd-caret { width: 8px; height: 8px; }
  .lang-dd-menu { min-width: 150px; }
  /* 汉堡：44×44 触控区靠 padding 撑开，再用负 margin 收回布局占用。
     水平方向只收 -14px（而非 -24px）：
     320 预算 = 284(可用) - 162(logo) - 76(语言) - 16(两个 gap) = 30px，
     汉堡布局宽取 44-14 = 30px 恰好填满；
     左右各外扩 7px，与 header gap 8px 基本对齐，相邻触控区边界相接、不重叠 */
  .burger { padding: 15px 12px; margin: -15px -7px; }
  /* 极窄屏指示点 gap 收到 8px，触控区外扩 gap/2 = 4px 与之一致（相接不重叠） */
  .banner-dots { gap: 8px; }
  .banner-dot::after { width: calc(100% + 8px); }
  .hero.hero-banner { min-height: 360px; }
  .banner-nav { width: 40px; height: 40px; margin-top: -20px; }
  .hero.hero-banner .hero-inner h1 { font-size: 1.3125rem; }
  .hero.hero-banner .hero-inner .lead { font-size: .875rem; }
  .hero.hero-banner .hero-actions .btn { padding: 11px 14px; font-size: .875rem; }
}

/* 横屏手机：高度受限，压缩纵向留白 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero.hero-banner {
    min-height: 300px;
    padding-top: 28px;
    padding-bottom: 56px;
  }
  .hero.hero-banner .hero-stats { display: none; }
}

/* 尊重"减少动效"系统偏好：关闭淡入淡出与自动轮播动画 */
@media (prefers-reduced-motion: reduce) {
  .banner-slide,
  .banner-slide.is-active { transition: none; }
  .banner-nav,
  .banner-dot { transition: none; }
}

/* 打印时隐藏轮播控件 */
@media print {
  .banner, .banner-nav, .banner-dots { display: none; }
}