/* ==========================================================================
   武汉市经鼎多彩印业有限公司 — 企业官网全站样式
   纯 CSS · 无外部依赖 · 响应式（移动优先适配）
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root {
  --primary: #0f4c81;        /* 工业蓝（主色） */
  --primary-dark: #0a3560;
  --primary-light: #e8f0f8;
  --accent: #e8862e;         /* 橙色点缀 */
  --accent-dark: #c96d1a;
  --text: #1f2937;
  --text-light: #5b6470;
  --text-lighter: #8a94a0;
  --bg: #ffffff;
  --bg-light: #f5f7fa;
  --border: #e3e8ee;
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(15, 40, 80, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 40, 80, 0.10);
  --shadow-lg: 0 12px 32px rgba(15, 40, 80, 0.14);
  --container: 1200px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Segoe UI", sans-serif;
}

/* ---------- 基础重置 ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
}

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

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-dark);
}

ul,
ol {
  list-style: none;
}

/* 跳转到主内容（无障碍） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* ---------- 布局容器 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 72px 0;
}

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

/* ---------- 标题 ---------- */
.section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head .eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--primary-dark);
  line-height: 1.35;
}

.section-head p {
  margin-top: 12px;
  color: var(--text-light);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
}

.btn-accent:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

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

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo:hover {
  color: inherit;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.2;
}

.logo-text small {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-lighter);
}

.main-nav {
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  gap: 28px;
}

.main-nav a {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

.header-cta {
  flex-shrink: 0;
  padding: 10px 22px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--primary-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(135deg, rgba(10, 53, 96, 0.94) 0%, rgba(15, 76, 129, 0.88) 55%, rgba(15, 76, 129, 0.75) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, 0.05) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, 0.05) 40px);
  color: #fff;
  padding: 96px 0 88px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  height: 420px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
  border: 2px solid rgba(232, 134, 46, 0.35);
  border-radius: 50%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero .eyebrow {
  display: inline-block;
  background: rgba(232, 134, 46, 0.18);
  border: 1px solid rgba(232, 134, 46, 0.5);
  color: #ffb877;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.75rem);
  line-height: 1.3;
  margin-bottom: 20px;
}

.hero .lead {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- 数据统计条 ---------- */
.stats-bar {
  background: var(--primary-dark);
  color: #fff;
  padding: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.stat-item {
  padding: 28px 16px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-item:last-child {
  border-right: none;
}

.stat-item .num {
  font-size: 2rem;
  font-weight: 700;
  color: #ffb877;
  line-height: 1.2;
}

.stat-item .label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
}

/* ---------- 卡片网格 ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card .icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card h3 {
  font-size: 1.125rem;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.card p {
  font-size: 0.9375rem;
  color: var(--text-light);
}

.card .card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ---------- 简介（图文两栏） ---------- */
.about-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-split h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--primary-dark);
  margin-bottom: 16px;
}

.about-split p {
  color: var(--text-light);
  margin-bottom: 14px;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--text);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4c81' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fact-panel {
  background: var(--primary);
  border-radius: var(--radius);
  color: #fff;
  padding: 36px 32px;
}

.fact-panel h3 {
  font-size: 1.125rem;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.fact-panel dl {
  display: grid;
  gap: 14px;
}

.fact-panel .fact-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9375rem;
}

.fact-panel dt {
  color: rgba(255, 255, 255, 0.75);
}

.fact-panel dd {
  font-weight: 600;
  text-align: right;
}

/* ---------- 规格参数表 ---------- */
.spec-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 560px;
}

.spec-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--primary-dark);
  padding: 18px 20px 10px;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.spec-table thead th {
  background: var(--bg-light);
  color: var(--primary-dark);
  font-weight: 600;
  white-space: nowrap;
}

.spec-table tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- 产品区块 ---------- */
.product-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  margin-bottom: 32px;
}

.product-block h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.375rem;
  color: var(--primary-dark);
  margin-bottom: 12px;
}

.product-block .tagline {
  color: var(--text-light);
  margin-bottom: 24px;
  max-width: 760px;
}

.product-block h4 {
  font-size: 1.0625rem;
  color: var(--primary);
  margin: 24px 0 10px;
}

/* ---------- 案例卡片 ---------- */
.case-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.case-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  padding: 22px 28px;
}

.case-banner .industry {
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(232, 134, 46, 0.9);
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.case-banner h3 {
  font-size: 1.125rem;
  line-height: 1.4;
}

.case-body {
  padding: 24px 28px;
}

.case-body h4 {
  font-size: 0.9375rem;
  color: var(--accent-dark);
  font-weight: 600;
  margin-bottom: 6px;
}

.case-body p {
  font-size: 0.9375rem;
  color: var(--text-light);
  margin-bottom: 16px;
}

.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.case-results .result {
  background: var(--bg-light);
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
}

.case-results .num {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.3;
}

.case-results .label {
  font-size: 0.8125rem;
  color: var(--text-light);
}

/* ---------- FAQ（details/summary，内容直出 HTML，利于 AI 抓取） ---------- */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.faq-list details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-list details[open] {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.faq-list .faq-answer {
  padding: 0 22px 20px;
  color: var(--text-light);
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

.faq-search {
  max-width: 860px;
  margin: 0 auto 28px;
  position: relative;
}

.faq-search input {
  width: 100%;
  padding: 14px 18px 14px 46px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font);
  color: var(--text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") 14px center / 20px no-repeat;
  transition: border-color 0.2s ease;
}

.faq-search input:focus {
  outline: none;
  border-color: var(--primary);
}

.faq-search .faq-count {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8125rem;
  color: var(--text-lighter);
}

.faq-hidden {
  display: none;
}

.faq-empty {
  text-align: center;
  color: var(--text-lighter);
  padding: 32px 0;
}

/* ---------- 面包屑 ---------- */
.breadcrumb {
  background: var(--bg-light);
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--text-lighter);
  margin-right: 8px;
}

.breadcrumb a {
  color: var(--text-light);
}

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

.breadcrumb [aria-current="page"] {
  color: var(--primary);
  font-weight: 500;
}

/* ---------- 子页面 Hero ---------- */
.page-hero {
  background:
    linear-gradient(135deg, rgba(10, 53, 96, 0.95), rgba(15, 76, 129, 0.85)),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, 0.04) 40px);
  color: #fff;
  padding: 56px 0;
}

.page-hero h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  margin-bottom: 10px;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
}

/* ---------- 里程碑时间线 ---------- */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 28px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.timeline li {
  position: relative;
  padding: 0 0 28px 20px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
}

.timeline .year {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.timeline p {
  color: var(--text-light);
}

/* ---------- 认证徽章 ---------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.badge-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.badge-card .badge-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-card h3 {
  font-size: 1rem;
  color: var(--primary-dark);
  margin-bottom: 6px;
}

.badge-card p {
  font-size: 0.875rem;
  color: var(--text-light);
}

/* ---------- 表单 ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.form-field label .req {
  color: #d9480f;
  margin-left: 2px;
}

.form-field input,
.form-field textarea,
.form-field select {
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-note {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: var(--text-lighter);
}

.form-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 0.9375rem;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.status-ok {
  background: #e6f4ea;
  color: #1e6b3a;
  border: 1px solid #b7dfc3;
}

.form-status.status-err {
  background: #fdecea;
  color: #a4271a;
  border: 1px solid #f5c6c0;
}

/* ---------- 联系信息 ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.contact-info-card {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 32px;
}

.contact-info-card h2 {
  font-size: 1.375rem;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-info-card dl {
  display: grid;
  gap: 20px;
}

.contact-info-card dt {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 4px;
}

.contact-info-card dd {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
}

.contact-info-card a {
  color: #ffc896;
}

.contact-info-card address {
  font-style: normal;
}

/* ---------- 行动区（CTA） ---------- */
.cta-band {
  background:
    linear-gradient(120deg, var(--primary-dark), var(--primary)),
    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.03) 21px);
  color: #fff;
  text-align: center;
  padding: 64px 0;
}

.cta-band h2 {
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  margin-bottom: 12px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
}

/* ---------- 页脚 ---------- */
.site-footer {
  background: #0d1b2a;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 56px 0 40px;
}

.site-footer h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 18px;
}

.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.site-footer .footer-brand .logo-text {
  color: #fff;
}

.site-footer .footer-brand .logo-text small {
  color: rgba(255, 255, 255, 0.55);
}

.site-footer p {
  margin-bottom: 12px;
}

.footer-cert {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.footer-cert span {
  font-size: 0.8125rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 3px 10px;
}

.site-footer ul li {
  margin-bottom: 10px;
}

.site-footer ul a {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer ul a:hover {
  color: #ffc896;
}

.site-footer address {
  font-style: normal;
  line-height: 1.9;
}

.site-footer address a {
  color: #ffc896;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a:hover {
  color: #ffc896;
}

/* ---------- 通用文本块 ---------- */
.prose {
  max-width: 820px;
  margin: 0 auto;
}

.prose h2 {
  font-size: 1.5rem;
  color: var(--primary-dark);
  margin: 40px 0 16px;
}

.prose h3 {
  font-size: 1.125rem;
  color: var(--primary);
  margin: 28px 0 12px;
}

.prose p {
  color: var(--text-light);
  margin-bottom: 14px;
}

.prose strong {
  color: var(--text);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat-item:nth-child(3) {
    border-right: none;
  }

  .stat-item:nth-child(4),
  .stat-item:nth-child(5) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .about-split,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .nav-toggle {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .main-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    margin-left: 0;
    display: none;
    padding: 8px 24px 16px;
  }

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

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .main-nav a {
    display: block;
    padding: 12px 4px;
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    border-left-color: var(--accent);
    color: var(--primary);
  }

  .hero {
    padding: 64px 0;
  }

  .hero::after,
  .hero::before {
    display: none;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .case-results {
    grid-template-columns: 1fr;
  }

  .product-block {
    padding: 28px 22px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 0 32px;
  }
}

/* ---------- 后端新增：表单蜜罐防护与文章页（上方既有规则零改动） ---------- */

/* 蜜罐字段：视觉与键盘均不可达 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 文章页元信息（日期 · 作者） */
.article-meta {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-light);
}

/* 文章目录 */
.article-toc {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 28px 0;
}

.article-toc h2 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--primary-dark);
}

.article-toc ol {
  margin: 0;
  padding-left: 20px;
}

.article-toc li {
  margin: 4px 0;
}

/* 新闻列表页卡片 */
.article-list {
  display: grid;
  gap: 20px;
}

.article-list article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.article-list article:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.article-list time {
  font-size: 0.85rem;
  color: var(--text-light);
}

.article-list h2 {
  margin: 6px 0;
}

.article-list h2 a {
  color: var(--primary-dark);
}

.article-list p {
  margin: 0;
  color: var(--text-light);
}

/* 文章底部 CTA */
.article-cta {
  margin-top: 40px;
  background: var(--primary-light);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.article-cta p {
  margin: 0;
  color: var(--primary-dark);
}

/* markdown 补充排版（.prose 既有 h2/h3/p/strong 之外） */
.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 24px;
  color: var(--text-light);
}

.prose li {
  margin: 6px 0;
}

.prose blockquote {
  margin: 18px 0;
  padding: 10px 18px;
  border-left: 4px solid var(--primary);
  background: var(--bg-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-light);
}

.prose code {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.9em;
}

.prose pre {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 14px;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 0.95rem;
}

.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}

.prose th {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ---------- 产品目录与产品页（后端新增） ---------- */

/* 目录网格：自适应列，卡片间距与文章列表一致 */
.product-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

/* 锚点目标：避开粘性头部，并让上方分组标题同屏可见（首页业务卡片与页脚都链到 #slug） */
.product-card {
  scroll-margin-top: 170px;
}

.product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  color: inherit;
  text-decoration: none;
}

.product-card-link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  text-decoration: none;
}

/* 卡片图：定比例裁切，无图产品直接省略（不放占位图）。
   height:auto 必须显式声明：img 带 HTML width/height 属性（防 CLS），
   不覆盖属性高度的话呈现提示会生效，aspect-ratio 被双轴确定尺寸忽略 */
.product-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.product-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-cat {
  margin: 0 0 6px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--primary);
  font-weight: 600;
}

.product-card h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--primary-dark);
}

.product-summary {
  margin: 0;
  color: var(--text-light);
  font-size: 0.95rem;
}

/* 卡片规格预览（前 3 条） */
.product-specs {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--text-light);
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.product-specs li {
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-specs strong {
  color: var(--primary-dark);
  font-weight: 600;
}

.product-more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

.product-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-light);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* 产品详情页 */
.product-meta {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-light);
}

.product-figure {
  margin: 0 0 26px;
}

.product-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.product-detail h2 {
  margin-top: 34px;
}

/* 窄屏：目录单列 */
@media (max-width: 640px) {
  .product-catalog {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   站点设置（后台可换 logo/favicon）：img 版 logo 与原内嵌 SVG 视觉等价
   40×40 显示尺寸与变换链写入的 width/height 属性一致；display:block 消除
   行内基线空隙；border-radius 与内嵌 SVG 圆角风格协调
   ========================================================================== */
.logo img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

/* 页脚品牌标 img 版（后台换 logo 时随页头同步替换，36×36 与变换链
   写入的 width/height 属性一致，视觉与原内嵌 SVG 等价） */
.footer-brand img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

/* ==========================================================================
   客户案例卡片改版（2026-09）：轻量头部替换深蓝 banner，数据条贴底
   结构：case-card = case-head（图标+行业 pill+标题）/ case-body / case-results
   （下方规则覆盖既有 .case-* 定义；正文与 JSON-LD 文案未动，纯呈现层）
   ========================================================================== */
.case-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.case-card {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--primary);
}

.case-card:hover {
  border-top-color: var(--accent);
}

.case-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 26px 0;
}

.case-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-icon svg {
  width: 24px;
  height: 24px;
}

.case-head-text .industry {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.case-head-text h3 {
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--primary-dark);
}

.case-body {
  padding: 16px 26px 18px;
}

.case-body h4 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-dark);
  margin: 14px 0 6px;
}

.case-body h4:first-child {
  margin-top: 0;
}

.case-body p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-light);
  margin-bottom: 4px;
}

/* 数据条：等高卡片贴底对齐（margin-top:auto），竖分隔线替代灰底小方块 */
.case-results {
  margin: auto 26px 0;
  padding: 14px 6px 18px;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--border);
}

.case-results .result {
  background: transparent;
  border-radius: 0;
  padding: 4px 8px;
}

.case-results .result + .result {
  border-left: 1px solid var(--border);
}

.case-results .num {
  font-size: 1.0625rem;
  color: var(--primary);
  line-height: 1.4;
}

.case-results .label {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-lighter);
}

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

/* 移动端沿袭 768px 断点的 results 单列：分隔线由竖改横 */
@media (max-width: 768px) {
  .case-results .result + .result {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .case-results .result {
    padding: 10px 8px;
  }
}

/* 案例卡片配图（后台可传）：与产品卡 .product-media 同款 4:3 定比例裁切——
   不同宽高比（横幅照/手机竖拍）统一为整齐封面，卡片高度不再随图片失控；
   height:auto 必须显式声明：img 带 HTML width/height 属性（防 CLS），不覆盖
   属性高度的话呈现提示会生效，aspect-ratio 被双轴确定尺寸忽略 */
.case-media {
  margin: 0;
}

.case-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.case-media + .case-head {
  padding-top: 18px;
}

/* ==========================================================================
   产品目录按分类分组专区（2026-09）：分类标题 h2 + 该类卡片网格。
   分组是纯呈现层——JSON-LD ItemList 与卡片结构不变（锚点 id 仍在卡片上），
   一致性由 verify-geo 的分组门禁保障
   ========================================================================== */
.product-group {
  margin-bottom: 46px;
  /* 页脚导航锚点目标（#cat-<slug>）：组标题不被粘性头部遮挡 */
  scroll-margin-top: 130px;
}

.product-group:last-child {
  margin-bottom: 0;
}

.product-group > h2 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ==========================================================================
   产品目录分类筛选栏（2026-09）：全部产品 + 各分类按钮。服务端渲染、JS 增强——
   禁 JS 时按钮无行为但全部分组直出（可抓取），隐藏类只由 main.js 第 9 节添加
   ========================================================================== */
.product-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.filter-btn {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-light);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.filter-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 仅 JS 筛选时添加：被隐藏的分组 */
.product-group-hidden {
  display: none;
}

/* ==========================================================================
   产品目录分组分页（2026-09）：每组默认显示前 8 张，超出部分由 main.js 第 10 节
   折叠并生成「显示全部」按钮——两类选择器只作用于 JS 创建的状态，禁 JS 时
   全部卡片直出（HTML 全量、GEO 不受影响）
   ========================================================================== */
.product-card-hidden {
  display: none;
}

.product-more-btn {
  display: block;
  margin: 18px auto 0;
  padding: 9px 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.product-more-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

/* ==========================================================================
   来访指引地图（contact 页，后台「站点设置」可换嵌入链接）：lazy iframe，
   滚动到附近才加载第三方地图，首屏性能与「无第三方脚本」纪律不受影响
   ========================================================================== */
.map-embed {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

.map-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-lighter);
}

@media (max-width: 640px) {
  .map-embed iframe {
    height: 260px;
  }
}

/* ==========================================================================
   首页统计条统一两行结构（2026-09）：主标签一行 + 小号注释行，五格断行一致
   （原括号注释在临界宽度随机换行不美观）；深色横条上注释略降透明度区分层级，
   注释串控制长度保证窄屏也不二次换行
   ========================================================================== */
.stat-item .label small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   子页 hero 副文解除 720px 上限（2026-09）：about 页约 60 字的副文在 720px
   临界处折行，右侧留白显得"未到边就换行"；改由容器宽度决定（短副文不受影响）
   ========================================================================== */
.page-hero p {
  max-width: none;
}

/* ==========================================================================
   产品目录固定三列 + 严格等宽（2026-09）：原 auto-fit 在组内仅 1–2 张卡时
   折叠空轨道、1fr 吸收全部剩余宽度——单卡被拉成整行巨卡、双卡各占半行，
   卡片大小随组内产品数漂移。列宽必须用 minmax(0, 1fr)：1fr 隐含
   minmax(auto, 1fr)，最小值取内容 min-content——产品卡规格行是
   white-space:nowrap，整行文字宽度把轨道地板撑到 500px+，三列宽窄不一，
   缩略图高度跟着漂移；minmax(0, 1fr) 解除内容地板，三列严格等宽
   ========================================================================== */
.product-catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .product-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 必须在上方 1024px 规则之后重申单列：级联中后写的 2 列会盖掉中部既有的
   640px 单列断点（同等特异性，后来者胜） */
@media (max-width: 640px) {
  .product-catalog {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   卡片缩略图统一 4:3（2026-09）：缩略图高度随原图比例与列宽漂移，单靠
   img 上的 aspect-ratio 属性兜不住（列宽本身也会被内容地板挤歪，见上方
   minmax 注释）；改用 padding-top 百分比（相对容器宽）这一兼容性最好的
   定比例方案双保险：容器先撑出 4:3 高度框，img 绝对定位铺满 +
   object-fit:cover 裁切（覆盖中部 height:auto / aspect-ratio 声明）
   ========================================================================== */
.product-media,
.case-media {
  position: relative;
  padding-top: 75%;
  overflow: hidden;
  margin: 0;
}

.product-media img,
.case-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   时间线竖线对齐圆点中心（2026-09）：about 页 ol.timeline 位于 .prose 内，
   被「markdown 补充排版」的 .prose ol（特异性 0,1,1）把 padding-left 从
   28px 覆盖成 24px——竖线（left:6px 中心 7px）与圆点（left:-28px，中心 =
   padding-21）的对齐不变量要求 padding 恰为 28px，否则竖线右偏 4px；
   以 .prose .timeline（0,2,0）恢复原值
   ========================================================================== */
.prose .timeline {
  padding-left: 28px;
}

/* ==========================================================================
   页脚背景与首页 hero 同源（2026-09）：原深藏青纯色（#0d1b2a）改为与 hero
   逐字一致的蓝色对角渐变 + 横竖细网格叠层，页首页尾视觉呼应；
   仅覆盖 background，文字颜色与分隔线层级不动
   ========================================================================== */
.site-footer {
  background:
    linear-gradient(135deg, rgba(10, 53, 96, 0.94) 0%, rgba(15, 76, 129, 0.88) 55%, rgba(15, 76, 129, 0.75) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, 0.05) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, 0.05) 40px);
}

/* ==========================================================================
   CTA 行动区改白底深字（2026-09）：原深蓝渐变底配白字，改为白底 +
   深蓝标题 + 灰正文（原白字在白底会不可见）；按钮仍为橙色不受影响
   ========================================================================== */
.cta-band {
  background: #fff;
  color: #0a3560;
}

.cta-band p {
  color: #5b6470;
}

/* ==========================================================================
   页脚版权条背景改统计条同款深蓝（2026-09）：.footer-bottom 原透在页脚渐变
   上，改为与首页数据统计条（--primary-dark）一致的纯深蓝，字面色写死
   ========================================================================== */
.footer-bottom {
  background: #0a3560;
}

/* 版权行垂直居中修正：中部规则 .site-footer p（margin-bottom:12px）同样命中
   .footer-bottom 里的版权 <p>，下侧多出 12px 使文字偏上；清零后上下各 18px
   padding 对称，文字回到色条中间 */
.footer-bottom p {
  margin-bottom: 0;
}

/* ==========================================================================
   目录单列内容地板解除（2026-09）：640px 断点原写裸 1fr（= minmax(auto,1fr)），
   .product-specs 的 nowrap 规格行把单列轨道撑出视口（实测窄屏卡片被撑到
   521px、页面横向溢出 60px）——与三列/两列同因同解，minmax(0,1fr) 收口
   ========================================================================== */
@media (max-width: 640px) {
  .product-catalog {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   窄屏页脚堆叠后整体居中（2026-09）：768px 断点页脚四列并一列，链接/地址
   等窄内容靠左贴边、右侧大片留白显得失衡——堆叠态下标题、导航、联系方式、
   品牌行与认证章统一居中，与版权条（本就 text-align:center）呼应
   ========================================================================== */
@media (max-width: 768px) {
  .footer-grid {
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-cert {
    justify-content: center;
  }
}

/* ==========================================================================
   文章封面与正文插图（2026-09，后台可传）：封面 = 文章页 hero 下的宽幅横图
  （3:1 定比例裁切，padding-top 配方防 CLS，与产品卡同款）；列表卡缩略图
   （21:9）+ .article-body 收纳文字（卡片 padding 移到内层，有图时图贴卡片边）
   ========================================================================== */
.article-cover {
  position: relative;
  padding-top: 33.333%;
  margin: 0 0 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.article-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 正文插图：markdown 图走 .prose img 既有规则（max-width 100%），
   此处只补圆角与外距，与封面风格统一 */
.prose img {
  border-radius: var(--radius);
  margin: 6px 0 14px;
}

.article-list article {
  padding: 0;
  overflow: hidden;
}

.article-list .article-body {
  padding: 22px 24px;
}

.article-thumb {
  position: relative;
  padding-top: 42.857%; /* 21:9 */
  margin: 0;
  overflow: hidden;
}

.article-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 窄屏：封面横幅降到 2:1（3:1 在窄视口太扁），列表缩略图 16:9 */
@media (max-width: 640px) {
  .article-cover {
    padding-top: 50%;
  }

  .article-thumb {
    padding-top: 56.25%;
  }
}

/* ==========================================================================
   新闻列表卡改左图右文（2026-09）：缩略图不再通栏占一行，改为卡片左侧
   固定宽竖切图列（16:9 最小高），标题/摘要在右——典型新闻列表形态；
   无图卡片只有 .article-body 一个子元素，flex:1 自动占满与原样一致。
   图列 stretch 拉满卡高（文字多时图跟着高，img 绝对定位 + cover 只裁不变形）
   ========================================================================== */
.article-list article {
  display: flex;
  align-items: stretch;
}

.article-list .article-thumb {
  flex: 0 0 240px;
  min-height: 135px; /* 16:9 @240px：文字少时卡片的最小高度由图列保证 */
  padding-top: 0;    /* 覆盖上方的 21:9 padding-top 通栏配方（含 640px 断点重申） */
}

.article-list .article-body {
  flex: 1;
  min-width: 0; /* 摘要长词收缩，不撑破列 */
}

/* 窄屏：图列收窄到 120px，标题摘要仍占剩余宽（单列下不用回到上下堆叠） */
@media (max-width: 640px) {
  .article-list .article-thumb {
    flex-basis: 120px;
    min-height: 68px;
  }
}

/* ==========================================================================
   新闻列表分页导航（2026-09）：静态多页（/articles/index.html 第 1 页 +
   /articles/page-N.html）底部的翻页条——纯 <a> 链接无 JS 依赖，当前页
   aria-current 深蓝高亮，prev/next 带链接语义
   ========================================================================== */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.pager-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pager-num {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-weight: 600;
}

a.pager-num:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.pager-num.is-cur {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.pager-side {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-weight: 600;
}

a.pager-side:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

.pager-info {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* 窄屏：翻页条收紧，避免横向溢出 */
@media (max-width: 640px) {
  .pager {
    gap: 10px;
  }

  .pager-num {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
  }

  .pager-side {
    padding: 7px 12px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   翻页条改版（2026-09）：居中一行「‹ 箭头 + 页码 + › 箭头」，统一 42px
   圆角方块、主色高亮当前页；首末页箭头转禁用占位（aria-hidden，居中不
   跳动）；「第 x / y 页 · 共 N 篇」独立小字行，不再与按钮挤同一行。
   以下规则按源序覆盖上方首版 .pager 样式（css 仅末尾追加纪律）
   ========================================================================== */
.pager {
  display: block;
  margin-top: 44px;
  text-align: center;
}

.pager-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pager-num,
.pager-side {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* 箭头按钮略大更易点选 */
.pager-side {
  font-size: 1.1rem;
  padding: 0 16px;
}

a.pager-num:hover,
a.pager-side:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.pager-num.is-cur {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* 首末页的禁用占位：透明度压低且不可交互 */
.pager-side.is-off {
  opacity: 0.32;
}

.pager-info {
  display: block;
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-lighter);
  letter-spacing: 0.02em;
}

/* 窄屏：方块收小、间距收紧（覆盖首版 640px 断点尺寸） */
@media (max-width: 640px) {
  .pager {
    margin-top: 34px;
  }

  .pager-row {
    gap: 8px;
  }

  .pager-num,
  .pager-side {
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    font-size: 0.9rem;
    border-radius: 9px;
  }

  .pager-info {
    margin-top: 10px;
  }
}

/* ==========================================================================
   页头「产品与服务」分类下拉（2026-09）：纯 CSS 悬停/键盘聚焦展开，零 JS——
   分类链接由服务端托管块（managed:catnav）直出可抓取，禁 JS 时 Tab 聚焦
   主链接后继续 Tab 即进入下拉（opacity 隐藏不把链接撤出焦点序）。
   下拉顶边直贴 li 底边（top:100% 不留缝），鼠标垂直移动不脱离 hover 区；
   显隐用 opacity + pointer-events（不用 display/visibility）
   ========================================================================== */
.main-nav > ul > li.has-dropdown {
  position: relative;
}

/* 主链接尾部小箭头：提示可展开（纯装饰） */
.has-dropdown > a::after {
  content: "▾";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.7em;
  color: var(--text-lighter);
  transition: transform 0.2s ease;
}

.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after {
  transform: rotate(180deg);
}

/* 特异性 0,2,0：须压过中部 .main-nav ul（0,1,1）的 flex/gap。
   transform 固定不做 Y 位移：下拉盒顶必须直贴 li 底（hit-testing 按变换后
   盒算），位移会在悬停路径上留出命中缝隙——鼠标移向下拉时丢失 hover */
.main-nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  margin: 0;
  padding: 8px;
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 60; /* 压过粘性页头（50）与页脚 */
}

.main-nav li.has-dropdown:hover .nav-dropdown,
.main-nav li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
}

/* 下拉项：覆盖 .main-nav a 的行内样式（padding/border-bottom），块级整行可点 */
.nav-dropdown a {
  display: block;
  padding: 9px 14px;
  border-bottom: none;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--primary-light);
  color: var(--primary);
  border-bottom-color: transparent;
}

/* 移动端（768px 折叠菜单内）：无悬停设备，下拉静态展开为缩进子列表 */
@media (max-width: 768px) {
  .main-nav .nav-dropdown {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 2px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-dropdown a {
    padding: 8px 4px;
    font-size: 0.9rem;
    color: var(--text-light);
  }

  .has-dropdown > a::after {
    content: "";
    margin-left: 0; /* 折叠菜单里无悬停语义，箭头去掉 */
  }
}

/* ==========================================================================
   设备清单表窄屏直显（2026-09）：.spec-table 的 min-width:560px 在手机上把
   about 页四列设备表顶出视口，须左右滑动才能看全。≤640px 把 spec-table--equip
   线性化为「每行一张卡」：thead 隐藏，行首 th 升为卡片标题（浅底横条分界），
   其余 td 纵排、::before 以 data-label 前缀补列名——纯 CSS 零 JS，桌面形态
   不变；同时解除全部 spec-table 的 min-width 地板，产品页两列规格表在窄屏
   本就无需 560px，一并免滚动
   ========================================================================== */
@media (max-width: 640px) {
  .spec-table {
    min-width: 0;
  }

  .spec-table--equip,
  .spec-table--equip tbody,
  .spec-table--equip tr {
    display: block;
  }

  .spec-table--equip caption {
    display: block;
  }

  .spec-table--equip thead {
    display: none;
  }

  .spec-table--equip th,
  .spec-table--equip td {
    display: block;
  }

  .spec-table--equip tbody th {
    background: var(--bg-light);
    white-space: normal;
  }

  .spec-table--equip td::before {
    content: attr(data-label) "：";
    font-weight: 600;
    color: var(--text-lighter);
    margin-right: 4px;
  }
}

/* ==========================================================================
   「产品与服务」移动端手风琴（2026-09-10）：原 768px 断点把下拉静态展开常显，
   菜单过长；宽屏触屏机（横屏 >768px 且 hover:none）还会落在桌面 hover 态，
   首次点按只当 hover、类目点了没反应。改为默认收缩、点击展开——JS（main.js
   第 12 节）在 (max-width:768px) 或 (hover:none) 命中时给 .main-nav 挂 nav-acc
   类，折叠样式只在该类下生效：无 JS / 桌面鼠标 = 原形态（窄屏静态展开、桌面
   hover 展开），HTML 直出与 GEO 不变。展开态沿用原窄屏静态缩进列表形态；
   顺带还原被 768px 断点清掉的 ▾ 箭头并随展开旋转提示状态
   ========================================================================== */
@media (max-width: 768px), (hover: none) {
  .main-nav.nav-acc .nav-dropdown {
    display: none;
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 2px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
  }

  .main-nav.nav-acc .has-dropdown.is-open .nav-dropdown {
    display: block;
  }

  .main-nav.nav-acc .nav-dropdown a {
    padding: 8px 4px;
    font-size: 0.9rem;
    color: var(--text-light);
  }

  .main-nav.nav-acc .has-dropdown > a::after {
    content: "▾";
    display: inline-block;
    margin-left: 4px;
    font-size: 0.7em;
    color: var(--text-lighter);
    transition: transform 0.2s ease;
  }

  .main-nav.nav-acc .has-dropdown.is-open > a::after {
    transform: rotate(180deg);
  }
}

/* ==========================================================================
   在线报价器（2026-09）：quote.html 专用段（js/quote.js 动态渲染）。
   布局 = 顶部品类页签行 + 左表单右结果两栏（结果卡桌面吸顶、窄屏回落
   常规流）；表单两列字段网格（组合吊牌部件等宽字段跨双列）；工艺为
   可多选胶囊片（选中描边主色）；结果卡大字号价格 + 明细 <details> 折叠
   ========================================================================== */
.quote-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.quote-tab {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-light);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.quote-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.quote-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.quote-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: 32px;
  align-items: start;
}

/* 结果卡桌面吸顶：长表单滚动时价格始终可见 */
.quote-result {
  position: sticky;
  top: 96px;
  padding: 26px 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-light);
  box-shadow: var(--shadow-sm);
}

.quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.quote-field--wide {
  grid-column: 1 / -1;
}

.quote-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.quote-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.quote-hint {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-lighter);
}

.quote-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.quote-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
}

/* 工艺多选胶囊片 */
.quote-crafts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quote-craft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-light);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.quote-craft:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.quote-craft.is-on {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.quote-craft input {
  position: absolute;
  opacity: 0;
  pointer-events: none; /* 胶囊整体可点，原生勾选框隐藏但保持可编程勾选态 */
}

/* 组合吊牌部件卡 */
.quote-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 10px 0;
}

.quote-part {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.quote-part-title {
  display: block;
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
}

.quote-part .quote-label {
  margin-top: 10px;
}

.quote-part .quote-crafts {
  margin-top: 6px;
}

.quote-part-del {
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text-light);
  font-size: 0.85rem;
  cursor: pointer;
}

.quote-part-del:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.quote-part-del:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quote-part-add {
  padding: 9px 18px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-light);
  font-size: 0.9rem;
  cursor: pointer;
}

.quote-part-add:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.quote-part-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 结果卡内容 */
.quote-price-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
}

.quote-price {
  margin: 2px 0 12px;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.quote-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--text-light);
}

.quote-breakdown {
  margin: 0 0 14px;
  font-size: 0.875rem;
}

.quote-breakdown summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  user-select: none;
}

.quote-breakdown table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}

.quote-breakdown td {
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border);
  color: var(--text-light);
}

.quote-breakdown td:last-child {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.quote-note {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-lighter);
}

.quote-note a {
  color: var(--primary);
}

.quote-error {
  margin: 8px 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--accent-dark);
}

.quote-loading {
  font-size: 0.95rem;
  color: var(--text-lighter);
}

/* 窄屏：两栏并一列（结果卡回落常规流，取消吸顶），表单单列 */
@media (max-width: 900px) {
  .quote-body {
    grid-template-columns: 1fr;
  }

  .quote-result {
    position: static;
  }
}

@media (max-width: 640px) {
  .quote-form {
    grid-template-columns: 1fr;
  }

  .quote-price {
    font-size: 2rem;
  }
}

/* ==========================================================================
   客户中心（2026-09）：/account 注册/登录/我的订单。窄容器表单 + 订单表；
   与在线报价段同源设计语言；页面 SSR 自 getPartials（导航与主站一致）
   ========================================================================== */
.acct-wrap {
  max-width: 460px;
  margin: 0 auto;
}

.acct-form {
  padding: 30px 30px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.acct-field {
  margin-bottom: 16px;
}

.acct-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.acct-req {
  color: var(--accent);
}

.acct-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.acct-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.acct-field.has-error .acct-input {
  border-color: var(--accent);
}

.acct-error {
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--accent-dark);
}

.acct-hint {
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--text-lighter);
}

.acct-flash {
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #fdf3ea;
  color: var(--accent-dark);
  font-size: 0.9rem;
}

.acct-submit {
  width: 100%;
  margin-top: 6px;
}

.acct-alt {
  margin-top: 14px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-lighter);
}

.acct-alt a {
  color: var(--primary);
}

.acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  font-size: 0.95rem;
  color: var(--text-light);
}

.acct-logout {
  display: inline-flex;
}

.acct-h2 {
  margin-bottom: 14px;
  font-size: 1.25rem;
  color: var(--text);
}

.acct-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.92rem;
}

.acct-table th,
.acct-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text);
}

.acct-table thead th {
  background: var(--bg-light);
  font-weight: 600;
  white-space: nowrap;
}

.acct-table tbody tr:last-child th,
.acct-table tbody tr:last-child td {
  border-bottom: none;
}

/* 订单状态徽章 */
.acct-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-light);
  color: var(--text-light);
}

.acct-badge--pending_payment {
  background: #fdf3ea;
  color: var(--accent-dark);
}

.acct-badge--proof_review {
  background: #fdf3ea;
  color: var(--accent-dark);
}

.acct-badge--paid {
  background: var(--primary-light);
  color: var(--primary);
}

.acct-badge--shipped {
  background: var(--primary-light);
  color: var(--primary);
}

.acct-badge--closed {
  background: var(--bg-light);
  color: var(--text-lighter);
}

.acct-badge--refunded {
  background: var(--bg-light);
  color: var(--text-lighter);
}

.acct-empty {
  padding: 30px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-light);
  text-align: center;
  color: var(--text-light);
}

.acct-empty a {
  color: var(--primary);
}

.acct-pagerinfo {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-lighter);
}

.acct-pagerinfo a {
  margin-left: 10px;
  color: var(--primary);
}

.acct-order {
  max-width: 720px;
}

@media (max-width: 640px) {
  .acct-table {
    display: block;
    overflow-x: auto;
  }

  .acct-form {
    padding: 22px 18px 20px;
  }
}

/* ==========================================================================
   报价结果卡下单面板（2026-09，M4）：结果卡底部「直接下单」区——收货信息
   （localStorage 持久，登录跳转回来不重填）+ 付款方式 + 提交按钮；
   提交金额仅展示，服务端重放重算为准（price_changed 会刷新回填）
   ========================================================================== */
.quote-order {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.quote-order-title {
  margin-bottom: 12px;
  font-size: 1.05rem;
  color: var(--primary-dark);
}

/* 付款方式单选（M4 仅转账可选，wx/alipay 展示为即将开通） */
.quote-pays {
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

.quote-pays .quote-label {
  margin-bottom: 8px;
}

.quote-pay {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
}

.quote-pay.is-on {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

.quote-pay.is-off {
  cursor: not-allowed;
  color: var(--text-lighter);
  background: var(--bg-light);
}

.quote-pay input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.quote-order-btn {
  width: 100%;
  margin-top: 4px;
}

.quote-order-tip {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-lighter);
}

.quote-order-tip.is-err {
  color: var(--accent-dark);
  font-weight: 500;
}

/* ==========================================================================
   客户中心订单详情状态区（2026-09，M4）：转账指引条 / 凭证上传表单 /
   订单动态折叠组 / 上传成功回执——挂在 acct- 段之后，命名沿用 acct- 前缀
   ========================================================================== */
.acct-notice {
  margin: 14px 0;
  padding: 14px 18px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary-light);
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--primary-dark);
}

.acct-notice--ok {
  border-color: #b7dfc3;
  background: #e6f4ea;
  color: #1e6b3a;
}

.acct-notice--warn {
  border-color: var(--accent);
  background: #fdf3ea;
  color: var(--accent-dark);
}

.acct-notice--muted {
  border-color: var(--border);
  background: var(--bg-light);
  color: var(--text-light);
}

.acct-notice a {
  color: var(--primary);
  font-weight: 600;
}

/* 凭证上传表单（file 输入沿用 quote-input 底子 + 原生文件按钮） */
.acct-upload {
  margin: 0 0 10px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #fff;
}

.acct-upload label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.acct-input--file {
  padding: 8px 10px;
}

.acct-cancel {
  margin: 4px 0 8px;
}

.acct-cancel .btn-outline {
  border-color: var(--border);
  color: var(--text-light);
  padding: 8px 18px;
}

.acct-cancel .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* 报价明细 / 订单动态折叠组（details 原生交互零 JS） */
.acct-events {
  margin: 16px 0;
  font-size: 0.9rem;
}

.acct-events summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  user-select: none;
}

.acct-events ul {
  margin: 10px 0 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--text-light);
}

.acct-events li {
  margin: 4px 0;
}

.acct-ok {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid #b7dfc3;
  border-radius: 6px;
  background: #e6f4ea;
  color: #1e6b3a;
  font-size: 0.9rem;
}

/* ==========================================================================
   订单详情在线支付区（2026-09，M5）：通道按钮组 + 二维码卡。js/pay.js 挂载；
   转账通道无 JS 也可用（服务端渲染指引），此处仅服务在线通道的增强体验
   ========================================================================== */
.acct-pay {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.acct-pay-amt {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--text);
}

.acct-pay-amt strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}

.acct-pay-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.acct-pay-btn {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-light);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.acct-pay-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.acct-pay-btn.is-cur {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.acct-pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* JS 挂载点：空时收边距（转账通道服务端指引形态） */
.acct-pay-body:empty {
  display: none;
}

.acct-pay-tip {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-lighter);
}

.acct-pay-tip.is-err {
  color: var(--accent-dark);
  font-weight: 500;
}

/* 微信扫码卡：服务端产的二维码 SVG 固定方形（qrcode-generator 无 viewBox，宽高须双定） */
.acct-qr {
  max-width: 280px;
  margin: 10px auto 4px;
  padding: 16px 16px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.acct-qr svg {
  width: 208px;
  height: 208px;
  margin: 8px auto;
}

.acct-qr-amt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
}

.acct-qr-hint {
  margin: 0 0 4px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-light);
}

/* ==========================================================================
   桌面版内容宽度加宽（2026-09）：--container 1200 → 1320（Bootstrap XXL 档）。
   全站网格均为 fr / auto-fit 弹性列，随容器自然加宽，无需逐段调整；
   正文与标题的阅读宽度（.prose 780px / .section-head 760px 等）是排版
   可读性度量，刻意不随容器放大。此块追加于文件末尾——style.css 须保持
   「_baseline 前缀字节一致、仅末尾追加」契约（verify-geo 校验项）
   ========================================================================== */
:root {
  --container: 1320px;
}

/* ==========================================================================
   客户中心多渠道登录/注册（2026-09 追加）：页签 + 验证码按钮 + OAuth 按钮 + 微信二维码。
   登录页服务端直出全部面板（禁 JS 纵向堆叠可用），js/account.js 页签化——
   [hidden] 只由 JS 控制。追加区遵守「仅末尾追加」契约（verify-geo 校验项）
   ========================================================================== */

/* 登录方式页签：等宽分段控件（与表单卡同宽的浅灰轨道，选中段白色浮起） */
.acct-auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-light);
}

.acct-auth-tab {
  flex: 1;
  min-width: 0;
  padding: 9px 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-light);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.acct-auth-tab:hover {
  color: var(--text);
}

.acct-auth-tab.is-active {
  background: #fff;
  color: var(--primary);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* 窄屏四页签等分收紧字号（「手机验证码」5 字在 320px 视口须收 13px 才不溢出） */
@media (max-width: 480px) {
  .acct-auth-tab {
    padding: 8px 2px;
    font-size: 0.8125rem;
  }
}

.acct-auth-panel[hidden] { display: none; }

.acct-auth-panel + .acct-auth-panel { margin-top: 18px; }

/* 验证码：输入 + 内联发码按钮 */
.acct-code-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.acct-code-row .acct-input {
  flex: 1;
  min-width: 0;
}

.acct-code-btn {
  flex: none;
  white-space: nowrap;
}

.acct-code-btn.is-waiting {
  opacity: 0.65;
  cursor: not-allowed;
}

.acct-code-tip {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* OAuth 按钮（微信绿 / QQ 蓝） */
.acct-oauth-panel .acct-oauth-btn,
.acct-wx-panel + .acct-auth-panel .acct-oauth-btn {
  width: 100%;
}

.acct-oauth-btn--qq,
.acct-oauth-btn--wechat {
  color: #fff;
  border: 0;
  font-weight: 600;
}

.acct-oauth-btn--qq {
  background: #12b7f5;
}

.acct-oauth-btn--qq:hover,
.acct-oauth-btn--qq:focus {
  background: #0ea3dd;
  color: #fff;
}

.acct-oauth-btn--wechat {
  background: #07c160;
}

.acct-oauth-btn--wechat:hover,
.acct-oauth-btn--wechat:focus {
  background: #06ad56;
  color: #fff;
}

/* 微信扫码 iframe（qrconnect 内嵌形态建议 ~300×400） */
.acct-wx-frame {
  margin-top: 12px;
}

.acct-wx-frame iframe {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  height: 400px;
  border: 0;
}

/* 注册页双面板标题与页脚链接 */
.acct-reg-h {
  margin: 0 0 12px;
  font-size: 1.05rem;
  text-align: center;
}

.acct-reg-h--sub {
  margin-top: 30px;
}

.acct-reg-alt {
  margin-top: 18px;
  text-align: center;
}

/* 窄屏：发码按钮换行到输入下方 */
@media (max-width: 480px) {
  .acct-code-row {
    flex-direction: column;
  }

  .acct-code-row .acct-code-btn {
    width: 100%;
  }
}

/* ==========================================================================
   前台 UI 改版（2026-09）：参考潘多印 / 劲嘉的「绿色工业风」整站换肤。
   设计语言：黑白基底 + 单一品牌强调色（深松绿，克制使用）；深色页头与
   页脚首尾呼应；方正少圆角、扁平无阴影（层次靠色块与留白）；标题区
   左对齐 + 前置短线。实现方式 = 仅在本文件末尾追加覆盖（既有规则零改动，
   「_baseline 前缀字节一致、仅末尾追加」契约不变）：
   - 大量组件已引用 var(--primary/--accent/--radius/...)——A 区令牌覆盖即自动换肤；
   - 硬编码旧色（蓝 #0f4c81/#0a3560、橙 #e8862e 系）与硬编码圆角在 B–J 区逐一兜底；
   - 错误/警告类组件原本借用 --accent（橙）表意——令牌变绿后语义丢失，
     J 区显式回填原暖橙，防「绿色报错」。
   ========================================================================== */

/* ---------- A. 设计令牌 ---------- */
:root {
  --primary: #0E6E4E;        /* 深松绿（主色，与站点 logo 同族） */
  --primary-dark: #0A563C;
  --primary-light: #EAF3EF;
  --accent: #0E6E4E;         /* 单一强调色纪律：橙点缀退役，归一到主绿 */
  --accent-dark: #0A563C;
  --text: #1A2420;           /* 近黑绿灰 */
  --text-light: #5A655F;
  --text-lighter: #8A948F;
  --bg-light: #F5F8F6;       /* 灰绿白 */
  --border: #E2E8E4;
  --radius: 2px;             /* 方正化（所有 var(--radius) 组件自动跟随） */
  --shadow-sm: 0 1px 2px rgba(16, 35, 28, 0.05);
  --shadow-md: 0 2px 10px rgba(16, 35, 28, 0.06);
  --shadow-lg: 0 6px 20px rgba(16, 35, 28, 0.08);
}

::selection {
  background: #0E6E4E;
  color: #fff;
}

/* ---------- B. 页头深色化（近黑绿底 + 白字 + 亮绿短线指示） ---------- */
.site-header {
  background: #10231C;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.logo-text {
  color: #fff;
}

.logo-text small {
  color: rgba(255, 255, 255, 0.55);
}

.main-nav a {
  color: rgba(255, 255, 255, 0.85);
}

/* 短线指示（24×3px，压住原「整条下划线」形态）：背景图贴 padding box 底部 */
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: transparent;
  background: linear-gradient(#35C08E, #35C08E) left bottom / 24px 3px no-repeat;
}

/* 下拉主链接尾部 ▾ 箭头：深底可读 */
.has-dropdown > a::after {
  color: rgba(255, 255, 255, 0.55);
}

/* 下拉面板白底深字重申：上方 .main-nav a 白字与 hover 短线规则同为 (0,1,1)/(0,2,1)
   且源序更后，会把中部 .nav-dropdown 的深字与浅绿 hover 胶囊盖成「白底白字」——
   此处必须在其后再压回来（桌面 hover 态；≤768px 折叠菜单由 J 区深色断点接管） */
.nav-dropdown a {
  color: var(--text);
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background: var(--primary-light);
  color: var(--primary);
  border-bottom-color: transparent;
}

.nav-toggle span {
  background: #fff;
}

/* 页头 CTA：深底上直接用主绿块（白字对比足够），描一层浅边增立体 */
.header-cta {
  background: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.header-cta:hover {
  background: var(--primary-dark);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

/* 下拉面板保持白底深字（深头白下拉的对比形态；hover 浅绿底随令牌自动） */

/* ---------- C. 首页 Hero：深色多层次渐变 + 大字排版（去网格纹理与装饰圆环） ---------- */
.hero {
  background: linear-gradient(160deg, #0A1812 0%, #0E2A20 48%, #14573E 130%);
  padding: 116px 0 100px;
}

.hero::before,
.hero::after {
  display: none;
}

/* eyebrow 去橙胶囊：细小字 + 前置亮绿短线（全站 eyebrow 统一语言） */
.hero .eyebrow {
  background: none;
  border: none;
  border-left: 3px solid #35C08E;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.82);
  padding: 3px 0 3px 16px;
  letter-spacing: 0.14em;
  margin-bottom: 26px;
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}

.hero .lead {
  color: rgba(255, 255, 255, 0.85);
}

/* 深底上的主 CTA：白底深绿字（参考站语言——深底不放低对比深色块） */
.hero .btn-accent {
  background: #fff;
  border-color: #fff;
  color: #0A241B;
}

.hero .btn-accent:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: #0A241B;
}

/* ---------- D. 统计条：与 hero 分层的深绿黑横条，数字白色 ---------- */
.stats-bar {
  background: #0B2018;
}

.stat-item .num {
  color: #fff;
}

.stat-item .label {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- E. 标题区左对齐 + 绿色短线 eyebrow（全站统一） ---------- */
.section-head {
  max-width: 820px;
  margin: 0 0 44px;
  text-align: left;
}

.section-head .eyebrow {
  color: var(--primary);
  border-left: 3px solid var(--primary);
  padding-left: 12px;
}

/* ---------- F. 按钮：方正化（令牌已换 radius）+ 去位移/阴影的扁平 hover ---------- */
.btn-primary:hover,
.btn-accent:hover {
  transform: none;
  box-shadow: none;
}

/* CTA 行动区回深色带（覆盖中部「白底深字」改版）：与 hero 同族色 + 白底主钮 */
.cta-band {
  background: #0E2A20;
  color: #fff;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.8);
}

.cta-band .btn-accent {
  background: #fff;
  border-color: #fff;
  color: #0A241B;
}

.cta-band .btn-accent:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #0A241B;
}

/* ---------- G. 卡片系：扁平化（去阴影/位移），hover 换绿边 ---------- */
.card {
  box-shadow: none;
}

.card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--primary);
}

.card .icon {
  border-radius: 2px;
}

.product-card-link {
  box-shadow: none;
}

.product-card-link:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--primary);
}

.case-card:hover {
  transform: none;
  box-shadow: none;
  border-top-color: #2FA37A;
}

.case-icon {
  border-radius: 2px;
}

.article-list article {
  box-shadow: none;
}

.article-list article:hover {
  box-shadow: none;
  transform: none;
  border-color: var(--primary);
}

.article-cover {
  box-shadow: none;
}

.map-embed {
  box-shadow: none;
}

.acct-form {
  box-shadow: none;
}

/* 公司速览面板：深绿黑底 + 亮绿左线（与 hero/统计条同族） */
.fact-panel {
  background: #0E2A20;
  border-left: 4px solid #35C08E;
}

/* 对勾图标：SVG 描边原为硬编码蓝，换绿 */
.check-list li::before {
  border-radius: 2px;
  background: var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6E4E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- H. 内页 page-hero：深色渐变 → 浅灰绿白 + 标题绿竖线（左对齐语言贯穿） ---------- */
.page-hero {
  background: #F5F8F6;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding: 52px 0 46px;
}

.page-hero h1 {
  color: #10231C;
  border-left: 5px solid var(--primary);
  padding-left: 18px;
  line-height: 1.3;
}

.page-hero p {
  color: var(--text-light);
  padding-left: 23px; /* 与 h1 文字起点对齐（5px 线 + 18px 内距） */
}

/* 联系信息卡：与 fact-panel 同款深绿黑 + 亮绿左线 */
.contact-info-card {
  background: #0E2A20;
  border-left: 4px solid #35C08E;
}

.contact-info-card a {
  color: #7FD6B4;
}

/* 报价结果卡：白底 + 顶部主绿条（吸顶卡的存在感由色条承担，不再靠阴影） */
.quote-result {
  background: #fff;
  border-top: 3px solid var(--primary);
  box-shadow: none;
}

.quote-part {
  box-shadow: none;
}

/* FAQ 展开态去阴影（边框变绿随令牌自动） */
.faq-list details[open] {
  box-shadow: none;
}

/* 方正化：既有硬编码圆角的交互件逐一收口（胶囊 → 2px 方正） */
.filter-btn,
.product-more-btn,
.quote-tab,
.quote-craft,
.acct-pay-btn {
  border-radius: 2px;
}

.quote-tab.is-active {
  box-shadow: none;
}

.pager-num,
.pager-side {
  border-radius: 2px;
}

a.pager-num:hover,
a.pager-side:hover {
  box-shadow: none;
}

.pager-num.is-cur {
  box-shadow: none;
}

.acct-auth-tabs {
  border-radius: 2px;
}

.acct-auth-tab {
  border-radius: 2px;
}

/* 表单控件：1px 细边 + 方正 */
.quote-input,
.acct-input,
.form-field input,
.form-field textarea,
.form-field select,
.faq-search input {
  border-width: 1px;
  border-radius: 2px;
}

.quote-pay,
.acct-notice,
.acct-pay,
.acct-qr,
.acct-upload,
.acct-ok,
.form-status {
  border-radius: 2px;
}

.prose code {
  border-radius: 2px;
}

.footer-cert span {
  border-radius: 2px;
}

/* 品牌图轻圆角保留一点（方正化到 4px 与整体协调） */
.logo img,
.footer-brand img {
  border-radius: 4px;
}

/* ---------- I. 页脚：与页头同款近黑绿，链接 hover 亮绿 ---------- */
.site-footer {
  background: #10231C;
}

.footer-bottom {
  background: #0B2018;
}

.site-footer ul a:hover,
.site-footer address a,
.footer-bottom a:hover {
  color: #7FD6B4;
}

/* ---------- J. 语义色回填 + 响应式重申 ---------- */
/* 错误/警告原本借用 --accent（橙）表意；令牌变绿后这里显式回填原暖橙，防「绿色报错」 */
.quote-error,
.acct-error,
.quote-order-tip.is-err,
.acct-pay-tip.is-err,
.acct-req {
  color: #c96d1a;
}

.acct-field.has-error .acct-input {
  border-color: #e8862e;
}

.acct-flash,
.acct-notice--warn {
  border-color: #e8862e;
  background: #fdf3ea;
  color: #c96d1a;
}

.acct-badge--pending_payment,
.acct-badge--proof_review {
  background: #fdf3ea;
  color: #c96d1a;
}

.acct-cancel .btn-outline:hover {
  border-color: #e8862e;
  color: #c96d1a;
}

/* ≤768px 折叠菜单：深色面板 + 白字（中部断点原为白底深字） */
@media (max-width: 768px) {
  .main-nav {
    background: #10231C;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }

  .main-nav a {
    color: rgba(255, 255, 255, 0.85);
  }

  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    color: #fff;
    border-left-color: #35C08E;
    background: none;
  }

  .main-nav .nav-dropdown a,
  .main-nav.nav-acc .nav-dropdown a {
    color: rgba(255, 255, 255, 0.68);
  }

  .main-nav.nav-acc .has-dropdown > a::after {
    color: rgba(255, 255, 255, 0.5);
  }
}

/* 宽屏触屏机（>768px 且 hover:none）手风琴展开态：nav-dropdown 背景透明贴在
   深色页头上，中部规则给的是灰字（白页头时代的设计）——深底上不可读，须白字；
   ▾ 箭头同理（nav-acc 块特异性 0,3,1 压过 B 区全局箭头规则，只能同特异性后置覆盖） */
@media (hover: none) {
  .main-nav.nav-acc .nav-dropdown a {
    color: rgba(255, 255, 255, 0.68);
  }

  .main-nav.nav-acc .has-dropdown > a::after {
    color: rgba(255, 255, 255, 0.5);
  }
}

/* 翻页方块圆角在窄屏断点的重申（中部 640px 块写 9px） */
@media (max-width: 640px) {
  .pager-num,
  .pager-side {
    border-radius: 2px;
  }
}

/* ==========================================================================
   首页 hero 文字区加宽（2026-09-14）：容器已加宽到 1320px，hero-inner 仍锁
   780px、lead 640px，右侧大片渐变空置显窄。hero-inner 780→1000、lead
   640→840（约 46 字/行，阅读宽度仍在舒适区）；h1 上限 3.2→2.5rem——标题
   实测整行 ≈23em（21 汉字 + 破折号空格），44px 下 1004px 超 hero-inner
   内容宽 952px 约 6px，balance 拆两行断在「商/业」；2.5rem（40px→920px）
   桌面单线呈现，中窄屏仍由 text-wrap:balance 折行均衡（旧浏览器忽略）
   ========================================================================== */
.hero-inner {
  max-width: 1000px;
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  text-wrap: balance;
}

.hero .lead {
  max-width: 840px;
}

/* ==========================================================================
   桌面导航当前项横条通宽化（2026-09-15 二修）：B 区固定宽短线（24×3px，
   原 left bottom 左对齐、一修改居中）在各菜单项文字长短不一时视觉失衡——
   等宽短线盖不住长项文字（四字项只盖一角、「产品与服务」97px 含 ▾ 差距
   最大），两字项又显多余。改 background-size:100% 3px：横条铺满各自菜单项
   整宽、随字数伸缩，完整覆盖文字底部（视觉 = 当前项整条下划线，随文字
   宽窄各不相同）；垂直仍贴文字 5px。B 区 shorthand 的渐变图与 no-repeat
   保留，100% 宽下 position 已无关紧要。下拉项 hover 被 B 区同规则命中但
   随后置 .nav-dropdown a:hover 的 background shorthand 重置为无图，
   background-size 单独存在不绘任何东西，不受影响；≤768px 折叠菜单 J 区
   background:none（image:none）同理不受影响
   ========================================================================== */
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background-size: 100% 3px;
}

/* ==========================================================================
   桌面点击下拉分类后即时收起（2026-09-15）：点击把焦点留在链接上
   （:focus-within 常开）+ 页头粘性、页面滚动后面板钉在原地、光标仍悬在
   面板上（:hover 持续）——两路都会让面板点击后不消失。main.js 第 12 节
   点击时 blur + 挂 dd-dismiss 类，本规则以更高特异性（0,5,1 > 0,4,1）
   压过 hover/focus-within 展开态强制收起；光标移出面板矩形（或 focusin
   重入菜单）即由脚本摘除类，恢复 hover 语义。仅桌面路径挂类（nav-acc
   手风琴态不经过此逻辑），禁 JS 时无此类、原生 hover 形态不变
   ========================================================================== */
.main-nav li.has-dropdown.dd-dismiss:hover .nav-dropdown,
.main-nav li.has-dropdown.dd-dismiss:focus-within .nav-dropdown {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   首页页头透明化（2026-09-16）：仅首页（含 .hero 的页面）页头透出 hero 深
   渐变——内页顶部是浅底 page-hero，白字导航必须保持深色实底，故用
   body:has(.hero) 作用域 + @supports 守卫：不支持 :has 的旧浏览器整块跳过、
   维持 B 区深底原形态。sticky 页头保留在文档流，hero 以负 margin 上移
   76px（header-inner 高）垫到页头之下，上内边距等量加回保持排版节奏；
   滚动后 main.js 第 1 节 scrollY>8 挂 is-scrolled 恢复 #10231C 实底，
   避免透明页头白字压在浅色正文上
   ========================================================================== */
@supports selector(body:has(.hero)) {
  body:has(.hero) .site-header {
    background: transparent;
    border-bottom-color: transparent;
  }

  body:has(.hero) .site-header.is-scrolled {
    background: #10231C;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  body:has(.hero) .hero {
    margin-top: -76px;
    padding-top: 192px; /* C 区 116px + 页头占位 76px */
  }
}

@media (max-width: 768px) {
  @supports selector(body:has(.hero)) {
    body:has(.hero) .hero {
      margin-top: -76px;
      padding-top: 140px; /* 中部断点 64px + 页头占位 76px */
    }
  }
}

/* ==========================================================================
   首页 hero + 统计条共用一张海浪背景（2026-09-16 二版）：两节各自设
   background-attachment: fixed——图层锚定视口而非元素盒，cover 尺寸也相对
   视口计算，两节如同在一张完整照片上开出的两个窗口，接缝处像素连续，
   视觉上即「共用一张图、更加整体」；滚动时图片定住、内容滑过（轻视差）。
   渐变遮罩同一色调（深松绿系）：顶部 0.88 保住 h1/正文对比，自 60% 起恒定
   0.72——hero 与 stats 接缝两侧 alpha 完全一致，无色调台阶，stats 白字对比
   与一版相同。图为亮蓝海浪（1920×850 webp 197KB），浪花亮部接近纯白，
   白字必须靠遮罩保底；图片加载失败由两节各自的 D 区/C 区实底兜底
   ========================================================================== */
.hero,
.stats-bar {
  background:
    linear-gradient(165deg, rgba(4, 15, 11, 0.88) 0%, rgba(6, 22, 17, 0.78) 42%, rgba(6, 24, 20, 0.72) 60%, rgba(6, 24, 20, 0.72) 100%),
    url("../images/stats-bg.webp") center / cover no-repeat;
  background-attachment: fixed, fixed;
  /* 防刷新闪烁：图片层异步解码就绪前（fixed 背景补绘更晚），半透明渐变会
     直透白色 body 闪一下——垫一块深绿底，未就绪态与最终形态几乎无差 */
  background-color: #0A1812;
}

/* iOS Safari 对 fixed attachment 支持不完整（滚动回弹区易出撕裂伪影）：
   显式回退为随元素滚动，两节各自 cover 呈现——同色遮罩下依旧协调 */
@supports (-webkit-touch-callout: none) {
  .hero,
  .stats-bar {
    background-attachment: scroll, scroll;
  }
}

.stat-item .num {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.stat-item .label {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   首页业务卡片有图产品（2026-09-16）：托管块对有图产品在 icon 槽直出
   <img>（homecards.js），此处让图片填满 56px 圆角槽——cover 裁切居中，
   border-radius 随 .icon 的 12px；无图产品仍显示装饰 SVG 不受影响
   ========================================================================== */
.card .icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ==========================================================================
   统计条分隔线柔化（2026-09-17）：1px 实线 border 换「两端渐隐、中间略粗」
   的柔光竖线——border 画不了渐变，改伪元素绘制：径向渐变椭圆
   (closest-side) 在中轴最亮、向四边收敛，视觉即中间粗一点、两头渐渐消失。
   ::after 竖线（列间）与 ::before 横线（行间）分工，拓扑逐断点复刻原
   border 规则：>1024 五列竖线×4；768–1024 三列换行 item3 无竖线、item4/5
   加横线；≤768 两列全横线、竖线退场。0,2,0 特异性压过各断点 0,1,0 边框
   ========================================================================== */
.stats-bar .stat-item {
  position: relative;
  border: none;
}

.stats-bar .stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 72%;
  background: radial-gradient(ellipse closest-side at center, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  pointer-events: none;
}

@media (max-width: 1024px) {
  /* 三列换行：行尾 item3 不画竖线（原 border-right:none 特判）；第二行 item4/5 下方画横线 */
  .stats-bar .stat-item:nth-child(3)::after {
    display: none;
  }

  .stats-bar .stat-item:nth-child(4)::before,
  .stats-bar .stat-item:nth-child(5)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 3px;
    width: 72%;
    background: radial-gradient(ellipse closest-side at center, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  /* 两列：全部横线，竖线退场 */
  .stats-bar .stat-item::after {
    display: none;
  }

  .stats-bar .stat-item::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 3px;
    width: 72%;
    background: radial-gradient(ellipse closest-side at center, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
}

/* ==========================================================================
   页头「产品与服务」展开箭头放大（2026-09-17）：原 0.7em（≈11px）在深底上
   存在感不足，放大到 0.9em 并稍加间距。选择器须同时罩住 nav-acc 手风琴态
   （.main-nav.nav-acc ... 为 0,3,1，全局 (0,1,1) 压不过它）——两路同值；
   颜色仍归 B 区（桌面 rgba 白 55%）与 hover:none 覆盖（nav-acc 白 50%）
   ========================================================================== */
.has-dropdown > a::after,
.main-nav.nav-acc .has-dropdown > a::after {
  font-size: 0.9em;
  margin-left: 5px;
}

/* ==========================================================================
   移动端展开菜单内的「获取报价」按钮（2026-09-19）：main.js 第 12 节把页头
   header-cta 克隆进 .main-nav 尾部——克隆件桌面/小屏收起态一律隐藏，仅
   ≤768px 展开面板内显示为通栏主按钮（原 header-cta 窄屏仍是 display:none）
   ========================================================================== */
.header-cta--in-nav { display: none; }
@media (max-width: 768px) {
  .main-nav.is-open .header-cta--in-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 12px 0 6px;
  }
}