/* ============================================================
 * bzh365 全站视觉规范 v1.0 (2026-08-14 UI 设计师定)
 * Worker H — 统一全站 section 宽度 / 间距 / 圆角 / 动效
 * ============================================================ */

:root {
  /* -------- 颜色 -------- */
  --c-primary: #5b6ef5;
  --c-primary-2: #8b5cf6;
  --c-primary-3: #ec4899;
  --c-accent: #fbbf24;
  --c-bg: #fff;
  --c-bg-alt: #f5f7fc;          /* 交替 section 背景 */
  --c-text: #1a1d2b;
  --c-text-soft: #6b7280;
  --c-border: #e5e7eb;

  /* -------- 渐变 -------- */
  --grad-primary: linear-gradient(135deg, #5b6ef5 0%, #8b5cf6 100%);
  --grad-peak: linear-gradient(135deg, #5b6ef5 0%, #8b5cf6 50%, #ec4899 100%);

  /* -------- 圆角 -------- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* -------- 间距 -------- */
  --sp-section: 80px;             /* 段之间垂直间距 */
  --sp-section-mobile: 48px;
  --sp-card: 24px;                /* 卡内 padding */
  --sp-element: 16px;             /* 元素间距 */
  --sp-gap-grid: 24px;            /* 网格 gap */

  /* -------- 容器 -------- */
  --w-container: 1200px;          /* 内容最大宽度 */
  --w-content-pad: 24px;          /* 内容左右 padding */

  /* -------- 阴影 -------- */
  --sh-sm: 0 2px 8px rgba(31, 37, 51, .06);
  --sh-md: 0 12px 30px rgba(91, 110, 245, .12);
  --sh-lg: 0 24px 60px rgba(91, 110, 245, .25);

  /* -------- 动效 -------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .2s;
  --dur-mid: .3s;
}

/* ============================================================
 * 全站 4 种 section 宽度规则
 *
 *   .section-hero    真正通屏 (顶部蓝紫到底, 内部文字 1200px)
 *   .section-alt     真正通屏浅灰底
 *   .section         内容宽度, 透明
 *   .section-cta     内容宽度内圆角 (蓝紫渐变块)
 *
 * 严禁: margin:0 -24px 假通屏 / border-radius:24px hero 卡死颜色
 * ============================================================ */

/* 1. Hero — 真正通屏, 顶部蓝紫到底, 内部文字 1200px */
.section-hero {
  background: var(--grad-primary);
  margin: 0;
  max-width: none;
  padding: 80px var(--w-content-pad) 96px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section-hero-inner {
  max-width: var(--w-container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 2. Alt section — 真正通屏浅灰底 */
.section-alt {
  background: var(--c-bg-alt);
  margin: 0;
  max-width: none;
  padding: var(--sp-section) var(--w-content-pad);
}
.section-alt-inner {
  max-width: var(--w-container);
  margin: 0 auto;
}

/* 3. 普通段 — 内容宽度, 透明 */
.section {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: var(--sp-section) var(--w-content-pad);
}

/* 4. CTA — 内容宽度内圆角 (蓝紫渐变块) */
.section-cta {
  max-width: calc(var(--w-container) - 2 * var(--w-content-pad));
  margin: 0 auto var(--sp-section);
  padding: 64px 48px;
  background: var(--grad-primary);
  border-radius: var(--r-xl);
  text-align: center;
  color: #fff;
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
}

/* -------- 移动端 (375 / 600 / 768 三档) -------- */
@media (max-width: 768px) {
  .section-hero,
  .section-alt {
    padding: var(--sp-section-mobile) 20px;
  }
  .section-cta {
    padding: 48px 20px;
    border-radius: var(--r-lg);
  }
  .section {
    padding: var(--sp-section-mobile) 20px;
  }
}