/* ============================================================
   CAD 软件技术支持宣传页（cad.html）样式

   设计方向：工业实用 / 工程蓝图（Industrial Blueprint）
   记忆点：① 工程制图「定位角标」（hover 时四角亮起）
          ② 蓝图网格底纹 + 噪点质感
          ③ 等宽字体（JetBrains Mono，header 已引入）做技术标注
          ④ Hero 右侧「诊断控制台」面板
   配色：深蓝图底 70% / 浅灰蓝文字 20% / 琥珀强调 10%
   直角化：全站 border-radius:0（项目硬性规则）
   ============================================================ */

.cad-page {
  /* ---- 设计变量 ---- */
  --cad-ink: #0a1a2b;
  --cad-ink-2: #061019;
  --cad-panel: #0f2338;
  --cad-panel-2: #132a41;
  --cad-line: rgba(148, 178, 214, .16);
  --cad-line-2: rgba(148, 178, 214, .34);
  --cad-text: #d9e5f2;
  --cad-muted: #8ba5c2;
  --cad-amber: #f5a524;
  --cad-amber-soft: rgba(245, 165, 36, .12);
  --cad-cyan: #5ec8d8;
  --cad-mono: 'JetBrains Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --cad-sans: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;

  padding-top: 88px;              /* 让开 fixed 顶栏（顶栏高约 78px） */
  background: var(--cad-ink-2);
  color: var(--cad-text);
  font-family: var(--cad-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 直角化兜底：覆盖 bootstrap / 浏览器默认圆角 */
.cad-page *,
.cad-page *::before,
.cad-page *::after { box-sizing: border-box; }

.cad-page button,
.cad-page input,
.cad-page textarea,
.cad-page select,
.cad-page summary { border-radius: 0; }

.cad-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- 噪点质感（叠在深底上，避免大面积纯色死板） ---- */
.cad-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* ============ 通用：区块标题 / 等宽标签 ============ */
.cad-sec-head { margin-bottom: 44px; max-width: 720px; }

.cad-mono-label {
  display: inline-block;
  font-family: var(--cad-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--cad-amber);
  margin-bottom: 16px;
}

.cad-sec-title {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.5px;
  color: #fff;
  margin: 0 0 14px;
}
.cad-sec-title em {
  font-style: normal;
  color: var(--cad-amber);
}

.cad-sec-desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--cad-muted);
  margin: 0;
}

/* ============ 通用：定位角标（记忆点①） ============ */
.cad-marks { position: relative; }
.cad-marks::before,
.cad-marks::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--cad-amber);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 3;
}
.cad-marks::before {
  top: 9px; left: 9px;
  border-top-width: 1px; border-left-width: 1px;
}
.cad-marks::after {
  bottom: 9px; right: 9px;
  border-bottom-width: 1px; border-right-width: 1px;
}
.cad-marks:hover::before,
.cad-marks:hover::after { opacity: 1; }

/* ============ 按钮 ============ */
.cad-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.cad-btn-primary {
  background: var(--cad-amber);
  color: #1a1206;
}
.cad-btn-primary:hover {
  background: #ffb833;
  color: #1a1206;
}
.cad-btn-ghost {
  background: transparent;
  color: var(--cad-text);
  border-color: var(--cad-line-2);
}
.cad-btn-ghost:hover {
  border-color: var(--cad-amber);
  color: var(--cad-amber);
}
.cad-btn i { font-size: 12px; }

/* ============ HERO ============ */
.cad-hero {
  position: relative;
  background-color: var(--cad-ink);
  /* 蓝图网格：细线 + 每 5 格一条粗线 */
  background-image:
    linear-gradient(var(--cad-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cad-line) 1px, transparent 1px),
    linear-gradient(rgba(148, 178, 214, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 178, 214, .07) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  border-bottom: 1px solid var(--cad-line);
  overflow: hidden;
}
/* 右上琥珀色光晕，制造纵深 */
.cad-hero::after {
  content: '';
  position: absolute;
  top: -220px; right: -160px;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(245, 165, 36, .16) 0%, transparent 62%);
  pointer-events: none;
}

.cad-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 64px;
  align-items: center;
  padding: 92px 40px 84px;
}

.cad-hero-title {
  font-size: 62px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: #fff;
  margin: 0 0 22px;
}
.cad-hero-title em {
  font-style: normal;
  color: var(--cad-amber);
}

.cad-hero-lead {
  font-size: 16px;
  line-height: 1.95;
  color: var(--cad-muted);
  margin: 0 0 34px;
  max-width: 520px;
}

.cad-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* HERO 底部技术参数条（等宽） */
.cad-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cad-line);
}
.cad-hero-meta li {
  font-family: var(--cad-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cad-muted);
  padding: 14px 22px 0 0;
  margin-right: 22px;
}
.cad-hero-meta li b {
  color: var(--cad-amber);
  font-weight: 500;
}

/* ---- HERO 右侧：诊断控制台（记忆点④） ---- */
.cad-console {
  position: relative;
  background: var(--cad-ink-2);
  border: 1px solid var(--cad-line-2);
  padding: 0;
}
.cad-console-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cad-line);
  font-family: var(--cad-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--cad-muted);
}
.cad-console-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--cad-amber);
  margin-right: 8px;
  border-radius: 50%;          /* 圆形豁免：状态指示灯 */
}
.cad-console-body {
  padding: 22px 18px 24px;
  font-family: var(--cad-mono);
  font-size: 13px;
  line-height: 2.25;
}
.cad-console-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cad-muted);
}
.cad-console-row .dots {
  flex: 1;
  border-bottom: 1px dashed rgba(148, 178, 214, .22);
  transform: translateY(-4px);
}
.cad-console-row .tag { color: var(--cad-cyan); }
.cad-console-row .tag.warn { color: var(--cad-amber); }
.cad-console-foot {
  border-top: 1px solid var(--cad-line);
  padding: 14px 18px;
  font-family: var(--cad-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cad-muted);
  display: flex;
  justify-content: space-between;
}

/* ---- 数据统计条 ---- */
.cad-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--cad-line);
}
.cad-stat {
  padding: 30px 34px;
  border-right: 1px solid var(--cad-line);
}
.cad-stat:last-child { border-right: 0; }
.cad-stat-num {
  font-family: var(--cad-mono);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--cad-amber);
  margin-bottom: 10px;
}
.cad-stat-num span {
  font-size: 18px;
  color: var(--cad-muted);
  margin-left: 2px;
}
.cad-stat-label {
  font-size: 13px;
  color: var(--cad-muted);
  letter-spacing: .04em;
}

/* ============ 支持的软件 ============ */
.cad-section { padding: 96px 0; position: relative; }
.cad-section--tight { padding: 80px 0; }

.cad-sw-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--cad-line);
  border: 1px solid var(--cad-line);
}
.cad-sw {
  position: relative;
  background: var(--cad-panel);
  padding: 26px 22px;
  transition: background .22s ease;
}
.cad-sw:hover { background: var(--cad-panel-2); }
.cad-sw-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}
.cad-sw-code {
  font-family: var(--cad-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cad-muted);
}

/* ============ 常见故障（浅色区，制造节奏） ============ */
.cad-section--light {
  background: #f2f6fa;
  color: #0f172a;
}
.cad-section--light .cad-sec-title { color: #0f172a; }
.cad-section--light .cad-sec-desc { color: #5a6b80; }

.cad-err-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cad-err {
  position: relative;
  background: #fff;
  border: 1px solid #dde6f0;
  padding: 28px 26px;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.cad-err:hover {
  border-color: var(--cad-amber);
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .28);
}
.cad-err-code {
  font-family: var(--cad-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--cad-amber);
  background: rgba(245, 165, 36, .1);
  display: inline-block;
  padding: 5px 10px;
  margin-bottom: 16px;
}
.cad-err-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}
.cad-err-desc {
  font-size: 14px;
  line-height: 1.8;
  color: #5a6b80;
  margin: 0;
}

/* ============ 服务内容 ============ */
.cad-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cad-line);
  border: 1px solid var(--cad-line);
}
.cad-svc {
  position: relative;
  background: var(--cad-panel);
  padding: 34px 30px 32px;
  transition: background .22s ease;
}
.cad-svc:hover { background: var(--cad-panel-2); }

.cad-svc-no {
  font-family: var(--cad-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--cad-amber);
  margin-bottom: 18px;
  display: block;
}
.cad-svc-icon {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cad-cyan);
  margin-bottom: 18px;
  background: rgba(94, 200, 216, .1);
}
.cad-svc-icon svg { width: 20px; height: 20px; display: block; }
.cad-svc-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.cad-svc-desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--cad-muted);
  margin: 0 0 18px;
}
.cad-svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cad-line);
  padding-top: 16px;
}
.cad-svc-list li {
  font-family: var(--cad-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--cad-muted);
  padding: 5px 0 5px 16px;
  position: relative;
}
.cad-svc-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--cad-amber);
}

/* ============ 服务流程 ============ */
.cad-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 2px solid var(--cad-line-2);
}
.cad-step {
  position: relative;
  padding: 34px 22px 0 0;
}
.cad-step::before {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 34px; height: 2px;
  background: var(--cad-amber);
}
.cad-step-no {
  font-family: var(--cad-mono);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--cad-line-2);
  margin-bottom: 16px;
  display: block;
  transition: color .22s ease;
}
.cad-step:hover .cad-step-no { color: var(--cad-amber); }
.cad-step-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.cad-step-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--cad-muted);
  margin: 0;
}

/* ============ SLA 规格表 ============ */
.cad-sla {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--cad-line);
  font-size: 14px;
}
.cad-sla th,
.cad-sla td {
  border: 1px solid var(--cad-line);
  padding: 16px 20px;
  text-align: left;
}
.cad-sla thead th {
  background: var(--cad-panel-2);
  font-family: var(--cad-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--cad-muted);
  text-transform: uppercase;
}
.cad-sla tbody tr { transition: background .2s ease; }
.cad-sla tbody tr:hover { background: rgba(148, 178, 214, .05); }
.cad-sla td:first-child {
  font-weight: 700;
  color: #fff;
}
.cad-sla td.cad-mono {
  font-family: var(--cad-mono);
  color: var(--cad-amber);
}
.cad-sla .lv-p0 { color: var(--cad-amber); }

/* ============ FAQ（原生 details，纯 CSS 交互） ============ */
.cad-faq { border-top: 1px solid var(--cad-line); }
.cad-faq details {
  border-bottom: 1px solid var(--cad-line);
}
.cad-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  transition: color .2s ease;
}
.cad-faq summary::-webkit-details-marker { display: none; }
.cad-faq summary:hover { color: var(--cad-amber); }
.cad-faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--cad-mono);
  font-size: 20px;
  color: var(--cad-amber);
  transition: transform .22s ease;
}
.cad-faq details[open] summary::after {
  content: '−';
}
.cad-faq-answer {
  padding: 0 60px 24px 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--cad-muted);
  margin: 0;
}

/* ============ 底部 CTA ============ */
.cad-cta {
  position: relative;
  background: var(--cad-ink);
  border-top: 1px solid var(--cad-line);
  border-bottom: 1px solid var(--cad-line);
  overflow: hidden;
}
.cad-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--cad-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cad-line) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .5;
}
.cad-cta-inner {
  position: relative;
  z-index: 2;
  padding: 76px 40px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
}
.cad-cta-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -.5px;
}
.cad-cta-desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--cad-muted);
  margin: 0;
}
.cad-cta-contact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cad-line);
  border: 1px solid var(--cad-line);
}
.cad-cta-line {
  background: var(--cad-panel);
  padding: 18px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cad-cta-line .k {
  font-family: var(--cad-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--cad-muted);
}
.cad-cta-line .v {
  font-family: var(--cad-mono);
  font-size: 17px;
  color: var(--cad-amber);
}

/* ============ 滚动入场（JS 加 .is-in） ============ */
.cad-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}
.cad-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============ 响应式 ============ */
@media (max-width: 1200px) {
  .cad-sw-grid { grid-template-columns: repeat(4, 1fr); }
  .cad-hero-inner { grid-template-columns: 1fr; gap: 48px; padding: 72px 32px 64px; }
  .cad-hero-title { font-size: 50px; }
  .cad-console { max-width: 520px; }
}

@media (max-width: 992px) {
  .cad-wrap { padding: 0 28px; }
  .cad-sw-grid { grid-template-columns: repeat(3, 1fr); }
  .cad-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .cad-err-grid { grid-template-columns: repeat(2, 1fr); }
  .cad-flow { grid-template-columns: repeat(3, 1fr); gap: 28px 0; }
  .cad-stats { grid-template-columns: repeat(2, 1fr); }
  .cad-stat { border-bottom: 1px solid var(--cad-line); }
  .cad-stat:nth-child(2n) { border-right: 0; }
  .cad-cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .cad-section { padding: 72px 0; }
  .cad-sec-title { font-size: 30px; }
}

@media (max-width: 768px) {
  .cad-page { padding-top: 68px; }      /* 移动端顶栏 60px */
  .cad-wrap { padding: 0 20px; }
  .cad-hero-inner { padding: 52px 20px 48px; }
  .cad-hero-title { font-size: 38px; letter-spacing: -.5px; }
  .cad-hero-lead { font-size: 15px; margin-bottom: 28px; }
  .cad-sw-grid { grid-template-columns: repeat(2, 1fr); }
  .cad-svc-grid { grid-template-columns: 1fr; }
  .cad-err-grid { grid-template-columns: 1fr; }
  .cad-flow { grid-template-columns: 1fr; gap: 0; }
  .cad-step { padding: 26px 0 26px 0; border-bottom: 1px solid var(--cad-line); }
  .cad-step::before { top: 0; }
  .cad-sec-title { font-size: 26px; }
  .cad-cta-inner { padding: 52px 20px; }
  .cad-cta-title { font-size: 26px; }
  .cad-sla { font-size: 13px; }
  .cad-sla th, .cad-sla td { padding: 12px 14px; }
  .cad-sla-scroll { overflow-x: auto; }
  .cad-sla { min-width: 620px; }
  .cad-faq-answer { padding-right: 20px; }
}