/* ============================================
   设计令牌 —— 提取自参考站配色体系
   ============================================ */
:root {
  /* 品牌主色（科技蓝系） */
  --c-primary: #2B7FFF;
  --c-primary-deep: #1B5FD6;
  --c-primary-light: #7CB8FF;
  /* 深色（深海军蓝调） */
  --c-black: #0a1225;
  --c-dark: #1a2a42;
  /* 中性灰 */
  --c-gray: #535353;
  --c-gray-2: #666666;
  --c-gray-3: #7e7e7e;
  --c-line: #e5e5e5;
  /* 浅色底（冷调） */
  --c-bg: #f5f7f9;
  --c-bg-warm: #f4f7fb;
  --c-white: #ffffff;
  /* 语义色 */
  --c-success: #1a9e5c;
  --c-success-soft: rgba(26, 158, 92, 0.08);
  --c-error: #ff4d4f;
  --c-bg-blue: #eef5ff;

  /* 字体（当前未加载 webfont，使用系统字体栈） */
  --f-display: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* 布局 */
  --w-container: min(1400px, 92vw);
  --h-header: 90px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================
   Reset
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: var(--f-body);
  color: var(--c-dark);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; outline: none; }
button { cursor: pointer; border: none; background: none; }

/* ============================================
   通用布局
   ============================================ */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* 板块通用标题 */
.section-head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head .en {
  display: block;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 700;
  color: var(--c-black);
  letter-spacing: 1px;
  line-height: 1.3;
}
.section-head .desc {
  margin-top: clamp(12px, 1.2vw, 16px);
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--c-gray-3);
}

/* ============================================
   滚动入场动画（WOW.js 风格，IntersectionObserver 触发）
   ============================================ */
.wow {
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
.wow:not([data-wow-shown]) { opacity: 0; }
.wow.fadeInUp:not([data-wow-shown]) { transform: translateY(50px); }
.wow.fadeInDown:not([data-wow-shown]) { transform: translateY(-50px); }
.wow.fadeInLeft:not([data-wow-shown]) { transform: translateX(-60px); }
.wow.fadeInRight:not([data-wow-shown]) { transform: translateX(60px); }
.wow.zoomIn:not([data-wow-shown]) { transform: scale(0.85); }

/* 交错延迟 */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ============================================
   通用按钮
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 38px;
  background: var(--c-primary);
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(43, 127, 255, 0.35);
}
.btn-primary:hover::after { left: 130%; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 38px;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  transition: all 0.3s var(--ease-out);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  transform: translateY(-3px);
}

/* ============================================
   响应式
   ============================================ */
@media (max-width: 1280px) {
  .container { padding: 0 20px; }
}
@media (max-width: 640px) {
  .btn-primary, .btn-ghost { height: 46px; padding: 0 28px; font-size: 15px; }
}

/* ============================================
   共享组件样式（跨页面复用：Erp / Marketing / Website / 首页）
   ============================================ */

/* 流程步进条 */
.flow-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.flow-track--6 { grid-template-columns: repeat(6, 1fr); }
.flow-track::before {
  content: '';
  position: absolute;
  top: 26px; left: 9%; right: 9%;
  height: 2px;
  background: var(--c-line);
}
.flow-item { text-align: center; position: relative; }
.flow-dot {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-primary);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  position: relative; z-index: 1;
  transition: all 0.35s var(--ease-out);
}
.flow-dot span { font-family: var(--f-display); font-weight: 700; color: var(--c-primary); font-size: 15px; }
.flow-item:hover .flow-dot { background: var(--c-primary); transform: scale(1.12); }
.flow-item:hover .flow-dot span { color: #fff; }
.flow-item h3 { font-size: 15px; color: var(--c-black); margin-bottom: 8px; }
.flow-item p { font-size: 12px; color: var(--c-gray-3); line-height: 1.6; }

/* 为什么选择我们（优势对比） */
.why-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; align-items: center; }
.why-text .en {
  display: block;
  font-family: var(--f-display);
  font-size: 13px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--c-primary); margin-bottom: 16px;
}
.why-text h2 { font-size: 36px; line-height: 1.4; margin-bottom: 22px; color: var(--c-dark); }
.why-text p { font-size: 15px; color: var(--c-gray-2); line-height: 2; margin-bottom: 32px; }
.why-points { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.why-point {
  display: flex; gap: 18px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 26px 24px;
  transition: all 0.35s var(--ease-out);
}
.why-point:hover { border-color: rgba(43, 127, 255, 0.4); transform: translateY(-5px); box-shadow: 0 14px 34px rgba(43, 127, 255, 0.1); }
.why-icon { font-size: 26px; color: var(--c-primary); flex-shrink: 0; }
.why-point strong { display: block; font-size: 16px; color: var(--c-black); margin-bottom: 8px; }
.why-point p { font-size: 13px; color: var(--c-gray-3); line-height: 1.7; }

/* 通用描边按钮（深色） */
.btn-outline-dark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 36px;
  border: 1px solid var(--c-dark);
  color: var(--c-dark);
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.35s var(--ease-out);
}
.btn-outline-dark:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(43, 127, 255, 0.3);
}

@media (max-width: 900px) {
  .flow-track { grid-template-columns: repeat(3, 1fr); gap: 30px 16px; }
  .flow-track::before { display: none; }
  .why-grid { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 640px) {
  .flow-track { grid-template-columns: repeat(2, 1fr); }
  .why-points { grid-template-columns: 1fr; }
  .why-text h2 { font-size: 28px; }
}

/* ============================================
   浏览器缩放一致性：901–1100px 视口按 1440 设计稿等比缩放
   ============================================ */
@media (min-width: 901px) and (max-width: 1100px) {
  @supports (zoom: 1) {
    body { zoom: calc(100vw / 1440px); }
    :root { --w-container: 1325px; }
    .container { padding: 0 24px; }
    .section-head { margin-bottom: 56px; }
    .section-head h2 { font-size: 37.44px; }
    .section-head .desc { margin-top: 16px; font-size: 15.84px; }
  }
}

/* ============================================
   动效降级：尊重系统「减少动态效果」设置
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}