/* ==========================================================================
   上海治历科技有限公司 · Token 统一接口平台（静态首页）
   ZHILI Deep-Blue Enterprise Tech — tokens translated once from DESIGN.md
   零依赖：不引用任何外部字体、样式库或脚本
   ========================================================================== */

:root {
  /* color */
  --color-primary: #1a3abf;
  --color-primary-hover: #142c96;
  --color-primary-active: #0f2273;
  --color-primary-soft: #eaeffb;
  --color-primary-soft-strong: #d7e1f8;
  --color-secondary: #1878f0;
  --color-secondary-hover: #0f63d2;
  --color-secondary-soft: #e4effd;

  --color-hero-from: #071233;
  --color-hero-to: #16309c;
  --color-on-hero: #ffffff;
  --color-on-hero-muted: #c3d2f2;
  --color-hero-glass: rgb(255 255 255 / 0.12);
  --color-hero-hairline: rgb(255 255 255 / 0.2);

  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f4f7fc;
  --color-surface-sunken: #edf2fa;
  --color-on-surface: #0d1b3e;
  --color-on-surface-variant: #3c4a63;
  --color-muted: #5b6880;
  --color-on-primary: #ffffff;

  --color-border: #d9e2f0;
  --color-border-soft: #e9eff8;
  --color-border-strong: #b9c7de;

  --color-code-surface: #0b1730;
  --color-code-surface-raised: rgb(255 255 255 / 0.1);
  --color-code-on-surface: #e6edfa;
  --color-code-muted: #8fa3c4;
  --color-code-accent: #7fb0ff;

  --color-success: #0b7a46;

  --color-focus-ring: #1878f0;
  --color-focus-ring-on-dark: #ffffff;
  --color-overlay: rgb(7 18 51 / 0.56);

  /* typography */
  --font-sans: "Inter", "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas,
    "Liberation Mono", "PingFang SC", "Microsoft YaHei", monospace;

  --fs-display: 56px;
  --fs-headline-lg: 40px;
  --fs-headline-md: 28px;
  --fs-headline-sm: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-label-lg: 16px;
  --fs-label: 14px;
  --fs-label-sm: 12px;
  --fs-code: 14px;

  --lh-display: 1.08;
  --lh-headline: 1.15;
  --lh-tight: 1.3;
  --lh-body: 1.7;
  --lh-body-lg: 1.65;
  --lh-body-sm: 1.6;
  --lh-label: 1.4;

  /* rounded */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 20px;
  --section-y: 48px;
  --nav-height: 64px;
  --touch-target-min: 44px;
  --rail-reserve: 54px;

  /* elevation */
  --shadow-raised: 0 18px 36px -18px rgb(7 18 51 / 0.28), 0 30px 45px -30px rgb(7 18 51 / 0.22);
  --hero-gradient: linear-gradient(155deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);

  /* stacking */
  --z-base: 0;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-drawer: 310;
  --z-toast: 400;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-height) + 16px);
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* 老浏览器用 hidden，现代浏览器用 clip（clip 不会破坏 position: sticky） */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

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

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

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
  border-radius: var(--radius-sm);
}

.hero :focus-visible,
.code-card :focus-visible {
  box-shadow: 0 0 0 2px var(--color-code-surface), 0 0 0 4px var(--color-focus-ring-on-dark);
}

.hero :focus-visible {
  box-shadow: 0 0 0 2px var(--color-hero-from), 0 0 0 4px var(--color-focus-ring-on-dark);
}

::selection {
  background-color: var(--color-primary-soft-strong);
}

/* ==========================================================================
   Utilities and layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* keep text clear of the floating contact rail */
  padding-inline-end: calc(var(--gutter) + var(--rail-reserve));
}

.container--narrow {
  max-width: var(--container-narrow);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -60px;
  z-index: var(--z-drawer);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-label-lg);
  font-weight: 500;
  transition: inset-block-start 0.18s ease;
}

.skip-link:focus {
  inset-block-start: var(--space-4);
}

.section {
  padding-block: var(--section-y);
}

.section--muted {
  background-color: var(--color-surface-muted);
}

.section-head {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-10);
}

.eyebrow {
  color: var(--color-primary);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-title {
  margin-top: var(--space-3);
  color: var(--color-on-surface);
  font-size: var(--fs-headline-md);
  font-weight: 600;
  line-height: var(--lh-headline);
  letter-spacing: -0.01em;
}

.section-lead {
  margin-top: var(--space-4);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body);
}

.footnote {
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
}

.empty-state {
  margin-top: var(--space-6);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-sunken);
  color: var(--color-muted);
  text-align: center;
}

.toast {
  position: fixed;
  inset-block-end: var(--space-8);
  inset-inline-start: 50%;
  z-index: var(--z-toast);
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-on-surface);
  color: #fff;
  font-size: var(--fs-label);
  box-shadow: var(--shadow-raised);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-label-lg);
  font-weight: 600;
  line-height: var(--lh-label);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
}

.btn--primary:active {
  background-color: var(--color-primary-active);
}

.btn--on-hero {
  border-color: var(--color-hero-hairline);
  background-color: var(--color-hero-glass);
  color: var(--color-on-hero);
}

.btn--on-hero:hover {
  background-color: rgb(255 255 255 / 0.2);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  background-color: var(--color-surface);
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  border-block-end-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--nav-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-on-surface);
}

.brand__mark {
  width: 32px;
  height: 32px;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
}

.brand__name {
  font-size: var(--fs-label-lg);
  font-weight: 600;
  line-height: 1.2;
}

.brand__en {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-label-lg);
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.site-nav__link:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-on-surface);
}

.site-nav__cta {
  margin-inline-start: var(--space-3);
}

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  margin-inline-start: auto;
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
}

.menu-btn:hover {
  background-color: var(--color-primary-soft);
}

.menu-btn__close {
  display: none;
}

.menu-btn[aria-expanded="true"] .menu-btn__open {
  display: none;
}

.menu-btn[aria-expanded="true"] .menu-btn__close {
  display: block;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-overlay);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--hero-gradient);
  color: var(--color-on-hero);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgb(255 255 255 / 0.08) 0%, transparent 60%),
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block: var(--space-12) var(--space-16);
}

/* 首屏品牌标识：白底圆角小块，保证蓝色标识在深色渐变上清晰可辨 */
.hero__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__brand-tile {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16);
}

.hero__brand-text {
  display: flex;
  flex-direction: column;
}

.hero__brand-name {
  color: var(--color-on-hero);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.25;
}

.hero__brand-en {
  color: var(--color-on-hero-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.6;
}

.hero__eyebrow {
  margin-top: var(--space-6);
  color: var(--color-on-hero-muted);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__title {
  margin-top: var(--space-4);
  font-size: 34px;
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
}

.hero__subtitle {
  max-width: 620px;
  margin-top: var(--space-5);
  color: var(--color-on-hero-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body-lg);
}

.hero__subtitle code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: rgb(255 255 255 / 0.12);
  color: var(--color-on-hero);
  font-size: 0.86em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-block-start: 1px solid var(--color-hero-hairline);
}

.hero__trust li {
  position: relative;
  padding-inline-start: var(--space-5);
  color: var(--color-on-hero);
  font-size: var(--fs-body-sm);
}

.hero__trust li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
}

.hero__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* code card ---------------------------------------------------------------- */

.code-card {
  border: 1px solid var(--color-hero-hairline);
  border-radius: var(--radius-xl);
  background-color: var(--color-code-surface);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.code-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-code-surface-raised);
}

.code-tabs {
  display: flex;
  gap: var(--space-1);
}

.code-tab {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-code-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.code-tab:hover {
  color: var(--color-code-on-surface);
}

.code-tab.is-active {
  background-color: var(--color-code-surface-raised);
  color: var(--color-code-on-surface);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--color-code-surface-raised);
  color: var(--color-code-on-surface);
  font-size: var(--fs-label-sm);
  font-weight: 500;
}

.copy-btn:hover {
  color: #fff;
}

.copy-btn.is-done {
  color: var(--color-code-accent);
}

.code-card__body {
  padding: var(--space-4) 0;
}

.code-block {
  margin: 0;
  padding-inline: var(--space-5);
  overflow-x: auto;
  color: var(--color-code-on-surface);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.code-block[hidden] {
  display: none;
}

.code-card__foot {
  padding: var(--space-2) var(--space-5) var(--space-4);
  color: var(--color-code-muted);
  font-size: var(--fs-label-sm);
}

/* hero facts --------------------------------------------------------------- */

.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.fact {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hero-hairline);
  border-radius: var(--radius-md);
  background-color: rgb(255 255 255 / 0.06);
}

.fact__label {
  display: block;
  color: var(--color-on-hero-muted);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.04em;
}

.fact__value {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-on-hero);
  font-size: var(--fs-body-sm);
  font-weight: 500;
}

/* ==========================================================================
   Card grids
   ========================================================================== */

.card-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

.card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition: border-color 0.18s ease;
}

.card:hover {
  border-color: var(--color-border-strong);
}

.card--compact {
  padding: var(--space-5);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.card__title {
  margin-top: var(--space-4);
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.card__text {
  margin-top: var(--space-3);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.card__text code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-primary);
  font-size: 0.9em;
}

/* ==========================================================================
   Vendor chips
   ========================================================================== */

.chip-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding-block: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-on-surface);
}

.chip.is-selected {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 600;
}

/* ==========================================================================
   Model cards
   ========================================================================== */

.model-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition: border-color 0.18s ease;
}

.model-card:hover {
  border-color: var(--color-border-strong);
}

.model-card[hidden] {
  display: none;
}

.model-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.model-card__name {
  color: var(--color-on-surface);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.badge-neutral {
  flex: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  white-space: nowrap;
}

.model-card__type {
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.model-card__desc {
  margin-top: var(--space-2);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

/* ==========================================================================
   Steps and access CTA
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.step {
  position: relative;
  padding-inline-start: 56px;
}

.step__marker {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-label);
  font-weight: 600;
}

.step__title {
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
  line-height: 1.2;
  padding-block-start: 3px;
}

.step__text {
  margin-top: var(--space-2);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.step__text code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.9em;
}

.access-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.access-cta__title {
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
}

.access-cta__text {
  margin-top: var(--space-2);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
}

.access-cta .btn {
  align-self: flex-start;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr);
}

.about__lead {
  margin-top: var(--space-4);
  color: var(--color-on-surface);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.about__text {
  margin-top: var(--space-4);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body);
}

.about__biz {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.biz {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.biz__title {
  color: var(--color-on-surface);
  font-size: var(--fs-body);
  font-weight: 600;
}

.biz__text {
  margin-top: var(--space-3);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq {
  border-block-start: 1px solid var(--color-border);
}

.faq__item {
  border-block-end: 1px solid var(--color-border);
}

.faq__heading {
  font-size: inherit;
  font-weight: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 60px;
  padding: var(--space-5) var(--space-2);
  color: var(--color-on-surface);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  text-align: start;
  transition: color 0.18s ease;
}

.faq__trigger:hover {
  color: var(--color-primary);
}

.faq__trigger[aria-expanded="true"] {
  color: var(--color-primary);
}

.faq__chevron {
  flex: none;
  color: var(--color-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.faq__trigger[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq__panel {
  padding: 0 var(--space-2) var(--space-6);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body);
}

.faq__panel[hidden] {
  display: none;
}

.faq__panel code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.9em;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.contact__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  max-width: 320px;
}

.contact__qr img {
  width: 220px;
  height: auto;
  border-radius: var(--radius-sm);
}

.contact__qr-caption {
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  text-align: center;
}

.contact__list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-border);
}

.contact__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.contact__label {
  flex: none;
  color: var(--color-muted);
  font-size: var(--fs-label);
}

.contact__value {
  color: var(--color-on-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: end;
  word-break: break-all;
}

.contact__link {
  color: var(--color-primary);
}

.contact__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-surface-muted);
  border-block-start: 1px solid var(--color-border);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-12) var(--space-8);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__name {
  color: var(--color-on-surface);
  font-size: var(--fs-body);
  font-weight: 600;
}

.site-footer__en {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.site-footer__title {
  color: var(--color-on-surface);
  font-size: var(--fs-label-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__nav ul,
.site-footer__contact ul {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.site-footer__nav a,
.site-footer__contact a,
.site-footer__contact li {
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
}

.site-footer__icp a {
  color: var(--color-muted);
}

.site-footer__icp a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Floating contact rail
   注意：任何会向外伸出子元素的容器都不要设置 overflow，否则标签与浮层会被裁掉。
   ========================================================================== */

.rail {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-end: var(--space-3);
  transform: translateY(-50%);
  z-index: var(--z-dropdown);
}

.rail__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
  /* 不要在这里设置 overflow：浮层与标签要伸出容器外 */
}

.rail__item {
  position: relative;
  display: flex;
}

.rail__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.rail__button:hover {
  background-color: var(--color-primary-soft);
}

.rail__item.is-open .rail__button {
  background-color: var(--color-primary-soft);
}

.rail__label,
.rail__panel {
  position: absolute;
  inset-inline-end: calc(100% + var(--space-2));
  inset-block-start: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.rail__label {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  white-space: nowrap;
}

.rail__panel {
  width: 236px;
  max-width: calc(100vw - 88px);
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

/* 隐形桥接：让指针从图标移动到面板时不会中途丢失 hover。
   挂在列表项上（面板自身有 overflow，会裁掉自己的伪元素）。 */
.rail__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--space-2) * -1);
  width: var(--space-2);
}

.rail__panel--qr {
  text-align: center;
}

.rail__qr {
  width: 168px;
  height: 168px;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

.rail__panel-caption {
  margin-top: var(--space-3);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.rail__panel-title {
  color: var(--color-muted);
  font-size: var(--fs-label-sm);
  font-weight: 500;
}

.rail__panel-value {
  margin-top: var(--space-2);
  color: var(--color-on-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  user-select: all;
  word-break: break-all;
}

.rail__panel-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rail__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--fs-label);
  font-weight: 500;
  transition: background-color 0.18s ease;
}

.rail__action:hover {
  background-color: var(--color-primary-soft);
}

.rail__action--primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.rail__action--primary:hover {
  background-color: var(--color-primary-hover);
}

.rail__action.is-done {
  border-color: var(--color-success);
  color: var(--color-success);
}

.rail__panel-hint {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--fs-label-sm);
  line-height: var(--lh-body-sm);
}

/* 悬停整条侧边栏时浮出全部标签（不设 media query，任何支持 hover 的浏览器都生效） */
.rail:hover .rail__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* 单个浮层展开时，同列标签让位，避免互相压盖 */
.rail:has(.rail__item:hover) .rail__label,
.rail:has(.rail__item:focus-within) .rail__label,
.rail.rail--open .rail__label {
  opacity: 0;
}

.rail__item:hover .rail__panel,
.rail__item:focus-within .rail__panel,
.rail__item.is-open .rail__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* 横屏矮视口：贴顶定位，避免浮层超出屏幕 */
@media (max-height: 620px) {
  .rail {
    inset-block-start: var(--space-4);
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --section-y: 72px;
  }

  .hero__title {
    font-size: 40px;
  }

  .section-title {
    font-size: 32px;
  }

  .card-grid--3,
  .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .step {
    padding-inline-start: 0;
    padding-block-start: 56px;
  }

  .step__marker {
    inset-block-start: 0;
  }

  /* 步骤之间的连接细线（节点语言，全页仅此一处重复使用） */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: 44px;
    inset-block-start: 16px;
    width: calc(100% - 32px);
    height: 1px;
    background-color: var(--color-border-strong);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-y: 104px;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-16) var(--space-20);
  }

  .hero__title {
    font-size: var(--fs-display);
  }

  .hero__brand-tile {
    width: 52px;
    height: 52px;
  }

  .hero__trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-title {
    font-size: var(--fs-headline-lg);
  }

  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-12);
  }

  .access-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-8);
  }

  .access-cta .btn {
    align-self: center;
    flex: none;
  }
}

@media (min-width: 1280px) {
  .card-grid--4,
  .model-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 视口足够宽时，侧边栏落在容器留白里，正文恢复左右对称 */
@media (min-width: 1360px) {
  .container {
    padding-inline-end: var(--gutter);
  }
}

/* 手机：侧边栏收窄并贴边，正文保留较小的让位空间 */
@media (max-width: 639px) {
  :root {
    --rail-reserve: 48px;
  }

  .rail {
    inset-inline-end: 0;
  }

  .rail__button {
    width: 40px;
    height: 40px;
  }

  .rail__panel {
    width: 214px;
    padding: var(--space-3);
  }

  .rail__qr {
    width: 148px;
    height: 148px;
  }

  .brand__en {
    display: none;
  }
}

@media (max-width: 1023px) {
  .menu-btn {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(320px, 86vw);
    margin: 0;
    padding: var(--space-5);
    background-color: var(--color-surface);
    border-inline-start: 1px solid var(--color-border);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0.24s ease;
    overflow-y: auto;
  }

  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list li + li {
    border-block-start: 1px solid var(--color-border-soft);
  }

  .site-nav__link {
    width: 100%;
    padding-block: var(--space-4);
    font-size: var(--fs-label-lg);
  }

  .site-nav__cta {
    margin: var(--space-5) 0 0;
    width: 100%;
  }
}

/* 触摸设备：把偏小的控件补足到 44×44 的点击目标 */
@media (pointer: coarse) {
  .code-tab,
  .copy-btn {
    min-height: var(--touch-target-min);
  }
}

@media print {
  .rail {
    display: none;
  }
}

/* ==========================================================================
   资讯栏目：列表页与文章页
   ========================================================================== */

/* --- 通用页头 --- */
.page-hero {
  padding-block: var(--space-12) var(--space-10);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--color-primary-soft) 0%, transparent 55%),
    var(--color-surface-muted);
  border-block-end: 1px solid var(--color-border-soft);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.breadcrumb a {
  color: var(--color-muted);
  transition: color 0.18s ease;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb__sep {
  color: var(--color-border-strong);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-on-surface-variant);
}

.page-title {
  margin-top: var(--space-3);
  color: var(--color-on-surface);
  font-size: var(--fs-headline-lg);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.page-lead {
  max-width: 54em;
  margin-top: var(--space-4);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: var(--fs-label);
}

.article-meta span {
  display: inline-flex;
  align-items: center;
}

.article-meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline-end: var(--space-4);
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
}

/* --- 首页区块头（标题 + 右侧入口） --- */
.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: none;
}

.section-head--row > div {
  max-width: var(--container-narrow);
}

.btn--ghost {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-on-surface);
}

.btn--ghost:hover {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.card-grid--2 {
  grid-template-columns: 1fr;
}

/* --- 资讯卡片 --- */
.news-card {
  display: flex;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.news-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.news-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-8);
  color: inherit;
}

.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-muted);
  font-size: var(--fs-label-sm);
}

.news-card__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.news-card__title {
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.news-card__excerpt {
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: 1.75;
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-primary);
  font-size: var(--fs-label);
  font-weight: 500;
}

.news-card__more svg {
  transition: transform 0.18s ease;
}

.news-card:hover .news-card__more svg {
  transform: translateX(3px);
}

/* --- 列表页 --- */
.news-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.news-list-head__title {
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
}

.news-list-head__count {
  color: var(--color-muted);
  font-size: var(--fs-label);
}

.news-note {
  margin-top: var(--space-16);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-muted);
}

.news-note__title {
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
}

.news-note__text {
  margin-top: var(--space-3);
  max-width: 52em;
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-sm);
  line-height: 1.8;
}

.news-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* --- 文章正文 --- */
.article {
  padding-block: var(--space-10) var(--space-16);
}

.article-toc {
  margin-bottom: var(--space-10);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.article-toc__title {
  color: var(--color-on-surface);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.article-toc ol {
  margin-top: var(--space-3);
  padding-inline-start: 1.2em;
  color: var(--color-muted);
  font-size: var(--fs-body-sm);
  line-height: 1.95;
}

.article-toc a {
  color: var(--color-on-surface-variant);
  border-block-end: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.article-toc a:hover {
  color: var(--color-primary);
  border-block-end-color: var(--color-primary);
}

.article-body {
  color: var(--color-on-surface-variant);
  font-size: 17px;
  line-height: 1.85;
}

.article-body > * + * {
  margin-top: 1.1em;
}

.article-body h2 {
  margin-top: 2.2em;
  color: var(--color-on-surface);
  font-size: 26px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.article-body h3 {
  margin-top: 1.8em;
  color: var(--color-on-surface);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.article-body strong {
  color: var(--color-on-surface);
  font-weight: 600;
}

.article-body a {
  color: var(--color-primary);
  border-block-end: 1px solid var(--color-primary-soft-strong);
}

.article-body a:hover {
  border-block-end-color: var(--color-primary);
}

.article-body ul,
.article-body ol {
  margin-top: 1em;
  padding-inline-start: 1.4em;
}

.article-body ul {
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body li {
  margin-top: 0.55em;
  padding-inline-start: 0.2em;
}

.article-body li::marker {
  color: var(--color-border-strong);
}

.article-body blockquote {
  margin-top: 1.4em;
  padding: 16px 20px;
  border-inline-start: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--color-primary-soft);
  color: var(--color-on-surface);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.article-body blockquote p + p {
  margin-top: 0.6em;
}

.article-body code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-primary-active);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.article-body pre {
  margin-top: 1.2em;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background-color: var(--color-code-surface);
  color: var(--color-code-on-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.75;
  overflow-x: auto;
}

.article-body pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.article-body hr {
  margin-block: 2.4em;
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

.table-scroll {
  margin-top: 1.4em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.table-scroll table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  line-height: 1.65;
}

.table-scroll th,
.table-scroll td {
  padding: 11px 14px;
  border-block-end: 1px solid var(--color-border-soft);
  text-align: start;
  vertical-align: top;
}

.table-scroll th {
  background-color: var(--color-surface-muted);
  color: var(--color-on-surface);
  font-weight: 600;
  white-space: nowrap;
}

.table-scroll tr:last-child td {
  border-block-end: 0;
}

.article-body .checklist {
  display: grid;
  gap: 10px;
  margin-top: 1em;
  padding-inline-start: 0;
  list-style: none;
}

.article-body .checklist li {
  position: relative;
  margin: 0;
  padding-inline-start: 30px;
}

.article-body .checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.4em;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  background-color: var(--color-surface);
}

/* --- 文末行动区 --- */
.article-cta {
  margin-top: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--hero-gradient);
  color: var(--color-on-hero);
}

.article-cta__title {
  font-size: var(--fs-headline-sm);
  font-weight: 600;
  line-height: 1.4;
}

.article-cta__text {
  margin-top: var(--space-3);
  max-width: 42em;
  color: var(--color-on-hero-muted);
  font-size: var(--fs-body-sm);
  line-height: 1.8;
}

.article-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.btn--light {
  background-color: #fff;
  color: var(--color-primary);
}

.btn--light:hover {
  background-color: var(--color-primary-soft);
}

.btn--outline-light {
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
}

.btn--outline-light:hover {
  background-color: rgb(255 255 255 / 0.12);
}

/* --- 相关阅读 --- */
.article-related {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-block-start: 1px solid var(--color-border);
}

.article-related__title {
  margin-bottom: var(--space-6);
  color: var(--color-on-surface);
  font-size: var(--fs-headline-sm);
  font-weight: 600;
}

/* --- 响应式 --- */
@media (min-width: 768px) {
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .page-title {
    font-size: 32px;
  }

  .article-body {
    font-size: 16px;
  }

  .article-body h2 {
    font-size: 23px;
  }
}

@media (max-width: 639px) {
  .page-hero {
    padding-block: var(--space-8) var(--space-6);
  }

  .page-title {
    font-size: 27px;
  }

  .article-meta {
    gap: var(--space-1) var(--space-3);
  }

  .article-meta span + span::before {
    display: none;
  }

  .news-card__link {
    padding: var(--space-6);
  }

  .news-note,
  .article-cta {
    padding: var(--space-6);
  }

  .article-body h2 {
    font-size: 21px;
  }
}

/* 导航项增加到 7 项后，中等宽度下压缩间距，避免与按钮挤在一起 */
@media (min-width: 1024px) and (max-width: 1119px) {
  .site-nav__list {
    gap: 0;
  }

  .site-nav__link {
    padding-inline: 8px;
    font-size: 15px;
  }

  .site-nav__cta {
    margin-inline-start: var(--space-2);
    padding-inline: var(--space-3);
    font-size: 15px;
  }
}