/* ============================================================================
   八禧达官网 · 深色工程风设计层（2026-09-22 改版）

   分区策略：深色首屏与产品展示区 + 浅色技术正文区。
     · 深色区用 --t-* 令牌；浅色区继续用 bester.css 的 --bx-*，互不干扰
     · 本文件在 bester.css 之后加载，只覆盖首页顶部的 .bx-hero / .bx-lines
     · 产品图来自棚拍成品（背景为中性灰渐变，四角亮度中位 111），
       用 mask-image 把边缘淡出融进深底 —— 不改图，可逆

   颜色依据：品牌红 #c8102e 在近黑底上对比不足（ΔL 偏低），
   深色区单独提到 --t-red:#e5324f，保证正文与链接的可读性。
   ============================================================================ */

:root {
  --t-bg: #0b0e13;          /* 深色区底 */
  --t-bg-2: #0f131a;        /* 次层 */
  --t-panel: #141922;       /* 卡片面 */
  --t-panel-2: #1a2029;
  --t-line: rgba(255, 255, 255, .09);
  --t-line-2: rgba(255, 255, 255, .17);
  --t-fg: #e9edf2;
  --t-mut: #94a1b5;
  --t-red: #e5324f;         /* 深底上的品牌红 */
  --t-red-deep: #c8102e;
  --t-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── 首屏 ───────────────────────────────────────────────────────────── */
.bx-hero {
  position: relative;
  background: var(--t-bg);
  color: var(--t-fg);
  padding: 68px 0 0;
  overflow: hidden;
}

/* 工程网格底纹：只在上半部可见，向下淡出 */
.bx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(130% 78% at 50% 0%, #000 26%, transparent 76%);
  mask-image: radial-gradient(130% 78% at 50% 0%, #000 26%, transparent 76%);
  pointer-events: none;
}

/* 品牌红光晕 */
.bx-hero::after {
  content: "";
  position: absolute;
  left: -12%;
  top: -34%;
  width: 58%;
  height: 132%;
  background: radial-gradient(closest-side, rgba(200, 16, 46, .26), transparent 72%);
  pointer-events: none;
}

.bx-hero > .container { position: relative; z-index: 2; }

.bx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 52px;
  align-items: center;
}

/* 等宽字体的技术标签：语言中立，避免 9 语言各自翻译 */
.bx-eyebrow {
  font-family: var(--t-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-red);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bx-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--t-red);
  flex: 0 0 auto;
}

.bx-hero h1 {
  font-size: 2.5rem;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 0 0 16px;
  color: #fff;
}

.bx-hero .bx-lead {
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--t-mut);
  max-width: 620px;
  margin: 0 0 28px;
}

.bx-hero .bx-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.bx-hero .bx-cta a {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .94rem;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.bx-hero .bx-cta .bx-primary { background: var(--t-red-deep); color: #fff; }
.bx-hero .bx-cta .bx-primary:hover { background: var(--t-red); transform: translateY(-1px); }
.bx-hero .bx-cta .bx-ghost { border: 1px solid var(--t-line-2); color: var(--t-fg); }
.bx-hero .bx-cta .bx-ghost:hover { border-color: var(--t-fg); background: rgba(255, 255, 255, .06); }

/* 产品图：边缘径向淡出，与深底无缝衔接 */
.bx-hero-media { margin: 0; position: relative; }
.bx-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: radial-gradient(122% 112% at 50% 46%, #000 58%, transparent 100%);
  mask-image: radial-gradient(122% 112% at 50% 46%, #000 58%, transparent 100%);
}
.bx-hero-media figcaption {
  font-family: var(--t-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--t-mut);
  text-align: right;
  margin-top: 2px;
  opacity: .8;
}

/* 数据条：等宽数字，像仪表读数 */
.bx-hero .bx-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--t-line);
}
.bx-hero .bx-fact {
  padding: 22px 20px 26px;
  border-right: 1px solid var(--t-line);
}
.bx-hero .bx-fact:last-child { border-right: 0; }
.bx-hero .bx-fact b {
  display: block;
  font-family: var(--t-mono);
  font-size: 1.42rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.bx-hero .bx-fact span {
  display: block;
  font-size: .8rem;
  color: var(--t-mut);
  margin-top: 7px;
}

/* ── 深色区通用包装 ─────────────────────────────────────────────────── */
.bx-dark {
  background: var(--t-bg);
  color: var(--t-fg);
  padding: 72px 0 76px;
}
.bx-dark .section-title { color: #fff; }
.bx-dark .section-subtitle { color: var(--t-mut); }

/* ── 产品线卡片（深色 + 配图） ──────────────────────────────────────── */
.bx-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 18px;
}
.bx-line {
  display: flex;
  flex-direction: column;
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  overflow: hidden;
  color: var(--t-fg);
  text-decoration: none;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.bx-line:hover {
  border-color: var(--t-line-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.bx-line-media {
  aspect-ratio: 4 / 3;
  background: #0d1015;
  overflow: hidden;
}
.bx-line-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.bx-line:hover .bx-line-media img { transform: scale(1.035); }
.bx-line-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.bx-line h3 {
  font-size: 1.06rem;
  margin: 0 0 8px;
  color: #fff;
  font-weight: 600;
}
.bx-line p {
  font-size: .875rem;
  line-height: 1.68;
  color: var(--t-mut);
  margin: 0 0 14px;
  flex: 1;
}
.bx-line .bx-line-meta {
  font-family: var(--t-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--t-red);
  font-weight: 600;
}

/* ── 响应式 ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .bx-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .bx-hero-media { order: -1; }
  .bx-hero h1 { font-size: 1.95rem; }
  .bx-hero .bx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-hero .bx-fact { border-bottom: 1px solid var(--t-line); }
  .bx-hero .bx-fact:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .bx-hero { padding-top: 44px; }
  .bx-hero h1 { font-size: 1.62rem; }
  .bx-hero .bx-facts { margin-top: 34px; }
  .bx-hero .bx-fact { padding: 16px 14px 18px; }
  .bx-hero .bx-fact b { font-size: 1.16rem; }
  .bx-dark { padding: 48px 0 52px; }
}

/* ── 顶栏：窄屏只留电话，避免三段联系方式换行成碎块 ───────────────────
   加了 WhatsApp 后顶栏变成三段，手机上每段都断行（电话断 3 行、邮箱断在词中间）。
   窄屏保留电话（B2B 站最关键的触达方式），邮箱与 WhatsApp 交给页脚与联系页。 */
@media (max-width: 860px) {
  .topbar-left { white-space: nowrap; overflow: hidden; }
  .topbar-left > span:nth-child(n+2) { display: none; }
  .topbar-left a { text-decoration: none; }
}

/* ============================================================================
   全站框架（2026-09-22 第二段）—— 导航 / 页头 / 页脚 深色化
   浅色正文区不动：深色框架 + 浅色内容，长技术文本保持可读性。
   ============================================================================ */

/* ── 导航：深色 + 吸顶 ─────────────────────────────────────────────── */
.navbar {
  background: rgba(11, 14, 19, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--t-line);
}
.navbar .nav-links a { color: rgba(255, 255, 255, .74); }
.navbar .nav-links a:hover,
.navbar .nav-links a.active { color: #fff; }
.navbar .nav-links a.active::after { background: var(--t-red); }
/* logo.svg 的文字是深色 #14181f，深底上会看不见 —— 整体反白 */
.navbar .logo img { filter: brightness(0) invert(1); }
/* 汉堡按钮的三条杠默认是深色 */
.navbar .menu-toggle span { background: #fff; }
/* 搜索框在深色导航上换深色底 */
.search-box input[type="search"] {
  background: rgba(255, 255, 255, .07);
  border-color: var(--t-line-2);
  color: var(--t-fg);
}
.search-box input[type="search"]::placeholder { color: rgba(255, 255, 255, .45); }
.search-box input[type="search"]:focus { background: rgba(255, 255, 255, .12); border-color: var(--t-red); }

/* ── 页头：所有内页（产品/技术/关于/联系/FAQ…）统一深色技术带 ────────── */
.page-header {
  position: relative;
  background: var(--t-bg);
  color: var(--t-fg);
  text-align: left;
  padding: 56px 0 52px;
  border-bottom: 1px solid var(--t-line);
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(120% 90% at 22% 0%, #000 22%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 22% 0%, #000 22%, transparent 78%);
  pointer-events: none;
}
.page-header > .container { position: relative; z-index: 2; }
.page-header h1 { color: #fff; font-size: 2.05rem; font-weight: 700; letter-spacing: -.2px; margin: 0 0 10px; }
.page-header .section-subtitle {
  color: var(--t-mut);
  text-transform: none;
  letter-spacing: 0;
  font-size: .96rem;
  line-height: 1.7;
  max-width: 760px;
  margin: 0;
  text-align: left;
}

/* 页头里的产品图（由 single.html 注入） */
.bx-pagehero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 44px;
  align-items: center;
}
.bx-pagehero-media img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-mask-image: radial-gradient(126% 116% at 50% 48%, #000 56%, transparent 100%);
  mask-image: radial-gradient(126% 116% at 50% 48%, #000 56%, transparent 100%);
}

/* ── 页脚：深色 ───────────────────────────────────────────────────── */
.footer { background: #080a0e; color: var(--t-mut); border-top: 1px solid var(--t-line); }
.footer h4, .footer .footer-brand-name { color: #fff; }
.footer a { color: var(--t-mut); }
.footer a:hover { color: #fff; }
.footer .fc-label { color: rgba(255, 255, 255, .5); }
.footer-bottom { border-top: 1px solid var(--t-line); color: rgba(255, 255, 255, .45); }
.footer-logo img { filter: brightness(0) invert(1); opacity: .95; }

/* ── 列表页卡片（产品中心 / 技术资料用图片卡片） ───────────────────── */
.bx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
  margin: 26px 0 8px;
}
/* 四条产品线正好一行放满，避免 3+1 的孤行 */
@media (min-width: 1180px) {
  .bx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 技术笔记 9 篇：3×3 排满，避免 4+4+1 的孤行。
   .bx-cards.is-3 比 .bx-cards 多一个类，优先级更高，
   所以 ≥1180px 时能盖掉上面那条 4 列规则，与书写顺序无关。 */
@media (min-width: 1000px) {
  .bx-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bx-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bx-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.bx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(20, 24, 31, .12);
  border-color: #d6dae1;
}
.bx-card-media { aspect-ratio: 16 / 9; background: #0d1015; overflow: hidden; }
.bx-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.bx-card:hover .bx-card-media img { transform: scale(1.04); }
.bx-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.bx-card-body h3 { font-size: 1.04rem; margin: 0 0 8px; color: var(--bx-ink); }
.bx-card-body p { font-size: .875rem; line-height: 1.68; color: var(--bx-mut); margin: 0 0 14px; flex: 1; }
.bx-card-meta {
  font-family: var(--t-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--bx-red);
  font-weight: 600;
}

/* ── 首页 FAQ（GEO 问答小节） ──────────────────────────────────────────
   首页正文由 list.html 的 .IsHome 分支原样输出、不套 .container；
   GEO 问答块以前是裸 markdown，渲染成没有容器内边距的裸 h2/h3/p，
   文字横向铺满整屏、标题也没有 section-title 样式（2026-09-23 修）。
   现在由 apply_keywords.py 输出 section/container 结构，这里补排版。 */
.bx-faq {
  max-width: 880px;
  margin: 36px auto 0;
}
.bx-faq-item {
  padding: 22px 0 24px;
  border-top: 1px solid var(--bx-line);
}
.bx-faq-item:first-child { border-top: 0; padding-top: 4px; }
.bx-faq-item h3 {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bx-ink);
  margin: 0 0 10px;
}
.bx-faq-item h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--bx-red);
  border-radius: 1px;
}
.bx-faq-item p {
  font-size: .93rem;
  line-height: 1.8;
  color: var(--bx-mut);
  margin: 0;
}

@media (max-width: 900px) {
  .bx-pagehero-grid { grid-template-columns: 1fr; gap: 24px; }
  .bx-pagehero-media { display: none; }   /* 窄屏页头不塞图，省首屏高度 */
  .page-header { padding: 38px 0 34px; }
  .page-header h1 { font-size: 1.62rem; }
}