/* ====================================
   馒头学育 - Woebot-Inspired Design System
   ==================================== */

/* === 字体引入 === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* === CSS变量定义 (Woebot-Inspired Enhanced System) === */
:root {
  /* ============================================
     配色系统 - 温暖专业的多色调组合
     ============================================ */

  /* 主色 - 温暖的黄橙色 */
  --primary: #FDB44B;
  --primary-50: #FFF8F0;
  /* 更温暖的浅色背景 */
  --primary-100: #FFEFD8;
  --primary-200: #FFDDB0;
  --primary-300: #FFD89A;
  --primary-400: #FDC66F;
  --primary-500: #FDB44B;
  /* 主色 */
  --primary-600: #F89D28;
  --primary-700: #E8880D;
  --primary-800: #C17007;
  --primary-900: #8B5006;

  /* 辅助色 - 柔和的蓝紫色（传递信任和平静） */
  --secondary-blue: #6B7FFF;
  --secondary-blue-light: #9BAAFF;
  --secondary-purple: #9B7FFF;
  --secondary-purple-light: #BFA8FF;

  /* 新增：冷色调辅助背景 */
  --cool-blue-50: #F0F9FF;
  --cool-blue-100: #E0F2FE;

  /* 强调色 - 更温暖的橙色 */
  --accent: #FF8C42;
  --accent-hover: #FF7629;
  --accent-light: #FFB380;

  /* 成功/警告/错误色 */
  --success: #48BB78;
  --warning: #F6AD55;
  --error: #F56565;
  --info: #4299E1;

  /* ============================================
     文字颜色系统
     ============================================ */
  --text-primary: #1A202C;
  /* 主标题 - 更深 */
  --text-secondary: #2D3748;
  /* 副标题 */
  --text-body: #4A5568;
  /* 正文 */
  --text-muted: #718096;
  /* 次要文字 */
  --text-placeholder: #A0AEC0;
  /* 占位符 */
  --text-disabled: #CBD5E0;
  /* 禁用状态 */
  --text-light: #A0AEC0;
  --text-lighter: #CBD5E0;
  --text-dark: #1A202C;

  /* ============================================
     背景颜色系统
     ============================================ */
  --bg-white: #FFFFFF;
  --bg-primary: #FAFBFC;
  /* 主背景 - 更柔和 */
  --bg-secondary: #F7FAFC;
  /* 次要背景 */
  --bg-elevated: #FFFFFF;
  /* 卡片背景 */
  --bg-light: #F7FAFC;
  --bg-gray: #EDF2F7;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* ============================================
     响应式字体系统 (Woebot-inspired large typography)
     ============================================ */
  /* 使用 clamp() 实现流式字体 */
  --font-xs: 14px;
  --font-sm: 16px;
  --font-base: 18px;
  /* 基准字号提升 */
  --font-lg: 20px;
  --font-xl: 24px;
  --font-2xl: clamp(28px, 3.5vw, 36px);
  --font-3xl: clamp(36px, 4.5vw, 48px);
  --font-4xl: clamp(40px, 5.5vw, 56px);
  --font-5xl: clamp(48px, 7vw, 72px);
  --font-6xl: clamp(56px, 8vw, 88px);
  /* 新增超大字号 */


  /* ============================================
     字体字重系统
     ============================================ */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* ============================================
     行高系统 - 更舒适的阅读体验
     ============================================ */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  /* 提升 */
  --leading-loose: 2.0;

  /* ============================================
     间距系统 - Woebot-inspired generous spacing
     ============================================ */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  /* 增大 */
  --spacing-5xl: 128px;
  /* 增大 */
  --spacing-6xl: 160px;
  /* 增大 */
  --spacing-7xl: 192px;
  /* 新增 */

  /* ============================================
     圆角系统 - 更圆润友好
     ============================================ */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-3xl: 64px;
  --radius-full: 9999px;

  /* ============================================
     阴影系统 - 更柔和自然的阴影
     ============================================ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(253, 180, 75, 0.08);
  --shadow-md: 0 4px 16px rgba(253, 180, 75, 0.12);
  --shadow-lg: 0 8px 32px rgba(253, 180, 75, 0.16);
  --shadow-xl: 0 12px 48px rgba(253, 180, 75, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(253, 180, 75, 0.25);

  /* 彩色阴影 - 品牌色光晕效果 */
  --shadow-primary: 0 10px 30px -5px rgba(253, 180, 75, 0.3);
  --shadow-blue: 0 10px 30px -5px rgba(107, 127, 255, 0.3);

  /* ============================================
     过渡和动画
     ============================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
     容器最大宽度
     ============================================ */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  /* 缩小，更聚焦 */
  --container-2xl: 1400px;

  /* ============================================
     Z-index 层级
     ============================================ */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* === 重置和基础样式 === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--font-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === 排版系统 === */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-lg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-wrap: balance;
  /* 标题平衡换行 */
}

/* ... (h1-h6 styles remain same) ... */

p {
  margin-bottom: var(--spacing-lg);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
  /* 正文优化换行，防止孤儿字 */
}

strong {
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

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

a:hover {
  color: var(--accent);
}

/* === 容器 === */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

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

/* === 导航栏 - 现代简洁风格 === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: var(--z-fixed);
  transition: all var(--transition-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.95);
}

.navbar-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  text-decoration: none;
}

.navbar-logo-icon {
  font-size: var(--font-3xl);
}

.navbar-menu {
  display: flex;
  gap: var(--spacing-xl);
  list-style: none;
}

.navbar-link {
  color: var(--text-body);
  font-weight: var(--font-medium);
  font-size: var(--font-base);
  padding: var(--spacing-sm) 0;
  position: relative;
  transition: color var(--transition-base);
}

.navbar-link:hover,
.navbar-link.active {
  color: var(--primary);
}

.navbar-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  border-radius: var(--radius-full);
}

/* === 按钮系统 - 现代渐变风格 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-2xl);
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  color: white;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl), var(--shadow-primary);
  filter: brightness(1.05);
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-large {
  padding: var(--spacing-lg) var(--spacing-3xl);
  font-size: var(--font-xl);
  border-radius: var(--radius-xl);
}

/* === Hero区域 - 优化渐变背景 === */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-50) 0%, white 60%, var(--secondary-blue-light) 100%);
  padding: var(--spacing-6xl) var(--spacing-xl);
  text-align: center;
  margin-top: 80px;
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  font-size: var(--font-5xl);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
  line-height: var(--leading-tight);
}

.hero-subtitle {
  font-size: var(--font-2xl);
  color: var(--text-body);
  margin-bottom: var(--spacing-lg);
  font-weight: var(--font-medium);
}

.hero-description {
  font-size: var(--font-lg);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--spacing-2xl);
}

/* === Section容器 === */
.section {
  padding: var(--spacing-5xl) 0;
}

.section-alt {
  background: var(--bg-light);
}

.section-title {
  text-align: center;
  font-size: var(--font-4xl);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-xl);
}

.section-subtitle {
  text-align: center;
  font-size: var(--font-lg);
  color: var(--text-light);
  max-width: 700px;
  margin: 0 auto var(--spacing-3xl);
  line-height: var(--leading-relaxed);
}

/* === 卡片系统 === */
.card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-title {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.card-text {
  font-size: var(--font-base);
  color: var(--text-body);
  line-height: var(--leading-relaxed);
}

/* === 网格布局 === */
.grid {
  display: grid;
  gap: var(--spacing-2xl);
}

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

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

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

/* === 专家卡片 - BetterHelp风格 === */
.expert-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.expert-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.expert-avatar {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: top;
  display: block;
  margin: 0 auto var(--spacing-lg);
  border: 4px solid var(--primary-lighter);
}

.expert-name {
  font-size: var(--font-2xl);
  font-weight: var(--font-bold);
  color: var(--text-dark);
  margin-bottom: var(--spacing-xs);
}

.expert-level {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-lg);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--text-dark);
  border-radius: var(--radius-full);
  font-size: var(--font-sm);
  font-weight: var(--font-bold);
  margin-bottom: var(--spacing-md);
}

.expert-specialty {
  color: var(--accent);
  font-weight: var(--font-semibold);
  font-size: var(--font-base);
  margin-bottom: var(--spacing-md);
}

.expert-description {
  color: var(--text-body);
  font-size: var(--font-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--spacing-lg);
}

.expert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.expert-tag {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--bg-light);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  color: var(--text-light);
  font-weight: var(--font-medium);
}

.expert-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--bg-gray);
}

.expert-price {
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--accent);
}

.expert-experience {
  font-size: var(--font-sm);
  color: var(--text-light);
}

/* === 现代团队展示风格 (BetterHelp Inspired) === */
.modern-team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 强制5列，一行显示 */
  gap: var(--spacing-lg);
  /* 减小间距以适应一行 */
  margin-top: var(--spacing-2xl);
}

@media (max-width: 1024px) {
  .modern-team-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 平板端3列 */
    gap: var(--spacing-xl);
  }
}

@media (max-width: 640px) {
  .modern-team-grid {
    grid-template-columns: repeat(1, 1fr);
    /* 手机端单列 */
  }
}

.modern-expert-card {
  text-align: left;
  transition: transform var(--transition-base);
}

.modern-expert-card:hover {
  transform: translateY(-4px);
}

.modern-expert-img-wrapper {
  position: relative;
  margin-bottom: var(--spacing-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  /* 竖向长方形比例，更具现代感 */
  box-shadow: var(--shadow-md);
}

.modern-expert-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--transition-slow);
}

.modern-expert-card:hover .modern-expert-img {
  transform: scale(1.03);
}

.modern-expert-info {
  padding-top: var(--spacing-sm);
}

.modern-expert-name {
  font-size: var(--font-lg);
  /* 稍微调小字号以适应一行 */
  font-weight: var(--font-bold);
  color: var(--text-dark);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* 防止名字换行 */
}

.modern-expert-title {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
  display: block;
  min-height: 1.5em;
  /* 确保高度一致 */
}

.modern-expert-desc {
  font-size: var(--font-sm);
  color: var(--text-body);
  line-height: 1.5;
  opacity: 0.9;
  text-wrap: balance;
  /* 防止孤儿字 */
}

.footer {
  background: var(--text-dark);
  color: var(--bg-light);
  padding: var(--spacing-5xl) 0 var(--spacing-2xl);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}

.footer-section h3 {
  color: var(--bg-white);
  font-size: var(--font-lg);
  margin-bottom: var(--spacing-lg);
}

.footer-links {
  list-style: none;
}

.footer-link {
  color: var(--text-lighter);
  display: block;
  padding: var(--spacing-sm) 0;
  transition: color var(--transition-base);
}

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

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-2xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-lighter);
  font-size: var(--font-sm);
}

/* === 工具类 === */
.text-center {
  text-align: center;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.mt-0 {
  margin-top: 0;
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

/* === 响应式设计 === */
@media (max-width: 1024px) {
  :root {
    --font-5xl: 48px;
    --font-4xl: 40px;
    --font-3xl: 32px;
  }

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

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --font-5xl: 36px;
    --font-4xl: 32px;
    --font-3xl: 28px;
    --font-2xl: 24px;
  }

  .navbar-menu {
    gap: var(--spacing-md);
  }

  .navbar-link {
    font-size: var(--font-sm);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 70vh;
    padding: var(--spacing-4xl) var(--spacing-md);
  }

  .btn-large {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-lg);
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-md);
  }

  .navbar-container {
    padding: var(--spacing-md);
  }

  .section {
    padding: var(--spacing-3xl) 0;
  }
}