/* ==========================================================================
   common.css —— 全局样式与设计系统
   企业官网 | 天威诚信
   设计规范：.trae/rules/ui_spec.md 天威诚信 · 全局基础 UI Design System V1.0
   原则：现代企业级数字信任；大留白 + 大标题 + 大视觉 + 少量克制品牌红
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

/* ---------- 设计令牌 Design Tokens ---------- */
:root {
  /* 品牌色 Brand Red Extended Palette */
  --brand-900: #7F0F10;
  --brand-800: #991314;
  --brand-700: #B11617;
  --brand-600: #D1191A;   /* 主品牌色 */
  --brand-500: #E13A3B;
  --brand-400: #EA6667;
  --brand-300: #F08C8D;
  --brand-200: #F5B7B7;
  --brand-100: #FBE1E1;
  --brand-50: #FEF3F3;

  /* 中性背景 Neutral Background */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F3F5F7;
  --bg-subtle: #F1F5F9;
  --bg-inverse: #111827;

  /* 文本 Text */
  --text-primary: #111827;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-quaternary: #94A3B8;
  --text-disabled: #CBD5E1;
  --text-inverse: #FFFFFF;
  --text-brand: #D1191A;

  /* 边框 Border */
  --border-subtle: #F1F5F9;
  --border-light: #EEF1F4;
  --border-default: #E5E7EB;
  --border-strong: #CBD5E1;
  --border-brand: #D1191A;
  --border-inverse: rgba(255, 255, 255, 0.12);

  /* 字体 Font（开源免费：中文 Noto Sans SC / 英文·数字 Inter） */
  --font-sans: "Noto Sans SC", "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-latin: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 字号阶梯 Type Scale */
  --fs-display: 64px;
  --fs-h1: 52px;
  --fs-h2: 44px;
  --fs-h3: 30px;
  --fs-h4: 23px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  /* 行高 Line Height（规则：字号 + 8px） */
  --lh-display: 72px;
  --lh-h1: 60px;
  --lh-h2: 52px;
  --lh-h3: 38px;
  --lh-h4: 31px;
  --lh-body-lg: 26px;
  --lh-body: 24px;
  --lh-body-sm: 22px;
  --lh-caption: 20px;

  /* 字重 Font Weight（仅允许 400/500/600/700） */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* 圆角 Radius（克制） */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* 阴影 Shadow（轻、少、软） */
  --shadow-1: 0 4px 16px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 8px 30px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 20px 60px rgba(15, 23, 42, 0.12);

  /* 间距体系 Spacing System（8px 基础阶梯：4/8/12/16/24/32/40/48/64/80/96/120/160） */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-160: 160px;

  /* 中间档位：对齐 8px 阶梯的最近标准值（保证全部尺寸走网格体系） */
  --space-2: 4px;
  --space-6: 8px;
  --space-10: 12px;
  --space-14: 16px;
  --space-18: 16px;
  --space-20: 24px;
  --space-28: 32px;
  --space-36: 32px;
  --space-56: 48px;
  --space-72: 64px;

  /* 布局 Layout */
  --container-pad: 152px;
  --header-h: 56px;

  /* 动效缓动 Motion Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-primary);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
  color: inherit;
}

/* ---------- 无障碍焦点 Focus（WCAG AA，禁止 outline: none 无替代） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 布局 Layout ---------- */
/* 页面统一左右页边距：152px（大屏内容不被 max-width 二次收窄，保证边缘间隙一致） */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--space-96) 0;
}

.section--alt {
  background: var(--bg-secondary);
}

/* ---------- 文字排版 Typography ---------- */
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-56);
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--space-14);
}

.section-title {
  font-size: clamp(var(--fs-h3), 4vw, var(--fs-h2));
  font-weight: var(--fw-600);
  line-height: var(--lh-h2);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-16);
}

.section-desc {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
}

.section-head.center .section-desc {
  margin: 0 auto;
}

/* 强调文字：品牌红（克制，不做渐变色） */
.text-gradient {
  color: var(--brand-600);
}

/* ---------- 按钮 Button System ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: var(--fw-600);
  line-height: var(--lh-body-sm); /* 14 + 8 */
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
}

/* Primary：品牌红底 + 白字 */
.btn--primary {
  background: var(--brand-600);
  color: var(--text-inverse);
}
.btn--primary:hover {
  background: var(--brand-700);
}

/* Secondary：透明底 + 品牌红描边 */
.btn--secondary {
  background: transparent;
  color: var(--brand-600);
  border: 1.5px solid var(--brand-600);
}
.btn--secondary:hover {
  background: var(--brand-50);
}

/* Ghost：无边框文字按钮 */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  color: var(--brand-600);
}

/* Light：深色反差区域上的次要按钮（白描边） */
.btn--light {
  background: transparent;
  color: var(--text-inverse);
  border: 1.5px solid var(--text-inverse);
}
.btn--light:hover {
  background: var(--text-inverse);
  color: var(--brand-600);
}

.btn--lg {
  padding: 9px 16px;
  font-size: 14px;
}

/* ---------- 头部导航 Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  /* 默认即呈现与交互态一致的下划线（边框）与投影，与顶对齐 banner 形成分隔 */
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  border-color: var(--border-default);
  box-shadow: var(--shadow-1);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  white-space: nowrap;
  font-size: var(--fs-h4);
  font-weight: var(--fw-700);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* 品牌标识：公司 LOGO
   原图 images/公司LOGO.png 为 2656×3368（方形印章 + 底部 iTrusChina 英文），
   整幅等比缩放显示（不裁切），高度 46px → 宽度 46 × 2656/3368 ≈ 36px；
   brightness 用于整体提升明度，避免印章在白色头部显暗 */
.brand-mark {
  width: 36px;
  height: 46px;
  flex: none;
  background-image: url("../images/公司LOGO.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: brightness(1.2);
}

/* 头部 LOGO：菜单栏 56px 下缩至宽 28px（等比 → 高 35.5px），页脚保持原尺寸 */
.site-header .brand-mark {
  width: 28px;
  height: 35.5px;
}

.brand span.en {
  color: var(--text-tertiary);
  font-weight: var(--fw-600);
  font-size: var(--fs-body-sm);
  margin-left: var(--space-2);
}

/* 品牌标语：LOGO 内已含「天威诚信」字标，标语按次级信息处理，
   避免与标识重复、并防止长标语在窄桌面宽度下撑破头部 */
.brand-tagline {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-600);
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--text-secondary);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.main-nav a {
  position: relative;
  padding: var(--space-10) var(--space-16);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-500);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

.main-nav a:hover {
  color: var(--text-primary);
}

.main-nav a.active {
  color: var(--brand-600);
  font-weight: var(--fw-600);
}

/* Active 指示器：2px 底部线（不依赖颜色 alone） */
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: var(--space-16);
  right: var(--space-16);
  bottom: var(--space-2);
  height: 2px;
  border-radius: 2px;
  background: var(--brand-600);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* 菜单栏右侧「获取方案」按钮：高度 32px */
.header-actions .btn {
  height: 32px;
  padding: 0 16px;
}

/* 联系电话（由顶部栏并入菜单导航栏） */
.header-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-right: var(--space-8);
}
.header-contact strong {
  font-weight: var(--fw-600);
  color: var(--brand-600);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 2px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ---------- 页脚 Footer ---------- */
.site-footer {
  background: var(--bg-inverse);
  color: var(--text-quaternary);
  padding: var(--space-72) 0 var(--space-32);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-40);
  margin-bottom: var(--space-48);
}

.footer-brand .brand {
  color: var(--text-inverse);
  margin-bottom: var(--space-16);
}

.footer-brand .brand .en {
  color: var(--text-quaternary);
}

.footer-brand p {
  max-width: 320px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-quaternary);
}

.footer-col h4 {
  color: var(--text-inverse);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-600);
  margin-bottom: var(--space-18);
}

.footer-col li {
  margin-bottom: var(--space-12);
}

.footer-col a {
  font-size: var(--fs-body-sm);
  color: var(--text-quaternary);
}
.footer-col a:hover {
  color: var(--text-inverse);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-28);
  border-top: 1px solid var(--border-inverse);
  font-size: var(--fs-body-sm);
  color: var(--text-quaternary);
  flex-wrap: wrap;
}

.footer-bottom a {
  color: var(--text-quaternary);
}
.footer-bottom a:hover {
  color: var(--text-inverse);
}

/* ---------- 通用组件 Components ---------- */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-brand);
}

.icon-box {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
  margin-bottom: var(--space-20);
}

.icon-box svg {
  width: 26px;
  height: 26px;
}

.card h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-600);
  line-height: var(--lh-h4);
  margin-bottom: var(--space-10);
}

.card p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-weight: var(--fw-600);
  color: var(--brand-600);
  font-size: var(--fs-body-sm);
}

.link-more svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}
.link-more:hover {
  color: var(--brand-700);
}
.link-more:hover svg {
  transform: translateX(4px);
}

/* ---------- 滚动进入动画 Motion（Fade Up） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 响应式容器边距（桌面 152px 大边距，移动端按 8px 阶梯收窄） ---------- */
@media (max-width: 1280px) {
  :root { --container-pad: 64px; }
}
@media (max-width: 1024px) {
  :root { --container-pad: 48px; }
}
@media (max-width: 768px) {
  :root { --container-pad: 24px; }
}

/* ---------- 页头横幅（子页通用 Page Hero） ---------- */
.page-hero {
  padding: var(--space-96) 0 var(--space-72);
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(209, 25, 26, 0.05), transparent 60%),
    var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
}

.page-hero h1 {
  font-size: clamp(var(--fs-h2), 5vw, var(--fs-h1));
  font-weight: var(--fw-600);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-14);
}

.page-hero p {
  max-width: 560px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-18);
}

.breadcrumb a:hover {
  color: var(--brand-600);
}

/* ---------- 响应式 Responsive ---------- */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-32);
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-80) 0;
  }

  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-2);
    display: none;
    padding: var(--space-12) var(--space-24) var(--space-24);
  }

  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .main-nav a {
    padding: var(--space-14) var(--space-12);
    border-radius: var(--radius-md);
  }

  .main-nav a.active::after {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-contact {
    display: none;
  }

  .header-actions .btn {
    display: none;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   在线咨询浮层 Consult Widget（全站通用）
   默认/悬浮/选中：按钮距右 24px、距底 96px（三态位置一致，不发生位移）
   选中态：弹窗与按钮底对齐、水平间距 16px
   ========================================================================== */

/* 定位容器：尺寸即悬浮按钮（46×120）；三态位置一致，与选中态红色背板重合 */
.consult-widget {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 90;
  width: 46px;
  height: 120px;
}

/* ---- 选中态外扩的两层背景（默认/悬浮态隐藏） ---- */
.consult-widget-layer {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

/* 外层底部：#FFEBF0 25%，76×152，胶囊形（76/2=38px） */
.consult-widget-layer--outer {
  left: -15px;
  top: -16px;
  width: 76px;
  height: 152px;
  border-radius: 38px;
  background: rgba(255, 235, 240, 0.25);
}

/* 中层：#FFD9DF，60×136，胶囊形（60/2=30px） */
.consult-widget-layer--middle {
  left: -7px;
  top: -8px;
  width: 60px;
  height: 136px;
  border-radius: 30px;
  background: #FFD9DF;
}

.consult-widget.is-open .consult-widget-layer {
  opacity: 1;
}

/* ---- 悬浮按钮 46×120 ---- */
.consult-widget-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px; /* icon 与下方文字间距 8px */
  width: 46px;
  height: 120px;
  border: 1px solid #FFFFFF;
  border-radius: 23px; /* 胶囊形：宽度 46px 的一半 */
  background: #FFFFFF;
  /* 默认投影（双投影）：#232A33 / 8% / x0 y4 blur12 + x0 y6 blur20 */
  box-shadow: 0 4px 12px rgba(35, 42, 51, 0.08), 0 6px 20px rgba(35, 42, 51, 0.08);
  color: var(--text-secondary); /* 常规正文色 */
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.consult-widget-btn:hover {
  background: #F7F8FA;
}

/* 选中态：上 #FF1D24 → 下 #D1191A + 双侧白色投影（±5px / blur12） */
.consult-widget.is-open .consult-widget-btn {
  border-color: transparent;
  background: linear-gradient(180deg, #FF1D24 0%, #D1191A 100%);
  box-shadow: -5px -5px 12px #FFFFFF, 5px 5px 12px #FFFFFF;
  color: #FFFFFF;
}

/* 按钮 icon 36×36：原图 145px 画布、可见内容 79×80 居中，
   按 66px 显示（36/79×145≈66）并居中裁掉透明边，得 36px 可见图形 */
.consult-widget-ico {
  flex: none;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66px 66px;
  background-image: url("../images/咨询弹窗/icon_悬浮按钮_默认状态.png");
}

.consult-widget.is-open .consult-widget-ico {
  background-image: url("../images/咨询弹窗/icon_悬浮按钮_选中状态.png");
}

/* 竖排文字：12px / regular */
.consult-widget-text {
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: var(--fw-400);
  line-height: 1;
  letter-spacing: 0;
}

/* ---- 咨询弹窗 360×420 ---- */
.consult-popup {
  position: absolute;
  right: 62px; /* 按钮宽 46 + 间距 16 */
  bottom: 0; /* 与按钮底对齐 */
  width: 360px;
  height: 420px;
  padding: 32px 32px 48px;
  background-color: #FFFFFF;
  /* 原图 392×441，弹窗面板实体 360×420 位于图片左上角 */
  background-image: url("../images/背景/6_咨询弹窗背景_360_420.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 392px 441px;
  border-radius: 8px; /* 卡片圆角 8px */
  overflow: hidden; /* 裁掉背景图超出圆角的部分 */
  /* 卡片投影：#171A1F / 10% / x0 y12 blur28 */
  box-shadow: 0 12px 28px rgba(23, 26, 31, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease);
}

.consult-widget.is-open .consult-popup {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---- 居中弹层模式：由页面内按钮（页头「获取方案」、合作咨询「立即咨询」）触发时，
        弹窗脱离悬浮按钮、在屏幕正中央弹出，并铺一层遮罩 ----
   仅追加状态类，悬浮按钮自身的「贴按钮展开」形态不受影响 */
.consult-widget.is-center {
  /* 遮罩需盖住吸顶页头（.site-header 为 100），故整体提升层级 */
  z-index: 110;
}

/* 遮罩：铺满视口，仅居中模式下出现 */
.consult-widget.is-center::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.45); /* 与 Modal Overlay 规范一致 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}

.consult-widget.is-center.is-open::before {
  opacity: 1;
  visibility: visible;
}

/* 居中定位用 translate(-50%, -50%) 表达，隐藏态在此基础上下移 12px 作为入场位移 */
.consult-widget.is-center .consult-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 2; /* 位于遮罩之上 */
  transform: translate(-50%, calc(-50% + 12px));
}

.consult-widget.is-open.is-center .consult-popup {
  transform: translate(-50%, -50%);
}

.consult-popup-close {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--text-tertiary);
  transition: color 0.2s var(--ease);
}

.consult-popup-close:hover {
  color: var(--text-primary);
}

.consult-popup-close svg {
  width: 16px;
  height: 16px;
}

/* 标题区：icon 44px + 与标题间距 8px；标题与辅助文案间距 0px（共 44px 高，与 icon 齐平） */
.consult-popup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
}

.consult-popup-head-ico {
  flex: none;
  width: 44px;
  height: 44px;
  background: url("../images/咨询弹窗/icon_弹窗_售前咨询.png") center / contain no-repeat;
}

.consult-popup-title {
  font-size: 16px;
  font-weight: var(--fw-400);
  line-height: 24px;
  color: var(--text-primary); /* 常规标题色 */
}

.consult-popup-sub {
  font-size: 12px;
  font-weight: var(--fw-400);
  line-height: 20px;
  color: var(--text-tertiary); /* 辅助文案色 */
}

/* 表单：标题距首个输入框 32px */
.consult-form {
  margin-top: 32px;
}

/* 输入框：296×36（咨询内容框高 56）、#FAFCFE、描边 1px、圆角 4px、内边距 16px */
.consult-field {
  display: flex;
  align-items: center;
  gap: 20px; /* 内部 icon 与文字间距 20px */
  width: 100%;
  height: 36px;
  padding: 0 16px;
  margin-bottom: 12px; /* 输入框之间间距 12px */
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: #FAFCFE;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.consult-field:focus-within {
  border-color: var(--brand-600);
  background: #FFFFFF;
}

/* 咨询内容框高 56px；其下间距交由按钮的 24px 决定，故去掉输入框之间的 12px */
.consult-field--area {
  align-items: flex-start; /* 多行输入：图标不再整体居中，改为与首行文字居中对齐 */
  height: 56px;
  margin-bottom: 0;
}

/* 内容框内的图标与首行文字居中对齐：
   首行文字距输入框顶部 8px（1px 描边 + 7px 内边距）、行高 20px → 行中心距顶 18px；
   图标 16px（含 1px 描边起点）→ 上边距 9px 时图标中心正好落在 18px */
.consult-field--area .consult-field-ico {
  margin-top: 9px;
}

/* 输入框内部 icon 16×16：原图 40px 画布、可见内容 32px（四周留白 4px），
   按 20px 显示后居中裁切，可见图形正好 16px */
.consult-field-ico {
  flex: none;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.consult-field-ico--name {
  background-image: url("../images/咨询弹窗/icon_弹窗_姓名.png");
}
.consult-field-ico--tel {
  background-image: url("../images/咨询弹窗/icon_弹窗_电话.png");
}
.consult-field-ico--company {
  background-image: url("../images/咨询弹窗/icon_弹窗_公司.png");
}
.consult-field-ico--content {
  background-image: url("../images/咨询弹窗/icon_弹窗_内容.png");
}

.consult-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--fw-400);
  line-height: 20px;
  color: var(--text-secondary); /* 输入文案：常规正文色 */
}

/* 焦点态由外层 .consult-field:focus-within 呈现，此处不再叠加默认描边 */
.consult-input:focus-visible {
  outline: none;
}

.consult-input::placeholder {
  color: var(--text-tertiary); /* 辅助文案色 */
  opacity: 1;
}

.consult-textarea {
  height: 54px;
  padding: 7px 0; /* 首行文案距输入框顶部 8px（1px 描边 + 7px 内边距），不再垂直居中 */
  resize: none;
}

/* 按钮：296×40、#D1191A、白字（与上方输入框间距 24px） */
.consult-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 24px;
  border-radius: 4px;
  background: var(--brand-600);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: var(--fw-400);
  line-height: 20px;
  transition: background 0.2s var(--ease);
}

.consult-submit:hover {
  background: var(--brand-700);
}

/* 提交结果提示（成功 / 校验失败 / 网络异常）：空态不占位 */
.consult-msg {
  display: none;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--text-tertiary);
}

.consult-msg.is-ok,
.consult-msg.is-err {
  display: block;
}

.consult-msg.is-ok {
  color: #15803D;
}

.consult-msg.is-err {
  color: var(--brand-600);
}

/* 出现提示文案时收窄按钮上间距，避免表单留白过大 */
.consult-msg.is-ok + .consult-submit,
.consult-msg.is-err + .consult-submit {
  margin-top: 14px;
}

/* 提交中：按钮置灰并禁止重复点击 */
.consult-submit:disabled {
  background: var(--brand-300);
  cursor: not-allowed;
}

/* ---- 响应式：窄屏下弹窗移到按钮上方，避免超出视口 ---- */
@media (max-width: 560px) {
  .consult-widget,
  .consult-widget.is-open {
    right: 8px;
    bottom: 88px;
  }

  .consult-popup {
    right: 0;
    bottom: calc(100% + 12px);
  }
}

/* ==========================================================================
   截断文本 · 悬浮气泡提示（全站通用）
   说明：文案较多被裁切隐藏（单行省略号 / 多行 line-clamp）时，
        鼠标悬浮到该元素上，用气泡展示完整内容。
   例外：解决方案卡片（悬浮态 / 选中态）的标题与正文不做提示。
   ========================================================================== */
.trunc-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  max-width: 480px;
  padding: 10px 12px;
  border-radius: 6px;
  /* 半透明毛玻璃背板（非纯黑实底）：透出背后内容并做模糊 */
  background: rgba(17, 24, 39, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-inverse);
  font-size: var(--fs-body-sm); /* 14 */
  font-weight: var(--fw-400);
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}

.trunc-tip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 源文本为多行排版（white-space: pre-line）时，气泡内保留同样的换行结构与首行缩进 */
.trunc-tip.is-pre {
  white-space: pre-line;
  text-indent: 2em;
}