/* =========================
   国际优师汇 • 站点样式（精简版）
   颜色与阴影变量
========================= */
:root{
  --main-gradient: linear-gradient(90deg,#8E2DE2,#4A00E0);
  --main-purple: #8E2DE2;
  --main-purple-light: #C488F7;
  --main-orange: #FFB347;
  --border-radius: 18px;
  --divider-gradient: linear-gradient(to right,#8E2DE2 0%,#FFB347 100%);
  --shadow: 0 4px 16px rgba(142,45,226,.10);
}

/* 基础与通用 */
*{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
[hidden]{ display:none !important; }
body{
  margin:0; overflow-x:hidden; color:#2d1b47; background:#faf8fc;
  font-family: 'Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif;
  letter-spacing:.01em;
}

/* ========== 顶部导航 ========== */
.topbar{
  width:100%;
  max-width:none !important; /* ✅ 取消限制，背景全宽 */
  margin:0 auto;
  height:64px;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:2010;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background:#4B0082;
  box-shadow:0 1px 10px #8e2de210;
}
.logo-link{display:flex; align-items:center; height:40px; text-decoration:none; margin-right:14px;}
.main-logo{height:48px; max-height:48px; max-width:120px; transition:transform .18s;}
.logo-link:hover .main-logo{transform:scale(1.08) rotate(-2deg);}

.main-title {
  font: 700 2.8rem 'Playfair Display', serif;
  color: #FFD700; /* 金色文字 */
  background-color: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(75, 0, 130, 0.25);
  letter-spacing: 0.01em;
  white-space: nowrap;
  word-break: keep-all;
  margin-left: 6px;   /* 调整 Logo 与标题之间的间距 */
  margin-right: 18px; /* 给右侧按钮一点空间 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.main-title:hover {
  transform: scale(1.02);
  box-shadow: 0 3px 12px rgba(75, 0, 130, 0.3);
}

.subtitle{
  margin-top: -12px; /* 去掉原本的间距，让两行更靠近 */
  font: 500 .9rem 'Playfair Display', serif;
  letter-spacing: .05em;
  line-height: 1;
  color: #FFE680; /* 柔和淡金色 */
  opacity: 0.95; /* 轻微透明，显得柔和 */
}

/* ========== 汉堡按钮 ========== */
.hamburger{
  margin-left:4px !important; /* ✅ 缩小与标题距离 */
  margin-right:6px !important;
  width:36px;
  height:36px;
  border-radius:12px;
  cursor:pointer;
  background:#fff;
  box-shadow:0 2px 12px #8e2de215;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hamburger span{
  height:4px;
  width:28px;
  margin:4px auto;
  border-radius:2.5px;
  background:linear-gradient(90deg,#FFD700,#FFB347); /* 金色渐变 */
}
.hamburger:focus{outline:2px solid #a25deb}

/* =======================================================
   🍎 侧边栏 · Apple 半透明白风格
======================================================= */
.sidebar {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 83vw;
  max-width: 340px;
  height: 100%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  box-shadow: -2px 0 26px rgba(0,0,0,0.05);
  z-index: 2100;
  transition: right 0.3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(214,178,94,0.2);
}
.sidebar.open { right: 0; }

.sidebar-header {
  padding: 24px 20px 12px;
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: #1C1C1E;
  border-bottom: 1px solid rgba(214,178,94,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-sidebar {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #6E6E73;
  cursor: pointer;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 20px 0;
}
.sidebar li {
  margin: 6px 0;
}
.sidebar a {
  display: block;
  padding: 12px 28px;
  color: #1C1C1E;
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.sidebar a:hover {
  background: rgba(214,178,94,0.12);
  border-left: 3px solid #D6B25E;
}

/* 蒙版 */
.sidebar-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 2090;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.sidebar.open ~ .sidebar-mask {
  opacity: 1;
  pointer-events: auto;
}

/* ========== 多语言切换按钮（EN/中文） ========== */
.lang-btn {
  margin-left:6px !important; /* ✅ 缩短与标题的空隙 */
  margin-right:4px !important;
  padding:6px 12px;
  font-size:0.85rem;
  font-weight:600;
  border-radius:8px;
  background:linear-gradient(90deg,#FFD700,#FFB347);
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:background .2s ease, transform .15s ease;
}
.lang-btn:hover {
  background:linear-gradient(90deg,#FFB347,#FFD700);
  transform:translateY(-2px);
}
.lang-btn:active { transform:translateY(1px); }

/* 确保左侧标题区域对齐 */
.left-box{ display:flex; align-items:center; }



/* ========== 分割线 & 大标题 ========== */
.divider{
  margin:38px auto 30px; width:82%; height:1px; display:flex; align-items:center; justify-content:center; text-align:center;
}
.divider span{position:relative; z-index:2; background:#transparent; padding:0 18px; font-size:1.5rem; color:#a25deb; font-weight:500;}
.divider:before,.divider:after{content:''; flex:1; height:1px; background:var(--divider-gradient); opacity:.5;}
.divider:before{margin-right:16px} .divider:after{margin-left:16px}


/* =======================================================
   🍎 联系我们 · Apple 玻璃浮层风格
======================================================= */
#contact {
  background: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  text-align: center;
  padding: 100px 20px 120px;
  border-radius: 24px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.03);
}

#contact h2 {
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #1C1C1E;
  margin-bottom: 16px;
}

#contact p {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-size: 1rem;
  color: #4A4A4A;
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
/* 🍇 联系我们：淡紫香槟白底 + 柔光阴影 */
#contact {
  background: linear-gradient(
    180deg,
    rgba(142, 45, 226, 0.05) 0%,
    rgba(255, 255, 255, 0.8) 100%
  ) !important;
  border-radius: 24px;
  box-shadow: 0 6px 28px rgba(142, 45, 226, 0.05);
  padding: 100px 20px 120px;
  text-align: center;
}



/* 表单整体 */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 30px 24px 36px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(214,178,94,0.4);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  font-size: 1rem;
  color: #1C1C1E;
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  transition: border-color 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #D6B25E;
}

/* 提交按钮 */
.contact-form button {
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 24px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(214,178,94,0.3);
}

/* ========== 我们提供的服务（静态图模块） ========== */
.feature-grid {
  max-width:1080px;
  margin:0 auto 24px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  text-align:center;
  justify-content:center;
}
.feature-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 2px 12px #8e2de210;
  overflow:hidden;
  transition:transform .18s,box-shadow .18s;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:280px;
  margin:0 auto;
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 26px #8e2de235;
}
.feature-media{
  width:100%;
  aspect-ratio:4 / 3;
  background:#f4efff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-media img{
  width:80%;
  height:auto;
  object-fit:contain;
  display:block;
}
.feature-caption{
  margin-top:12px;
  padding:0 8px 14px;
  font-weight:700;
  color:#63329e;
  text-align:center;
  font-size:0.95rem;
}
@media (max-width:960px){
  .feature-grid{grid-template-columns:repeat(2,1fr); max-width:720px;}
}
@media (max-width:600px){
  .feature-grid{grid-template-columns:repeat(2,1fr); max-width:100%;}
}
/* ✅ 修正移动端标题过大问题 + 自动换行（适配 iPhone 14 Pro 等） */
@media (max-width:768px){
  .main-title{
    font-size: clamp(1.2rem, 4.5vw, 1.8rem); /* 自动缩放：手机约1.2rem，平板~1.8rem */
    padding: 4px 8px;                        /* 减少内边距避免挤压 */
    box-shadow: none;                        /* 移除阴影，显得更轻盈 */
    line-height: 1.2;                        /* 紧凑行距更协调 */
  }
}

@media (max-width:600px){
  .main-title{
    white-space: normal !important;          /* ✅ 允许换行 */
    text-align: left;                        /* ✅ 左对齐，与 Logo 更自然 */
    max-width: 140px;                        /* ✅ 限宽让其自然折成两行 */
  }
}
/* ✅ 修正移动端标题过大问题 */
@media (max-width:768px){
  .main-title{
    font-size: clamp(1.2rem, 4.5vw, 1.8rem); /* 自动缩放：手机端约1.2rem，平板~1.8rem */
    padding: 4px 8px;                        /* 减少内边距避免挤压 */
    box-shadow: none;                        /* 移除阴影，显得更轻盈 */
  }
}

/* =======================================================
   🍎 教师团队卡片容器 · Apple香槟白留白风格
   统一全站节奏：柔光、金线、呼吸感
======================================================= */

/* 容器整体 */
.teachers {
  max-width: 1080px;
  margin: 100px auto 100px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  background: transparent;
}

/* 单个卡片 */
.teacher-card {
  width: 300px;
  min-height: 380px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  padding: 26px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Hover：柔光浮起 */
.teacher-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(214, 178, 94, 0.25);
}

/* 教师头像：圆形 + 淡金光圈 */
.teacher-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  background: none !important;
  border: none;
  box-shadow: 0 0 0 3px rgba(214, 178, 94, 0.25);
  transition: all 0.4s ease;
  margin-bottom: 14px;
}
.teacher-card:hover .teacher-avatar {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* 姓名 */
.teacher-name {
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #1C1C1E;
  margin: 6px 0 6px;
}

/* 简介文字 */
.teacher-bio {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
  min-height: 48px;
  margin: 0 0 10px;
  opacity: 0.9;
}

/* 教师简介：限制显示三行，多余部分自动省略 */
.teacher-bio {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 10px;
  opacity: 0.9;

  /* ✅ 以下为多行截断核心样式 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* 显示 3 行 */
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.6em * 3); /* 保持固定高度以对齐卡片 */
}

/* 教师标签（淡金底、白字） */
.teacher-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.teacher-tags span {
  background: transparent;
  border: 1px solid rgba(214,178,94,0.45);
  color: #1C1C1E;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 14px;
  box-shadow: inset 0 0 4px rgba(214,178,94,0.15);
  transition: all 0.3s ease;
}
.teacher-tags span:hover {
  box-shadow: 0 0 8px rgba(214,178,94,0.25);
  transform: translateY(-1px);
}


/* 价格：深灰 + 小金点 */
.teacher-price {
  color: #1C1C1E;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
}
.teacher-price::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
}

/* “免费试课”按钮：香槟金上浮风格 */
.consult-btn {
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  color: #fff;
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 14px;
  padding: 9px 18px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(214,178,94,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.consult-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(214,178,94,0.35);
}
.consult-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 14px rgba(214,178,94,0.25);
}

/* 推荐徽章（若有） */
.recommended-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 3px 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(214,178,94,0.3);
}

/* 移动端优化 */
@media (max-width: 600px) {
  .teachers {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 16px 24px;
    gap: 18px;
  }
  .teacher-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 260px;
  }
}




/* ========== 移动端教师卡片横向滚动 ========== */
@media (max-width:600px){
  .teachers{
    display:flex;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:16px;
    padding:16px;
    gap:18px;
    -webkit-overflow-scrolling:touch;
  }
  .teacher-card{
    flex:0 0 84%;
    scroll-snap-align:start;
    min-width:260px;
    height:auto;
  }
}
.teachers{ scroll-behavior:smooth; }


/* ✅ 修复移动端右侧空白栏问题 */
html, body {
  overflow-x: hidden !important;
}

.teachers {
  max-width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* ✅ 关键：防止横向滚动容器撑出视窗 */
@media (max-width:600px){
  .teachers {
    width: 100vw !important;
    box-sizing: border-box;
  }
}

/* ===== 皇家紫主标题（粗体） ===== */
.gold-shine{
  display:inline-block;
  font-weight:800;
  font-size:3.4rem;
  letter-spacing:0.05em;
  color:#8E2DE2;
  white-space:nowrap;
}

/* ===== “免费试课”轻微跳动 ===== */
.jump{
  display:inline-block;
  animation:smoothJump 0.2s ease-in-out infinite;
}
@keyframes smoothJump{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* =========================
   ✨ 字体优化补丁
========================= */
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.main-title,.team-title,.divider span,.wall-title{
  font-family:"SF Pro Display","PingFang SC","Helvetica Neue",-apple-system,sans-serif !important;
  font-weight:700;
  letter-spacing:0.04em;
}
.subtitle{
  font-family:"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif !important;
  font-weight:500;
  letter-spacing:0.03em;
}
.teacher-bio,.teacher-type,p,li,span{
  font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-weight:400;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}
.consult-btn,.keyword-btn,.lang-btn,.load-more{
  font-family:"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif !important;
  font-weight:600;
  letter-spacing:0.02em;
}


/* =======================================================
   🍎 Apple × 香槟白 分页控制（Final Pure版）
   更纯净、去灰蓝、与教师卡片风格一致
======================================================= */

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 60px auto 100px;
  padding: 20px 0;
  text-align: center;
}

/* 翻页按钮 */
.page-btn {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #1C1C1E;
  background: #fff; /* 纯白底 */
  border: 1.4px solid rgba(214,178,94,0.5); /* 香槟金边框 */
  border-radius: 12px;
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(214,178,94,0.1);
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.25s ease;
}

/* Hover：金色渐变填充 + 柔光浮起 */
.page-btn:hover:not(:disabled) {
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(214,178,94,0.25);
}

/* Active：轻微按压 */
.page-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 10px rgba(214,178,94,0.25);
}

/* 禁用状态：半透明白 + 淡灰边框 */
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.06);
  color: #aaa;
  box-shadow: none;
}

/* 当前页码文字 */
#pageIndicator {
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-weight: 600;
  color: #1C1C1E;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  min-width: 90px;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .pagination-controls {
    gap: 12px;
    margin: 40px auto 60px;
  }
  .page-btn {
    padding: 6px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
  }
  #pageIndicator {
    font-size: 0.95rem;
  }
}

/* 頁碼顯示 */
#pageIndicator {
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-weight: 600;
  color: #1C1C1E;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  min-width: 90px;
}

/* 移動端適配 */
@media (max-width: 480px) {
  .pagination-controls {
    gap: 12px;
    margin: 40px auto 60px;
  }
  .page-btn {
    padding: 6px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
  }
  #pageIndicator {
    font-size: 0.95rem;
  }
}


/* =======================================================
   🍎 四人小组课（Apple × 香槟白风格）
   保留结构与功能，只更新视觉语言
======================================================= */

#group-classes {
  margin: 100px auto 80px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  border-radius: 24px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.03);
  padding: 80px 20px 100px;
}

/* 主标题 */
#group-classes .team-title {
  font-family: 'Playfair Display','SF Pro Display','PingFang SC',sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #1C1C1E;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

/* 副标题：加呼吸线 */
#group-classes .subtitle {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-size: 1.05rem;
  color: #4a4a4a;
  letter-spacing: 0.02em;
  margin: 8px auto 40px;
  position: relative;
  display: block;
  width: fit-content;
}
#group-classes .subtitle::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  opacity: 0.5;
  animation: softPulse 3.2s ease-in-out infinite;
}
@keyframes softPulse {
  0%,100% { opacity: 0.4; width: 50%; }
  50% { opacity: 1; width: 65%; }
}

/* 类别按钮组 */
.group-category {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.category-btn {
  background: #fff;
  border: 1px solid rgba(214,178,94,0.4);
  border-radius: 24px;
  color: #1C1C1E;
  padding: 9px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}
.category-btn:hover,
.category-btn.active {
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(214,178,94,0.25);
  transform: translateY(-2px);
}

/* 横向滑动容器 */
.course-slider {
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 16px 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 行容器 */
.course-row {
  display: none;
  gap: 18px;
  justify-content: center;
  flex-wrap: nowrap;
}
.course-row.active {
  display: flex;
}

/* 单个课程卡片 */
.course-card {
  flex: 0 0 320px;
  display: inline-block;
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  margin-right: 18px;
  overflow: hidden;
  transition: all 0.35s ease;
  cursor: pointer;
}
.course-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(214,178,94,0.25);
}

/* 图片区域 */
.course-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid rgba(214,178,94,0.25);
}

/* 文本信息 */
.course-info {
  text-align: left;
  padding: 16px 18px 22px;
}
.course-info h3 {
  color: #1C1C1E;
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.course-info p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
  margin: 0;
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
}

/* Hover 光感效果 */
.course-card:hover .course-info h3 {
  color: #D6B25E;
  transition: color 0.3s ease;
}

/* 移动端优化 */
@media (max-width: 600px) {
  #group-classes {
    padding: 60px 16px 80px;
    border-radius: 0;
    box-shadow: none;
  }
  .course-card {
    flex: 0 0 85%;
    margin-right: 14px;
  }
  .course-img {
    height: 150px;
  }
}
/* =======================================================
   🍏 四人小组课 · 淡入上浮动画（Apple式呼吸浮现）
======================================================= */

/* 初始状态：轻微下移 + 透明 */
.course-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 出现时：淡入 + 上浮 */
.course-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* 动画关键帧备用（可用于 IntersectionObserver 动态控制） */
@keyframes cardFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ===============================
   🍎 Step 1: 苹果式视觉语气定义
   高级感来自「克制 + 留白 + 呼吸 + 光泽」
================================= */
:root {
  --apple-bg: #FAFAFA;           /* 整体背景：比纯白更柔 */
  --apple-text: #1C1C1E;         /* 主文字：苹果深灰 */
  --apple-subtext: #6E6E73;      /* 次文字：柔灰紫 */
  --apple-accent: #7B61FF;       /* 主色：淡紫灰蓝（更现代） */
  --apple-gold: #D6B25E;         /* 辅色：香槟金，用于轻点缀 */
  --apple-radius: 12px;
  --apple-shadow: 0 4px 20px rgba(0,0,0,0.06);
  --apple-font-display: "SF Pro Display","PingFang SC","Helvetica Neue",-apple-system,sans-serif;
  --apple-font-text: "SF Pro Text","PingFang SC","Helvetica Neue",-apple-system,sans-serif;
}

body {
  background: var(--apple-bg);
  color: var(--apple-text);
  font-family: var(--apple-font-text);
  letter-spacing: 0.01em;
}

/* ===============================
   🍎 Step 2: 顶部导航 Apple 化
================================= */
.topbar {
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important;
  height: 60px !important;
  padding: 0 28px !important;
  align-items: center;
  justify-content: space-between;
}
/* 🍇 顶部导航：淡紫玻璃光感背景 */
.topbar {
  background: linear-gradient(
    180deg,
    rgba(142, 45, 226, 0.06) 0%,
    rgba(142, 45, 226, 0.03) 100%
  ) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 10px rgba(142, 45, 226, 0.08);
}

.logo-link img, .main-logo {
  height: 36px !important;
  max-height: 36px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.main-title {
  font-family: var(--apple-font-display) !important;
  font-weight: 600 !important;
  color: var(--apple-text) !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.02em;
  text-shadow: none !important;
  background: none !important;
  box-shadow: none !important;
}
.main-title .gold {
  color: var(--apple-gold) !important;
}

/* 导航按钮（语言切换、菜单） */
.lang-btn {
  background: transparent !important;
  color: var(--apple-text) !important;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--apple-radius);
  box-shadow: none;
  transition: all 0.25s ease;
}
.lang-btn:hover {
  background: rgba(0,0,0,0.04);
}

/* ===============================
   🍎 极简汉堡按钮（Apple 风格）
   三条灰线，无边框、无底色
================================= */
.hamburger {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 36px;
  height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.25s ease;
  padding: 0;
}

.hamburger:hover {
  opacity: 0.7; /* Hover时轻微变淡 */
}

.hamburger span {
  background: rgba(28, 28, 30, 0.9); /* 深灰线条 #1C1C1E */
  width: 22px;
  height: 2.6px;
  border-radius: 2px;
  margin: 3.6px 0;
  transition: background 0.3s ease;
}

.hamburger:active span {
  background: rgba(28, 28, 30, 0.6); /* 按下时稍淡 */
}


/* ===============================
   🍎 Hero Section: 建立初衷（Apple风）
================================= */
.hero-about {
  text-align: center;
  padding: 120px 24px 140px;
background: linear-gradient(180deg, #ffffff 0%, #f9f7fb 100%);
  background-attachment: fixed;
  border-radius: 0;
  box-shadow: none;
}

.hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.hero-title {
  font-family: 'SF Pro Display', 'PingFang SC', sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  color: #1C1C1E;
  margin-bottom: 24px;
  letter-spacing: 0.03em;
  position: relative;
  display: inline-block;
}

.hero-title::after {
  content: '';
  display: block;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, #B8860B, #8E2DE2);
  margin: 8px auto 0;
  border-radius: 2px;
}

.hero-subtitle {
  font-family: 'SF Pro Text', 'PingFang SC', sans-serif;
  font-size: 1.2rem;
  line-height: 1.9;
  color: #444;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-subtitle strong {
  color: #6E4D9E;
}

#about {
  background: linear-gradient(180deg, #ffffff 0%, #f9f7fb 100%) !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  .hero-about {
    padding: 80px 16px 100px;
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1.05rem;
  }
}

/* ===============================
   🍎 Hero 光晕渐层动画（Apple 风）
================================= */
@keyframes heroLightFade {
  0% {
    background: linear-gradient(180deg, #f5f3f9 0%, #f0edf8 100%);
    opacity: 0.6;
  }
  40% {
    background: linear-gradient(180deg, #ffffff 0%, #f9f7fb 100%);
    opacity: 0.9;
  }
  70% {
    background: linear-gradient(180deg, #ffffff 0%, #faf8fd 100%);
    box-shadow: 0 10px 40px rgba(142, 45, 226, 0.08);
  }
  100% {
    background: linear-gradient(180deg, #ffffff 0%, #f9f7fb 100%);
    opacity: 1;
    box-shadow: none;
  }
}

.hero-about {
  animation: heroLightFade 2.8s ease-out;
  background: linear-gradient(180deg, #ffffff 0%, #f9f7fb 100%) !important;
  transition: background 1.2s ease;
}


/* ===============================
   🍎 我们为您提供 - Apple 风格 Feature Section
================================= */
.feature-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  padding: 100px 20px;
  text-align: center;
}

.feature-title {
  font-family: 'SF Pro Display', 'PingFang SC', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: #1C1C1E;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.feature-subtitle {
  font-family: 'SF Pro Text', 'PingFang SC', sans-serif;
  font-weight: 400;
  color: #6E6E73;
  font-size: 1.1rem;
  margin-bottom: 50px;
}

/* --- Feature Grid 苹果式布局 --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 默认两列 */
  gap: 24px;
  max-width: 880px;
  margin: 0 auto 60px;
  padding: 0 16px;
  justify-content: center;
  align-items: stretch;
}
@media (max-width: 960px){
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .feature-grid { grid-template-columns: 1fr; }
}


/* Apple-style floating cards */
.feature-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  cursor: pointer;
  width: 420px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* 图片区域 */
.feature-media {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.feature-card:hover .feature-media img {
  transform: scale(1.05);
}

/* 文本部分 */
.feature-info {
  padding: 24px 26px 32px;
}
.feature-info h3 {
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #1C1C1E;
  margin-bottom: 6px;
}
.feature-info p {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  color: #6E6E73;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* 点击光晕动画 */
.feature-card:active {
  animation: glowPulse 0.4s ease-out;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(123,97,255,0); }
  50% { box-shadow: 0 0 18px rgba(123,97,255,0.25); }
  100% { box-shadow: 0 0 0 rgba(123,97,255,0); }
}

/* 响应式优化 */
@media (max-width:768px) {
  .feature-card { width: 90%; }
  .feature-media { height: 200px; }
}

/* 🍎 呼吸感浮现动画 */
@keyframes cardFadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.feature-card.visible {
  animation: cardFadeUp 0.9s ease-out forwards;
}







.team-subtitle {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  color: #4a4a4a;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
}
.team-subtitle::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  opacity: 0.5;
  animation: softPulse 3.2s ease-in-out infinite;
}
@keyframes softPulse {
  0%,100%{opacity:0.4;width:50%;}
  50%{opacity:1;width:65%;}
}




.teacher-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.teacher-name {
  color: #1C1C1E;
  font-weight: 600;
}

.consult-btn {
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  transition: transform 0.2s ease;
}
.consult-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(214,178,94,0.4);
}


.teacher-card:hover .teacher-avatar {
  filter: brightness(1.05);
  transform: scale(1.03);
  transition: all 0.35s ease;
}


/* ==============================
   🍎 教师团队模块（协调版：统一标题色、去除头像底色、优化价格）
============================== */

/* 标题（与全站统一） */
.team-title {
  font-family: 'Playfair Display','SF Pro Display','PingFang SC',sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  text-align: center;
  color: #1C1C1E !important;  /* 深灰，与其他模块一致 */
  letter-spacing: 0.04em;
  margin-top: 80px;
  margin-bottom: 10px;
}

/* 副标题：呼吸线 + 居中 */
.team-subtitle {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-size: 1.05rem;
  color: #4a4a4a;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 8px auto 40px;
  position: relative;
  display: block; /* ✅ 居中块级 */
  width: fit-content;
}
.team-subtitle::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  opacity: 0.5;
  animation: softPulse 3.2s ease-in-out infinite;
}
@keyframes softPulse {
  0%,100% { opacity: 0.4; width: 50%; }
  50% { opacity: 1; width: 65%; }
}

/* 教师头像去掉底色 */
.teacher-avatar {
  background: none !important;  /* ✅ 去除紫底 */
  border: none !important;
  box-shadow: 0 0 0 3px rgba(214,178,94,0.25); /* 轻金边框 */
  transition: all 0.35s ease;
}
.teacher-card:hover .teacher-avatar {
  filter: brightness(1.05);
  transform: scale(1.03);
}


.teacher-price::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
}


/* ===========================================
   🍎 教师详情弹窗（Apple 风格 · 玻璃浮层版）
   保留原结构 + 提升层次感 + 柔和色彩
=========================================== */
#teacher-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#teacher-modal.show {
  display: flex;
}

.tm-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
}

/* 主弹窗容器 */
.tm-dialog {
  position: relative;
  width: min(900px, 94vw);
  max-height: 90vh;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeInScale 0.4s cubic-bezier(.4,0,.2,1);
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* 关闭按钮 */
.tm-close {
  position: absolute;
  right: 14px;
  top: 10px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: #6E6E73;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.25s ease;
}
.tm-close:hover {
  background: rgba(214,178,94,0.9);
  color: #fff;
  transform: scale(1.08);
}

/* 内容主体：左右两列 */
.tm-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  padding: 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 左侧图片区 */
.tm-photo-wrap {
  aspect-ratio: 4 / 5;
  background: rgba(255,255,255,0.6);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.06);
}
.tm-photo-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右侧文字区 */
.tm-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 教师名 */
.tm-meta h2 {
  margin: 0 0 10px;
  font-size: 1.8rem;
  font-family: "SF Pro Display", "PingFang SC", sans-serif;
  font-weight: 700;
  color: #1C1C1E;
}

/* 标签 */
.tm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.tm-tags span {
  background: transparent;
  border: 1px solid rgba(214,178,94,0.45);
  color: #1C1C1E;
  font-size: 0.88rem;
  padding: 5px 12px;
  border-radius: 14px;
  box-shadow: inset 0 0 4px rgba(214,178,94,0.15);
  transition: all 0.3s ease;
}
.tm-tags span:hover {
  box-shadow: 0 0 8px rgba(214,178,94,0.25);
  transform: translateY(-1px);
}

/* 课程信息行 */
.tm-rows {
  display: grid;
  gap: 6px;
  margin: 12px 0 16px;
}
.tm-rows div {
  font-family: "SF Pro Text", "PingFang SC", sans-serif;
  font-size: 0.95rem;
  color: #555;
  font-weight: 500;
}

/* 简介 */
#tm-bio {
  white-space: pre-wrap;
  line-height: 1.8;
  color: #444;
  font-family: "SF Pro Text", "PingFang SC", sans-serif;
  font-size: 0.96rem;
}

/* 移动端布局调整 */
@media (max-width: 768px) {
  .tm-body {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }
  .tm-photo-wrap {
    height: 48vh;
  }
  .tm-dialog {
    width: 94vw;
    border-radius: 20px;
  }
}
/* 统一层级：遮罩 < 弹窗 < 关闭按钮 */
.tm-modal{ position:fixed; inset:0; z-index:9998; }
.tm-mask{ position:absolute; inset:0; z-index:1; }
.tm-dialog{ position:relative; z-index:2; }

/* 关闭按钮一定在最上层，且可接收事件 */
.tm-close{
  position:absolute; top:10px; right:10px;
  z-index:3;
  pointer-events:auto;            /* 关键 */
  -webkit-tap-highlight-color: transparent;
}




/* =======================================================
   🍎 国际优师汇 - 关键词墙（Apple极简呼吸版）
   保留单条呼吸线 + 增加留白空间 + 上浮阴影交互
======================================================= */

/* 容器整体：更宽松的留白感 */
.keyword-wall {
  max-width: 940px;
  margin: 120px auto 120px;      /* ↑ 增加上下留白 */
  padding: 60px 32px 80px;       /* 内部空间更充足 */
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  border-radius: 24px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.03);
}

/* 标题 */
.wall-title {
  font-family: 'SF Pro Display', 'PingFang SC', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  color: #1C1C1E;
  letter-spacing: 0.03em;
  margin-bottom: 48px; /* 加大标题与按钮组之间的距离 */
  position: relative;
}

/* ✨ 单条呼吸线（更柔和） */
.wall-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  width: 58%;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d6b25e, #f2d78b);
  opacity: 0.6;
  animation: goldBreath 3.6s ease-in-out infinite;
}

/* 柔和呼吸动画 */
@keyframes goldBreath {
  0%,100% { opacity: 0.4; transform: translateX(-50%) scaleX(0.95); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.05); }
}

/* CTA文字下方无呼吸线，仅留空间 */
.cta-text {
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-size: 1.05rem;
  color: #3A2E16;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 40px auto 40px;
}

/* 按钮容器 */
.keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 20px;
  margin-top: 40px;   /* ↑ 增加呼吸距离 */
}

/* ===============================
   🍏 按钮样式：Apple式上浮光感交互
================================= */
.keyword-btn {
  position: relative;
  padding: 12px 26px;
  border-radius: 24px;
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #1C1C1E;
  background: #ffffff;
  border: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.45s ease,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s ease;
}

/* 淡入浮现动画 */
.keyword-btn.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hover：上浮 + 柔光阴影 */
.keyword-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(214,178,94,0.25);
}

/* Active：下压感 */
.keyword-btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(214,178,94,0.25);
}

/* Selected：金色渐变填充 */
.keyword-btn.selected {
  background: linear-gradient(90deg, #f2d78b, #d6b25e);
  color: #fff;
  box-shadow: 0 6px 18px rgba(214,178,94,0.3);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .keyword-wall {
    margin: 80px auto 80px;
    padding: 50px 20px 60px;
  }
  .keyword-btn {
    padding: 10px 20px;
    font-size: 0.95rem;
  }
  .wall-title {
    margin-bottom: 36px;
  }
}


/* ==============================
   🍎 分组关键词墙（Apple风格）
============================== */
.keyword-wall {
  max-width: 980px;
  margin: 24px auto 48px;
  padding: 36px 18px 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 22px rgba(0,0,0,0.04);
  text-align: center;
}

.wall-title {
  margin-bottom: 26px;
}

.cta-text {
  font-size: 1.08rem;
  font-weight: 600;
  color: #2d1b47;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.keyword-group {
  margin-bottom: 40px;
}
.keyword-group:last-child {
  margin-bottom: 0;
}
.group-title {
  display: block;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #1C1C1E;
  opacity: 0.65;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

/* 基础关键词按钮 */
.keyword-btn {
  padding: 9px 20px;
  margin: 6px;
  border-radius: 24px;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  border-width: 0.5px;
  border-style: solid;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* 🍇 分类颜色极细描边 */
.keyword-btn.lang {
  border-color: rgba(123, 97, 255, 0.35);     /* 语言类：淡紫蓝 */
}
.keyword-btn.steam {
  border-color: rgba(99, 200, 152, 0.4);      /* STEAM：青绿色 */
}
.keyword-btn.art {
  border-color: rgba(255, 180, 120, 0.45);    /* 艺术类：柔橙粉 */
}
.keyword-btn.career {
  border-color: rgba(214, 178, 94, 0.45);     /* 职业类：淡金色 */
}

/* Hover 状态 */
.keyword-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(214,178,94,0.25);
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  color: #fff;
}

/* Selected 状态（保持一致） */
.keyword-btn.selected {
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  color: #fff;
  box-shadow: 0 4px 18px rgba(214,178,94,0.3);
}

/* 组与组之间的呼吸分隔线 */
.keyword-group:not(:last-child)::after {
  content: '';
  display: block;
  width: 60%;
  height: 1px;
  margin: 30px auto;
  background: linear-gradient(90deg,#e4e4e4 0%,#fafafa 100%);
  opacity: 0.6;
}

/* 移动端优化 */
@media (max-width:768px){
  .keyword-wall {
    padding: 24px 12px 28px;
  }
  .keyword-btn {
    font-size: 0.9rem;
    padding: 8px 16px;
  }
  .group-title {
    font-size: 0.92rem;
    margin-bottom: 10px;
  }
}


/* =======================================================
   🩹 修复补丁：Feature Section 副标题不显示问题
   适用：国际优师汇 Apple 风格版本（2025年10月22日）
======================================================= */

/* 强制显示 Feature 标题与副标题 */
.feature-section h2,
.feature-section .feature-title,
.feature-section .feature-subtitle {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  margin-bottom: 20px !important;
  background: transparent !important;
}

/* 避免 grid 或 backdrop 形成遮挡 */
.feature-section {
  overflow: visible !important;
}

/* 确保 Feature Grid 在文字下方 */
.feature-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* 柔光动画微调（防止闪烁） */
.feature-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease !important;
}










/* =======================================================
   🍎 咨询表单弹窗（Consult Popup）
   适配国际优师汇视觉风格（Apple × 香槟白）
======================================================= */
#consult-popup {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.35); /* 半透明黑幕 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3000; /* ⬆️ 高于其他元素（确保盖住顶部栏） */
}

#consult-popup.active,
#consult-popup[style*="display: flex"] {
  display: flex !important; /* 确保 JS 控制时能显示 */
}

/* 弹窗容器 */
#consult-popup .popup-dialog {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 28px 26px 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  max-width: 420px;
  width: 90%;
  animation: fadeInUp 0.35s ease-out;
}

/* 动画 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 标题 */
#consult-popup h3 {
  margin-top: 0;
  font-family: 'SF Pro Display','PingFang SC',sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1C1C1E;
  text-align: center;
  margin-bottom: 16px;
}

/* 输入框 */
#consult-popup input,
#consult-popup textarea {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(214,178,94,0.4);
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
  font-size: 1rem;
  color: #1C1C1E;
  font-family: 'SF Pro Text','PingFang SC',sans-serif;
}

/* 提交按钮 */
#consult-popup button[type="submit"] {
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 16px;
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#consult-popup button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(214,178,94,0.35);
}

/* 成功提示 */
#consult-success {
  margin-top: 8px;
  text-align: center;
  font-weight: 500;
  font-size: 0.95rem;
}

/* 移动端优化 */
@media (max-width: 600px) {
  #consult-popup .popup-dialog {
    padding: 22px 20px 26px;
    border-radius: 16px;
    width: 94%;
  }
}

/* =================== 登录弹窗样式 =================== */
#login-popup{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  z-index:3200;
}
#login-popup.active{ display:flex; }

.login-mask{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.login-dialog{
  position:relative;
  width:min(420px,92vw);
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,0.22);
  padding:26px 24px 28px;
  font-family:'SF Pro Text','PingFang SC',sans-serif;
}

.login-close{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.95);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  font-size:20px;
  font-weight:700;
  color:#6E6E73;
  cursor:pointer;
}

.login-title{
  margin:4px 0 6px;
  text-align:center;
  font-size:1.3rem;
  font-weight:700;
  color:#1C1C1E;
}
.login-subtitle{
  margin:0 0 18px;
  text-align:center;
  font-size:0.9rem;
  color:#6E6E73;
  line-height:1.6;
}

.login-section{ margin-bottom:14px; }
.login-section h4{
  margin:0 0 8px;
  font-size:0.95rem;
  font-weight:600;
  color:#1C1C1E;
}

#emailLoginForm input{
  width:100%;
  padding:10px 12px;
  margin-bottom:10px;
  border-radius:10px;
  border:1px solid rgba(214,178,94,0.4);
  background:rgba(255,255,255,0.95);
  font-size:0.95rem;
  color:#1C1C1E;
}
#emailLoginForm input:focus{
  outline:none;
  border-color:#D6B25E;
}

.login-primary-btn{
  width:100%;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  background:linear-gradient(90deg,#f2d78b,#d6b25e);
  color:#fff;
  font-weight:600;
  font-size:0.98rem;
  cursor:pointer;
}

.login-tip{
  margin:6px 0 0;
  font-size:0.8rem;
  color:#999;
}

.login-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px 0 14px;
}
.login-divider::before,
.login-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,#e4e4e4,#fafafa);
}
.login-divider span{
  margin:0 10px;
  font-size:0.8rem;
  color:#aaa;
}

.wechat-btn{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.04);
  background:#f5faf5;
  color:#0d7a37;
  font-size:0.96rem;
  font-weight:600;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.wechat-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #0d7a37;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

/* 顶部导航风格的 登录/注册 按钮 */
.nav-login-btn{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.nav-login-btn:hover{
  background: rgba(0,0,0,0.05);
}

.nav-login-btn:active{
  transform: scale(0.97);
}


.actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;}

.info-panel{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--border);
}

.info-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
}

.info-row + .info-row{border-top:1px dashed #E9E3F7;}

.info-label{
  font-size:12px;
  color:var(--sub);
  white-space:nowrap;
}

.info-value{
  font-size:12px;
  color:var(--text);
  text-align:right;
  line-height:1.35;
}

/* ✅ 修复：小屏幕横滑看不到第一张 */
@media (max-width: 600px){
  .course-row{
    justify-content: flex-start !important; /* 关键：不要居中 */
  }
  .course-slider{
    scroll-padding-left: 16px; /* 让第一张有完整露出空间 */
  }
  .course-row{
    padding-left: 16px;  /* 给左边留白，第一张不贴边/不被“吃掉” */
    padding-right: 16px;
  }
  .course-card{
    flex: 0 0 85%;
    min-width: 260px;    /* 防止被压缩 */
  }
}

/* =======================================================
   🍎 Footer（国际优师汇）· Apple glassmorphism × 香槟金
   与你现有：contact / teacher-card / keyword-wall 同气质
======================================================= */

.ith-footer{
  margin-top: 120px;
  padding: 70px 18px 0;
  background: linear-gradient(
    180deg,
    rgba(142,45,226,0.06) 0%,
    rgba(255,255,255,0.70) 45%,
    rgba(250,248,252,1) 100%
  );
  border-top: 1px solid rgba(214,178,94,0.22);
}

.ith-footer-inner{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1.3fr 1fr;
  gap: 26px;
  align-items: start;
}

/* ========== A 品牌区 ========== */
.f-brand{
  display:flex;
  gap: 16px;
  padding: 22px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.05);
}

.f-logo img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.f-brand-text h3{
  margin: 0 0 6px;
  font-family: "SF Pro Display","PingFang SC",sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #1C1C1E;
  letter-spacing: 0.02em;
}

.f-slogan{
  margin: 0 0 4px;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  color: #3f3f44;
  font-size: 0.95rem;
  line-height: 1.5;
}

.f-en{
  margin: 0 0 12px;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  color: rgba(110,110,115,0.95);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.f-trust{
  margin: 0;
  padding-left: 18px;
  color: rgba(28,28,30,0.75);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ========== B 导航区 ========== */
.f-links{
  padding: 22px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.05);

  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.f-col h4{
  margin: 0 0 10px;
  font-family: "SF Pro Display","PingFang SC",sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1C1C1E;
}

.f-col a{
  display:block;
  text-decoration:none;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  font-size: 0.92rem;
  color: rgba(28,28,30,0.72);
  padding: 7px 0;
  transition: transform .22s ease, color .22s ease;
}

.f-col a:hover{
  color: #1C1C1E;
  transform: translateX(2px);
}

/* ========== C 二维码 CTA 区 ========== */
.f-cta{
  display:flex;
  justify-content: flex-end;
}

.f-cta-card{
  width: 100%;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(214,178,94,0.16);
  border: 1px solid rgba(214,178,94,0.30);
  position: relative;
  overflow: hidden;
}

.f-cta-card::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(214,178,94,0.28), rgba(214,178,94,0) 60%);
  filter: blur(2px);
  pointer-events:none;
}

.f-cta-head h4{
  margin: 0 0 6px;
  font-family: "SF Pro Display","PingFang SC",sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1C1C1E;
}

.f-cta-head p{
  margin: 0 0 14px;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  color: rgba(110,110,115,0.95);
  font-size: 0.92rem;
  line-height: 1.5;
}

.f-qr-wrap{
  display:flex;
  justify-content:center;
  padding: 10px 0 12px;
}

.f-qr{
  width: 170px;
  height: 170px;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.f-contact{
  margin-top: 10px;
  display:grid;
  gap: 8px;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  color: rgba(28,28,30,0.78);
  font-size: 0.92rem;
}

.f-line{
  display:flex;
  align-items:center;
  gap: 10px;
}

.f-ico{
  width: 22px;
  display:inline-flex;
  justify-content:center;
  opacity: 0.9;
}

.f-cta-btn{
  margin-top: 14px;
  display:block;
  text-align:center;
  text-decoration:none;
  background: linear-gradient(90deg,#f2d78b,#d6b25e);
  color: #fff;
  font-weight: 700;
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 22px rgba(214,178,94,0.28);
  transition: transform .2s ease, box-shadow .2s ease;
}

.f-cta-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(214,178,94,0.35);
}

.f-cta-btn:active{
  transform: translateY(1px);
  box-shadow: 0 6px 18px rgba(214,178,94,0.28);
}

/* ========== D 底部版权条 ========== */
.ith-footer-bottom{
  max-width: 1120px;
  margin: 26px auto 0;
  padding: 14px 6px 24px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  color: rgba(28,28,30,0.55);
  font-family: "SF Pro Text","PingFang SC",sans-serif;
  font-size: 0.86rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.ith-footer-bottom a{
  color: rgba(28,28,30,0.55);
  text-decoration:none;
  transition: color .2s ease;
}
.ith-footer-bottom a:hover{
  color:#1C1C1E;
}

.dot{
  margin: 0 8px;
  opacity: 0.7;
}

/* ========== 响应式：手机端 ========== */
@media (max-width: 960px){
  .ith-footer-inner{
    grid-template-columns: 1fr;
  }
  .f-cta{
    justify-content: flex-start;
  }
  .f-links{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .ith-footer{
    padding: 52px 14px 0;
    border-radius: 0;
  }
  .f-links{
    grid-template-columns: 1fr;
  }
  .ith-footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 22px;
  }
  .f-qr{
    width: 160px;
    height: 160px;
  }
}

/* =========================
   首页累计分钟模块
   ========================= */

.stat-strip{
  max-width: 1080px;
  margin: 16px auto 10px;
  padding: 0 16px;
}

.stat-inner{
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(142,45,226,.18);
  box-shadow: 0 6px 20px rgba(142,45,226,.08);
  backdrop-filter: blur(12px);
}

.stat-title{
  font-weight: 700;
  color: #1C1C1E;
  line-height: 1.4;
  font-size: 16px;
}

#minutesCounter{
  font-size: 26px;
  font-weight: 800;
  color: #4A00E0;
  margin: 0 6px;
  letter-spacing: .3px;
}

.stat-sub{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(60,60,67,.78);
}

/* 首页累计分钟下的两个数据项（同风格） */
.hero-kpis{
  margin-top: 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;

  justify-content: center;   /* ⭐ 整行居中 */
}

.hero-kpi{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(142,45,226,.12);
  box-shadow: 0 6px 18px rgba(142,45,226,.06);
  backdrop-filter: blur(10px);
}

.kpi-num{
  font-weight: 800;
  font-size: 18px;
  color: #4A00E0;
  letter-spacing: .2px;
}

.kpi-text{
  font-size: 13px;
  color: rgba(28,28,30,.85);
  font-weight: 600;
}

@media (max-width: 600px){
  .hero-kpis{ gap: 10px; }
  .hero-kpi{ width: 100%; justify-content: center; }
}