/* ==========================================================================
   基础层：reset、排版、栅格、可达性
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--c-text-2);
  background: var(--c-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--sp-4);
  color: var(--c-text-1);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-4xl); line-height: 1.2; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-brand-500);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-brand-700); text-decoration: underline; }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); }

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

strong, b { color: var(--c-text-1); font-weight: 600; }

code, pre { font-family: var(--font-mono); font-size: .92em; }

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-9) 0;
}

/* ---- 键盘可达性 ---- */
:focus-visible {
  outline: 3px solid var(--c-accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 仅在键盘导航时显示跳转链接 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-brand-700);
  color: #fff;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ---- 版心与栅格 ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.section { padding-block: var(--sp-11); }
.section-sm { padding-block: var(--sp-9); }
.section-subtle { background: var(--c-bg-subtle); }
.section-muted { background: var(--c-bg-muted); }
/* 深色整屏区块：用来打断"一片白"的节奏 */
.section-dark {
  position: relative;
  isolation: isolate;
  background: var(--c-brand-900);
  color: var(--c-text-inverse-dim);
  overflow: hidden;
}
.section-dark::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(31,169,204,.22) 0%, rgba(6,33,63,0) 66%),
    radial-gradient(50% 60% at 6% 92%, rgba(46,134,200,.20) 0%, rgba(6,33,63,0) 68%);
}
.section-dark::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: var(--dots-light);
  background-size: 26px 26px;
  opacity: .3;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 60%);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
/* 深色区块里的卡片换成玻璃质感 */
.section-dark .card {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.section-dark .card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.section-dark .card p { color: #C3D2E6; }
.section-dark .card__icon {
  background: rgba(255,255,255,.10);
  color: #9FD8EE;
  box-shadow: none;
}
.section-dark .section-head p { color: #C3D2E6; }
.section-dark .section-head__eyebrow { color: var(--c-accent-400); }

/* 不对称栅格：打破"永远等分"的死板 */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 黄金比 5:7 / 7:5 —— 主次分明 */
.grid-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grid-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grid-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.grid-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
/* 编辑式：左窄栏放标题、右宽栏放内容 */
.grid-editorial { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-10); }
/* 大格 + 小格：第一项跨两行，形成视觉重心 */
.grid-feature {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
}
.grid-feature > :first-child { grid-row: span 2; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-feature > :first-child { grid-row: span 1; }
  .grid-editorial { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}
@media (max-width: 680px) {
  :root { --fs-4xl: 32px; --fs-3xl: 27px; --fs-2xl: 23px; }
  .container, .container-narrow { padding-inline: var(--sp-4); }
  .section { padding-block: var(--sp-9); }
  .grid-2, .grid-3, .grid-4, .grid-5-7, .grid-7-5,
  .grid-4-8, .grid-8-4, .grid-feature { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 滚动入场动画 ----
   有 .reveal 的元素默认略下沉+透明；进入视口后加 .is-in 归位。
   未启用 JS 或 prefers-reduced-motion 时保持完全可见，不会白屏。 */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}
/* JS 关闭时兜底：不能因为动画把内容藏起来 */
.no-js .reveal { opacity: 1; transform: none; }

/* ---- 工具类 ---- */
.text-center { text-align: center; }
.text-1 { color: var(--c-text-1); }
.text-3 { color: var(--c-text-3); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mt-8 { margin-top: var(--sp-8); }
.mx-auto { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .site-header, .site-footer, .cta-band { display: none; }
  body { color: #000; }
}