/* ==================================================================
   参考站框架新增样式 —— 顶部工具条 / 产品分类网格 / OEM 定制 /
   六步旅程 / 能力卡 / 客户评价 / 资讯 / 优势罗列 / 侧边悬浮
   ================================================================== */

/* ---------------- 顶部工具条 ---------------- */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-dark);
  color: rgba(255, 255, 255, .68);
  font-size: var(--fs-sm);
}
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topbar-note {
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-contacts { display: flex; align-items: center; flex-shrink: 0; }
.topbar-contacts > * + * { margin-left: 22px; }
.topbar-contacts a {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .72);
  transition: color .2s;
}
.topbar-contacts a:hover { color: var(--accent-soft); }
.topbar-contacts svg { width: 14px; height: 14px; flex-shrink: 0; margin-right: 7px; }
.topbar-contacts span { white-space: nowrap; }

/* 头部改为两段式：工具条滚动后收起 */
.site-header.is-scrolled .topbar { display: none; }
.site-header.is-scrolled { height: var(--nav-h); }

/* ---------------- 产品分类网格 ---------------- */
.cat-intro {
  max-width: 880px;
  margin: -34px 0 42px;
}
.cat-intro p { font-size: var(--fs-base); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* 图标 + 文案的行内组合一律用 margin 而不是 flex gap：
   flex gap 需要 Chrome 84+ / Safari 14.1+，老机型上会失效导致图标紧贴文字，
   不同区块之间间距忽大忽小。margin 方案在所有浏览器上表现一致。 */
.cat-card {
  position: relative;
  display: flex;
  align-items: center;
  padding: 24px 26px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .24s, box-shadow .24s, border-color .24s;
  overflow: hidden;
}
.cat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.cat-card:hover::before { transform: scaleY(1); }
.cat-card:hover .cat-arrow { opacity: 1; transform: translateX(0); }

.cat-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--brand);
}
.cat-icon svg { width: 22px; height: 22px; }
.cat-name {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.cat-arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .24s, transform .24s;
  color: var(--brand);
  flex-shrink: 0;
}
.cat-arrow svg { width: 18px; height: 18px; display: block; }

/* ---------------- 分栏标题 ---------------- */
.split-title {
  font-size: var(--fs-xl);
  margin-bottom: 20px;
  letter-spacing: -.024em;
}

/* ---------------- OEM / ODM 定制面板 ---------------- */
.oem-panel {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(152deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  padding: 38px 34px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.oem-panel::after {
  content: "";
  position: absolute;
  right: -70px; top: -70px;
  width: 230px; height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 68%);
  pointer-events: none;
}
.oem-panel-head { position: relative; z-index: 2; margin-bottom: 24px; }
.oem-panel-head h3 {
  font-size: var(--fs-lg);
  margin-bottom: 10px;
  color: var(--brand);
}
.oem-panel-head p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); }

.oem-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.oem-list li {
  display: flex;
  align-items: center;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-2);
  padding: 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.oem-list svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.oem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 2;
}
.oem-cards--stack { grid-template-columns: 1fr; }
.oem-cards--stack .oem-card { padding: 18px; font-size: var(--fs-base); }
.oem-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, #1a1813 0%, #100f0c 100%);
  border: 1px solid var(--accent-deep);
  color: var(--ink);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-snug);
  transition: transform .24s, box-shadow .24s;
}
.oem-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.oem-card svg { width: 22px; height: 22px; color: var(--accent-soft); flex-shrink: 0; }

/* ---------------- 合作口号横幅 ---------------- */
.partner-band {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, #0b0b0d 0%, #1c1a15 52%, #2a2416 100%);
  border: 1px solid var(--accent-deep);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.partner-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(201, 162, 39, .22), transparent 46%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 32px);
}
.partner-band-inner {
  position: relative;
  z-index: 2;
  padding: 62px 56px;
  max-width: 860px;
  text-align: center;
  margin: 0 auto;
}
.partner-band h2 {
  color: #fff;
  font-size: var(--fs-xl);
  margin-bottom: 18px;
  letter-spacing: -.022em;
}
.partner-band p {
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-md);
  margin-bottom: 32px;
  line-height: var(--lh-base);
}

/* ---------------- 六步合作旅程 ---------------- */
.journey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.journey-item {
  position: relative;
  padding: 30px 26px 28px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .26s, box-shadow .26s, border-color .26s;
  overflow: hidden;
}
.journey-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s;
}
.journey-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.journey-item:hover::before { transform: scaleX(1); }

.journey-num {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 800;
  /* 序号用品牌金：原来用边框色 --line(#26262a) 当文字色，
     在卡片底 #1d1d22 上对比度只有 1.11:1（WCAG 对大号装饰字也要求 ≥3:1），
     深色机型上几乎看不见。改金色后 6.94:1，悬停再提亮到 accent-soft(11.88:1)。 */
  color: var(--brand);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 14px;
  transition: color .26s;
}
.journey-item:hover .journey-num { color: var(--accent-soft); }
.journey-item h3 { font-size: var(--fs-md); margin-bottom: 10px; }
.journey-item p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); }

/* ---------------- 能力数据（关于我们面板） ---------------- */
.cap-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}
.cap-stat {
  padding: 18px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
}
.cap-stat b {
  display: block;
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: var(--lh-tight);
  margin-bottom: 5px;
}
.cap-stat span { font-size: var(--fs-sm); color: rgba(255, 255, 255, .62); line-height: var(--lh-snug); display: block; }

/* ---------------- 能力卡片（四项） ---------------- */
.cap-card {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .26s, box-shadow .26s;
}
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cap-card-top {
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  margin-bottom: 18px;
}
.cap-card h3 { font-size: var(--fs-md); margin-bottom: 10px; }
.cap-card p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); }

/* ---------------- 客户评价 ---------------- */
.quote-card {
  position: relative;
  margin: 0;
  padding: 32px 28px 26px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: transform .26s, box-shadow .26s;
}
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.quote-mark {
  display: block;
  color: var(--accent-soft);
  margin-bottom: 16px;
}
.quote-mark svg { width: 28px; height: 28px; }
.quote-card blockquote {
  margin: 0 0 22px;
  font-size: var(--fs-base);
  color: var(--ink-2);
  line-height: var(--lh-base);
  flex: 1;
}
.quote-card figcaption {
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.quote-card figcaption b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink);
  margin-bottom: 3px;
}
.quote-card figcaption span { font-size: var(--fs-sm); color: var(--ink-4); }

/* ---------------- 资讯卡片 ---------------- */
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .26s, box-shadow .26s, border-color .26s;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.news-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--bg-elev), var(--bg-soft));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .news-thumb img { transform: scale(1.04); }
.news-ph { color: var(--brand); opacity: .3; }
.news-ph svg { width: 46px; height: 46px; }
.news-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--bg-elev);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .03em;
  box-shadow: var(--shadow-sm);
}
.news-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.news-body time {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.news-body h3 {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin-bottom: 11px;
  transition: color .2s;
}
.news-card:hover .news-body h3 { color: var(--brand); }
.news-body p {
  font-size: var(--fs-base);
  color: var(--ink-3);
  line-height: var(--lh-base);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}
.news-more svg { width: 15px; height: 15px; transition: transform .22s; }
.news-card:hover .news-more svg { transform: translateX(4px); }

/* ---------------- 优势罗列（深色区） ---------------- */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.strength-item {
  display: flex;
  align-items: center;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  transition: background .24s, transform .24s, border-color .24s;
}
.strength-item:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(201, 162, 39, .35);
  transform: translateY(-3px);
}
.strength-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(201, 162, 39, .14);
  border: 1px solid rgba(201, 162, 39, .22);
  display: grid;
  place-items: center;
  color: var(--accent-soft);
}
.strength-icon svg { width: 20px; height: 20px; }
.strength-label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: #fff;
  line-height: var(--lh-snug);
}

/* ---------------- 资讯详情 ---------------- */
.article-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--bg-elev);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.article-title {
  font-size: var(--fs-2xl) !important;
  line-height: var(--lh-tight) !important;
  margin-bottom: 18px !important;
}
.article-meta {
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--ink-4);
}
.article-meta .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
}

.article { max-width: 780px; margin: 0 auto; }
.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
  box-shadow: var(--shadow-md);
}
.article-body p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--ink-2);
  margin-bottom: 22px;
}
.article-body p:first-child { font-size: var(--fs-md); color: var(--ink); }

.article-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.article-foot svg { width: 16px; height: 16px; }

.related { margin-top: 64px; }

.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-4);
  font-size: var(--fs-md);
}

/* ---------------- 侧边悬浮咨询 ---------------- */
.floating {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 880;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.float-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}
.float-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--brand-light));
  color: #17150c;
  transform: translateX(-3px);
  border-color: var(--accent);
}
.float-btn svg { width: 21px; height: 21px; }

.float-btn--top { opacity: 0; visibility: hidden; transition: all .25s; }
.float-btn--top.is-visible { opacity: 1; visibility: visible; }

/* 悬浮文字提示 */
.float-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 7px 12px;
  border-radius: 7px;
  background: #17150c;
  border: 1px solid var(--accent-deep);
  color: var(--accent-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.float-btn:hover .float-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* 微信弹层 */
.float-pop {
  position: absolute;
  right: calc(100% + 10px);
  bottom: 108px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  text-align: center;
  min-width: 156px;
}
.float-pop b { display: block; font-size: var(--fs-sm); color: var(--ink-4); margin-bottom: 6px; font-weight: 600; }
.float-pop span { font-size: var(--fs-base); font-weight: 700; color: var(--brand); }

/* 弹层留在 .floating 内定位 */
.floating { position: fixed; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .strength-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-intro { margin-top: -22px; }
}

@media (max-width: 768px) {
  /* 工具条：只保留电话，隐藏说明文字 */
  .topbar { font-size: var(--fs-sm); }
  .topbar-note { display: none; }
  .topbar-inner { justify-content: center; }
  .topbar-contacts { gap: 16px; }
  .topbar-contacts a:nth-child(2) { display: none; }

  .cat-grid { grid-template-columns: 1fr; gap: 12px; }
  .cat-card { padding: 18px 20px; }
  .cat-icon { width: 40px; height: 40px; border-radius: 10px; }
  .cat-icon svg { width: 19px; height: 19px; }
  .cat-name { font-size: var(--fs-base); }
  .cat-arrow { opacity: 1; transform: none; }
  .cat-intro { margin: -14px 0 28px; }
  .cat-intro p { font-size: var(--fs-base); }

  .split-title { font-size: var(--fs-xl); }

  .oem-panel { padding: 26px 20px; }
  .oem-list li { font-size: var(--fs-base); padding: 10px 12px; }
  .oem-cards { grid-template-columns: 1fr; gap: 10px; }
  .oem-card { flex-direction: row; justify-content: flex-start; padding: 15px 16px; }

  .partner-band-inner { padding: 40px 24px; }
  .partner-band p { font-size: var(--fs-base); }

  .journey { grid-template-columns: 1fr; gap: 12px; }
  .journey-item { padding: 22px 20px; }
  .journey-num { font-size: var(--fs-xl); margin-bottom: 10px; }

  .cap-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cap-stat { padding: 14px 12px; }
  .cap-stat b { font-size: var(--fs-lg); }
  .cap-stat span { font-size: var(--fs-xs); }

  .cap-card { padding: 22px 20px; }
  .strength-grid { grid-template-columns: 1fr; gap: 10px; }
  .strength-item { padding: 16px 18px; }
  .strength-icon { width: 38px; height: 38px; }
  .strength-label { font-size: var(--fs-base); }

  .quote-card { padding: 24px 20px 20px; }

  .news-body { padding: 18px 20px 20px; }
  .news-body h3 { font-size: var(--fs-base); }

  .article-body p { font-size: var(--fs-base); line-height: var(--lh-base); }
  .article-body p:first-child { font-size: var(--fs-md); }
  .article-cover { margin-bottom: 26px; }
  .article-foot { flex-direction: column; align-items: stretch; }
  .article-foot .btn { width: 100%; }

  /* 悬浮按钮：移动端缩小并贴边 */
  .floating { right: 12px; bottom: 18px; gap: 7px; }
  .float-btn { width: 42px; height: 42px; border-radius: 11px; }
  .float-btn svg { width: 19px; height: 19px; }
  .float-label { display: none; }
  .float-pop { bottom: 100px; }
}


/* ==================================================================
   广州苏辛贸易有限公司 官网 · 全局样式
   风格：简约大气 / 商务专业 / 深浅对比
   ================================================================== */

:root {
  /* ---------------- 黑金体系 ----------------
     基调：深黑底 + 金色点缀
     --gold-* 为强调色，--brand-* 沿用旧变量名以兼容既有引用，
     在黑金体系下它们指向深黑 / 炭黑层级。               */

  /* 金色强调色 */
  --accent:       #c9a227;   /* 主金：按钮、线条、强调 */
  --accent-soft:  #e8d9a0;   /* 浅金：深底上的次级文字、hover */
  --accent-deep:  #8a6d1f;   /* 暗金：边框、分隔线 */
  --accent-glow:  rgba(201, 162, 39, .28);  /* 金色光晕 */

  /* 深色层级（原品牌色位置） */
  --brand:        #c9a227;   /* 在深底上，品牌色即金色 */
  --brand-dark:   #0b0b0d;   /* 最深：页脚、通栏 */
  --brand-light:  #e0bb4a;   /* 亮金：hover 态 */

  /* 文字层级（深底浅字） */
  --ink:          #f2efe8;   /* 主文字：近白微暖 */
  --ink-2:        #c9c5bc;   /* 正文 */
  --ink-3:        #948f86;   /* 次级说明 */
  --ink-4:        #8a867e;   /* 弱化 / 占位 */

  /* 表面与分隔 */
  --line:         #26262a;   /* 常规边框 */
  --line-2:       #1c1c1f;   /* 更弱的分隔 */
  --bg:           #101013;   /* 页面底色：深炭黑 */
  --bg-soft:      #17171b;   /* 卡片 / 次级区块 */
  --bg-elev:      #1d1d22;   /* 抬升面：悬浮、输入框 */
  --bg-dark:      #0b0b0d;   /* 最深区块 */

  --radius:       10px;
  --radius-lg:    16px;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --shadow-md:    0 4px 14px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
  --shadow-lg:    0 12px 44px rgba(0,0,0,.55);
  --shadow-gold:  0 6px 24px var(--accent-glow);

  --maxw:         1200px;
  --nav-h:        72px;
  --topbar-h:     38px;

  /* ---------------- 流式字号（clamp：最小 ・ 随视口缩放 ・ 最大） ----------------
     基准 1440px 视口；缩放系数用 vw，两端有硬边界防止过大或过小。
     每档都写了「静态值 + clamp」两句：不支持 clamp() 的老机型 WebView
     （微信内置浏览器 / 未更新的 Android System WebView）会丢弃第二句，
     保留第一句，从而拿到一套可用固定字号，而不是整体继承父级字号。 */
  --fs-xs:    11px;
  --fs-xs:    clamp(11px,  0.78vw, 12.5px);   /* 角标、极小提示 */
  --fs-sm:    13px;
  --fs-sm:    clamp(12.5px, 0.9vw,  14px);    /* 辅助说明、meta */
  --fs-base:  15px;
  --fs-base:  clamp(14px,  1.02vw, 16px);     /* 正文基准 */
  --fs-md:    16px;
  --fs-md:    clamp(15px,  1.14vw, 17.5px);   /* 强调正文、卡片标题 */
  --fs-lg:    19px;
  --fs-lg:    clamp(17px,  1.4vw,  21px);     /* 小标题 */
  --fs-xl:    22px;
  --fs-xl:    clamp(20px,  1.75vw, 26px);     /* 区块标题 */
  --fs-2xl:   26px;
  --fs-2xl:   clamp(23px,  2.3vw,  32px);     /* 页面主标题 */
  --fs-3xl:   30px;
  --fs-3xl:   clamp(27px,  3.1vw,  42px);     /* 首屏次级标题 */
  --fs-4xl:   34px;
  --fs-4xl:   clamp(31px,  3.9vw,  54px);     /* 首屏主标题 */

  --lh-tight: 1.22;
  --lh-snug:  1.45;
  --lh-base:  1.72;

  --font: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB",
          "Source Han Sans SC", "Noto Sans CJK SC",
          "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* text-size-adjust 必须带无前缀版：iOS Safari / 微信内置浏览器会做
   「字体自动放大」，同一段文案在不同机型上渲染尺寸不一致，表现为字号与行距忽大忽小。 */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---------------- 布局 ----------------
   viewport-fit=cover 下，横屏刘海机型的可视区会延伸到圆角/挖孔之下，
   所以左右内边距要用 max(常规值, 安全区)。不支持 max() 的老浏览器
   会丢弃该行，保留上面一句常规内边距。 */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: rgba(255,255,255,.78); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--tight { padding: 64px 0; }

/* ---------------- 标题组 ---------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 44px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--accent-soft); }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head h2 { font-size: var(--fs-2xl); margin-bottom: 16px; }
.section-head p { font-size: var(--fs-md); color: var(--ink-3); }
.section--dark .section-head p { color: rgba(255,255,255,.66); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 600;
  transition: all .22s ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--brand-light) 100%);
  color: #17150c;
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--accent-soft) 100%);
  color: #17150c;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--accent-glow);
}

.btn--accent { background: var(--accent); color: #17150c; }
.btn--accent:hover { background: var(--brand-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--bg-elev); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-soft); }

.btn--light { background: rgba(255,255,255,.08); color: var(--ink); border-color: rgba(201,162,39,.34); }
.btn--light:hover { background: rgba(201,162,39,.16); border-color: var(--accent); }

.btn--block { width: 100%; }
.btn--lg { padding: 16px 36px; font-size: var(--fs-md); }

/* ==================================================================
   顶部导航
   ================================================================== */
.site-header {
  position: fixed;
  /* inset 简写需 Chrome 87+/Safari 14.1+；下面三句是等价兜底 */
  top: 0; right: 0; left: 0;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 900;
  background: var(--bg-soft);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px rgba(16,21,29,.05);
}
/* 头部横向预算（英文站最吃紧）：品牌名 + 6 个导航项 + 语言开关 + CTA
   在 1200px 上限容器里只有 1152px 可用，实测需要约 1182px。这里统一把
   头部各段的内边距收一档（-84px），使任意宽度下都不再挤掉右侧按钮或
   截断品牌名。只动头部，不影响页面其他按钮。 */
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo
   允许整块收缩并把超长的公司名用省略号截断 —— 否则「品牌名 + 导航 +
   语言开关 + CTA」一旦排不下，最右侧的按钮会被挤出屏幕且无法横向滚动
   （中文站 6 个字够用，英文站 "Guangzhou Suxin Trading Co., Ltd." 就会顶出去）。 */
.logo { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.logo-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent) 0%, var(--brand-light) 100%);
  display: grid; place-items: center;
  color: #17150c;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(201, 162, 39,.28);
}
.logo-mark svg { width: 36px; height: 36px; }
.logo-text { display: flex; flex-direction: column; line-height: var(--lh-tight); min-width: 0; }
.logo-name {
  font-size: var(--fs-md); font-weight: 800; color: var(--ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-sub  {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 主菜单 */
.main-nav { display: flex; align-items: center; }
.main-nav a {
  position: relative;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-2);
  transition: color .2s, background .2s;
}
.main-nav a:hover { color: var(--brand); background: var(--bg-soft); }
.main-nav a.is-active { color: var(--brand); }
.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* 右侧操作区 */
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header-actions .btn { padding: 12px 22px; }

/* 语言切换 */
.lang-switch {
  display: flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.lang-switch button {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
  transition: all .2s;
  letter-spacing: .02em;
}
.lang-switch button.is-active {
  background: var(--accent);
  color: #17150c;
  box-shadow: var(--shadow-sm);
}

/* 汉堡按钮 */
.hamburger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  place-items: center;
}
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: background .2s;
}
.hamburger span::before, .hamburger span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s;
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger.is-open span { background: transparent; }
.hamburger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.hamburger.is-open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* 移动端抽屉 */
.mobile-nav {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 890;
  background: var(--bg-elev);
  padding: 20px 24px 40px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; }
.mobile-nav a {
  display: block;
  padding: 17px 4px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.mobile-nav a.is-active { color: var(--brand); }
.mobile-nav .btn { margin-top: 24px; }

/* ==================================================================
   Hero 首屏
   ================================================================== */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + 88px) 0 96px;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(28,87,152,.11), transparent 62%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 78%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -180px; right: -180px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,92,.13), transparent 68%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-4xl);
  letter-spacing: -.028em;
  margin-bottom: 22px;
}
.hero h1 .hl {
  background: linear-gradient(118deg, var(--accent-soft) 0%, var(--accent) 42%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: var(--fs-md);
  color: var(--ink-3);
  max-width: 560px;
  margin-bottom: 34px;
  line-height: var(--lh-base);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.hero-tag svg { width: 15px; height: 15px; color: var(--brand-light); flex-shrink: 0; }

/* 右侧视觉卡 */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.02;
  border-radius: 24px;
  background: linear-gradient(152deg, #0b0b0d 0%, #1a1812 48%, #2e2614 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 40px;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 16%, rgba(200,164,92,.3), transparent 46%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
}
.hero-visual-inner { position: relative; z-index: 2; width: 100%; text-align: center; }
.hero-mic { width: 116px; height: auto; margin: 0 auto 26px; color: rgba(255,255,255,.94); }
.hero-visual-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 10px;
}
.hero-visual-title { color: #fff; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 22px; }
.hero-visual-specs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  position: relative; z-index: 2;
}
.hero-spec {
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
.hero-spec b { display: block; color: #fff; font-size: var(--fs-md); font-weight: 700; }
.hero-spec span { font-size: var(--fs-xs); color: rgba(255,255,255,.62); }

/* ==================================================================
   数据条
   ================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat {
  padding: 34px 26px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat b {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -.03em;
  line-height: var(--lh-tight);
  margin-bottom: 6px;
}
.stat span { font-size: var(--fs-base); color: var(--ink-3); font-weight: 500; }

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

/* 服务卡 */
.svc-card {
  position: relative;
  padding: 34px 30px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .26s, box-shadow .26s, border-color .26s;
  overflow: hidden;
}
.svc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }

.svc-icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--brand);
  margin-bottom: 20px;
}
.svc-icon svg { width: 24px; height: 24px; }
.svc-card h3 { font-size: var(--fs-md); margin-bottom: 11px; }
.svc-card p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); }

/* 产品卡 */
.prod-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .26s, box-shadow .26s, border-color .26s;
  display: flex; flex-direction: column;
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }

.prod-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-thumb .ph { color: var(--brand); opacity: .34; width: 62px; height: 62px; }
.prod-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--bg-elev);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--brand);
  letter-spacing: .03em;
  box-shadow: var(--shadow-sm);
}
.prod-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.prod-cat {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 9px;
}
.prod-body h3 { font-size: var(--fs-md); margin-bottom: 10px; line-height: var(--lh-snug); }
.prod-body p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); flex: 1; }
.prod-meta {
  display: flex;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-sm);
}
.prod-meta div span { display: block; color: var(--ink-4); font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.prod-meta div b { color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); }

/* 分类筛选 */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2);
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--brand-light));
  border-color: var(--accent);
  color: #17150c;
  font-weight: 700;
}

/* ==================================================================
   流程步骤
   ================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.step {
  position: relative;
  padding: 0 28px 0 0;
}
.step::after {
  content: "";
  position: absolute;
  top: 25px; left: 56px; right: 6px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.step:last-child::after { display: none; }
.step-num {
  counter-increment: step;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-size: var(--fs-md); font-weight: 800;
  color: var(--brand);
  margin-bottom: 20px;
  position: relative; z-index: 2;
  transition: all .25s;
}
.step-num::before { content: counter(step, decimal-leading-zero); }
.step:hover .step-num {
  background: linear-gradient(135deg, var(--accent), var(--brand-light));
  border-color: var(--accent);
  color: #17150c;
}
.step h3 { font-size: var(--fs-md); margin-bottom: 10px; }
.step p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); }

/* ==================================================================
   分栏内容
   ================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split--reverse .split-media { order: 2; }

.prose p { margin-bottom: 18px; color: var(--ink-3); font-size: var(--fs-md); line-height: var(--lh-base); }
.prose p:last-child { margin-bottom: 0; }

.check-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.check-list li {
  display: flex; align-items: flex-start;
  font-size: var(--fs-base); color: var(--ink-2);
}
.check-list svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }

/* 视觉面板 */
.panel {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #1a1813 0%, #0c0b09 100%);
  border: 1px solid var(--accent-deep);
  padding: 44px 40px;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.panel::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,92,.26), transparent 66%);
}
.panel-title { color: #fff; font-size: var(--fs-lg); margin-bottom: 26px; position: relative; z-index: 2; }
.panel-list { display: grid; gap: 22px; position: relative; z-index: 2; }
.panel-item { display: flex; align-items: flex-start; }
.panel-ico {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(201,162,39,.20), rgba(201,162,39,.06));
  border: 1px solid rgba(201,162,39,.34);
  display: grid; place-items: center;
  color: var(--accent-soft);
}
.panel-ico svg { width: 19px; height: 19px; display: block; }
.panel-item h4 { color: #fff; font-size: var(--fs-base); margin-bottom: 5px; }
.panel-item p { font-size: var(--fs-sm); color: rgba(255,255,255,.66); line-height: 1.6; }

/* 时间线 */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: "";
  position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--brand), var(--accent), transparent);
}
.tl-item { position: relative; padding-bottom: 38px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -32px; top: 7px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 3px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(201, 162, 39,.09);
}
.tl-year {
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: .09em; color: var(--accent);
  margin-bottom: 6px;
}
.tl-item h3 { font-size: var(--fs-md); margin-bottom: 8px; }
.tl-item p { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); }

/* ==================================================================
   页面 Hero（内页）
   ================================================================== */
.page-hero {
  padding: calc(var(--nav-h) + 68px) 0 62px;
  background:
    radial-gradient(900px 400px at 82% -20%, rgba(28,87,152,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
  border-bottom: 1px solid var(--line-2);
}
.crumb { display: flex; align-items: center; font-size: var(--fs-sm); color: var(--ink-4); margin-bottom: 20px; }
.crumb a:hover { color: var(--brand); }
.crumb span { color: var(--ink-4); }
.page-hero h1 { font-size: var(--fs-3xl); margin-bottom: 16px; letter-spacing: -.026em; }
.page-hero p { font-size: var(--fs-md); color: var(--ink-3); max-width: 640px; }

/* ==================================================================
   联系我们
   ================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: start; }

.info-list { display: grid; gap: 6px; }
.info-item {
  display: flex;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
}
.info-item:last-child { border-bottom: none; }
.info-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--brand);
}
.info-icon svg { width: 20px; height: 20px; }
.info-item h4 { font-size: var(--fs-base); color: var(--ink-4); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; }
.info-item p { font-size: var(--fs-md); color: var(--ink); font-weight: 600; word-break: break-word; }

/* 表单 */
.form-card {
  padding: 40px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.form-card h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.form-card > p { font-size: var(--fs-base); color: var(--ink-3); margin-bottom: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.field label .req { color: #d64545; margin-left: 3px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
  outline: none;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand-light);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(28,87,152,.1);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }

.form-msg {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 600;
  display: none;
}
.form-msg.is-ok { display: block; background: #eef8f1; color: #1f7a44; border: 1px solid #cbe8d6; }
.form-msg.is-err { display: block; background: rgba(217, 70, 70, .12); color: #f0928f; border: 1px solid rgba(217, 70, 70, .32); }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 26px 20px; }
}

/* ==================================================================
   CTA 区块
   ================================================================== */
.cta {
  position: relative;
  padding: 66px 56px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0b0b0d 0%, #1c1a15 54%, #2a2416 100%);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta::after {
  content: "";
  position: absolute;
  right: -90px; top: -90px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,92,.24), transparent 66%);
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: 12px; }
.cta p { color: rgba(255,255,255,.76); font-size: var(--fs-md); max-width: 560px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==================================================================
   页脚
   ================================================================== */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,.62); padding: 68px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 52px;
}
.footer-brand .logo-name { color: #fff; }
.footer-brand .logo-sub { color: rgba(255,255,255,.42); }
.footer-brand p { margin-top: 20px; font-size: var(--fs-base); line-height: var(--lh-base); max-width: 320px; }

.footer-col h4 {
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a, .footer-col li { font-size: var(--fs-base); color: rgba(255,255,255,.6); transition: color .2s; }
.footer-col a:hover { color: var(--accent-soft); }

.footer-bottom {
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.42);
}
/* 版权与备案号的间距用 margin，不依赖 flex gap（老 WebView 不支持） */
.footer-bottom > * + * { margin-left: 20px; }

/* ==================================================================
   产品详情弹层
   ================================================================== */
.modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,21,35,.62);
  backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; }
.modal-box {
  position: relative;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn .26s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  color: var(--ink-2);
  z-index: 3;
  transition: background .2s;
}
.modal-close:hover { background: var(--bg-elev); color: var(--ink); }
.modal-close svg { width: 18px; height: 18px; }
.modal-hero {
  aspect-ratio: 16 / 8;
  background: linear-gradient(150deg, var(--bg-elev), var(--bg-soft));
  display: grid; place-items: center;
}
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero .ph { width: 76px; height: 76px; color: var(--brand); opacity: .32; }
.modal-body { padding: 36px 40px 40px; }
.modal-body h2 { font-size: var(--fs-xl); margin-bottom: 14px; }
.modal-body .prod-cat { margin-bottom: 12px; }
.modal-body .detail-text { font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); white-space: pre-line; margin-top: 18px; }
.modal-specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 26px 0 4px;
}
.modal-spec {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.modal-spec span { display: block; font-size: var(--fs-xs); color: var(--ink-4); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.modal-spec b { font-size: var(--fs-base); color: var(--ink); }

/* ==================================================================
   滚动淡入动画
   ================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==================================================================
   老机型兼容兜底 —— 用 margin 替代 flex gap
   ------------------------------------------------------------------
   flex 的 gap 需要 Chrome 84+ / Safari 14.1+。未更新的 Android System
   WebView、部分厂商浏览器、微信内置浏览器上 gap 会被整条丢弃，于是
   「图标紧贴文字」「同一类文案在不同区块间距忽大忽小」「小标签挤成
   一团」——正是「部分机型文案间距不同」的根因。

   这里把所有「图标 + 文案」的行内组合改成 margin 实现，间距在任何
   浏览器上都一致。要还原成 gap 写法，需同时删掉本节规则并在上面对应
   组件里把 gap 加回去（两处必须同进同退，否则会出现双倍间距）。

   例外说明：`.btn` 内部多为「图标 + 裸文本节点」，裸文本节点不参与
   `> * + *` 选择器匹配，所以按钮一律不改，按钮本来就很少出现图标贴字。
   ================================================================== */
.logo > * + *            { margin-left: 12px; }
.eyebrow::before         { margin-right: 8px; }
.cat-card > * + *        { margin-left: 16px; }
.oem-list li > * + *     { margin-left: 11px; }
.oem-card > * + *        { margin-top: 9px; }   /* 该卡片为纵向排列 */
.strength-item > * + *   { margin-left: 15px; }
.hero-tag > svg          { margin-right: 7px; }
.panel-item > * + *      { margin-left: 16px; }
.check-list li > * + *   { margin-left: 12px; }
.info-item > * + *       { margin-left: 16px; }
.crumb > * + *           { margin-left: 9px; }
.article-meta > * + *    { margin-left: 12px; }
.prod-meta > * + *       { margin-left: 18px; }

/* ==================================================================
   响应式 —— 平板 / 横屏手机
   ================================================================== */
@media (max-width: 1024px) {
  .section { padding: 76px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  /* 单列后卡片宽度收到 460px，写死的 aspect-ratio 高度跟不上内容，
     overflow:hidden 会把底部「核心产品线 / 推荐产品」裁掉，故改为内容撑高 */
  .hero-visual { max-width: 460px; aspect-ratio: auto; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split--reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .step:nth-child(2)::after { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* 1099px 及以下改用汉堡抽屉。
   实测（英文站 1024px 视口）：品牌名 307 + 导航 521 + 语言开关/CTA 247
   + 两处 24px 间距 = 1123px，而容器只有 961px，右侧「Get a Quote」会被
   完全挤出屏幕。横屏手机（844~926px）与 iPad 竖屏正好落在这一段，
   属于「部分机型内容显示不全」的另一种表现。导航收进抽屉后头部只剩
   Logo + 语言开关 + CTA + 汉堡，任何宽度都放得下。 */
@media (max-width: 1099px) {
  .main-nav { display: none; }
  .hamburger { display: grid; }
  /* 平板上抽屉收成右侧面板；手机宽度下 max-width:100% 使其仍然是整屏 */
  .mobile-nav { left: auto; right: 0; width: 420px; max-width: 100%; box-shadow: var(--shadow-lg); }
}

/* 1100~1199px：完整导航仍显示，但再收一档，保证英文站不截断品牌名 */
@media (min-width: 1100px) and (max-width: 1199px) {
  .header-inner { gap: 16px; }
  .logo-name { font-size: var(--fs-sm); }
  .main-nav a { padding: 9px 10px; }
  .main-nav a.is-active::after { left: 10px; right: 10px; }
  .header-actions .btn { padding: 12px 16px; font-size: var(--fs-sm); }
}

/* ==================================================================
   响应式 —— 手机
   ================================================================== */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .container { padding: 0 18px; }
  .container {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .section { padding: 58px 0; }
  .section--tight { padding: 44px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: var(--fs-xl); }

  /* 导航：桌面菜单隐藏，汉堡显示
     —— 头部只剩「Logo + 汉堡」，语言切换移入侧边抽屉。
     原实现里 .logo / .header-actions 都是 flex-shrink:0，公司名一长
     （英文页 "Guangzhou Suxin Trading Co., Ltd."）就会把汉堡按钮整个
     顶出屏幕，用户点不到菜单。这里让 Logo 可收缩 + 公司名省略号截断，
     再加上把语言开关挪进抽屉腾出的空间，360px 下也能完整显示。 */
  .main-nav { display: none; }
  .hamburger { display: grid; width: 42px; height: 42px; }
  .header-actions .btn { display: none; }
  .header-inner { gap: 12px; }
  .logo > * + * { margin-left: 9px; }
  .logo-mark { width: 34px; height: 34px; border-radius: 9px; }
  .logo-mark svg { width: 30px; height: 30px; }
  /* 省略号截断已在 .logo-name 基础样式里（见顶部 Logo 段） */
  .logo-name { font-size: var(--fs-sm); letter-spacing: -.02em; }
  .logo-sub { display: none; }
  .header-bar .lang-switch { display: none; }
  /* 语言开关移到抽屉后，用 inline-flex 让胶囊保持「按内容宽」而不是撑满整行 */
  .mobile-nav .lang-switch { display: inline-flex; margin: 20px 4px 0; }
  .mobile-nav .lang-switch button { padding: 7px 16px; font-size: var(--fs-sm); }

  /* 纵向间距补偿：图标行改成 margin 之后，移动端行高更紧凑 */
  .oem-card > * + * { margin-top: 0; margin-left: 12px; }

  .hero { padding: calc(var(--nav-h) + 44px) 0 58px; }
  .hero h1 { font-size: var(--fs-2xl); }
  .hero-sub { font-size: var(--fs-base); margin-bottom: 26px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 auto; padding: 13px 20px; font-size: var(--fs-base); }
  /* 视觉卡：宽度收窄后原来写死的 aspect-ratio 会让高度跟不上内容，
     `.hero-visual{overflow:hidden}` 一裁，底部「核心产品线 / 推荐产品 /
     2000+ / 15+」整段就看不见了。移动端改为由内容撑高并压缩内部间距。 */
  .hero-visual { padding: 30px 22px; aspect-ratio: auto; min-height: 0; }
  .hero-mic { width: 68px; margin-bottom: 14px; }
  .hero-visual-label { margin-bottom: 8px; }
  .hero-visual-title { font-size: var(--fs-md); margin-bottom: 18px; }
  .hero-visual-specs { gap: 10px; }
  .hero-spec { padding: 12px 10px; }
  .hero-tags { margin-top: 26px; padding-top: 22px; gap: 8px; }
  .hero-tag { font-size: var(--fs-sm); padding: 6px 12px; }

  .grid { gap: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* 服务卡：手机端图标与标题同行，不再让图标独占一行浪费空间。
     布局用 flex wrap：图标 + 标题占首行（标题吃剩余宽度，可换行），
     描述 flex-basis:100% 强制换到第二行占满。间距走 margin（老 WebView 无 gap）。 */
  .svc-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 22px 20px;
  }
  .svc-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    margin: 0 14px 0 0;
    flex-shrink: 0;
  }
  .svc-icon svg { width: 21px; height: 21px; }
  .svc-card h3 { flex: 1 1 0; margin: 0; min-width: 0; }
  .svc-card p  { flex: 1 1 100%; margin-top: 12px; }
  .prod-body { padding: 18px 20px 20px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 24px 14px; }
  .stat b { font-size: var(--fs-2xl); }
  .stat span { font-size: var(--fs-sm); }

  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step { padding-right: 0; }
  .step::after { display: none; }
  .step-num { width: 44px; height: 44px; margin-bottom: 15px; }

  .panel { padding: 30px 22px; }
  .cta { padding: 38px 24px; flex-direction: column; align-items: flex-start; gap: 26px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; }

  .page-hero { padding: calc(var(--nav-h) + 40px) 0 42px; }
  .page-hero h1 { font-size: var(--fs-2xl); }
  .page-hero p { font-size: var(--fs-base); }

  .form-card { padding: 26px 20px; }
  .info-item { padding: 17px 0; }

  .timeline { padding-left: 26px; }
  .tl-item::before { left: -26px; width: 13px; height: 13px; }

  /* ---- 页脚精简：手机上只保留「品牌 · 产品词 · 联系方式」三段 ----
     快速导航与右上角抽屉菜单逐字重复，纯占地方 → 手机端直接隐藏（桌面保留）。
     产品分类压成一行行内词组，链接仍在 DOM 里，搜索引擎照样抓得到。 */
  .footer-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 30px; }
  .site-footer { padding-top: 44px; }
  .footer-col--links { display: none; }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-brand p { margin-top: 10px; }
  .footer-col--cats ul { display: block; }
  .footer-col--cats li { display: inline-block; margin: 0 5px 8px 0; }
  .footer-col--cats a { font-size: var(--fs-sm); }
  .footer-col--cats li + li::before { content: "·"; margin-right: 5px; color: rgba(255,255,255,.28); }
  .footer-col--contact li { font-size: var(--fs-sm); }
  .footer-bottom { flex-direction: column; align-items: flex-start; font-size: var(--fs-sm); }
  .footer-bottom > * + * { margin-left: 0; margin-top: 10px; }

  .modal { padding: 0; align-items: flex-end; }
  .modal-box { max-height: 92vh; border-radius: 18px 18px 0 0; }
  .modal-hero { aspect-ratio: 16 / 10; }
  .modal-body { padding: 24px 20px 34px; }
  .modal-body h2 { font-size: var(--fs-lg); }
  .modal-specs { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 380px) {
  /* 极小屏（320~380px）：把留白、Logo 字号与标记尺寸再压一档，
     保证 320px 宽的机器上「Logo + 汉堡」也能完整显示、公司名不省略。 */
  .container { padding: 0 14px; }
  .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .header-inner { gap: 8px; }
  .logo-mark { width: 30px; height: 30px; border-radius: 8px; }
  .logo-mark svg { width: 26px; height: 26px; }
  .logo-name { font-size: var(--fs-xs); }
  .stat b { font-size: var(--fs-xl); }
  /* 极小屏：压低大字号上限，避免标题换行破碎 */
  :root {
    --fs-4xl: 26px;
    --fs-3xl: 23px;
    --fs-2xl: 20px;
    --fs-xl:  18px;
  }
}

/* ==================================================================
   打印
   ================================================================== */
@media print {
  .site-header, .mobile-nav, .site-footer, .cta, .modal { display: none !important; }
  body { color: #000; }
  .section { padding: 20px 0; }
}