/* ============================================================
   大衍官网 · base.css — 全局基础层（浅色主视觉）
   ============================================================
   职责：reset / body / 背景氛围 / 滚动进度条 / 布局容器 /
         section 节奏 / 区块头 / 滚动动效
   依赖：tokens.css（所有颜色、字号、间距、圆角、阴影均来自 token）
   ============================================================ */

* , *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--bg);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
::selection { background: rgba(79, 124, 255, .18); color: var(--ink-900); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
/* 数字统一等宽对齐 */
.num, .stat .num, .price, .anum { font-variant-numeric: tabular-nums; }

/* ——— 背景氛围（浅色微光，替代深空微光） ——— */
.bg-fx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56% 44% at 50% -10%, rgba(79, 124, 255, .08), transparent 62%),
    radial-gradient(44% 36% at 96% 8%, rgba(155, 92, 255, .06), transparent 60%),
    radial-gradient(52% 44% at 4% 96%, rgba(79, 124, 255, .05), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #F6F8FC 55%, var(--bg) 100%);
}
.bg-fx::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(79, 124, 255, .08) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .5;
}

/* ——— 滚动进度条 ——— */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: var(--grad-brand);
  box-shadow: 0 0 14px rgba(79, 124, 255, .35);
  transition: width .12s linear;
}

/* ——— 布局容器 & section 节奏 ——— */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-6); }
section { position: relative; padding: 120px 0; }
section[id] { scroll-margin-top: 88px; }
section:not(.hero):not(.hero-stats) { border-top: 1px solid var(--border); }

/* ——— 区块头（字重收敛 + 字距克制） ——— */
.sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--r-full);
  color: var(--blue-600); background: var(--blue-50); border: 1px solid var(--border-brand);
}
.sec-tag span {
  font-size: 10px; letter-spacing: .14em; color: var(--blue-400); opacity: .85;
}
.sec-title span {
  font-size: 10px; letter-spacing: .14em; opacity: .8;
}
.sec-h {
  font-size: clamp(28px, 3.8vw, 42px); font-weight: 600; letter-spacing: -.02em;
  margin: var(--sp-4) 0 0; line-height: var(--lh-tight);
}
.sec-h .g {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead {
  font-size: var(--fs-17); color: var(--ink-500); max-width: 780px;
  margin-top: var(--sp-3); line-height: var(--lh-loose);
}

/* ——— 滚动动效 ——— */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .10s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .22s; }
.stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stagger.in > *:nth-child(6) { transition-delay: .34s; }

@keyframes pulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .92; } 50% { opacity: 1; transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}