/* 引入基础样式 */
@import url('styles.css'); /* 复用基础样式表 */

/* 活动页专用变量 */
:root {
  --campaign-gradient: linear-gradient(135deg, #ffe9cf 0%, #fff4e7 50%, #fffaf4 100%); /* 活动渐变背景 */
  --glow-orange: 0 0 20px rgba(230, 145, 50, 0.4), 0 0 40px rgba(230, 145, 50, 0.2); /* 橙色辉光阴影 */
  --timeline-line: #ead9c4; /* 时间线/分割线颜色 */
}

/* ========================================
  HERO SECTION 首屏区域
  ======================================== */

.campaign-hero {
  padding: 40px 0 50px; /* 上下内边距 */
  background: radial-gradient(circle at top center, #ffe9cf 0%, #fffaf4 40%, #fff 100%); /* 背景渐变 */
  position: relative; /* 作为伪元素定位参考 */
  overflow: hidden; /* 隐藏超出区域内容 */
}

.campaign-hero::before {
  content: ''; /* 伪元素占位 */
  position: absolute; /* 绝对定位 */
  top: -50%; /* 纵向偏移 */
  right: -20%; /* 横向偏移 */
  width: 600px; /* 伪元素宽度 */
  height: 600px; /* 伪元素高度 */
  background: radial-gradient(circle, rgba(230, 145, 50, 0.08) 0%, transparent 70%); /* 柔光渐变 */
  border-radius: 50%; /* 圆形 */
  animation: float-blob 8s ease-in-out infinite; /* 漂浮动画 */
}

@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); } /* 起止状态 */
  50% { transform: translate(-30px, 30px) scale(1.1); } /* 中间漂移 */
}

.hero-grid {
  display: grid; /* 网格布局 */
  gap: 40px; /* 网格间距 */
  align-items: center; /* 垂直居中 */
}

.hero-content {
  text-align: center; /* 文案居中 */
}

.hero-image {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.product-showcase {
  width: 100%; /* 自适应宽度 */
  max-width: 500px; /* 最大宽度 */
  height: auto; /* 高度自动 */
  object-fit: contain; /* 图片完整显示 */
  animation: float-product 6s ease-in-out infinite; /* 漂浮动画 */
}

@keyframes float-product {
  0%, 100% { transform: translateY(0px); } /* 起止位置 */
  50% { transform: translateY(-20px); } /* 上浮位置 */
}

.campaign-badge {
  display: inline-block; /* 行内块 */
  background: linear-gradient(135deg, #fff8ef, #fff4e7); /* 徽章背景 */
  color: var(--brand-dark); /* 文字颜色 */
  padding: 8px 20px; /* 内边距 */
  border-radius: 20px; /* 圆角 */
  font-weight: 700; /* 字重 */
  font-size: 0.9rem; /* 字号 */
  margin-bottom: 20px; /* 底部间距 */
  border: 2px solid var(--brand); /* 边框 */
  box-shadow: none; /* 无阴影 */
  animation: none; /* 禁用动画 */
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(230, 145, 50, 0.3); } /* 起止状态 */
  50% { transform: scale(1.05); box-shadow: 0 6px 24px rgba(230, 145, 50, 0.4); } /* 中间放大 */
}

.campaign-title {
  font-size: clamp(2rem, 6vw, 3.2rem); /* 响应式字号 */
  color: var(--brand-dark); /* 标题颜色 */
  margin: 0 0 16px; /* 外边距 */
  line-height: 1.2; /* 行高 */
  font-weight: 900; /* 字重 */
  letter-spacing: -0.02em; /* 字距 */
}

.campaign-subtitle {
  font-size: clamp(1rem, 3vw, 1.2rem); /* 副标题字号 */
  color: var(--ink-soft); /* 副标题颜色 */
  margin: 0 0 20px; /* 外边距 */
  line-height: 1.5; /* 行高 */
}

.hero-highlight {
  max-width: 500px; /* 最大宽度 */
  margin: 0 auto 20px; /* 水平居中并留底 */
}

.highlight-text {
  font-size: 1rem; /* 字号 */
  color: var(--brand-dark); /* 文字颜色 */
  font-weight: 700; /* 字重 */
  margin: 8px 0; /* 外边距 */
  line-height: 1.6; /* 行高 */
}

.hero-note {
  margin-top: 16px; /* 顶部间距 */
  font-size: 0.85rem; /* 字号 */
  color: var(--ink-soft); /* 颜色 */
  font-style: italic; /* 斜体 */
}

.btn-hero {
  font-size: 1.15rem; /* 字号 */
  padding: 18px 36px; /* 内边距 */
  display: inline-flex; /* 行内弹性布局 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 图标间距 */
  box-shadow: 0 10px 30px rgba(230, 145, 50, 0.4); /* 阴影 */
  position: relative; /* 作为子元素定位参考 */
  overflow: visible; /* 显示溢出内容 */
  border: 2px solid rgba(255, 255, 255, 0.3); /* 边框 */
  font-weight: 900; /* 字重 */
  letter-spacing: 0.02em; /* 字距 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.btn-hero:hover {
  transform: translateY(-2px); /* 悬停上移 */
  box-shadow: 0 14px 40px rgba(230, 145, 50, 0.5); /* 阴影增强 */
  border-color: rgba(255, 255, 255, 0.5); /* 边框变亮 */
}

.btn-hero:active {
  transform: translateY(0px); /* 点击复位 */
  box-shadow: 0 6px 20px rgba(230, 145, 50, 0.4); /* 阴影变弱 */
}

.click-icon {
  font-size: 1.3rem; /* 图标大小 */
  display: inline-block; /* 便于动画 */
  animation: click-pulse 1.5s ease-in-out infinite; /* 呼吸动画 */
}

@keyframes click-pulse {
  0%, 100% {
    transform: scale(1); /* 起止缩放 */
  }
  50% {
    transform: scale(1.3); /* 中间放大 */
  }
}

/* ========================================
  HOW IT WORKS SECTION 流程说明
  ======================================== */

.campaign-howto {
  padding: 40px 0; /* 上下内边距 */
  background: #fff; /* 背景色 */
}

.steps-grid {
  display: grid; /* 网格布局 */
  grid-template-columns: 1fr; /* 单列 */
  gap: 20px; /* 间距 */
  max-width: 600px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

.step-card {
  background: linear-gradient(135deg, #fff, #fffbf7); /* 卡片背景 */
  border: 2px solid var(--line); /* 边框 */
  border-radius: var(--radius-md); /* 圆角 */
  padding: 24px; /* 内边距 */
  text-align: center; /* 文本居中 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* 过渡 */
  position: relative; /* 定位参考 */
}

.step-card:hover {
  transform: translateY(-4px); /* 悬停上移 */
  box-shadow: 0 8px 24px rgba(230, 145, 50, 0.2); /* 阴影 */
  border-color: var(--brand); /* 边框高亮 */
}

.step-number {
  font-size: 2.5rem; /* 序号字号 */
  margin-bottom: 12px; /* 底部间距 */
  display: block; /* 块级显示 */
}

.step-header {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 8px; /* 间距 */
  margin-bottom: 8px; /* 底部间距 */
}

.step-card h3 {
  margin: 0; /* 清除默认外边距 */
  font-size: 1.3rem; /* 标题字号 */
  color: var(--brand-dark); /* 颜色 */
  font-weight: 800; /* 字重 */
}

.step-card p {
  margin: 0 0 12px; /* 外边距 */
  color: var(--ink-soft); /* 文字颜色 */
  font-size: 0.95rem; /* 字号 */
  line-height: 1.5; /* 行高 */
}

.step-meta {
  display: inline-block; /* 行内块 */
  padding: 4px 10px; /* 内边距 */
  background: linear-gradient(135deg, #fff8ef, #fff4e7); /* 背景 */
  border-radius: 12px; /* 圆角 */
  font-size: 0.8rem; /* 字号 */
  color: var(--brand-dark); /* 颜色 */
  font-weight: 700; /* 字重 */
  margin-top: 4px; /* 顶部间距 */
}

/* Info Trigger Button 信息触发按钮 */
.info-trigger,
.info-trigger-inline {
  background: transparent; /* 透明背景 */
  border: none; /* 无边框 */
  color: var(--brand); /* 主色 */
  cursor: pointer; /* 指针 */
  padding: 4px; /* 内边距 */
  display: inline-flex; /* 行内弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  border-radius: 50%; /* 圆形 */
  transition: all 0.2s ease; /* 过渡 */
  position: relative; /* 定位参考 */
  -webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
}

.info-trigger {
  width: 24px; /* 宽度 */
  height: 24px; /* 高度 */
}

.info-trigger:hover,
.info-trigger:focus {
  background: rgba(230, 145, 50, 0.1); /* 悬停背景 */
  transform: scale(1.1); /* 放大 */
  outline: none; /* 去除默认焦点 */
}

.info-trigger svg {
  pointer-events: none; /* 禁止 SVG 捕获事件 */
}

.info-trigger-inline {
  padding: 6px 12px; /* 内边距 */
  border-radius: 16px; /* 圆角 */
  gap: 6px; /* 间距 */
  font-size: 0.85rem; /* 字号 */
  font-weight: 600; /* 字重 */
  margin-top: 8px; /* 顶部间距 */
  border: 1px solid var(--brand); /* 边框 */
}

.info-trigger-inline:hover {
  background: var(--brand); /* 悬停背景 */
  color: #fff; /* 悬停文字色 */
}

/* ========================================
  TOOLTIP SYSTEM 提示气泡系统
  ========================================
  Tooltips are placed in a global container (#tooltip-container)
  outside any element with transform/filter/will-change properties.
   
  This prevents stacking context issues where tooltips could be
  hidden behind other page elements. The container itself is invisible
  (0x0 size) but allows tooltips to use position:fixed correctly.
   
  Standard H5 pattern used by WeChat, Alipay, etc.
  ======================================== */

#tooltip-container {
  position: fixed; /* 固定定位，避免被页面滚动影响 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 0; /* 容器本身不占空间 */
  height: 0; /* 容器本身不占空间 */
  pointer-events: none; /* 容器不接收事件 */
  z-index: 10000; /* 高层级，覆盖页面内容 */
}

.info-tooltip {
  position: fixed; /* 固定定位，便于 JS 精确定位 */
  background: var(--brand-dark); /* 背景色 */
  color: #fff; /* 文字颜色 */
  padding: 16px 36px 16px 16px; /* 内边距（右侧留按钮空间） */
  border-radius: 10px; /* 圆角 */
  font-size: 0.85rem; /* 字号 */
  line-height: 1.5; /* 行高 */
  white-space: nowrap; /* 初始单行 */
  opacity: 0; /* 默认隐藏 */
  pointer-events: none; /* 默认不接收事件 */
  transition: opacity 0.3s ease; /* 透明度过渡 */
  z-index: 10001; /* 高层级 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* 阴影 */
  max-width: 280px; /* 最大宽度 */
  white-space: normal; /* 允许换行 */
  transform: translateY(-8px); /* 初始轻微上移 */
}

.info-tooltip.active {
  opacity: 1; /* 显示 */
  pointer-events: auto; /* 可交互 */
  transform: translateY(-12px); /* 上移增强 */
}

/* Tooltip Close Button 关闭按钮 */
.tooltip-close {
  position: absolute; /* 绝对定位 */
  top: 8px; /* 顶部偏移 */
  right: 8px; /* 右侧偏移 */
  width: 24px; /* 宽度 */
  height: 24px; /* 高度 */
  background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  border: none; /* 去除边框 */
  border-radius: 50%; /* 圆形按钮 */
  color: #fff; /* 图标颜色 */
  cursor: pointer; /* 鼠标指针 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.2s ease; /* 过渡动画 */
  padding: 0; /* 去除内边距 */
  -webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
}

.tooltip-close:hover,
.tooltip-close:focus {
  background: rgba(255, 255, 255, 0.3); /* 悬停背景 */
  transform: scale(1.1); /* 放大 */
  outline: none; /* 去除默认焦点 */
}

.tooltip-close:active {
  transform: scale(0.95); /* 点击缩小 */
}

.tooltip-close svg {
  pointer-events: none; /* SVG 不接收事件 */
}

.tooltip-text {
  text-align: left; /* 左对齐 */
  padding-right: 8px; /* 右侧内边距 */
}

.tooltip-text strong {
  display: block; /* 独占一行 */
  margin-bottom: 6px; /* 底部间距 */
  font-weight: 800; /* 字重 */
  color: #fff; /* 颜色 */
}

/* ========================================
  REWARDS SECTION 奖品展示区
  ======================================== */

.campaign-rewards {
  padding: 40px 0; /* 上下内边距 */
  background: linear-gradient(180deg, #fff 0%, #fffaf4 50%, #fff 100%); /* 背景渐变 */
}

.rewards-grid {
  display: grid; /* 网格布局 */
  grid-template-columns: 1fr; /* 单列 */
  gap: 20px; /* 间距 */
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* Reward Card 奖品卡片 */
.reward-card {
  position: relative; /* 作为子元素定位参考 */
  border-radius: var(--radius-lg); /* 大圆角 */
  overflow: hidden; /* 隐藏溢出 */
  background: #fff; /* 背景色 */
  box-shadow: 0 4px 16px rgba(31, 36, 45, 0.08); /* 阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡 */
  min-height: 320px; /* 最小高度 */
}

.reward-card:hover {
  transform: translateY(-8px); /* 悬停上移 */
  box-shadow: 0 12px 32px rgba(230, 145, 50, 0.2); /* 阴影增强 */
}

/* Reward Badge 角标 */
.reward-badge {
  position: absolute; /* 绝对定位 */
  top: 12px; /* 顶部偏移 */
  right: 12px; /* 右侧偏移 */
  padding: 6px 14px; /* 内边距 */
  border-radius: 20px; /* 圆角 */
  font-size: 0.85rem; /* 字号 */
  font-weight: 800; /* 字重 */
  z-index: 3; /* 覆盖图片 */
  backdrop-filter: blur(8px); /* 背景模糊 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影 */
  white-space: nowrap; /* 不换行 */
}

.badge-gold {
  background: linear-gradient(135deg, #FFD700, #FFA500); /* 金色渐变 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4); /* 阴影 */
}

.badge-orange {
  background: linear-gradient(135deg, var(--brand), #f0a24b); /* 橙色渐变 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 4px 16px rgba(230, 145, 50, 0.4); /* 阴影 */
}

.badge-green {
  background: linear-gradient(135deg, #4CAF50, #45a049); /* 绿色渐变 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4); /* 阴影 */
}

/* Product Image 奖品图片 */
.reward-image {
  position: absolute; /* 覆盖容器 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 宽度撑满 */
  height: 100%; /* 高度撑满 */
  z-index: 1; /* 在遮罩层下方 */
}

.reward-image img {
  width: 100%; /* 填满容器 */
  height: 100%; /* 填满容器 */
  object-fit: cover; /* 裁切覆盖 */
  object-position: center; /* 居中裁切 */
}

/* Gradient Overlay 文案遮罩 */
.reward-overlay {
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 底部贴齐 */
  left: 0; /* 左侧贴齐 */
  right: 0; /* 右侧贴齐 */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%); /* 渐变遮罩 */
  padding: 80px 20px 24px; /* 内边距 */
  z-index: 2; /* 在图片之上 */
  transition: padding 0.3s ease; /* 过渡 */
}

.reward-card:hover .reward-overlay {
  padding-bottom: 28px; /* 悬停时增加底部空间 */
}

/* Content 文案区域 */
.reward-content {
  color: #fff; /* 文字颜色 */
  text-align: center; /* 居中对齐 */
}

.reward-title {
  font-size: 1.3rem; /* 标题字号 */
  font-weight: 900; /* 字重 */
  margin: 0 0 8px; /* 外边距 */
  color: #fff; /* 颜色 */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 阴影 */
}

.reward-product {
  font-size: 0.95rem; /* 字号 */
  margin: 0 0 10px; /* 外边距 */
  color: rgba(255, 255, 255, 0.95); /* 文字颜色 */
  line-height: 1.4; /* 行高 */
}

.reward-value {
  display: inline-block; /* 行内块 */
  padding: 6px 16px; /* 内边距 */
  background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  backdrop-filter: blur(8px); /* 背景模糊 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 边框 */
  border-radius: 20px; /* 圆角 */
  font-size: 0.9rem; /* 字号 */
  color: #fff; /* 文字颜色 */
  font-weight: 600; /* 字重 */
}

.reward-value strong {
  font-weight: 900; /* 强调字重 */
  font-size: 1.1rem; /* 强调字号 */
  color: #FFD700; /* 金色 */
}

.rewards-bonus {
  margin-top: 30px; /* 顶部间距 */
  padding: 20px; /* 内边距 */
  background: linear-gradient(135deg, var(--brand), #f0a24b); /* 背景渐变 */
  border-radius: var(--radius-md); /* 圆角 */
  text-align: center; /* 居中 */
  box-shadow: 0 8px 24px rgba(230, 145, 50, 0.3); /* 阴影 */
}

.rewards-bonus p {
  margin: 0; /* 清除默认外边距 */
  color: #fff; /* 文字颜色 */
  font-size: 1rem; /* 字号 */
  line-height: 1.6; /* 行高 */
}

.rewards-bonus strong {
  font-weight: 900; /* 强调字重 */
}

.section-head {
  text-align: center; /* 文本居中 */
  margin-bottom: 32px; /* 底部间距 */
  position: relative; /* 作为装饰定位参考 */
}

.section-title {
  font-size: clamp(1.8rem, 5vw, 2.5rem); /* 响应式字号 */
  color: var(--brand-dark); /* 颜色 */
  margin: 0 0 12px; /* 外边距 */
  font-weight: 900; /* 字重 */
}

.section-subtitle {
  font-size: 1.1rem; /* 字号 */
  color: var(--ink-soft); /* 颜色 */
  margin: 0; /* 清除默认外边距 */
}

/* ========================================
  PRODUCT FEATURES SECTION 产品介绍区域
  ======================================== */

.campaign-product {
  padding: 50px 0; /* 上下内边距 */
  background: #fff; /* 白色背景 */
}

.product-grid {
  display: grid; /* 网格布局 */
  grid-template-columns: 1fr; /* 单列（移动端） */
  gap: 40px; /* 间距 */
  align-items: start; /* 顶部对齐 */
  max-width: 1200px; /* 最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* Video Wrapper - 16:9 响应式容器 */
.product-video {
  width: 100%; /* 全宽 */
}

.video-wrapper {
  position: relative; /* 作为iframe定位参考 */
  width: 100%; /* 全宽 */
  padding-bottom: 56.25%; /* 16:9 比例 (9/16 = 56.25%) */
  height: 0; /* 高度由padding控制 */
  overflow: hidden; /* 隐藏溢出 */
  border-radius: var(--radius-lg); /* 圆角 */
  background: #000; /* 黑色背景 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.video-wrapper iframe {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  border: none; /* 无边框 */
}

/* 懒加载占位符 */
.video-placeholder {
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d); /* 深色渐变背景 */
  cursor: pointer; /* 指针光标 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.video-placeholder:hover {
  background: linear-gradient(135deg, #2d2d2d, #3a3a3a); /* 悬停背景变化 */
}

.video-play-btn {
  margin-bottom: 16px; /* 底部间距 */
  opacity: 0.9; /* 透明度 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.video-placeholder:hover .video-play-btn {
  opacity: 1; /* 悬停时完全不透明 */
  transform: scale(1.1); /* 悬停时放大 */
}

.video-load-text {
  color: #fff; /* 白色文字 */
  font-size: 0.9rem; /* 字号 */
  font-weight: 600; /* 字重 */
  margin: 0; /* 清除外边距 */
  opacity: 0.8; /* 透明度 */
}

.lazy-video.loaded .video-placeholder {
  display: none; /* 加载后隐藏占位符 */
}

/* Product Features */
.product-features {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 24px; /* 间距 */
}

.feature-item {
  display: flex; /* 弹性布局 */
  gap: 16px; /* 图标与文字间距 */
  align-items: flex-start; /* 顶部对齐 */
  padding: 20px; /* 内边距 */
  background: linear-gradient(135deg, #fff, #fffbf7); /* 背景渐变 */
  border: 2px solid var(--line); /* 边框 */
  border-radius: var(--radius-md); /* 圆角 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.feature-item:hover {
  transform: translateY(-4px); /* 悬停上移 */
  box-shadow: 0 4px 16px rgba(230, 145, 50, 0.15); /* 阴影 */
  border-color: var(--brand); /* 边框高亮 */
}

.feature-icon {
  font-size: 2rem; /* 图标大小 */
  flex-shrink: 0; /* 不压缩 */
  width: 48px; /* 固定宽度 */
  height: 48px; /* 固定高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  background: linear-gradient(135deg, #fff8ef, #fff4e7); /* 背景渐变 */
  border-radius: 12px; /* 圆角 */
  border: 2px solid var(--brand); /* 边框 */
}

.feature-content {
  flex: 1; /* 占据剩余空间 */
}

.feature-title {
  font-size: 1.1rem; /* 标题字号 */
  font-weight: 800; /* 字重 */
  color: var(--brand-dark); /* 颜色 */
  margin: 0 0 8px 0; /* 外边距 */
  line-height: 1.3; /* 行高 */
}

.feature-text {
  font-size: 0.95rem; /* 正文字号 */
  color: var(--ink-soft); /* 颜色 */
  line-height: 1.6; /* 行高 */
  margin: 0; /* 清除外边距 */
}

/* ========================================
  REGISTRATION SECTION 报名表单区域
  ======================================== */

.campaign-register {
  padding: 50px 0; /* 上下内边距 */
  background: radial-gradient(circle at bottom left, #ffe9cf 0%, #fffaf4 40%, #fff 100%); /* 背景渐变 */
}

.register-grid {
  display: grid; /* 网格布局 */
  gap: 40px; /* 间距 */
  align-items: start; /* 顶部对齐 */
}

.register-info h2 {
  font-size: clamp(1.8rem, 5vw, 2.4rem); /* 标题字号 */
  color: var(--brand-dark); /* 颜色 */
  margin: 0 0 16px; /* 外边距 */
  font-weight: 900; /* 字重 */
}

.register-info .lead {
  font-size: 1.05rem; /* 字号 */
  color: var(--ink-soft); /* 颜色 */
  line-height: 1.6; /* 行高 */
  margin: 0 0 24px; /* 外边距 */
}

.info-highlights {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向排列 */
  gap: 12px; /* 间距 */
}

.highlight-item {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 间距 */
  padding: 12px 14px; /* 内边距 */
  background: #fff; /* 背景色 */
  border: 1px solid var(--line); /* 边框 */
  border-radius: var(--radius-md); /* 圆角 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 过渡 */
}

.highlight-item:hover {
  transform: translateX(8px); /* 悬停平移 */
  box-shadow: 0 6px 20px rgba(230, 145, 50, 0.12); /* 阴影 */
}

.highlight-icon {
  font-size: 1.5rem; /* 图标大小 */
  flex-shrink: 0; /* 不缩小 */
  line-height: 1; /* 行高 */
}

.highlight-text {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向 */
  gap: 2px; /* 间距 */
  line-height: 1.3; /* 行高 */
}

.highlight-text strong {
  color: var(--brand-dark); /* 颜色 */
  font-size: 0.95rem; /* 字号 */
  font-weight: 800; /* 字重 */
}

.highlight-text span {
  color: var(--ink-soft); /* 颜色 */
  font-size: 0.8rem; /* 字号 */
}

.campaign-form {
  background: #fff; /* 背景色 */
  border: 2px solid var(--line); /* 边框 */
  border-radius: var(--radius-lg); /* 大圆角 */
  padding: 32px; /* 内边距 */
  box-shadow: 0 16px 48px rgba(31, 36, 45, 0.12); /* 阴影 */
}

.form-header {
  margin-bottom: 24px; /* 底部间距 */
  padding-bottom: 20px; /* 底部内边距 */
  border-bottom: 2px solid var(--line); /* 分割线 */
}

.form-header h3 {
  margin: 0 0 8px; /* 外边距 */
  font-size: 1.5rem; /* 字号 */
  color: var(--brand-dark); /* 颜色 */
  font-weight: 800; /* 字重 */
}

.form-header p {
  margin: 0; /* 清除外边距 */
  color: var(--ink-soft); /* 颜色 */
  font-size: 0.9rem; /* 字号 */
}

.form-group {
  margin-bottom: 20px; /* 组间距 */
}

.form-group label {
  display: block; /* 独占一行 */
  margin-bottom: 8px; /* 底部间距 */
  font-weight: 700; /* 字重 */
  font-size: 0.95rem; /* 字号 */
  color: var(--ink); /* 颜色 */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  width: 100%; /* 宽度撑满 */
  border: 2px solid var(--line); /* 边框 */
  border-radius: 12px; /* 圆角 */
  padding: 12px 16px; /* 内边距 */
  font: inherit; /* 继承字体 */
  background: #fffefa; /* 背景色 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 过渡 */
}

.form-group input:focus {
  border-color: var(--brand); /* 聚焦边框色 */
  outline: none; /* 去除默认焦点 */
  box-shadow: 0 0 0 3px rgba(230, 145, 50, 0.1); /* 聚焦阴影 */
}

.form-consent {
  margin: 20px 0; /* 上下间距 */
  padding: 16px; /* 内边距 */
  background: #fff8ef; /* 背景色 */
  border-radius: 10px; /* 圆角 */
  border: 1px solid var(--line); /* 边框 */
}

.form-consent p {
  margin: 0; /* 清除外边距 */
  font-size: 0.88rem; /* 字号 */
  color: var(--ink-soft); /* 颜色 */
  line-height: 1.6; /* 行高 */
}

.form-consent a {
  color: var(--brand-dark); /* 链接颜色 */
  text-decoration: underline; /* 下划线 */
  text-underline-offset: 2px; /* 下划线偏移 */
  font-weight: 600; /* 字重 */
}

.btn-submit {
  width: 100%; /* 按钮全宽 */
  font-size: 1.1rem; /* 字号 */
  padding: 16px; /* 内边距 */
  margin-top: 10px; /* 顶部间距 */
  background: linear-gradient(135deg, var(--brand), #f0a24b); /* 背景渐变 */
  box-shadow: 0 10px 30px rgba(230, 145, 50, 0.35); /* 阴影 */
}

/* ========================================
  FAQ SECTION 常见问题区
  ======================================== */

.campaign-faq {
  padding: 60px 0 80px; /* 上下内边距 */
  background: #fff; /* 背景色 */
}

.faq-grid {
  max-width: 800px; /* 最大宽度 */
  margin: 40px auto 0; /* 顶部间距 + 居中 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向排列 */
  gap: 16px; /* 间距 */
}

.faq-item {
  background: #fff; /* 背景色 */
  border: 2px solid var(--line); /* 边框 */
  border-radius: var(--radius-md); /* 圆角 */
  overflow: hidden; /* 隐藏溢出 */
  transition: box-shadow 0.3s ease, border-color 0.3s ease; /* 过渡 */
}

.faq-item:hover {
  box-shadow: 0 8px 24px rgba(230, 145, 50, 0.12); /* 悬停阴影 */
}

.faq-item[open] {
  border-color: var(--brand); /* 展开时高亮边框 */
}

.faq-item summary {
  padding: 20px 60px 20px 24px; /* 内边距 */
  cursor: pointer; /* 指针 */
  font-weight: 700; /* 字重 */
  color: var(--brand-dark); /* 颜色 */
  user-select: none; /* 禁止选中 */
  list-style: none; /* 去除默认标记 */
  position: relative; /* 定位参考 */
  transition: color 0.2s ease, background-color 0.2s ease; /* 过渡 */
  font-size: 1.05rem; /* 字号 */
}

.faq-item summary::-webkit-details-marker {
  display: none; /* 隐藏默认三角标记 */
}

.faq-item summary:hover {
  background: #fffbf7; /* 悬停背景 */
}

.faq-item summary::after {
  content: "+"; /* 展开符号 */
  position: absolute; /* 绝对定位 */
  right: 24px; /* 右侧偏移 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直对齐 */
  font-size: 1.8rem; /* 字号 */
  font-weight: 400; /* 字重 */
  color: var(--brand); /* 颜色 */
  transition: transform 0.3s ease; /* 过渡 */
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg); /* 展开时变成“x” */
}

.faq-item[open] summary {
  color: var(--brand); /* 展开时颜色 */
  background: #fff8ef; /* 展开背景 */
  border-bottom: 1px solid var(--line); /* 底部边框 */
}

.faq-item p {
  padding: 20px 24px 24px; /* 内边距 */
  margin: 0; /* 清除外边距 */
  color: var(--ink-soft); /* 文字颜色 */
  line-height: 1.7; /* 行高 */
  font-size: 0.95rem; /* 字号 */
}

/* ========================================
  REVEAL ANIMATION 进入动画
  ======================================== */

.reveal {
  opacity: 0; /* 初始透明 */
  transform: translateY(30px); /* 初始下移 */
  transition: opacity 0.6s ease, transform 0.6s ease; /* 过渡 */
}

.reveal.is-visible {
  opacity: 1; /* 显示 */
  transform: translateY(0); /* 复位 */
}

/* ========================================
  RESPONSIVE DESIGN 响应式适配
  ======================================== */

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr; /* 双列布局 */
    gap: 60px; /* 间距加大 */
  }
  
  .hero-content {
    text-align: left; /* 文案左对齐 */
  }
  
  .hero-highlight {
    margin-left: 0; /* 取消居中偏移 */
  }
  
  .register-grid {
    grid-template-columns: 5fr 7fr; /* 左右比例 */
    gap: 40px; /* 间距 */
  }
  
  .steps-grid {
    grid-template-columns: repeat(2, 1fr); /* 两列 */
    gap: 24px; /* 间距 */
    max-width: 900px; /* 最大宽度 */
  }
  
  .step-card {
    padding: 30px 24px; /* 增大内边距 */
  }
  
  /* Rewards - Desktop Grid */
  .rewards-grid {
    grid-template-columns: repeat(3, 1fr); /* 三列 */
    gap: 28px; /* 间距 */
  }
  
  .reward-card {
    height: 400px; /* 固定高度 */
    min-height: unset; /* 取消最小高度 */
  }
  
  /* Product Features - Desktop Layout */
  .product-video {
    max-width: 900px; /* 视频最大宽度 */
    margin: 0 auto; /* 居中 */
  }
  
  .product-features {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 2x2网格 */
    gap: 24px; /* 间距 */
  }
}

@media (max-width: 767px) {
  .campaign-hero {
    padding: 24px 0 32px; /* 缩小首屏间距 */
  }
  
  .hero-grid {
    gap: 24px; /* 缩小网格间距 */
  }
  
  .product-showcase {
    max-width: 320px; /* 缩小图片尺寸 */
  }
  
  .campaign-badge {
    font-size: 0.85rem; /* 缩小徽标字号 */
    padding: 6px 16px; /* 缩小内边距 */
    margin-bottom: 16px; /* 缩小间距 */
  }
  
  .campaign-title {
    font-size: 1.8rem; /* 缩小标题 */
    margin-bottom: 12px; /* 缩小间距 */
  }
  
  .campaign-subtitle {
    margin-bottom: 16px; /* 缩小间距 */
  }
  
  .hero-highlight {
    margin-bottom: 16px; /* 缩小间距 */
  }
  
  .btn-hero {
    padding: 14px 28px; /* 缩小按钮 */
    font-size: 1.05rem; /* 缩小字号 */
  }
  
  .hero-note {
    margin-top: 12px; /* 缩小间距 */
    font-size: 0.8rem; /* 缩小字号 */
  }
  
  .highlight-text {
    font-size: 0.9rem; /* 缩小字号 */
    margin: 6px 0; /* 缩小间距 */
  }
  
  .info-highlights {
    gap: 8px; /* 缩小间距 */
  }
  
  .highlight-item {
    padding: 10px 12px; /* 缩小内边距 */
    gap: 8px; /* 缩小间距 */
  }
  
  .highlight-icon {
    font-size: 1.3rem; /* 缩小图标 */
  }
  
  .highlight-text strong {
    font-size: 0.9rem; /* 缩小强调文字 */
  }
  
  .highlight-text span {
    font-size: 0.75rem; /* 缩小说明文字 */
  }

  .campaign-howto,
  .campaign-rewards {
    padding: 32px 0; /* 缩小区块间距 */
  }
  
  .section-head {
    margin-bottom: 24px; /* 缩小标题间距 */
  }
  
  .section-title {
    font-size: 1.5rem; /* 缩小标题字号 */
  }
  
  .steps-grid {
    gap: 14px; /* 缩小卡片间距 */
  }
  
  .step-card {
    padding: 20px; /* 缩小内边距 */
  }
  
  .step-number {
    font-size: 2rem; /* 缩小序号 */
    margin-bottom: 10px; /* 缩小间距 */
  }
  
  .step-card h3 {
    font-size: 1.1rem; /* 缩小标题 */
  }
  
  .step-card p {
    font-size: 0.9rem; /* 缩小正文 */
    margin-bottom: 10px; /* 缩小间距 */
  }
  
  .step-meta {
    font-size: 0.75rem; /* 缩小元信息 */
  }
  
  .info-trigger {
    width: 28px; /* 放大触控区域 */
    height: 28px; /* 放大触控区域 */
  }
  
  /* Mobile: Tooltip positioning - let JS handle horizontal position */
  .info-tooltip {
    max-width: 90vw; /* 限制宽度适配屏幕 */
    /* Remove fixed centering to allow JS positioning */
  }
  
  .info-tooltip.active {
    /* Remove translateX, only keep vertical offset */
    transform: translateY(-12px); /* 保持垂直偏移 */
  }
  
  .info-tooltip-center {
    left: 50%; /* 居中位置（备用） */
  }
  
  /* Rewards - Mobile First */
  .rewards-grid {
    gap: 16px; /* 缩小间距 */
  }
  
  .reward-card {
    aspect-ratio: 1; /* 正方形比例 */
    min-height: 280px; /* 最小高度 */
    height: auto; /* 高度自适应 */
  }
  
  .reward-badge {
    top: 10px; /* 顶部偏移 */
    right: 10px; /* 右侧偏移 */
    padding: 5px 12px; /* 内边距 */
    font-size: 0.8rem; /* 字号 */
  }
  
  .reward-overlay {
    padding: 60px 16px 20px; /* 缩小内边距 */
  }
  
  .reward-title {
    font-size: 1.15rem; /* 缩小标题 */
  }
  
  .reward-product {
    font-size: 0.88rem; /* 缩小说明 */
  }
  
  .reward-value {
    font-size: 0.85rem; /* 缩小标签 */
    padding: 5px 14px; /* 缩小内边距 */
  }
  
  .reward-value strong {
    font-size: 1rem; /* 缩小强调 */
  }
  
  .rewards-bonus {
    padding: 16px; /* 缩小内边距 */
    margin-top: 20px; /* 缩小间距 */
  }
  
  .rewards-bonus p {
    font-size: 0.88rem; /* 缩小字号 */
  }
  
  .campaign-register {
    padding: 32px 0; /* 缩小间距 */
  }
  
  .register-grid {
    gap: 28px; /* 缩小间距 */
  }
  
  .register-info h2 {
    margin-bottom: 12px; /* 缩小间距 */
  }
  
  .register-info .lead {
    font-size: 1rem; /* 缩小字号 */
    margin-bottom: 20px; /* 缩小间距 */
  }

  .campaign-form {
    padding: 24px; /* 缩小内边距 */
  }

  .form-header {
    padding-bottom: 16px; /* 缩小底部间距 */
  }

  .form-header h3 {
    font-size: 1.3rem; /* 缩小标题 */
  }

  .faq-item summary {
    padding: 16px 50px 16px 18px; /* 缩小内边距 */
    font-size: 0.95rem; /* 缩小字号 */
  }

  .faq-item summary::after {
    right: 18px; /* 缩小右偏移 */
    font-size: 1.5rem; /* 缩小符号 */
  }

  .faq-item p {
    padding: 16px 18px 20px; /* 缩小内边距 */
    font-size: 0.9rem; /* 缩小字号 */
  }

  .mobile-action {
    display: grid; /* 显示移动端底部操作区 */
  }
}

@media (min-width: 768px) {
  .mobile-action {
    display: none; /* 桌面端隐藏移动操作区 */
  }
}

/* ========================================
  BOOKMARK REMINDER OVERLAY 书签提醒遮罩
  ======================================== */

.bookmark-overlay {
  position: fixed; /* 覆盖全屏 */
  top: 0; /* 顶部贴齐 */
  left: 0; /* 左侧贴齐 */
  right: 0; /* 右侧贴齐 */
  bottom: 0; /* 底部贴齐 */
  background: rgba(0, 0, 0, 0.6); /* 半透明遮罩 */
  backdrop-filter: blur(4px); /* 背景模糊 */
  z-index: 10002; /* 高层级 */
  display: flex; /* 弹性布局 */
  align-items: flex-end; /* 移动端底部对齐 */
  justify-content: center; /* 水平居中 */
  opacity: 0; /* 默认隐藏 */
  pointer-events: none; /* 默认不可交互 */
  transition: opacity 0.3s ease; /* 过渡 */
}

.bookmark-overlay.show {
  opacity: 1; /* 显示 */
  pointer-events: auto; /* 可交互 */
}

.bookmark-card {
  background: linear-gradient(135deg, #fff 0%, #fffbf7 100%); /* 卡片背景 */
  border-radius: 24px 24px 0 0; /* 上方圆角 */
  padding: 32px 24px 40px; /* 内边距 */
  width: 100%; /* 宽度 */
  max-width: 500px; /* 最大宽度 */
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25); /* 上方阴影 */
  transform: translateY(100%); /* 初始在屏幕下方 */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 动画曲线 */
  position: relative; /* 定位参考 */
  text-align: center; /* 文字居中 */
}

.bookmark-overlay.show .bookmark-card {
  transform: translateY(0); /* 显示时上移 */
}

.bookmark-icon {
  font-size: 3.5rem; /* 图标大小 */
  margin-bottom: 16px; /* 底部间距 */
  animation: bounce-bookmark 1s ease-in-out 0.5s; /* 弹跳动画 */
  display: inline-block; /* 便于动画 */
}

@keyframes bounce-bookmark {
  0%, 100% { transform: translateY(0); } /* 起止位置 */
  25% { transform: translateY(-12px); } /* 上跳 */
  50% { transform: translateY(0); } /* 回落 */
  75% { transform: translateY(-6px); } /* 小幅上跳 */
}

.bookmark-title {
  font-size: 1.5rem; /* 标题字号 */
  color: var(--brand-dark); /* 标题颜色 */
  margin: 0 0 12px; /* 外边距 */
  font-weight: 900; /* 字重 */
  letter-spacing: -0.02em; /* 字距 */
}

.bookmark-text {
  font-size: 1rem; /* 字号 */
  color: var(--ink-soft); /* 颜色 */
  line-height: 1.6; /* 行高 */
  margin: 0 0 20px; /* 外边距 */
  max-width: 360px; /* 最大宽度 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
}

.bookmark-hint {
  font-size: 0.85rem; /* 字号 */
  color: var(--brand); /* 颜色 */
  font-weight: 600; /* 字重 */
  margin: 0; /* 清除外边距 */
  padding: 8px 16px; /* 内边距 */
  background: rgba(230, 145, 50, 0.1); /* 背景 */
  border-radius: 20px; /* 圆角 */
  display: inline-block; /* 行内块 */
  animation: pulse-hint 2s ease-in-out infinite 1s; /* 呼吸动画 */
}

@keyframes pulse-hint {
  0%, 100% { transform: scale(1); opacity: 1; } /* 起止状态 */
  50% { transform: scale(1.05); opacity: 0.8; } /* 中间放大+降低透明 */
}

/* Desktop styles 桌面端书签弹层 */
@media (min-width: 768px) {
  .bookmark-overlay {
    align-items: center; /* 垂直居中 */
  }
  
  .bookmark-card {
    border-radius: 24px; /* 四角圆角 */
    padding: 40px 48px; /* 内边距 */
    max-width: 480px; /* 最大宽度 */
    transform: scale(0.9); /* 初始缩小 */
    opacity: 0; /* 初始透明 */
  }
  
  .bookmark-overlay.show .bookmark-card {
    transform: scale(1); /* 显示时放大 */
    opacity: 1; /* 显示 */
  }
  
  .bookmark-icon {
    font-size: 4rem; /* 图标变大 */
    margin-bottom: 20px; /* 间距 */
  }
  
  .bookmark-title {
    font-size: 1.8rem; /* 标题变大 */
    margin-bottom: 16px; /* 间距 */
  }
  
  .bookmark-text {
    font-size: 1.05rem; /* 正文字号 */
  }
}