/* ============================================================
   base.css — reset / 容器 / 通用组件（按钮、徽章、头像组、列表）
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--body-md);
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.03em;
}
h1 { line-height: 1.16; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

/* ---------- 容器 ---------- */
.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - var(--gutter) * 2, 1320px); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: var(--radius-btn);
  background: var(--green);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--body-md);
  line-height: 1.2;
  transition: transform .25s var(--reveal-ease), background .25s;
  overflow: hidden;
  position: relative;
}
.btn:hover { transform: translateY(-2px); }
.btn__arrow { width: 17px; height: 8px; flex: none; transition: transform .25s var(--reveal-ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--dark { background: var(--ink); color: var(--white); }

/* ---------- 胶囊徽章（皇冠 + 文字） ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgb(3 0 40 / .14);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
}
.badge img { width: 13px; height: 11px; }
.badge--light {
  border-color: rgb(255 255 255 / .28);
  background: rgb(255 255 255 / .06);
  color: var(--white);
}

/* ---------- 头像组 ---------- */
.avatars { display: flex; align-items: center; gap: 14px; }
.avatars img { height: 44px; width: auto; }

/* ---------- 箭头列表 ---------- */
.arrow-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.arrow-list li a {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: transform .25s var(--reveal-ease);
}
.arrow-list li a:hover { transform: translateX(6px); }
.arrow-list img { width: 18px; }

/* ---------- 噪点工具类（预烘焙 svg 平铺，禁实时 filter） ---------- */
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/img/choose-noise-1.svg') repeat;
  background-size: 600px 82px;
  opacity: .35;
  pointer-events: none;
  border-radius: inherit;
}

/* ---------- reveal 初始态（JS 加载后由 GSAP 接管；无 JS 时保持可见） ---------- */
.js [data-reveal] { opacity: 0; visibility: hidden; }
.js.motion-off [data-reveal] { opacity: 1; visibility: visible; }

/* ---------- 通用 section 头部 ---------- */
.section-head { display: grid; justify-items: center; gap: 22px; text-align: center; }
.section-head h2 { max-width: 20ch; }

/* ---------- 无障碍 ---------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}