/* ============================================================
   唐鼎信息官网 · 基础层
   变量、重置、排版、容器、按钮、待补占位块
   ============================================================ */

:root {
  /* 品牌色 */
  --red: #c8001a;
  --red-dark: #a30015;
  --red-soft: #fbeced;

  /* 中性阶 —— 暗色层级靠色阶而非透明度堆叠 */
  --ink-900: #0d0e1a;
  --ink-800: #14162a;
  --ink-700: #1c1f36;
  --ink-600: #2a2e47;
  --slate: #4a5065;
  --text: #23273a;
  --text-2: #626879;   /* 白底 4.85:1，正文色下限 */
  /* ⚠️ --text-3 只用于非文字用途（分隔线、装饰）。白底仅 3.18:1，
     达不到 WCAG AA 的 4.5:1，而 --text-2 已贴近下限，不存在
     「比 --text-2 浅又合规」的正文色。要弱化文字请用字号/字重，不要用这个色。 */
  --text-3: #8b90a0;
  --line: #e3e6ee;
  --paper: #ffffff;
  --paper-2: #f5f6fa;
  --paper-3: #eceef5;

  /* 圆角分层 —— 不再所有元素同一半径 */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;

  /* 阴影分层 */
  --sh-1: 0 1px 2px rgba(19, 21, 40, 0.06);
  --sh-2: 0 6px 20px rgba(19, 21, 40, 0.07);
  --sh-3: 0 18px 48px rgba(19, 21, 40, 0.11);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1200px;
  --pad: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-800);
}

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* 跳转到主内容 —— 键盘用户可见 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--red); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn-line { border-color: var(--line); color: var(--ink-800); background: #fff; }
.btn-line:hover { border-color: var(--ink-800); }
/* 标签页按钮的选中态。ui.js 一直在加 .active，但之前五个 CSS 文件里
   没有任何 .btn.active 规则 —— 点了完全没反馈，用户不知道自己在看哪一类。 */
.btn.active {
  background: var(--ink-800); border-color: var(--ink-800); color: #fff;
  font-weight: 700;
}
.btn.active:hover { background: var(--ink-700); border-color: var(--ink-700); }
.btn-lg { padding: 15px 34px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- 文字工具 ---------- */
.text-red { color: var(--red); }
/* 短的内联链接不要折行：「查看全部方案 →」断成两行会被读成两个链接。
   长句链接（>12 字）不加这个类，该换行就换行。 */
.link-nowrap { white-space: nowrap; }
/* 中文断行允许在任意两个汉字之间断开，CSS 没有断词词典，
   所以「软件」「图纸」这类两字词会被劈成「软 / 件」。
   把这个词包起来即可，只用在确实被劈开的地方，不要全站撒。 */
.nw { white-space: nowrap; }
.lead { font-size: 17px; color: var(--text-2); }
.center-note { text-align: center; color: var(--text-2); margin-top: 28px; font-size: 14.5px; }
.todo { color: #9a6700; }

/* ---------- 待补占位块 ---------- */
/* 故意做成刺眼的琥珀色：客户双击打开就该看见哪里还没填 */
.ph-block {
  position: relative; border: 1px dashed #d9a441; border-left: 4px solid #d9a441;
  background: #fdf7e8; border-radius: var(--r-sm);
  padding: 26px 28px 24px; color: #6b5326;
}
.ph-tag {
  position: absolute; top: -11px; left: 20px;
  /* 底色压深到 #8a6520：原 #d9a441 配白字只有 2.25:1 */
  background: #8a6520; color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 10px; border-radius: 999px;
}
.ph-block h4 { font-size: 16px; color: #5c4620; margin: 6px 0 6px; }
.ph-block p { font-size: 13.5px; line-height: 1.7; }
.ph-owner { margin-top: 10px; font-size: 12.5px; opacity: 0.8; }
.ph-inline {
  border-bottom: 2px dashed #d9a441; background: #fdf7e8;
  color: #8a6a2a; padding: 1px 6px; border-radius: 3px; font-size: 0.94em;
}