/* =========================================================
   星心体系 · 3 天峰会落地页 — 样式
   结构：1 设计变量 → 2 基础重置 → 3 排版 → 4 元件 → 5 区块 → 6 手机版
   配色来自设计稿：深蓝夜空底 + 金色强调色
   ========================================================= */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 背景层次：深蓝主底 → 次底（区块交替）→ 卡片面 */
  --c-bg:        #0D1226;
  --c-bg-alt:    #111731;
  --c-surface:   #141A33;
  --c-surface-deep: #0D1226;

  /* 边框：区块分隔线（浅）/ 卡片边框（稍亮） */
  --c-line:      #262D4A;
  --c-line-card: #2E3658;

  /* 文字层次：主文字（米白）→ 次文字 → 弱文字（标签/说明） */
  --c-ink:       #F2EDE1;
  --c-ink-bright:#E2DCCD;
  --c-ink-soft:  #C9C2B2;
  --c-ink-faint: #B5AE9F;

  /* 强调色：金（默认）。设计稿另外给了紫 #C9A0E8、蓝 #8FC9E8 两个备选，
     想换季/换主题时，把下面这两行换掉就好，其他全部不用动 */
  --c-accent:     #E3BF78;
  --c-accent-ink: #0D1226;

  /* 字体：标题用衬线（有仪式感），正文用无衬线 */
  --font-serif: "Noto Serif SC", serif;
  --font-sans:  "Noto Sans SC", -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;

  --wrap: 1160px;
  --wrap-narrow: 820px;
  --gutter: 24px;
  --section-y: clamp(56px, 9vw, 88px);
  --radius: 16px;
  --radius-sm: 10px;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* 留位置给底部固定 CTA，滑出来时不挡住页脚 */
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: #F3D9A4; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ---------- 3. 排版 ---------- */
h1, h2, h3 { margin: 0; font-family: var(--font-serif); line-height: 1.3; }
h1 { font-size: clamp(44px, 8vw, 96px); font-weight: 900; line-height: 1.1; letter-spacing: 6px; }
h1.nowrap { white-space: nowrap; font-size: clamp(26px, 7.4vw, 72px); letter-spacing: clamp(1px, 0.6vw, 5px); }
h2 { font-size: clamp(28px, 4.6vw, 50px); font-weight: 700; }
h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; }
p  { margin: 0; }
.eyebrow { color: var(--c-accent); letter-spacing: 3px; font-size: 14px; }
.sub { color: var(--c-ink-soft); max-width: 680px; }

/* ---------- 4. 元件 ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
section { padding-block: var(--section-y); }
section.alt { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }

.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-center { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* 按钮：金色光晕（::before 那层会缓缓呼吸），鼠标移上去放大一点、光晕变亮，移开恢复原样 */
.btn {
  position: relative; isolation: isolate;
  display: inline-block; text-decoration: none; text-align: center; cursor: pointer;
  /* 扫光：一道白光斜着从左扫到右（背景第一层），底下才是金色底 */
  background:
    linear-gradient(110deg, transparent 42%, rgb(255 255 255 / 55%) 50%, transparent 58%) no-repeat,
    var(--c-accent);
  background-size: 250% 100%, auto;
  background-position: 100% 0, 0 0;
  animation: btn-shine 3.4s ease-in-out infinite;
  color: var(--c-accent-ink);
  font-weight: 700; font-size: 1.0625rem; line-height: 1;
  padding: 16px 40px; border: 0; border-radius: 999px;
  box-shadow: 0 0 14px 2px rgb(227 191 120 / 45%), 0 0 32px rgb(227 191 120 / 22%);
  transition: transform .25s ease, box-shadow .25s ease, opacity .15s ease;
}
@keyframes btn-shine {
  0%, 55% { background-position: 100% 0, 0 0; }
  85%, 100% { background-position: 0% 0, 0 0; }
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px 6px rgb(227 191 120 / 50%), 0 0 48px 10px rgb(227 191 120 / 25%);
  opacity: 0; animation: btn-glow 2.8s ease-in-out infinite;
}
@keyframes btn-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.btn:hover {
  transform: scale(1.06); color: var(--c-accent-ink);
  box-shadow: 0 0 22px 5px rgb(227 191 120 / 70%), 0 0 54px 8px rgb(227 191 120 / 38%);
}
.btn:active { transform: scale(1.02); }
/* 效果 10：按钮文字后面的箭头，轻轻往右推，引导点击 */
.btn::after {
  content: "→"; display: inline-block; margin-left: .2em;
  font-weight: 900; animation: btn-arrow 1.8s ease-in-out infinite;
}
@keyframes btn-arrow { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
.btn:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.btn-sm { padding: 12px 26px; font-size: 1rem; }

.pill {
  display: inline-block; border: 1px solid var(--c-accent); color: var(--c-accent);
  background: rgb(13 18 38 / 88%);
  padding: 4px 16px; border-radius: 999px; font-size: 14px; letter-spacing: 2px; font-weight: 700;
  box-shadow: 0 0 12px 1px rgb(227 191 120 / 45%), 0 0 28px rgb(227 191 120 / 25%);
  animation: pill-glow 2.6s ease-in-out infinite;
}
@keyframes pill-glow {
  0%, 100% { box-shadow: 0 0 12px 1px rgb(227 191 120 / 45%), 0 0 28px rgb(227 191 120 / 25%); }
  50%      { box-shadow: 0 0 18px 3px rgb(227 191 120 / 65%), 0 0 40px rgb(227 191 120 / 40%); }
}
@media (prefers-reduced-motion: reduce) {
  .pill { animation: none; }
}
.tag {
  display: inline-block; border: 1px solid var(--c-line-card); background: var(--c-surface-deep);
  border-radius: 8px; padding: 6px 12px; font-size: 15px;
}
.tag-pill {
  display: inline-block; border: 1px solid var(--c-line-card); background: var(--c-surface-deep);
  border-radius: 999px; padding: 10px 20px;
}
.tag-strong {
  display: inline-block; border: 1px solid var(--c-accent); color: var(--c-accent);
  border-radius: 8px; padding: 6px 14px; font-weight: 700;
}

.card { background: var(--c-surface); border: 1px solid var(--c-line-card); border-radius: var(--radius); padding: 28px; }
.card-accent { border-color: var(--c-accent); }

/* 卡片悬停：浮起 + 右下方滑出金色错位框（跟「为什么一定要来」六卡同一套语言）
   --frame-fill 要等于卡片所在区块的底色，才能「挖空」出细框；.alt 区块底色不同，另外设 */
:root { --frame-fill: var(--c-bg); }
section.alt { --frame-fill: var(--c-bg-alt); }
.card, .info-card, .testi-card {
  box-shadow: 0 0 0 -1px var(--frame-fill), 0 0 0 0 rgb(227 191 120 / 0%);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover, .info-card:hover, .testi-card:hover {
  transform: translateY(-6px);
  border-color: rgb(227 191 120 / 55%);
  box-shadow: 8px 8px 0 -1px var(--frame-fill), 8px 8px 0 0 rgb(227 191 120 / 50%), 0 22px 40px rgb(0 0 0 / 35%);
}

/* 依序浮现：区块进场（.reveal.is-in）时，[data-stagger] 里的子元素一个接一个浮上来
   用独立的 translate 属性，不会跟卡片本身的 transform（倾斜/悬停）打架 */
.reveal.is-in [data-stagger] > * {
  animation: stagger-in .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
@keyframes stagger-in {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

.grid { display: flex; flex-wrap: wrap; gap: 16px; }
.grid > * { flex: 1 1 280px; }

/* 信息小卡（日期/地点/时间） */
.info-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.info-card {
  flex: 1 1 220px; max-width: 290px; border: 1px solid var(--c-line-card); border-radius: 12px;
  padding: 14px 18px; background: var(--c-surface);
}
.info-card .label { font-size: 13px; color: var(--c-ink-faint); letter-spacing: 1px; margin-bottom: 4px; }
.info-card .value { font-weight: 700; }
.info-card .value small { font-weight: 400; color: var(--c-ink-soft); font-size: 15px; display: block; }

/* 倒数计时 */
.countdown { display: flex; gap: 12px; }
.countdown .unit {
  min-width: 76px; border: 1px solid var(--c-line-card); border-radius: 10px;
  padding: 8px 10px; background: var(--c-surface); text-align: center;
}
.countdown .num { font-family: var(--font-serif); font-size: 32px; font-weight: 900; color: var(--c-accent); line-height: 1.2; }
.countdown .unit-label { font-size: 13px; color: var(--c-ink-faint); }

/* 报名席位进度条 */
.seats { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 6px; }
.seats-row { display: flex; justify-content: space-between; font-size: 15px; color: var(--c-ink-soft); }
.seats-row strong { color: var(--c-accent); font-size: 18px; }
.seats-track { height: 10px; background: var(--c-line); border-radius: 999px; overflow: hidden; }
/* 进度条：滑到眼前才从 0 填满（script.js 控制宽度），上面一道流光来回走，末端微微发光 */
.seats-fill {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #C99A4E 0%, var(--c-accent) 35%, #FBEBC4 50%, var(--c-accent) 65%, #C99A4E 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 10px rgb(227 191 120 / 55%);
  animation: seats-shimmer 2.6s linear infinite;
  transition: width 1.6s cubic-bezier(.2,.8,.2,1);
}
@keyframes seats-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* 统计数字条 */
.stat-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 28px; text-align: center; }
.stat-grid > div { flex: 1 1 200px; }
.stat-num { font-family: var(--font-serif); font-size: 42px; font-weight: 900; color: var(--c-accent); font-variant-numeric: tabular-nums; }
/* 数字跑完那一下的弹出（script.js 加 .is-pop） */
.stat-num.is-pop { animation: stat-pop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes stat-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); text-shadow: 0 0 22px rgb(227 191 120 / 70%); }
  100% { transform: scale(1); }
}
.stat-label { color: var(--c-ink-soft); font-size: 15px; }

/* 痛点问题卡（米白底，跟整体深色反差） */
.pain-box {
  max-width: 620px; width: 100%; margin-inline: auto; background: var(--c-ink); color: var(--c-bg);
  border-radius: var(--radius); padding: 22px 26px; display: flex; flex-direction: column; gap: 12px;
}
.pain-box .pain-title { font-weight: 700; font-size: 17px; }
.pain-box .pain-item { display: flex; gap: 10px; align-items: flex-start; }
.pain-box .pain-item svg { flex: none; margin-top: 4px; }

.callout {
  max-width: 680px; margin-inline: auto; border: 1px solid var(--c-accent); border-radius: var(--radius);
  padding: 28px; text-align: center; display: flex; flex-direction: column; gap: 10px;
}

/* 讲师区 */
.speaker { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.speaker-photo {
  flex: 1 1 320px; min-width: 0; /* 不让图片原始宽度撑开版面（手机会出现右侧留白） */
  aspect-ratio: 4 / 5; max-width: 420px; border-radius: var(--radius);
  object-fit: cover; background: var(--c-surface-deep);
}
.speaker-photo.placeholder {
  border: 1px dashed #4A5280; display: flex; align-items: center; justify-content: center; color: var(--c-ink-faint);
}
.speaker-info { flex: 999 1 420px; display: flex; flex-direction: column; gap: 16px; }
.credential-label { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--c-accent); margin: 2px 0 -6px; }

/* 荣誉现场照片 */
.award-gallery { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.award-gallery figure { margin: 0; flex: 1 1 220px; max-width: 280px; }
.award-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--c-line-card); }
.award-gallery figcaption { margin-top: 8px; font-size: 13px; color: var(--c-ink-faint); text-align: center; }

/* 头衔跑马灯：两排反方向无限滚动，两侧淡出，鼠标移上去暂停 */
.ticker {
  margin-top: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; gap: 10px;
  border-block: 1px solid rgb(227 191 120 / 22%); padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-row { overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker-scroll 42s linear infinite; }
.ticker-row--rev .ticker-track { animation-direction: reverse; animation-duration: 48s; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; flex: none; }
.ticker-set span { display: flex; align-items: center; white-space: nowrap; }
.ticker-set span::after { content: "✦"; margin-inline: 26px; font-size: .7em; color: var(--c-accent); opacity: .7; }
.ticker-row:first-child .ticker-set span {
  font-family: var(--font-serif); font-weight: 700; font-size: clamp(17px, 2vw, 21px); letter-spacing: 1px;
  background: linear-gradient(100deg, #F6E3B4, #E3BF78 50%, #C99A4E);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ticker-row:first-child .ticker-set span::after { -webkit-text-fill-color: var(--c-accent); }
.ticker-row--rev .ticker-set span { font-size: 14px; letter-spacing: 2px; color: var(--c-ink-faint); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 议程卡 */
.agenda-list { display: flex; flex-wrap: wrap; gap: 20px; }
.agenda-card { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.agenda-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.agenda-day { font-family: var(--font-serif); font-size: 34px; font-weight: 900; color: var(--c-accent); }
.agenda-date { color: var(--c-ink-faint); font-size: 14px; }
.agenda-card h3 small { display: block; font-weight: 500; font-size: 16px; color: var(--c-ink-soft); margin-top: 4px; }
/* 精简版重点条列：只列最打动人的几件事，不铺开细节 */
.agenda-points { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.agenda-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--c-ink-bright); line-height: 1.5; }
.agenda-points li::before {
  content: "✓"; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--c-accent); color: var(--c-accent-ink);
  font-size: 12px; font-weight: 900; line-height: 20px; text-align: center;
}

/* 带走清单（四格） */
/* 带走清单：中心转轮图，桌机是真的围绕中心摆放，手机收成直向清单 */
.wheel {
  /* 扁长方形 + 上排卡片贴顶、下排卡片贴底（--ty），区块上下不会空出一大块 */
  position: relative; width: 100%; max-width: 760px; aspect-ratio: 760 / 560;
  margin: 40px auto 0;
}
.wheel-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* 虚线持续往中心「三天好礼」流动 */
.wheel-lines line {
  stroke: var(--c-accent); stroke-opacity: .5; stroke-width: .5; stroke-dasharray: 1.6 1.6;
  animation: wheel-flow 1.6s linear infinite;
}
@keyframes wheel-flow { to { stroke-dashoffset: 3.2; } }

.wheel-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-bg); border: 1px solid var(--c-line-card);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: 0 0 0 6px var(--c-bg);
}

.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; width: 32%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2f12, var(--c-bg) 72%);
  border: 2px solid var(--c-accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  box-shadow: 0 0 44px rgb(227 191 120 / 35%), inset 0 0 22px rgb(227 191 120 / 15%);
  animation: hub-breath 4s ease-in-out infinite;
}
/* 圆心轻轻呼吸：用独立 scale 属性，不影响置中用的 transform */
@keyframes hub-breath {
  0%, 100% { scale: 1;    box-shadow: 0 0 44px rgb(227 191 120 / 35%), inset 0 0 22px rgb(227 191 120 / 15%); }
  50%      { scale: 1.05; box-shadow: 0 0 70px rgb(227 191 120 / 55%), inset 0 0 28px rgb(227 191 120 / 25%); }
}
.wheel-hub-icon { color: var(--c-accent); font-size: clamp(18px, 3vw, 26px); }
.wheel-hub-title { font-family: var(--font-serif); font-weight: 900; font-size: clamp(14px, 2vw, 19px); color: var(--c-ink); line-height: 1.3; }

.wheel-card {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, var(--ty, -50%));
  z-index: 2; width: clamp(170px, 25vw, 250px);
  background: var(--c-surface); border: 1px solid var(--c-line-card); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: 0 14px 30px rgb(0 0 0 / 35%);
}
.wheel-tag {
  display: inline-block; background: var(--c-surface-deep); border: 1px solid var(--c-line-card);
  color: var(--c-accent); font-size: 12px; font-weight: 700; letter-spacing: 1px;
  border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.wheel-card h3 { font-size: 16px; margin: 0 0 4px; line-height: 1.35; }
.wheel-card p { margin: 0; font-size: 14px; color: var(--c-ink-soft); line-height: 1.5; }

@media (max-width: 760px) {
  .wheel { aspect-ratio: auto; max-width: 420px; margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
  .wheel-lines, .wheel-node { display: none; }
  .wheel-hub {
    position: static; transform: none; width: auto; aspect-ratio: auto; flex-direction: row; gap: 8px;
    border-radius: 999px; padding: 10px 22px; align-self: center; background: none; box-shadow: none;
  }
  .wheel-card { position: static; transform: none; width: 100%; }
}

/* 学员为什么一定要来：六张质感卡
   参考稿是彩色倾斜卡 + 粗黑投影；这里换成低奢版：
   深浅质感交错（象牙/午夜/丝绒/香槟/珍珠/黑曜）、极轻微倾斜、金色细线错位框代替粗投影 */
.why {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgb(227 191 120 / 10%), transparent 70%),
    #0A0E1E;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
/* 呼应参考稿的方格底：金色极细格线，往四周淡出 */
.why::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(227 191 120 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(227 191 120 / 6%) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 85%);
}
.why > .wrap { position: relative; }
.why-head { gap: 6px; }
.why-title-accent {
  font-family: var(--font-serif); font-weight: 900; font-style: italic;
  font-size: clamp(26px, 4.4vw, 46px); line-height: 1.25; letter-spacing: 2px;
  background: linear-gradient(100deg, #F6E3B4 0%, #E3BF78 45%, #B98A3E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.why-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 40px; max-width: 960px; width: 100%; margin: 40px auto 0;
}

.why-card {
  /* 每种质感只改这几个变量 */
  --why-bg: var(--c-surface);
  --why-ink: var(--c-ink);
  --why-em: var(--c-accent);
  --why-meta: var(--c-ink-faint);
  --why-border: var(--c-line-card);
  --why-frame: rgb(227 191 120 / 45%);

  --why-off: 9px;

  position: relative;
  min-height: 176px; padding: 26px 30px 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  background: var(--why-bg); color: var(--why-ink);
  border: 1px solid var(--why-border); border-radius: var(--radius);
  /* 错位金线框（代替参考稿的粗黑投影）：底色那层往内缩 1px，露出下面那层的金边，只出现在卡片外右下方 */
  box-shadow:
    var(--why-off) var(--why-off) 0 -1px #0A0E1E,
    var(--why-off) var(--why-off) 0 0 var(--why-frame),
    0 18px 40px rgb(0 0 0 / 35%);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .35s ease, box-shadow .35s ease;
}
.why-card:nth-child(odd)  { --tilt: -1deg; }
.why-card:nth-child(even) { --tilt: .8deg; }
.why-card:hover { --why-off: 5px; transform: rotate(0deg) translateY(-4px); }

.why-meta { display: flex; align-items: center; gap: 12px; color: var(--why-meta); }
.why-glyph {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid currentColor; color: var(--why-em);
  display: flex; align-items: center; justify-content: center;
  font-family: "Segoe UI Symbol", "Apple Symbols", var(--font-serif); font-size: 17px; line-height: 1;
  font-variant-emoji: text;
}
.why-rule { width: 30px; height: 1px; background: currentColor; opacity: .7; }
.why-num { font-size: 13px; letter-spacing: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }

.why-card p {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(18px, 2vw, 21px); line-height: 1.6;
}
.why-card p strong { color: var(--why-em); font-weight: 900; }

/* 六种质感 */
.why-card--ivory {
  --why-bg: linear-gradient(150deg, #F7F2E7, #EDE5D3);
  --why-ink: #1A1F36; --why-em: #8A5A12; --why-meta: #8C8370; --why-border: transparent;
}
.why-card--midnight {
  --why-bg: linear-gradient(150deg, #18203F, #10152C);
  --why-border: rgb(227 191 120 / 55%);
}
.why-card--velvet {
  --why-bg: linear-gradient(150deg, #2A2148, #1A1633);
  --why-em: #E3BF78; --why-meta: #A99CC4; --why-border: #3A3060;
}
.why-card--champagne {
  --why-bg: linear-gradient(135deg, #F1D9A2 0%, #E3BF78 48%, #C99A4E 100%);
  --why-ink: #1A1408; --why-em: #5A3606; --why-meta: #6B4D1C; --why-border: transparent;
  --why-frame: rgb(242 237 225 / 35%);
}
.why-card--pearl {
  --why-bg: linear-gradient(150deg, #EFE6DA, #DCCBB7);
  --why-ink: #221B2E; --why-em: #7A4A3A; --why-meta: #8A7A6A; --why-border: transparent;
}
.why-card--onyx {
  --why-bg: linear-gradient(150deg, #0B0D16, #05060B);
  --why-border: #2A2A30; --why-meta: #8E8676;
}

@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; gap: 26px; max-width: 460px; margin-top: 28px; }
  .why-card { --why-off: 6px; min-height: 0; padding: 22px 22px 24px; }
  .why-card:nth-child(odd)  { --tilt: -.6deg; }
  .why-card:nth-child(even) { --tilt: .6deg; }
}
@media (prefers-reduced-motion: reduce) {
  .why-card { transition: none; }
}

/* 门票卡 */
.price-card {
  max-width: 560px; width: 100%; margin-inline: auto; background: var(--c-surface); border: 2px solid var(--c-accent);
  border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.price-card .price-head { text-align: center; display: flex; flex-direction: column; gap: 4px; }
/* 原价删除线：区块进场时从左往右「划掉」 */
.price-strike { position: relative; align-self: center; color: var(--c-ink-faint); font-size: 18px; }
.price-strike::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 2px;
  background: #E07A6A; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.6,0,.2,1) .5s;
}
.reveal.is-in .price-strike::after { transform: scaleX(1); }
.price-early { font-size: 15px; color: var(--c-accent); font-weight: 700; }
/* 现价：删除线划完后闪一下金光，之后留一点余光 */
.price-now {
  font-family: var(--font-serif); font-size: 64px; font-weight: 900; color: var(--c-accent); line-height: 1.1;
  text-shadow: 0 0 14px rgb(227 191 120 / 35%);
}
.reveal.is-in .price-now { animation: price-flash 1.3s ease-out 1.1s both; }
@keyframes price-flash {
  0%   { color: var(--c-accent); text-shadow: 0 0 14px rgb(227 191 120 / 35%); transform: scale(1); }
  25%  { color: #FFF4D6; text-shadow: 0 0 26px rgb(227 191 120 / 100%), 0 0 60px rgb(227 191 120 / 60%); transform: scale(1.08); }
  100% { color: var(--c-accent); text-shadow: 0 0 14px rgb(227 191 120 / 35%); transform: scale(1); }
}
.price-deadline { font-size: 15px; color: var(--c-ink-bright); }
.price-card ul { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--c-ink-bright); padding-left: 20px; list-style: disc; }
.price-note { text-align: center; font-size: 14px; color: var(--c-ink-faint); }

/* 见证 */
.testimonial { margin: 0; background: var(--c-bg); border: 1px solid var(--c-line-card); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 300px; }
.testimonial blockquote { margin: 0; color: var(--c-ink-bright); }
.testimonial figcaption { color: var(--c-ink-faint); font-size: 15px; }
.testimonial.placeholder {
  background: var(--c-bg); border: 1px dashed #4A5280; align-items: center; justify-content: center;
  color: var(--c-ink-faint); min-height: 180px; text-align: center;
}

/* 见证卡轮播：统一大小，整排往左无限循环滑动（视觉上是「向右边」出现新卡，轨道本身往左走） */
.testi-carousel {
  width: 100%; overflow: hidden;
  padding-block: 8px 18px; /* 留位置给悬停时浮起 + 金色错位框，不被裁掉 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.testi-track {
  display: flex; gap: 20px; width: max-content;
  animation: testi-scroll 40s linear infinite;
}
.testi-carousel:hover .testi-track,
.testi-carousel:focus-within .testi-track { animation-play-state: paused; }
@keyframes testi-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testi-carousel { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .testi-track { animation: none; flex-wrap: wrap; width: 100%; }
  .testi-dup { display: none !important; }
}

.testi-card {
  flex: 0 0 320px; width: 320px; height: 268px; box-sizing: border-box;
  background: var(--c-surface); border: 1px solid var(--c-line-card); border-radius: var(--radius);
  padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 14px;
}
.testi-person { display: flex; align-items: center; gap: 10px; }
.testi-person strong { display: block; font-size: 16px; }
.testi-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--c-accent); color: var(--c-accent-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testi-role { display: block; font-size: 13px; color: var(--c-ink-faint); }
.testi-text {
  margin: 0; flex: 1; color: var(--c-ink-bright); font-size: 15px; line-height: 1.6;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
/* 内容本来就短、没有「查看完整见证」按钮的卡，不截断，字体稍微放大一点点平衡留白 */
.testi-text--full { -webkit-line-clamp: unset; font-size: 15.5px; }
.testi-more {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-accent); font-weight: 700; font-size: 14px; font-family: inherit;
  text-shadow: 0 0 10px rgb(227 191 120 / 45%);
  transform-origin: left center; transition: transform .25s ease, text-shadow .25s ease, color .25s ease;
}
.testi-more:hover { color: #F3D9A4; transform: scale(1.08); text-shadow: 0 0 14px rgb(227 191 120 / 85%); }

/* 见证全文弹窗 */
.testi-dialog {
  max-width: 560px; width: calc(100% - 48px); padding: 0; border: 1px solid var(--c-line-card);
  border-radius: var(--radius); background: var(--c-surface); color: var(--c-ink);
}
.testi-dialog::backdrop { background: rgb(13 18 38 / 70%); backdrop-filter: blur(2px); }
.testi-dialog-inner { position: relative; padding: 30px; max-height: 76vh; overflow-y: auto; }
.testi-dialog-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--c-line-card); background: var(--c-surface-deep); color: var(--c-ink-soft);
  font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 0 10px rgb(227 191 120 / 25%);
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.testi-dialog-close:hover {
  color: var(--c-ink); border-color: var(--c-accent); transform: scale(1.1);
  box-shadow: 0 0 16px 3px rgb(227 191 120 / 55%);
}
[data-dialog-body] p { margin: 0; }

@media (max-width: 480px) {
  .testi-card { width: 280px; flex-basis: 280px; height: 300px; }
}

/* 见证影片卡 */
.testimonial-video {
  margin: 0; flex: 1 1 300px; background: var(--c-bg); border: 1px solid var(--c-line-card);
  border-radius: var(--radius); overflow: hidden;
}
.testimonial-video video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.testimonial-video figcaption { padding: 14px 18px; color: var(--c-ink-faint); font-size: 15px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-list details { background: var(--c-surface); border: 1px solid var(--c-line-card); border-radius: 12px; padding: 18px 22px; }
.faq-list summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list p { margin: 10px 0 0; color: var(--c-ink-soft); }

/* 顶部公告条 / 页首 */
.announce {
  display: block; background: var(--c-accent); color: var(--c-accent-ink);
  text-align: center; font-weight: 700; font-size: 15px; padding: 10px 16px;
}
.site-header { border-bottom: 1px solid var(--c-line); }
.site-header .wrap { padding-block: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 700; font-size: 19px; letter-spacing: 1px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }
.site-nav a { color: var(--c-ink-soft); }

/* Hero：人像照片整个打满宽度，ATF 是一体的，不留两侧素色空白 */
/* 顶部 0：人像图贴齐页首；底部跟所有区块一样用 --section-y */
.hero { position: relative; padding-block: 0 var(--section-y); background: var(--c-bg); }

/* 用固定长宽比代替「vw 高度」：这个比例比照片原本的比例更「矮」，
   所以不管视窗多宽，裁切点都固定在同一个位置（胸口上方），手机桌机完全一致 */
.hero-banner { position: relative; width: 100%; aspect-ratio: 1024 / 320; overflow: hidden; }
.hero-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.hero-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, transparent 62%, var(--c-bg) 100%);
}

/* 效果 9：Hero 星星闪烁。星星层在照片之上、底部渐层之下，所以越往下越淡 */
.hero-stars { position: absolute; inset: 0; pointer-events: none; }
.hero-stars span {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFDF5 0 22%, rgb(246 227 180 / 70%) 40%, transparent 72%);
  opacity: .2;
  animation: star-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
}
/* 大颗的：中心亮点 + 十字光芒 */
.hero-stars span.big { background: radial-gradient(circle, #FFFDF5 0 10%, rgb(246 227 180 / 55%) 22%, transparent 45%); }
.hero-stars span.big::before,
.hero-stars span.big::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: linear-gradient(90deg, transparent, #FFF6DD, transparent);
  width: 260%; height: 1px;
}
.hero-stars span.big::after { rotate: 90deg; }
@keyframes star-twinkle {
  0%, 100% { opacity: .15; scale: .6; }
  50%      { opacity: 1;   scale: 1;  filter: drop-shadow(0 0 4px rgb(246 227 180 / 90%)); }
}

.hero-copy { position: relative; z-index: 2; padding-top: 8px; }

/* 页脚 */
.footer { border-top: 1px solid var(--c-line); padding: 28px 24px; text-align: center; color: var(--c-ink-faint); font-size: 14px; }
.footer .wrap { display: flex; flex-direction: column; gap: 6px; }

/* 底部固定 CTA：滑过 hero 后才浮出来，一直贴在画面底部 */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: #0A0E1E; border-top: 1px solid var(--c-accent); padding: 12px 24px;
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.is-on { transform: none; }
.sticky-cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 0; }
.sticky-cta .price-tag { font-size: 15px; }
.sticky-cta .price-tag strong { color: var(--c-accent); }

/* 进场动画 */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .btn, .testi-more, .testi-dialog-close, .card, .info-card, .testi-card, .seats-fill, .price-strike::after { transition: none; }
  .btn, .btn::before, .btn::after, .hero-stars span, .wheel-lines line, .wheel-hub, .seats-fill, .ticker-track,
  .reveal.is-in [data-stagger] > *, .reveal.is-in .price-now, .stat-num.is-pop { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 6. 手机版 ---------- */
@media (max-width: 768px) {
  :root { --gutter: 18px; }
  .card, .price-card { padding: 22px; }
  .countdown .unit { min-width: 64px; }
  .sticky-cta .wrap { justify-content: center; text-align: center; }

  /* 页首：手机上品牌和导航都置中，跟下面的 hero 对齐 */
  .site-header .wrap { flex-direction: column; justify-content: center; gap: 8px; }
  .site-nav { justify-content: center; }

  /* 讲师照片：手机上缩小并置中 */
  .speaker { gap: 32px; justify-content: center; }
  .speaker-photo { flex: none; width: 100%; max-width: 300px; margin-inline: auto; }
}