/* 浅色主题层（加载顺序最后）
   参照 HeyGears 官网的视觉系统：
   主蓝 #3760EA、白底 #FFFFFF / #F8F9FE、近黑文字 #151413、灰边框 #EBEBEB，
   胶囊按钮（19px 圆角）、卡片 4px 圆角、无衬线字体、浅色为主。 */

:root {
  /* 主色：品牌蓝 */
  --accent: #3760ea;
  --accent-dark: #2b4fd0;
  --accent-soft: rgba(55, 96, 234, 0.08);
  --accent-ink: #2b4fd0;
  /* 次级蓝 */
  --teal: #236fa1;
  --teal-soft: rgba(35, 111, 161, 0.1);

  /* 浅色面 */
  --light-000: #ffffff;
  --light-100: #f8f9fe;
  --line-light: #ebebeb;
  --text-strong: #151413;
  --text-body: #4a4d52;
  /* 比黑格原站的 #8a8e95 深一档：白底上 3.1:1 不达标，这里保证 ≥4.8:1 */
  --text-muted: #6b7078;

  /* 少量深色块（报价表单）保留 */
  --dark-900: #101114;
  --dark-850: #15171c;
  --dark-800: #1b1e24;
  --dark-700: #22262d;
  --line-dark: rgba(255, 255, 255, 0.12);
  --text-inv: #f4f6fa;
  --text-inv-muted: #9aa1ab;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --radius-card: 4px;
  --radius-control: 19px;
  --section-y: clamp(64px, 7.5vw, 118px);
}

/* 标题回到无衬线，字重更稳 */
h1, h2, h3, .statement__title, .sol-hero h1, .case-hero h1, .case-study__brand h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

/* 按钮：胶囊 */
.btn { border-radius: 19px; padding: 12px 22px; font-weight: 600; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: #fff; border-color: var(--line-light); color: var(--text-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.section--dark .btn--ghost,
.hero2 .btn--ghost { background: #fff; border-color: var(--line-light); color: var(--text-strong); }
.icon-btn { border-radius: 50%; border-color: var(--line-light); background: #fff; color: var(--text-strong); }
.icon-btn:hover { background: var(--light-100); border-color: var(--accent); color: var(--accent); }

/* 首屏：浅色 + 大标题 */
.hero2 { background: #fff; border-bottom: 1px solid var(--line-light); }
.hero2__vertical { display: none; }
.hero2__tag { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.hero2__tag::after { background: var(--accent); width: 38px; }
.hero2 h1 { color: var(--text-strong); }
.hero2 h1 em { color: var(--accent); font-style: normal; }
.hero2__lead { color: var(--text-muted); }
.hero2__media { background: var(--light-100); border: 1px solid var(--line-light); border-radius: 4px; margin-right: 0; }
.hero2__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.hero2__media figcaption { background: #fff; border-top: 1px solid var(--line-light); color: var(--text-muted); font-style: normal; }
.hero2__dots button { background: #dfe3ea; border-radius: 999px; }
.hero2__dots button.is-active { background: var(--accent); }

/* 指标带：浅色 */
.metrics { background: var(--light-100); border-block: 1px solid var(--line-light); }
.metric { border-left: 1px solid var(--line-light); }
.metric:first-child { border-left: 0; }
.metric__value { color: var(--accent); }
.metric__label { color: var(--text-muted); }

/* 品牌主张 */
.statement { background: #fff; border-bottom: 1px solid var(--line-light); }
.statement__eyebrow { color: var(--accent); }
.statement__title { color: var(--text-strong); }
.statement__body p { color: var(--text-body); }

/* 统一浅色区块 */
.section { background: #fff; }
.section--tint { background: var(--light-100); }
.section--dark { background: var(--light-100); color: var(--text-body); }
.section--dark h2, .section--dark h3 { color: var(--text-strong); }
.section--dark .section__lead { color: var(--text-body); }
.section__head { border-bottom-color: var(--line-light); }
.section--dark .section__head { border-bottom-color: var(--line-light); }
.section__eyebrow { color: var(--accent-ink); font-family: var(--font-display); letter-spacing: 0.06em; }
.section--dark .section__eyebrow { color: var(--accent); }

/* 工艺图集：浅色画廊 */
.layer-band { background: #fff; color: var(--text-body); }
.layer-band h2 { color: var(--text-strong); }
.layer-band__lead { color: var(--text-muted); }
.gallery__stage { border-color: var(--line-light); background: var(--light-100); border-radius: 4px; }
.gallery__caption { color: var(--text-muted); font-style: normal; }
.gallery__thumbs img { border-color: var(--line-light); opacity: 0.7; border-radius: 4px; }
.gallery__thumbs button.is-active img { border-color: var(--accent); opacity: 1; }
.gallery__thumbs span { color: var(--text-muted); }
.gallery__thumbs button.is-active span { color: var(--text-strong); }
.layer-band__specs { background: var(--line-light); border-color: var(--line-light); }
.layer-band__specs > div { background: #fff; }
.layer-band__specs dt { color: var(--text-muted); }
.layer-band__specs dd { color: var(--text-strong); }

/* 工艺流程：白卡 + 灰线 */
.process__steps { background: var(--line-light); border-color: var(--line-light); }
.process__step { background: #fff; color: var(--text-body); }
.process__step span { color: var(--text-muted); }
.process__step:hover { background: var(--light-100); color: var(--text-strong); }
.process__step.is-active { background: var(--accent-soft); color: var(--text-strong); box-shadow: inset 3px 0 0 var(--accent); }
.process__step.is-active span { color: var(--accent); }
.process__panels { background: #fff; border-color: var(--line-light); }
.process__panel h3 { color: var(--text-strong); }
.process__panel p { color: var(--text-body); }
.chips span { border-color: var(--line-light); background: var(--light-100); color: var(--text-muted); }

/* 计算器 */
.calc { background: #fff; border-color: var(--line-light); }
.calc__intro h3 { color: var(--text-strong); }
.calc__intro p { color: var(--text-muted); }
.calc__result { background: var(--line-light); border-color: var(--line-light); }
.calc__result > div { background: var(--light-100); }
.calc__result dt { color: var(--text-muted); }
.calc__result dd { color: var(--text-strong); }
.calc__result-total { background: var(--accent-soft) !important; }
.calc__result-total dd { color: var(--accent); }

/* 卡片与列表：白卡 + 灰线 + 4px 圆角 */
.card { background: #fff; border-color: var(--line-light); border-radius: 4px; }
.card:hover { border-color: #d8dbe4; box-shadow: 0 6px 20px rgba(21, 20, 19, 0.05); transform: none; }
.card__icon { background: var(--accent-soft); color: var(--accent); border-radius: 4px; }
.card__list li::before,
.section--dark .card__list li::before { background: var(--accent); }
.card--service { border-bottom-color: var(--line-light); }
.section--dark .card--service .card__icon,
.section:not(.section--dark) .card--service .card__icon { color: var(--accent); }

.solution-teaser { border-top-color: var(--line-light); border-bottom-color: var(--line-light); }
.solution-teaser__item { background: #fff; }
.solution-teaser__item + .solution-teaser__item { border-left-color: var(--line-light); }
.solution-teaser__item span { color: var(--accent); }
.solution-teaser__item strong { color: var(--text-strong); }
.solution-teaser__item em { color: var(--text-muted); }
.solution-teaser__item:hover strong { color: var(--accent); }
.section--dark .solution-teaser__item { background: #fff; border-color: var(--line-light); }
.section--dark .solution-teaser__item strong { color: var(--text-strong); }
.section--dark .solution-teaser__item em { color: var(--text-muted); }
.section--dark .solution-teaser__item span { color: var(--accent); }

/* 表格 */
.table-wrap { background: #fff; border: 1px solid var(--line-light); border-radius: 4px; }
.data-table th, .data-table td { border-bottom-color: var(--line-light); }
.data-table thead th { background: var(--light-100); color: var(--text-muted); }
.data-table tbody th { color: var(--text-strong); }
.data-table tbody tr:hover { background: var(--light-100); }
.data-table .is-highlight { background: var(--accent-soft); color: var(--text-strong); }
.table-wrap--dark { background: #fff; border-color: var(--line-light); }
.table-wrap--dark .data-table th,
.table-wrap--dark .data-table td { border-color: var(--line-light); color: var(--text-body); }
.table-wrap--dark .data-table thead th { background: var(--light-100); color: var(--text-muted); }
.table-wrap--dark .data-table tbody th { color: var(--text-strong); }
.table-wrap--dark .data-table tbody tr:hover { background: var(--light-100); }
.table-wrap--dark .data-table .is-highlight { background: var(--accent-soft); color: var(--text-strong); }

/* 精度网格 */
.spec-grid { background: var(--line-light); border-color: var(--line-light); }
.spec { background: #fff; }
.spec__icon, .section--dark .spec__icon { color: var(--accent); }
.spec strong { color: var(--text-strong); }
.spec > span:last-child { color: var(--text-muted); }
.section--dark .spec { background: #fff; }
.section--dark .spec strong { color: var(--text-strong); }
.section--dark .spec > span:last-child { color: var(--text-muted); }

/* 案例与动态 */
.case { background: #fff; border: 1px solid var(--line-light); border-radius: 4px; }
.case__media { border-radius: 0; }
.case figcaption { border-bottom: 0; }
.case h3 { color: var(--text-strong); }
.case p { color: var(--text-body); }
.case__specs { border-top-color: var(--line-light); }
.case__specs strong { color: var(--text-strong); }
.case__specs li { color: var(--text-muted); }

.news { border-top-color: var(--line-light); }
.news__item { background: transparent; border-bottom-color: var(--line-light); }
.news__media { border-radius: 4px; }
.news__body h3 { color: var(--text-strong); }
.news__body p { color: var(--text-muted); }
.news__tag { color: var(--accent); }
.news__more { color: var(--text-strong); }
.news__item:hover .news__body h3 { color: var(--accent); }

/* 报价区：浅色表单 */
.quote__form { background: #fff; border-color: var(--line-light); }
.quote__side { background: var(--light-100); border-color: var(--line-light); }
.quote__side h3 { color: var(--text-strong); }
.field > span { color: var(--text-strong); }
.field input, .field select, .field textarea {
  background: #fff;
  border-color: var(--line-light);
  color: var(--text-strong);
}
.field input::placeholder, .field textarea::placeholder { color: #a8adb6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #d8dbe4; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: #fff; }
.field select option { background: #fff; color: var(--text-strong); }
.field--file input[type="file"] { background: var(--light-100); }
.field--file em { color: var(--text-muted); }
.checkbox { color: var(--text-muted); }
.checkbox input { accent-color: var(--accent); }
.steps span { background: var(--accent-soft); color: var(--accent); }
.steps li { color: var(--text-body); }
.quote__contact { border-top-color: var(--line-light); }
.quote__contact dt { color: var(--text-muted); }
.quote__contact dd { color: var(--text-strong); }
.quote__tip { color: var(--text-muted); }
.quote__result { background: #fff; border-color: var(--line-light); }
.quote__result h3 { color: var(--text-strong); }
.quote__result pre { background: var(--light-100); border-color: var(--line-light); color: var(--text-body); }
.quote__status { background: var(--accent-soft); border-color: rgba(55, 96, 234, 0.25); color: var(--accent-ink); }
.quote__status.is-done { background: rgba(35, 111, 161, 0.1); border-color: rgba(35, 111, 161, 0.3); color: #1c5c86; }
.quote__status.is-error { background: rgba(214, 69, 69, 0.08); border-color: rgba(214, 69, 69, 0.3); color: #b03030; }
.form-error { background: rgba(214, 69, 69, 0.08); border-color: rgba(214, 69, 69, 0.3); color: #b03030; }

/* FAQ */
.faq { border-top-color: var(--line-light); }
.faq__item { border-bottom-color: var(--line-light); }
.faq__item summary, .section--dark .faq__item summary { color: var(--text-strong); }
.faq__item summary svg, .section--dark .faq__item summary svg { color: var(--text-muted); }
.faq__body p, .section--dark .faq__body p { color: var(--text-body); }
.section--dark .faq { border-top-color: var(--line-light); }
.section--dark .faq__item { border-bottom-color: var(--line-light); }

/* 结尾 CTA 与订阅 */
.cta-band { background: var(--light-100); border-top: 1px solid var(--line-light); }
.cta-band h2 { color: var(--text-strong); }
.cta-band p { color: var(--text-muted); }
.subscribe { background: var(--light-100); border-top-color: var(--line-light); }
.subscribe h2 { color: var(--text-strong); }
.subscribe p { color: var(--text-muted); }
.subscribe__form input { border-color: var(--line-light); }
.subscribe__form input:focus { border-color: var(--accent); }
.subscribe__note { color: var(--text-muted); }
.subscribe__note.is-done { color: var(--accent-ink); }

/* 页脚：浅色 */
.site-footer { background: var(--light-100); border-top: 1px solid var(--line-light); }
.site-footer__brand strong { color: var(--text-strong); }
.site-footer__brand p { color: var(--text-muted); }
.site-footer__nav a { color: var(--text-body); }
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__contact a, .site-footer__contact span { color: var(--text-body); }
.site-footer__contact a:hover { color: var(--accent); }
.footer-links { border-top-color: var(--line-light); }
.footer-links h3 { color: var(--text-strong); }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--accent); }
.site-footer__bottom { border-top-color: var(--line-light); color: var(--text-muted); }

/* 二级页面的页头 */
.sol-hero, .case-hero { background: var(--light-100); border-bottom: 1px solid var(--line-light); }
.sol-hero__grid, .case-hero__grid { display: none; }
.sol-hero h1, .case-hero h1 { color: var(--text-strong); }
.sol-hero__lead, .case-hero__lead { color: var(--text-body); }
.breadcrumb, .breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.sol-hero__media { border-color: var(--line-light); background: #fff; }
.sol-hero__media figcaption { border-top-color: var(--line-light); color: var(--text-muted); }
.sol-hero__specs { background: var(--line-light); border-color: var(--line-light); }
.sol-hero__specs li { background: #fff; }
.sol-hero__specs strong { color: var(--text-strong); }
.sol-hero__specs span { color: var(--text-muted); }
.case-hero__meta span { background: #fff; border-color: var(--line-light); color: var(--text-body); }

/* 方案页：场景、支柱、方案块 */
.scenarios { border-top-color: var(--line-light); }
.scenario { border-bottom-color: var(--line-light); }
.scenario:nth-child(odd) { border-right-color: var(--line-light); }
.scenario__icon { color: var(--accent); }
.scenario h3 { color: var(--text-strong); }
.scenario p { color: var(--text-body); }
.pillars { background: var(--line-light); border-color: var(--line-light); }
.pillar { background: #fff; }
.pillar:hover { background: var(--light-100); }
.pillar__index { color: #c9cdd6; }
.pillar:hover .pillar__index { color: var(--accent); }
.pillar h3 { color: var(--text-strong); }
.pillar p { color: var(--text-body); }
.split__media { border-color: var(--line-light); background: #fff; }
.split__media figcaption { border-top-color: var(--line-light); color: var(--text-muted); }
.split__eyebrow { color: var(--accent); }
.split__body h3 { color: var(--text-strong); }
.split__body > p, .section--dark .split__body > p { color: var(--text-body); }
.param-list { background: var(--line-light); border-color: var(--line-light); }
.param-list > div, .section--dark .param-list > div { background: #fff; }
.param-list dt, .section--dark .param-list dt { color: var(--text-muted); }
.param-list dd, .section--dark .param-list dd { color: var(--text-strong); }
.flow { background: var(--line-light); border-color: var(--line-light); }
.flow li, .section--dark .flow li { background: #fff; color: var(--text-body); }
.flow li span { color: var(--accent); }

/* 案例详情页 */
.case-study { background: #fff; }
.case-study--alt { background: var(--light-100); border-block-color: var(--line-light); }
.case-study__head { border-bottom-color: var(--line-light); }
.case-study__badge { background: var(--accent-soft); color: var(--accent); border-radius: 4px; }
.case-study__brand h2 { color: var(--text-strong); }
.case-study__brand p { color: var(--text-muted); }
.case-study__tags span { border-color: var(--line-light); color: var(--text-body); }
.case-facts { background: var(--line-light); border-color: var(--line-light); }
.case-facts > div { background: #fff; }
.case-study--alt .case-facts > div { background: #fff; }
.case-facts strong { color: var(--accent); }
.case-facts span { color: var(--text-muted); }
.case-columns h3 { color: var(--text-strong); }
.case-columns h3 span { color: var(--accent); }
.case-list li { color: var(--text-body); }
.case-list li b { background: var(--accent-soft); color: var(--accent); }
.case-list--solution li b { background: var(--accent-soft); color: var(--accent); }
.case-gallery__wide, .case-gallery__pair figure { border-color: var(--line-light); border-radius: 4px; }
.case-gallery figcaption { background: var(--light-100); border-top-color: var(--line-light); color: var(--text-muted); }
.case-quote { background: var(--light-100); border-left: 3px solid var(--accent); }
.case-quote p { color: var(--text-strong); }
.case-quote footer { color: var(--text-muted); }
.case-source { color: var(--text-muted); }
.case-jump a { background: #fff; border-color: var(--line-light); border-radius: 4px; }
.case-jump a:hover { border-color: var(--accent); }
.case-jump strong { color: var(--text-strong); }
.case-jump em { color: var(--text-muted); }

/* 条款说明等小字 */
.note, .note--dark { background: var(--light-100); border-color: var(--line-light); color: var(--text-body); }
.note__link { color: var(--accent-ink); }

@media (max-width: 1024px) {
  .metric { border-top-color: var(--line-light); }
}

/* 耳机形态参考 */
.forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.form-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: 4px;
  overflow: hidden;
}
.form-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 7%;
  background: #fff;
}
.form-card figcaption {
  display: grid;
  gap: 5px;
  padding: 14px 18px 20px;
  border-top: 1px solid var(--line-light);
}
.form-card strong { color: var(--text-strong); font-size: 1rem; }
.form-card span { color: var(--text-muted); font-size: 0.86rem; line-height: 1.6; }

@media (max-width: 900px) {
  .forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .forms { grid-template-columns: minmax(0, 1fr); }
}

/* 显示修正：浅色主题下几处文字太淡（体检脚本报出） */
.pillar__index {
  /* 原为 #c9cdd6，白底只有 1.59:1，几乎看不见 */
  color: #8a91a1;
}
.pillar:hover .pillar__index { color: var(--accent); }

/* 深色区块里的图注原来用的是深色主题的浅灰，浅色主题下几乎看不见 */
.section--dark .split__media figcaption { color: var(--text-muted); border-top-color: var(--line-light); }
.section--dark .split__media { border-color: var(--line-light); background: #fff; }

/* 计算器合计行与工序序号：改用更深的品牌蓝，保证 ≥4.5:1 */
.calc__result-total dt { color: var(--text-body); }
.calc__result-total dd { color: var(--accent-ink); }
.process__step.is-active span { color: var(--accent-ink); }
.section--dark .chips span { color: var(--text-muted); }
/* ============ 手机端字号层级（栏目页 / 方案页 / 案例页）============
   窄屏上原本区块引导段 16.3px、卡片标题 16.6px、正文 15px 几乎同号，
   主次分不开。统一成：
   区块标题 27 → 引导段 17 → 条目标题 18 → 正文 15 → 辅助 13.4 */
@media (max-width: 860px) {
  .section__head h2 { font-size: 1.7rem; line-height: 1.3; }

  /* 区块引导段：仅次于区块标题，是这一段的"导语" */
  .section__lead { font-size: 1.15rem; line-height: 1.8; }
  /* 页头导语在 32px 大标题之下，小一档即可 */
  .page-hero__lead,
  .sol-hero__lead,
  .case-hero__lead { font-size: 1.06rem; line-height: 1.8; }
  .section__head .section__lead { margin-top: 14px; }

  /* 条目标题 */
  .card h3,
  .card--service h3,
  .step-list h3,
  .process__panel h3,
  .faq__item summary,
  .pillar h3,
  .scenario h3,
  .case h3,
  .pair-grid h3,
  .faq-group__title { font-size: 1.0625rem; line-height: 1.45; }

  /* 正文 */
  .card p,
  .step-list p,
  .process__panel p,
  .faq__body p,
  .pillar p,
  .scenario p,
  .case p,
  .pair-grid li { font-size: 0.9375rem; line-height: 1.75; }

  /* 辅助信息 */
  .card__list li,
  .note,
  .chips span,
  .case__specs li,
  .case__specs strong { font-size: 0.84rem; line-height: 1.7; }
  .data-table th,
  .data-table td { font-size: 0.875rem; }

  /* 标签与数据 */
  .section__eyebrow,
  .page-hero .section__eyebrow { font-size: 0.78rem; }
  .page-hero__facts span { font-size: 0.78rem; }
  .page-hero__facts strong { font-size: 1.15rem; }
  .spec strong { font-size: 1.5rem; }
}