/* ==========================================================
   冠袋 GOODAI - 全局样式入口
   设计风格：北欧极简冷调（参考沃尔沃）—— 纯白 + 浅灰 + 单一 Volvo 蓝 #004472，无暖色点缀，大留白
   原则：60-30-10 配色、字号标尺、留白即设计、克制即高级
   ========================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* —— 浅色主基调（北欧极简：纯白 + 浅灰，冷调，无暖色） —— */
  --bg:          #FFFFFF;   /* 页面主背景：纯白 */
  --bg-soft:     #F4F5F6;   /* 交替浅灰区块 */
  --bg-elevated: #FFFFFF;   /* 卡片表面 */
  --bg-card:     #FFFFFF;   /* 二级卡片 */
  --surface:     #ECEEF1;   /* hover 表面（浅灰） */
  --grad-deep:   #FFFFFF;
  --grad-mid:    #F4F5F6;

  /* —— 品牌深蓝（Volvo Blue，单一冷色识别，呼应 logo 深蓝圆底） —— */
  --navy:        #004472;   /* Volvo Blue 主识别色 */
  --navy-deep:   #003057;
  --navy-soft:   #185D98;

  /* —— 白卡（浅色主题下即白卡 + 细灰边 + 柔影） —— */
  --glass-bg:        #FFFFFF;
  --glass-bg-soft:   #F4F5F6;
  --glass-border:    rgba(0, 0, 0, 0.08);
  --glass-border-strong: rgba(0, 0, 0, 0.14);
  --glass-shadow:    rgba(0, 0, 0, 0.08);

  /* —— 强调色（冷蓝，替换原金色；仅强调/交互/hover 用） —— */
  --accent:       #185D98;   /* 交互蓝（hover/点/边框） */
  --accent-hover: #004472;
  --accent-soft:  rgba(0, 68, 114, 0.10);
  --accent-glow:  rgba(0, 68, 114, 0.10);
  --accent-bright:#1E71B8;   /* 亮蓝（填充/渐变/大色块） */

  /* —— 冷蓝发光（科技感光晕，克制使用；hover/重点强调） —— */
  --glow-blue:      rgba(30, 113, 184, 0.38);  /* 主发光 */
  --glow-blue-soft: rgba(30, 113, 184, 0.20);  /* 柔和发光 */

  /* —— 科技蓝（冷蓝辅助记忆色，与 navy 同族） —— */
  --tech:         #185D98;
  --tech-soft:    rgba(0, 68, 114, 0.10);

  /* —— 浅底文字（冷调近黑，对比度 ≥7:1） —— */
  --text-primary:   #1A1D1F;   /* 标题/正文主色（近黑） */
  --text-secondary: #5F5E5A;   /* 正文次要 */
  --text-tertiary:  #6E6F6B;   /* 次要正文 */
  --text-muted:     #8A8D90;   /* 辅助说明 */
  --text-dim:       #8A8D90;   /* 产品卡正文（旧兼容） */

  /* —— 边框（冷灰） —— */
  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-accent: rgba(0, 68, 114, 0.45);

  /* —— 线条系统（冷蓝/灰 · 更细更轻更克制） —— */
  --line-1:         rgba(0, 0, 0, 0.08);   /* L1 基础分隔线 */
  --line-1-soft:    rgba(0, 0, 0, 0.05);   /* L1 弱化分隔线（参数行等） */
  --line-strong:    rgba(0, 0, 0, 0.14);   /* 结构强调线 */
  --line-gold:      rgba(0, 68, 114, 0.85); /* 品牌蓝线（变量名保留兼容） */
  --line-gold-soft: rgba(0, 68, 114, 0.45); /* 蓝线弱化 */
  --line-tech:      rgba(0, 68, 114, 0.55); /* 冷蓝线 */
  --grad-line:      linear-gradient(90deg, rgba(0,68,114,0.95) 0%, rgba(24,93,152,0.82) 100%);          /* L2 深蓝→亮蓝渐变 */
  --grad-line-fade: linear-gradient(90deg, transparent 0%, rgba(0,68,114,0.55) 30%, rgba(24,93,152,0.60) 70%, transparent 100%); /* L3 结构线 */
  --grad-line-top:  linear-gradient(90deg, transparent, rgba(0,68,114,0.50), rgba(24,93,152,0.60), transparent); /* 卡片顶部细线 */
  --grad-text:      linear-gradient(90deg, #185D98 0%, #004472 100%); /* 渐变文字（亮蓝→深蓝，保证可读） */
  --grid-line:      rgba(0, 0, 0, 0.04);  /* L4 背景网格（极低透明） */

  /* —— 品牌渐变（冷蓝） —— */
  --grad-navy:   linear-gradient(135deg, #1E71B8 0%, #004472 100%);  /* CTA 蓝渐变锚点 */
  --grad-gold:   linear-gradient(135deg, #1E71B8 0%, #004472 100%);
  --grad-brand:  linear-gradient(135deg, #185D98 0%, #004472 100%);

  /* —— 圆角 —— */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* —— 字号标尺（7 级，大气清晰 · 已整体放大） —— */
  --fs-hero:     clamp(52px, 8vw, 96px);   /* H1 首屏主标题 */
  --fs-h2:       clamp(44px, 6.5vw, 76px);   /* H2 区块标题 */
  --fs-h3:       28px;                       /* H3 卡片标题（桌面） */
  --fs-eyebrow:  14px;                       /* 小标签 / 英文眉头 */
  --fs-body:     17px;                       /* 正文 */
  --fs-caption:  14px;                       /* 辅助说明 */
  --fs-micro:    12px;                       /* 极小字 / footer */

  /* —— 字距 —— */
  --ls-tight:  0em;        /* 大字标题紧字距 */
  --ls-normal: 0.02em;     /* 中文正文 */
  --ls-loose:  0.06em;     /* 中文小标签 */
  --ls-eyebrow: 0.25em;    /* 英文眉头宽字距 */
}

/* ---------- 2. 全局重置 + 基础排版 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1400px 700px at 85% -8%, rgba(0, 68, 114, 0.10), transparent 55%),
    radial-gradient(1000px 600px at 5% 8%, rgba(0, 68, 114, 0.08), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #EEF4FB 100%);
  /* 注意：此处刻意不使用 background-attachment: fixed。
     固定背景在 Chrome/Windows 上会在每帧滚动时强制重绘整屏渐变，
     长页面（如图集）会出现滚动卡死。改用随页面滚动即可，光晕极淡不影响观感。 */
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--ls-normal);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: inherit;
}
p { margin: 0; }

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--accent); }

::selection {
  background: var(--navy);
  color: #FFFFFF;
}

img { max-width: 100%; display: block; }

/* ---------- 3. 流体容器（流式缩放，断崖修复） ---------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}

/* ---------- 4. 章节标题体系（eyebrow + 大标题 + 可选描述） ---------- */
/* 取代旧的「巨型水印 + 三根线」模板。结构：
   <div class="section-head">
     <div class="eyebrow">CORE CAPABILITIES</div>
     <h2 class="title">六大核心能力</h2>
     <p class="subtitle">（可选）描述</p>
   </div>
   .section-head--center 居中
   .section-head--left   左对齐（次级模块）
*/
.section-head {
  position: relative;
  z-index: 1;
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(28px, 4vw, 40px);
  --head-align: center;
  text-align: var(--head-align);
}
.section-head--left { --head-align: left; text-align: left; }

.section-head .eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  position: relative;
  /* 适度张扬：金→科技蓝渐变文字，作为全站设计签名 */
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* 眉头左侧短竖线，仅在左对齐模式下出现 */
.section-head--left .eyebrow::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  margin-right: 12px;
  vertical-align: -2px;
}

/* 居中模式 eyebrow 两侧短横线（工业精密感 · 呼应 logo 线条语言） */
.section-head:not(.section-head--left) .eyebrow::before,
.section-head:not(.section-head--left) .eyebrow::after {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--line-tech);
  opacity: 0.55;
  vertical-align: middle;
}
.section-head:not(.section-head--left) .eyebrow::before { margin-right: 14px; }
.section-head:not(.section-head--left) .eyebrow::after  { margin-left: 14px; }

.section-head .title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin: 0;
}
.section-head .subtitle {
  margin: 18px auto 0;
  max-width: 660px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--text-tertiary);
  letter-spacing: var(--ls-normal);
}
.section-head--left .subtitle { margin-left: 0; margin-right: 0; }

/* 标题下方短线（L2 装饰线：金→蓝渐变 2px，方案 B · 居中/左对齐自适应） */
.section-head .title::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--grad-line);
  border-radius: 2px;
  opacity: 0.9;
}
.section-head--left .title::after { margin: 16px 0 0; }

/* ---------- 5. 浅色区块（Apple 式明亮交替，品牌深蓝点缀） ---------- */
.section--glass {
  position: relative;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(0, 68, 114, 0.10), transparent 55%),
    linear-gradient(180deg, var(--bg-soft) 0%, #FFFFFF 50%, var(--bg-soft) 100%);
  color: var(--text-primary);
}
.section--glass a { color: var(--text-primary); }
.section--glass a:hover { color: var(--accent); }

/* 区块顶部 L3 结构线（透明→金→蓝→透明，极淡，起精密分界作用） */
.section--glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-line-fade);
  opacity: 0.6;
  pointer-events: none;
}

/* 白卡：细蓝边 + 柔影 + 顶部金→蓝渐变结构线（比浅色奶油高级且统一） */
.glass-card {
  position: relative;
  --corner-c: rgba(0, 68, 114, 0.28);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px var(--glass-shadow);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
/* 卡片顶部极淡金→蓝渐变结构线（克制，不抢内容；hover 略微变亮） */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--grad-line-top);
  opacity: 0.85;
  transition: opacity .35s ease;
  pointer-events: none;
}
.glass-card:hover::before { opacity: 1; }

/* 四角 L 形取景框角标（工业精密线条签名 · 内缩 14px · 克制淡显 · hover 增强） */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c)),
    linear-gradient(var(--corner-c), var(--corner-c));
  background-repeat: no-repeat;
  background-size:
    16px 1px, 1px 16px,
    16px 1px, 1px 16px,
    16px 1px, 1px 16px,
    16px 1px, 1px 16px;
  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;
  opacity: 0.5;
  transition: opacity .35s ease;
}
.glass-card:hover {
  --corner-c: rgba(0, 68, 114, 0.62);
  border-color: var(--border-accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(30, 113, 184, 0.22), 0 0 30px var(--glow-blue-soft);
}
.glass-card:hover::after { opacity: 0.95; }

/* 深色区块（关于冠袋）内卡片：角标改用白色系，保证深底可见 */
.section-about .glass-card { --corner-c: rgba(255, 255, 255, 0.22); }
.section-about .glass-card:hover { --corner-c: rgba(255, 255, 255, 0.52); }

/* L4 背景网格（极低透明，仅局部区域使用） */
.bg-grid-fine {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- 6. 通用按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  /* 北欧冷调：Volvo 蓝渐变填充 + 白字 + 1px 高光描边 + 冷蓝外发光 */
  background: var(--grad-navy);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(0, 68, 114, 0.28), 0 0 0 0 var(--glow-blue-soft), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #2A80C8 0%, #004472 100%);
  color: #FFFFFF;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 12px 28px rgba(0, 68, 114, 0.34), 0 0 26px var(--glow-blue), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--ghost-light {
  background: transparent;
  color: var(--navy);
  border-color: var(--border-strong);
}
.btn--ghost-light:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 7. 入场动画（纯 CSS 关键帧，无 JS 依赖） ---------- */
/* 设计原则：内容永远可见（无 JS 也能渲染），动画仅做"锦上添花"的 slide-up。
   用 animation + both 填充模式，0% 短暂隐藏→100% 显示，结束后保持显示。
   任何时刻元素都可被截图、被爬虫看到、被屏幕阅读器读到。 */
.fade-up {
  animation: fadeUpIn 0.7s cubic-bezier(.2, .6, .2, 1) both;
  animation-delay: var(--delay, 0s);
}
@keyframes fadeUpIn {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.9s ease both;
  animation-delay: var(--delay, 0s);
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* 尊重系统的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- 8. 兼容旧版 .section-line（保留兜底，不渲染可见样式） ---------- */
.section-line {
  height: 0;
  display: none;
}
.section-line .item,
.section-line .item.middle { display: none; }