/* ===========================================
   base.css — 重置 + 全局变量 + 基础样式
   =========================================== */

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- 颜色变量 ---------- */
:root {
  /* 品牌色 */
  --c-primary: #2D5BFF;        /* 主蓝（按钮/链接/标题强调） */
  --c-primary-dark: #1E40AF;   /* 深蓝（banner/footer） */
  --c-primary-darker: #0F2C8C; /* 更深蓝（footer 渐变） */
  --c-primary-light: #F0F4FF;  /* 浅蓝（卡片背景/版块间隔） */
  --c-primary-lighter: #E8EEFF;

  /* 文字色 */
  --c-text: #333333;
  --c-text-secondary: #666666;
  --c-text-tertiary: #999999;
  --c-text-white: #ffffff;
  --c-text-blue: #2D5BFF;
  --c-text-blue-dark: #1E40AF;

  /* 背景色 */
  --c-bg: #ffffff;
  --c-bg-light: #F8F9FB;
  --c-bg-gray: #F5F7FA;
  --c-bg-dark: #1E40AF;

  /* 边框色 */
  --c-border: #E5E8EF;
  --c-border-light: #F0F2F5;

  /* 教学服务多色 */
  --c-blue-light: #E8F0FF;
  --c-blue: #2D5BFF;
  --c-green-light: #E6F7F0;
  --c-green: #00B86B;
  --c-orange-light: #FFF4E6;
  --c-orange: #FF8A1F;
  --c-purple-light: #F0E6FF;
  --c-purple: #8B5CF6;
  --c-pink-light: #FFE6F0;
  --c-pink: #FF4D8D;

  /* ---------- 字体 ---------- */
  --font-base: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --fs-4xl: 48px;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ---------- 圆角 ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* ---------- 阴影 ---------- */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --sh-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --sh-blue: 0 8px 24px rgba(45, 91, 255, 0.2);
  --sh-blue-sm: 0 4px 12px rgba(45, 91, 255, 0.15);

  /* ---------- 容器 ---------- */
  --container-max: 1200px;
  --container-pad: 24px;

  /* ---------- 过渡 ---------- */
  --tr-fast: 0.15s ease;
  --tr-base: 0.25s ease;
  --tr-slow: 0.4s ease;

  /* ---------- Header ---------- */
  --header-h: 72px;
}

/* ---------- 全局工具类 ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  width: 100%;
}

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

.section-title {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.section-title h2 {
  font-size: var(--fs-3xl);
  color: var(--c-text);
  margin-bottom: var(--sp-3);
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--c-primary);
  margin: var(--sp-3) auto 0;
  border-radius: var(--r-full);
}

/* ---------- 文本色工具类 ---------- */

/* ---------- 文本色工具类 ---------- */
.t-primary { color: var(--c-primary); }
.t-secondary { color: var(--c-text-secondary); }
.t-tertiary { color: var(--c-text-tertiary); }
.t-blue { color: var(--c-primary); }
.t-blue-dark { color: var(--c-primary-dark); }
.t-white { color: var(--c-text-white); }

.t-center { text-align: center; }
.t-bold { font-weight: 700; }
.t-semibold { font-weight: 600; }
.t-medium { font-weight: 500; }

/* ---------- 背景色工具类 ---------- */
.bg-light { background-color: var(--c-bg-light); }
.bg-gray { background-color: var(--c-bg-gray); }
.bg-blue { background-color: var(--c-primary); }
.bg-blue-dark { background-color: var(--c-primary-dark); }
.bg-blue-light { background-color: var(--c-primary-light); }

/* ---------- 隐藏/显示 ---------- */
.hide-mobile { display: initial; }
.hide-desktop { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }
  .hide-desktop { display: initial; }
}

/* ---------- 滚动进入视口动画 ---------- */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ---------- 减少动画偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}