/* 官网整页方案原型共用的底：版心、顶栏、按钮、页脚。数值只取 brand/ 的 tokens。 */
:root { font-synthesis: none; --pad: clamp(1.25rem, 5vw, 4rem); }
*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-gutter: stable; scrollbar-width: thin;
  scrollbar-color: var(--semantic-color-border-strong) transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--semantic-color-surface-background);
  color: var(--semantic-color-text-primary);
  font-family: var(--semantic-typography-body-font-family);
  font-size: var(--semantic-typography-body-font-size);
  line-height: var(--semantic-typography-body-line-height);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.wrap { width: min(100% - 2 * var(--pad), 72rem); margin-inline: auto; }

.t-label {
  font-size: var(--semantic-typography-label-font-size);
  line-height: var(--semantic-typography-label-line-height);
  font-weight: var(--semantic-typography-label-font-weight);
}
.t-caption {
  font-size: var(--semantic-typography-caption-font-size);
  line-height: var(--semantic-typography-caption-line-height);
}
.t-lead {
  font-size: var(--semantic-typography-heading3-font-size);
  line-height: var(--semantic-typography-body-line-height);
  font-weight: var(--primitive-font-weight-regular);
}
.muted { color: var(--semantic-color-text-secondary); }
.faint { color: var(--semantic-color-text-tertiary); }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: clamp(0.75rem, 2.4svh, 1.5rem);
}
.nav img { height: 1.25rem; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 0.5rem; }
.nav-link {
  padding: 0.375rem 0.75rem; border-radius: var(--semantic-radius-pill);
  color: var(--semantic-color-text-secondary); white-space: nowrap;
}

.btn {
  height: 2.75rem; padding: 0 1.5rem; display: inline-flex; align-items: center;
  border-radius: var(--semantic-radius-pill); white-space: nowrap;
  background: var(--semantic-color-action-prominent); color: var(--semantic-color-text-on-prominent);
  font-size: var(--semantic-typography-body-strong-font-size);
  font-weight: var(--semantic-typography-body-strong-font-weight);
}
.btn.is-small { height: 2.25rem; padding: 0 1rem; font-size: var(--semantic-typography-label-font-size); }
.cta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding-block: 2rem; border-top: var(--semantic-layout-hairline) solid var(--semantic-color-border-subtle);
  color: var(--semantic-color-text-tertiary);
}
.foot ul { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.foot a { display: inline-block; padding: 0.375rem 0.5rem; border-radius: var(--semantic-radius-control); }

/* 进场：[data-reveal] 的直接子元素依次淡入上移，由 reveal.js 加类触发。 */
.has-reveal [data-reveal] > * {
  opacity: 0; translate: 0 1.5rem;
  transition:
    opacity var(--semantic-motion-duration-slow) var(--semantic-motion-easing-standard),
    translate var(--semantic-motion-duration-slow) var(--semantic-motion-easing-standard);
  transition-delay: calc(var(--i, 0) * var(--semantic-motion-duration-fast) / 2);
}
.has-reveal [data-reveal] > :nth-child(2) { --i: 1; }
.has-reveal [data-reveal] > :nth-child(3) { --i: 2; }
.has-reveal [data-reveal] > :nth-child(4) { --i: 3; }
.has-reveal [data-reveal] > :nth-child(n + 5) { --i: 4; }
.has-reveal [data-reveal].is-in > * { opacity: 1; translate: none; }