/* ============================================================
   theme-2021.css · 2021 版官网复刻主题
   依据：Common Crawl CC-MAIN-2021-43 于 2021-10-21 14:11:26Z
   抓取的 https://www.djwjsj.com/ 首页 WARC 存档（.legacy/cc/），
   以及老板提供的旧站 banner / 详情页切片设计稿。
   主色 #0048D8 取自旧站蓝色圆形数据徽章；橙红 #F06000 取自
   详情页编号图标。全站变量覆盖 + 首页 2021 版组件。
   ============================================================ */

:root {
  --brand: #0048d8;
  --brand-deep: #00309a;
  --brand-soft: #eaf1ff;
  --accent: #f06000;
  --ink: #1c2530;
  --ink-soft: #33404f;
  --muted: #5d6a78;
  --line: #e2e8f0;
  --line-strong: #c9d4e2;
}

/* ---------- 顶部：蓝色信息条 + 白色头部 + 蓝色九栏导航 ---------- */
.h21-topbar { background: var(--brand); color: #fff; font-size: 13px; line-height: 38px; }
.h21-topbar .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.h21-topbar a { color: #e6efff; }
.h21-topbar a:hover { color: #fff; text-decoration: underline; }
.h21-topbar__sep { opacity: .55; margin: 0 8px; }

.h21-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.h21-logo { display: flex; align-items: center; gap: 13px; color: var(--ink); }
.h21-logo img { width: 58px; height: 58px; object-fit: contain; }
.h21-logo b { display: block; font-size: 25px; letter-spacing: 2px; color: var(--ink); line-height: 1.2; }
.h21-logo small { display: block; font-size: 11px; letter-spacing: 2px; color: #8492a0; margin-top: 3px; }
.h21-hotline { text-align: right; }
.h21-hotline span { display: block; font-size: 13px; color: #8492a0; letter-spacing: 1px; }
.h21-hotline strong { display: block; font-size: 29px; color: var(--brand); letter-spacing: 1px; line-height: 1.25; }
.h21-hotline small { display: block; font-size: 12px; color: var(--muted); }
.h21-menu-btn { display: none; background: var(--brand); color: #fff; border: 0; padding: 10px 14px; font-size: 15px; cursor: pointer; }

.h21-nav { background: var(--brand); }
.h21-nav ul { display: flex; list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; }
.h21-nav li { flex: 1; text-align: center; }
.h21-nav a { display: block; padding: 14px 6px; color: #fff; font-size: 16px; white-space: nowrap; }
.h21-nav a:hover, .h21-nav a[aria-current="page"] { background: var(--brand-deep); color: #fff; }

/* ---------- 全宽轮播 ---------- */
.h21-swiper { position: relative; overflow: hidden; background: #eef0f2; }
.h21-slides { position: relative; }
.h21-slide { display: none; }
.h21-slide.is-active { display: block; }
.h21-slide img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: center; }
.h21-swiper__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 66px; border: 0; background: rgba(0, 30, 90, .35); color: #fff;
  font-size: 26px; cursor: pointer; }
.h21-swiper__arrow:hover { background: rgba(0, 48, 154, .75); }
.h21-swiper__arrow--prev { left: 0; }
.h21-swiper__arrow--next { right: 0; }
.h21-swiper__dots { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 10px; }
.h21-swiper__dots button { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #9fb2c9;
  background: rgba(255, 255, 255, .9); cursor: pointer; padding: 0; }
.h21-swiper__dots button.is-active { background: var(--brand); border-color: var(--brand); }

/* ---------- 通用区块标题（旧站：中文大标题 + 英文小字 + 蓝色短线） ---------- */
.h21-welcome { text-align: center; padding: 40px 0 32px; }
.h21-welcome h1 { margin: 0; font-size: 32px; color: var(--ink); letter-spacing: 2px; }
.h21-welcome p { margin: 8px 0 0; font-size: 13px; letter-spacing: 3px; color: #9aa6b2; }
.h21-tit { text-align: center; margin-bottom: 32px; }
.h21-tit b { display: block; font-size: 30px; color: var(--ink); letter-spacing: 1px; }
.h21-tit span { display: block; font-size: 12px; letter-spacing: 2px; color: #9aa6b2; margin-top: 6px; }
.h21-tit i { display: block; width: 52px; height: 3px; background: var(--brand); margin: 14px auto 0; }
.h21-sec { padding: 54px 0; }
.h21-sec--gray { background: #f5f7fa; }

/* ---------- 产品中心：三分类 + 真实零件图 ---------- */
.h21-prod-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.h21-tab { padding: 10px 28px; border: 1px solid var(--line-strong); background: #fff;
  color: var(--ink-soft); font-size: 16px; cursor: pointer; border-radius: 2px; }
.h21-tab:hover { border-color: var(--brand); color: var(--brand); }
.h21-tab.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.h21-prod-grid { display: none; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.h21-prod-grid.is-active { display: grid; }
.h21-prod { display: block; background: #fff; border: 1px solid var(--line); text-align: center;
  transition: box-shadow .25s, border-color .25s, transform .25s; }
.h21-prod:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(0, 72, 216, .14); transform: translateY(-3px); }
.h21-prod img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fafbfc; }
.h21-prod h3 { margin: 12px 6px 4px; font-size: 15px; color: var(--ink); font-weight: 600; }
.h21-prod span { display: block; font-size: 12px; color: var(--accent); margin-bottom: 14px; }
.h21-prod-more { text-align: center; margin-top: 26px; }

/* ---------- 蓝色圆形数据徽章 ---------- */
.h21-badges { display: flex; justify-content: center; gap: 54px; flex-wrap: wrap; padding: 8px 0 4px; }
.h21-badge { width: 132px; height: 132px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 72, 216, .18); }
.h21-badge b { font-size: 26px; line-height: 1.2; }
.h21-badge span { font-size: 13px; opacity: .92; margin-top: 4px; }

/* ---------- 橙红编号优势 ---------- */
.h21-adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.h21-adv { display: flex; gap: 13px; align-items: flex-start; background: #fff; padding: 20px;
  border: 1px solid var(--line); }
.h21-adv i { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--accent);
  color: #fff; font-style: normal; font-weight: 700; display: grid; place-items: center; }
.h21-adv b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.h21-adv p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }

/* ---------- 深灰检测实力区 ---------- */
.h21-dark { background: #222; color: #e6e6e6; padding: 56px 0; }
.h21-dark h2 { color: #fff; }
.h21-dark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center; }
.h21-dark img { width: 100%; border-radius: 2px; }
.h21-dark .h21-tit { text-align: left; margin-bottom: 22px; }
.h21-dark .h21-tit b { color: #fff; }
.h21-dark .h21-tit i { margin-left: 0; }
.h21-dark p { font-size: 14px; line-height: 2; color: #b9c0c8; }
.h21-check-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  list-style: none; padding: 0; margin: 22px 0 0; }
.h21-check-list li { border: 1px solid #555; padding: 11px 6px; text-align: center; font-size: 13px; color: #e6e6e6; }

/* ---------- 应用行业九宫格 ---------- */
.h21-ind-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.h21-ind { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px; text-align: center; background: #fff; }
.h21-ind b { display: block; color: var(--brand); font-size: 18px; margin-bottom: 6px; }
.h21-ind span { font-size: 13px; color: var(--muted); }

/* ---------- 工艺案例卡 ---------- */
.h21-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h21-case { background: #fff; border: 1px solid var(--line); }
.h21-case__head { background: var(--brand); color: #fff; padding: 16px 18px; font-size: 17px; font-weight: 600; }
.h21-case__body { padding: 18px; font-size: 14px; line-height: 1.95; color: var(--muted); }
.h21-case__body b { color: var(--ink); }
.h21-case__body ul { padding-left: 18px; margin: 8px 0 0; }

/* ---------- 新闻资讯（复用 GEO 问答库） ---------- */
.h21-news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.h21-news-grid .qa-teaser { background: #fff; border: 1px solid var(--line); padding: 20px 22px; margin: 0; }
.h21-news-grid .qa-teaser__cat { color: var(--accent); font-size: 12px; letter-spacing: 1px; }
.h21-news-grid .qa-teaser h3 { font-size: 17px; line-height: 1.5; margin: 8px 0; }
.h21-news-grid .qa-teaser h3 a { color: var(--ink); }
.h21-news-grid .qa-teaser h3 a:hover { color: var(--brand); }
.h21-news-grid .qa-teaser p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.h21-news-grid .qa-teaser .link-arrow { color: var(--brand); font-size: 14px; }

/* ---------- 底部：我要定做 + 在线报价预设 ---------- */
.h21-rfq { background: var(--brand); color: #fff; padding: 48px 0; }
.h21-rfq h2 { color: #fff; margin: 0 0 10px; font-size: 27px; }
.h21-rfq p { color: #d9e6ff; font-size: 14px; line-height: 1.9; }
.h21-rfq-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
.h21-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.h21-form input, .h21-form textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 2px;
  font-size: 15px; color: var(--ink); box-sizing: border-box; font-family: inherit; }
.h21-form textarea { grid-column: 1 / -1; min-height: 84px; resize: vertical; }
.h21-form button { grid-column: 1 / -1; background: var(--accent); color: #fff; border: 0;
  padding: 13px; font-size: 16px; cursor: pointer; border-radius: 2px; }
.h21-form button:hover { background: #d75400; }
.h21-form__note { grid-column: 1 / -1; font-size: 12px; color: #d9e6ff; margin: 0; }
.h21-rfq-card { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3);
  padding: 24px; }
.h21-rfq-card b { display: block; font-size: 19px; margin-bottom: 10px; }
.h21-rfq-card a.h21-btn { display: inline-block; margin-top: 12px; background: #fff; color: var(--brand);
  padding: 11px 22px; font-weight: 600; border-radius: 2px; }
.h21-rfq-card a.h21-btn:hover { background: #eaf1ff; color: var(--brand-deep); }

/* ---------- 报价预告区块（沿用旧站 id，换旧站配色） ---------- */
#quote-teaser { background: #f5f7fa; }
#quote-teaser .quote-teaser__card { border-color: var(--line-strong); }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .h21-prod-grid { grid-template-columns: repeat(3, 1fr); }
  .h21-adv-grid { grid-template-columns: repeat(2, 1fr); }
  .h21-badges { gap: 30px; }
}
@media (max-width: 700px) {
  .h21-topbar { font-size: 11px; line-height: 32px; }
  .h21-topbar .wrap { justify-content: center; text-align: center; }
  .h21-head { padding: 12px 0; gap: 10px; }
  .h21-logo img { width: 42px; height: 42px; }
  .h21-logo b { font-size: 18px; letter-spacing: 1px; }
  .h21-logo small { display: none; }
  .h21-hotline strong { font-size: 18px; }
  .h21-hotline small { display: none; }
  .h21-menu-btn { display: block; }
  .h21-nav ul { display: none; flex-wrap: wrap; }
  .h21-nav ul.is-open { display: flex; }
  .h21-nav li { flex: 0 0 33.333%; }
  .h21-nav a { font-size: 13px; padding: 10px 2px; }
  .h21-slide img { max-height: none; }
  .h21-swiper__arrow { width: 30px; height: 48px; font-size: 20px; }
  .h21-welcome { padding: 28px 0 22px; }
  .h21-welcome h1 { font-size: 21px; letter-spacing: 0; }
  .h21-tit b { font-size: 23px; }
  .h21-sec { padding: 36px 0; }
  .h21-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .h21-tab { padding: 8px 16px; font-size: 14px; }
  .h21-badges { gap: 14px; }
  .h21-badge { width: 94px; height: 94px; }
  .h21-badge b { font-size: 19px; }
  .h21-badge span { font-size: 11px; }
  .h21-adv-grid, .h21-case-grid, .h21-news-grid, .h21-dark-grid,
  .h21-rfq-grid, .h21-ind-grid, .h21-form { grid-template-columns: 1fr; }
  .h21-form textarea, .h21-form button, .h21-form__note { grid-column: 1; }
  .h21-check-list { grid-template-columns: repeat(2, 1fr); }
  .h21-ind { padding: 16px; }
}