/* ==========================================================================
   适宇科技 ComfortUni · 统一设计系统（2026-07 重构）
   一套视觉语言：现代 / 国际化 / 高端制造业科技风
   用法：全站所有页面在自身 <style> 之后最后引入本文件：
   <link rel="stylesheet" href="../css/comfortuni.css?v=20260722">
   ========================================================================== */

/* ---------- 1. 设计令牌 Tokens ---------- */
:root {
  /* 品牌色 */
  --cu-blue: #0A3D8F;          /* 主品牌蓝 */
  --cu-blue-light: #1565C0;
  --cu-cyan: #00C2FF;          /* 科技青（点缀/渐变尾色） */
  --cu-gradient: linear-gradient(135deg, #0A3D8F 0%, #00C2FF 100%);
  --cu-gradient-soft: linear-gradient(135deg, rgba(10,61,143,.08) 0%, rgba(0,194,255,.08) 100%);

  /* 墨色（深色底/文字） */
  --cu-navy: #0A1628;          /* 深海军蓝 · 暗部区块 */
  --cu-navy-2: #0F1F3A;
  --cu-ink: #0F1F3A;           /* 浅色底上的标题 */
  --cu-ink-2: #47536B;         /* 正文 */
  --cu-ink-3: #8A96AB;         /* 弱化 */
  --cu-on-dark: #E8EDF5;       /* 深色底正文 */
  --cu-on-dark-muted: #93A3BC; /* 深色底弱化 */

  /* 表面 */
  --cu-bg: #FFFFFF;
  --cu-bg-alt: #F6F8FB;        /* 浅灰蓝隔段 */
  --cu-surface: #FFFFFF;
  --cu-line: #E4E9F2;          /* 浅色分割线 */
  --cu-line-dark: rgba(255,255,255,.10);
  /* hairline（Linear 手法：用 1px 低透明线代替厚重阴影做分隔） */
  --cu-hairline: rgba(15,31,58,.10);
  --cu-hairline-strong: rgba(15,31,58,.16);
  --cu-hairline-dark: rgba(255,255,255,.08);
  --cu-hairline-dark-strong: rgba(255,255,255,.14);
  --cu-navy-deep: #070D18;     /* 比 navy 更深，用于深色区渐变收尾 */

  /* 圆角 */
  --cu-r-sm: 10px;
  --cu-r-md: 16px;
  --cu-r-lg: 24px;
  --cu-r-pill: 999px;

  /* 阴影 */
  --cu-shadow-sm: 0 1px 3px rgba(15,31,58,.06);
  --cu-shadow-md: 0 6px 24px rgba(15,31,58,.08);
  --cu-shadow-lg: 0 16px 48px rgba(15,31,58,.12);
  --cu-shadow-accent: 0 8px 24px rgba(0,150,220,.28);

  /* 字体：中英文统一无衬线；等宽用于参数/编号 */
  --cu-font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --cu-font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* 字号尺度（流式） */
  --cu-fs-eyebrow: 13px;
  --cu-fs-body: 16px;
  --cu-fs-lead: clamp(17px, 1.4vw, 20px);
  --cu-fs-h3: clamp(20px, 1.8vw, 26px);
  --cu-fs-h2: clamp(28px, 3.4vw, 44px);
  --cu-fs-h1: clamp(36px, 5.6vw, 64px);

  /* 间距（8px 基准） */
  --cu-sp-1: 4px;  --cu-sp-2: 8px;  --cu-sp-3: 12px; --cu-sp-4: 16px;
  --cu-sp-6: 24px; --cu-sp-8: 32px; --cu-sp-12: 48px;
  --cu-sp-section: clamp(72px, 10vw, 128px);

  /* 大标题负字距（Linear 手法：越大越紧） */
  --cu-tracking-display: -.028em;
  --cu-tracking-title: -.018em;

  /* 布局 */
  --cu-container: 1200px;
  --cu-nav-h: 72px;

  /* 动效 */
  --cu-dur: .3s;
  --cu-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. 字体统一（覆盖各页衬线/杂散字体） ---------- */
/* 基础重置：清除浏览器默认 body 8px 外边距（页面四周一圈白边的根因） */
html, body { margin: 0; padding: 0; }
body, h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, button, input, textarea, select, blockquote {
  font-family: var(--cu-font-sans);
}
code, kbd, pre, .mono, [data-mono] { font-family: var(--cu-font-mono); }

/* ---------- 3. 布局组件 ---------- */
.cu-container {
  /* 满宽流式容器：不再限宽，只保留流式安全边距 */
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
.cu-section { padding-block: var(--cu-sp-section); }
.cu-section--alt { background: var(--cu-bg-alt); }
.cu-section--dark { background: var(--cu-navy); color: var(--cu-on-dark); }

/* 段首小标签 */
.cu-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--cu-fs-eyebrow); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cu-blue-light);
}
.cu-eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: var(--cu-gradient); border-radius: 2px;
}
.cu-section--dark .cu-eyebrow { color: var(--cu-cyan); }

.cu-title {
  font-size: var(--cu-fs-h2); font-weight: 700;
  line-height: 1.15; letter-spacing: var(--cu-tracking-title);
  color: var(--cu-ink); margin: 14px 0 16px;
}
.cu-section--dark .cu-title { color: #fff; }
/* 渐变文字点睛（Linear 签名手法：克制地用于关键词） */
.cu-text-gradient {
  background: linear-gradient(120deg, #1565C0 0%, #00C2FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cu-section--dark .cu-text-gradient,
.cu-text-gradient--on-dark {
  background: linear-gradient(120deg, #7FB8FF 0%, #4DD4FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cu-lead {
  font-size: var(--cu-fs-lead); line-height: 1.75;
  color: var(--cu-ink-2); max-width: 720px;
}
.cu-section--dark .cu-lead { color: var(--cu-on-dark-muted); }

/* ---------- 4. 按钮规范 ---------- */
.cu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px;
  border-radius: var(--cu-r-pill);
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--cu-dur) var(--cu-ease), box-shadow var(--cu-dur) var(--cu-ease),
              background var(--cu-dur), color var(--cu-dur), border-color var(--cu-dur);
}
.cu-btn--primary {
  background: var(--cu-gradient); color: #fff;
  box-shadow: 0 1px 2px rgba(10,22,40,.25), 0 8px 24px rgba(0,150,220,.26);
}
.cu-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(10,22,40,.25), 0 14px 36px rgba(0,150,220,.38); }
.cu-btn--secondary {
  background: transparent; color: var(--cu-blue);
  border: 1px solid var(--cu-hairline-strong);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.cu-btn--secondary:hover { border-color: rgba(10,61,143,.45); background: rgba(10,61,143,.04); transform: translateY(-2px); }
.cu-btn--ghost-light { /* 深色底上的次按钮 */
  color: #fff; border: 1px solid var(--cu-hairline-dark-strong); background: rgba(255,255,255,.04);
}
.cu-btn--ghost-light:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.cu-btn:active { transform: translateY(0); }
.cu-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }

/* ---------- 5. 卡片规范（hairline 扁平化，阴影只留给 hover） ---------- */
.cu-card {
  background: var(--cu-surface);
  border: 1px solid var(--cu-hairline);
  border-radius: var(--cu-r-lg);
  padding: clamp(24px, 3vw, 40px);
  transition: transform var(--cu-dur) var(--cu-ease), box-shadow var(--cu-dur) var(--cu-ease), border-color var(--cu-dur);
}
.cu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cu-shadow-lg);
  border-color: rgba(0,194,255,.4);
}
.cu-card--dark {
  background: rgba(255,255,255,.03); border-color: var(--cu-hairline-dark); color: var(--cu-on-dark);
}
.cu-card--dark:hover { border-color: rgba(0,194,255,.35); }

/* 标签/芯片 */
.cu-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--cu-r-pill);
  font-size: 13px; font-weight: 500;
  background: rgba(10,61,143,.05); color: var(--cu-blue);
  border: 1px solid var(--cu-hairline);
}
.cu-section--dark .cu-chip, .cu-chip--dark {
  background: rgba(0,194,255,.08); color: var(--cu-cyan);
  border-color: var(--cu-hairline-dark-strong);
}

/* 深色区辉光（Linear glow-orb 手法：径向渐变大光斑，营造纵深不用阴影） */
.cu-glow {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,194,255,.14), transparent 70%);
  filter: blur(10px);
}

/* 网格 */
.cu-grid { display: grid; gap: clamp(16px, 2.5vw, 32px); }
.cu-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cu-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cu-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 6. 统一导航头（兼容全部历史前缀：cv-/ab-/cp-/cu-/th-） ---------- */
.cv-nav, .ab-nav, .cp-nav, .cu-nav, .th-nav {
  font-family: var(--cu-font-sans);
}
/* 各页导航背景统一为深色玻璃（深色页）或白色玻璃（浅色页），
   具体底色由各页主题决定，这里统一尺寸/排版/交互 */
.cv-nav a, .ab-nav a, .cp-nav a, .cu-nav a, .th-nav a,
.cv-nav button, .ab-nav button, .cp-nav button, .cu-nav button, .th-nav button {
  font-family: var(--cu-font-sans);
}

/* ---------- 7. 统一页脚 ---------- */
.cu-site-footer {
  font-family: var(--cu-font-sans);
  background: var(--cu-navy);
  color: var(--cu-on-dark-muted);
}
.cu-site-footer a { color: var(--cu-on-dark); transition: color .2s; }
.cu-site-footer a:hover { color: var(--cu-cyan); }

/* ---------- 8. 滚动显现动效（配合 cu-ui.js） ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--cu-ease), transform .7s var(--cu-ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- 9. 响应式规范 ---------- */
/* Pad：769–1024px */
@media (max-width: 1024px) {
  .cu-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cu-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile：≤768px */
@media (max-width: 768px) {
  .cu-grid--2, .cu-grid--3, .cu-grid--4 { grid-template-columns: 1fr; }
  .cu-btn { height: 46px; padding: 0 22px; }
}

/* ---------- 10. 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}