/* ==========================================================================
   海外站 · 国际化设计层
   
   目标：把原先偏国内 SaaS 的视觉语言（大圆角、青紫渐变、彩色投影、发光点）
   改成欧美 B2B 服务公司常用的编辑式排版：中性色板、单一强调色、小圆角、
   极轻投影、以分隔线和留白建立层级。
   
   实现原则：只覆盖，不删除。所有规则都在原样式之后加载，靠变量覆盖与
   同名选择器优先级生效，不改动原有 CSS 文件，便于随时回退。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 主色：深藏青，替代原来的天蓝 #0ea5e9 */
  --intl-ink: #0d1b2a;
  --intl-ink-2: #1f2d3d;
  --intl-body: #3d4655;
  --intl-soft: #5b6573;
  --intl-muted: #78828f;
  --intl-line: #e4e7ec;
  --intl-line-strong: #d0d5dd;
  --intl-bg: #ffffff;
  --intl-bg-tint: #f6f7f9;
  --intl-accent: #123b5c;
  --intl-accent-hover: #0b2b45;
  --intl-accent-2: #9a3412;
  --intl-radius: 6px;
  --intl-radius-sm: 4px;
  --intl-shadow: 0 1px 2px rgba(13, 27, 42, 0.05);
  --intl-shadow-hover: 0 4px 14px -6px rgba(13, 27, 42, 0.16);
  --intl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --intl-shell: 1160px;
}

/* ---------- 2. 变量层覆盖：haiwai.css ---------- */
:root,
.haiwai-page,
.haiwai-page-home {
  --haiwai-bg: #ffffff;
  --haiwai-surface: #ffffff;
  --haiwai-surface-hover: #ffffff;
  --haiwai-border: #e4e7ec;
  --haiwai-border-strong: #cfd6e0;
  --haiwai-text: #3d4655;
  --haiwai-text-soft: #5b6573;
  --haiwai-text-muted: #78828f;
  --haiwai-heading: #0d1b2a;
  --haiwai-primary: #123b5c;
  --haiwai-primary-soft: rgba(18, 59, 92, 0.07);
  --haiwai-secondary: #9a3412;
  --haiwai-shadow: 0 1px 2px rgba(13, 27, 42, 0.05);
  --haiwai-shadow-hover: 0 4px 14px -6px rgba(13, 27, 42, 0.16);
  --haiwai-radius-lg: 6px;
  --haiwai-radius-md: 4px;
}

/* ---------- 3. 变量层覆盖：region_zone.css ---------- */
:root,
.region-page {
  --rz-bg: #ffffff;
  --rz-surface: #ffffff;
  --rz-surface-2: #f6f7f9;
  --rz-ink: #0d1b2a;
  --rz-ink-soft: #3d4655;
  --rz-muted: #78828f;
  --rz-line: #e4e7ec;
  --rz-accent: #123b5c;
  --rz-accent-2: #9a3412;
  --rz-accent-soft: rgba(18, 59, 92, 0.07);
  --rz-radius: 6px;
  --rz-radius-sm: 4px;
  --rz-btn-radius: 4px;
  --rz-shadow: 0 1px 2px rgba(13, 27, 42, 0.05);
  --rz-hero-bg: #ffffff;
  --rz-hero-ink: #0d1b2a;
  --rz-hero-soft: #4a5567;
  --rz-font-display: var(--intl-font);
  --rz-font-body: var(--intl-font);
  --rz-track: -0.011em;
}

/* ---------- 4. 全局排版 ---------- */
body,
.haiwai-page,
.region-page {
  font-family: var(--intl-font);
  color: var(--intl-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.haiwai-page h1,
.haiwai-page h2,
.haiwai-page h3,
.haiwai-page h4,
.region-page h1,
.region-page h2,
.region-page h3,
.region-page h4 {
  color: var(--intl-ink);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.22;
}

.haiwai-page h1,
.region-page h1 {
  font-weight: 650;
  letter-spacing: -0.028em;
  line-height: 1.12;
}

.haiwai-page p,
.region-page p {
  color: var(--intl-body);
}

/* 眉题：从彩色小标签改为字距拉开的深色小字，编辑式排版常用手法 */
.haiwai-eyebrow,
.rz-kicker,
.rz-eyebrow {
  color: var(--intl-accent);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11.5px;
}

/* ---------- 5. 按钮：方角、高对比、无渐变 ---------- */
.haiwai-button,
.rz-btn,
.intl-btn {
  border-radius: var(--intl-radius-sm);
  font-weight: 550;
  letter-spacing: -0.006em;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  box-shadow: none;
}

.haiwai-button.is-primary,
.rz-btn--primary,
.intl-btn--primary {
  background-color: var(--intl-accent);
  background-image: none;
  border: 1px solid var(--intl-accent);
  color: #ffffff;
}

.haiwai-button.is-primary:hover,
.rz-btn--primary:hover,
.intl-btn--primary:hover {
  background-color: var(--intl-accent-hover);
  background-image: none;
  border-color: var(--intl-accent-hover);
  transform: none;
}

.haiwai-button.is-secondary,
.rz-btn--ghost,
.intl-btn--ghost {
  background-color: #ffffff;
  background-image: none;
  border: 1px solid var(--intl-line-strong);
  color: var(--intl-ink);
}

.haiwai-button.is-secondary:hover,
.rz-btn--ghost:hover,
.intl-btn--ghost:hover {
  background-color: var(--intl-bg-tint);
  border-color: var(--intl-ink-2);
  transform: none;
}

.rz-btn {
  border-radius: var(--intl-radius-sm);
}

/* ---------- 6. 卡片与面板：白底 + 细边，去掉毛玻璃与彩色投影 ---------- */
.haiwai-card,
.haiwai-mini-card,
.haiwai-engagement-card,
.haiwai-assurance-card,
.haiwai-data-item,
.glass-panel,
.rz-card,
.rz-region-card,
.rz-compliance {
  background: #ffffff;
  border: 1px solid var(--intl-line);
  border-radius: var(--intl-radius);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.haiwai-card:hover,
.rz-card:hover,
.rz-region-card:hover {
  border-color: var(--intl-line-strong);
  box-shadow: var(--intl-shadow-hover);
  transform: none;
}

.glass-panel {
  background: #ffffff;
}

.rz-tag,
.haiwai-pill {
  border-radius: var(--intl-radius-sm);
  background: var(--intl-bg-tint);
  border: 1px solid var(--intl-line);
  color: var(--intl-soft);
  font-weight: 500;
}

/* ---------- 7. Hero：去渐变，改为白底 + 底部细线 ---------- */
.haiwai-hero {
  background: #ffffff;
  background-image: none;
  border-bottom: 1px solid var(--intl-line);
}

.rz-hero {
  background: #ffffff;
  background-image: none;
  border-bottom: 1px solid var(--intl-line);
}

/* 首页深色 hero：保留深色（欧美 B2B 亦常见），但去青紫、去发光点强度 */
body.haiwai-page-home .haiwai-hero,
body.haiwai-page-home .hwx-hero {
  background-image: none;
  background-color: #0d1b2a;
}

body.haiwai-page-home .hwx-orbit,
.haiwai-page-home .hwx-glow,
.haiwai-page-home .hwx-motif {
  opacity: 0.28;
}

/* ---------- 8. 深色区块内的文字反相 ---------- */
body.haiwai-page-home .haiwai-hero h1,
.haiwai-page-home .haiwai-hero h2,
body.haiwai-page-home .hwx-hero h1,
.haiwai-page-home .hwx-hero h2 {
  color: #ffffff;
}

body.haiwai-page-home .haiwai-hero p,
body.haiwai-page-home .hwx-hero p {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- 9. 区块间距：桌面更大留白 ---------- */
@media (min-width: 992px) {
  .haiwai-section,
  .rz-section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .haiwai-section-heading,
  .rz-head {
    margin-bottom: 44px;
  }
}

/* ---------- 10. 栅格：编辑式两栏 ---------- */
.haiwai-card-grid {
  gap: 18px;
}

.haiwai-card-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ==========================================================================
   11. 首页最新洞察区块
   ========================================================================== */
.intl-insight-section {
  border-top: 1px solid var(--intl-line);
}

.intl-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.intl-insight-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 24px;
  background: #ffffff;
  border: 1px solid var(--intl-line);
  border-radius: var(--intl-radius);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.intl-insight-card:hover {
  border-color: var(--intl-line-strong);
  box-shadow: var(--intl-shadow-hover);
}

.intl-insight-meta {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--intl-muted);
  font-weight: 500;
}

.intl-insight-card h3 {
  font-size: 18px;
  line-height: 1.34;
  margin: 0;
  color: var(--intl-ink);
  font-weight: 600;
}

.intl-insight-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--intl-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.intl-insight-more {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--intl-line);
}

.intl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 550;
  color: var(--intl-accent);
  text-decoration: none;
}

.intl-link:hover {
  color: var(--intl-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   12. 洞察列表页
   ========================================================================== */
.ins-lang-note {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--intl-soft);
  background: var(--intl-bg-tint);
  border: 1px solid var(--intl-line);
  border-radius: var(--intl-radius-sm);
}

.ins-list {
  display: grid;
  gap: 0;
  max-width: 940px;
  border-top: 1px solid var(--intl-line);
}

.ins-item {
  display: block;
  padding: 30px 4px 28px;
  border-bottom: 1px solid var(--intl-line);
  text-decoration: none;
  transition: background-color 0.16s ease, padding-left 0.16s ease;
}

.ins-item:hover {
  background: #fbfcfd;
  padding-left: 12px;
}

.ins-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--intl-muted);
  margin-bottom: 10px;
}

.ins-item-title {
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--intl-ink);
  margin: 0 0 8px;
  font-weight: 600;
}

.ins-item:hover .ins-item-title {
  color: var(--intl-accent);
}

.ins-item-lead {
  margin: 0;
  max-width: 760px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--intl-soft);
}

.ins-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 940px;
  margin-top: 32px;
}

.ins-pager-label {
  font-size: 12.5px;
  color: var(--intl-muted);
  letter-spacing: 0.02em;
}

.ins-pager-btns {
  display: flex;
  gap: 10px;
}

/* ==========================================================================
   13. 文章详情页
   ========================================================================== */
.region-page-insight .rz-body,
.region-page-insight article p {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--intl-body);
}

.region-page-insight article h2 {
  font-size: 25px;
  letter-spacing: -0.02em;
  margin-top: 42px;
}

.region-page-insight article h3 {
  font-size: 19px;
  letter-spacing: -0.012em;
}

.region-page-insight article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}

.region-page-insight article th,
.region-page-insight article td {
  border: 1px solid var(--intl-line);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}

.region-page-insight article th {
  background: var(--intl-bg-tint);
  font-weight: 600;
  color: var(--intl-ink);
}

.region-page-insight article blockquote {
  border-left: 3px solid var(--intl-accent);
  background: var(--intl-bg-tint);
  padding: 18px 22px;
  margin: 26px 0;
  color: var(--intl-ink-2);
  font-size: 16px;
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */
@media (max-width: 991px) {
  .intl-insight-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 719px) {
  .intl-insight-grid {
    grid-template-columns: 1fr;
  }

  .ins-item-title {
    font-size: 19px;
  }

  .ins-pager {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   15. 服务页：欧美编辑式双栏 Hero
   ========================================================================== */
.intl-shell {
  max-width: var(--intl-shell);
  margin: 0 auto;
  padding: 0 28px;
}

.intl-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--intl-line);
  padding: 76px 0 68px;
}

.intl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 60px;
  align-items: start;
}

.intl-hero h1 {
  font-size: clamp(30px, 3.3vw, 43px);
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--intl-ink);
  margin: 14px 0 20px;
  font-weight: 650;
}

.intl-hero-lead {
  font-size: 17px;
  line-height: 1.68;
  color: var(--intl-soft);
  max-width: 620px;
  margin: 0 0 26px;
}

.intl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.intl-hero-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 620px;
}

.intl-hero-points li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--intl-body);
}

.intl-hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--intl-accent);
  border-radius: 1px;
}

/* 事实表：右侧栏用 dl 呈现，比卡片更接近欧美 B2B 服务页的写法 */
.intl-facts {
  border-top: 2px solid var(--intl-ink);
  padding-top: 4px;
}

.intl-facts dl {
  margin: 0;
}

.intl-fact {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--intl-line);
}

.intl-fact dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--intl-muted);
  font-weight: 600;
  padding-top: 3px;
}

.intl-fact dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--intl-ink-2);
}

/* ==========================================================================
   16. 服务页：编号网格与流程
   ========================================================================== */
.intl-grid {
  display: grid;
  gap: 0 36px;
  border-top: 1px solid var(--intl-line);
}

.intl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.intl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.intl-cell {
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--intl-line);
}

.intl-cell-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--intl-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

.intl-cell h3 {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--intl-ink);
  letter-spacing: -0.012em;
}

.intl-cell p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--intl-soft);
}

.intl-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.intl-step {
  border-top: 2px solid var(--intl-accent);
  padding-top: 16px;
}

.intl-step-num {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--intl-accent);
}

.intl-step h3 {
  font-size: 16px;
  margin: 10px 0 8px;
  color: var(--intl-ink);
}

.intl-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--intl-soft);
}

/* 服务页内的次级区块：统一白底，靠留白与细线分层 */
.intl-section {
  padding: 80px 0;
  background: #ffffff;
}

.intl-section--tint {
  background: var(--intl-bg-tint);
  border-top: 1px solid var(--intl-line);
  border-bottom: 1px solid var(--intl-line);
}

.intl-section-head {
  max-width: 760px;
  margin-bottom: 40px;
}

.intl-section-head h2 {
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.24;
  letter-spacing: -0.022em;
  margin: 12px 0 14px;
  color: var(--intl-ink);
}

.intl-section-head p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--intl-soft);
  margin: 0;
}

/* 旧结构里的 mini-card 标题层级修正：面板内标题不该用 h2 */
.haiwai-mini-card h2,
.haiwai-mini-card h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 6px;
  color: var(--intl-ink);
}

.haiwai-mini-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--intl-soft);
}

@media (max-width: 991px) {
  .intl-hero { padding: 56px 0 52px; }
  .intl-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .intl-grid-4, .intl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intl-section { padding: 60px 0; }
}

@media (max-width: 640px) {
  .intl-grid-2, .intl-grid-3, .intl-grid-4, .intl-steps { grid-template-columns: 1fr; }
  .intl-fact { grid-template-columns: 1fr; gap: 4px; }
  .intl-shell { padding: 0 20px; }
}

/* 链接型编号卡片：与普通编号卡片同构，hover 时给轻微底色与色变 */
a.intl-cell {
  transition: background-color 0.16s ease;
}

a.intl-cell:hover {
  background: #fbfcfd;
}

a.intl-cell:hover h3 {
  color: var(--intl-accent);
}

a.intl-cell:hover p {
  color: var(--intl-body);
}

/* ==========================================================================
   17. 导航：消除区域切换器与语言切换器的折行
   「Select region」在 1440 视口下会被挤成两行，属于布局缺陷
   ========================================================================== */
.rz-switch-btn,
.rz-switch-btn span,
.rz-lang-btn,
.rz-nav a,
.rz-links a {
  white-space: nowrap;
}

.rz-switch-btn {
  gap: 7px;
}

@media (min-width: 1200px) {
  .rz-nav a,
  .rz-links a {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* ==========================================================================
   18. 首页深色 Hero 内的按钮对比度
   深藏青按钮落在深色背景上几乎不可见，改为白色实心（欧美深色 hero 的常规做法）
   ========================================================================== */
body.haiwai-page-home .hwx-btn--primary {
  background: #ffffff;
  background-image: none;
  color: #0d1b2a;
  border: 1px solid #ffffff;
  border-radius: var(--intl-radius-sm);
}

body.haiwai-page-home .hwx-btn--primary:hover {
  background: #e6ebf1;
  border-color: #e6ebf1;
  color: #0d1b2a;
}

body.haiwai-page-home .hwx-btn:not(.hwx-btn--primary) {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--intl-radius-sm);
}

body.haiwai-page-home .hwx-btn:not(.hwx-btn--primary):hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* 首屏小标签在深色背景上的可读性 */
body.haiwai-page-home .hwx-field {
  color: rgba(255, 255, 255, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}