/* =====================================================
   卡卡英语桌游 - 紫色活力主题（theme-neo.css）
   设计参考 risecenter.com：紫罗兰主色整屏铺底 +
   白色半透明胶囊按钮 + 大字号标题 + 视频首屏 + 大圆角卡片
   点缀色：浅蓝 #a6daff（数据/图标）+ 暖金（品牌与 CTA）
   ===================================================== */
:root{
  --bg:#6d56e1;
  --bg2:#5b45d0;
  --panel:rgba(255,255,255,.13);
  --line:rgba(255,255,255,.30);
  --line-soft:rgba(255,255,255,.14);
  --brand:#a6daff;          /* 浅蓝点缀：数据、眉题、图标、对勾 */
  --brand-lt:#ffd76e;       /* 暖金：品牌名、标题强调、徽标 */
  --brand-dk:#7fb8e0;
  --on-brand:#3a2a8f;
  --txt:#ffffff;
  --muted:rgba(233,229,255,.86);
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 18px 44px rgba(30,14,86,.35);
  --shadow-lg:0 26px 64px rgba(30,14,86,.42);
  --container:1180px;
  --font:'Alimama FangYuanTi','PingFang SC','Microsoft YaHei',sans-serif;

  --header-bg:rgba(62,42,148,.72);
  --nav-mobile-bg:rgba(43,26,112,.98);
  --hero-overlay:linear-gradient(180deg,rgba(56,34,142,.55) 0%,rgba(56,34,142,.28) 42%,rgba(38,20,105,.86) 100%);
  --hero-title-color:#ffffff;
  --hero-title-shadow:0 4px 26px rgba(24,10,70,.45);
  --hero-sub-color:rgba(240,238,255,.94);
  --hero-badge-bg:rgba(255,255,255,.14);
  --stats-bg:rgba(45,26,120,.55);

  --cta-grad:linear-gradient(135deg,#ffe08a,#f7bc3a 55%,#e89a12);
  --cta-ink:#2a1c00;
  --cta-shadow:0 10px 28px rgba(20,10,60,.38),0 2px 10px rgba(255,190,70,.35);
  --cta-shadow-hover:0 16px 38px rgba(20,10,60,.45),0 4px 14px rgba(255,190,70,.5);
  --ghost-bg:rgba(255,255,255,.12);
  --ghost-hover-bg:rgba(255,255,255,.22);

  --ic-bg:rgba(255,255,255,.14);
  --ic-line:rgba(255,255,255,.32);
  --ic-color:#ffe08a;
  --card-no-color:rgba(255,255,255,.20);
  --row-hover:rgba(255,255,255,.08);

  --ok:#9df3c6;
  --err:#ffb9c0;
  --timeline-dot-bg:#5b45d0;
  --timeline-ring:0 0 0 4px rgba(255,255,255,.16);

  --contact-bg:radial-gradient(1200px 520px at 82% 0%,rgba(255,255,255,.12),transparent 60%),var(--bg2);
  --form-panel-bg:rgba(255,255,255,.16);
  --form-panel-line:rgba(255,255,255,.30);
  --input-bg:#ffffff;
  --input-line:rgba(255,255,255,.65);
  --input-txt:#2a2350;
  --input-focus-ring:0 0 0 3px rgba(166,218,255,.45);

  --footer-bg:#2a1668;
  --footer-txt:#d9d2fb;
  --footer-muted:#9b8bd1;
  --footer-head:#ffd76e;

  --wx-bg:#f2f2f2;
  --wx-head:#f7f7f7;

  /* ---- 供多配色方案复用的通用位（默认=紫罗兰） ---- */
  --brand-2:#8f7bef;                                   /* 图标渐变末端 */
  --brand-shine:#b7a5ff;                               /* 导航电话流光 */
  --brand-shine-2:#f0eaff;
  --glow-a:rgba(255,255,255,.16);                      /* 页面氛围光 1 */
  --glow-b:rgba(166,218,255,.20);                       /* 氛围光 2（点缀色晕） */
  --glow-c:rgba(255,215,110,.14);                       /* 氛围光 3（暖金晕） */
  --shadow-hover:0 26px 64px rgba(30,14,86,.5);         /* 卡片悬停投影 */
  --answer-shadow:0 20px 48px rgba(28,12,88,.38),inset 0 1px 0 rgba(255,255,255,.22);
}

/* =====================================================
   配色方案 2：海洋蓝 Ocean
   深海蓝铺底 + 冰蓝点缀 + 保留暖金 CTA，适合科技/信任感
   ===================================================== */
html[data-theme="ocean"]{
  --bg:#1f6bc4;
  --bg2:#17559f;
  --brand:#8fe3ff;
  --brand-dk:#5fc0e8;
  --brand-2:#2f7fe0;
  --brand-shine:#9fd0ff;
  --brand-shine-2:#eaf5ff;
  --on-brand:#0d3a66;
  --muted:rgba(226,240,255,.86);

  --shadow:0 18px 44px rgba(6,32,66,.35);
  --shadow-lg:0 26px 64px rgba(6,32,66,.42);
  --shadow-hover:0 26px 64px rgba(6,32,66,.5);

  --header-bg:rgba(18,70,132,.72);
  --nav-mobile-bg:rgba(11,52,100,.98);
  --hero-overlay:linear-gradient(180deg,rgba(14,60,116,.55) 0%,rgba(14,60,116,.28) 42%,rgba(8,38,76,.86) 100%);
  --hero-title-shadow:0 4px 26px rgba(4,24,50,.45);
  --hero-sub-color:rgba(232,244,255,.94);
  --stats-bg:rgba(10,50,96,.55);

  --timeline-dot-bg:#17559f;
  --contact-bg:radial-gradient(1200px 520px at 82% 0%,rgba(255,255,255,.12),transparent 60%),var(--bg2);
  --input-focus-ring:0 0 0 3px rgba(143,227,255,.45);

  --footer-bg:#0a3560;
  --footer-txt:#cfe6fb;
  --footer-muted:#8db7dc;
  --footer-head:#ffd76e;

  --glow-b:rgba(143,227,255,.20);
  --glow-c:rgba(255,215,110,.13);
  --answer-shadow:0 20px 48px rgba(4,28,60,.38),inset 0 1px 0 rgba(255,255,255,.22);
}

/* =====================================================
   配色方案 3：森野绿 Forest
   深松绿铺底 + 薄荷点缀 + 保留暖金 CTA，适合自然/成长感
   ===================================================== */
html[data-theme="forest"]{
  --bg:#1c7a5c;
  --bg2:#14604a;
  --brand:#a9f0cd;
  --brand-dk:#74cfa8;
  --brand-2:#2f9c74;
  --brand-shine:#a8e8c8;
  --brand-shine-2:#eefbf4;
  --on-brand:#0b3f30;
  --muted:rgba(226,246,236,.87);

  --shadow:0 18px 44px rgba(6,40,30,.35);
  --shadow-lg:0 26px 64px rgba(6,40,30,.42);
  --shadow-hover:0 26px 64px rgba(6,40,30,.5);

  --header-bg:rgba(16,86,66,.72);
  --nav-mobile-bg:rgba(10,62,47,.98);
  --hero-overlay:linear-gradient(180deg,rgba(14,74,56,.55) 0%,rgba(14,74,56,.28) 42%,rgba(6,44,32,.86) 100%);
  --hero-title-shadow:0 4px 26px rgba(4,30,22,.45);
  --hero-sub-color:rgba(232,250,242,.94);
  --stats-bg:rgba(8,58,44,.55);

  --timeline-dot-bg:#14604a;
  --contact-bg:radial-gradient(1200px 520px at 82% 0%,rgba(255,255,255,.12),transparent 60%),var(--bg2);
  --input-focus-ring:0 0 0 3px rgba(169,240,205,.45);

  --footer-bg:#083b2c;
  --footer-txt:#cfeede;
  --footer-muted:#8cc0a8;
  --footer-head:#ffd76e;

  --glow-b:rgba(169,240,205,.18);
  --glow-c:rgba(255,215,110,.12);
  --answer-shadow:0 20px 48px rgba(4,34,26,.38),inset 0 1px 0 rgba(255,255,255,.22);
}

/* =====================================================
   配色方案 4：烈焰红 Vermilion（红色系）
   中国红铺底 + 暖沙点缀 + 保留暖金 CTA
   ===================================================== */
html[data-theme="red"]{
  --bg:#b5302a;
  --bg2:#95231f;
  --brand:#ffd9a8;
  --brand-dk:#e0a878;
  --brand-2:#d9503f;
  --brand-shine:#ffc9b8;
  --brand-shine-2:#ffece6;
  --on-brand:#4a1010;
  --muted:rgba(255,235,232,.87);

  --shadow:0 18px 44px rgba(64,10,8,.35);
  --shadow-lg:0 26px 64px rgba(64,10,8,.42);
  --shadow-hover:0 26px 64px rgba(64,10,8,.5);

  --header-bg:rgba(120,26,22,.74);
  --nav-mobile-bg:rgba(96,18,15,.98);
  --hero-overlay:linear-gradient(180deg,rgba(120,26,22,.55) 0%,rgba(120,26,22,.28) 42%,rgba(70,10,8,.88) 100%);
  --hero-title-shadow:0 4px 26px rgba(52,6,4,.45);
  --hero-sub-color:rgba(255,240,238,.94);
  --stats-bg:rgba(96,18,15,.55);

  --timeline-dot-bg:#95231f;
  --contact-bg:radial-gradient(1200px 520px at 82% 0%,rgba(255,255,255,.12),transparent 60%),var(--bg2);
  --input-focus-ring:0 0 0 3px rgba(255,217,168,.45);

  --footer-bg:#5c1210;
  --footer-txt:#f7dcd8;
  --footer-muted:#c9948f;
  --footer-head:#ffd76e;

  --glow-b:rgba(255,217,168,.18);
  --glow-c:rgba(255,255,255,.10);
  --answer-shadow:0 20px 48px rgba(58,8,6,.38),inset 0 1px 0 rgba(255,255,255,.22);
}

/* =====================================================
   配色方案 5：洋红粉 Magenta（粉色系，主色 #c750b8）
   玫红铺底 + 奶白点缀 + 保留暖金 CTA；
   卡片/圆标用深洋红玻璃，保证白字与金字的对比度
   ===================================================== */
html[data-theme="pink"]{
  --bg:#c750b8;
  --bg2:#ae3ea1;
  --brand:#fff4fb;
  --brand-dk:#ff9ade;
  --brand-2:#c93fae;
  --brand-shine:#ffd6f0;
  --brand-shine-2:#fff7fc;
  --on-brand:#5a0a48;
  --muted:rgba(255,246,252,.9);
  --brand-lt:#fff3c4;

  --shadow:0 18px 44px rgba(80,0,66,.32);
  --shadow-lg:0 26px 64px rgba(80,0,66,.38);
  --shadow-hover:0 26px 64px rgba(80,0,66,.46);

  --header-bg:rgba(160,40,146,.74);
  --nav-mobile-bg:rgba(126,26,114,.98);
  --hero-overlay:linear-gradient(180deg,rgba(150,36,136,.55) 0%,rgba(150,36,136,.28) 42%,rgba(72,6,64,.88) 100%);
  --hero-title-shadow:0 4px 26px rgba(64,0,54,.45);
  --hero-sub-color:rgba(255,246,252,.94);
  --stats-bg:rgba(126,26,114,.52);

  --timeline-dot-bg:#ae3ea1;
  --contact-bg:radial-gradient(1200px 520px at 82% 0%,rgba(255,255,255,.14),transparent 60%),var(--bg2);
  --input-focus-ring:0 0 0 3px rgba(255,214,240,.5);

  --footer-bg:#5f0c56;
  --footer-txt:#ffd9f2;
  --footer-muted:#dfa8d3;
  --footer-head:#fff3c4;

  --glow-b:rgba(255,255,255,.20);
  --glow-c:rgba(255,243,196,.14);
  --answer-shadow:0 20px 48px rgba(72,4,62,.38),inset 0 1px 0 rgba(255,255,255,.22);

  /* 卡片/圆标改「深洋红玻璃」，白字与金字才够清晰 */
  --panel:rgba(92,0,76,.18);
  --line:rgba(255,255,255,.36);
  --line-soft:rgba(255,255,255,.20);
  --row-hover:rgba(92,0,76,.12);
  --ic-bg:rgba(92,0,76,.26);
  --ic-line:rgba(255,255,255,.36);
  --card-no-color:rgba(92,0,76,.26);
}

/* 主题色底 + 柔光氛围（三处光晕随配色方案变化） */
body{
  background:
    radial-gradient(1100px 620px at 88% -6%, var(--glow-a), transparent 60%),
    radial-gradient(900px 560px at -8% 28%, var(--glow-b), transparent 55%),
    radial-gradient(800px 500px at 110% 68%, var(--glow-c), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
.section-alt{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--bg2);
}
/* 卡片玻璃质感 + 悬停扫光 */
.card,.comic-card,.ip-card,.s-card,.faq-list,.compare-panel,.conditions-panel{
  backdrop-filter:blur(6px);
}
.card:hover{
  box-shadow:var(--shadow-hover);
}
/* 大标题字距，参考 risecenter */
.sec-head h2{letter-spacing:3px}
.hero-title{letter-spacing:4px}
/* 统计数字更大更醒目 */
.stat b{letter-spacing:2px}

/* ===== 模式宣言板块（老师人物提问 + 三问 + 答案 + 阐述） ===== */
.vision-hero{display:grid;grid-template-columns:400px 1fr;gap:30px;align-items:stretch;margin-bottom:42px}
/* 人物外框与右侧问题列严格等高：照片铺满整列高度、随问题总高度伸缩；只把人物往左挪 15px，外框不动 */
.v-teacher{position:relative;margin:0;display:flex;min-height:380px}
.v-teacher-frame{position:relative;flex:1;width:100%;height:100%;aspect-ratio:7/10;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 6px 16px rgba(30,14,86,.18);background:rgba(255,255,255,.06)}
.v-teacher-frame img{position:absolute;top:0;left:-15px;width:104%;max-width:none;height:100%;display:block;object-fit:cover;object-position:75% 28%}
.v-teacher-cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;
  padding:120px 18px 18px;border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:linear-gradient(180deg,rgba(30,16,80,0) 0%,rgba(30,16,80,.42) 42%,rgba(30,16,80,.9) 100%);
}
.v-teacher-cap b{font-size:19px;letter-spacing:2px;color:#fff}
.v-teacher-cap span{font-size:13px;color:rgba(233,229,255,.85);letter-spacing:1px}
/* 老师的提问气泡：白底高对比，箭头在底部指向人物（更像老师在说话） */
.v-bubble{
  position:absolute;top:-18px;right:-20px;max-width:min(320px,78%);
  background:#fff;color:#3a2a66;font-weight:700;font-size:15.5px;line-height:1.7;
  padding:16px 20px;border-radius:20px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(30,14,86,.45);
}
.v-bubble::after{
  content:'';position:absolute;left:96px;bottom:-8px;
  width:17px;height:17px;background:#fff;
  transform:rotate(45deg);border-radius:0 0 4px 0;
}
.v-talk{display:flex}
.v-talk .vision-grid{display:flex;flex-direction:column;gap:24px;flex:1;height:100%;margin-bottom:0}
.v-talk .vq{flex:1;display:flex;flex-direction:column;justify-content:center;padding:19px 30px}
.v-talk .vq-no{width:46px;height:46px;font-size:19px;margin-bottom:13px}
.v-talk .vq p{font-size:18px;line-height:1.78}
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:34px}
/* ===== 剑桥考级板块：老师提问（复用模式宣言的真人老师照片） ===== */
/* 照片宽度与下方 .grid-3 的第一列对齐（同一 3 栏比例 + 26px 间距）；气泡向上对齐老师嘴部 */
.cam-teacher{display:grid;grid-template-columns:calc((100% - 52px) / 3) 1fr;gap:26px;align-items:center;margin-bottom:40px}
.ct-photo{position:relative;margin:0;width:100%}
/* 背景框上下缩短约 20px（7/10 → 8/11），人物仍完整在框内 */
.ct-frame{position:relative;width:100%;aspect-ratio:8/11;overflow:hidden;border-radius:var(--radius-lg);box-shadow:0 6px 16px rgba(30,14,86,.18);background:rgba(255,255,255,.06)}
/* 人物在背景中左右居中、去掉右侧紫边 */
.ct-frame img{position:absolute;top:0;left:0;width:100%;max-width:none;height:100%;display:block;object-fit:cover;object-position:center 20%}
.ct-cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;
  padding:90px 14px 14px;border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:linear-gradient(180deg,rgba(30,16,80,0) 0%,rgba(30,16,80,.42) 42%,rgba(30,16,80,.9) 100%);
}
.ct-cap b{font-size:16px;letter-spacing:2px;color:#fff}
.ct-cap span{font-size:12px;color:rgba(233,229,255,.85);letter-spacing:1px}
.ct-talk{position:relative;display:flex;flex-direction:column;justify-content:center}
/* 提问气泡：白底高对比、大头像式对话；箭头在左侧、垂直位置与老师嘴部齐平 */
.ct-bubble{
  position:relative;flex:1;transform:translateY(-94px);
  background:#fff;color:#3a2a66;font-weight:700;font-size:19px;line-height:2.04;
  padding:30px 34px;border-radius:26px;text-align:center;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(30,14,86,.30);
}
.ct-bubble::after{
  content:'';position:absolute;left:-9px;top:50%;margin-top:-9px;
  width:18px;height:18px;background:#fff;
  transform:rotate(45deg);border-radius:0 0 0 4px;
}
.ct-bubble:empty{display:none}
/* 答案横幅（模仿模式宣言的答案效果）：气泡下方长方形方框 */
.ct-answer{
  position:relative;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,224,138,.20),rgba(166,218,255,.13) 55%,rgba(255,224,138,.16));
  border:1px solid rgba(255,213,110,.42);border-radius:26px;
  padding:30px 40px;margin-top:22px;text-align:center;
  box-shadow:var(--answer-shadow);
  overflow:hidden;
}
.ct-answer[hidden]{display:none}
.ct-answer::before,.ct-answer::after{
  font-family:Georgia,"Times New Roman",serif;line-height:1;pointer-events:none;
  color:rgba(255,224,138,.20);font-size:110px;
}
.ct-answer::before{content:'\201C';position:absolute;left:20px;top:-16px}
.ct-answer::after{content:'\201D';position:absolute;right:20px;bottom:-68px}
.ct-answer .ca-label{
  font-size:15px;letter-spacing:5px;color:#2a1c00;white-space:nowrap;
  background:linear-gradient(135deg,#ffe08a,#f0b431);
  border-radius:999px;padding:10px 24px;font-weight:800;
  box-shadow:0 6px 18px rgba(255,190,70,.35);
}
.ct-answer strong{
  font-size:clamp(24px,3vw,38px);letter-spacing:3px;line-height:1.3;
  background:linear-gradient(92deg,#ffeaa6 0%,#ffd166 55%,#f7bc3a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 16px rgba(255,200,90,.28));
}
.vq{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.vq-no{display:inline-flex;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;font-weight:800;font-size:18px;background:var(--ic-bg);border:1px solid var(--ic-line);color:var(--ic-color);margin-bottom:16px}
.vq p{font-size:16.5px;line-height:1.78;font-weight:600}
/* 答案横幅：大版面 + 装饰引号 + 金色渐变大字 */
.vision-answer{
  position:relative;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,224,138,.20),rgba(166,218,255,.13) 55%,rgba(255,224,138,.16));
  border:1px solid rgba(255,213,110,.42);border-radius:26px;
  padding:48px 56px;margin-bottom:36px;text-align:center;
  box-shadow:var(--answer-shadow);
  overflow:hidden;
}
.vision-answer::before,.vision-answer::after{
  font-family:Georgia,"Times New Roman",serif;line-height:1;pointer-events:none;
  color:rgba(255,224,138,.20);font-size:150px;
}
.vision-answer::before{content:'\201C';position:absolute;left:28px;top:-22px}
.vision-answer::after{content:'\201D';position:absolute;right:28px;bottom:-92px}
.va-label{
  font-size:16px;letter-spacing:6px;color:#2a1c00;white-space:nowrap;
  background:linear-gradient(135deg,#ffe08a,#f0b431);
  border-radius:999px;padding:12px 28px;font-weight:800;
  box-shadow:0 6px 18px rgba(255,190,70,.35);
}
.vision-answer strong{
  font-size:clamp(28px,3.6vw,46px);letter-spacing:3px;line-height:1.3;
  background:linear-gradient(92deg,#ffeaa6 0%,#ffd166 55%,#f7bc3a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 16px rgba(255,200,90,.28));
}
@media (max-width:760px){.vision-answer{padding:34px 22px;gap:16px}.vision-answer::before,.vision-answer::after{font-size:90px}}
.vision-desc{max-width:920px;margin:0 auto 26px;text-align:center;font-size:16px;line-height:1.95;color:var(--muted)}
.vision-points{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.vp{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 30px;text-align:center;backdrop-filter:blur(6px)}
.vp b{display:block;font-size:20px;color:var(--brand-lt);letter-spacing:3px;margin-bottom:6px}
.vp span{font-size:14px;color:var(--muted)}

/* ===== 品牌历程 · 愿景/理念/价值观 ===== */
.values-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.vcard{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow);transition:.25s}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.vcard-ic{flex:0 0 57px;height:57px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:27px;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 8px 20px rgba(109,86,225,.35)}
.vcard h4{font-size:18px;color:var(--brand-lt);margin-bottom:8px;letter-spacing:1px}
.vcard p{font-size:15px;color:var(--muted);line-height:1.75}
@media (max-width:900px){.values-row{grid-template-columns:1fr}}

/* ===== 英语桌游效果（四阶段） ===== */
.effects-wrap{margin-top:64px}
.fx-head{text-align:center;margin-bottom:36px}
.fx-head h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:2px}
.fx-head .fx-sub{margin-top:10px;color:var(--muted);font-size:15.5px}
.fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fx-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;backdrop-filter:blur(6px);box-shadow:var(--shadow);transition:.25s}
.fx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
/* 文字在上、图片在下 */
.fx-card .fx-stage{order:1;align-self:flex-start}
.fx-card>p{order:2;margin-bottom:14px}
.fx-media{order:3;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.08);border:1px solid var(--ic-line);margin-bottom:0}
.fx-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.fx-card:hover .fx-media img{transform:scale(1.06)}
.fx-ph{width:100%;height:100%;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:rgba(255,255,255,.68)}
.fx-ph span{font-size:40px}
.fx-ph em{font-style:normal;font-size:12.5px;letter-spacing:1px}
.fx-stage{display:inline-block;background:var(--ic-bg);border:1px solid var(--ic-line);color:var(--ic-color);font-weight:700;font-size:14px;border-radius:999px;padding:5px 14px;margin-bottom:10px}
.fx-card p{font-size:14.5px;line-height:1.7;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.fx-media img{transition:none}.fx-card:hover .fx-media img{transform:none}}

/* ===== 品牌历程媒体（图片 / 视频） ===== */
.about-media img,.about-media video{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}

@media (max-width:960px){
  .vision-hero{grid-template-columns:1fr;gap:34px}
  .v-teacher{display:block;min-height:0;width:100%;max-width:380px;margin:0 auto}
  .v-teacher-frame{width:100%;height:auto;aspect-ratio:7/10}
  .v-teacher-frame img{left:-15px;width:104%;height:100%;object-position:62% 25%}
  .v-bubble{right:6px;top:-10px;font-size:14.5px;padding:14px 16px}
  .v-bubble::after{left:32%}
  .v-talk{display:block}
  .v-talk .vq{flex:none;padding:20px 22px}
  .v-talk .vq-no{width:44px;height:44px;font-size:18px;margin-bottom:12px}
  .v-talk .vq p{font-size:16.5px;line-height:1.76}
  .vision-grid{grid-template-columns:1fr}
  /* 剑桥老师提问：窄屏改为上下堆叠，照片居中、气泡贴下方 */
  .cam-teacher{grid-template-columns:1fr;gap:26px}
  .ct-photo{max-width:280px;margin:0 auto}
  .ct-talk{display:block}
  .ct-bubble{font-size:16.5px;padding:22px 22px;transform:none}
  .ct-bubble::after{left:50%;top:-9px;margin-top:0;margin-left:-9px;transform:rotate(45deg);border-radius:4px 0 0 0}
  .ct-answer{padding:22px 24px;gap:16px;margin-top:18px}
  .ct-answer::before,.ct-answer::after{font-size:72px}
  .fx-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .fx-grid{grid-template-columns:1fr}
}

/* ===== 「为什么选择卡卡」四宫格图标：彩色渐变底 + 白色图标（按花色区分配色） ===== */
#features .suit-ic{color:#fff;border:none;box-shadow:0 8px 22px rgba(30,14,86,.28)}
#features .suit-ic svg{width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
#features .suit-ic.ic-spade{background:linear-gradient(135deg,#8b6cf0,#5b3fd6)}
#features .suit-ic.ic-heart{background:linear-gradient(135deg,#ff7ba0,#e6456d)}
#features .suit-ic.ic-diamond{background:linear-gradient(135deg,#3fd0c9,#159ba8)}
#features .suit-ic.ic-club{background:linear-gradient(135deg,#ffb44d,#f08c1f)}
#features .suit-ic.ic-book{background:linear-gradient(135deg,#59a7ff,#2f6fe0)}
#features .suit-ic.ic-chart{background:linear-gradient(135deg,#4cd47d,#1fa856)}
#features .suit-ic.ic-shield{background:linear-gradient(135deg,#c07ef5,#8b46d9)}
#features .suit-ic.ic-mother{background:linear-gradient(135deg,#f9a8d4,#c05ce0)}
#features .suit-ic.ic-loop{background:linear-gradient(135deg,#4fd1e8,#2a6ff0)}

/* ===== 代理优势卡片右上角序号：金色渐变文字（同「完全可行」），透明度 80%；相比默认上移 10px ===== */
.card .card-no{
  top:3px;
  color:transparent;
  background:linear-gradient(92deg,#ffeaa6 0%,#ffd166 55%,#f7bc3a 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 16px rgba(255,200,90,.28));
  opacity:.8;
}