/* ==========================================================================
   寰球联采外贸 官网样式表
   结构：tokens（设计变量） → base（基础与重置） → layout（容器与网格）
        → components（组件） → sections（区块） → utilities/responsive → a11y
   说明：全站零外部依赖（无 CDN、无网络字体），首屏加载更快、更稳定。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens —— 统一改这里就能换整站配色与节奏
   -------------------------------------------------------------------------- */
:root {
  /* 品牌色：取自企业 LOGO 的中国红 + 商务蓝 */
  --brand-600: #d8232a;
  --brand-500: #e8414a;
  --brand-050: #fdf0f0;
  --accent-400: #1b4f9c;
  --accent-600: #123a75;

  /* 中性色 */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --line: #e6e9ef;
  --surface: #ffffff;
  --surface-alt: #f7f8fb;

  /* 字号：clamp(min, 视口自适应, max) 让文字随屏幕平滑缩放 */
  --fs-display: clamp(2.05rem, 1.35rem + 3.1vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.35rem);
  --fs-h3: clamp(1.05rem, 0.97rem + 0.35vw, 1.22rem);
  --fs-body: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.14rem);
  --fs-small: 0.85rem;

  /* 间距与圆角 */
  --gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --section-py: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --container: 1180px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 6px 18px -6px rgba(15, 23, 42, .16);
  --shadow-lg: 0 22px 48px -20px rgba(216, 35, 42, .30);

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .35s;

  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Base —— 重置与排版基线
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 锚点跳转时预留固定导航高度，避免标题被遮挡 */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink-700);
  background: var(--surface);
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; color: var(--ink-900); line-height: 1.22; letter-spacing: -.01em; }
h1 { font-size: var(--fs-display); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 750; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
p { margin: 0; }

a { color: var(--brand-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-500); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

/* 统一可见焦点样式（键盘导航可见，鼠标点击不显示） */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 跳过导航链接：仅聚焦时可见 */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  padding: .6rem 1rem;
  background: var(--brand-600);
  color: #fff;
  border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout —— 容器、区块、网格
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-py); }
.section-alt { background: var(--surface-alt); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.section-head h2 { margin-bottom: .75rem; }
.section-sub { color: var(--ink-500); font-size: var(--fs-lead); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-400);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18);
}
.eyebrow-light { color: #f6b6ba; }

/* 通用两栏：移动端纵向堆叠，900px 以上左右分栏 */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  /* 视觉元素在左、文字在右时使用（源顺序不变，利于无障碍朗读顺序） */
  .split-reverse .split-copy { order: 2; }
}

.card-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* --------------------------------------------------------------------------
   4. Components —— 按钮 / 卡片 / 表单
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform .2s var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.btn-primary:hover { background: #b3171e; color: #fff; }

.btn-ghost {
  background: #fff;
  border-color: var(--line);
  color: var(--ink-900);
}
.btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-600); }

/* 图标底板 */
.card-icon, .ci {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--brand-050);
  color: var(--brand-600);
  flex: none;
}

.card {
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #f2c6c9; }
.card .card-icon { margin-bottom: 1rem; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-500); }

.case-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.case-card .tag {
  align-self: flex-start;
  padding: .28rem .7rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--brand-600);
  background: var(--brand-050);
  border-radius: 999px;
}
.case-card p { color: var(--ink-500); }
.case-meta { margin-top: auto; padding-top: .5rem; font-size: var(--fs-small); color: var(--ink-500) !important; font-weight: 600; }

.check-list { display: grid; gap: .85rem; margin: 1.5rem 0 1.9rem; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-700);
}
.check-list li strong { color: var(--ink-900); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--brand-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%230b5cff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 74% no-repeat;
}

/* 表单 */
.contact-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.3rem);
  box-shadow: 0 30px 60px -30px rgba(2, 32, 90, .55);
  color: var(--ink-700);
}
.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field label { font-size: var(--fs-small); font-weight: 700; color: var(--ink-900); }
.field label span { color: #e11d48; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder, .field textarea::placeholder { color: #9aa8ba; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(43, 127, 255, .14);
}
/* 校验失败态：由 JS 添加 .is-invalid */
.field input.is-invalid, .field textarea.is-invalid { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .12); }
.field-error { min-height: 1.05rem; font-size: .78rem; color: #e11d48; }

.form-status { min-height: 1.4rem; margin-top: .7rem; font-size: var(--fs-small); font-weight: 650; color: #047857; }
.form-status.is-error { color: #e11d48; }

/* 蜜罐反垃圾字段：真人不可见、不可聚焦。用移出屏幕而非 display:none，
   低级爬虫通常跳过 display:none 的字段，仍会往里填内容从而暴露身份。 */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4b. 询盘主通道：WhatsApp 一键直达 + 微信备用通道
   -------------------------------------------------------------------------- */
.btn-wa {
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(37, 211, 102, .7);
}
.btn-wa:hover { background: #1EBE5A; color: #fff; }
.btn-mail { margin-top: .55rem; }
.form-status:not(:empty) { margin-bottom: .2rem; }

.alt-contact { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); text-align: center; }
.alt-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .2rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  color: var(--brand-600);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alt-toggle:hover { color: #b3171e; }
/* [hidden] 需显式让位于 display 规则（作者样式会覆盖 UA 默认 [hidden]） */
.alt-toggle[hidden] { display: none; }
.alt-panel { margin-top: .8rem; text-align: center; }
.alt-panel img {
  width: 200px;
  max-width: 62vw;
  height: auto;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.alt-panel p { margin: .55rem 0 0; font-size: .8rem; color: var(--ink-500); }
.form-note { margin-top: .5rem; font-size: .78rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   5. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* 页面向下滚动后由 JS 添加，出现分隔线与阴影 */
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink-900); }
.brand:hover { color: var(--brand-600); }
.brand-mark { display: block; flex: none; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: 1.08rem; font-weight: 800; letter-spacing: .01em; }
.brand-text small { font-size: .62rem; letter-spacing: .18em; color: var(--ink-500); }

.primary-nav ul { display: flex; align-items: center; gap: .35rem; }
.primary-nav a:not(.btn) {
  display: block;
  padding: .5rem .8rem;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-700);
}
.primary-nav a:not(.btn):hover { color: var(--brand-600); background: var(--brand-050); }
.primary-nav a.is-active { color: var(--brand-600); background: var(--brand-050); }
.nav-cta { margin-left: .6rem; padding: .6rem 1.15rem; font-size: .9rem; }

/* 语言切换器：桌面端为右上角下拉，移动端并入抽屉菜单 */
.lang-switch { position: relative; margin-left: .5rem; flex: none; }
.lang-current {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.lang-current:hover { color: var(--brand-600); border-color: var(--brand-500); }
.lang-current .globe { flex: none; }
.lang-current .caret { transition: transform .2s var(--ease); }
.lang-switch[data-open="true"] .caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 60;
  min-width: 168px;
  padding: .35rem;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .65rem;
  border-radius: 7px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-700);
}
.lang-menu a:hover { color: var(--brand-600); background: var(--brand-050); }
.lang-menu a .native { font-size: .78rem; font-weight: 500; color: var(--ink-500); }
/* 当前语言：高亮并标注，避免用户重复点击 */
.lang-menu a[aria-current="true"] { color: var(--brand-600); background: var(--brand-050); }
.lang-menu a[aria-current="true"]::after { content: "✓"; margin-left: .4rem; font-size: .8rem; }

/* 汉堡按钮：桌面端隐藏 */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  place-items: center;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--ink-900);
  transition: transform var(--dur) var(--ease), opacity .2s var(--ease);
}
/* 展开态：变为叉号 */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 移动端：抽屉式菜单，body 加 .nav-open 锁定滚动 */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    display: grid;
    gap: .5rem;
    padding: 1.1rem 1.25rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(2, 32, 90, .35);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav-open .primary-nav { transform: translateY(0); opacity: 1; visibility: visible; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .primary-nav a:not(.btn) { padding: .7rem .8rem; font-size: 1rem; }
  .nav-cta { margin: .6rem 0 0; width: 100%; }

  /* 抽屉内语言切换：横向平铺，不再用下拉 */
  .lang-switch { margin: .8rem 0 0; }
  .lang-current { display: none; }
  .lang-menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
    padding: .6rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  /* 移动端下 [hidden] 需让位于 flex，改用 .is-hidden 控制 */
  .lang-menu[hidden] { display: flex; }
  .lang-menu a {
    flex: 1 1 auto;
    justify-content: center;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .lang-menu a .native { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  background:
    radial-gradient(1100px 520px at 82% -12%, #e6f0ff 0%, rgba(230, 240, 255, 0) 62%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 78%);
  overflow: hidden;
}
/* 移动端用 dvh 避免浏览器地址栏导致的高度跳动 */
@media (min-width: 900px) {
  .hero { min-height: calc(88dvh - var(--header-h)); display: flex; align-items: center; }
}
.hero-glow {
  position: absolute;
  left: -12%; bottom: -34%;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(56, 189, 248, .22) 0%, rgba(56, 189, 248, 0) 68%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 980px) { .hero-inner { grid-template-columns: 1.08fr .92fr; } }

.hero h1 { margin-bottom: 1.1rem; }
.hero .accent {
  background: linear-gradient(100deg, var(--brand-600), var(--accent-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-500); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.2rem;
  margin: clamp(2rem, 1.2rem + 2vw, 3rem) 0 0;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--line);
}
.hero-stats dt { font-size: var(--fs-small); color: var(--ink-500); }
.hero-stats dd { margin: .15rem 0 0; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.05rem); font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; }

.globe-card {
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero-visual svg { height: auto; }

/* --------------------------------------------------------------------------
   7. 优势区块的指标卡 / 流程 / 徽章
   -------------------------------------------------------------------------- */
.metric-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.metric {
  padding: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.metric-value {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 800;
  color: var(--brand-600);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.metric-value .unit { font-size: .5em; margin-left: .1em; }
.metric-label { margin-top: .3rem; font-size: var(--fs-small); color: var(--ink-500); }

.steps {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.5rem 1.3rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.step::after { /* 步骤之间的连接线，仅在宽屏显示 */
  content: "";
  position: absolute;
  top: 2.35rem; left: 100%;
  width: var(--gap); height: 2px;
  background: linear-gradient(90deg, #cfe0ff, transparent);
}
.step:last-child::after { display: none; }
.step-no {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #cfe0ff;
  letter-spacing: -.02em;
}
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--ink-500); font-size: .93rem; }

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: .8rem;
}
.badge-grid li {
  display: grid;
  place-items: center;
  min-height: 78px;
  padding: .8rem;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  color: var(--brand-600);
  background: var(--brand-050);
  border: 1px solid #f2c6c9;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   7.5 代理品类 & 实拍图库
   -------------------------------------------------------------------------- */
/* 可点击的品类筛选条 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.filter-chip {
  padding: .45rem 1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--brand-500); color: var(--brand-600); }
.filter-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--brand-600);
  border-color: var(--brand-600);
}
.filter-chip:focus-visible { outline: 2px solid var(--accent-400); outline-offset: 2px; }

/* 品类卡片：带实拍缩略图 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
  gap: var(--gap);
}
.cat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in; /* 整卡可点开图集，文字区也要给出可点击提示 */
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #f2c6c9; }
.cat-card[hidden] { display: none; }
.cat-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
  overflow: hidden;
}
.cat-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.cat-card:hover .cat-thumb img { transform: scale(1.045); }
.cat-body { padding: 1rem 1.1rem 1.15rem; }
.cat-body h3 { margin-bottom: .35rem; font-size: 1.02rem; }
.cat-body p { margin: 0; font-size: .88rem; color: var(--ink-500); }
.cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .6rem;
}
.cat-tags span {
  padding: .16rem .5rem;
  font-size: .72rem;
  color: var(--accent-600);
  background: #f0f4fa;
  border-radius: 4px;
}

/* 实拍图库：等宽瀑布式缩略图 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: .7rem;
}
.gallery-grid figure {
  margin: 0;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
}
.gallery-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.gallery-grid figure:hover img { transform: scale(1.06); }
.gallery-more { margin-top: 1.5rem; text-align: center; }

/* 品类缩略图可点击提示 */
.cat-thumb { cursor: zoom-in; }
.cat-thumb:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -3px; }
.cat-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 20, 45, .5) 0%, rgba(8, 20, 45, 0) 42%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.cat-card:hover .cat-thumb::after { opacity: 1; }
.cat-thumb-badge {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  z-index: 1;
  padding: .2rem .55rem;
  font-size: .72rem;
  color: #fff;
  background: rgba(216, 35, 42, .92);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.cat-card:hover .cat-thumb-badge,
.cat-thumb:focus-visible .cat-thumb-badge { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   品类图集弹层
   -------------------------------------------------------------------------- */
.cat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.6rem, 2vw, 1.6rem);
  background: rgba(6, 14, 32, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: lbFade .22s var(--ease);
}
.cat-lightbox[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.cat-lb-panel {
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  max-height: 100%;
  overflow: hidden;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(4, 10, 26, .45);
}
.cat-lb-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1rem .85rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.cat-lb-head h3 { margin: 0; font-size: 1.05rem; }
.cat-lb-count {
  margin-right: auto;
  padding: .16rem .55rem;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-600);
  background: #f0f4fa;
  border-radius: 999px;
}
.cat-lb-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink-700);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cat-lb-close:hover { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }

.cat-lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 0;
  padding: .8rem;
  background: var(--surface-alt);
}
.cat-lb-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.cat-lb-figure img {
  display: block;
  max-width: 100%;
  max-height: min(62vh, 560px);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.cat-lb-figure figcaption {
  font-size: .82rem;
  color: var(--ink-500);
  text-align: center;
}
.cat-lb-nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cat-lb-nav:hover:not(:disabled) { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }
.cat-lb-nav:disabled { opacity: .35; cursor: default; }

.cat-lb-strip {
  display: flex;
  gap: .4rem;
  padding: .7rem .8rem .85rem;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: thin;
}
.cat-lb-thumb {
  flex: none;
  width: 66px;
  height: 66px;
  padding: 0;
  overflow: hidden;
  background: var(--surface-alt);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  opacity: .62;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cat-lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-lb-thumb:hover { opacity: 1; }
.cat-lb-thumb.is-active { opacity: 1; border-color: var(--brand-600); }

/* 弹层打开时锁住页面滚动 */
html.is-locked, html.is-locked body { overflow: hidden; }

/* --------------------------------------------------------------------------
   产品详情弹层（复用 cat-lb-* 头部/翻页/缩略图样式；层级高于品类弹层）
   -------------------------------------------------------------------------- */
.prod-lightbox {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.6rem, 2vw, 1.6rem);
  background: rgba(6, 14, 32, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: lbFade .22s var(--ease);
}
.prod-lightbox[hidden] { display: none; }
.prod-panel {
  display: flex;
  flex-direction: column;
  width: min(1160px, 100%);
  max-height: 100%;
  overflow: hidden;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(4, 10, 26, .45);
}
.prod-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.prod-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: .8rem;
  background: var(--surface-alt);
}
.prod-side {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
  border-left: 1px solid var(--line);
}
.prod-specs { width: 100%; border-collapse: collapse; font-size: .86rem; }
.prod-specs th,
.prod-specs td {
  padding: .42rem .3rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prod-specs th { width: 38%; font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.prod-specs td { color: var(--ink-700); word-break: break-all; font-variant-numeric: tabular-nums; }
.prod-note { margin: 0; font-size: .78rem; color: var(--ink-500); }
@media (max-width: 859px) {
  .prod-body { flex-direction: column; overflow-y: auto; }
  .prod-stage { flex: none; }
  .prod-side { flex: none; border-left: 0; border-top: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   8. 联系区块（深色背景）
   -------------------------------------------------------------------------- */
.section-cta {
  background:
    radial-gradient(760px 420px at 12% 8%, rgba(56, 189, 248, .24) 0%, rgba(56, 189, 248, 0) 62%),
    linear-gradient(160deg, #0b2a6b 0%, #071a45 100%);
  color: #dbe6ff;
}
.section-cta h2 { color: #fff; }
.section-cta .section-sub { color: #d6b6b8; }

.contact-list { display: grid; gap: 1rem; margin-top: 1.8rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .85rem; }
.contact-list .ci { background: rgba(255, 255, 255, .12); color: #f6b6ba; }
.contact-list span > strong { display: block; font-size: .82rem; color: #e3a9ad; font-weight: 600; }
.contact-list a { color: #fff; font-weight: 650; word-break: break-all; }
.contact-list a:hover { color: var(--accent-400); }

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: #16181d; color: #9aa2b1; font-size: .9rem; }
.footer-inner {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (min-width: 820px) {
  .footer-inner { grid-template-columns: 1.15fr 1.85fr; }
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.footer-brand .brand-text strong { color: #fff; }
.footer-brand .brand-text small { color: #858d9c; }
.footer-brand p { margin-top: .9rem; max-width: 34ch; }

.footer-nav h2 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.footer-nav ul { display: grid; gap: .5rem; }
.footer-nav a { color: #9aa2b1; }
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem;
}
.footer-bottom a { color: #9aa2b1; }
.footer-bottom a:hover { color: #fff; }

/* 返回顶部悬浮按钮 */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 40;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: var(--brand-600);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.to-top:hover { background: #b3171e; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   9b. 手机端触屏可用性（≤900px）
   - 输入框 ≥16px：iOS Safari 聚焦 <16px 输入框会自动放大页面，打字体验极差
   - 可点元素 ≥44px 触屏热区（Apple HIG / Material 最低建议）
   - 放在文件后部以覆盖上文定义的 .cat-lb-close 等基础规则
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .field input, .field select, .field textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  .filter-chip { min-height: 42px; }
  .cat-lb-close { width: 44px; height: 44px; }
  .to-top { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------------
   9c. 手机端悬浮「获取报价」快捷入口
   滚过首屏且表单不在视口时由 main.js 移除 hidden；桌面端不显示。
   -------------------------------------------------------------------------- */
.mobile-cta {
  display: none;
  position: fixed;
  left: clamp(1rem, 2vw, 2rem);
  bottom: calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  align-items: center;
  gap: .4rem;
  padding: .85rem 1.3rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: var(--brand-600);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.mobile-cta[hidden] { display: none; }
.mobile-cta:active { background: #b3171e; transform: translateY(1px); }
@media (max-width: 900px) {
  .mobile-cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   10. 滚动出现动效（默认隐藏，进入视口后显示）
   -------------------------------------------------------------------------- */
/* 只在脚本可用时才隐藏内容：避免 JS 加载失败导致整页空白 */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   11. 无障碍与偏好设置
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* 与 .js .reveal 保持同等权重，确保减少动效时内容直接可见 */
  .js .reveal { opacity: 1; transform: none; }
}

/* 强制高对比度模式下保留边框，保证可辨识 */
@media (forced-colors: active) {
  .btn, .card, .field input, .field select, .field textarea { border: 1px solid ButtonText; }
}