/* ============================================================
   唐鼎信息官网 · 布局层
   页头 / 页脚 / 区块骨架 / 面包屑 / 滚动显现
   ============================================================ */

/* ---------- 页头 ---------- */
/* 默认透明压在深色首屏上，滚动后转实底 —— 全站每页顶部都有深色带，故无需分页判断 */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.header-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 var(--pad);
  height: 78px; display: flex; align-items: center; gap: 28px;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line), var(--sh-2);
}
.site-header.scrolled .header-inner { height: 66px; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
/* logo 自带白底标牌（红 TD + 深色字），深浅底上都直接可用，不要加滤镜 */
.brand-logo { height: 32px; width: auto; border-radius: 5px; }

.main-nav { display: flex; gap: 2px; margin-left: auto; }
.main-nav a {
  position: relative; padding: 10px 16px; border-radius: var(--r-xs);
  font-size: 15px; color: rgba(255, 255, 255, 0.82); white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.main-nav a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: #fff; font-weight: 600; }

.site-header.scrolled .main-nav a { color: var(--text-2); }
.site-header.scrolled .main-nav a:hover,
.site-header.scrolled .main-nav a.active { color: var(--ink-800); }

.header-cta { padding: 10px 20px; font-size: 14px; flex-shrink: 0; }

.nav-toggle {
  display: none; margin-left: auto; padding: 10px; border: none;
  background: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; margin: 5px 0;
  background: #fff; transition: 0.3s var(--ease);
}
.site-header.scrolled .nav-toggle span { background: var(--ink-800); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 区块骨架 ---------- */
/* 背景类自带 padding：否则页面里写下 `class="section-gray"`（漏了 section）
   就会得到一个上下留白为 0 的区块，而且不报错。
   test/layout-audit.js 也会拦截这种写法。 */
.section, .section-gray, .section-dark, .blueprint { padding: 104px 0; }
.section-tight { padding: 72px 0; }
.section-gray { background: var(--paper-2); }
.section-dark { background: var(--ink-800); color: rgba(255, 255, 255, 0.82); }
/* 只给"深色区块自己的"标题刷白。
   ⚠️ 这条曾经写成无差别 `.section-dark h2,h3,h4`，结果把深色区块里
   白底卡片内的标题也刷成白色 —— 白底白字，整块看不见。
   凡是自带浅色背景的容器，标题颜色一律由组件层自己负责。 */
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
/* 只把这几个"自带白底"的容器恢复深色。
   不要往里加 .step / .dark-panel / .timeline —— 它们在深色区块里本来就是深底，
   刷成深色会变成深底深字。 */
.section-dark .card h3, .section-dark .card h4,
.section-dark .tri-col h3, .section-dark .tri-col h4,
.section-dark .eco-col h3,
.section-dark .ph-block h4 { color: var(--ink-800); }
/* 品牌红 #c8001a 压在深色底上只有 2.95:1，深色区块里的红色小字统一提亮，
   与 .section-dark .stat b / .stance-bar b 的处理保持一致 */
.section-dark .sec-num { color: #ff5468; }
/* 占位块是米黄底，标题得用它的深棕；漏掉这条时会是白字压米白（1.07:1），
   截图上只剩一层几乎不可辨的白色残影，而且 contrast-audit 的选择器里
   原本没有 .ph-block h4，跑测试还是「全部达标」。 */
.section-dark .ph-block h4 { color: #5c4620; }

/* 工业蓝图层：细分网格底纹，给纯文字区块一点"工程感" */
.blueprint {
  background-color: var(--paper-2);
  background-image:
    linear-gradient(rgba(28, 31, 54, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 31, 54, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.section-dark.blueprint {
  background-color: var(--ink-900);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

/* 区块标题组：默认左对齐（去掉通站居中），带序号与红色短线 */
.sec-head { max-width: 900px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-num {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.22em;
  color: var(--red); margin-bottom: 14px;
}
.sec-head h2 {
  font-size: clamp(25px, 2.9vw, 36px);
  text-wrap: balance;          /* 防末行孤字 */
  max-width: 24em;
}
.sec-head.center h2 { margin: 0 auto; }
.sec-head p { margin-top: 16px; color: var(--text-2); font-size: 16.5px; }
.section-dark .sec-head p { color: rgba(255, 255, 255, 0.66); }
.sec-rule { width: 52px; height: 3px; background: var(--red); margin-top: 22px; }
.sec-head.center .sec-rule { margin-left: auto; margin-right: auto; }

/* ---------- 内页页头 ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: 170px 0 76px;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 62%, #241a2e 100%);
  color: #fff;
}
.page-hero::after {
  content: ""; position: absolute; right: -160px; top: -160px;
  width: 460px; height: 460px; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 0, 26, 0.26), transparent 66%);
}
.page-hero h1 { font-size: clamp(28px, 3.8vw, 44px); color: #fff; text-wrap: balance; }
.page-hero-sub { margin-top: 16px; color: rgba(255, 255, 255, 0.7); font-size: 16.5px; max-width: 62ch; }

/* ---------- 面包屑 ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13.5px; color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.75); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb i { font-style: normal; opacity: 0.45; }
.breadcrumb span { color: #fff; }

/* ---------- 页脚 ---------- */
.site-footer { background: var(--ink-900); color: rgba(255, 255, 255, 0.62); padding: 64px 0 44px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer-brand img { height: 34px; width: auto; margin: 0 auto 14px; border-radius: 5px; }
.footer-brand p { letter-spacing: 0.16em; font-size: 14px; }
.footer-nav { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 14px; transition: color 0.3s; }
.footer-nav a:hover { color: #fff; }
.footer-nav-secondary { gap: 20px; }
.footer-nav-secondary a { font-size: 13px; color: rgba(255, 255, 255, 0.48); }
.footer-meta { font-size: 13px; color: rgba(255, 255, 255, 0.62); line-height: 2; }
.footer-meta .todo { color: #e0b352; }
.footer-icp { color: rgba(255, 255, 255, 0.45); }
.footer-icp a { color: inherit; }
.footer-icp a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 滚动显现 ---------- */
/* 只用在区块级，不逐元素铺开 */
.reveal { opacity: 0; transform: translateY(22px);
          transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }