:root {
  --ui-color-white: #ffffff;
  --ui-color-page-bg: #f9fbff;
  --ui-color-bg-soft: #eaf6fd;
  /* 首页移动端背景补充色 */
  --ui-color-home-product-mobile-end: #dbefff;
  --ui-color-home-showcase-mobile-start: #f6fcff;
  --ui-color-home-showcase-mobile-end: #edf6ff;
  --ui-color-text-strong: #122033;
  --ui-color-text-body: #425066;
  --ui-color-text-secondary: #666666;
  --ui-color-text-default: #333333;
  --ui-color-text-muted: #6d7890;
  --ui-color-text-placeholder: #7a8794;
  --ui-color-text-base: #111111;
  --ui-color-brand-blue: #0078D4;
  --ui-color-brand-blue-strong: #005fa3;
  --ui-color-brand-blue-soft: #7ec7df;
  --ui-color-brand-orange: #f7931f;
  --ui-color-brand-orange-strong: #f08306;
  --ui-color-brand-orange-surface: #fff7ee;
  --ui-color-brand-orange-surface-hover: #ffe9d1;
  --ui-surface-card: rgba(255, 255, 255, 0.9);
  --ui-surface-card-soft: rgba(255, 255, 255, 0.78);
  --ui-surface-card-overlay: rgba(255, 255, 255, 0.82);
  --ui-surface-overlay: rgba(255, 255, 255, 0.92);
  --ui-border-card: rgba(255, 255, 255, 0.38);
  --ui-border-brand-subtle: rgba(0, 120, 212, 0.18);
  --ui-border-brand-focus: rgba(0, 120, 212, 0.38);
  --ui-border-neutral: rgba(17, 17, 17, 0.18);
  --ui-border-neutral-soft: rgba(17, 17, 17, 0.14);
  --ui-border-inverse-soft: rgba(255, 255, 255, 0.14);
  --ui-outline-inverse: rgba(255, 255, 255, 0.36);
  --ui-radius-xs: 12px;
  --ui-radius-sm: 18px;
  --ui-radius-md: 26px;
  --ui-radius-lg: 34px;
  --ui-radius-xl: 42px;
  --ui-radius-pill: 999px;
  --ui-shadow-soft: 0 0 8px rgba(9, 20, 38, 0.3);
  --ui-shadow-medium: 0 0 10px rgba(9, 20, 38, 0.4);
  --ui-shadow-strong: 0 0 15px rgba(9, 20, 38, 0.5);
  --ui-shadow-elevated: 0 24px 80px rgba(17, 44, 72, 0.12);
  --ui-shadow-overlay: 0 24px 60px rgba(17, 17, 17, 0.24);
  --ui-shadow-floating: 0 10px 22px rgba(0, 0, 0, 0.18);
  --ui-shadow-subtle: 0 0 3px rgba(0, 0, 0, 0.2);
  --ui-shadow-device: 0 18px 60px rgba(0, 0, 0, 0.18);
  --ui-shadow-panel: 0 5px 10px rgba(17, 17, 17, 0.14), 0 3px 8px rgba(143, 203, 225, 0.22);
  --ui-shadow-field: 0 1px 3px rgba(0, 72, 128, 0.1);
  --ui-shadow-field-focus: 0 3px 15px rgba(0, 120, 212, 0.14);
  --ui-shadow-brand-focus: 0 0 0 3px rgba(143, 203, 225, 0.26);
  --ui-shadow-accent-focus: 0 0 0 3px rgba(247, 147, 31, 0.26), 0 0 0 6px rgba(247, 147, 31, 0.12);
  --ui-blur-card: 10px;
  --ui-blur-card-elevated: 14px;
  --ui-blur-overlay: 12px;
  --font-title-hero: clamp(36px, 2.4vw, 56px);
  --font-title-xl: clamp(30px, 2.0vw, 46px);
  --font-title-lg: clamp(26px, 1.75vw, 38px);
  --font-title-md: clamp(22px, 1.4vw, 32px);
  --font-title-sm: clamp(18px, 1.1vw, 24px);
  --font-body-lg: clamp(17px, 1.1vw, 24px);
  --font-body-md: clamp(15px, 0.88vw, 20px);
  --font-body-sm: clamp(13px, 0.78vw, 17px);
  --font-button-primary: clamp(20px, 1.45vw, 30px);
  --content-width: 80%;
  --section-gap: clamp(20px, 2.2vh, 28px);
  --section-gap-lg: clamp(28px, 3.2vh, 44px);
  --ui-card-bg: var(--ui-surface-card);
  --ui-card-bg-soft: var(--ui-surface-card-soft);
  --ui-card-border: var(--ui-border-card);
  --ui-text-strong: var(--ui-color-text-strong);
  --ui-text-body: var(--ui-color-text-body);
  --ui-text-secondary: var(--ui-color-text-secondary);
  --ui-text-muted: var(--ui-color-text-muted);
  --ui-button-height: 36px;
  --ui-button-pad-x: 24px;
  --ui-button-primary-height: clamp(52px, 4vw, 64px);
  --ui-button-primary-pad-x: clamp(16px, 2vw, 28px);
  --ui-button-primary-font-size: var(--font-button-primary);
  --ui-grid-gap: clamp(14px, 1.6vw, 24px);
  --ui-media-radius: 22px;
  --ui-title-line-gap: 2px;
  --ui-title-line-thickness: 3px;
  --ui-title-line-fixed-width: clamp(48px, 7.2vw, 66px);
  --ui-title-line-color: var(--ui-color-brand-orange);
}

/* 基础 UI 层，优先复用这些原子和卡片壳 */
.ui-shell {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}

.page-content > .ui-shell {
  min-height: 0;
  max-height: 100%;
}

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.ui-stack--compact {
  gap: clamp(8px, 1vh, 12px);
}

.ui-title {
  margin: 0;
  color: var(--ui-text-strong);
  font-size: var(--font-title-hero);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.ui-title--md {
  font-size: var(--font-title-xl);
}

.ui-title--line {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-title-line-gap);
}

.ui-title--line::after {
  content: "";
  display: block;
  height: var(--ui-title-line-thickness);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-title-line-color);
}

.ui-title--line-fixed::after {
  width: var(--ui-title-line-fixed-width);
}

.ui-title--line-content {
  width: fit-content;
}

.ui-title--line-content::after {
  width: 105%;
}

.ui-title--sm {
  font-size: var(--font-title-sm);
  line-height: 1.2;
}

.ui-text {
  margin: 0;
  color: var(--ui-text-body);
  font-size: var(--font-body-md);
  line-height: 1.4;
}

.ui-grid {
  display: grid;
  gap: var(--ui-grid-gap);
}

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

.ui-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-card-bg);
  box-shadow: var(--ui-shadow-soft);
  backdrop-filter: blur(var(--ui-blur-card));
}

.ui-card--soft {
  background: var(--ui-card-bg-soft);
}

.ui-card--feature {
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-strong);
}

.ui-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ui-media-radius);
}

.ui-media img,
.ui-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-button-height);
  padding: 0 var(--ui-button-pad-x);
  border: 1px solid;
  border-radius: var(--ui-radius-pill);
  font-size: var(--font-body-md);
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ui-button:hover,
.ui-button:focus {
  text-decoration: none;
}

.ui-button--primary {
  min-height: var(--ui-button-primary-height);
  padding: 0 var(--ui-button-primary-pad-x);
  border: 2px solid var(--ui-color-white);
  background: var(--ui-color-brand-orange);
  color: var(--ui-color-white);
  font-size: var(--ui-button-primary-font-size);
}

.ui-button--primary:hover,
.ui-button--primary:focus {
  border-color: var(--ui-color-brand-orange-surface);
  background: var(--ui-color-brand-orange-strong);
  color: var(--ui-color-white);
}

.ui-button--primary:focus,
.ui-button--primary:focus-visible,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:focus-visible {
  box-shadow: none;
}

.ui-button--primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: var(--ui-shadow-accent-focus);
}

.ui-button--secondary {
  border-color: var(--ui-color-brand-orange);
  background: var(--ui-color-brand-orange-surface);
  color: var(--ui-color-brand-orange);
}

.ui-button--secondary:hover,
.ui-button--secondary:focus {
  border-color: var(--ui-color-brand-orange);
  background: var(--ui-color-brand-orange-surface-hover);
  color: var(--ui-color-brand-orange);
}

.section-heading {
  margin-bottom: clamp(4px, 0.6vh, 8px);
  text-align: left;
}

.section-heading--center {
  align-items: center;
  text-align: center;
}

.ui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
}

@media (max-width: 1199.98px) {
  /* 移动端统一收口全站字号，避免局部继续沿用桌面级字号 */
  :root {
    /* 大标题额外多缩一档，拉开和正文的移动端层级 */
    --font-title-hero: clamp(24px, 7.2vw, 34px);
    --font-title-xl: clamp(21px, 6vw, 28px);
    --font-title-lg: clamp(19px, 5.2vw, 24px);
    --font-title-md: clamp(17px, 4.5vw, 21px);
    --font-title-sm: clamp(15px, 4vw, 18px);
    --font-body-lg: clamp(15px, 4vw, 18px);
    --font-body-md: clamp(13px, 3.6vw, 15px);
    --font-body-sm: clamp(12px, 3.4vw, 14px);
    --font-button-primary: clamp(15px, 4.4vw, 19px);
  }
}