/* ============================================================
   base.css — 重置、设计变量、全局质感
   ============================================================ */

:root {
  /* 中性色 */
  --c-bg:        #f4f6f9;
  --c-bg-2:      #eaeef4;
  --c-ink:       #1d2129;
  --c-ink-2:     #4e5665;
  --c-ink-3:     #8d95a4;
  --c-ink-4:     #b8bfcb;
  --c-line:      #dfe4ec;
  --c-white:     #ffffff;

  /* 品牌色 */
  --c-brand:     #2b6dfb;
  --c-brand-2:   #59d7ff;
  --c-brand-ink: #1a4fd0;
  --c-pink:      #ff77b4;

  /* 深色首屏 */
  --c-dark:      #262b36;
  --c-dark-2:    #1a1e27;
  --c-dark-deep: #123c46;

  /* 尺寸 */
  --nav-h:       0.72rem;
  --rail-w:      1.04rem;
  --page-x:      clamp(0.24rem, 1.344rem, 1.28rem);   /* ≥1180px 由 rem 等比接管 */

  /* 动效 */
  --ease:        cubic-bezier(.66, 0, .2, 1);
  --dur:         .9s;

  /* 字体 */
  --f-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
            "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-en:   "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--f-sans);
  font-size: 0.14rem;
  line-height: 1.9;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .28s ease, opacity .28s ease;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

svg { display: block; }

::selection { background: var(--c-brand); color: #fff; }

/* 细滚动条 */
.js-scroll { scrollbar-width: thin; scrollbar-color: var(--c-ink-4) transparent; }
.js-scroll::-webkit-scrollbar { width: 0.04rem; height: 0.04rem; }
.js-scroll::-webkit-scrollbar-thumb { background: var(--c-ink-4); border-radius: 0.04rem; }
.js-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- 全站点阵底纹 ---------- */
.dot-grid,
.fp__page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(29, 33, 41, .085) 0.01rem, transparent 0.01rem);
  background-size: 0.14rem 0.14rem;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 46%);
          mask-image: linear-gradient(115deg, #000 0%, transparent 46%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- 通用小标题 ---------- */
.sec-h {
  position: relative;
  font-size: 0.2rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--c-ink);
  margin-bottom: 0.26rem;
}
.sec-h em {
  display: block;
  font-family: var(--f-en);
  font-style: normal;
  font-size: 0.11rem;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--c-ink-4);
  text-transform: uppercase;
  margin-top: 0.02rem;
}

/* 无障碍：尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* <1180px：root font-size 锁在 100px，rem 不再随视口收缩，
   这些原本用 vw 表达的边距要改回真实视口单位，否则窄屏上
   左右边距会按 1920 设计稿的绝对值撑开，把内容挤到重叠。 */
@media (max-width: 1180px) {
  :root { --page-x: clamp(24px, 7vw, 128px); }
}