/* ============================================================
   重庆卓域生物科技有限公司 · 官网前台样式
   主题：蓝白金（水滴盾牌 LOGO 基调） 科技·清洁·专业
   ============================================================ */

/* ---------- 1. 变量与重置 ---------- */
:root {
  --c-primary: #0B3D6E;
  --c-primary-dark: #072A4C;
  --c-primary-deep: #051E36;
  --c-primary-light: #14609E;
  --c-accent: #2AA4E8;
  --c-accent-dark: #1B84C4;
  --c-steel: #A9B8C7;
  --c-steel-light: #E8EEF4;
  --c-bg: #F4F8FC;
  --c-bg-alt: #EAF1F8;
  --c-ink: #0B2540;
  --c-text: #33475E;
  --c-white: #FFFFFF;
  --c-line: #DCE6F0;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 6px 24px rgba(11, 61, 110, .10);
  --shadow-lg: 0 14px 40px rgba(11, 61, 110, .16);
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
  --header-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-accent); }
ul, ol { list-style: none; }
h1, h2, h3, h4 { color: var(--c-ink); line-height: 1.3; font-weight: 700; }
::selection { background: var(--c-accent); color: #fff; }

.container { max-width: 1680px; margin: 0 auto; padding: 0 24px; }

/* ---------- 2. 通用组件 ---------- */
.section { padding: 72px 0; }
.section-alt { background: var(--c-bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-eyebrow {
  display: inline-block; font-size: 14px; letter-spacing: 2px;
  color: var(--c-accent); font-weight: 600; margin-bottom: 8px;
}
.section-title { font-size: 32px; margin-bottom: 12px; }
.section-title::after {
  content: ""; display: block; width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
  border-radius: 2px; margin: 14px auto 0;
}
.section-sub { color: var(--c-text); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 999px; font-size: 16px; font-weight: 600;
  border: 2px solid transparent; cursor: pointer; transition: all .25s; line-height: 1.2;
}
.btn-primary { background: var(--c-accent); color: #fff; box-shadow: 0 6px 18px rgba(42,164,232,.35); }
.btn-primary:hover { background: var(--c-accent-dark); color: #fff; transform: translateY(-2px); }
.btn-outline { border-color: var(--c-accent); color: var(--c-accent); background: transparent; }
.btn-outline:hover { background: var(--c-accent); color: #fff; transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--c-primary-dark); }
.btn-light:hover { background: var(--c-steel-light); color: var(--c-primary-dark); transform: translateY(-2px); }
.btn-dark { background: var(--c-primary); color: #fff; }
.btn-dark:hover { background: var(--c-primary-light); color: #fff; transform: translateY(-2px); }

.tag {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--c-steel); color: var(--c-primary); background: #fff;
}
.tag-accent { background: rgba(42,164,232,.12); border-color: rgba(42,164,232,.4); color: var(--c-accent-dark); }

.center { text-align: center; }
.mt-16 { margin-top: 16px; } .mt-32 { margin-top: 32px; }

/* 卡片 */
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 28px; transition: all .3s; position: relative; overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(42,164,232,.4); }

/* ---------- 3. 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 42, 76, .96); backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(5,30,54,.25);
}
.header-inner { display: flex; align-items: center; height: var(--header-h); gap: 32px; }
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo img { height: 46px; width: auto; border-radius: 10px; }
.logo-text { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.2; }
.logo-text small { display: block; font-size: 11px; font-weight: 400; color: var(--c-steel); letter-spacing: 1px; }
.main-nav { display: flex; gap: 6px; margin-left: auto; }
.main-nav a {
  color: rgba(255,255,255,.85); padding: 8px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 500; transition: all .2s;
}
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.main-nav a.active { color: #fff; background: rgba(42,164,232,.22); }
.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone { color: #fff; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.header-phone svg { color: var(--c-accent); }
.header-phone b { color: var(--c-accent); font-size: 17px; letter-spacing: .5px; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; padding: 8px 12px; border-radius: 8px; }
.nav-toggle:hover { background: rgba(255,255,255,.12); }

/* ---------- 4. Hero（水滴盾牌 · 水纹光影） ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(42,164,232,.35), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(42,164,232,.22), transparent 55%),
    linear-gradient(135deg, var(--c-primary-deep) 0%, var(--c-primary-dark) 45%, var(--c-primary) 100%);
}
.hero::before {  /* 水纹涟漪 */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1.5px, transparent 2.2px);
  background-size: 220px 220px, 320px 320px;
}
.hero::after {  /* 水滴光斑 */
  content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -140px;
  background: radial-gradient(circle, rgba(42,164,232,.28), transparent 65%);
  filter: blur(8px);
}
.hero-inner { position: relative; z-index: 2; padding: 96px 0 88px; max-width: 1200px; margin: 0 auto; }
/* 首页 Hero 背景横幅图位（设计图来自站点设置 site_banner） */
.hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg-mask {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(5,30,54,.88) 0%, rgba(11,61,110,.72) 55%, rgba(20,96,158,.45) 100%);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(42,164,232,.16); border: 1px solid rgba(42,164,232,.35);
  color: #9FD9F7; padding: 6px 16px; border-radius: 999px; font-size: 14px; margin-bottom: 22px;
}
.hero-title { color: #fff; font-size: 40px; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.25; margin-bottom: 18px; max-width: 100%; text-wrap: balance; }
.hero-title em { font-style: normal; color: var(--c-accent); }
.hero-sub { font-size: 18px; color: rgba(255,255,255,.82); max-width: 640px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-badges { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 44px; }
.hero-badge { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font-size: 14px; }
.hero-badge svg { color: var(--c-accent); flex-shrink: 0; }

/* 数据统计条 */
.stats-band { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-top: -46px; position: relative; z-index: 5; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; }
.stat-item { text-align: center; padding: 26px 12px; position: relative; }
.stat-item + .stat-item::before {
  content: ""; position: absolute; left: 0; top: 24%; height: 52%; width: 1px; background: var(--c-line);
}
.stat-num { font-size: 38px; font-weight: 800; color: var(--c-primary); line-height: 1.1; }
.stat-num i { font-style: normal; font-size: 20px; color: var(--c-accent); margin-left: 2px; }
.stat-label { color: var(--c-text); font-size: 14px; margin-top: 6px; }

/* ---------- 5. 服务卡片 ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card { display: block; color: inherit; }
.service-card:hover { color: inherit; }
.service-card .icon-box {
  width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light)); margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(11,61,110,.25);
}
.service-card .icon-box svg { width: 32px; height: 32px; color: #fff; }
.service-card h3 { font-size: 20px; margin-bottom: 10px; }
.service-card p { font-size: 14.5px; color: var(--c-text); }
.service-card .more { margin-top: 14px; font-size: 14px; color: var(--c-accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.service-card:hover .more { gap: 10px; }

/* ---------- 6. 关于预览 ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-media { position: relative; }
.about-media .about-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-media .about-img img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.about-media .shield-art {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(150deg, var(--c-primary), var(--c-primary-light));
  min-height: 380px; display: flex; align-items: center; justify-content: center;
}
.about-media .shield-art svg { width: 160px; height: 160px; color: rgba(255,255,255,.92); }
.about-text h2 { font-size: 32px; margin-bottom: 18px; }
.about-text p { margin-bottom: 16px; }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.about-point { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--c-ink); font-weight: 500; }
.about-point svg { color: var(--c-accent); flex-shrink: 0; }

/* ---------- 7. 为什么选择我们 ---------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { text-align: center; }
.feature-card .f-icon {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-alt); border: 1px solid var(--c-line); color: var(--c-primary);
}
.feature-card .f-icon svg { width: 28px; height: 28px; }
.feature-card h3 { font-size: 18px; margin-bottom: 8px; }
.feature-card p { font-size: 14px; }

/* ---------- 8. 服务流程 ---------- */
.process-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; }
.process-step { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 24px 16px; text-align: center; position: relative; }
.process-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  width: 44px; height: 44px; line-height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), var(--c-primary-light));
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.process-step h4 { font-size: 16px; margin-bottom: 8px; }
.process-step p { font-size: 13px; color: var(--c-text); }

/* ---------- 8.5 服务保障宣传图 ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promo-card { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); background: #fff; box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; }
.promo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.promo-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; display: block; }

/* ---------- 9. 案例卡片 + 筛选 ---------- */
.filter-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.filter-btn {
  padding: 8px 20px; border-radius: 999px; border: 1px solid var(--c-line);
  background: #fff; color: var(--c-text); cursor: pointer; font-size: 14px; font-weight: 500; transition: all .2s;
}
.filter-btn.active, .filter-btn:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card .case-cover {
  height: 170px; border-radius: 12px; margin-bottom: 16px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--c-primary), var(--c-primary-light));
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9);
}
.case-card .case-cover img { width: 100%; height: 100%; object-fit: cover; }
.case-card .case-cover .ph { text-align: center; }
.case-card .case-cover .ph svg { width: 44px; height: 44px; margin: 0 auto 8px; }
.case-card .case-cover .ph span { font-size: 13px; opacity: .85; }
.case-card .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.case-card h3 { font-size: 18px; margin-bottom: 8px; }
.case-card p { font-size: 14px; color: var(--c-text); }

/* ---------- 10. 新闻卡片 ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { display: flex; flex-direction: column; }
.news-card .date { font-size: 13px; color: var(--c-steel); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.news-card h3 { font-size: 18px; margin-bottom: 10px; flex: 1; }
.news-card p { font-size: 14px; color: var(--c-text); }
.news-card .more { margin-top: 14px; font-size: 14px; color: var(--c-accent); font-weight: 600; }

/* ---------- 11. CTA 横幅 ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--c-primary-deep), var(--c-primary));
  color: #fff; border-radius: var(--radius-lg); padding: 56px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; width: 300px; height: 300px; right: -80px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,164,232,.35), transparent 65%);
}
.cta-band h2 { color: #fff; font-size: 28px; margin-bottom: 8px; position: relative; z-index: 2; }
.cta-band p { color: rgba(255,255,255,.8); position: relative; z-index: 2; }
.cta-band .btn { position: relative; z-index: 2; }

/* ---------- 12. 页脚 ---------- */
.site-footer { background: var(--c-primary-deep); color: rgba(255,255,255,.72); padding: 56px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; }
.footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--c-accent); }
.footer-col p { font-size: 14px; margin-bottom: 10px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: rgba(255,255,255,.72); font-size: 14px; }
.footer-col ul a:hover { color: var(--c-accent); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 12px; }
.footer-contact svg { color: var(--c-accent); flex-shrink: 0; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.5); }

/* ---------- 13. 内页标题横幅 + 面包屑 ---------- */
.page-hero {
  background: linear-gradient(135deg, var(--c-primary-deep), var(--c-primary));
  color: #fff; padding: 56px 0 48px; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; width: 380px; height: 380px; right: -100px; top: -160px;
  background: radial-gradient(circle, rgba(42,164,232,.3), transparent 65%);
}
.page-hero h1, .page-hero .page-hero-title { color: #fff; font-size: 34px; position: relative; z-index: 2; display: block; }
.page-hero .crumb { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.7); position: relative; z-index: 2; }
.page-hero .crumb a { color: rgba(255,255,255,.85); }
.page-hero .crumb a:hover { color: var(--c-accent); }

/* ---------- 14. 表单 ---------- */
.form-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--c-ink); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 8px;
  font-size: 15px; font-family: inherit; color: var(--c-ink); background: var(--c-bg); transition: border .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 3px rgba(42,164,232,.15);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-tip { font-size: 13px; color: var(--c-steel); }

/* ---------- 15. 详情页正文 ---------- */
.article-body { font-size: 16px; line-height: 1.9; color: var(--c-text); }
.article-body h2, .article-body h3 { margin: 28px 0 14px; }
.article-body p { margin-bottom: 16px; }
.article-body ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.article-body ul li { margin-bottom: 8px; }
.article-body img { border-radius: var(--radius); margin: 8px 0; }
/* 2026-10-19 处置实录正文新增：有序列表 / 表格 / 引用（沿用上面的字号·行高·颜色变量，不新造风格） */
.article-body ol { list-style: decimal; padding-left: 22px; margin-bottom: 16px; }
.article-body ol li { margin-bottom: 8px; }
.article-body h4 { margin: 22px 0 12px; font-size: 17px; }
.article-body blockquote {
  margin: 20px 0; padding: 14px 18px; background: #f2f7fc; border-left: 4px solid var(--c-primary);
  border-radius: 8px; color: var(--c-text); font-size: 15px;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body table {
  width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px;
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
}
.article-body th, .article-body td {
  border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top;
  line-height: 1.75;
}
.article-body th { background: #f2f7fc; font-weight: 600; color: var(--c-primary); }
.article-body tr:nth-child(even) td { background: #fafcfe; }
.article-body a { color: var(--c-primary); text-decoration: underline; }
@media (max-width: 768px) {
  .article-body table { display: block; overflow-x: auto; white-space: nowrap; }
}
.service-features { margin: 24px 0; }
.service-features li {
  display: flex; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 10px; margin-bottom: 10px; font-size: 15px; align-items: flex-start;
}
.service-features li::before {
  content: "✓"; flex-shrink: 0; width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: var(--c-accent); color: #fff; border-radius: 50%; font-size: 12px; margin-top: 2px;
}
.scene-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 16. 资质证书 ---------- */
.certs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-card { text-align: center; padding: 20px 16px; }
.cert-card .cert-img {
  height: 200px; border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--c-line);
  background: linear-gradient(140deg, var(--c-steel-light), #fff);
  display: flex; align-items: center; justify-content: center; color: var(--c-steel);
}
.cert-card .cert-img img { width: 100%; height: 100%; object-fit: contain; }
.cert-card .cert-img svg { width: 48px; height: 48px; }
.cert-card h4 { font-size: 15px; font-weight: 600; }

/* ---------- 17. 时间线（发展历程） ---------- */
.timeline { position: relative; padding-left: 28px; max-width: 820px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--c-accent), var(--c-primary-light)); }
.timeline-item { position: relative; margin-bottom: 26px; }
.timeline-item::before {
  content: ""; position: absolute; left: -27px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-accent);
}
.timeline-item .t-year { font-size: 18px; font-weight: 800; color: var(--c-primary); }
.timeline-item .t-text { color: var(--c-text); }

/* ---------- 18. 联系信息卡 ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-card { text-align: center; }
.contact-card .c-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.contact-card .c-icon svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 17px; margin-bottom: 6px; }
.contact-card p { font-size: 15px; color: var(--c-text); }
.contact-card a { color: var(--c-accent-dark); font-weight: 600; }

/* ---------- 19. 关于页 ---------- */
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.culture-card { text-align: center; padding: 32px 24px; }
.culture-card .c-icon { width: 52px; height: 52px; margin: 0 auto 14px; color: var(--c-accent); }
.culture-card h3 { font-size: 19px; margin-bottom: 8px; }
.culture-card p { font-size: 14px; color: var(--c-text); }

/* ---------- 20. 其他 ---------- */
.placeholder-img {
  background: linear-gradient(140deg, var(--c-primary), var(--c-primary-light));
  color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
  font-size: 14px; border-radius: 10px;
}
.empty { text-align: center; padding: 60px 0; color: var(--c-steel); }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--c-accent-dark); font-weight: 600; }

/* ---------- 21. 响应式 ---------- */
@media (max-width: 1024px) {
  /* 导航折叠：≤1024 用汉堡菜单，隐藏电话/按钮，避免横向溢出 */
  .header-cta { display: none; }
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; top: var(--header-h); left: auto; right: 0; bottom: 0;
    width: 86%; max-width: 340px; height: calc(100vh - var(--header-h));
    background: rgba(5, 30, 54, .98); flex-direction: column; padding: 24px;
    transform: translateX(105%); transition: transform .3s, visibility .3s;
    margin-left: 0; z-index: 1100; overflow-y: auto;
    visibility: hidden;                 /* 关闭态彻底不可见，避免任何几何偏差导致露出 */
  }
  .main-nav.open { transform: translateX(0); visibility: visible; }
  .main-nav a { padding: 14px 16px; font-size: 17px; }
  .services-grid, .features-grid, .cases-grid, .news-grid, .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .certs-grid { grid-template-columns: repeat(2, 1fr); }
  .process-row { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 52px 0; }
  .section-title { font-size: 26px; }
  .hero-title { font-size: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item + .stat-item::before { display: none; }
  .about-grid, .form-row { grid-template-columns: 1fr; }
  .about-grid { gap: 32px; }
  .services-grid, .features-grid, .cases-grid, .news-grid, .contact-cards { grid-template-columns: 1fr; }
  .process-row { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 40px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .culture-grid { grid-template-columns: 1fr; }
  .certs-grid { grid-template-columns: 1fr 1fr; }
  .page-hero h1, .page-hero .page-hero-title { font-size: 28px; }
}

/* ===== 右侧悬浮咨询栏 ===== */
.side-bars{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:999;display:flex;flex-direction:column;gap:10px}
.side-btn{position:relative;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#0B3D6E,#14609E);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(11,61,110,.35);cursor:pointer;text-decoration:none;transition:.2s}
.side-btn:hover{transform:translateY(-2px)}
.side-btn .sb-ico{font-size:22px;line-height:1}
.side-btn .sb-txt{font-size:10px;margin-top:2px;color:rgba(255,255,255,.9)}
.side-top{background:linear-gradient(135deg,#2AA4E8,#1B84C4)}
.side-consult{background:linear-gradient(135deg,#1B84C4,#14609E)}
.sb-pop{display:none;position:absolute;right:66px;top:50%;transform:translateY(-50%);background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:14px;white-space:nowrap;color:#0B2540;text-align:center;min-width:170px}
.side-btn.open .sb-pop{display:block}
.sb-pop b{font-size:16px;color:#0B3D6E;display:block}
.sb-pop img{width:150px;height:150px;border-radius:8px;display:block;margin:0 auto}
.sb-call{display:inline-block;margin-top:8px;padding:6px 16px;background:linear-gradient(135deg,#0B3D6E,#14609E);color:#fff;border-radius:20px;font-size:13px;text-decoration:none}
@media(max-width:768px){.side-bars{right:10px;bottom:70px}.side-btn{width:48px;height:48px}}
/* footer 品牌区（同 header 样式，白色文字） */
.f-logo .logo-text{color:#fff;margin-left:12px}
.f-logo .logo-text b{display:block;font-size:18px;color:#fff}
.f-logo .logo-text small{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:3px;font-weight:400}
.f-logo img{height:48px;width:auto;border-radius:10px}
/* 悬浮弹窗强化：fixed 右侧小窗，避免溢出 */
.sb-pop{display:none;position:fixed;right:80px;top:50%;transform:translateY(-50%);background:#fff;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:14px;color:#0B2540;text-align:center;max-width:200px;white-space:normal;z-index:1000}
.side-btn.open .sb-pop{display:block}
.sb-pop img{width:150px!important;height:150px!important;max-width:150px!important;border-radius:8px;display:block;margin:0 auto;object-fit:contain}
.sb-ico{font-size:22px;line-height:1}
/* 悬浮弹窗：强制默认隐藏，点击 .open 才显示 */
.sb-pop{display:none!important;position:fixed;right:86px;top:50%;transform:translateY(-50%);z-index:1001}
.side-btn.open .sb-pop{display:block!important}

/* 案例/详情布局（参考 wallart 两列） */
.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.detail-gallery .gallery-main{position:relative;border-radius:14px;overflow:hidden;background:#eef3f8}
.detail-gallery .gallery-main img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.detail-info h1{color:var(--c-ink)}
@media(max-width:768px){.detail-layout{grid-template-columns:1fr;gap:22px}}
/* 服务卡片专业配图 */
.service-card .service-img{margin:-24px -24px 16px;border-radius:12px 12px 0 0;overflow:hidden;background:#eef3f8;position:relative}
/* 6 张配图明暗/色调差异大，统一降饱和 + 品牌蓝叠加，让栅格色调一致 */
.service-card .service-img img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .35s;filter:saturate(.78) contrast(1.04) brightness(1.04)}
.service-card .service-img::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(165deg,rgba(11,61,110,.26) 0%,rgba(20,96,158,.12) 50%,rgba(11,61,110,.36) 100%)}
.service-card:hover .service-img img{transform:scale(1.04)}
/* 新闻图文卡片 */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:768px){.news-grid{grid-template-columns:1fr}}
.news-card{overflow:hidden;padding:0!important;display:flex;flex-direction:column}
.news-thumb{height:210px;overflow:hidden;background:#eef3f8}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.news-card:hover .news-thumb img{transform:scale(1.05)}
.news-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.news-body .meta{margin-bottom:10px}
.news-body h3{font-size:20px;margin-bottom:10px;color:var(--c-ink)}
.news-body p{font-size:14px;color:var(--c-steel);line-height:1.7}
/* 首页新闻段：3 条刚好一行（否则 2 列会空出右半格） */
.news-grid-home{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.news-grid-home{grid-template-columns:1fr}}
/* 新闻详情页封面图 */
.post-cover{margin:0 0 26px;border-radius:12px;overflow:hidden;background:#eef3f8}
.post-cover img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
/* 分页条 */
.pager{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:44px}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--c-line);background:#fff;color:var(--c-ink);font-size:14px;text-decoration:none;transition:all .25s}
.pg-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}
.pg-btn.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:600}
/* 社交矩阵（关注我们） */
.social-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1120px;margin:0 auto}
@media(max-width:992px){.social-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.social-grid{grid-template-columns:repeat(2,1fr)}}
.social-card{background:#fff;border-radius:14px;padding:26px 18px;text-align:center;box-shadow:0 3px 16px rgba(11,61,110,.06);border:1px solid #eef3f8}
.social-card .s-ico{font-size:32px;margin-bottom:10px}
.social-card h3{font-size:16px;margin-bottom:6px;color:var(--c-ink)}
.social-card p{font-size:12px;color:var(--c-steel);margin-bottom:16px;line-height:1.5}
.qr-ph{height:96px;border:1px dashed #c9d9e8;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#9db4cc;background:#f6fafd}
/* 社交卡二维码图 */
.qr-ph{overflow:hidden}
.qr-ph img.qr-img{width:100%;height:auto;max-height:110px;object-fit:contain;border:none}
/* 社交矩阵 · 大气版（配合 1680 宽屏，3列大卡 + 大二维码） */
.social-grid{max-width:1360px!important;grid-template-columns:repeat(3,1fr)!important;gap:30px}
@media(max-width:992px){.social-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.social-grid{grid-template-columns:1fr!important}}
.social-card{padding:36px 26px}
.social-card .s-ico{font-size:42px;margin-bottom:12px}
.social-card h3{font-size:21px;margin-bottom:8px}
.social-card p{font-size:13px;margin-bottom:20px}
.qr-ph{height:220px!important;border-radius:14px}
.qr-ph img.qr-img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain;padding:6px}
/* 社交矩阵 · 一排放 5 卡 + 大二维码（撑满宽屏） */
.social-grid{max-width:100%!important;grid-template-columns:repeat(5,1fr)!important;gap:26px}
@media(max-width:1200px){.social-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:900px){.social-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.social-grid{grid-template-columns:1fr!important}}
.social-card{padding:38px 22px}
.qr-ph{height:250px!important;border-radius:14px}
.qr-ph img.qr-img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain;padding:8px}
/* ===== 二维码统一规格（覆盖以上全部历史规则：96/220/250/190 五套冲突高度）=====
   方框随卡片宽度自适应 + 白底 + contain 不裁切 → 5 张卡外观一致 */
.qr-ph{height:auto!important;aspect-ratio:1/1;border:1px solid #e8f0f8!important;border-radius:14px!important;background:#fff!important;padding:0!important;overflow:hidden!important}
.qr-ph img.qr-img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;padding:14px!important;background:#fff}
/* 为什么选择卓域 */
/* 为什么选择卓域 · 两栏(左优势+右CTA) */
/* 为什么选择卓域 · 4卡一排 + 下方全宽CTA */
/* 联系页右侧两卡对齐（工作时间+服务区域等高） */
.contact-side{display:flex;flex-direction:column;gap:24px}
.contact-side .card{flex:1;display:flex;flex-direction:column}
.contact-side .card h3{color:var(--c-ink)}
.contact-side .card p,.contact-side .card li{color:var(--c-text)}
/* 右侧两卡撑满高度（服务区域卡填满，与左留言卡对齐） */
.contact-side{display:flex;flex-direction:column;gap:24px;height:100%}
/* 左留言卡：撑满行高，提交按钮沉到底部 → 与右栏底边对齐（2026-09-14） */
.contact-form-grid > .form-card{display:flex;flex-direction:column;height:100%}
.contact-form-grid > .form-card form{display:flex;flex-direction:column;flex:1 1 auto}
.contact-form-grid > .form-card form .btn{ margin-top:auto; align-self:flex-start; }
/* 留言板加高（原 130px 偏矮） */
.form-group textarea{min-height:200px}
/* 验证码 */
.form-captcha .captcha-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha-q{display:inline-flex;align-items:center;justify-content:center;min-width:118px;height:44px;padding:0 14px;
  background:#F1F6FB;border:1px solid var(--c-line);border-radius:8px;font-size:17px;font-weight:700;
  color:var(--c-ink);letter-spacing:1px;user-select:none}
.form-captcha input[name=captcha_answer]{width:130px!important;flex:0 0 auto;text-align:center;font-size:17px;letter-spacing:2px}
.captcha-refresh{height:44px;padding:0 14px;border:1px solid var(--c-line);border-radius:8px;background:#fff;
  color:var(--c-accent-dark);font-size:14px;cursor:pointer;transition:all .2s}
.captcha-refresh:hover{border-color:var(--c-accent);background:#F7FBFF}
.contact-side .card{flex:0 0 auto}
.contact-side .card:last-child{flex:1 1 auto}
.contact-side .card:last-child ul{height:100%;display:flex;flex-direction:column;justify-content:space-between}
/* 为什么选择卓域 · 左右两栏（左优势 + 右CTA蓝卡，填满高度） */
/* 为什么选择卓域 · 标题单独一行+背景，左右等高 */
/* 为什么选择卓域 · 浅蓝只给标题区，内容区正常背景 */
/* 右蓝卡撑满高度，与左4条对齐 */
/* 强制左右等高（右蓝卡=左高度） */
/* 最终：右蓝卡绝对填满左高度（覆盖全部旧 why 规则） */
/* ===== 最终：为什么选择卓域 左右等高 ===== */
/* 标准 grid 等高（去掉无用 height:100%），左右=行高，4卡flex撑满 */
/* table-cell 天然等高（最可靠） */
/* 为什么选择卓域（唯一干净版·左右等高） */
.why-section{background:none;padding:70px 0 40px}
.why-section .why-head{background:linear-gradient(90deg,#dcecf9,#eaf5fd);border:1px solid #cfe3f5;border-radius:16px;padding:26px 20px;text-align:center;margin-bottom:36px}
.why-section .why-head .section-title{margin-bottom:0}
.why-wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;align-items:stretch}
.why-list{display:flex;flex-direction:column;gap:14px}
.why-item{flex:1;display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #eef3f8;border-radius:14px;padding:20px 22px;box-shadow:0 3px 16px rgba(11,61,110,.06)}
.why-item .wi{font-size:30px;line-height:1}
.why-item h3{font-size:17px;color:#0B3D6E;margin:0 0 4px}
.why-item p{font-size:13px;color:#5a6b7f;margin:0;line-height:1.6}
.why-cta{display:flex}
.why-cta .cta-glow{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;background:linear-gradient(135deg,#0B3D6E,#14609E);border-radius:18px;padding:40px 28px;color:#fff;text-align:center;box-shadow:0 14px 34px rgba(11,61,110,.28)}
.why-cta .cta-glow .cta-ico{font-size:46px;margin-bottom:10px}
.why-cta .cta-glow h3{font-size:23px;color:#fff;margin:0 0 8px}
.why-cta .cta-glow p{font-size:13px;color:rgba(255,255,255,.82);margin:0 0 16px;line-height:1.6}
.cta-tel{margin:6px 0 16px}
.cta-tel small{display:block;font-size:12px;color:#9FD9F7;margin-bottom:2px}
.cta-tel b{font-size:30px;color:#fff}
.cta-note{font-size:12px;color:rgba(255,255,255,.62);margin-top:14px}
@media(max-width:768px){.why-wrap{grid-template-columns:1fr}}

/* ========== 移动端·原地响应式（≤1024 平板 / ≤768 手机）========== */
.m-footer-bar{display:none}
@media(max-width:1024px){
  .services-grid,.cases-grid,.news-grid,.social-grid{grid-template-columns:repeat(2,1fr)!important}
  .why-wrap{grid-template-columns:1.1fr 1fr!important}
}
@media(max-width:768px){
  /* 底部固定联系条 */
  .m-footer-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#fff;border-top:1px solid #e3edf6;box-shadow:0 -4px 14px rgba(11,61,110,.08)}
  .mfb{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 6px;font-size:16px;font-weight:600;text-decoration:none}
  .mfb-tel{background:linear-gradient(135deg,#0B3D6E,#14609E);color:#fff}
  .mfb-msg{background:#eef6fd;color:#0B3D6E}
  body{padding-bottom:60px}
  /* 容器与排版 */
  .container{padding:0 16px}
  .section{padding:42px 0}
  .page-hero{padding:28px 0}
  .page-hero h1,.page-hero .page-hero-title{font-size:22px}
  .section-title{font-size:24px}
  .section-sub{font-size:14px}
  .site-header{padding:8px 0}
  .header-cta .header-phone b{font-size:15px}
  /* 网格全部单列/两列收窄 */
  .services-grid,.cases-grid,.news-grid,.social-grid,.why-grid,.contact-grid,.why-wrap,.detail-layout{grid-template-columns:1fr!important}
  .case-card,.service-card,.news-card{margin-bottom:0}
  /* 图片自适应 */
  .service-img img,.case-cover img,.news-thumb img,.gallery-main img,.card img,.about-img img{width:100%;height:auto}
  /* header 导航抽屉（汉堡） */
  .main-nav{position:fixed;top:0;right:0;bottom:0;left:auto;width:78%;max-width:320px;height:100vh;background:#0B3D6E;flex-direction:column;padding:70px 20px 30px;transform:translateX(105%);transition:transform .28s,visibility .28s;z-index:1100;margin:0;gap:4px;overflow-y:auto;visibility:hidden}
  .main-nav.open{transform:translateX(0);visibility:visible}
  .main-nav a{font-size:17px;padding:14px 12px;color:#fff}
  .nav-toggle{z-index:1200}
  .main-nav.open~.header-cta{display:none}
  /* 页脚单列 */
  .footer-grid{grid-template-columns:1fr!important;gap:26px}
  /* 悬浮咨询栏避让底部条 */
  .side-bars{right:8px;bottom:74px}
  .side-btn{width:46px;height:46px}
  /* 表单触控友好 */
  .form-card input,.form-card textarea,.form-card select,.contact-side input{font-size:16px!important;padding:11px 12px}
  .btn{min-height:44px;padding:11px 22px}
  .why-card{padding:22px 16px}
  .why-cta .cta-glow{padding:30px 20px}
  .social-card{padding:24px 14px}
  .qr-ph{height:190px}
}
/* 服务保障4图：手机 2x2 自适应 */
@media(max-width:768px){
  .promo-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .promo-card{border-radius:12px;overflow:hidden}
  .promo-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
}
/* ====== 移动端修复（2026-09-13）======
   1) 全站横向溢出兜底：汉堡抽屉是 position:fixed + translateX(105%)，
      曾经把文档撑到 656px（视口 476px）→ 全站可横向拖动。必须兜住。
   2) 以下两处原来是内联 style 的栅格，媒体查询压不过内联样式，移动端永不堆叠。 */
html, body { overflow-x: hidden; max-width: 100%; }

/* 服务详情页：正文 + 320px 侧栏 */
.svc-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .svc-layout { grid-template-columns: 1fr; gap: 26px } }

/* 在线留言区：表单 + 联系方式 */
.contact-form-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: stretch; }
@media (max-width: 900px) { .contact-form-grid { grid-template-columns: 1fr; gap: 26px } }
/* ====== 移动端页脚收尾优化（2026-09-13）======
   原来手机上页脚是「一整根长列」（品牌+6+6+6+版权 ≈19 行 ≈1470px），
   观感拖沓。改为：品牌块与联系方式各占整行，两个导航列并排成两列，
   并整体收紧行距；同时给右侧悬浮按钮留出避让宽度，避免 375px 真机压字。 */
@media (max-width: 768px) {
  .site-footer { padding: 34px 0 0; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 18px !important;
    padding-right: 52px;          /* 避让右侧悬浮按钮 */
    padding-bottom: 24px;
  }
  .footer-grid > .footer-col:nth-child(1) { grid-column: 1 / -1; }  /* 品牌块整行 */
  .footer-grid > .footer-col:nth-child(4) { grid-column: 1 / -1; }  /* 联系方式整行 */
  .f-logo img { height: 40px; }
  .f-logo .logo-text b { font-size: 16px; }
  .f-logo .logo-text small { font-size: 11px; }
  .footer-col h4 { font-size: 15px; margin-bottom: 12px; padding-bottom: 8px; }
  .footer-col ul li { margin-bottom: 7px; }
  .footer-col ul a { font-size: 13.5px; }
  .footer-contact li { font-size: 13px; margin-bottom: 9px; }
  .footer-contact { padding-right: 0; }
  /* 版权行是长文本，居中会让右端钻到右侧悬浮按钮下面 → 移动端改左对齐 + 右留避让 */
  .site-footer .footer-bottom { padding: 14px 56px 16px 0; text-align: left; font-size: 12px; line-height: 1.9; }
  .site-footer .footer-bottom a { white-space: nowrap; }   /* 备案号整串不拆行 */
}
/* 更窄的手机（≤420）：两列再紧凑一点，避免长服务名换行太多 */
@media (max-width: 420px) {
  .footer-grid { gap: 20px 14px !important; padding-right: 48px; }
  .footer-col ul a { font-size: 13px; }
}
/* ====== 移动端压缩高度：卡片栅格改两列（2026-09-13）======
   用户反馈「单列的区块都改两列更好，主要是高度太高」。
   注意：两列后必须把「按单列宽度定」的尺寸重算，否则卡片又窄又高。 */
@media (max-width: 768px) {

  /* ---- 卡片栅格 → 两列 ---- */
  .services-grid,
  .cases-grid,
  .news-grid,
  .news-grid-home,
  .features-grid,
  .culture-grid,
  .social-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  /* ---- 区块间距整体收紧（一页很多区块，累计很可观）---- */
  .section { padding: 30px 0; }
  .section-head { margin-bottom: 24px; }

  /* ---- 卡片内距：28px 在两列（约170px宽）里太奢侈 ---- */
  .services-grid > .card,
  .cases-grid > .card,
  .features-grid > .card,
  .culture-grid > .card { padding: 14px; }
  .card:hover { transform: none; }   /* 手机上无 hover，去掉位移 */

  /* ---- 服务卡 ---- */
  .service-card .service-img { margin: -14px -14px 10px; }
  .service-card .service-img img { aspect-ratio: 16/11; }
  .service-card h3 { font-size: 15px; margin-bottom: 5px; }
  .service-card p { font-size: 12.5px; line-height: 1.55; }
  .service-card .more { font-size: 12.5px; margin-top: 8px; }

  /* ---- 案例卡（封面 170px 是为单列定的，两列必须压到 104）---- */
  .case-card .case-cover { height: 104px; margin-bottom: 10px; border-radius: 9px; }
  .case-card .meta { gap: 5px; margin-bottom: 7px; }
  .case-card .meta .tag { font-size: 10.5px; padding: 2px 7px; }
  .case-card h3 { font-size: 14px; margin-bottom: 5px; }
  .case-card p { font-size: 12px; line-height: 1.5; }

  /* ---- 新闻卡（缩略图 210px → 104）---- */
  .news-thumb { height: 104px; }
  .news-body { padding: 11px 11px 13px; }
  .news-body .meta { font-size: 11px; margin-bottom: 6px; }
  .news-body h3 { font-size: 14px; margin-bottom: 6px; }
  .news-body p { font-size: 12px; line-height: 1.5; }
  .news-body .more { font-size: 12px; margin-top: 8px; }

  /* ---- 首页新闻卡沿用列表卡样式 ---- */
  .news-grid-home .news-card .meta { font-size: 11px; }

  /* ---- 关注我们：5 个二维码卡（padding 38px 是大卡版，两列要收）---- */
  .social-card { padding: 14px 10px; }
  .social-card .s-ico { font-size: 24px; margin-bottom: 6px; }
  .social-card h3 { font-size: 14px; margin-bottom: 4px; }
  .social-card p { font-size: 11px; margin-bottom: 10px; line-height: 1.45; }
  .qr-ph { border-radius: 10px !important; }
  .qr-ph img.qr-img { padding: 8px !important; }

  /* ---- 使命/愿景/价值观、特色卡 ---- */
  .culture-grid .card h3, .features-grid .card h3 { font-size: 15px; }
  .culture-grid .card p, .features-grid .card p { font-size: 12.5px; line-height: 1.55; }

  /* ---- 服务流程（5 步）已是两列，收紧一下 ---- */
  .process-row { gap: 10px; }
  .process-step { padding: 16px 10px; }
  .process-step h4 { font-size: 14px; margin-bottom: 5px; }
  .process-step p { font-size: 12px; line-height: 1.5; }

  /* ---- 资质证书（已是两列，收紧）---- */
  .certs-grid { gap: 12px; }
  .cert-card { padding: 12px 10px; }
  .cert-card h4 { font-size: 12.5px; line-height: 1.45; }

  /* ---- 数据统计条 ---- */
  .stat-num { font-size: 30px; }
  .stat-label { font-size: 12.5px; }
}

/* 更窄的手机（≤420）再压一档 */
@media (max-width: 420px) {
  .services-grid,
  .cases-grid,
  .news-grid,
  .news-grid-home,
  .features-grid,
  .culture-grid,
  .social-grid { gap: 10px; }
  .service-card h3, .case-card h3 { font-size: 13.5px; }
  .news-body h3 { font-size: 13.5px; }
  .case-card .case-cover, .news-thumb { height: 96px; }
}

/* ====== 首页新闻段改 4 条后：桌面必须 4 列一排摆满 ======
   原来 .news-grid-home 是 3 列（配 3 条），改成 4 条后 3 列会剩 1 个孤儿。
   移动端两列见下方 @media(max-width:768px) 的 !important 规则。 */
.news-grid-home { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.news-grid-home .news-thumb { height: 158px; }
.news-grid-home .news-body { padding: 16px 16px 18px; }
.news-grid-home .news-body h3 { font-size: 16px; }
.news-grid-home .news-body p { font-size: 13px; }
@media (max-width: 1024px) { .news-grid-home { grid-template-columns: repeat(2, 1fr); } }

/* ====== 页脚小程序码（行动入口，2026-09-13）======
   桌面：突出「扫码」；手机：手机扫不了自己屏幕，切换成「长按识别」 */
.f-qr { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.f-qr-img {
  width: 112px; height: 112px; flex-shrink: 0; padding: 6px;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.f-qr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.f-qr-txt b { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 6px; letter-spacing: .3px; }
.f-qr-txt span { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.65; }
.f-qr-txt b.f-qr-m { display: none; }   /* 手机文案默认隐藏（必须带 .f-qr-txt 提高特异性）*/

@media (max-width: 768px) {
  .f-qr { margin-top: 18px; gap: 12px; }
  .f-qr-img { width: 100px; height: 100px; border-radius: 10px; }
  .f-qr-txt b.f-qr-pc { display: none; }   /* 桌面文案隐藏 */
  .f-qr-txt b.f-qr-m { display: block; }   /* 手机文案显示 */
  .f-qr-txt b { font-size: 14px; margin-bottom: 5px; }
  .f-qr-txt span { font-size: 12px; }
}
/* ====== 移动端压高度 · 第二轮（2026-09-13）======
   逐区块实测后对症下药，主要靠「卡片摘要限行 + 收紧桌面遗留的大 padding」 */

@media (max-width: 768px) {

  /* ---- ① 卡片摘要/标题限行（最大收益：窄列里 52 字摘要会换 6~7 行）---- */
  .news-body p,
  .case-card p,
  .service-card p,
  .features-grid .card p,
  .culture-grid .card p,
  .why-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news-body h3,
  .case-card h3,
  .service-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 卡片里的「了解详情 / 阅读全文」不再被 flex 撑到底部 */
  .news-body .more, .service-card .more { margin-top: 8px; }

  /* ---- ② hero：.hero-inner 原来是桌面值 padding 96px 0 88px ---- */
  .hero-inner { padding: 30px 0 28px; }
  .hero p, .hero-sub { font-size: 13.5px; line-height: 1.65; }

  /* ---- ③ 数据统计条 ---- */
  .stats-band { padding: 14px 0; }
  .stat-num { font-size: 26px; }
  .stat-label { font-size: 12px; }
  .stats-grid { padding: 4px; }

  /* ---- ④ 服务流程：5 步 2 列 = 3 行 → 3 列 = 2 行 ---- */
  .process-row { grid-template-columns: repeat(3, 1fr) !important; gap: 9px; }
  .process-step { padding: 13px 8px; }
  .process-step h4 { font-size: 13px; margin-bottom: 4px; }
  .process-step p {
    font-size: 11.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ---- ⑤ 联系页「为什么选择卓域」：4 项竖排 → 两列 ---- */
  .why-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .why-item { padding: 12px 10px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .why-item .wi { font-size: 22px; }
  .why-item h3 { font-size: 14px; }
  .why-cta .cta-glow { padding: 24px 16px; }
  .why-cta .cta-glow h3 { font-size: 19px; }
  .cta-tel b { font-size: 24px; }

  /* ---- ⑥ 关于预览配图限高（原来全宽无限高，能占 320px+）---- */
  .about-grid { gap: 20px !important; }
  .about-img img, .about-grid img { max-height: 210px; width: 100%; object-fit: cover; }

  /* ---- ⑦ 区块头收紧 ---- */
  .section-head { margin-bottom: 20px; }
  .section-title { font-size: 22px; }
  .section-sub { font-size: 13.5px; }

  /* ---- ⑧ 在线留言表单（联系页 1405px）---- */
  .form-card { padding: 18px 14px !important; }
  .form-card h2 { font-size: 20px !important; }

  /* ---- ⑨ 社交二维码卡再压一档 ---- */
  .social-card { padding: 12px 8px; }
  .social-card .s-ico { font-size: 20px; margin-bottom: 4px; }
  .social-card h3 { font-size: 13px; }
  .social-card p { font-size: 10.5px; margin-bottom: 8px; }
  .qr-ph img.qr-img { padding: 6px !important; }

  /* ---- ⑩ 案例/新闻区块底部的「查看全部」按钮收紧 ---- */
  .center.mt-32 { margin-top: 18px !important; }

  /* ---- ⑪ CTA 条 ---- */
  .cta-band { padding: 22px 18px !important; }
  .cta-band h2 { font-size: 18px !important; }
  .cta-band p { font-size: 13px !important; }
}

/* ====== 移动端压高度 · 第三轮：区块头与间距（2026-09-13）======
   首页有 8 个区块，每个区块的「eyebrow+标题+副标题+上下 padding+底部按钮」
   累计约占 2000px。把它们整体收紧。 */
@media (max-width: 768px) {
  .section { padding: 24px 0; }
  .section-head { margin-bottom: 16px; }
  .section-eyebrow { font-size: 11px; letter-spacing: 1px; margin-bottom: 6px; }
  .section-title { font-size: 20px; margin-bottom: 6px; }
  .section-sub { font-size: 12.5px; line-height: 1.55; margin-top: 4px; }
  .center.mt-32 { margin-top: 14px !important; }
  .cta-band { padding: 18px 14px !important; }
  .cta-band h2 { font-size: 17px !important; margin-bottom: 4px !important; }
  .cta-band p { font-size: 12.5px !important; }
  .page-hero { padding: 16px 0; }
  .page-hero h1, .page-hero .page-hero-title { font-size: 20px; }
  .crumb { font-size: 12px; }
  .footer-grid { padding-bottom: 18px; }
  .footer-bottom { padding: 12px 56px 14px 0; }
  .stats-band { padding: 10px 0; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 11.5px; }
}

/* ====== 3D 图标（算力机出图 · 2026-09-13）======
   图片存在时替换原来的「蓝渐变方块+白SVG」和 emoji；
   不存在时模板会自动回退，这里只是给图片定尺寸。 */
.service-card .icon-img { width: 68px; height: 68px; margin-bottom: 16px; }
.service-card .icon-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.feature-card .icon-img { width: 60px; height: 60px; margin: 0 auto 12px; }
.feature-card .icon-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.why-item .wi-icon { width: 46px; height: 46px; flex-shrink: 0; }
.why-item .wi-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cta-glow .cta-ico img { width: 62px; height: 62px; object-fit: contain; display: block; margin: 0 auto; }

@media (max-width: 768px) {
  .service-card .icon-img { width: 52px; height: 52px; margin-bottom: 10px; }
  .feature-card .icon-img { width: 48px; height: 48px; margin-bottom: 8px; }
  .why-item .wi-icon { width: 36px; height: 36px; }
  .cta-glow .cta-ico img { width: 52px; height: 52px; }
}
/* ====== 联系人（专人对接）====== */
.contact-persons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.cp-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(11,61,110,.04), rgba(42,164,232,.07));
  border: 1px solid var(--c-line); border-radius: 12px;
  color: inherit; text-decoration: none; transition: all .25s;
}
.cp-item:hover { border-color: var(--c-accent); transform: translateX(3px); }
.cp-ico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light)); color: #fff;
}
.cp-ico svg { width: 17px; height: 17px; }
.cp-body b { display: block; font-size: 15px; color: var(--c-ink); line-height: 1.3; }
.cp-body em { font-style: normal; font-size: 14px; color: var(--c-accent-dark); font-weight: 600; letter-spacing: .3px; }

@media (max-width: 768px) {
  .cp-item { padding: 10px 12px; gap: 10px; }
  .cp-ico { width: 30px; height: 30px; border-radius: 9px; }
  .cp-body b { font-size: 14px; }
  .cp-body em { font-size: 13.5px; }
}
/* 资质证书网格：4 列 → 3 列（6 张正好两行，且为后续新增资质预留整齐排布） */
.certs-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .certs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .certs-grid { grid-template-columns: repeat(2, 1fr); } }
/* 承诺区 8 条：桌面 4 列 x 2 行 */
.features-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
/* ====== FAQ（常见问题）样式 —— 原来压根没有，靠浏览器默认样式在撑 ====== */
.faq-wrap { max-width: 940px; margin: 0 auto; }
.faq-group { margin-bottom: 34px; scroll-margin-top: 96px; }
.faq-cat {
  font-size: 19px; color: var(--c-ink); margin-bottom: 14px;
  padding-left: 12px; border-left: 4px solid var(--c-accent); line-height: 1.3;
}
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 0; overflow: hidden; transition: all .25s;
}
.faq-item[open] { border-color: var(--c-accent); box-shadow: 0 6px 20px rgba(11,61,110,.08); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 18px;
  font-size: 15.5px; font-weight: 600; color: var(--c-ink); position: relative; line-height: 1.55;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 400; color: var(--c-accent); transition: transform .25s; line-height: 1;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--c-primary); }
.faq-answer {
  padding: 0 18px 18px; font-size: 14.5px; line-height: 1.85; color: var(--c-text);
  border-top: 1px dashed var(--c-line); margin-top: 0; padding-top: 14px;
}
/* 服务页/服务详情的 FAQ 也用同一套（原来是无样式） */
.faq-list .faq-item p { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.85; color: var(--c-text); margin: 0; }

@media (max-width: 768px) {
  .faq-cat { font-size: 17px; margin-bottom: 10px; }
  .faq-item summary { padding: 14px 42px 14px 14px; font-size: 14.5px; }
  .faq-answer, .faq-list .faq-item p { padding: 0 14px 14px; font-size: 13.5px; line-height: 1.75; }
  .faq-item summary::after { right: 14px; }
  .faq-group { margin-bottom: 26px; }
}
/* ====== FAQ 宽版（用户要求：原 900px 限宽太窄，与上方卡片不协调）====== */
.faq-list-wide {
  max-width: 1100px;
  margin: 0 auto;
}
.faq-list-wide .faq-item summary { font-size: 16px; }
.faq-list-wide .faq-item p,
.faq-list-wide .faq-answer { font-size: 15px; line-height: 1.9; }

@media (max-width: 1024px) { .faq-list-wide { max-width: 100%; } }
@media (max-width: 768px) {
  .faq-list-wide .faq-item summary { font-size: 14.5px; }
  .faq-list-wide .faq-item p,
  .faq-list-wide .faq-answer { font-size: 13.5px; }
}

/* 页脚联系人备注（微信同号）：单独一行、小字、不断字 */
.footer-contact .f-ct-note {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: rgba(255,255,255,.5);
  margin-top: 2px;
  letter-spacing: .3px;
}
.footer-contact li a { white-space: nowrap; }
@media (max-width: 768px) {
  .footer-contact li a { white-space: normal; }
  .footer-contact .f-ct-note { font-size: 11.5px; }
}

/* ===== 联系页左右两栏底部对齐（2026-09-14）===== */
/* 右栏：最后一张卡撑满剩余高度，与左侧表单卡底边对齐 */
.contact-form-grid > .contact-side { height: 100%; }
.contact-form-grid > .contact-side .card:last-child { flex: 1 1 auto; }
/* 左栏表单卡：内容撑满，提交按钮贴底（避免左卡比右栏短时中间空） */
.contact-form-grid > .form-card { height: 100%; }

/* ===== 悬浮电话浮窗：联系人姓名+多号码（2026-09-14）===== */
.sb-pop-tel{min-width:190px;padding:12px 14px}
.sb-ct{padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.08)}
.sb-ct:last-of-type{border-bottom:0}
.sb-ct-name{font-size:13px;font-weight:700;color:#0B2540;margin-bottom:3px}
.sb-ct-tel{display:block;font-size:15px;font-weight:700;color:#2AA4E8;line-height:1.55;text-decoration:none;letter-spacing:.3px}
.sb-ct-tel:hover{color:#1B84C4;text-decoration:underline}
.sb-ct-note{font-size:11px;color:#9099a6;margin-top:2px}
.sb-pop-tel .sb-call{margin-top:9px;display:block;text-align:center}


/* ==========================================================================
   长期战略合作伙伴（新增页面，2026-10-18）
   · 只新增 .partner-* 类，不改动上面任何既有规则
   · 竖版海报 3:4 栅格：桌面 3 列 / 平板 2 列 / 手机 1 列
   ========================================================================== */
.partner-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.partner-card { display: block; background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(42,164,232,.4); }
.partner-poster { position: relative; aspect-ratio: 3 / 4; background: var(--c-bg-alt); overflow: hidden; }
.partner-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.partner-card:hover .partner-poster img { transform: scale(1.03); }
.partner-body { padding: 16px 18px 18px; }
.partner-body h3 { font-size: 17px; line-height: 1.45; margin-bottom: 8px; color: var(--c-ink); }
.partner-body .partner-sub { font-size: 13px; line-height: 1.75; color: var(--c-text); margin-top: 8px; }
.partner-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.partner-detail { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 40px; align-items: start; }
.partner-detail-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  background: var(--c-bg-alt); aspect-ratio: 3 / 4; }
.partner-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-detail-info h1 { font-size: 30px; line-height: 1.32; margin-bottom: 12px; color: var(--c-ink); }
.partner-facts { margin: 22px 0 26px; border-top: 1px solid var(--c-line); }
.partner-facts .pf-row { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; line-height: 1.8; }
.partner-facts .pf-k { flex: 0 0 84px; color: var(--c-steel); }
.partner-facts .pf-v { flex: 1; color: var(--c-text); }
.partner-note { font-size: 12px; color: var(--c-steel); line-height: 1.9; margin-top: 16px; }
@media (max-width: 992px) {
  .partner-wall { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .partner-detail { grid-template-columns: 1fr; gap: 26px; }
  .partner-detail-img { max-width: 420px; }
  .partner-detail-info h1 { font-size: 25px; }
}
@media (max-width: 640px) {
  .partner-wall { grid-template-columns: 1fr; }
}