/* ============================================================
   畅途官网 · 首页专属样式层（只被 index.html 引用）
   2026-10-23 重写：首页改为「平台定位 → 信任依据 → 四大能力 →
   课程与 AI 支持 → 实践与成果 → 机构与教师支持 → 行动入口」。
   上一版留下但已不再使用的规则（受众分流、四域矩阵、AI 三卡、
   五步四步、交付三卡、三跳推导长块）已整段删除，不留死代码。
   ============================================================ */

/* ── 1. 标题分级：让每屏不再一样重 ─────────────────────── */
.home .sec-head.sec-lg{margin-bottom:50px;}
.home .sec-head.sec-lg h2{font-size:clamp(28px,3.9vw,44px);letter-spacing:-1px;line-height:1.24;}
.home .sec-head.sec-lg p{font-size:16.5px;max-width:700px;}
/* 导语先给一句判断，再展开做法。短句单独提出来加粗，长句紧跟其后，
   间距压到 8px——两句是一段话，不是两段 */
.home .sec-head.sec-lg p.sec-lead{font-size:21px;font-weight:700;color:var(--ink);
  letter-spacing:-.4px;margin-bottom:0;}
.home .sec-head.sec-lg p.sec-lead + p{margin-top:12px;font-size:15.5px;}

.home .sec-head.sec-sm{margin-bottom:26px;}
.home .sec-head.sec-sm .bar{width:30px;height:4px;margin-bottom:12px;}
.home .sec-head.sec-sm h2{font-size:clamp(20px,2.3vw,25px);letter-spacing:-.2px;}
.home .sec-head.sec-sm h2 small{font-size:10.5px;letter-spacing:1.6px;}
.home .sec-head.sec-sm p{font-size:14px;margin-top:9px;max-width:660px;}

/* ── 2. 首屏 ───────────────────────────────────────────── */
.home .hero-lg{padding:64px 0 54px;}
.home .hero-lg .wrap{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:36px;align-items:center;}
/* 标题第一行 10.2em、第二行 14em（12 字 + 两个逗号），字号上限按第二行算：
   14em ≤ 667px → 46px */
.home .hero-lg h1{font-size:clamp(26px,3.6vw,46px);line-height:1.16;letter-spacing:-1.4px;margin:22px 0 0;}
.home .hero-lg .lead{font-size:16px;max-width:540px;line-height:1.9;}
.home .hero-lg .hero-cta{margin-top:32px;gap:12px;}
/* 三个入口功能等价，视觉也等价：同底色、同宽度，不给某一个加权重。
   做成透明玻璃胶囊（控制层，不是内容层）：42% 白 + 14px 模糊 + 白色边缘高光。
   之前是 74% 白，压在同样浅的首屏上等于三块不透明贴纸，
   光场透不进来，按钮和背景是两个平面。降到 42% 之后底下的蓝光会穿过去。
   高度做到 46px、最小 152px 宽：首屏只有这三个可点的东西，
   40px 在 1440 上像三个标签，撑不起「主行动」的分量。 */
.home .hero-lg .hero-cta .btn{flex:0 0 auto;min-width:152px;min-height:46px;
  font-size:15.5px;font-weight:600;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-color:rgba(255,255,255,.78);color:var(--blue-deep);
  /* 外圈那 1px 淡蓝和卡片用同一个办法：白边框压在浅冰蓝上等于没有边，
     得靠一圈有颜色的描边把按钮从背景里拎出来。 */
  box-shadow:var(--glass-inner),0 0 0 1px rgba(11,99,197,.10),
    0 12px 28px -20px rgba(11,99,197,.55);}
.home .hero-lg .hero-cta .btn:hover{background:rgba(255,255,255,.66);border-color:rgba(11,99,197,.34);
  color:var(--brand-blue);transform:translateY(-2px);
  box-shadow:var(--glass-inner-strong),0 0 0 1px rgba(11,99,197,.18),
    0 18px 36px -18px rgba(11,99,197,.5);}

/* 能力环的成品图四周自带留白，桌面端左右各外扩 5%，让环的视觉直径
   与原来那版矢量环一致，不会被留白衬小 */
@media (min-width:921px){
  .home .hero-lg .hero-visual{margin:0 -5%;}
}

/* ── 3. 数据条：让数字当主角 ─────────────────────────────
   五项并列，一屏读完：时间 → 纵深 → 机构 → 人数 → 地域。
   内边距与玻璃框在文件后半段（.home .stats-band 那组规则里）。 */
.home .stats-band .stats{grid-template-columns:repeat(5,minmax(0,1fr));}
/* 上限 36px：42px 下「15,000+人次」有 200px 宽，超过等分列的内容宽 160px，
   会把第四列撑宽、五列不再等分。36px 刚好装得下。 */
.home .stats-band .stat b{font-size:clamp(26px,2.9vw,36px);}
.home .stats-band .stat span{font-size:12.5px;margin-top:8px;}

/* ── 4. 四大能力：从「分类目录」变成「培养框架」 ───────── */
/* 四域色按 design-colors.css 的 --domain-* 走，表达力蓝 / 思辨力青 / 学习力琥珀 / 创造力紫。
   卡片区色只上图形（顶条、圆点、hover 描边），文字保持 ink —— 青与琥珀在 11–15px 文字上
   对比度只有 3.0–3.4:1。 */
/* 引言首句是这一块的论点，比常规导语重一档 */
.home .sec-head.sec-lg p.fc-lead{font-weight:600;color:var(--ink);}

.ability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
/* 四张能力卡 —— 玻璃 + 本域色四件套。
   域色只上「图形」：顶部光带、角上的径向光、标签底色、hover 边缘光。
   正文永远是 ink，青 #0E9F9F 和琥珀 #D97706 在 11–15px 上只有 3.0–3.4:1，
   一旦拿来当文字色就不合格。
   四张卡靠这四件套互相区分，而不是靠一条细边框——一条边读不出"哪一域"。 */
.ab{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:
    /* 角上的本域光，让卡片像被本域的颜色从右上照进来 */
    radial-gradient(360px 220px at 88% -14%,color-mix(in srgb,var(--d,#0B63C5) 20%,transparent) 0%,transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--d,#0B63C5) 9%,rgba(255,255,255,.62)) 0%,var(--glass-2-bg) 46%);
  border:1px solid var(--glass-2-edge);
  border-radius:var(--r-card);padding:26px 28px 24px;
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);}
/* 顶部光带：3px 实色收到透明，下面压一层同色外发光。
   这是四张卡最先被看到的东西，所以它必须够宽、够亮，不是一条细边。 */
.ab::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--d,var(--brand-blue)) 0%,
    color-mix(in srgb,var(--d,var(--brand-blue)) 55%,transparent) 48%,transparent 100%);
  box-shadow:0 0 20px 1px color-mix(in srgb,var(--d,var(--brand-blue)) 42%,transparent);
}
.ab[data-d="expression"]{--d:var(--domain-expression);--d-tint:var(--domain-expression-tint);}
.ab[data-d="thinking"]{--d:var(--domain-thinking);--d-tint:var(--domain-thinking-tint);}
.ab[data-d="learning"]{--d:var(--domain-learning);--d-tint:var(--domain-learning-tint);}
.ab[data-d="creativity"]{--d:var(--domain-creativity);--d-tint:var(--domain-creativity-tint);}
/* 悬停时卡片按自己那一域的色泛光，不统一成蓝色——这样四张卡一眼能分出彼此 */
.ab:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--d,var(--brand-blue)) 34%,rgba(255,255,255,.7));
  box-shadow:var(--glass-inner-strong),
    0 30px 64px -30px color-mix(in srgb,var(--d,var(--brand-blue)) 66%,transparent);}
/* 能力名：不挂编号，也不做成胶囊——直接一行「表达力」，字号跟卡内标题一样大。
   层级靠本域色和标题的 ink 区分，不加底、不加描边。
   对齐要写两条：窄屏下 .ab 是 flex column，align-self 管横向；
   1020px 以上 .ab 换成 subgrid（为了让四张卡的行对齐），
   这时横向由 justify-self 管，只写 align-self 会被拉成一条横贯卡片的长条。 */
.ab .ab-k{
  display:inline-block;
  align-self:flex-start;justify-self:start;
  font-size:23px;font-weight:800;letter-spacing:-.5px;line-height:1.2;
  color:color-mix(in srgb,var(--d,var(--brand-blue)) 62%,var(--ink));}
.ab h3{font-size:23px;margin:11px 0 10px;letter-spacing:-.5px;}
.ab .ab-core{font-size:14.5px;line-height:1.85;color:var(--ink-2);margin:0 0 16px;text-wrap:pretty;}
.ab .ab-dirs{list-style:none;margin:auto 0 0;padding:15px 0 0;border-top:1px solid var(--hairline-soft);
  font-size:12.5px;color:var(--ink-2);line-height:1.85;}
.ab .ab-dirs li{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;}
.ab .ab-dirs li+li{margin-top:2px;}
.ab .ab-dirs b{color:var(--ink);font-weight:700;}

/* 四张卡底部的方向区要跨卡对齐。
   原来靠 .ab-dirs 的 margin-top:auto 各自贴底，方向条目少的那张卡虚线就落得更低，
   同一行两卡的虚线不在一条线上。改成 subgrid：同一行两张卡共用四段行高，
   虚线一律落在第四段的顶端，谁也不会掉下去。 */
@supports (grid-template-rows:subgrid){
  .ability-grid{row-gap:0;column-gap:16px;}
  .ab{display:grid;grid-template-rows:subgrid;grid-row:span 4;margin-bottom:16px;}
  .ab .ab-dirs{margin-top:0;}
}

/* ── 4b. 学以致用：能力用在哪里 ───────────────────────────
   上半六张学科卡，2 列 3 行；下半「融入日常」一条深蓝横带，3 列并排。
   浅色卡讲学科、深色带讲生活，两个层级靠明度分开，不用再加标题栏。
   全站只有这一处深色面，和页脚同一个深蓝，不另造颜色。 */

/* 引导段 57 字，在 780px 里会断成 43/14 两行，末行太短。
   balance 让两行等长，断点落在「并把」之后，比默认断法读着顺。 */
.home .sec-head.sec-lg p.tr-lead{text-wrap:balance;}

/* 学科卡：同一套玻璃，边界从发丝线换成卡片自身。
   卡高由内容撑，桌面 3 行，手机 6 行，一屏看完，不做折叠。 */
.tr-subj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.tr-s{background:var(--glass-2-bg);border:1px solid var(--glass-2-edge);
  border-radius:var(--r-card);padding:22px 24px 23px;
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.tr-s:hover{background:var(--glass-2-bg-hover);
  box-shadow:var(--glass-inner-strong),var(--glass-shadow-hover);}
.tr-s b{display:block;font-size:16px;font-weight:800;line-height:1.4;
  letter-spacing:-.2px;color:var(--ink);}
.tr-s p{margin:9px 0 0;font-size:13.5px;line-height:1.78;color:var(--ink-2);text-wrap:pretty;}

/* 融入日常：整块是页面里唯一的深色面。底色取页脚同一个深蓝，
   材质仍是玻璃——顶部一道内高光 + 外投影，不是死板实色块。 */
.tr-life{margin-top:34px;}
.tr-dh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.tr-dh h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--ink);}
.tr-dh p{margin:0;font-size:13px;line-height:1.7;color:var(--text-3);text-wrap:pretty;}

/* 三列不等宽：第三条「独立行动」的说明最长（27 字，单行要 364px），
   等分的话它必然折成两行，而折行后第一行只用掉一半、右边空一大块。
   按各自文字量给比例（314 / 313 / 364），让三条都落在一行。
   内边距 16 不是随手写的：整条带子最宽 1112，扣掉三列内边距只剩这些余量。 */
.tr-daily{display:grid;grid-template-columns:1fr 1fr 1.145fr;
  border-radius:var(--r-card);overflow:hidden;padding:24px 0;
  background:linear-gradient(155deg,#0A5090 0%,var(--blue-deep) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             0 20px 44px -24px rgba(8,66,127,.62);}
.tr-d{padding:0 16px;border-left:1px solid rgba(255,255,255,.18);}
.tr-d:first-child{border-left:0;padding-left:20px;}
.tr-d:last-child{padding-right:20px;}
.tr-d b{display:block;font-size:15px;font-weight:800;line-height:1.4;color:#fff;}
.tr-d p{margin:7px 0 0;font-size:13px;line-height:1.75;
  color:rgba(255,255,255,.76);text-wrap:pretty;}

@media (max-width:1020px){
  .tr-subj{gap:16px;}
}
/* 两张并排到 820 就挤了：卡片宽不到 340，说明要断成四行 */
@media (max-width:820px){
  .tr-subj{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .tr-s{padding:18px 18px 19px;}
  .tr-life{margin-top:28px;}
  /* 横带转竖排：竖线换横线，首尾不留内边距，免得两头空一截 */
  .tr-daily{grid-template-columns:1fr;padding:20px 0;}
  .tr-d{padding:16px 20px;border-left:0;border-top:1px solid rgba(255,255,255,.16);}
  .tr-d:first-child{border-top:0;padding-top:0;}
  .tr-d:last-child{padding-bottom:0;}
}

/* ── 5. 课程卡：只回答四件事 ───────────────────────────── */
.cq{margin:18px 0 0;}
.cq .q{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:11px 0;
  border-top:1px dashed var(--line);font-size:13px;line-height:1.78;}
.cq .q b{font-size:11.5px;color:var(--text-3);font-weight:700;letter-spacing:.3px;padding-top:3px;}
.cq .q span{color:var(--ink-2);}
.cq .q em{font-style:normal;color:var(--ink);font-weight:600;}

/* ── 6. 五步链：目标 → 任务 → 支持 → 应用 → 反馈 ────────── */
.flow{display:flex;flex-direction:column;border:1px solid var(--glass-2-edge);
  border-radius:var(--r-card);overflow:hidden;background:var(--glass-2-bg);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);}
.fl{display:grid;grid-template-columns:158px 1fr;gap:22px;padding:20px 26px;
  border-bottom:1px solid var(--hairline-soft);align-items:baseline;
  transition:background var(--dur) var(--ease);}
.fl:hover{background:rgba(255,255,255,.42);}
.fl:last-child{border-bottom:none;}
.fl .fn{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;
  color:var(--blue-deep);letter-spacing:.2px;margin:0;}
.fl .fn i{font-style:normal;width:20px;height:20px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-50);color:var(--blue-deep);font-size:10.5px;font-weight:800;}
.fl .fd{font-size:14px;line-height:1.82;color:var(--ink-2);}
.fl .fd b{color:var(--ink);}

/* ── 7. 一节课 90 分钟三段 + 教案页示意 ─────────────────── */
.lesson{border:1px solid var(--glass-2-edge);border-radius:var(--r-card);overflow:hidden;
  background:var(--glass-2-bg);box-shadow:var(--glass-inner),var(--glass-shadow-sm);}
.lesson-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  padding:18px 22px;background:var(--bg-2);border-bottom:1px solid var(--line);}
.lesson-top h3{font-size:16px;margin:0;letter-spacing:-.2px;}
.lesson-top span{font-size:12.5px;color:var(--text-3);}
.lesson-row{display:grid;grid-template-columns:132px 96px 1fr;gap:16px;
  padding:15px 22px;border-bottom:1px solid var(--line);align-items:baseline;}
.lesson-row .ln{font-size:13.5px;font-weight:700;}
.lesson-row .lt{font-size:12.5px;color:var(--blue-700);font-weight:600;white-space:nowrap;}
.lesson-row .ld{font-size:13.5px;line-height:1.75;color:var(--ink-2);}
.lesson-foot{padding:15px 22px;background:var(--bg-2);font-size:13px;
  line-height:1.8;color:var(--ink-2);}
.lesson-foot b{color:var(--ink);}

.lesson-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:16px;align-items:start;}
.doc-mock{margin:0;border:1px dashed var(--violet-200);border-radius:14px;
  background:var(--surface);overflow:hidden;}
.doc-bar{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:11px;color:var(--text-3);letter-spacing:.3px;}
.doc-body{padding:16px 16px 18px;}
.doc-h{font-size:14.5px;font-weight:800;margin:0 0 10px;letter-spacing:-.2px;line-height:1.5;}
.doc-line{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:9px 0;
  border-top:1px dashed var(--line);font-size:12px;line-height:1.72;}
.doc-line:first-of-type{border-top:none;padding-top:0;}
.doc-line b{font-size:11px;color:var(--violet-600);font-weight:700;letter-spacing:.2px;}
.doc-line span{color:var(--ink-2);}
.doc-mock figcaption{padding:10px 16px;background:var(--bg-2);
  border-top:1px solid var(--line);font-size:11px;color:var(--text-3);}

/* ── 8. AI 三方分工：AI 做什么 / 学生做什么 / 老师怎样支持 ── */
.ai3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--violet-line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,#FCFAFF 0%,var(--violet-tint) 100%);}
.a3{padding:24px 22px;border-right:1px solid var(--violet-line);}
.a3:last-child{border-right:none;}
.a3.is-teacher{background:rgba(255,255,255,.66);}
.a3 .a3-k{font-size:11.5px;font-weight:800;letter-spacing:1.5px;color:var(--violet-600);}
.a3 p{font-size:13.5px;line-height:1.82;color:var(--ink-2);margin:9px 0 0;}
.ai-foot{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--text-3);}
.ai-foot b{color:var(--ink-2);font-weight:600;}

/* ── 9. 实践与成长成果：作品 / 过程记录 / 真实场合 ──────── */
/* 导航「活动与机会 / 项目与赛事」落在赛事考级这一块，锚点从 section 移到内层 div，
   section[id] 的 86px 偏移管不到它，这里补一条 */
#projects{scroll-margin-top:86px;}
.outcome{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.oc{display:flex;flex-direction:column;background:var(--glass-2-bg);
  border:1px solid var(--glass-2-edge);border-radius:var(--r-card);padding:26px 24px;
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);}
.oc .oc-k{font-size:11.5px;letter-spacing:1.5px;color:var(--blue-700);font-weight:700;}
.oc h3{font-size:18px;margin:9px 0 10px;letter-spacing:-.2px;}
/* 去掉 01/02 序号后，类别词（学习记录 / 成长记忆）升为卡片标题，下面那行黑色标题回到 18px。
   其他页的 .oc 仍带 01/02 小标签，保持 11.5px + 18px 不动。 */
#archive .oc-k{font-size:clamp(20px,2.6vw,24px);letter-spacing:-.4px;line-height:1.32;}
#archive .oc h3{margin:8px 0 10px;}
/* 档案是两张并排的卡，规格要求"通过透明度与内高光形成层级"，不是同一种玻璃复制两遍。
   第一张（学习记录）是常态：54% 白，偏实，读起来像一页记录。
   第二张（成长记忆）是"被光照到的那一张"：34% 白更透，内高光更亮，
   右上角一点紫——紫在这里是收束/珍藏色，不是第五个能力域。
   两张并排时，左边沉、右边亮，视线会先落在右边，再读左边，这正是这两块内容的分量差。 */
#archive .outcome.is-two .oc:first-child{background:rgba(255,255,255,.54);}
#archive .outcome.is-two .oc:last-child{
  background:
    radial-gradient(340px 200px at 90% -16%,rgba(123,63,228,.16) 0%,rgba(123,63,228,0) 72%),
    rgba(255,255,255,.34);
  border-color:rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 -20px 34px -26px rgba(190,220,255,.9),
    0 24px 54px -30px rgba(11,99,197,.46);
}
.oc p{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin:0 0 14px;}
.oc ul{list-style:none;margin:0;padding:13px 0 0;border-top:1px dashed var(--line);margin-top:auto;}
.oc li{font-size:12.5px;color:var(--text-3);line-height:1.9;padding-left:13px;position:relative;}
.oc li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;
  border-radius:50%;background:var(--blue-2);opacity:.6;}
/* 标签条：作业记录 / 测试记录 / 复盘记录 这类并列项做成小标签。
   原来这里是竖排三条带圆点的小字，一行并列项摆成三行会拉长卡片，
   也看不出它们其实是同一层的东西。
   现在做成玻璃小片：品牌蓝 10% 底 + 白内高光 + 极淡蓝描边。
   不用实色底——四个标签铺满一行实色，卡片下半截会变成一条色带。 */
.oc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px;
  border-top:1px dashed rgba(11,99,197,.14);}
.oc-tags span{padding:5px 11px;border-radius:8px;line-height:1.5;
  background:rgba(11,99,197,.10);
  border:1px solid rgba(11,99,197,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
  font-size:12.5px;font-weight:600;color:var(--blue-deep);letter-spacing:.2px;}

/* 出口胶囊：六个可点的小药丸，替代六张大卡 */
.exit{display:flex;flex-wrap:wrap;gap:10px;}
.exit a{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:30px;
  border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;
  color:var(--ink-2);transition:border-color .2s,color .2s,transform .2s;}
.exit a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px);}
.exit a i{font-style:normal;font-size:11px;color:var(--text-3);font-weight:500;}
/* 活动练哪几个力：一个活动可以只练一个，也可以同时练两个（如联合国演讲 = 表达力 + 思辨力） */
.exit a .c-tags{display:inline-flex;align-items:center;gap:6px;margin-left:2px;}
.exit a .c-dot{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto;
  padding:2px 8px;border-radius:9px;
  font-size:11px;font-weight:600;color:var(--ink);background:var(--d-tint);
}
.exit a .c-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d);}
.exit a .c-dot[data-d="expression"]{--d:var(--domain-expression);--d-tint:var(--domain-expression-tint);}
.exit a .c-dot[data-d="thinking"]{--d:var(--domain-thinking);--d-tint:var(--domain-thinking-tint);}
.exit a .c-dot[data-d="learning"]{--d:var(--domain-learning);--d-tint:var(--domain-learning-tint);}
.exit a .c-dot[data-d="creativity"]{--d:var(--domain-creativity);--d-tint:var(--domain-creativity-tint);}
/* 窄屏：活动名一行一个，能力标签整组靠右，避免标签文字被挤成两行 */
@media (max-width:620px){
  .exit{display:grid;grid-template-columns:1fr;gap:8px;}
  .exit a{display:flex;flex-wrap:wrap;row-gap:5px;}
  .exit a .c-tags{margin-left:auto;}
}

/* ── 10. 学员与赛事案例：三张引述卡 ─────────────────────── */
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;}
/* 三张案例卡：白面 + 发丝边 + 顶部 1px 内高光 + 两级浮起。
   以前只有 0 1px 2px 一层贴地影，卡片看着像贴在纸上；
   补上宽而淡的那层投影之后才真的离地，hover 再抬到第三级。 */
/* 案例卡：Level 2 玻璃。半透明底让面板的冰蓝透进来，
   顶部内高光 + 底部冷色回光做出材料厚度，阴影用蓝而不是灰黑。 */
.sc{display:flex;flex-direction:column;
  background:var(--glass-2-bg);
  border:1px solid var(--glass-2-edge);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.sc:hover{transform:translateY(-4px);background:var(--glass-2-bg-hover);
  border-color:rgba(255,255,255,.92);box-shadow:var(--glass-inner-strong),var(--glass-shadow-hover);}
/* 1:1 的图把卡片拉得过高，三列并排时整段像三根柱子。
   4:3 之后图片和正文的比例接近参考图的案例卡，卡也不至于压过下一段。 */
.sc-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:rgba(234,244,254,.5);}
/* 图片只做极轻微的放大，1.03 是上限：再大就变成电商 hover，教育机构不需要那种动效 */
.sc:hover .sc-media img{transform:scale(1.03);}
.sc-media img{width:100%;height:100%;object-fit:cover;display:block;
  /* 极轻的冷色偏移：三张图来源不同（现场照、赛事标识、宣传海报），
     色温差得很远。统一压一点暖、提一点蓝，并排时像一组。 */
  filter:saturate(.96) contrast(1.02) brightness(1.01);
  transition:transform var(--dur-slow) var(--ease);}
/* 图片底部一道冷色蒙层，让照片"沉"进玻璃卡里，而不是硬切一刀 */
.sc-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,99,197,0) 0%,rgba(11,99,197,.05) 62%,rgba(255,255,255,.22) 100%);
}
/* 暂无现场照的那张：用赛事标识拼一块版式占位，不做成假照片 */
.sc-media--tile{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface-2),var(--surface-3) 58%,var(--domain-creativity-soft));}
.sc-tile{display:flex;flex-direction:column;align-items:center;gap:14px;}
.sc-tile img{width:auto;height:60px;object-fit:contain;mix-blend-mode:multiply;}
.sc-tile span{font-size:12.5px;font-weight:700;letter-spacing:3px;color:var(--blue-700);opacity:.66;}

.sc-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
/* 分类标签：字号压到 10.5、字距拉到 .14em。参考图的微标签都是这个尺寸，
   和正文拉开一档之后，正文才敢用 14px 而不显得碎。 */
.sc-k{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  color:var(--brand-blue);}
.sc h3{font-size:19px;line-height:1.45;margin:11px 0 12px;letter-spacing:-.35px;color:var(--ink);}
/* 三列时标题放不下一行，就在逗号处断：后半句整块不可拆，
   否则浏览器会按字数平均，把「一步步」「体验」这类词拆到两行。 */
.sc h3 .nw{display:inline-block;}
.sc blockquote{margin:0;font-size:14.2px;line-height:1.9;color:var(--ink-2);text-wrap:pretty;}
.sc cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;color:var(--text-3);}

.stories-note{margin:18px 0 0;font-size:12px;line-height:1.75;color:var(--text-3);text-align:left;}

/* ── 11. 机构与教师支持 ────────────────────────────────── */
.support{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
/* 机构支持：两张服务卡 + 一条联盟条。服务卡透明度低一点，
   联盟条是这一块唯一的转化入口，权重最高。 */
.sp{display:flex;flex-direction:column;background:var(--glass-2-bg);
  border:1px solid var(--glass-2-edge);border-radius:var(--r-card);padding:26px 24px;
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
  transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease),background var(--dur) var(--ease);}
.sp:hover{transform:translateY(-3px);background:var(--glass-2-bg-hover);
  border-color:rgba(255,255,255,.92);box-shadow:var(--glass-inner-strong),var(--glass-shadow-hover);}
/* 去掉 01/02 序号后，类别词（教学与练习 / 获客与社媒运营）升为卡片标题 */
.sp .sp-k{font-size:clamp(20px,2.6vw,24px);letter-spacing:-.4px;line-height:1.32;color:var(--blue-700);font-weight:700;}
.sp h3{font-size:18px;margin:9px 0 10px;letter-spacing:-.2px;}
.sp p{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin:0 0 13px;}
/* 正文成了卡里最后一项，底部那 13px 会让留白比顶部多出一截 */
.sp p:last-child{margin-bottom:0;}
.sp a{font-size:13px;font-weight:600;color:var(--blue);margin-top:auto;}
.sp a:hover{color:var(--brand-hover);text-decoration:underline;text-underline-offset:3px;}
/* 只有名称和一句话的卡片（课程与实践页）：没有 sp-k 那一层，
   标题上方不该留那 9px 的空档。 */
.sp.is-plain h3{margin-top:0;}

/* 合作三步 */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.s3{position:relative;padding:24px 24px 24px 60px;background:var(--glass-3-bg);
  border:1px solid var(--glass-3-edge);border-radius:var(--r-card);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);}
.s3 .sn{position:absolute;left:20px;top:21px;font-size:13px;font-weight:800;
  color:var(--blue);letter-spacing:.5px;}
.s3 h3{font-size:16.5px;margin:0 0 8px;letter-spacing:-.2px;}
.s3 p{font-size:13.5px;line-height:1.8;color:var(--ink-2);margin:0;}
.s3 .so{display:block;margin-top:11px;font-size:12.5px;font-weight:700;color:var(--blue-deep);}

/* 联盟：一行说完，权益在合作页展开 */
/* 联盟条：左列「是谁 + 说明」，右列「多少钱 + 两个动作」。
   原来 flex 一行硬塞（标题 + 说明 + 三档 + 一个按钮），说明被挤成三行；
   改成 grid 之后说明拿到整行宽度，价格与按钮也各归各位。 */
/* 联盟条是这一块唯一的转化入口，做成深色条：整页浅底里它一眼能看见，
   深蓝底也把三个价位和「查看合作权益」推成视觉重点。 */
.alliance{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:14px 34px;padding:30px 32px;border-radius:18px;
  background:linear-gradient(135deg,var(--blue-deep) 0%,var(--blue) 100%);
  border:none;box-shadow:0 18px 40px rgba(11,99,197,.24);}
.alliance .al-t{grid-column:1;grid-row:1;font-size:21px;font-weight:800;letter-spacing:-.3px;color:#fff;}
.alliance .al-d{grid-column:1;grid-row:2;font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.78;}
.alliance .al-p{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.alliance .al-p span{font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:5px 12px;}
.alliance .al-act{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:end;}
/* 蓝按钮落在蓝底上会融进去，反过来做白底蓝字 */
.alliance .btn-p{background:#fff;color:var(--blue-deep);box-shadow:0 8px 20px rgba(3,26,52,.28);}
.alliance .btn-p:hover{background:#EAF2FC;color:var(--blue-deep);transform:translateY(-1px);}

/* ── 13. 占位素材标记 ───────────────────────────────────
   用户要求先用编的素材占位，晚些替换真素材。占位必须一眼能认出来，
   否则两个月后会忘了替换，假案例就真的挂在线上卖给校长了。
   约定：任何占位容器加 class="ph" + data-ph="用途"，
   替换真素材时同时删掉 .ph / .ph-badge / data-ph。
   发布前跑 tools/list_placeholders.py，check_local.py 末尾也会提醒。 */
.ph{position:relative;}
.ph-badge{position:absolute;top:-10px;left:16px;z-index:3;
  display:inline-block;padding:5px 10px;border-radius:20px;
  font-size:10.5px;font-weight:700;letter-spacing:.4px;line-height:1;
  background:#FFF4E6;color:#9A4A00;border:1px solid #FFD8A8;
  white-space:nowrap;box-shadow:0 2px 6px rgba(154,74,0,.08);}

/* ── 19. 活动图片轮播 banner ────────────────────────────
   首屏下方。一张图一个活动，整张图就是一个链接，点进去直接到报名。
   桌面用 2000×700 图，手机换 900×640 图。5 秒自动切，
   悬停/聚焦暂停，可点圆点、箭头、触屏左右滑、键盘左右键。 */
.hslider{position:relative;padding:26px 0 8px;}
.hs-box{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--blue-900,#08427F);
  box-shadow:0 18px 46px -18px rgba(11,99,197,.42);}
.hs-track{display:flex;width:100%;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.hs-slide{flex:0 0 100%;display:block;text-decoration:none;line-height:0;}
/* 首屏的底铺满整块轮播。
   原来 .hs-intro .hero 有自己的实底，但 .hero 比 .hs-slide 矮 250px 左右，
   实底在中间就断了，看起来像页面被切了一刀。
   改成 flex 撑满，实底一直铺到轮播底边，和圆角容器对齐。 */
.hs-slide.hs-intro{display:flex;flex-direction:column;}
.hs-slide.hs-intro > .hero{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;}
.hs-slide.hs-intro > .hero > .wrap{width:100%;}
.hs-slide img{width:100%;height:auto;display:block;}
.hs-slide:focus-visible{outline:3px solid var(--brand-blue);outline-offset:-3px;}

/* 控件按 TDesign Swiper 的规范：贴在 banner 底部居中，细圆点 + 细箭头。
   整条做成玻璃胶囊，浅底深底都读得清，不用跟着当前屏换配色
   —— 换配色会在切屏那 0.6 秒里露出中间态。
   底座降到 40%、模糊提到 18px：首屏底色本身就浅，56% 白压上去等于白胶囊，
   现在底下的光能透上来，边缘靠内高光和白描边立住。 */
.hs-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.40);
  border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:var(--glass-inner),0 10px 26px -16px rgba(11,99,197,.34);
  pointer-events:none;}
.hs-bar > *{pointer-events:auto;}

.hs-dots{display:flex;align-items:center;gap:6px;padding:0 2px;}
.hs-dots button{width:6px;height:6px;padding:0;border:0;border-radius:3px;
  background:rgba(11,99,197,.30);cursor:pointer;
  transition:width .25s ease,background .25s ease,box-shadow .25s ease;}
.hs-dots button:hover{background:rgba(11,99,197,.46);}
/* 当前点带一圈极淡的蓝外发光，代替加粗——加粗会让整条胶囊在切屏时抖一下 */
.hs-dots button.on{width:18px;background:var(--blue,#0B63C5);
  box-shadow:0 0 0 3px rgba(11,99,197,.13);}

.hs-nav{flex-shrink:0;width:26px;height:26px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.5);border-radius:50%;
  background:rgba(255,255,255,.34);color:var(--blue-900,#08427F);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .2s ease,transform .15s ease,border-color .2s ease;}
.hs-nav:hover{background:rgba(255,255,255,.68);border-color:rgba(11,99,197,.26);}
.hs-nav:active{transform:scale(.92);}
.hs-nav:focus-visible{outline:2px solid var(--blue,#0B63C5);outline-offset:2px;}

@media (max-width:760px){
  .hslider{padding:16px 0 2px;}
  .hs-box{border-radius:14px;}
  .hs-bar{bottom:10px;gap:6px;padding:4px 7px;}
  .hs-nav{width:24px;height:24px;}
  .hs-nav svg{width:11px;height:11px;}
}
@media (prefers-reduced-motion:reduce){
  .hs-track{transition:none;}
}

/* ── 19b. 首屏与活动合并成一个 banner ──────────────────
   第 1 屏是平台定位（真 HTML，H1 仍是真文本），第 2–6 屏是活动图。
   整块通栏，首屏内容用 .wrap 对齐，和导航、下方各区块左右齐边。 */
/* 整块通栏，首屏内容用 .wrap 对齐，和导航、下方各区块左右齐边。
   原来是深底，底部留 10px 白缝当分隔；现在 banner 变浅，白缝反而把两块切开
   显得悬空，改成贴住下面的白区，用一条 1px 线收边。 */
/* 首屏不再自己铺一块实底。
   页面底下已经有一层固定的光场，首屏再盖一层 #F7FAFE 会把光场完全挡掉，
   于是整屏又变回白纸——这正是之前"跟参考图没关系"的主因。
   现在只叠首屏自己的两团光，底色交给大气层透上来。 */
.hslider-hero{padding:0;border-bottom:0;}
.hslider-hero .hs-box{border-radius:0;box-shadow:none;background:transparent;}
.hslider-hero .hs-track{align-items:stretch;}
.hs-intro{position:relative;display:flex;align-items:center;line-height:normal;}
.hs-intro > .hero{width:100%;}
/* 首屏撑到接近一屏高。参考图的第一个画面是"整屏沉浸"，
   内容只占一屏高度的 60%，剩下的是光。之前 104/92 的内边距撑不满，
   视觉上一进来就是"网页"，而不是"一个空间"。 */
/* 用 vw 不用 vh：截图工具把页面放在一个很高的 iframe 里，
   vh 会按 iframe 的高度算，首屏直接被撑到两千像素。vw 不受影响。 */
.hs-intro .hero-lg{padding:clamp(84px,8.6vw,124px) 0 clamp(58px,6vw,86px);}
/* 第 1 屏：蓝主光落在标题与能力环之间，紫在右下做次级光，
   左下补一团很淡的蓝把左边界托住。
   最底下那层是冰蓝实底 #E6F0FC→#EFF6FF。
   之前首屏完全无实底，靠大气层透上来——但大气层的底色在视口顶部就是 #F3F8FE，
   几乎等于白，所以整屏读起来是白的，玻璃也就没有"透出来的东西"。
   参考图 B 的底是明确的冰蓝，卡片才显亮。这里把冰蓝做实，
   光晕再压上去，首屏才有冷色玻璃该有的底子。
   文字对比度不受影响：ink 压在最深一档 #E6F0FC 上是 15:1，标题蓝是 5.5:1。 */
.hs-intro .hero{background:
  radial-gradient(940px 640px at 72% 12%,rgba(11,99,197,.26) 0%,rgba(11,99,197,.08) 44%,rgba(11,99,197,0) 70%),
  radial-gradient(680px 500px at 104% 96%,rgba(123,63,228,.19) 0%,rgba(123,63,228,0) 66%),
  radial-gradient(860px 600px at -4% 100%,rgba(11,99,197,.15) 0%,rgba(11,99,197,0) 70%),
  radial-gradient(1800px 620px at 40% -34%,rgba(11,99,197,.22) 0%,rgba(11,99,197,.06) 52%,rgba(11,99,197,0) 76%),
  radial-gradient(900px 420px at 96% -20%,rgba(123,63,228,.14) 0%,rgba(123,63,228,0) 72%),
  linear-gradient(178deg,#E3EEFC 0%,#D9E7FA 54%,#E0EDFC 100%);}
/* 第 1 屏沿用 .hero 的方格底纹，但整块 banner 现在是浅色、后面五屏是纯渐变，
   网格留在第一屏会显得六屏两套底。这里压到只当一层很淡的质感，
   切换时看不出纹理由有到无。全站其他页的 hero 网格不动。 */
.hs-intro .hero::before{opacity:.16;background-size:76px 76px;}

/* ── 19c. 活动 banner 的两个按钮 ─────────────────────────
   图里不再烤 CTA，两个按钮是真链接，可聚焦、可读屏。
   左「查看详情」去活动详情页，右「点击报名」去该活动专属报名页。 */
.hs-evslide{position:relative;line-height:0;}
.hs-evslide picture{display:block;}
.hs-acts{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:10px;line-height:normal;
  padding:16px 5.5% 18px;
  background:linear-gradient(to top,rgba(4,22,44,.46) 0%,rgba(4,22,44,.18) 52%,rgba(4,22,44,0) 100%);}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 22px;border-radius:999px;white-space:nowrap;
  font-size:14.5px;font-weight:700;letter-spacing:.3px;text-decoration:none;
  transition:background .2s,border-color .2s;}
/* 按钮也跟着翻面。浅底上「点击报名」用本屏深主色实底，
   五屏颜色不同但都是深色，动作识别不变；橙色退出 banner。
   次按钮改白底 + 墨色字，边框压到能看见但不抢。 */
/* 次按钮：透明玻璃。原来 92% 白在活动色光晕上就是一块实白片，
   和旁边的实色主按钮拼在一起像两个不同年代的控制件。
   压到 62% 并挂一层模糊，身后那团活动色才透得进来。 */
.hs-btn-line{color:var(--hk,#0F1B2A);background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(255,255,255,.80);
  box-shadow:var(--glass-inner),0 8px 20px -14px rgba(16,36,62,.4);}
.hs-btn-line:hover{background:rgba(255,255,255,.84);border-color:var(--hk,#0F1B2A);}
.hs-btn-fill{color:#fff;background:var(--hk,#0F1B2A);
  border:1px solid var(--hk,#0F1B2A);
  box-shadow:0 10px 22px -10px rgba(16,36,62,.55);}
.hs-btn-fill:hover{filter:brightness(1.16);}
.hs-btn:focus-visible{outline:2px solid var(--hk,#0F1B2A);outline-offset:3px;}
@media (max-width:760px){
  .hs-acts{padding:12px 5% 14px;gap:8px;}
  .hs-btn{height:36px;padding:0 16px;font-size:13.5px;}
}
@media (prefers-reduced-motion:reduce){.hs-btn{transition:none;}}

/* ── 19d. 活动屏改成 HTML 文案 ───────────────────────────
   原做法把标题、副标都渲染进 2000×700 的 jpg，再用 object-fit:cover 铺满。
   容器比例一旦宽于 2.857，cover 就按高度缩放、左右裁切，图里的文字被切掉；
   按钮因为是 HTML 绝对定位反而完整，于是出现「按钮在、标题缺字」的错位。
   现在文案是真 HTML（永不裁、可选中、可读屏），图片只留赛事标识卡。 */
/* 六屏共用一套底：浅冷白 → 浅蓝灰 → 浅紫，五屏底色完全一致，
   差别只落在光晕的色相上。底色一样，翻屏就不会忽明忽暗，
   也不会出现「一屏粉、一屏蓝、一屏橙」那种各说各话。 */
.hs-evslide{position:relative;display:flex;align-items:center;line-height:normal;
  background:linear-gradient(135deg,#FBFCFF 0%,var(--page-background) 52%,#F7F6FE 100%);}
/* 光晕照第 1 屏 aurora 的做法：几个大圆 + blur(90px)，色取本屏 logo 主色的提亮版
   （用 logo 的深色去模糊，出来是灰雾，不是光）。
   主光压在标识卡背后，玻璃卡才透得出来；第二团放左下给文字区一点环境光。
   同一组透明度在五个色相上的视觉重量差很多——粉红往外扩、青蓝往里收，
   所以每屏带一个 --ga 补偿，翻过去才是「一样亮的一团雾换了颜色」。 */
.hs-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(560px 340px at 96% 104%,
    rgba(var(--glow,11,99,197),calc(.14 * var(--ga,1))),
    rgba(var(--glow,11,99,197),0) 70%);}
.hs-glow::before,.hs-glow::after{content:"";position:absolute;border-radius:50%;
  filter:blur(90px);}
.hs-glow::before{width:560px;height:560px;right:2%;top:2%;
  opacity:calc(.62 * var(--ga,1));
  background:radial-gradient(circle,rgba(var(--glow,11,99,197),.5),
    rgba(var(--glow,11,99,197),0) 68%);}
.hs-glow::after{width:480px;height:480px;left:-8%;bottom:-34%;
  opacity:calc(.4 * var(--ga,1));
  background:radial-gradient(circle,rgba(var(--glow,11,99,197),.34),
    rgba(var(--glow,11,99,197),0) 70%);}
.hs-in{position:relative;z-index:1;width:100%;max-width:1160px;margin:0 auto;
  padding:40px 24px;display:flex;align-items:center;justify-content:space-between;gap:56px;}
.hs-txt{min-width:0;max-width:620px;}
/* 文字全部翻成深色。标题取本屏的深主色（--hk），和背景同一色相、
   亮度差拉到 8:1 以上；正文用站内墨色，不再用半透明白。 */
.hs-k{display:inline-block;margin-bottom:16px;padding:6px 15px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(16,36,62,.09);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;color:var(--hk,#0F1B2A);}
.hs-h{margin:0 0 14px;font-size:38px;line-height:1.22;font-weight:800;
  color:var(--hk,#0F1B2A);letter-spacing:-.4px;}
.hs-sub{margin:0 0 9px;font-size:17px;line-height:1.5;color:var(--ink-2,#3C4C63);}
.hs-note{margin:0 0 26px;font-size:14px;line-height:1.6;color:#4E5F76;}
/* 标识卡：悬浮玻璃徽章。
   原来 66% 白 + 26px 模糊，已经是玻璃，但底太厚——底下的彩光透上来只剩一层白雾，
   读不出"这是被光照着的晶体"。这一版做三件事：
   ① 底降到 46%，彩光能穿到卡面上；
   ② 边缘做双层折射：外圈 1px 白描边 + 内圈极淡的冰蓝描边，
      两块不同折射率的材料叠在一起，边缘才会亮一下；
   ③ 底部一道青蓝回光（::after），像光从卡片下沿折回来。
   悬浮感靠蓝调环境阴影 + hover 的 3px 上浮，不用投影加深。 */
.hs-fig{position:relative;flex-shrink:0;width:400px;height:238px;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 26px 18px;
  background:
    linear-gradient(158deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.18) 46%,rgba(255,255,255,.34) 100%),
    rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(190,224,255,.34),
    inset 0 -18px 30px -22px rgba(34,184,232,.5),
    0 26px 56px -22px rgba(11,99,197,.42),
    0 4px 12px rgba(16,36,62,.05);
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);}
/* 左上到右下的一道光，模拟卡片表面的斜向反射。压到 8%，
   再高就会盖住标识本身的颜色。 */
.hs-fig::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(124deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 34%,
    rgba(255,255,255,0) 66%,rgba(190,224,255,.22) 100%);
  opacity:.5;}
.hs-fig:hover{transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(190,224,255,.44),
    inset 0 -18px 30px -20px rgba(34,184,232,.62),
    0 34px 66px -24px rgba(11,99,197,.5),
    0 4px 12px rgba(16,36,62,.06);}
.hs-fig .fig-mark{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:0;padding:2px 12px;}
.hs-fig .fig-mark img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.hs-fig .fig-sign{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.62);}
.hs-fig .fig-sign img{height:30px;width:auto;display:block;}
.hs-fig img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
/* 按钮从绝对定位改回文档流，跟着文字走，不再压在图底 */
.hs-evslide .hs-acts{position:static;padding:0;background:none;}

@media (max-width:1020px){
  .hs-in{gap:32px;padding:34px 24px;}
  .hs-h{font-size:27px;}
  .hs-fig{width:250px;height:164px;padding:18px 18px 14px;}
  .hs-fig .fig-sign{margin-top:9px;padding-top:8px;}
  .hs-fig .fig-sign img{height:20px;}
}
@media (max-width:760px){
  .hs-in{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 20px 24px;}
  .hs-h{font-size:22px;}
  .hs-sub{font-size:13.5px;}
  .hs-note{font-size:12px;margin-bottom:16px;}
  /* 手机上卡缩成一条，两个标横排、中间一道竖线，署名小字省掉 */
  .hs-fig{order:-1;align-self:flex-start;width:auto;height:62px;padding:9px 14px;
    border-radius:14px;flex-direction:row;gap:13px;}
  .hs-fig .fig-mark{flex:0 0 auto;width:auto;height:100%;}
  .hs-fig .fig-mark img{max-width:150px;max-height:100%;}
  .hs-fig .fig-sign{width:auto;height:100%;margin:0;padding:0 0 0 11px;
    border-top:0;border-left:1px solid rgba(16,36,62,.1);}
  .hs-fig .fig-sign img{height:19px;}
  /* 光晕圆按桌面尺寸写，到 390 宽等于铺满整屏，整块 banner 变成一片色雾。
     窄屏缩小半径并往卡片那一侧收，只让卡周围亮一圈。 */
  .hs-glow::before{width:340px;height:340px;right:-14%;top:-10%;}
  .hs-glow::after{width:300px;height:300px;left:-18%;bottom:-16%;}
}

@media (max-width:1020px){
  .hs-intro .hero-lg{padding:38px 0 34px;}
}
@media (max-width:760px){
  .hs-intro .hero-lg{padding:30px 0 28px;}

}

/* ── 响应式 ───────────────────────────────────────────── */
@media (max-width:1020px){
  .ability-grid,.case-proof,.support,.steps3,.outcome{grid-template-columns:1fr;}
  .lesson-grid{grid-template-columns:1fr;}
  .ai3{grid-template-columns:1fr;}
  .a3{border-right:none;border-bottom:1px solid var(--violet-line);}
  .a3:last-child{border-bottom:none;}
  .client-case{grid-template-columns:1fr;gap:20px;}
  .fl{grid-template-columns:1fr;gap:7px;}
  .cq .q{grid-template-columns:1fr;gap:4px;}
  /* 三张案例卡在 1020 以下先收成两列，第三张独占一行，不落单在半边 */
  .stories{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stories .sc:last-child{grid-column:1/-1;}
  .stories .sc:last-child{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:center;}
  .stories .sc:last-child .sc-media{height:100%;aspect-ratio:auto;}
  /* 联盟条单列后按「谁 → 做什么 → 多少钱 → 按钮」排，价格不能插在说明前面 */
  .alliance{grid-template-columns:1fr;gap:12px;}
  .alliance .al-t{grid-column:1;grid-row:1;}
  .alliance .al-d{grid-column:1;grid-row:2;}
  .alliance .al-p{grid-column:1;grid-row:3;justify-content:flex-start;}
  .alliance .al-act{grid-column:1;grid-row:4;justify-content:flex-start;}
}
@media (max-width:920px){
  .home .hero-lg .wrap{grid-template-columns:1fr;gap:18px;}
  /* 单栏后标题占满宽度。第二行 14em（12 字 + 两个逗号），字号下限压到 21px（360 宽也能整行放下），
     390 以下才能整行放下，不出现只剩一个字的孤行 */
  .home .hero-lg h1{font-size:clamp(21px,5.9vw,44px);}
  .home .hero-lg h1 em{white-space:normal;}
  /* 920 以下首屏变单栏。能力环不藏，按可用宽度等比缩到文字下方，
     宽度上限压住，避免整块 banner 被拉得太高。 */
  .hs-intro .hero-visual{max-width:280px;margin:0 auto;}
  /* 五项数据两列排，最后一项独占一行居中，避免落单在左格 */
  .home .stats-band .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home .stats-band .stat:last-child{grid-column:1/-1;}
  /* 两列之后每列只有半屏宽，36px 的「15,000+人次」比列还宽，
     会压到隔壁那组；标签 12.5px 也放不下「连续组织口碑展演活动」，
     会折成两行。按视口宽度缩放，390 下数字 24px、标签 11.5px。 */
  .home .stats-band .stat b{font-size:clamp(24px,4vw,32px);}
  .home .stats-band .stat span{font-size:11.5px;}
  /* 控件贴在 banner 底部，首屏要给圆点留出落位，否则压在能力环上 */
  .hs-intro .hero-lg{padding-bottom:56px;}
}
@media (max-width:760px){
  .lesson-row{grid-template-columns:1fr;gap:4px;padding:13px 18px;}
  .stories{grid-template-columns:1fr;}
  .stories .sc:last-child{grid-column:auto;display:flex;}
  .stories .sc:last-child .sc-media{aspect-ratio:1/1;height:auto;}
}
@media (max-width:560px){
  .home .sec-head.sec-lg{margin-bottom:32px;}
  .hs-intro .hero-visual{max-width:250px;}
  .home .stats-band .stats{row-gap:26px;}
}

/* ── 19c 课程分册：能力 → 赛道 → 课程目录 ─────────────────────
   用户 2026-10-23 指出「不只有两套课程」：四大能力下 12 个赛道，
   每个赛道有自己的课程目录，演讲还是中英两套。用四列摊开，
   避免读者以为畅途只卖两门课。 */
.cat-map{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 24px;}
.cat-col{background:var(--surface,#fff);border:1px solid var(--line,#E3ECF6);
  border-top:3px solid var(--d,var(--blue));border-radius:var(--r);padding:16px 18px 14px;}
.cat-col[data-d="expression"]{--d:var(--domain-expression);--d-tint:var(--domain-expression-tint);}
.cat-col[data-d="thinking"]{--d:var(--domain-thinking);--d-tint:var(--domain-thinking-tint);}
.cat-col[data-d="learning"]{--d:var(--domain-learning);--d-tint:var(--domain-learning-tint);}
.cat-col[data-d="creativity"]{--d:var(--domain-creativity);--d-tint:var(--domain-creativity-tint);}
.cat-col h3{margin:0 0 10px;font-size:15px;color:var(--blue-deep,#08427F);letter-spacing:.2px;}
.cat-col h3::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--d,var(--blue));margin-right:7px;vertical-align:1px;}
.cat-row{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-top:1px solid #EEF3FA;}
.cat-col h3 + .cat-row{border-top:0;padding-top:2px;}
.cat-row b{font-size:13.5px;color:var(--ink,#0F1B2A);font-weight:700;}
.cat-row span{font-size:12px;color:var(--ink-2,#3C4C63);line-height:1.62;}
.cat-chips{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 10px;}
.cat-chips span{font-size:12px;color:var(--text-2);background:var(--surface-2);border-radius:20px;padding:3px 9px;white-space:nowrap;}
.cat-note{margin:0;font-size:12px;color:var(--text-3);line-height:1.6;}
.cat-col.is-soon{background:#FAFCFF;border-style:dashed;}
.cat-col.is-soon h3{color:var(--text-3);}
@media (max-width:1020px){.cat-map{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.cat-map{grid-template-columns:1fr;}}

/* ==========================================================================
   首页的玻璃降级（2026-10-26 第三轮）
   site.css 里的降级写在它自己的文件里，但 home.css 后加载，
   同特异性下会盖回去。首页特有的这几处必须在这里再写一遍。
   ========================================================================== */

/* ① 不支持 backdrop-filter：首屏按钮、轮播控件、标识卡退成实底 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .home .hero-lg .hero-cta .btn{background:rgba(255,255,255,.94);}
  .hs-bar{background:rgba(255,255,255,.88);}
  .hs-nav{background:rgba(255,255,255,.82);}
  .hs-fig{background:rgba(255,255,255,.88);}
}

/* ② 窄屏：标识卡与轮播控件降模糊。
   手机上没有鼠标，hover 上浮也不会发生，所以顺手把过渡也去掉——
   留着只是白白占一份合成层。 */
@media (max-width:760px){
  .home .hero-lg .hero-cta .btn{
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .hs-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
  .hs-nav{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
  .hs-fig{
    -webkit-backdrop-filter:blur(14px) saturate(1.35);
    backdrop-filter:blur(14px) saturate(1.35);
    background:
      linear-gradient(158deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.3) 46%,rgba(255,255,255,.44) 100%),
      rgba(255,255,255,.28);
  }
  .hs-fig,.hs-fig:hover{transform:none;transition:none;}
}

/* ③ 系统要求降低透明度 */
@media (prefers-reduced-transparency:reduce){
  .home .hero-lg .hero-cta .btn,.hs-bar,.hs-nav,.hs-fig{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* ── 数字带：横向玻璃条 ───────────────────────────────────────
   规格要求"横向玻璃数据带"。原来它是裸的——只有上下两条发丝线，
   五组数字直接浮在底图上，和下面三张玻璃卡不是一个体系。

   玻璃加在 .stats-band 上、而不是 .stats 上，是为了让数字的位置不动：
   .stats 同时是 .wrap，靠它自己的内边距和标题对齐；一旦给 .stats 加
   玻璃框，就必须给左右补内边距，数字会整体右移几十像素，和标题错开。
   加在外层就没这个问题。

   宽度必须和下面三张案例卡一样：卡片的边 = .wrap 的内容边，
   也就是 min(1160, 100%) − 两侧各 24。这里写 min(1112px, 100% − 48px)，
   1112 就是 1160 − 48。
   原来写的是 calc(100% − 56px) + max-width 1300，比卡片宽出 140px，
   在 1440 上像一条横贯的白板压在三个卡片上方，和它们不在一个尺度上。

   上下那两条发丝线去掉，否则玻璃边上会多出两条横线。 */
.home .stats-band{
  width:min(1112px,calc(100% - 48px));max-width:none;margin:0 auto;
  /* 34% 而不是卡片的 44%：这条带子正好压在光场最亮的一团蓝光上，
     同样白度在这里会比下面的案例卡亮一大截，看上去像一块贴上去的白板。 */
  background:rgba(255,255,255,.34);
  border:1px solid var(--glass-2-edge);
  border-radius:var(--r-card);
  box-shadow:var(--glass-inner),var(--glass-shadow-sm);
}
.home .stats-band .stats{
  padding-top:34px;padding-bottom:34px;border-top:0;border-bottom:0;
}
@media (max-width:760px){
  /* 和 .wrap 的内容宽保持一致（窄屏 wrap 的内边距也是 24） */
  .home .stats-band{width:calc(100% - 48px);}
  .home .stats-band .stats{padding-top:26px;padding-bottom:26px;}
}