/* ==========================================================================
   博爪云 设计系统 v1
   只包含 Token 与基础组件，不覆盖任何现有页面结构。
   引入顺序：放在 common.css 之后、页面级 CSS 之前。
   ========================================================================== */

:root {
  /* ---- 品牌橙（源自 Logo 实测 #F16408，采用需求确认的 #FF6A00 系列）---- */
  --bz-orange-500: #ff6a00;
  --bz-orange-400: #ff8533;
  --bz-orange-600: #f4511e;
  --bz-orange-50: #fff4ec;
  --bz-orange-100: #ffe8d6;

  /* ---- 中性色 ---- */
  --bz-black: #0b0d12;
  --bz-gray-900: #12151d;
  --bz-gray-850: #171b24;
  --bz-gray-800: #1c2029;
  --bz-gray-700: #2a303c;
  --bz-gray-600: #5a6474;
  --bz-gray-500: #7b8496;
  --bz-gray-400: #9aa3b2;
  --bz-gray-300: #c7cede;
  --bz-gray-200: #edeff3;
  --bz-gray-100: #f7f8fa;
  --bz-white: #ffffff;

  /* ---- 文本 ---- */
  --bz-text-primary: #1a1e26;
  --bz-text-secondary: #5a6474;
  --bz-text-tertiary: #9aa3b2;
  --bz-text-on-dark: rgba(255, 255, 255, 0.92);
  --bz-text-on-dark-2: rgba(255, 255, 255, 0.62);
  --bz-text-on-dark-3: rgba(255, 255, 255, 0.42);

  /* ---- 语义色 ---- */
  --bz-success: #12b76a;
  --bz-warning: #f79009;
  --bz-danger: #f04438;
  --bz-info: #2e90fa;

  /* ---- 边框 ---- */
  --bz-border: #edeff3;
  --bz-border-strong: #dfe3ea;
  --bz-border-on-dark: rgba(255, 255, 255, 0.1);
  --bz-border-on-dark-strong: rgba(255, 255, 255, 0.18);

  /* ---- 字体 ---- */
  --bz-font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bz-font-num: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- 字号 ---- */
  --bz-fs-display: 56px;
  --bz-fs-h1: 40px;
  --bz-fs-h2: 32px;
  --bz-fs-h3: 24px;
  --bz-fs-h4: 20px;
  --bz-fs-body: 16px;
  --bz-fs-sm: 14px;
  --bz-fs-xs: 12px;

  /* ---- 间距（8 进制）---- */
  --bz-sp-1: 4px;
  --bz-sp-2: 8px;
  --bz-sp-3: 12px;
  --bz-sp-4: 16px;
  --bz-sp-5: 24px;
  --bz-sp-6: 32px;
  --bz-sp-7: 48px;
  --bz-sp-8: 64px;
  --bz-sp-9: 96px;
  --bz-sp-10: 120px;

  /* ---- 圆角 ---- */
  --bz-radius-sm: 6px;
  --bz-radius-md: 10px;
  --bz-radius-lg: 16px;
  --bz-radius-xl: 24px;
  --bz-radius-pill: 999px;

  /* ---- 阴影 ---- */
  --bz-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --bz-shadow-2: 0 4px 16px rgba(16, 24, 40, 0.08);
  --bz-shadow-3: 0 12px 32px rgba(16, 24, 40, 0.12);
  --bz-shadow-dark: 0 16px 48px rgba(0, 0, 0, 0.4);
  --bz-glow-orange: 0 0 0 1px rgba(255, 106, 0, 0.32),
    0 8px 24px rgba(255, 106, 0, 0.12);

  /* ---- 容器 ---- */
  --bz-container: 1240px;
  --bz-container-wide: 1440px;

  /* ---- 动效 ---- */
  --bz-dur-fast: 160ms;
  --bz-dur-base: 240ms;
  --bz-dur-slow: 480ms;
  --bz-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --bz-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   排版基础
   ========================================================================== */

.bz-display,
.bz-h1,
.bz-h2,
.bz-h3,
.bz-h4 {
  font-family: var(--bz-font-sans);
  color: var(--bz-text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.bz-display {
  font-size: var(--bz-fs-display);
  line-height: 1.1;
  font-weight: 600;
}

.bz-h1 {
  font-size: var(--bz-fs-h1);
  line-height: 1.25;
  font-weight: 600;
}

.bz-h2 {
  font-size: var(--bz-fs-h2);
  line-height: 1.3;
  font-weight: 600;
}

.bz-h3 {
  font-size: var(--bz-fs-h3);
  line-height: 1.4;
  font-weight: 600;
}

.bz-h4 {
  font-size: var(--bz-fs-h4);
  line-height: 1.45;
  font-weight: 600;
}

.bz-text-secondary {
  color: var(--bz-text-secondary);
}

.bz-text-tertiary {
  color: var(--bz-text-tertiary);
}

/* 数字排版：价格、配置参数统一等宽对齐 */
.bz-num {
  font-family: var(--bz-font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   布局容器与区块
   ========================================================================== */

.bz-container {
  width: 100%;
  max-width: var(--bz-container);
  margin: 0 auto;
  padding: 0 var(--bz-sp-5);
  box-sizing: border-box;
}

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

/* 区块：通过背景层次区分，而不是靠分隔线堆砌 */
.bz-section {
  position: relative;
  padding: var(--bz-sp-9) 0;
}

.bz-section--light {
  background: var(--bz-white);
}

.bz-section--soft {
  background: var(--bz-gray-100);
}

.bz-section--dark {
  background: var(--bz-black);
  color: var(--bz-text-on-dark);
}

.bz-section--dark .bz-h1,
.bz-section--dark .bz-h2,
.bz-section--dark .bz-h3,
.bz-section--dark .bz-h4 {
  color: var(--bz-text-on-dark);
}

.bz-section--dark .bz-text-secondary {
  color: var(--bz-text-on-dark-2);
}

/* 区块头部：标题 + 描述，居左或居中 */
.bz-section-head {
  max-width: 720px;
  margin-bottom: var(--bz-sp-7);
}

.bz-section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.bz-section-head__desc {
  margin-top: var(--bz-sp-4);
  font-size: var(--bz-fs-body);
  line-height: 1.75;
  color: var(--bz-text-secondary);
}

.bz-section--dark .bz-section-head__desc {
  color: var(--bz-text-on-dark-2);
}

/* ==========================================================================
   按钮
   ========================================================================== */

.bz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bz-sp-2);
  min-height: 44px;
  padding: 0 var(--bz-sp-5);
  border: 1px solid transparent;
  border-radius: var(--bz-radius-sm);
  font-family: var(--bz-font-sans);
  font-size: var(--bz-fs-body);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--bz-dur-fast) var(--bz-ease-out),
    border-color var(--bz-dur-fast) var(--bz-ease-out),
    color var(--bz-dur-fast) var(--bz-ease-out),
    box-shadow var(--bz-dur-base) var(--bz-ease-out),
    transform var(--bz-dur-fast) var(--bz-ease-out);
}

.bz-btn:focus-visible {
  outline: 2px solid var(--bz-orange-500);
  outline-offset: 2px;
}

.bz-btn--primary {
  background: var(--bz-orange-500);
  color: #fff;
}

.bz-btn--primary:hover {
  background: var(--bz-orange-400);
  box-shadow: var(--bz-glow-orange);
}

.bz-btn--primary:active {
  background: var(--bz-orange-600);
  transform: translateY(1px);
}

.bz-btn--secondary {
  background: transparent;
  border-color: var(--bz-border-strong);
  color: var(--bz-text-primary);
}

.bz-btn--secondary:hover {
  border-color: var(--bz-orange-500);
  color: var(--bz-orange-500);
}

/* 深色底上的次要按钮 */
.bz-btn--ghost-light {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--bz-border-on-dark-strong);
  color: var(--bz-text-on-dark);
}

.bz-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}

.bz-btn--text {
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--bz-orange-500);
  border: 0;
}

.bz-btn--text:hover {
  color: var(--bz-orange-600);
}

.bz-btn--lg {
  min-height: 52px;
  padding: 0 var(--bz-sp-6);
  font-size: 17px;
}

.bz-btn--sm {
  min-height: 36px;
  padding: 0 var(--bz-sp-4);
  font-size: var(--bz-fs-sm);
}

.bz-btn--block {
  width: 100%;
}

.bz-btn[disabled],
.bz-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   卡片
   ========================================================================== */

.bz-card {
  position: relative;
  background: var(--bz-white);
  border: 1px solid var(--bz-border);
  border-radius: var(--bz-radius-md);
  box-sizing: border-box;
  transition: border-color var(--bz-dur-base) var(--bz-ease-out),
    box-shadow var(--bz-dur-base) var(--bz-ease-out),
    transform var(--bz-dur-base) var(--bz-ease-out);
}

/* hover：轻上浮 + 橙色描边光晕，位移控制在 2px 内避免跳动 */
.bz-card--interactive {
  cursor: pointer;
}

.bz-card--interactive:hover {
  border-color: rgba(255, 106, 0, 0.4);
  box-shadow: var(--bz-glow-orange);
  transform: translateY(-2px);
}

.bz-card--dark {
  background: var(--bz-gray-850);
  border-color: var(--bz-border-on-dark);
}

.bz-card__body {
  padding: var(--bz-sp-5);
}

/* ==========================================================================
   价格
   ========================================================================== */

.bz-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--bz-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--bz-orange-500);
  font-weight: 600;
}

.bz-price__symbol {
  font-size: 0.6em;
  font-weight: 500;
}

.bz-price__value {
  font-size: 1em;
  letter-spacing: -0.02em;
}

.bz-price__unit {
  font-size: 0.42em;
  font-weight: 400;
  color: var(--bz-text-tertiary);
  margin-left: 2px;
}

/* ==========================================================================
   徽标
   ========================================================================== */

.bz-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--bz-sp-2);
  border-radius: var(--bz-radius-sm);
  font-size: var(--bz-fs-xs);
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

.bz-badge--brand {
  background: var(--bz-orange-50);
  color: var(--bz-orange-600);
}

.bz-badge--neutral {
  background: var(--bz-gray-100);
  color: var(--bz-text-secondary);
}

.bz-badge--dark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--bz-text-on-dark-2);
}

/* ==========================================================================
   滚动渐入（由 theme.js 添加 is-visible）
   ========================================================================== */

.bz-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--bz-dur-slow) var(--bz-ease-emphasis),
    transform var(--bz-dur-slow) var(--bz-ease-emphasis);
  will-change: opacity, transform;
}

.bz-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media screen and (max-width: 1024px) {
  :root {
    --bz-fs-display: 44px;
    --bz-fs-h1: 34px;
    --bz-fs-h2: 28px;
  }

  .bz-section {
    padding: var(--bz-sp-8) 0;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --bz-fs-display: 32px;
    --bz-fs-h1: 28px;
    --bz-fs-h2: 22px;
    --bz-fs-h3: 18px;
    --bz-fs-body: 15px;
  }

  .bz-container {
    padding: 0 var(--bz-sp-4);
  }

  .bz-section {
    padding: var(--bz-sp-7) 0;
  }

  .bz-section-head {
    margin-bottom: var(--bz-sp-5);
  }

  .bz-btn {
    min-height: 44px;
  }

  /* 移动端关闭 hover 上浮，避免触屏点击后残留状态 */
  .bz-card--interactive:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--bz-border);
  }
}

/* ==========================================================================
   动效降级
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bz-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bz-btn,
  .bz-card {
    transition: none;
  }

  .bz-card--interactive:hover {
    transform: none;
  }
}